/* =====================================================================
   UNA DÉCADA EN 100 DÉCIMAS — hoja de estilo
   Paleta extraída directamente de la ilustración de Jorge Torrealba.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TIPOGRAFÍA DE TÍTULOS — Archivo Black, en local (sin CDN nuevo)
   ---------------------------------------------------------------------
   El título usa un estilo "cómic/impacto" tomado de la propia portada.
   Antes --display dependía de que el sistema operativo tuviera instalada
   "Archivo Black" (rarísimo fuera de macOS con Google Fonts sincronizado)
   y caía casi siempre en "Arial Black"/Impact, que varían de grosor entre
   Windows, macOS y Linux — por eso el título se veía distinto según quién
   abría la página.

   Este @font-face NO depende de ningún CDN en tiempo de visita: el
   archivo vive en assets/fuentes/archivo-black.woff2, servido por el
   propio hosting del sitio (se descargó una vez de Google Fonts,
   licencia SIL Open Font License — detalle en assets/fuentes/LEEME.md).
   Si algún día ese archivo faltara o se corrompiera, el navegador no
   puede cargarlo y --display sigue la pila de siempre sin romper nada:
   es un fallback seguro, no una promesa rota. */
@font-face{
  font-family:"Archivo Black Local";
  src:url("assets/fuentes/archivo-black.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* --- color (muestreado de la portada) --- */
  --cielo:#C9F8FE;
  --cielo-hondo:#A8EAF6;
  --rojo:#CB1500;
  --rojo-vivo:#F41F01;
  --amarillo:#FEDA02;
  --amarillo-neon:#F9FF19;
  --azul:#0049F0;
  --verde:#379928;
  --verde-claro:#94F085;
  --piel:#CD8346;
  --madera:#CE9043;
  --turquesa:#309ED1;
  --morado:#5E4972;
  --tinta:#0A0A0A;
  --papel:#FFF6E3;
  --papel-hondo:#F6E7C8;
  --arena:#E8D6B2;

  /* --- tipografía --- */
  --display:"Archivo Black Local","Archivo Black","Arial Black","Helvetica Neue Black",
            "Segoe UI Black",Impact,system-ui,sans-serif;
  --texto:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --verso:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;

  /* --- ritmo --- */
  --borde:3px;
  --sombra-dura:6px 6px 0 var(--tinta);
  --sombra-dura-sm:4px 4px 0 var(--tinta);
  --radio:14px;
  --nav-h:58px;

  /* --- ritmo: lo escribe ritmo.js. Los valores de aquí son solo el
         respaldo por si ese archivo no cargara.
         ESCRITORIO usa vh. MÓVIL usa svh (small viewport height): es el
         alto CON la barra del navegador visible, y no cambia cuando la
         barra se oculta al desplazarse. Si el navegador no conoce svh,
         ritmo.js escribe vh y todo sigue funcionando. --- */
  --escena-ancha:118vh;
  --escena-estrecha:88svh;
  --sensible-dur:.32s;
  --escena:var(--escena-ancha);   /* alto de cada escena narrativa */

  /* --- variables vivas (las escribe el motor de scroll) --- */
  --cam-x:0;
  --cam-y:0;
  --cam-s:1.02;
  --velo:0;
  --stage-op:1;
  --mx:0;   /* puntero -1..1 */
  --my:0;
  --prog:0; /* 0..1 progreso global */
}

*,*::before,*::after{box-sizing:border-box}

html{
  /* Sin scroll-behavior:smooth a propósito: Chrome lo aplica también al
     teclado (flechas, AvPág, espacio) y, sumado al scrub de GSAP, hacía
     que el recorrido se sintiera arrastrado. Los enlaces del menú siguen
     yendo suaves, pero lo resuelve el JS (ver experiencia.js). */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--texto);
  color:var(--tinta);
  background:var(--cielo);
  overflow-x:hidden;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

a{color:inherit}
/* red de seguridad: todo <button> es clicable por definición, y a
   diferencia de <a> el navegador no le pone cursor:pointer solo. Los
   componentes concretos (.btn, .chip, .cerrar, .mr-toggle...) ya lo
   fijan también, así que esto no cambia nada hoy — cubre lo que se
   añada mañana sin acordarse de repetirlo. */
button{cursor:pointer}

::selection{background:var(--amarillo);color:var(--tinta)}

:focus-visible{
  outline:4px solid var(--azul);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------------------------------------------------------------
   Saltar al contenido
   --------------------------------------------------------------- */
.saltar{
  position:fixed;top:-100px;left:12px;z-index:999;
  background:var(--amarillo);color:var(--tinta);
  border:var(--borde) solid var(--tinta);border-radius:10px;
  padding:.7rem 1.1rem;font-weight:800;text-decoration:none;
  transition:top .18s ease;
}
.saltar:focus{top:12px}

/* ---------------------------------------------------------------
   NOSCRIPT — aviso si el JavaScript está desactivado
   --------------------------------------------------------------- */
.noscript__aviso{
  position:relative;z-index:5;
  background:var(--papel);border-bottom:var(--borde) solid var(--tinta);
  padding:1.4rem 1.2rem;text-align:center;
}

/* ---------------------------------------------------------------
   NAVEGACIÓN
   --------------------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--nav-h);
  display:flex;align-items:center;gap:.75rem;
  padding:0 clamp(.75rem,3vw,1.6rem);
  background:transparent;
  transition:background .35s ease, box-shadow .35s ease;
}
.nav.solida{
  background:var(--papel);
  box-shadow:0 2px 0 var(--tinta);
}
.nav__marca{
  font-family:var(--display);
  font-size:clamp(.72rem,1.5vw,.86rem);
  letter-spacing:.02em;line-height:1.05;
  text-transform:uppercase;text-decoration:none;
  color:var(--rojo);
  padding:.35rem .55rem;
  border-radius:8px;
  background:color-mix(in srgb,var(--papel) 85%,transparent);
  border:2px solid var(--tinta);
  transform:rotate(-1.6deg);
  white-space:nowrap;
}
.nav__marca span{display:block;color:var(--tinta);font-size:.72em}
.nav__enlaces{margin-left:auto;display:flex;align-items:center;gap:.3rem}
.nav__enlaces a{
  text-decoration:none;font-weight:700;font-size:.9rem;
  padding:.45rem .7rem;border-radius:999px;
  border:2px solid transparent;
  white-space:nowrap;
  /* antes el hover cambiaba de golpe (sin transition): un detalle
     pequeño, pero es justo el tipo de cosa que separa "se ve bien" de
     "se siente pulido" */
  transition:background .18s ease,border-color .18s ease;
}
.nav__enlaces a:hover{border-color:var(--tinta);background:var(--papel)}
.nav__enlaces a.destacado{
  background:var(--rojo);color:#fff;border-color:var(--tinta);
  box-shadow:var(--sombra-dura-sm);
  transition:background .18s ease,border-color .18s ease,transform .16s ease,box-shadow .16s ease;
}
.nav__enlaces a.destacado:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--tinta)}
.nav__enlaces a.destacado:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--tinta)}
/* "El libro" / "Félix" quedan ocultos SIEMPRE, no solo en móvil: ahora
   que el menú ☰ existe en todos los tamaños de pantalla (ver abajo) y
   ya incluye esas dos secciones, mantenerlas aparte era redundante —
   dos maneras de llegar al mismo sitio en la misma barra. */
.nav__enlaces a.oculto-movil{display:none}

/* --- botón hamburguesa: la única navegación fuera de "Comprar", en
   cualquier tamaño de pantalla ---
   44×44: objetivo de toque mínimo recomendado. Las tres rayas giran a
   una X cuando el panel está abierto (aria-expanded ya lo pone
   experiencia.js — esto solo lo lee, cero JS nuevo). */
.nav__burger{
  display:flex;
  width:44px;height:44px;padding:0;margin-left:.4rem;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:var(--papel);border:2px solid var(--tinta);border-radius:10px;
  cursor:pointer;
  transition:background .16s ease,transform .12s ease;
}
.nav__burger:hover{background:var(--cielo)}
.nav__burger:active{transform:scale(.92)}
.nav__burger span{
  width:18px;height:2px;background:var(--tinta);border-radius:2px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease;
}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- panel desplegable de secciones, en cualquier tamaño de pantalla ---
   Aparte del nav__enlaces de arriba (que ahora se reduce a "Comprar"):
   sin esto no había forma de saltar a lector/recorrido/glosario sin
   desplazar a mano — ni en el teléfono ni, hasta ahora, en escritorio. */
.nav-movil{
  position:fixed;top:var(--nav-h);z-index:59;
  display:none;flex-direction:column;
  background:var(--papel);border:var(--borde) solid var(--tinta);border-top:0;
  box-shadow:var(--sombra-dura);
  padding:.5rem clamp(.75rem,3vw,1.6rem) 1rem;
  max-height:calc(100svh - var(--nav-h));overflow-y:auto;
  /* móvil: hoja de ancho completo bajo la barra */
  left:0;right:0;border-left:0;border-right:0;border-radius:0;
}
.nav-movil[hidden]{display:none}
/* pequeña entrada al abrir — juega sola una vez al pasar de
   display:none a flex, no hace falta JS extra para dispararla */
.nav-movil:not([hidden]){display:flex;animation:nav-movil-abrir .22s cubic-bezier(.16,1,.3,1)}
@keyframes nav-movil-abrir{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
/* escritorio/tablet: ya no hace falta que ocupe todo el ancho — se
   comporta como un menú desplegable normal, pegado a la derecha, bajo
   el botón ☰ */
@media (min-width:641px){
  .nav-movil{
    left:auto;right:clamp(.75rem,3vw,1.6rem);
    width:min(300px,90vw);
    border-left:var(--borde) solid var(--tinta);
    border-right:var(--borde) solid var(--tinta);
    border-radius:0 0 var(--radio) var(--radio);
    max-height:min(calc(100svh - var(--nav-h)),70vh);
  }
}
.nav-movil a{
  display:block;text-decoration:none;color:var(--tinta);
  font-weight:700;font-size:1.02rem;
  padding:.85rem .3rem;border-bottom:2px solid var(--arena);
  transition:background .12s ease;
}
.nav-movil a:last-of-type{border-bottom:0}
.nav-movil a:hover,.nav-movil a:active{background:var(--cielo)}
.nav-movil__destacado{
  margin-top:.6rem;border-bottom:0 !important;text-align:center;
  background:var(--rojo);color:#fff !important;border-radius:999px;
  border:2px solid var(--tinta);box-shadow:var(--sombra-dura-sm);
}

/* barra de progreso — colores de la bandera */
.progreso{
  position:fixed;top:0;left:0;z-index:61;height:4px;width:100%;
  background:transparent;pointer-events:none;
}
.progreso i{
  display:block;height:100%;
  width:calc(var(--prog) * 100%);
  background:linear-gradient(90deg,var(--amarillo) 0 33%,var(--azul) 33% 66%,var(--rojo) 66% 100%);
  background-size:100vw 100%;
  border-right:2px solid var(--tinta);
}

/* ---------------------------------------------------------------
   ESCENARIO — la portada como mundo
   --------------------------------------------------------------- */
.escenario{
  position:fixed;inset:0;z-index:0;
  overflow:hidden;
  background:var(--cielo);
  opacity:var(--stage-op);
  contain:layout paint;
  will-change:opacity;
}

/* la placa mantiene la proporción original del arte (4972×3024) */
.placa{
  --ar:1.6442;
  position:absolute;top:50%;left:50%;
  width:max(100vw, calc(var(--vh, 1vh) * 100 * var(--ar)));
  aspect-ratio:4972 / 3024;
  /* --cam-x / --cam-y se expresan en % de la PLACA (no del viewport):
     así el encuadre es idéntico en cualquier tamaño de ventana. */
  transform:
    translate3d(calc(-50% + var(--cam-x) * 1%), calc(-50% + var(--cam-y) * 1%), 0)
    scale(var(--cam-s));
  transform-origin:50% 50%;
  will-change:transform;
  /* evita el parpadeo de composición que provocan translate3d + scale
     encadenados en cada frame de scroll (visto en Chrome/Safari) */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.placa img{position:absolute;width:100%;height:100%;object-fit:fill}

/* Félix recortado — alineado píxel a píxel con la ilustración base.
   bbox del recorte dentro del arte original: 2503,549 → 4369,2961 de 4972×3024 */
.placa .capa-felix{
  position:absolute;
  left:50.34%;top:18.16%;width:37.53%;height:auto;
  object-fit:contain;
  transform:translate3d(calc(var(--fx-x,0) * 1%), calc(var(--fx-y,0) * 1%),0) scale(var(--fx-s,1));
  transform-origin:50% 80%;
  filter:drop-shadow(0 18px 22px rgba(10,10,10,.28));
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* velo crema que "aleja" la escena sin usar blur (barato y legible) */
.velo{
  position:absolute;inset:0;
  background:var(--papel);
  opacity:var(--velo);
  pointer-events:none;
}

/* --- adornos vectoriales: notas, estrellas, olas --- */
.adorno{position:absolute;pointer-events:none;will-change:transform}
.adorno svg{display:block;width:100%;height:auto;overflow:visible}
.nota path,.nota circle{fill:var(--tinta)}
.estrella path{fill:var(--amarillo);stroke:var(--tinta);stroke-width:6;stroke-linejoin:round}
.estrella.blanca path{fill:#fff}

@keyframes flotar{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(0,-16px,0) rotate(6deg)}
}
@keyframes flotar-lento{
  0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}
  50%{transform:translate3d(6px,-24px,0) rotate(5deg)}
}
@keyframes titilar{
  0%,100%{opacity:.55;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.08)}
}
.anim-flotar{animation:flotar 6s ease-in-out infinite}
.anim-flotar-lento{animation:flotar-lento 9s ease-in-out infinite}
.anim-titilar{animation:titilar 4.5s ease-in-out infinite}
.pausada *,.pausada{animation-play-state:paused !important}
/* además de pausar la animación, suelta la capa de composición mientras
   está velada: `will-change` reserva memoria de GPU todo el tiempo que
   esté puesto, aunque la animación esté en pausa. En iOS, con varios
   adornos a la vez, ese presupuesto se agota antes que en escritorio —
   es una causa conocida de tirones al desplazar en Safari. */
.pausada .adorno{will-change:auto}

/* seguimiento suave del puntero (solo ratón) */
@media (pointer:fine){
  .sensible{
    transform:translate3d(calc(var(--mx) * var(--f,10px)), calc(var(--my) * var(--f,10px)),0);
    transition:transform var(--sensible-dur,.32s) cubic-bezier(.2,.8,.2,1);
  }
}

/* ---------------------------------------------------------------
   SPRITES DE ESCENA (medallones del propio libro)
   --------------------------------------------------------------- */
.sprites{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.sprite{
  position:absolute;left:0;top:0;
  width:clamp(88px,11vw,168px);
  filter:drop-shadow(0 10px 16px rgba(10,10,10,.3));
  opacity:0;
  will-change:transform,opacity;
}

/* ---------------------------------------------------------------
   CINE — apertura editorial, antes de que la portada cobre vida
   ---------------------------------------------------------------
   Una sola fotografía en reposo, en tono sobrio: el contraste con el
   color y el movimiento de la escena 1 es la vuelta de tuerca. Reusa
   la misma ilustración de portada (mismo <picture>, mismo preload en
   <head>, cero peso extra) pero tratada aparte, fuera del sistema de
   cámara del escenario.

   Todo centrado y con el MISMO sistema tipográfico que el resto del
   sitio (--display en títulos y rótulos, --texto en el cuerpo — nada
   de una familia aparte solo para esta sección).

   NADA se anima con el scroll aquí — ni zoom, ni desvanecido. Es una
   fotografía en reposo de verdad, estática. Hubo dos intentos previos
   de ligar un zoom al scroll (uno con @keyframes + variable CSS, otro
   con scroll+rAF puro) y los dos se sintieron como un glitch: son un
   SEGUNDO motor de scroll corriendo en paralelo al de GSAP (que ya
   recorre las 7 escenas con el suyo), encima animando el transform de
   una imagen con filter — carísimo de recomponer en cada frame. Se
   quitó del todo. Lo único vivo es la pista «Desliza», y esa se
   apaga con un IntersectionObserver, no con scroll. */
.cine{
  position:relative;z-index:2;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  overflow:hidden;
  background:var(--tinta);
  isolation:isolate;
}
.cine__media{position:absolute;inset:0;overflow:hidden}
.cine__media picture,.cine__media img{position:absolute;inset:0;width:100%;height:100%}
.cine__media img{
  object-fit:cover;object-position:60% 35%;
  filter:grayscale(.5) brightness(.6) contrast(1.12) saturate(.9);
  transform:scale(1.02); /* margen mínimo: cubre el recorte del object-fit sin animarse */
}
.cine__velo{
  position:absolute;inset:0;
  /* velo parejo (ya no más oscuro abajo que arriba): el texto ahora
     va centrado, así que necesita contraste parejo en toda la placa */
  background:
    linear-gradient(180deg, rgba(10,10,10,.62), rgba(10,10,10,.58)),
    radial-gradient(85% 70% at 50% 45%, transparent, rgba(10,10,10,.35) 100%);
}
.cine__contenido{
  position:relative;z-index:1;
  padding:clamp(2rem,6vw,3rem);
  max-width:720px;margin:0 auto;
  color:var(--papel);
}
.cine__titulo{
  margin:.9rem 0 1.1rem;
  font-family:var(--display);text-transform:uppercase;letter-spacing:-.02em;
  /* más contenido que antes: a tamaño completo perdía nitidez visual
     y se sentía desproporcionado frente al resto de los títulos */
  font-size:clamp(1.7rem,4.4vw,2.9rem);line-height:1.12;
  white-space:pre-line;color:var(--papel);
}
.cine__sub{
  margin:0 auto 2rem;max-width:46ch;
  font-family:var(--texto);font-weight:400;
  font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.6;
  color:rgba(255,246,227,.86);
}
.cine__acciones{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.cine__btn{
  display:inline-flex;align-items:center;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(.82rem,1.3vw,.95rem);
  padding:.85rem 1.5rem;border-radius:999px;text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s ease,border-color .3s ease;
}
.cine__btn--lleno{background:var(--amarillo);color:var(--tinta)}
.cine__btn--lleno:hover{transform:translateY(-2px)}
.cine__btn--fantasma{background:transparent;color:var(--papel);border:1.5px solid rgba(255,246,227,.5)}
.cine__btn--fantasma:hover{border-color:var(--papel);transform:translateY(-2px)}

.cine__pista{
  position:absolute;left:50%;bottom:clamp(1.4rem,4vh,2.4rem);z-index:1;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  font-family:var(--display);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,246,227,.7);
  opacity:1;transition:opacity .3s ease;
}
/* la apaga cine.js (IntersectionObserver, sin scroll) apenas la
   sección empieza a salir de la ventana */
.cine__pista--oculta{opacity:0}
.cine__pista i{
  width:1px;height:28px;
  background:linear-gradient(rgba(255,246,227,.9),transparent);
  animation:cine-pista 1.8s ease-in-out infinite;
}
@keyframes cine-pista{
  0%,100%{transform:scaleY(.6);opacity:.5}
  50%{transform:scaleY(1);opacity:1}
}

/* entrada del héroe — CSS puro, no depende de GSAP ni de experiencia.js,
   así que se ve igual con o sin el CDN */
.cine-entra{opacity:0;animation:cine-entrar .9s cubic-bezier(.16,1,.3,1) forwards}
.rotulo.cine-entra{animation-delay:.1s}
.cine__titulo.cine-entra{animation-delay:.24s}
.cine__sub.cine-entra{animation-delay:.4s}
.cine__acciones.cine-entra{animation-delay:.54s}
@keyframes cine-entrar{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:820px){
  .cine__titulo{font-size:clamp(1.55rem,7.5vw,2.1rem)}
  .cine__sub{max-width:none}
  .cine__pista{display:none}
}

/* movimiento reducido — sistema o interruptor manual.
   El fondo y el texto ya son estáticos; lo único que queda por apagar
   es la entrada en capas y el guion que titila en la pista. */
body.mr .cine-entra{animation:none !important;opacity:1 !important;transform:none !important}
body.mr .cine__pista{display:none !important}
body.mr .cine__pista i{animation:none !important}
.no-js .cine-entra{opacity:1;animation:none}

/* ---------------------------------------------------------------
   CONTENIDO
   --------------------------------------------------------------- */
main{position:relative;z-index:2}

.escena{
  position:relative;
  min-height:var(--escena);
  display:flex;
  padding:calc(var(--nav-h) + 2rem) clamp(1rem,5vw,4rem) 3rem;
  scroll-margin-top:calc(var(--nav-h) + 10px);
}
.escena--centro{align-items:center;justify-content:center;text-align:center}
.escena--izq{align-items:center;justify-content:flex-start}
.escena--der{align-items:center;justify-content:flex-end}
.escena--abajo{align-items:flex-end;justify-content:center}

/* --- panel de papel: la unidad editorial --- */
.panel{
  position:relative;
  max-width:min(520px,90vw);
  background:var(--papel);
  border:var(--borde) solid var(--tinta);
  border-radius:var(--radio);
  box-shadow:var(--sombra-dura);
  padding:clamp(1.2rem,3vw,2rem);
  transform:rotate(-.5deg) translateY(28px);
  opacity:0;
  transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.panel.visible{opacity:1;transform:rotate(-.5deg) translateY(0)}
.panel--ancho{max-width:min(760px,92vw)}
.panel--recto{transform:rotate(0) translateY(28px)}
.panel--recto.visible{transform:none}

.rotulo{
  display:inline-block;
  font-family:var(--display);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--amarillo);color:var(--tinta);
  border:2px solid var(--tinta);border-radius:999px;
  padding:.28rem .8rem;margin-bottom:.9rem;
  transform:rotate(-1.5deg);
}
.rotulo--azul{background:var(--azul);color:#fff}
.rotulo--rojo{background:var(--rojo);color:#fff}
.rotulo--verde{background:var(--verde-claro)}

h1,h2,h3{font-family:var(--display);line-height:.98;letter-spacing:-.02em;margin:0 0 .6rem}
h1{font-size:clamp(2.1rem,6.2vw,4.2rem);text-transform:uppercase}
h2{font-size:clamp(1.6rem,3.7vw,2.7rem);text-transform:uppercase}
h3{font-size:clamp(1.05rem,2vw,1.3rem)}

.panel p{margin:0 0 .85rem;font-size:clamp(1rem,1.35vw,1.1rem)}
.panel p:last-child{margin-bottom:0}
.panel p.grande{font-size:clamp(1.08rem,1.7vw,1.28rem);font-weight:500}
.sutil{color:#5a5348;font-size:.92rem}
.sutil--espaciada{margin-top:1rem}

/* subtítulo dentro de un panel (p. ej. "Instrucciones" en la escena 4):
   separa del párrafo anterior sin heredar el margen por defecto de h3 */
.panel__subtitulo{margin-top:1.2rem}

.destaque{
  background:linear-gradient(transparent 62%, var(--amarillo) 62% 94%, transparent 94%);
  padding:0 .1em;
}

/* --- versos --- */
.versos{
  font-family:var(--verso);
  font-size:clamp(1rem,1.5vw,1.18rem);
  line-height:1.62;
  margin:0;
  white-space:pre-line;
  color:#231f18;
}
.versos--cita{
  border-left:5px solid var(--rojo);
  padding-left:1rem;
  margin:.4rem 0 .9rem;
}
/* la cita de cierre (escena 7) vive dentro de .cierre, que centra todo
   el texto — esta cita concreta se lee mejor alineada a la izquierda */
.versos--izquierda{text-align:left}
.fuente{
  display:block;font-family:var(--texto);font-size:.8rem;
  color:#6b6357;margin-top:.6rem;font-style:normal;
}

/* --- hoja rayada (escena 4) --- */
.hoja{
  background:
    repeating-linear-gradient(transparent 0 30px, rgba(48,158,209,.28) 30px 31px),
    var(--papel);
  background-position:0 12px;
  border-color:var(--tinta);
}
.hoja::before{
  content:"";position:absolute;left:26px;top:0;bottom:0;width:2px;
  background:rgba(244,31,1,.35);
}

/* ---------------------------------------------------------------
   BOTONES
   --------------------------------------------------------------- */
/* margin-bottom a propósito: A11 (animacion-gsap.js) hace que los
   botones entren con un rebote (`back.out`) que se pasa un poco de su
   posición final antes de asentarse. Sin este aire de más, ese rebote
   llega a tocar el texto de abajo (envío/ficha) durante el instante en
   que aún se están acomodando — es la superposición que se veía.
   2rem, no menos: el párrafo de abajo (.sutil--espaciada) ya trae su
   propio margin-top:1rem, y entre hermanos los márgenes verticales no
   se SUMAN, se funden en el mayor de los dos (margin collapse). Con
   .9rem acá, ganaba el 1rem de abajo y este margen no hacía nada — por
   eso el primer intento no se notó. Con 2rem, el que gana es este. */
.acciones{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem;margin-bottom:2rem}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-size:clamp(.82rem,1.3vw,.95rem);
  text-transform:uppercase;letter-spacing:.02em;text-decoration:none;
  padding:.8rem 1.25rem;border-radius:999px;
  border:var(--borde) solid var(--tinta);
  background:var(--papel);color:var(--tinta);
  box-shadow:var(--sombra-dura-sm);
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover,.btn:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--tinta)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tinta)}
.btn--primario{background:var(--rojo);color:#fff}
.btn--amarillo{background:var(--amarillo)}
.btn--azul{background:var(--azul);color:#fff}
.btn--fantasma{background:transparent;box-shadow:none}
.btn--fantasma:hover{background:var(--papel);box-shadow:var(--sombra-dura-sm)}

/* CTA de compra intermedio (escenas 2 y 4): mismo botón, más discreto —
   la escena 7 sigue siendo el cierre fuerte con los 6 botones completos.
   Esto son solo recordatorios de paso. */
.acciones--compactas{margin-top:1rem;margin-bottom:0}
.btn--chico{padding:.55rem .95rem;font-size:clamp(.72rem,1.1vw,.82rem)}

.pendiente{
  font-family:var(--texto);font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  background:var(--tinta);color:var(--amarillo);
  padding:.12rem .4rem;border-radius:4px;margin-left:.15rem;
}

/* ---------------------------------------------------------------
   ESCENA 1 — portada viva
   --------------------------------------------------------------- */
/* La escena 1 es la única con composición propia: el rótulo del libro
   ocupa una zona de la pantalla y la cámara deja a Félix en la otra. */
.escena--portada{
  align-items:stretch;justify-content:center;
  padding-bottom:clamp(4rem,10vh,7rem);
}
.portada{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  width:100%;max-width:min(1400px,92vw);gap:1.5rem;
}
.portada__alto,.portada__bajo{width:100%}

/* Antes era una tarjeta tipo pegatina con "UNA DÉCADA EN 100 DÉCIMAS" +
   "FÉLIX CARLOS" en dos imágenes planas. Se reemplazó por el libro en 3D
   (misma técnica y los mismos assets que ya usa la escena 7 — cubierta y
   lomo reales, nada nuevo que generar): la cubierta ya trae el título y
   el autor impresos, así que sigue siendo la misma información, ahora
   como objeto en vez de rótulo. Sin fondo/borde propio: el libro ya trae
   su propia sombra (`.libro3d`, `filter:drop-shadow`). */
.portada__titulo{
  margin:0;
  width:fit-content;
  --rot:-1.4deg;
}
/* Versión compacta para la escena 1: la de la escena 7 (`.libro3d` a
   secas) es la protagonista del cierre; esta es solo la firma inicial,
   más chica, y con un ángulo fijo — sin rotación ligada al scroll, para
   no repetir el efecto ni sumar movimiento a una escena que ya tiene el
   gesto de cámara de fondo. */
/* selector compuesto (.libro3d.libro3d--mini), no solo .libro3d--mini:
   así gana por especificidad y no depende de aparecer después de
   `.libro3d` en el archivo — con una sola clase, quien va después en la
   hoja gana el empate, y `.libro3d` (escena 7) está más abajo. */
.libro3d.libro3d--mini{
  width:min(190px,42vw);
  margin:0;
  filter:drop-shadow(0 14px 20px rgba(10,10,10,.35));
}
/* Mismo motivo que .libro3d--muestra (sección #formatos): a este tamaño
   el lomo se ve como una franja suelta pegada al borde en vez de leerse
   como grosor — tapa plana y sombra, sin el giro 3D completo. */
.libro3d.libro3d--mini .libro3d__cuerpo{transform:none}
.libro3d.libro3d--mini .libro3d__lomo,
.libro3d.libro3d--mini .libro3d__hojas{display:none}

.portada__bajo{
  display:flex;flex-direction:column;gap:.7rem;
  align-items:flex-start;max-width:min(480px,90vw);
}
.portada__lema{
  margin:0;
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(.92rem,1.9vw,1.35rem);line-height:1.15;
  background:var(--amarillo);border:var(--borde) solid var(--tinta);
  border-radius:16px;padding:.6rem 1.1rem;
  box-shadow:var(--sombra-dura-sm);
  --rot:-.8deg;
}
.portada__sub{
  margin:0;
  background:var(--papel);
  border:2px solid var(--tinta);border-radius:14px;
  padding:.75rem 1rem;font-size:clamp(.92rem,1.3vw,1.02rem);
  box-shadow:var(--sombra-dura-sm);
}

/* Escritorio: rótulo arriba-izquierda, mensaje abajo-izquierda.
   Félix queda libre en el tercio derecho. */
@media (min-width:821px){
  .portada__alto{display:flex;justify-content:flex-start}
  .portada__bajo{align-self:flex-start}
}
/* Móvil: rótulo arriba centrado, mensaje abajo a todo el ancho. */
@media (max-width:820px){
  .portada{gap:1rem}
  .portada__alto{display:flex;justify-content:center}
  .portada__titulo{--rot:-1deg}
  .libro3d.libro3d--mini{width:min(150px,44vw)}
  .portada__bajo{max-width:100%;align-items:stretch}
}

/* entrada por capas — conserva la rotación propia de cada pieza (--rot) */
.entra{opacity:0;transform:translateY(24px) scale(.96) rotate(var(--rot,0deg))}
.entra.on{
  opacity:1;transform:rotate(var(--rot,0deg));
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}

.pista{
  position:absolute;left:50%;bottom:clamp(1rem,4vh,2.5rem);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta);
  background:color-mix(in srgb,var(--papel) 80%,transparent);
  border-radius:999px;padding:.5rem .9rem;
  opacity:calc(1 - var(--prog) * 12);
}
.pista i{
  width:2px;height:22px;background:var(--tinta);border-radius:2px;
  animation:bajar 1.8s ease-in-out infinite;transform-origin:top;
}
@keyframes bajar{0%{transform:scaleY(0);opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(0) translateY(22px);opacity:0}}

/* ---------------------------------------------------------------
   FORMATOS — vitrina entre #cine y la escena 1. Flujo normal, sin
   position:fixed ni pin — no interfiere con la cámara ni el ritmo.
   --------------------------------------------------------------- */
.formatos{
  position:relative;z-index:2;
  /* antes era var(--cielo) a paño entero — se sentía como un bloque de
     color plano. Esto es la misma idea pero como sombra suave sobre el
     papel: se degrada desde arriba y no compite con las tarjetas. */
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(10,10,10,.12), transparent 70%),
    var(--papel);
  padding:clamp(2.4rem,6vw,4rem) clamp(1.2rem,5vw,3rem);
  text-align:center;
  scroll-margin-top:var(--nav-h);
}
.formatos__cab{max-width:640px;margin:0 auto clamp(1.6rem,4vw,2.4rem)}
.formatos__cab h2{margin:.5rem 0 0;font-size:clamp(1.4rem,3.4vw,2.1rem)}
.formatos__lista{
  list-style:none;margin:0 auto;padding:0;max-width:960px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;
}
.formato{
  flex:1 1 210px;max-width:260px;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  background:var(--papel);border:var(--borde) solid var(--tinta);
  border-radius:var(--radio);box-shadow:var(--sombra-dura-sm);
  padding:1.6rem 1.1rem 1.4rem;
}
.formato__nombre{margin:.6rem 0 0;font-size:1.05rem}
.formato__precio{margin:0;font-family:var(--display);color:var(--rojo);font-size:1.15rem}
/* separador entre el botón de Amazon (arriba) y el de envío directo con
   Félix (abajo) — solo aparece en las tarjetas físicas */
.formato__o{
  font-family:var(--display);text-transform:uppercase;font-size:.7rem;
  color:#8a8272;margin:.1rem 0;
}

/* Kindle: no es un objeto físico — pantalla, no libro. Mismo marco que
   el resto de "tarjetas" del sitio (papel + borde + sombra dura), con
   la cubierta encajada como si fuera la pantalla de un lector. */
.formato__pantalla{
  width:min(120px,60%);aspect-ratio:6/9;
  border:3px solid var(--tinta);border-radius:6px;overflow:hidden;
  box-shadow:0 0 0 4px var(--papel),0 0 0 5px var(--tinta),0 10px 18px rgba(10,10,10,.22);
  position:relative;
}
.formato__pantalla::after{
  /* reflejo sutil de pantalla — decorativo, no imita ningún dispositivo real */
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 30%);
}
.formato__pantalla img{width:100%;height:100%;object-fit:cover;display:block}

/* Tamaño de muestra: más chico que el de cierre (escena 7), más grande
   que la firma de escena 1. Ver la nota de especificidad en
   .libro3d.libro3d--mini — mismo motivo, mismo remedio. */
.libro3d.libro3d--muestra{width:min(120px,60%);margin:0;filter:drop-shadow(0 10px 16px rgba(10,10,10,.3))}
/* A este tamaño tan chico el lomo y el canto de páginas no se leen como
   grosor — se ven como una franja suelta pegada al borde. Se quitan del
   todo: la tapa de frente, plana, con su sombra propia, ya comunica
   "objeto" sin necesidad del giro 3D completo (ese lo tiene el libro
   grande de la escena 7). */
.libro3d.libro3d--muestra .libro3d__cuerpo{transform:none}
.libro3d.libro3d--muestra .libro3d__lomo,
.libro3d.libro3d--muestra .libro3d__hojas{display:none}

@media (max-width:640px){
  .formatos__lista{gap:.9rem}
  .formato{flex:1 1 45%;max-width:180px;padding:1.2rem .8rem 1.1rem}
}

/* ---------------------------------------------------------------
   ESCENA 5 — objetos que orbitan
   --------------------------------------------------------------- */
.orbita{
  position:fixed;inset:0;z-index:1;pointer-events:none;
}
.orbita__item{
  position:absolute;left:0;top:0;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  width:clamp(96px,12vw,158px);
  opacity:0;will-change:transform,opacity;
}
.orbita__item img{border-radius:50%}
.orbita__item span{
  font-family:var(--display);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;
  background:var(--papel);border:2px solid var(--tinta);border-radius:999px;
  padding:.2rem .55rem;
}

/* ---------------------------------------------------------------
   ESCENA 7 — el libro
   --------------------------------------------------------------- */
.libro3d{
  perspective:1600px;
  width:min(340px,62vw);
  margin:0 auto 1.6rem;
  filter:drop-shadow(0 26px 34px rgba(10,10,10,.38));
}
.libro3d__cuerpo{
  position:relative;
  aspect-ratio:6/9;
  transform-style:preserve-3d;
  transform:rotateY(calc(-26deg + var(--libro-rot,0) * 1deg)) rotateX(3deg);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.libro3d__cara{position:absolute;inset:0;backface-visibility:hidden;border-radius:2px 5px 5px 2px;overflow:hidden}
.libro3d__frente{transform:translateZ(15px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.libro3d__frente img{width:100%;height:100%;object-fit:cover}
.libro3d__lomo{
  position:absolute;left:0;top:0;height:100%;width:30px;
  transform:rotateY(-90deg) translateZ(15px);
  transform-origin:left center;
  overflow:hidden;
}
.libro3d__lomo img{width:100%;height:100%;object-fit:cover}
.libro3d__hojas{
  position:absolute;right:0;top:1.5%;height:97%;width:28px;
  transform:rotateY(90deg) translateZ(calc(100% - 15px));
  transform-origin:right center;
  background:repeating-linear-gradient(90deg,#fffdf5 0 2px,#ddd4bd 2px 3px);
  border-radius:0 3px 3px 0;
}

.cierre{
  text-align:center;
}
.cierre h2{font-size:clamp(1.9rem,5.4vw,3.6rem)}
.cierre .acciones{justify-content:center}

/* ---------------------------------------------------------------
   GLOSARIO
   --------------------------------------------------------------- */
.bloque{
  position:relative;z-index:2;
  background:var(--papel);
  border-top:var(--borde) solid var(--tinta);
  padding:clamp(2.6rem,7vw,5rem) clamp(1rem,5vw,4rem);
  /* #lector, #recorrido y #glosario son destinos del menú (móvil y de
     escritorio): sin esto, saltar aquí deja el título tapado bajo el
     nav fijo — el mismo ajuste que ya tiene .escena. */
  scroll-margin-top:var(--nav-h);
}
.franjas{
  height:16px;width:100%;
  background:linear-gradient(90deg,
    var(--amarillo) 0 20%, var(--azul) 20% 40%, var(--rojo) 40% 60%,
    var(--verde) 60% 80%, var(--morado) 80% 100%);
  border-top:var(--borde) solid var(--tinta);
  border-bottom:var(--borde) solid var(--tinta);
}
.contenedor{max-width:1080px;margin:0 auto}
/* párrafo de introducción de #lector y #glosario: mismo ancho de lectura
   en los dos bloques */
.intro-ancha{max-width:62ch}
/* #lector y #glosario: mismo centrado que ya trae #recorrido
   (.bloque--tinta). El párrafo de intro conserva su max-width en
   línea, pero ahora también se centra como bloque. */
#lector > .contenedor,
#glosario > .contenedor{text-align:center}
#lector > .contenedor > p,
#glosario > .contenedor > p{margin-left:auto;margin-right:auto}
.glosario__lista{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin:1.4rem 0 0;padding:0;list-style:none;
}
/* la misma lista de chips, reusada en la escena 5 para los objetos que
   orbitan: necesita menos separación porque ya está dentro de un panel */
.glosario__lista--objetos{margin-top:1rem}
.chip{
  font-family:var(--display);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.02em;
  background:var(--cielo);border:2px solid var(--tinta);border-radius:999px;
  padding:.45rem .9rem;cursor:pointer;color:var(--tinta);
  transition:background .15s ease,transform .15s ease;
}
.chip:hover{background:var(--amarillo);transform:translateY(-2px)}
.chip:active{transform:translateY(0) scale(.96)}
.chip[aria-expanded="true"]{background:var(--amarillo);box-shadow:var(--sombra-dura-sm)}
.chip--estatico{cursor:default}
.chip--estatico:active{transform:none}
.chip--estatico:hover{background:var(--cielo);transform:none}
.glosario__def{
  margin:1.2rem auto 0;padding:1rem 1.2rem;max-width:420px;text-align:left;
  background:var(--cielo);border:2px solid var(--tinta);border-radius:var(--radio);
  min-height:5.2rem;
}
.glosario__def dt{font-family:var(--display);text-transform:uppercase;font-size:1.05rem}
.glosario__def dd{margin:.3rem 0 0}

.glosario__buscar{display:block;max-width:420px;margin:1.4rem auto 0}
#glosario-buscar{
  width:100%;font:inherit;font-size:1rem;
  background:var(--papel);color:var(--tinta);
  border:var(--borde) solid var(--tinta);border-radius:999px;
  padding:.7rem 1.1rem;box-shadow:var(--sombra-dura-sm);
  transition:border-color .15s ease;
}
/* #8a8272 daba 3.5:1 — se nota apagado en pantallas brillantes.
   #79705d mantiene el mismo tono (marrón cálido) y sube a ~4.6:1 */
#glosario-buscar::placeholder{color:#79705d}
#glosario-buscar:hover{border-color:var(--azul)}
#glosario-buscar:focus-visible{outline:4px solid var(--azul);outline-offset:2px}
.glosario__vacio{
  list-style:none;font-size:.92rem;color:#6b6357;padding:.3rem 0;
}
.glosario__pista{margin:.6rem 0 0}

/* ---------------------------------------------------------------
   LECTOR DE DÉCIMAS — centrado, sin inclinación: es texto para leer,
   no una pegatina.
   --------------------------------------------------------------- */
.lector{
  position:relative;max-width:640px;margin:2rem auto 0;
  background:var(--papel);border:var(--borde) solid var(--tinta);
  border-radius:var(--radio);box-shadow:var(--sombra-dura);
  padding:clamp(1.4rem,4vw,2.4rem);
  text-align:center;
}
.lector__cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.6rem;margin-bottom:1.1rem}
.lector__numero{
  font-family:var(--display);text-transform:uppercase;font-size:1.05rem;
  background:var(--amarillo);border:2px solid var(--tinta);border-radius:999px;
  padding:.25rem .8rem;
}
.lector__etiqueta{font-family:var(--texto);font-size:.92rem;color:#5a5348}
.lector__texto{
  min-height:6.5rem;margin:0 auto;max-width:46ch;
  border-left:0;padding-left:0;text-align:center;
}
.lector__nav{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:1.4rem}
.lector__puntos{display:flex;gap:.4rem}
.punto{
  position:relative;
  width:9px;height:9px;border-radius:50%;padding:0;
  background:var(--cielo);border:2px solid var(--tinta);cursor:pointer;
  transition:background .15s ease,transform .12s ease;
}
/* el punto se ve chico a propósito (son solo 5), pero el objetivo de
   toque real es ~44×44 — el círculo visible no crece, el área de toque
   sí, con un pseudo-elemento invisible */
.punto::before{content:"";position:absolute;inset:-17px}
.punto:hover{transform:scale(1.15)}
.punto:active{transform:scale(.85)}
.punto[aria-current="true"]{background:var(--amarillo)}

/* ---------------------------------------------------------------
   LÍNEA DE TIEMPO
   --------------------------------------------------------------- */
.bloque--tinta{background:var(--tinta);color:var(--papel);text-align:center}
.bloque--tinta h2{color:var(--papel)}
.bloque--tinta > .contenedor{display:flex;flex-direction:column;align-items:center}
/* pila centrada y quieta — se quitó el riel lateral con puntos: sumaba
   inclinaciones y una línea de color que no aportaban nada a la lectura
   y sí "ruido" visual */
.recorrido__lista{
  list-style:none;margin:2.4rem 0 0;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;
  width:100%;
}
.recorrido__tarjeta{
  width:100%;max-width:560px;text-align:center;
  /* la tarjeta hereda `.panel`: fondo papel (claro). El bloque que la
     envuelve fuerza texto color papel para el resto de la sección
     (.bloque--tinta), así que aquí hay que devolver el color oscuro
     a mano — si no, queda texto claro sobre fondo claro, invisible. */
  color:var(--tinta);
}
.recorrido__anio{
  display:block;font-family:var(--display);font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rojo-vivo);
  margin-bottom:.45rem;
}
.recorrido__tarjeta h3{font-size:clamp(1.15rem,2.2vw,1.45rem);color:var(--tinta)}
.recorrido__tarjeta p{margin:0;font-size:1.04rem;line-height:1.55;color:var(--tinta)}
.recorrido__tarjeta .pendiente{margin-top:.6rem}
.recorrido__nota{max-width:62ch;margin-top:1.6rem;color:#d8d2c4;font-size:.94rem}

/* ---------------------------------------------------------------
   UTILIDAD — oculto visualmente, presente para lectores de pantalla
   --------------------------------------------------------------- */
.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------
   CRÉDITOS
   --------------------------------------------------------------- */
.creditos{
  position:relative;z-index:2;
  background:var(--tinta);color:var(--papel);
  padding:clamp(2.4rem,6vw,4rem) clamp(1rem,5vw,4rem) 3rem;
}
.creditos a{color:var(--amarillo)}
.creditos__rejilla{
  display:grid;gap:1.6rem 2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  max-width:1080px;margin:0 auto;
}
.creditos h3{color:var(--amarillo);font-size:.8rem;letter-spacing:.14em;margin-bottom:.5rem}
.creditos p,.creditos li{font-size:.9rem;color:#e8e2d5}
/* .versos fija su propio color de tinta oscura para leerse sobre papel
   claro; aquí el fondo es oscuro (--tinta), así que hay que devolverle
   el mismo tono claro que el resto del pie — igual que ya hace
   .recorrido__tarjeta a la inversa unas secciones más arriba */
.creditos .versos{color:#e8e2d5}
.creditos ul{list-style:none;padding:0;margin:0}
.creditos li{padding:.12rem 0}
.creditos__pie{
  max-width:1080px;margin:2.4rem auto 0;padding-top:1.4rem;
  border-top:1px solid #3a352c;font-size:.78rem;color:#9d968a;
}

/* ---------------------------------------------------------------
   DIÁLOGO BIO
   --------------------------------------------------------------- */
dialog{
  border:var(--borde) solid var(--tinta);border-radius:var(--radio);
  padding:0;max-width:min(620px,92vw);width:100%;
  background:var(--papel);color:var(--tinta);
  box-shadow:10px 10px 0 var(--tinta);
}
/* antes se abría de golpe (comportamiento nativo de <dialog>): una
   entrada breve con rebote se siente hecha a propósito. Se dispara
   sola al añadirse el atributo [open] — no hace falta tocar el JS que
   ya llama a showModal(). */
dialog[open]{animation:dlg-abrir .28s cubic-bezier(.16,1,.3,1)}
@keyframes dlg-abrir{
  from{opacity:0;transform:scale(.95) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
dialog::backdrop{background:rgba(10,10,10,.55);animation:dlg-fondo .28s ease}
@keyframes dlg-fondo{from{opacity:0}to{opacity:1}}
.dlg__cab{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.3rem;border-bottom:2px solid var(--tinta);
  background:var(--amarillo);
}
/* título de cada diálogo: mismo reset de margen en los dos, tamaño
   propio según el diálogo (la bio pesa más que el aviso de "pendiente") */
.dlg__titulo{margin:0}
.dlg__titulo--bio{font-size:1.3rem}
.dlg__titulo--pendiente{font-size:1.15rem}
.dlg__cuerpo{padding:1.3rem;max-height:66vh;overflow:auto}
.dlg__cuerpo p{margin:0 0 .8rem}
.cerrar{
  border:2px solid var(--tinta);background:var(--papel);border-radius:999px;
  width:34px;height:34px;font-size:1.1rem;line-height:1;cursor:pointer;flex:none;
  transition:background .15s ease,transform .12s ease;
}
.cerrar:hover{background:var(--cielo)}

/* ---------------------------------------------------------------
   FORMULARIO DE REGALO — mismo lenguaje visual que #glosario-buscar
   (papel + borde duro + sombra dura), sin librería de formularios.
   --------------------------------------------------------------- */
#form-regalo{display:flex;flex-direction:column;gap:1rem;margin-top:.9rem}
.campo{display:flex;flex-direction:column;gap:.35rem}
.campo--dos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.campo--dos{grid-template-columns:1fr}}
.campo label,.campo--dos label{font-size:.85rem;font-weight:700;color:var(--tinta)}
#form-regalo input,#form-regalo textarea{
  width:100%;font:inherit;font-size:1rem;
  background:var(--papel);color:var(--tinta);
  border:var(--borde) solid var(--tinta);border-radius:10px;
  padding:.65rem .9rem;box-shadow:var(--sombra-dura-sm);
  transition:border-color .15s ease;resize:vertical;
}
#form-regalo input::placeholder,#form-regalo textarea::placeholder{color:#79705d}
#form-regalo input:hover,#form-regalo textarea:hover{border-color:var(--azul)}
#form-regalo input:focus-visible,#form-regalo textarea:focus-visible{outline:4px solid var(--azul);outline-offset:2px}
#form-regalo button[type="submit"]{align-self:flex-start}
#form-regalo button[type="submit"]:disabled{opacity:.6;cursor:wait}
.regalo__estado{margin:0;min-height:1.3em;font-size:.9rem;font-weight:700}
.regalo__estado[data-tipo="exito"]{color:var(--verde)}
.regalo__estado[data-tipo="error"]{color:var(--rojo)}
.cerrar:active{transform:scale(.88)}

/* ---------------------------------------------------------------
   MÓVIL — composición propia, no una reducción
   --------------------------------------------------------------- */
@media (max-width:820px){
  :root{--escena:var(--escena-estrecha);--sombra-dura:5px 5px 0 var(--tinta)}
  .escena{align-items:flex-end;justify-content:center;padding-bottom:clamp(1.5rem,6vh,3rem)}
  .escena--centro{align-items:center}
  .panel{max-width:100%;width:100%}
  .sprite{width:clamp(74px,20vw,110px)}
  .orbita__item{width:clamp(72px,20vw,104px)}
  .placa .capa-felix{filter:none}
}

/* Refuerzo de legibilidad: en pantallas pequeñas el arte se aclara un poco */
@media (max-width:820px){
  .velo{opacity:calc(var(--velo) + .1)}
}

/* ---------------------------------------------------------------
   MODO GSAP
   ---------------------------------------------------------------
   Cuando GSAP toma el mando, el CSS deja de encargarse de opacidades,
   entradas y bucles: si no, sus @keyframes y transiciones pisarían el
   transform que escribe GSAP. El estado base pasa a ser "visible" y
   GSAP anima desde ahí con .from().
   --------------------------------------------------------------- */
body.gsap .panel,
body.gsap .entra{opacity:1;transform:none;transition:none}
body.gsap .pista{opacity:1}
body.gsap .anim-flotar,
body.gsap .anim-flotar-lento,
body.gsap .anim-titilar{animation:none}
/* el elemento fijado por ScrollTrigger no debe arrastrar su transición */
body.gsap .pin-spacer>.panel{transition:none}

/* ---------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition-duration:.001s !important}
}
body.mr .placa{transform:translate(-50%,-50%) scale(1.02) !important}
body.mr .capa-felix{transform:none !important}
body.mr .velo{opacity:.58 !important}
body.mr .panel,body.mr .entra{opacity:1 !important;transform:none !important}
body.mr .panel{transform:rotate(-.5deg) !important}
body.mr .sprites,body.mr .orbita,body.mr .pista{display:none}
body.mr .escena{min-height:auto;padding-block:clamp(3rem,9vh,5rem)}
body.mr .libro3d__cuerpo{transform:rotateY(-22deg) rotateX(3deg) !important}
/* Los libros chicos (firma de escena 1, vitrina de formatos) van sin
   giro siempre, también con movimiento reducido — si no, esta regla de
   arriba les devuelve el ángulo que les vuelve a mostrar el lomo. */
body.mr .libro3d.libro3d--mini .libro3d__cuerpo,
body.mr .libro3d.libro3d--muestra .libro3d__cuerpo{transform:none !important}

/* Interruptor de movimiento */
.mr-toggle{
  position:fixed;right:12px;bottom:12px;z-index:70;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  background:var(--papel);border:2px solid var(--tinta);border-radius:999px;
  padding:.45rem .8rem;cursor:pointer;box-shadow:var(--sombra-dura-sm);
  transition:transform .16s ease,box-shadow .16s ease;
}
/* 6px, no 5px: mismo salto que .btn desde el mismo --sombra-dura-sm de
   base (4px) — el .mr-toggle comparte el token, así que su hover debe
   escalar igual */
.mr-toggle:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--tinta)}
.mr-toggle:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--tinta)}

/* Sin JS */
.no-js .panel,.no-js .entra{opacity:1;transform:none}