/* ==========================================================================
   Mundo SILABIA · hoja de estilos
   1. Fuentes  2. Tokens  3. Base  4. Estructura  5. Componentes
   6. Secciones del inicio  7. Página de producto  8. Movimiento
   ========================================================================== */

/* 1. Fuentes (alojadas en el propio sitio: sin llamadas a terceros) */
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/literata-latin-opsz-normal.woff2") format("woff2-variations"),
       url("../fonts/literata-latin-opsz-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/literata-latin-opsz-italic.woff2") format("woff2-variations"),
       url("../fonts/literata-latin-opsz-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Kalam";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kalam-latin-400-normal.woff2") format("woff2");
}

/* 2. Tokens
   Diseño de un solo tema a propósito: papel, tinta verde y dorado. */
:root {
  color-scheme: light;

  --papel: #F5EEE1;
  --papel-2: #EDE3D0;
  --papel-ficha: #FBF7EE;
  --tinta: #1D2B27;
  --texto: #3A4541;
  --texto-suave: #555B52;
  --verde: #16423A;
  --verde-hondo: #0E2C26;
  --oro-texto: #7A5619;
  --oro-linea: #C9A65E;
  --oro-claro: #D9B46A;
  --oro-cita: #E3C27E;
  --oro-letra: #A27833;
  --linea: #DFD2BA;
  --linea-2: #D6C6A6;
  --bisel: #23302C;
  --crema-sobre-verde: #EFE7D6;

  --f-titulo: "Literata", Georgia, "Times New Roman", serif;
  --f-texto: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  --f-mano: "Kalam", "Comic Sans MS", cursive;

  --ancho: 1180px;
  --margen: max(24px, env(safe-area-inset-left, 0px));
  --margen-d: max(24px, env(safe-area-inset-right, 0px));

  --sombra-objeto: 0 24px 50px -26px rgba(40, 30, 15, 0.55);
  --curva-suave: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.1875rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
a { color: var(--verde); text-underline-offset: 0.18em; }
a:hover { color: var(--verde-hondo); }
:focus-visible { outline: 3px solid var(--oro-texto); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 24px; }

.saltar {
  position: absolute; left: 16px; top: -100px; z-index: 20;
  background: var(--verde); color: var(--papel); padding: 12px 20px; border-radius: 999px;
  font-weight: 700; text-decoration: none;
}
.saltar:focus { top: 12px; color: var(--papel); }

/* 4. Estructura */
.contenedor {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-left: var(--margen);
  padding-right: var(--margen-d);
}
.banda { border-top: 1px solid var(--linea); }
.banda--papel { background: var(--papel-2); border-bottom: 1px solid var(--linea); }
.banda--verde { background: var(--verde); color: var(--crema-sobre-verde); border-top: 0; }
.seccion { padding-block: clamp(64px, 8vw, 96px); }

/* Dos columnas que se apilan solas cuando no caben */
.dos-col { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; }
.dos-col > * { min-width: 0; }

/* 5. Componentes ---------------------------------------------------------- */

/* Cabecera */
.cabecera { border-bottom: 1px solid var(--linea); }
.cabecera__fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 32px; padding-block: 18px;
}
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--verde); }
.marca img { width: 50px; height: 50px; border-radius: 12px; }
.marca__textos { display: flex; flex-direction: column; line-height: 1.2; }
.marca__nombre { font-family: var(--f-titulo); font-size: 1.375rem; font-weight: 600; }
.marca__lema { font-size: 0.9375rem; color: var(--texto-suave); }
.menu { display: flex; flex-wrap: wrap; gap: 4px 32px; }
.menu a {
  position: relative; padding: 10px 0; font-size: 1.125rem; color: var(--tinta); text-decoration: none;
  background: linear-gradient(var(--oro-linea), var(--oro-linea)) left calc(100% - 4px) / 0 2px no-repeat;
  transition: background-size 0.35s var(--curva-suave), color 0.25s;
}
.menu a:hover { color: var(--verde); background-size: 100% 2px; }
.menu a[aria-current="page"] { font-weight: 700; color: var(--verde); background-size: 100% 2px; }

/* Tipografía de sección */
.antetitulo {
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro-texto);
}
.banda--verde .antetitulo { color: var(--oro-claro); }
.titulo-2 {
  font-family: var(--f-titulo); font-weight: 500; font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.125rem);
  line-height: 1.12; color: var(--verde); text-wrap: balance;
}
.cursiva { font-style: italic; font-weight: 400; }
.entrada { font-size: 1.25rem; color: var(--texto); max-width: 32em; }
.pila { display: flex; flex-direction: column; gap: 14px; }

/* Enlace con flecha (y su variante de vuelta) */
.enlace-flecha {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-size: 1.1875rem; font-weight: 700; color: var(--verde); text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid var(--oro-linea);
  transition: border-color 0.3s, color 0.3s;
}
.enlace-flecha svg { transition: transform 0.35s var(--curva-suave); flex: none; }
.enlace-flecha:hover { border-color: var(--verde); }
.enlace-flecha:hover svg { transform: translateX(4px); }
.enlace-flecha--volver:hover svg { transform: translateX(-4px); }

/* Botón principal */
.boton {
  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  font-size: 1.25rem; font-weight: 700; text-decoration: none;
  color: var(--papel); background: var(--verde); padding: 16px 30px; border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s, box-shadow 0.35s var(--curva-suave), transform 0.35s var(--curva-suave);
}
.boton:hover { color: var(--papel); background: var(--verde-hondo); transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(14, 44, 38, 0.6); }
.boton:active { transform: translateY(0); }

/* Etiqueta de estado (p. ej. Próximamente) */
.estado {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-size: 1.125rem; font-weight: 700; color: var(--verde); background: #E6DCC6;
  border-radius: 999px; padding: 10px 20px;
}

/* Marco de móvil para capturas reales */
.marco-movil {
  padding: 7px; background: var(--bisel); border-radius: 30px; box-shadow: var(--sombra-objeto);
  transition: transform 0.6s var(--curva-suave), box-shadow 0.6s var(--curva-suave);
}
.marco-movil img { border-radius: 23px; aspect-ratio: 489 / 731; object-fit: cover; }

/* Pie */
.pie { background: var(--papel-2); border-top: 1px solid var(--linea); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-block: 40px; }
.pie__marca { display: flex; flex-direction: column; gap: 4px; }
.pie__nombre { font-family: var(--f-titulo); font-size: 1.3125rem; font-weight: 600; color: var(--verde); }
.pie__lema { font-family: var(--f-titulo); font-style: italic; font-size: 1.0625rem; color: var(--texto-suave); }
.pie__menu { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.pie__menu a { font-size: 1.0625rem; padding: 8px 0; transition: color 0.25s; }
.pie__copy { flex-basis: 100%; font-size: 0.9375rem; color: var(--texto-suave); }

/* 6. Secciones del inicio -------------------------------------------------- */

/* Portada */
.portada { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding-block: 64px 72px; }
.portada__titulo {
  font-family: var(--f-titulo); font-weight: 500; font-size: clamp(2.75rem, 1.2rem + 5.4vw, 5.25rem);
  line-height: 1.04; letter-spacing: -0.015em; color: var(--verde); text-wrap: balance;
}
.portada__titulo span { display: block; }
.portada__sub { font-family: var(--f-titulo); font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); color: var(--texto); }
.portada__lema { font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.6875rem); color: var(--verde); text-wrap: balance; }
.quedate {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 1.0625rem; color: var(--texto-suave); text-decoration: none; padding: 10px 16px;
  transition: color 0.3s;
}
.quedate:hover { color: var(--verde); }
.quedate svg { transition: transform 0.4s var(--curva-suave); }
.quedate:hover svg { transform: translateY(3px); }

/* El libro-puerta y sus letras */
.libro { position: relative; width: 100%; max-width: 1060px; margin-top: 8px; container-type: inline-size; }
.libro__img { width: 100%; aspect-ratio: 1521 / 894; }
/* En móvil el libro gana un poco de tamaño ocupando parte del margen:
   la ilustración tiene aire transparente a los lados */
@media (max-width: 600px) {
  .libro { width: calc(100% + 36px); max-width: none; margin-inline: -18px; }
}
.libro__luz {
  position: absolute; left: 53%; top: 44%; width: 22%; height: 46%;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 150, 0.85), rgba(255, 214, 150, 0) 100%);
  mix-blend-mode: soft-light; opacity: 0;
}
.letra {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  pointer-events: none; font-family: var(--f-titulo); font-weight: 500; line-height: 1;
  font-size: 49px; font-size: 4.6cqi; color: var(--oro-letra);
  text-shadow: 0 1px 1px rgba(90, 60, 20, 0.25);
}
.letra__glifo { display: inline-block; transform: rotate(var(--giro)); }
.letra__flota { display: inline-block; }

/* Pequeños placeres */
.placeres__texto { flex: 1 1 460px; display: flex; flex-direction: column; gap: 22px; }
.placeres__foto { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
/* multiply: los claros de la foto se funden con el papel en lugar de dejar un halo */
.placeres__foto img { width: 100%; max-width: 500px; aspect-ratio: 500 / 238; mix-blend-mode: multiply; }
.placeres__foto figcaption { font-family: var(--f-titulo); font-style: italic; font-size: 1.0625rem; color: var(--texto-suave); }
.placeres__lista { flex: 1 1 400px; list-style: none; padding: 0; }
.placeres__lista li { padding-block: 26px; border-top: 1px solid var(--linea-2); display: flex; flex-direction: column; gap: 6px; }
.placeres__lista li:last-child { border-bottom: 1px solid var(--linea-2); }
.placeres__lista h3 { font-family: var(--f-titulo); font-weight: 500; font-size: 1.6875rem; line-height: 1.25; color: var(--verde); }
.placeres__lista p { color: var(--texto); }

/* Nuestra esencia */
.esencia { display: flex; flex-wrap: wrap; gap: 40px 80px; }
.esencia > * { min-width: 0; }
.esencia__cabeza { flex: 1 1 340px; display: flex; flex-direction: column; gap: 22px; }
.esencia__titulo { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(2.875rem, 1.6rem + 3.6vw, 4.5rem); line-height: 1.04; color: var(--papel); }
.esencia__titulo span { display: block; font-style: italic; }
.esencia__raya { width: 72px; height: 2px; background: var(--oro-linea); }
.esencia__texto { flex: 1.4 1 460px; display: flex; flex-direction: column; gap: 20px; font-size: 1.25rem; line-height: 1.65; }
.esencia__texto p { max-width: 32em; }
.esencia__cita { margin-top: 6px; font-family: var(--f-titulo); font-style: italic; font-size: 1.5rem; line-height: 1.45; color: var(--oro-cita); }

/* Nuestros rincones: la rejilla se adapta sola a 1, 2 o más rincones */
.rincones { display: flex; flex-direction: column; gap: 44px; }
.rincones__intro { max-width: 640px; }
.rincones__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 32px; }
.rincon {
  background: var(--papel-2); border-radius: 24px; padding: clamp(28px, 4vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 36px 48px;
}
.rincon .marco-movil { flex: 0 0 auto; margin-inline: auto; }
.rincon .marco-movil img { width: 196px; }
.rincon__texto { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rincon__titulo { font-family: var(--f-titulo); font-weight: 500; font-size: 2.125rem; line-height: 1.15; color: var(--verde); }
.rincon__titulo a { color: inherit; text-decoration: none; }
.rincon__nota { font-size: 1rem; color: var(--texto-suave); }
.rincon .enlace-flecha { margin-top: 8px; }
.rincon:hover .marco-movil { transform: translateY(-4px); box-shadow: 0 30px 56px -28px rgba(40, 30, 15, 0.6); }

/* Manifiesto */
.manifiesto { max-width: 900px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding-block: clamp(72px, 8vw, 96px) clamp(80px, 9vw, 104px); }
.manifiesto__frase { font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.3; color: var(--verde); text-wrap: balance; }

/* 7. Página de producto ---------------------------------------------------- */
.migas { display: flex; flex-wrap: wrap; gap: 8px; font-size: 1rem; color: var(--texto-suave); padding-top: 28px; }
.migas ol { display: contents; list-style: none; }
.migas li { display: inline-flex; gap: 8px; }
.migas li + li::before { content: "›"; color: var(--texto-suave); }
.producto { display: flex; flex-direction: column; gap: 40px; padding-block: 0 88px; }
.producto__texto { flex: 1 1 440px; display: flex; flex-direction: column; gap: 24px; }
.producto__titulo { font-family: var(--f-titulo); font-weight: 500; font-size: clamp(2.625rem, 1.3rem + 4.2vw, 4.625rem); line-height: 1.04; letter-spacing: -0.01em; color: var(--verde); text-wrap: balance; }
.producto__imagen { flex: 1 1 400px; display: flex; justify-content: center; }
.producto__imagen img { width: 100%; max-width: 520px; aspect-ratio: 516 / 490; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 60px -28px rgba(40, 30, 15, 0.5); }

.pasos__texto { flex: 1 1 440px; display: flex; flex-direction: column; gap: 28px; }
.pasos { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.pasos li { display: flex; gap: 18px; align-items: flex-start; }
.pasos__num {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--verde); color: var(--verde);
  font-family: var(--f-titulo); font-weight: 600; font-size: 1.3125rem; display: flex; align-items: center; justify-content: center;
}
.pasos h3 { font-size: 1.3125rem; font-weight: 700; }
.pasos p { margin-top: 2px; color: var(--texto); }

/* Página de ejemplo del juego */
.ejemplo-hueco { flex: 1 1 400px; display: flex; justify-content: center; }
.ejemplo {
  width: 100%; max-width: 470px; background: var(--papel-ficha); border: 1px solid #D8C8A8; border-radius: 20px;
  padding: 28px; box-shadow: 0 18px 44px -26px rgba(40, 30, 15, 0.5); display: flex; flex-direction: column; gap: 22px;
}
.ejemplo__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ejemplo__tema { font-family: var(--f-titulo); font-size: 1.375rem; font-weight: 600; color: var(--verde); }
.ejemplo__pagina { font-size: 1rem; color: var(--texto-suave); }
.ejemplo__palabras { display: flex; flex-direction: column; gap: 12px; }
.ejemplo__etiqueta { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oro-texto); }
.fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hueco { width: 62px; height: 52px; border-radius: 10px; border: 2px dashed #C2AE88; }
.ficha {
  min-width: 64px; height: 56px; padding: 0 12px; border-radius: 10px; background: #FFFBF3; border: 1px solid #CDBB9A;
  box-shadow: 0 4px 0 #B59E76; color: var(--tinta); font-family: var(--f-titulo); font-weight: 600; font-size: 1.4375rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.ficha--resuelta { min-width: 62px; height: 52px; padding: 0 10px; background: var(--verde); color: var(--papel); border: 0; box-shadow: none; font-size: 1.375rem; }
.ejemplo__check { margin-left: 6px; }
.ejemplo__mano { text-align: center; font-family: var(--f-mano); font-size: 1.375rem; color: var(--verde); }
.bandeja { background: #E6D8BC; border-radius: 14px; padding: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.ventajas-bloque { flex: 1 1 520px; display: flex; flex-direction: column; gap: 36px; }
.ventajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 32px 40px; }
.ventaja { display: flex; flex-direction: column; gap: 6px; border-top: 2px solid var(--oro-linea); padding-top: 16px; }
.ventaja h3 { font-size: 1.375rem; font-weight: 700; }
.ventaja p { color: var(--texto); }
.captura { flex: 0 1 300px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.captura .marco-movil { padding: 8px; border-radius: 34px; }
.captura .marco-movil img { width: 240px; border-radius: 26px; }
.captura figcaption { font-size: 1rem; color: var(--texto-suave); }

.ayuda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding-block: 64px 72px; }
.ayuda__titulo { font-family: var(--f-titulo); font-weight: 500; font-size: 1.875rem; color: var(--verde); }

/* Páginas de texto (legales, contacto, soporte) */
.texto-largo { max-width: 46rem; padding-block: 56px 88px; display: flex; flex-direction: column; gap: 20px; }
.texto-largo h1 { font-family: var(--f-titulo); font-weight: 500; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); line-height: 1.1; color: var(--verde); }
.pendiente { background: var(--papel-2); border: 1px dashed var(--linea-2); border-radius: 14px; padding: 18px 22px; color: var(--texto); }
.texto-largo h2 { font-family: var(--f-titulo); font-weight: 500; font-size: 1.625rem; line-height: 1.25; color: var(--verde); margin-top: 20px; text-wrap: balance; }
.texto-largo ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.texto-largo a { overflow-wrap: anywhere; }
.texto-largo .actualizado { font-size: 1rem; color: var(--texto-suave); }
/* Dato que falta por completar: visible a propósito hasta que se rellene */
.dato-pendiente { background: var(--papel-2); border: 1px dashed var(--oro-linea); border-radius: 6px; padding: 0 6px; font-weight: 700; color: var(--oro-texto); }

/* 8. Movimiento ------------------------------------------------------------
   Todo parte de un estado visible. Solo cuando el script confirma que puede
   animar (clase .anima en <html>) se ocultan los elementos para hacerlos
   entrar. Se anima solo opacidad y transformaciones. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Aparición al desplazarse */
  .anima [data-aparecer] {
    opacity: 0; transform: translate3d(0, 18px, 0);
    transition: opacity 0.9s var(--curva-suave), transform 1.1s var(--curva-suave);
    transition-delay: var(--retraso, 0s);
  }
  .anima [data-aparecer].visible { opacity: 1; transform: none; }

  /* Bienvenida de la portada */
  .anima .portada [data-entra],
  .anima .portada .libro__img { opacity: 0; }
  .anima .portada.lista [data-entra] {
    animation: sube 1s var(--curva-suave) both; animation-delay: var(--retraso, 0s);
  }
  .anima .portada.lista .libro__img { animation: libro-llega 1.8s var(--curva-suave) 0.35s both; }
  .anima .portada.lista .libro__luz { animation: luz 3.2s ease-in-out 1.2s both; }

  .anima .portada .letra { opacity: 0; }
  .anima .portada.lista .letra { animation: letra-sale 1.9s var(--curva-suave) both; animation-delay: var(--retraso); }
  .anima .portada.lista .quedate svg { animation: invita 1.6s ease-in-out 3.4s 2; }

  /* Las letras siguen un poco al puntero (solo ratón; lo gestiona el script) */
  .letra__flota { transform: translate3d(calc(var(--px, 0) * var(--prof, 1) * 1px), calc(var(--py, 0) * var(--prof, 1) * 1px), 0); transition: transform 1.2s var(--curva-suave); }

  /* Fichas de la página de ejemplo */
  .anima .ejemplo .bandeja .ficha { opacity: 0; transform: translate3d(0, -12px, 0); }
  .anima .ejemplo.visible .bandeja .ficha {
    opacity: 1; transform: none;
    transition: opacity 0.6s var(--curva-suave), transform 0.8s var(--curva-suave);
    transition-delay: calc(0.5s + var(--i, 0) * 0.09s);
  }
  .anima .ejemplo .ficha--resuelta { transition: background-color 0.6s, color 0.6s; transition-delay: 1.3s; }
  .anima .ejemplo:not(.visible) .ficha--resuelta { background: #FFFBF3; color: var(--tinta); box-shadow: inset 0 0 0 1px #CDBB9A; }
  .anima .ejemplo__check path { stroke-dasharray: 24; stroke-dashoffset: 24; }
  .anima .ejemplo.visible .ejemplo__check path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s var(--curva-suave) 1.7s; }
}

@keyframes sube {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes libro-llega {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes luz {
  0% { opacity: 0; }
  40% { opacity: 0.75; }
  100% { opacity: 0; }
}
/* Cada letra sale de la puerta (--dx, --dy) y se posa en su sitio */
@keyframes letra-sale {
  0% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.55); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes invita {
  0%, 100% { transform: none; }
  50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .libro__luz { display: none; }
}