/* La góndola: la misma tienda, la misma noche, a las 02:10. La pared es WebGL; lo que se lee, HTML.
   El capítulo empieza y termina exactamente en --night: el canvas se funde a ese color. */
#shelf{position:relative;height:100vh;height:100svh;min-height:680px;overflow:hidden;isolation:isolate;background:var(--night);color:var(--on-night);scroll-margin-top:calc(var(--head)*-1)}
#shelf .shelf-wall,#shelf .shelf-still,#shelf .shelf-papers{position:absolute;inset:0;width:100%;height:100%;display:block}
#shelf .shelf-wall{opacity:0;transition:opacity .6s ease-out}
#shelf.lit .shelf-wall{opacity:1}
#shelf.nogl .shelf-wall{display:none}
#shelf .shelf-still{object-fit:cover;object-position:62% 24%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 calc(var(--foot,62%) - 130px),transparent var(--foot,62%));mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 calc(var(--foot,62%) - 130px),transparent var(--foot,62%))}
#shelf .shelf-papers{pointer-events:none}
#shelf .shelf-stage{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:none;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent}
#shelf .shelf-stage:focus-visible{outline-offset:-12px;border-radius:var(--r-m)}
#shelf.nogl .shelf-stage,#shelf.calm .shelf-stage{cursor:default}

/* ===== Lo que está sobre la pared ===== */
#shelf .shelf-deck{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(22px,5vh,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);column-gap:clamp(24px,5vw,72px);align-items:end;pointer-events:none}
#shelf .shelf-say,#shelf .shelf-act{pointer-events:auto;cursor:default}
#shelf h2{font-size:clamp(2.125rem,min(4vw,6.8vh),3.875rem);text-wrap:initial}
#shelf h2 .l{display:block;text-wrap:balance}
#shelf .shelf-lede{margin:clamp(12px,2vh,18px) 0 0;max-width:44em;font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.46;color:var(--on-night-2);text-wrap:pretty}

#shelf .shelf-act{display:grid;gap:14px}
#shelf .shelf-count{display:grid;gap:4px}
/* Su propio negocio es la cifra grande; la góndola de ejemplo va debajo, más chica. */
#shelf .shelf-own{margin:0 0 6px;font-size:.875rem;line-height:1.3;color:var(--on-night)}
#shelf #shelfOwnFor{display:block;font-size:.9375rem;color:var(--on-night)}
#shelf .shelf-own b{font-size:clamp(1.375rem,1.8vw,1.75rem);font-weight:400;line-height:1.2;letter-spacing:-.02em;color:var(--lamp);font-variant-numeric:tabular-nums}
#shelf .shelf-tally{margin:0;font-size:1rem;font-weight:500;line-height:1.3;letter-spacing:-.006em}
#shelf .shelf-tally b{font-weight:600}
#shelf .shelf-hint{margin:0;font-size:.875rem;line-height:1.42;color:var(--on-night-2);text-wrap:pretty}
#shelf .shelf-again{display:inline;margin:0 0 0 2px;padding:0;border:0;background:none;color:var(--on-night);font:inherit;font-weight:600;text-decoration:underline;text-decoration-color:var(--lamp);text-underline-offset:.22em;text-decoration-thickness:1px;cursor:pointer}
#shelf .shelf-again[hidden]{display:none}
@media (hover:hover){#shelf .shelf-again:hover{color:var(--lamp)}}

#shelf .shelf-rubros{min-width:0;margin:0;padding:0;border:0}
#shelf .shelf-chips{display:flex;flex-wrap:wrap;gap:6px}
#shelf .shelf-chip{position:relative;display:block}
#shelf .shelf-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
#shelf .shelf-chip span{display:block;height:36px;padding:0 14px;border:1px solid var(--line-night);border-radius:var(--r-pill);font-size:.90625rem;font-weight:500;line-height:34px;white-space:nowrap;color:var(--on-night);transition:background-color .18s,border-color .18s,color .18s}
@media (hover:hover){#shelf .shelf-chip input:hover+span{border-color:var(--on-night)}}
#shelf .shelf-chip input:checked+span{background:var(--on-night);border-color:var(--on-night);color:var(--night);font-weight:600}
#shelf .shelf-chip input:focus-visible+span{outline:2px solid var(--lamp);outline-offset:2px}
#shelf .shelf-go{box-sizing:border-box;justify-content:space-between;width:100%;min-height:52px;padding:0 20px 0 24px}
#shelf .shelf-go svg{flex:none;transition:transform .25s var(--ease)}
@media (hover:hover){#shelf .shelf-go:hover svg{transform:translateY(2px)}}

/* Sin WebGL: la foto compuesta y sus papeles, en HTML para que estén en los dos idiomas. */
#shelf .shelf-paper{--k:1;position:absolute;box-sizing:border-box;padding:calc(9px*var(--k)) calc(14px*var(--k)) 0;height:calc(80px*var(--k));overflow:hidden;white-space:nowrap;border:1px solid rgba(242,239,232,.15);border-radius:var(--r-m);background:rgba(13,15,19,.78);-webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35);box-shadow:inset 0 1px 0 rgba(242,239,232,.07),0 14px 30px -12px rgba(0,0,0,.75);color:var(--on-night-2);font-size:calc(12.4px*var(--k));font-weight:400;line-height:1.3}
#shelf .shelf-paper b{display:block;font-size:calc(19px*var(--k));font-weight:500;line-height:1.2;letter-spacing:-.014em;color:var(--on-night)}
#shelf .shelf-paper span{display:block;font-size:calc(14px*var(--k));font-weight:500;line-height:1.3;color:var(--lamp)}

/* ===== Celular: todo apilado, el agente arriba ===== */
@media (max-width:820px){
  #shelf{min-height:700px}
  #shelf .shelf-deck{grid-template-columns:minmax(0,1fr);row-gap:12px;bottom:max(16px,env(safe-area-inset-bottom))}
  #shelf h2{font-size:clamp(1.875rem,8.8vw,3rem)}
  #shelf .shelf-lede{margin-top:8px;font-size:.96875rem;line-height:1.38}
  #shelf .shelf-lede .more{display:none}
  #shelf .shelf-act{gap:10px}
  #shelf .shelf-own{margin-bottom:3px;font-size:.8125rem}
  #shelf #shelfOwnFor{font-size:.875rem}
  #shelf .shelf-tally{font-size:.9375rem}
  #shelf .shelf-hint{font-size:.8125rem;line-height:1.32}
  #shelf .shelf-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gutter)*-1);padding:2px var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
  #shelf .shelf-chips::-webkit-scrollbar{display:none}
  #shelf .shelf-chip{flex:none}
  #shelf .shelf-go{min-height:50px}
}
@media (max-height:760px) and (min-width:821px){
  #shelf .shelf-lede{font-size:.9375rem}
  #shelf .shelf-hint{font-size:.8125rem}
  #shelf .shelf-act{gap:10px}
  #shelf .shelf-chip span{height:32px;line-height:30px;font-size:.84375rem}
  #shelf .shelf-go{min-height:46px}
}
@media (prefers-reduced-motion:reduce){
  #shelf .shelf-wall,#shelf .shelf-chip span,#shelf .shelf-go svg{transition:none}
  #shelf .shelf-go:hover svg{transform:none}
}