/* ═══════════════════════════════════════════════
   FUENTE BASE

   Nunito auto-alojada en /fonts en vez de fonts.googleapis.com: el <link>
   de Google bloqueaba el render y además obligaba a dos conexiones nuevas
   (googleapis + gstatic) antes de poder pintar nada.

   Es la variable font, así que un único archivo de 39 KB cubre todo el eje de
   grosor (200-1000), no solo los cinco pesos que usa el sitio hoy
   (400 · 600 · 700 · 800 · 900). Si mañana hace falta otro, ya está dentro:
   no hay que descargar nada ni añadir un @font-face más.

   font-display:swap deja que el texto se pinte con la fuente del sistema
   mientras llega Nunito, en vez de dejar la pantalla en blanco.
═══════════════════════════════════════════════ */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/cuentos/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/cuentos/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body {
  font-family: 'Nunito', sans-serif;
}

/* ═══════════════════════════════════════════════
   PANTALLAS — show/hide con transición
═══════════════════════════════════════════════ */
.screen {
  display: none;
}

.screen.active {
  display: block;
}

.screen.screen-enter-forward,
.screen.screen-enter-backward {
  animation-duration: 0.38s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
}

.screen.screen-enter-forward {
  animation-name: screenEnterFromRight;
}

.screen.screen-enter-backward {
  animation-name: screenEnterFromLeft;
}

.screen.screen-exit-forward,
.screen.screen-exit-backward {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.screen.screen-exit-forward,
.screen.screen-exit-backward {
  animation-duration: 0.22s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.screen.screen-exit-forward {
  animation-name: screenExitToLeft;
}

.screen.screen-exit-backward {
  animation-name: screenExitToRight;
}

/* Avance: la pantalla/contenido sale por la izquierda y la nueva entra desde la
   derecha con una ligera "elevación" y sombra de pliegue en su borde izquierdo */
@keyframes screenExitToLeft {
  from { opacity: 1; transform: translateX(0)    scale(1); }
  to   { opacity: 0; transform: translateX(-36px) scale(0.98); }
}

@keyframes screenEnterFromRight {
  from { opacity: 0; transform: translateX(36px) scale(0.98); box-shadow: -22px 0 28px -12px rgba(0, 0, 0, 0.16); }
  to   { opacity: 1; transform: translateX(0)     scale(1);    box-shadow: -22px 0 28px -12px rgba(0, 0, 0, 0); }
}

/* Retroceso: efecto inverso */
@keyframes screenExitToRight {
  from { opacity: 1; transform: translateX(0)   scale(1); }
  to   { opacity: 0; transform: translateX(36px) scale(0.98); }
}

@keyframes screenEnterFromLeft {
  from { opacity: 0; transform: translateX(-36px) scale(0.98); box-shadow: 22px 0 28px -12px rgba(0, 0, 0, 0.16); }
  to   { opacity: 1; transform: translateX(0)      scale(1);    box-shadow: 22px 0 28px -12px rgba(0, 0, 0, 0); }
}


/* ═══════════════════════════════════════════════
   TARJETAS DE HISTORIA (pantalla 1)

   Rediseño a portada cuadrada (antes eran apaisadas, con la insignia de
   tiempo a un lado): cinta de estado sobre la esquina y dos cuadraditos de
   metadatos —duración y finales— bajo el título.

   La estantería ocupa el ancho del contenedor (hoy 1120px, ver
   #kreaplay-widget), no la columna estrecha de lectura.
═══════════════════════════════════════════════ */
/* Dos columnas fijas en móvil —a una sola las portadas salen enormes y solo
   cabe un cuento por pantalla— y a partir de ahí `auto-fill`, que reparte
   las que quepan sin tener que ir declarando un breakpoint por número de
   cuentos: con 5 y el contenedor a tope salen 5 en fila, como en Yoto. */
.story-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
}

@media (min-width: 560px) {
  .story-grid {
    /* auto-fit (no auto-fill) colapsa las columnas vacías cuando hay menos
       tarjetas de las que caben en una fila, y minmax con techo fijo (no
       1fr) evita que esas columnas de más se repartan el hueco sobrante:
       sin esto, con 4 tarjetas y sitio para 5, el grid seguía creando la
       quinta columna vacía y las tarjetas se apiñaban a la izquierda. */
    grid-template-columns: repeat(auto-fit, minmax(235px, 260px));
    justify-content: center;
    gap: 1.25rem;
  }
}

/* flex column y no block: el grid ya estira cada tarjeta a la altura de la
   fila (comportamiento por defecto de CSS Grid), así que con .card-in
   también en columna y .c-meta empujado con margin-top:auto, los
   cuadraditos naranjas de tiempo/finales quedan siempre pegados abajo del
   todo — a la misma altura en toda la fila, tenga la tarjeta una sinopsis
   de una línea o de tres, lleve etiquetas grises o no. */
.card {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 2px solid #F0E0C8;
  border-radius: 1rem;
  background: #FDF6EC;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* El estado interactivo es solo de las jugables (<a>): la de "proximamente"
   es un <div> a propósito (ver build.js) y no debe fingir que se puede pulsar. */
a.card:hover {
  border-color: #F07B2C;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(240, 123, 44, 0.13);
}

a.card:active { transform: translateY(0); box-shadow: none; }

a.card:focus-visible {
  outline: 2px solid #F07B2C;
  outline-offset: 2px;
}

.cover {
  aspect-ratio: 1 / 1;
  width: 100%;
  display: block;
  background-size: cover;
  background-position: center;
  border-radius: 0.8125rem 0.8125rem 0 0;
}

.card-in {
  padding: 0.75rem 0.8125rem 0.875rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.c-title {
  font-weight: 900;
  color: #1f2937;
  font-size: 0.9375rem;
  line-height: 1.3;
  margin: 0 0 0.3rem;
}

.c-syn {
  color: #6b7280;
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: 0 0 0.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Género, edad y una enseñanza — gris para no competir con la cinta naranja
   ni con los cuadraditos de duración/finales, que son los que sí llevan
   color de marca. Máximo 3 (ver cardTags() en build.js). `wrap` y no
   `overflow:hidden`: con tres chips y una tarjeta estrecha (2 columnas en
   móvil) el tercero no siempre cabe en la fila, y recortarlo a media
   palabra se lee como un fallo, no como un límite de espacio. */
.c-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin: 0 0 0.5rem;
}

.c-tag {
  background: #F3F1EC;
  color: #8b8478;
  font-size: 0.5938rem;
  font-weight: 700;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}

/* margin-top:auto es lo que la pega abajo del todo del card-in en columna. */
.c-meta { display: flex; gap: 0.4rem; margin: auto 0 0; }

.mb {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #FDF6EC;
  border: 1.5px solid #F0E0C8;
  border-radius: 0.5rem;
  padding: 0.3rem 0.45rem;
  font-weight: 800;
  font-size: 0.62rem;
  color: #F07B2C;
  line-height: 1;
}

.mb svg { width: 18px; height: 18px; flex: none; }

/* ── Cinta de estado, esquina superior izquierda ──
   El pico (::after) es lo que la diferencia de una insignia cualquiera: se
   lee como una etiqueta pegada a la tarjeta, no como un botón flotando. */
.flag {
  position: absolute;
  top: 0.6rem;
  left: -0.3rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.55rem 0.28rem 0.6rem;
  font-size: 0.6rem;
  font-weight: 900;
  border-radius: 0.2rem 0.25rem 0.25rem 0.2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

.flag::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.3rem;
  border-width: 0 0.3rem 0.3rem 0;
  border-style: solid;
}

.flag svg { width: 12px; height: 12px; flex: none; }

/* Bloqueado: se paga con el correo. */
.flag--email { background: #F07B2C; color: #fff; }
.flag--email::after { border-color: transparent #A8500F transparent transparent; }

/* Ya desbloqueado: no desaparece la cinta, cambia de color — haber pagado
   con el correo tiene que seguir viéndose, o la llave no se siente como
   una llave. La swapea widget.js#refreshCardFlags según lib/access.js. */
.flag--ok { background: #FDF6EC; color: #3F7F6E; border: 1.5px solid #3F7F6E; }
.flag--ok::after { border-color: transparent #C9D9D3 transparent transparent; }

/* Platanín: no es que esté bloqueado, es que no existe todavía. */
.flag--pronto { background: #3F7F6E; color: #fff; }
.flag--pronto::after { border-color: transparent #2A5A4D transparent transparent; }

/* Las dos cintas de estado del catálogo ("Nueva", "Muy pronto") van más
   grandes que la del candado: son las que tienen que verse de un vistazo al
   recorrer la rejilla, y su texto es corto. La del candado se queda en
   0.6rem — "Desbloquéalo con tu email" a este cuerpo no cabe en el ancho de
   tarjeta que hay en móvil. */
.flag--nueva,
.flag--pronto {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem 0.3rem 0.65rem;
}

/* El símbolo de estas dos cintas es un carácter (✦, ⧗), no un <svg> del
   sprite: ver cardFlag() en build.js. Va algo mayor que el texto porque a
   igual cuerpo se veía pequeño al lado de una letra de peso 900, y con
   line-height 1 para que no descuadre la altura de la cinta. */
.flag__glifo {
  font-size: 1.15em;
  line-height: 1;
}

/* Recién publicado. Rosa saturado con texto blanco, como las otras dos cintas
   sólidas: la cinta se pinta ENCIMA de la ilustración, que cambia con cada
   cuento, así que necesita un color que aguante sobre cualquier fondo. El
   amarillo de marca no vale aquí — se fundía con el logotipo amarillo de la
   propia portada de Detectives. Y no puede ser ni el naranja del candado ni
   el verde de "Muy pronto": esos ya significan otra cosa. */
.flag--nueva { background: #CE3D65; color: #fff; }
.flag--nueva::after { border-color: transparent #8E2242 transparent transparent; }

/* Casilla reservada para lo que aún no se ha publicado: rayado en vez de
   portada real, sin los estados de :hover de una tarjeta pulsable porque no
   lo es (build.js la genera como <div>, no como <a>). */
.card--ghost {
  border-style: dashed;
  border-color: #E0CFB4;
  background: #FBF3E6;
  opacity: 0.85;
}

.card--ghost .cover {
  background-image: repeating-linear-gradient(-45deg, #F6EDDF, #F6EDDF 8px, #F1E5D2 8px, #F1E5D2 16px);
}


/* ═══════════════════════════════════════════════
   CTA "PROYECTOR" (pantalla de desenlace)

   Banda oscura que corta con el resto de la pantalla, clara. Lleva el
   logotipo real de KreaPlay dentro (.brand__word, definido más abajo junto a
   la cabecera del selector): mismos colores de marca, no un naranja inventado
   para la ocasión.
═══════════════════════════════════════════════ */
.cta-proyector {
  display: block;
  width: 100%;
  text-align: center;
  cursor: pointer;
  font: inherit;
  background: #1f2937;
  border: 1px solid transparent;
  border-radius: 1.125rem;
  padding: 1.125rem 1.25rem;
  margin: 1.25rem 0 0;
  position: relative;
  overflow: hidden;
  /* El hover se enciende despacio hacia el amarillo de marca (#FCA403), no
     de golpe: 900ms y no los 150ms de un botón normal. */
  transition: transform 0.15s ease, background-color 0.9s ease, border-color 0.9s ease, box-shadow 0.9s ease;
  /* Y sin ratón encima se enciende solo cada 5 s, con el mismo gesto: es el
     único puente a KreaPlay de toda la pantalla y, quieto del todo, pasa
     desapercibido al final del desenlace. */
  animation: ctaLatido 5s ease-in-out infinite;
}

.cta-proyector:hover {
  transform: translateY(-1px);
  /* Antes era un marrón casi indistinguible del reposo — se nota que
     "algo" cambia, pero no lee como "se enciende en amarillo". Este tono
     ya es visiblemente cálido. */
  background: #4A2E0A;
  border-color: #FCA403;
  box-shadow: 0 0 0 1.5px rgba(252, 164, 3, 0.55), 0 0 28px 4px rgba(252, 164, 3, 0.35), 0 16px 34px -14px rgba(252, 164, 3, 0.5);
  /* El hover manda sobre el latido: una animación en curso gana a las
     reglas normales, así que hay que apagarla —no basta con pausarla, que
     dejaría congelado el valor animado— para que el `background` de aquí
     arriba tenga efecto. Al salir el ratón, el latido se reanuda solo. */
  animation: none;
}

.cta-proyector:active { transform: scale(0.98); }

.cta-proyector::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 15% 0%, rgba(240, 123, 44, 0.35), transparent 60%);
}

/* El resplandor cálido va en su propia capa y no en el ::before: animar la
   opacidad de una capa encima es fiable, mientras que interpolar entre dos
   `radial-gradient` distintos depende del navegador. */
.cta-proyector::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(140% 160% at 15% 0%, rgba(252, 164, 3, 0.85), rgba(252, 164, 3, 0.15) 70%);
  opacity: 0;
  transition: opacity 0.9s ease;
  animation: ctaLatidoGlow 5s ease-in-out infinite;
}

.cta-proyector:hover::after { animation: none; opacity: 1; }

/* ── El latido: el mismo encendido del hover, solo, cada 5 segundos ──
   Del 78% al 100% del ciclo (unos 1,1 s) sube y baja; el resto del tiempo
   está apagado. Se corta en hover, arriba. */
@keyframes ctaLatido {
  0%, 78%, 100% {
    background-color: #1f2937;
    border-color: transparent;
    box-shadow: 0 0 0 0 rgba(252, 164, 3, 0);
  }
  89% {
    background-color: #4A2E0A;
    border-color: #FCA403;
    box-shadow: 0 0 0 1.5px rgba(252, 164, 3, 0.55), 0 0 28px 4px rgba(252, 164, 3, 0.35);
  }
}

@keyframes ctaLatidoGlow {
  0%, 78%, 100% { opacity: 0; }
  89% { opacity: 1; }
}

/* z-index para que el texto y la marca queden por encima de las dos capas
   de resplandor: ::after va después en el DOM y, sin esto, taparía el
   contenido aunque los dos sean position:relative. */
.cta-proyector__linea {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 0.625rem;
}

.cta-proyector__marca {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}

.cta-proyector__icono { width: 22px; height: 22px; flex: none; object-fit: contain; }

/* .brand__word ya trae los colores de marca (ver más abajo); solo se ajusta
   el tamaño para que quepa dentro del botón. */
.cta-proyector .brand__word { font-size: 1.0625rem; }



/* ═══════════════════════════════════════════════
   ÁRBOL DE FINALES (pantalla de desenlace)

   Vertical y no horizontal: en horizontal necesita unos 600 px y el móvil
   tiene 375. Girado se mantiene el dibujo de la ramificación —que es lo que
   hace entender el producto— sin obligar a arrastrar a lo ancho.
═══════════════════════════════════════════════ */
/* Barra de progreso. Solo la usa .arbol, dentro de la modal de progreso —
   siempre sobre el azul de #tree-modal-card (ver MODO LECTURA). */
.marcador {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
}

.marcador .barra {
  flex: 1;
  height: 7px;
  background: #2C4257;
  border-radius: 99px;
  overflow: hidden;
}

.marcador .barra i {
  display: block;
  height: 100%;
  background: #6BA6D6;
  border-radius: 99px;
  transition: width 0.5s ease;
}

.marcador__cifra {
  font-size: 0.7rem;
  font-weight: 900;
  color: #9FB4C9;
  white-space: nowrap;
}

/* ── Árbol completo (dentro de la modal) ── */
.arbol { padding-top: 0.25rem; }
.arbol .marcador { margin-bottom: 1.125rem; }

/* Raíz y nudos: siempre en el mismo azul (variante "completado"), sean o no
   interactivos — ya no lo son: el nudo es solo un rótulo, para jugar esa
   rama hay que volver a la portada. */
.v-raiz {
  background: #22344A;
  border: 2px solid #3A5471;
  color: #E7EFF7;
  font-weight: 900;
  font-size: 0.78rem;
  text-align: center;
  border-radius: 0.75rem;
  padding: 0.6875rem 0.875rem;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

.v-conectores { display: block; width: 100%; height: 34px; }

.v-ramas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.v-nudo {
  background: #1F3145;
  border: 1px solid #2C4257;
  border-radius: 0.75rem;
  padding: 0.5625rem 0.625rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: #9FB4C9;
  text-align: center;
  line-height: 1.25;
}

/* El único dato que cuenta debajo del nudo: si esa rama está completa. Sin
   eso, todo el árbol queda del mismo azul y no se distingue lo pendiente de
   lo descubierto. */
.v-hojas {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  position: relative;
  border-top: 2px solid #2C4257;
}

.v-rama.completa .v-hojas { border-top-color: #6BA6D6; }

.v-hojas::before {
  content: "";
  position: absolute;
  top: -0.625rem;
  left: 50%;
  width: 2px;
  height: 0.625rem;
  background: #2C4257;
}

.v-rama.completa .v-hojas::before { background: #6BA6D6; }

/* Misma estructura para las dos tarjetas —icono centrado arriba, texto
   centrado debajo— y solo dos estados en todo el árbol: azul (descubierto) y
   azul oscuro con candado (por descubrir). Lo único que cambia entre una
   hoja y otra es el título. */
.v-hoja {
  border-radius: 0.6875rem;
  padding: 0.75rem 0.625rem;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.375rem;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.3;
}

/* Check y candado: mismo tamaño, mismo grosor de trazo. Antes uno era un
   emoji y el otro texto en mayúsculas, y las dos hojas no se leían como el
   mismo componente en dos estados. */
.v-icono { width: 17px; height: 17px; }

.v-hoja.logrado {
  background: #24405A;
  border: 1.5px solid #6BA6D6;
  color: #CDE4F5;
  font-weight: 900;
}

.v-hoja.logrado .v-icono { color: #6BA6D6; }

/* Bloqueado = inerte. Ni cursor de mano ni foco: un final se abre jugando ese
   camino, no pulsando aquí. */
.v-hoja.cerrado {
  cursor: not-allowed;
  background: #1F3145;
  border: 1.5px solid #2C4257;
  color: #6E869C;
}

.v-hoja.cerrado .v-icono { color: #5A7284; }

.v-sin {
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* ═══════════════════════════════════════════════
   LOS 4 CAMINOS (portada de cuento)

   El cuento entero, plegado y por debajo del widget. Cumple dos funciones:
   dar a Google contenido real que indexar en cada URL de cuento, y dejar que
   un adulto se lea la historia completa antes de leérsela a su peque.
   Va cerrado por defecto: quien aterriza desde una búsqueda ve primero la
   intro y los dos botones de decisión, igual que antes.
═══════════════════════════════════════════════ */
/* Recoloreado para la noche: este bloque ya solo vive dentro de la
   apertura (#screen-story), que es siempre oscura. */
.paths {
  margin-top: 1.25rem;
  border-top: 1px solid #2C4257;
  padding-top: 0.75rem;
}

.paths__aviso {
  font-size: 0.6875rem;
  line-height: 1.55;
  color: #8CA5BC;
  margin: 0.5rem 0 1rem;
}

.paths__aviso strong { color: #B7CBDD; }

.paths__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 800;
  color: #9FB4C9;
  padding: 0.125rem 0;
}

.paths__summary::-webkit-details-marker { display: none; }

.paths__summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.2s ease;
}

.paths__details[open] > .paths__summary::before { transform: rotate(90deg); }

.paths__summary:hover { color: #E7EFF7; }

.paths__note {
  font-size: 0.75rem;
  line-height: 1.6;
  color: #8CA5BC;
  margin: 0.75rem 0 1.5rem;
}

.paths__branch { margin-bottom: 2rem; }

.paths__nudo-title {
  font-size: 1rem;
  font-weight: 900;
  color: #E7EFF7;
  margin: 0 0 0.5rem;
}

.paths__nudo-link {
  color: inherit;
  text-decoration: none;
}

.paths__nudo-link:hover {
  color: #6BA6D6;
  text-decoration: underline;
}

.paths p {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #B7CBDD;
  margin: 0 0 0.75rem;
}

.paths__question {
  font-weight: 700;
  color: #E7EFF7;
}

/* Las dos opciones de cada pregunta, aplanadas junto a la escena que las
   trae — el reset global (tailwind.css) ya les quita bala y sangría, así
   que se pintan como un par de píldoras para que no se lean como párrafo. */
.paths__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.paths__opciones li {
  font-size: 0.75rem;
  color: #8CA5BC;
  background: #1B2A3B;
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
}

/* Separa el bloque de finales del de escenas — antes esta frontera la daba
   gratis el segundo <article class="paths__branch">, que ya no existe. */
.paths__finales {
  border-top: 1px solid #2C4257;
  padding-top: 1rem;
  margin-top: 0.5rem;
}

.paths__ending {
  background: #22344A;
  border-radius: 0.875rem;
  padding: 1rem 1.125rem;
  margin-bottom: 0.75rem;
}

.paths__ending-title {
  font-size: 0.875rem;
  font-weight: 900;
  color: #E7EFF7;
  margin: 0 0 0.5rem;
}

.paths__moraleja {
  border-left: 3px solid #6BA6D6;
  padding-left: 0.75rem;
  font-style: italic;
  color: #B7CBDD;
  margin-bottom: 0.625rem;
}

.paths__link,
.paths__footer a {
  font-size: 0.75rem;
  font-weight: 800;
  color: #6BA6D6;
  text-decoration: none;
}

.paths__link:hover,
.paths__footer a:hover { color: #9FCBEF; text-decoration: underline; }

.paths__footer {
  border-top: 1px solid #2C4257;
  padding-top: 1rem;
  font-size: 0.75rem !important;
  color: #8CA5BC !important;
}


/* ═══════════════════════════════════════════════
   ILUSTRACIÓN DE HISTORIA (tarjetas del selector)
═══════════════════════════════════════════════ */
.story-img {
  aspect-ratio: 4 / 3;
  width: 100%;
}


/* ═══════════════════════════════════════════════
   LOGO — marca nativa: mascota + palabra (igual que la landing)
═══════════════════════════════════════════════ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  line-height: 1;
}
.brand__mark {
  width: 44px;
  height: 44px;
  flex: none;
  display: block;
  object-fit: contain;
}
.brand__word {
  font-weight: 900;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: 0;
  color: #FCA403;          /* resto de letras (rea / lay) */
  display: inline-block;
}
.brand__word .ini { color: #00A7A4; }  /* solo las iniciales K y P */
.brand__word--mini { font-size: 0.98rem; }
.brand__word--footer { font-size: 0.92rem; }

/* ═══════════════════════════════════════════════
   LOGO — puerta a la landing con vida propia
═══════════════════════════════════════════════ */
.logo-link img {
  transform-origin: center bottom;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.3s ease;
  will-change: transform;
}

/* Al pasar el ratón, el logo "despierta": un saltito alegre con
   balanceo tipo muelle y un brillo cálido, y se queda algo animado. */
.logo-link:hover img,
.logo-link:focus-visible img {
  animation: logoHappy 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  filter: drop-shadow(0 5px 12px rgba(240, 123, 44, 0.35));
}

.logo-link:active img {
  transform: translateY(1px) scale(0.98);
}

@keyframes logoHappy {
  0%   { transform: translateY(0)    rotate(0)     scale(1); }
  28%  { transform: translateY(-5px) rotate(-5deg) scale(1.09); }
  52%  { transform: translateY(-2px) rotate(4deg)  scale(1.06); }
  74%  { transform: translateY(-3px) rotate(-2deg) scale(1.05); }
  100% { transform: translateY(-2px) rotate(0)     scale(1.04); }
}

/* Sin animación para quien la prefiere reducida: solo un guiño suave */
@media (prefers-reduced-motion: reduce) {
  .logo-link:hover img,
  .logo-link:focus-visible img {
    animation: none;
    transform: scale(1.04);
  }
}


/* ═══════════════════════════════════════════════
   MODAL — Producto KreaPlay + captura de email
═══════════════════════════════════════════════ */
.modal-overlay {
  animation: modalOverlayIn 0.25s ease forwards;
}

.modal-card {
  animation: modalCardIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes modalOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalCardIn {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}


/* ═══════════════════════════════════════════════
   FORMULARIO DE EMAIL
═══════════════════════════════════════════════ */
#chapter-text,
#ending-text {
  white-space: pre-line;
}


#email-input:focus {
  outline: none;
  border-color: #F07B2C;
  box-shadow: 0 0 0 3px rgba(240, 123, 44, 0.15);
}


/* ═══════════════════════════════════════════════
   MASCOTA FLOTANTE — petición de ayuda
   Asoma con un "pop" al llegar al desenlace y acompaña
   hasta el final del flujo.
   z-index 70 < 100 del modal de producto y < 1000 de Klaro:
   nunca tapa ninguno de los dos.
═══════════════════════════════════════════════ */
.mascot-cta {
  position: fixed;
  right: clamp(0.75rem, 3vw, 1.5rem);
  bottom: clamp(0.75rem, 3vw, 1.5rem);
  z-index: 70;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.mascot-cta[hidden] { display: none; }

/* Estado de reposo = oculto. Las clases is-in / is-shown / is-out
   (las pone lib/mascot.js) son las que lo revelan y lo retiran. */
.mascot-cta__bubble,
.mascot-cta__toggle { opacity: 0; }
.mascot-cta.is-shown .mascot-cta__bubble,
.mascot-cta.is-shown .mascot-cta__toggle { opacity: 1; }

/* ── Bocadillo ── */
.mascot-cta__bubble {
  position: relative;
  max-width: 240px;
  background: #fff;
  border: 1px solid #F0E0C8;
  border-radius: 1rem;
  box-shadow: 0 10px 28px rgba(23, 63, 74, 0.14);
  padding: 0.85rem 0.95rem;
  transform-origin: bottom right;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.2s ease,
              visibility 0.2s;
}
/* Pico apuntando a la mascota */
.mascot-cta__bubble::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 18px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-right: 1px solid #F0E0C8;
  border-bottom: 1px solid #F0E0C8;
  transform: rotate(-45deg);
}
.mascot-cta__title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 900;
  color: #1F2937;
  line-height: 1.3;
}
.mascot-cta__text {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #6B7280;
}
.mascot-cta__btn {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 900;
  color: #fff;
  background: #F07B2C;
  border-radius: 0.75rem;
  padding: 0.6rem 1rem;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.mascot-cta__btn:hover { background: #D96A1A; }
.mascot-cta__btn:active { transform: scale(0.98); }

.mascot-cta__close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1;
  color: #9CA3AF;
  background: #fff;
  border: 1px solid #F0E0C8;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.mascot-cta__close:hover { color: #4B5563; background: #FDF6EC; }

/* ── Mascota ── */
.mascot-cta__toggle {
  position: relative;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.mascot-cta__toggle img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(23, 63, 74, 0.22));
  /* Balanceo suave para que no quede "muerta" en la esquina */
  animation: kp-mascot-bob 3.4s ease-in-out 1.4s infinite;
}
/* Puntito de aviso: solo cuando el bocadillo está plegado */
.mascot-cta__dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #F07B2C;
  border: 2px solid #fff;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Plegado (móvil tras unos segundos, o al pulsar la mascota) ── */
.mascot-cta.is-collapsed .mascot-cta__bubble {
  transform: scale(0.5) translateY(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.mascot-cta.is-collapsed .mascot-cta__dot { opacity: 1; transform: scale(1); }

/* ── Entrada / salida ── */
.mascot-cta.is-in .mascot-cta__toggle {
  animation: kp-mascot-pop 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.mascot-cta.is-in .mascot-cta__bubble {
  animation: kp-mascot-bubble 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) 0.22s both;
}
.mascot-cta.is-out .mascot-cta__toggle,
.mascot-cta.is-out .mascot-cta__bubble {
  animation: kp-mascot-out 0.3s ease-in both;
}

@keyframes kp-mascot-pop {
  0%   { transform: translateY(130%) scale(0.55); opacity: 0; }
  60%  { transform: translateY(-8%)  scale(1.08); opacity: 1; }
  80%  { transform: translateY(2%)   scale(0.98); }
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
@keyframes kp-mascot-bubble {
  0%   { transform: scale(0.6) translateY(6px); opacity: 0; }
  65%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes kp-mascot-out {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(40%) scale(0.8); opacity: 0; }
}
@keyframes kp-mascot-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(-3deg); }
}

/* Móvil: mascota y bocadillo más compactos */
@media (max-width: 640px) {
  .mascot-cta__toggle img { width: 66px; height: 66px; }
  .mascot-cta__bubble { max-width: min(240px, calc(100vw - 6.5rem)); }
}

/* Sin movimiento: aparece y desaparece con un simple fundido */
@media (prefers-reduced-motion: reduce) {
  .mascot-cta__toggle img { animation: none; }
  .mascot-cta.is-in .mascot-cta__toggle,
  .mascot-cta.is-in .mascot-cta__bubble,
  .mascot-cta.is-out .mascot-cta__toggle,
  .mascot-cta.is-out .mascot-cta__bubble { animation: none; }
  .mascot-cta.is-in .mascot-cta__toggle,
  .mascot-cta.is-in .mascot-cta__bubble { opacity: 1; }
}


/* ═══════════════════════════════════════════════
   ACCESIBILIDAD — focus global
═══════════════════════════════════════════════ */
button:focus-visible {
  outline: 2px solid #F07B2C;
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════
   FOOTER DE PÁGINA — marca + legal
   Se coloca al final del documento y baja hasta el fondo cuando la vista tiene
   poco contenido, sin quedar anclado a la ventana durante la navegación.
═══════════════════════════════════════════════ */
:root {
  --footer-h: 4.75rem;
}

body.bg-kp-warm {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 0;
}

/* 1rem: el mismo hueco que separa las tarjetas de historia entre sí, para que
   la raya se lea como una más de la fila y no como un salto de sección aparte.

   El contenedor es ANCHO (antes 440/600px) porque la estantería de cuentos
   necesita todo el ancho en escritorio, estilo Yoto. Lo que se mantiene
   estrecho es la lectura: el cuento, el desenlace y la confirmación se
   centran a 600px con .kp-lectura, más abajo. No se puede resolver al revés
   —sacando el selector fuera de este contenedor— porque el `overflow-hidden`
   de aquí es lo que recorta las transiciones deslizantes entre las cuatro
   pantallas, y la delegación de clics de widget.js cuelga de este mismo
   elemento. */
#kreaplay-widget {
  margin-bottom: 1rem;
  max-width: 1400px;
}

/* En pantallas grandes las tarjetas se acercan a los bordes, como en Yoto.
   El padding lateral vive en --pad-x y de ahí lo leen la cabecera, el pie y
   la banda de producto para salir a sangre: si se escribe el número a mano
   en cada sitio, en el primer cambio uno se queda atrás y aparece scroll
   horizontal.

   `body[class]` y no `body` porque tailwind.css se carga DESPUÉS de esta
   hoja (ver *Rendimiento* en el README) y su `.px-4` ganaría el empate. */
:root { --pad-x: 1rem; }

@media (min-width: 1120px) {
  :root { --pad-x: 2rem; }
}

body[class] {
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* Las pantallas de lectura y la cabecera del cuento (banner + pasos) se
   quedan en la columna estrecha de siempre: un cuento se lee mejor en
   ~600px, y ensancharlo por arrastre del selector sería peor producto. */
.kp-lectura {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════
   SEPARADOR + BANDA DE PRODUCTO

   Sustituyen al antiguo bloque ".que-es", que era una tarjeta estrecha
   metida entre las historias y el pie. Ahora son dos piezas: un separador
   con el dragón lector que cierra la estantería, y una banda a sangre con
   el mismo tratamiento que las secciones de kreaplay.com.
═══════════════════════════════════════════════ */
/* Simétrico arriba y abajo: antes el margen de abajo era mayor (pensado
   para separarse de la caja con fondo/borde que tenía .banda), pero esa
   caja ya no existe —.banda se apoya en el mismo crema de la página— así
   que ese margen extra solo dejaba un hueco de más entre la raya y el
   texto, mucho más grande que el de las tarjetas a la raya. */
.separador-dragon {
  width: 100%;
  max-width: 1400px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.separador-dragon__raya {
  flex: 1;
  height: 1px;
  background: rgba(240, 123, 44, 0.28);
}

.separador-dragon__icono {
  width: 62px;
  height: 62px;
  flex: none;
  color: #F07B2C;
}

/* A sangre: el body es flex en columna con 1rem de padding lateral (2rem a
   partir de 1120px), así que estirar el item y compensar ese padding con
   márgenes negativos da el ancho de la ventana sin recurrir a 100vw, que
   provoca scroll horizontal cuando hay barra de desplazamiento. */
/* Sin fondo ni filetes: la banda se apoya en el crema de la página. Quien la
   separa de las tarjetas es el separador del dragón, que ya está justo
   encima; con caja propia además eran dos cremas casi iguales pegados, y esa
   costura se leía como un fallo de color, no como una sección. */
/* padding-top más corto que el resto: ya no hay caja propia que rellenar de
   aire por dentro, y con el margen de .separador-dragon justo encima
   sumaban un hueco enorme antes del texto. Abajo (foto, CTA) se queda
   igual. */
.banda {
  align-self: stretch;
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding: clamp(0.5rem, 2vw, 1rem) 1.5rem clamp(2rem, 5vw, 3.25rem);
}

.banda__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
}

/* Texto a la izquierda y foto a la derecha a partir de tablet, como en las
   secciones de kreaplay.com. En móvil se apilan con el texto primero: lo que
   capta es el mensaje, la foto lo acompaña. */
@media (min-width: 760px) {
  .banda__inner {
    flex-direction: row;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
  }
  .banda__texto { flex: 1; }
  .banda__foto  { flex: 0 1 42%; }
}

.banda__eyebrow {
  font-size: 0.6875rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #00A7A4;
  margin: 0 0 0.5rem;
}

.banda__titulo {
  font-size: clamp(1.375rem, 3.5vw, 1.875rem);
  font-weight: 900;
  color: #1f2937;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.banda__parrafo {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #6B7280;
  margin: 0 0 1rem;
  max-width: 46ch;
}

.banda__lista {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #4B5563;
}

/* El punto naranja sustituye a los emojis del bloque viejo: no dependen de
   la fuente del sistema y un lector de pantalla no los anuncia. */
.banda__lista li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.banda__lista li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F07B2C;
  flex: none;
}

.banda__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #F07B2C;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 900;
  padding: 0.75rem 1.375rem;
  border-radius: 0.875rem;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.banda__cta:hover { background: #D96A1A; }

/* Sin borde también aquí: la foto tiene fondo blanco propio y con filete
   parecía una tarjeta flotando dentro de la sección. */
.banda__foto {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 1rem;
  background: #fff;
}

.site-footer {
  width: calc(100% + var(--pad-x) * 2);
  margin: auto calc(-1 * var(--pad-x)) 0;
  min-height: var(--footer-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.6rem 1rem;
  text-align: center;
  background: #F0E0C8;
  border-top: 1px solid #E4CFA8;
  box-shadow: 0 -6px 18px rgba(23, 63, 74, 0.08);
  /* Transición día/noche — ver MODO LECTURA al final del archivo. 3s y no
     los 150ms de un botón normal: es un cambio de ambiente, no una
     respuesta a un clic. */
  transition: background-color 3000ms ease, border-color 3000ms ease;
}

.site-footer__brand {
  font-size: 0.75rem;
  color: #6b7280;
}

.site-footer__brand-link {
  font-weight: 800;
  color: #FCA403;
  text-decoration: none;
  white-space: nowrap;
}
.site-footer__brand-link:hover {
  text-decoration: underline;
}

.site-footer__dotcom {
  color: #FCA403;
  font-weight: 900;
}

.site-footer__links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
}
.site-footer__links a {
  color: #6b7280;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.site-footer__links a:hover {
  color: #D96A1A;
  text-decoration-color: currentColor;
}
.site-footer__links span {
  color: #cbb98f;
}

/* La mascota flota separada del borde inferior de la ventana. */
.mascot-cta {
  bottom: clamp(0.75rem, 3vw, 1.5rem);
}

/* ═══════════════════════════════════════════════
   HEADER DE PÁGINA — mascota + marca
   Mismo tratamiento que el footer: barra a sangre, fuera del padding del
   body, en flujo normal (no fija) — remata la ventana por arriba igual que
   el footer la remata por abajo.
═══════════════════════════════════════════════ */
.site-header {
  width: calc(100% + var(--pad-x) * 2);
  margin: -2rem calc(-1 * var(--pad-x)) 1.25rem;
  min-height: var(--footer-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  background: #F0E0C8;
  border-bottom: 1px solid #E4CFA8;
  box-shadow: 0 6px 18px rgba(23, 63, 74, 0.08);
  transition: background-color 3000ms ease, border-color 3000ms ease;
  position: relative;
}

/* Dos contenidos posibles en la cabecera — la marca genérica o el título
   del cuento — pero solo uno visible a la vez. [hidden] no basta: ambos
   bloques declaran display propio (flex) más abajo, y eso gana a
   `display:none` del atributo si no se refuerza. */
.site-header__brand[hidden],
.site-header__cuento[hidden] { display: none !important; }

.site-header__cuento {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.site-header__cuento-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  min-width: 0;
}

.site-header__cuento-tit {
  font-size: 0.9375rem;
  font-weight: 900;
  color: #E7EFF7;
  transition: color 3000ms ease;
}

/* Mismo truco que .site-header__title/.site-header__by: el enlace mide
   ~17px de alto, por debajo del mínimo de 24px de área táctil. Aquí no hay
   otro enlace pegado debajo (el título de arriba, .site-header__cuento-tit,
   no es clicable), así que el ::before puede crecer simétrico sin riesgo de
   robarle el toque a otro objetivo. */
.site-header__cuento-volver {
  position: relative;
  font-size: 0.75rem;
  font-weight: 800;
  color: #6BA6D6;
  text-decoration: none;
  transition: color 3000ms ease;
}

.site-header__cuento-volver::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.site-header__cuento-volver:hover { text-decoration: underline; }

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.site-header__home {
  flex: none;
  line-height: 0;
  text-decoration: none;
}

.site-header__mark { display: block; }

.site-header__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}

/* El enlace mide ~20px de alto visualmente, por debajo del mínimo de 24px de
   área táctil — pero agrandar el propio texto separaba demasiado esta línea
   de "by KreaPlay" (ver commit anterior, revertido por gusto visual). En su
   lugar el ::before invisible crece SOLO hacia arriba, hacia el hueco vacío
   de la cabecera: hacia abajo no crece porque ahí empieza ya el enlace de
   "by KreaPlay" y un roce ahí tocaría el otro enlace. */
.site-header__title {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #4b5563;
  text-decoration: none;
}

.site-header__title::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  bottom: 0;
}

.site-header__title:hover {
  color: #374151;
  text-decoration: underline;
}

/* Mismo motivo que .site-header__title: el ::before crece hacia abajo, hacia
   el hueco vacío de la cabecera, nunca hacia arriba (ahí está el título). */
.site-header__by {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.22rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  color: #6b7280;
  text-decoration: none;
}

.site-header__by::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -8px;
}

.site-header__by:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════
   ACCESO POR EMAIL — puerta, compartir, regalo

   El marcado de los tres modales (gate/share/gift-modal) vive en index.html
   y ya usa las clases base .modal-overlay/.modal-card más utilidades de
   Tailwind para tamaño y color, igual que el product-modal. Lo que sigue es
   solo lo que no tiene equivalente en Tailwind: la lista de ventajas, los
   chips del nombre de guerra, la tarjeta de "regalar" y el icono grande del
   regalo recibido.
═══════════════════════════════════════════════ */

/* ── Tarjeta de los modales nuevos ──
   Con clases propias y NO con utilidades de Tailwind: `sm:max-w-[420px]`,
   `p-6`, `flex-1`, `bg-[#25D366]`… no están compiladas en tailwind.css (que
   es un subconjunto a mano, ver *Rendimiento* en el README) y se ignoraban
   en silencio — de ahí que el modal saliera a ancho completo y sin
   márgenes. */
.kp-modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 1.5rem 1.5rem 0 0;
  padding: 1.5rem;
  padding-top: 3rem;
  transition: background-color 1.35s ease;
}

/* El modal de compartir se queda blanco a propósito (ver README) — pero
   sale del modo lectura, de noche, así que en vez de saltar directo al
   blanco "amanece": widget.js pone esta clase justo antes de abrirlo y la
   quita un frame después, y la transición de arriba hace el resto. Solo el
   fondo cambia — el texto se queda en su color de siempre, de sobra legible
   en cuanto el fondo aclara. */
.kp-modal-card--noche { background-color: #1B2A3B; }

@media (min-width: 640px) {
  .kp-modal-card { border-radius: 1.5rem; }
}

.kp-modal-card--wide { max-width: 440px; }

/* padding-top más bajo que el de la tarjeta base a propósito: ese 3rem
   reserva sitio para el botón de cerrar (position:absolute), y ni el modal
   de compartir ni el de regalo lo llevan — dejarlo daba un hueco arriba que
   no cuadraba con el resto de márgenes, todos a 1.5rem. */
.kp-modal-card--center { text-align: center; padding-top: 1.75rem; }

/* El regalo, grande y arriba: es el único protagonista de toda la interfaz
   de acceso por email, el resto de iconos son pequeños y en negro. Lo
   comparten el modal de compartir y el de recibir un regalo, para que se
   reconozcan como las dos caras del mismo gesto. */
.kp-modal__hero {
  width: 48px;
  height: 48px;
  color: #F07B2C;
  margin: 0 auto 0.625rem;
  display: block;
}

/* ── "Abrir regalo": el icono hace lo que promete el botón ──
   No es un candado que se abre desmontado en dos piezas: el SVG de
   CocoMaterial es una sola forma, así que "abrir" se representa como un
   salto (rebote + giro) que se dispara y se desvanece, en vez de separar
   una tapa que no existe como pieza independiente en el trazo.

   Las tres piezas —icono, tarjeta y fondo— se disparan a la vez y con la
   MISMA duración (widget.js#GIFT_ABRIR_MS las sincroniza), para que se lean
   como un solo gesto y no como tres animaciones sueltas:
     · el icono salta y se desvanece;
     · la tarjeta se funde detrás de él;
     · el fondo oscuro se aclara y se desenfoca a la vez, así el cuento que
       hay debajo "aparece" en vez de revelarse de golpe cuando el modal
       desaparece del DOM.
   Si prefers-reduced-motion, ninguna de las tres se añade (ver widget.js). */
.kp-modal__hero--abriendo {
  animation: giftAbrir 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes giftAbrir {
  0%   { transform: scale(1)    rotate(0deg); opacity: 1; }
  30%  { transform: scale(1.22) rotate(-8deg); opacity: 1; }
  55%  { transform: scale(0.92) rotate(5deg); opacity: 1; }
  100% { transform: scale(0.55) rotate(12deg) translateY(-10px); opacity: 0; }
}

.kp-modal-card--cerrando {
  animation: modalCierra 0.7s ease forwards;
}

@keyframes modalCierra {
  to { opacity: 0; transform: scale(0.97); }
}

/* El fondo oscuro (bg-gray-900/55 de Tailwind) pasa por un desenfoque a
   media animación antes de aclararse del todo: sin ese paso intermedio, el
   cuento de detrás pega un salto de "tapado" a "nítido" en cuanto el modal
   desaparece del DOM, que es justo el corte seco que se quería evitar. */
.modal-overlay--cerrando {
  animation: fondoAparece 0.7s ease forwards;
}

@keyframes fondoAparece {
  0%   { opacity: 1; backdrop-filter: blur(0); }
  55%  { opacity: 0.55; backdrop-filter: blur(6px); }
  100% { opacity: 0; backdrop-filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .kp-modal__hero--abriendo,
  .kp-modal-card--cerrando,
  .modal-overlay--cerrando { animation: none; }
}

.kp-modal-card__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #FFF8F0;
  color: #6b7280;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* El botón visual se queda en 32px para no descuadrar la tarjeta, pero el
   área táctil real crece a 44px (mínimo recomendado) con un ::before
   invisible: el clic sobre él burbujea al botón igual. */
.kp-modal-card__close::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.kp-modal-card__close:hover { background: #FDF6EC; color: #374151; }

.kp-modal__title {
  font-size: 1.1875rem;
  font-weight: 900;
  color: #1f2937;
  line-height: 1.25;
  margin: 0 0 0.375rem;
}

.kp-modal__text {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.kp-modal__title--centrado,
.kp-modal__text--centrado { text-align: center; }

/* El nombre de quien regala manda: va en 900, en su propia línea, y "te ha
   regalado este cuento" baja a 700 en la línea de abajo — dos bloques, no
   una frase que envuelve según el ancho. Y más separación de la habitual
   antes del texto siguiente: esta es la única de las tres modales donde el
   título son dos ideas (quién, qué) y necesita respirar antes del resto. */
.kp-modal__title--regalo {
  margin-bottom: 1.125rem;
  text-align: center;
}
.kp-modal__title--regalo strong {
  display: block;
  font-weight: 900;
  font-size: 1.3em;
}
.kp-modal__title--regalo span {
  display: block;
  font-weight: 700;
  margin-top: 0.25rem;
}

/* El titular manda ("Estoy creando un proyector"), el resto es contexto:
   misma idea que --regalo (strong grande + línea aparte), pero aquí la
   segunda línea es una explicación, no una segunda mitad de la misma frase
   — por eso baja de tamaño y de peso en vez de quedarse en negrita. */
.kp-modal__title--proyector strong {
  display: block;
  font-weight: 900;
}
.kp-modal__title--proyector span {
  display: block;
  font-weight: 500;
  font-size: 0.8em;
  color: #6b7280;
  margin-top: 0.375rem;
}

/* ── Botones de los modales nuevos ── */
.kp-btn {
  display: block;
  width: 100%;
  text-align: center;
  border: none;
  border-radius: 0.75rem;
  padding: 0.875rem;
  font-family: 'Nunito', sans-serif;
  font-size: 0.875rem;
  font-weight: 900;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.kp-btn:active { transform: scale(0.98); }
.kp-btn:disabled { opacity: 0.6; cursor: default; }

.kp-btn:focus-visible {
  outline: 2px solid #F07B2C;
  outline-offset: 2px;
}

.kp-btn--primary { background: #F07B2C; color: #fff; }
.kp-btn--primary:hover:not(:disabled) { background: #D96A1A; }

/* El icono va DENTRO del botón (izquierda) y no en la lista de ventajas de
   arriba: repetir la misma pregunta como icono en dos sitios seguidos —el
   último ítem de la lista y el propio CTA— decía lo mismo dos veces. Mismo
   patrón que .kp-btn--whatsapp: flex + gap, no texto centrado a secas. */
#btn-submit-email {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
#btn-submit-email svg { width: 19px; height: 19px; flex: none; }

/* El verde de WhatsApp, no un naranja de marca: aquí la señal de "esto abre
   WhatsApp" vale más que la coherencia cromática. */
/* El icono es la silueta de WhatsApp con el interior a fill:none (ver
   BLANCO_TRANSPARENTE en tools/gen-icons.js): el verde del botón se ve por
   dentro del bocadillo, que es como se lee la marca. */
.kp-btn--whatsapp {
  background: #25D366;
  color: #fff;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.kp-btn--whatsapp:hover { background: #1FB855; }
.kp-btn--whatsapp svg { width: 19px; height: 19px; flex: none; }

.kp-btn--ghost {
  background: #fff;
  color: #4b5563;
  border: 1.5px solid #F0E0C8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.kp-btn--ghost:hover { border-color: #F07B2C; }
.kp-btn--ghost svg { width: 15px; height: 15px; flex: none; }

.kp-btn-row { display: flex; gap: 0.5rem; }
.kp-btn-row .kp-btn { flex: 1 1 0; width: auto; }
/* `hidden` sobre un flex-item no basta: display:flex de .kp-btn--ghost
   ganaría. Cuando "Compartir" se oculta (escritorio), "Copiar" queda solo y
   a ancho completo, que es justo lo que se quiere. */
.kp-btn-row .kp-btn[hidden] { display: none; }

.kp-btn--spaced { margin-top: 1rem; }

.kp-modal__foot {
  font-size: 0.6875rem;
  color: #9ca3af;
  text-align: center;
  margin: 0.75rem 0 0;
}

/* ── Modal de producto ──
   La foto del proyector ocupa el sitio que en los demás modales tiene el
   icono grande (.kp-modal__hero): aquí el producto es el argumento. */
.kp-modal__foto {
  display: block;
  width: 100%;
  border-radius: 1rem;
  object-fit: cover;
  margin: 0 0 1.125rem;
}

/* Las dos salidas del modal (a la landing y de vuelta al selector), al
   mismo nivel: son las dos "y si no", no acciones principales, así que
   ninguna lleva ya fondo de botón. */
.kp-modal__salidas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid #F0E0C8;
}

.kp-modal__salidas .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #F07B2C;
  text-decoration: none;
}

.kp-modal__salidas .link-arrow:hover { color: #D96A1A; }

.kp-modal__salida-btn {
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: #9ca3af;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

.kp-modal__salida-btn:hover { color: #4b5563; }

/* Aviso de "enlace copiado": aparece bajo los botones sin empujar nada
   (siempre ocupa su hueco) para que el modal no dé un salto al mostrarlo. */
.kp-share-status {
  font-size: 0.75rem;
  font-weight: 800;
  color: #F07B2C;
  text-align: center;
  margin: 0.75rem 0 0;
  min-height: 1.1em;
}

/* Vista previa del mensaje de WhatsApp: mismo look que un globo de chat,
   para que se lea como "esto es justo lo que va a llegar" y no como un
   texto de ayuda cualquiera. */
/* Plegada hasta el primer gesto. Se despliega con transición en vez de
   aparecer de golpe: el modal crece, y un salto seco se lee como un fallo. */
.kp-share-preview-wrap {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.28s ease;
}

.kp-share-preview-wrap.is-visible {
  max-height: 12rem;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .kp-share-preview-wrap { transition: none; }
}

.kp-share-preview__label {
  font-family: 'Nunito', sans-serif;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #9ca3af;
  text-align: left;
  margin: 0 0 0.3125rem;
}

.kp-share-preview {
  position: relative;
  font-family: 'Nunito', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #374151;
  background: #E7FCE3;
  border-radius: 0.75rem 0.75rem 0.75rem 0.125rem;
  padding: 0.625rem 0.875rem;
  margin: 0 0 0.6875rem;
  text-align: left;
  /* Sin esto el navegador se come el \n del mensaje y la vista previa dejaría
     de coincidir con lo que se manda. */
  white-space: pre-line;
}

/* ── Modal de la puerta: el formulario ── */
.kp-field {
  width: 100%;
  border: 1.5px solid #F0E0C8;
  border-radius: 0.75rem;
  padding: 0.6875rem 0.875rem;
  font-family: 'Nunito', sans-serif;
  font-size: 0.875rem;
  background: #FFF8F0;
  color: #1f2937;
  margin-bottom: 0.6875rem;
}

.kp-field::placeholder { color: #d1d5db; }

.kp-field:focus {
  outline: none;
  border-color: #F07B2C;
}

.kp-error {
  font-size: 0.75rem;
  color: #ef4444;
  margin: -0.375rem 0 0.6875rem;
}

.kp-gdpr {
  display: flex;
  gap: 0.5625rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.kp-gdpr input {
  margin-top: 0.125rem;
  width: 1rem;
  height: 1rem;
  flex: none;
  cursor: pointer;
  accent-color: #F07B2C;
}

.kp-gdpr label {
  font-size: 0.6875rem;
  color: #6b7280;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}

.kp-gdpr a { color: #F07B2C; text-decoration: underline; }

/* ── "Se ha desbloqueado algo" en #btn-open-tree ──
   Solo cuando la cifra SUBE (widget.js pone la clase con lo que devuelve
   KP_Progress.descubrir, que ya dice si el final era nuevo). Da un golpe de
   naranja y un rebote corto: el ojo va al botón justo cuando acaba de
   aparecer el desenlace y se entiende que la cuenta ha cambiado. Colores
   ajustados al botón nocturno — ver MODO LECTURA más abajo. */
@keyframes kp-desbloqueo {
  0%   { transform: scale(1); }
  22%  { transform: scale(1.08); background-color: #F0913C; border-color: #F0913C; color: #1B2A3B; }
  55%  { transform: scale(0.97); background-color: #F0913C; border-color: #F0913C; color: #1B2A3B; }
  78%  { transform: scale(1.02); background-color: #F0913C; border-color: #F0913C; color: #1B2A3B; }
  100% { transform: scale(1); }
}

.lect-btn-progreso--desbloqueo {
  animation: kp-desbloqueo 0.85s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  @keyframes kp-desbloqueo {
    0%, 100% { background-color: #1F3145; border-color: #3A5471; }
    30%, 70% { background-color: #F0913C; border-color: #F0913C; }
  }
  .lect-btn-progreso--desbloqueo { animation-timing-function: ease; }
}


/* ── Las ventajas con icono ──
   Compartido por el modal de la puerta y el de producto: los dos responden
   a la misma pregunta ("¿por qué te interesa dejar tu correo?") y deben
   leerse como el mismo componente. */
.kp-perks {
  list-style: none;
  margin: 0 0 1.125rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.kp-perks li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  font-size: 0.8125rem;
  color: #4b5563;
  line-height: 1.4;
}

.kp-perks svg {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 1px;
  color: #1f2937;
}

/* ── Modal de compartir: chips del nombre de guerra + dado ──
   Mismo molde que .mb (los cuadraditos de metadatos de la tarjeta): el
   sistema de "chip" ya existe en la cabeza de quien lee el CSS, aquí solo
   cambia el contexto. */
.share-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
  margin: 0 0 0.75rem;
}

.share-chips--centrado { justify-content: center; }

.chip {
  border: 1.5px solid #F0E0C8;
  background: #FDF6EC;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-family: 'Nunito', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: #6b7280;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip:hover { border-color: #F07B2C; }

.chip:focus-visible {
  outline: 2px solid #F07B2C;
  outline-offset: 2px;
}

.chip--on {
  background: #F07B2C;
  border-color: #F07B2C;
  color: #fff;
}

/* El dado se distingue de los chips de sugerencia: es una acción ("vuelve a
   tirar"), no una opción más entre las cuatro. */
.chip--dado {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  border-style: dashed;
  color: #F07B2C;
}

.chip--dado svg { width: 13px; height: 13px; }


/* Los dos botones secundarios del modal de compartir (Tailwind para todo lo
   demás: tamaño, color, borde) solo necesitan esto de styles.css, porque
   `width`/`height` en un <svg> con <use> no tiene equivalente en Tailwind. */
#btn-share-native svg,
#btn-share-copy svg {
  width: 15px;
  height: 15px;
  flex: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   MODO LECTURA — carátula, apertura, decisión, nudo y desenlace

   Un solo azul de principio a fin (ver Fase 0): ya no hay un color por
   acto, así que moverse entre estas pantallas no reinicia ninguna
   transición de temperatura. El naranja de marca se reserva para la marca
   misma y para la acción principal del desenlace.

   Todas viven en la columna estrecha de .kp-lectura y comparten la cabecera
   y el pie del sitio (site-header/site-footer), que cambian de día a noche
   con ellas — ver la transición más abajo.
═══════════════════════════════════════════════════════════════════════ */

/* ── Transición día/noche ──
   Un solo atributo en <body>, cambiado por widget.js según si hay una
   historia activa. Todo lo demás es CSS: el fondo de la página y el de la
   cabecera/pie (declarados junto a .site-header/.site-footer) tardan 3s en
   ajustarse, en paralelo al cambio de pantalla — que sigue siendo
   instantáneo, eso no se toca. Nunca un choque brusco de estilos, pero
   tampoco una espera: se nota mientras ya se está leyendo. */
body {
  transition: background-color 3000ms ease;
}

body.bg-kp-warm[data-temp="night"] {
  background-color: #1B2A3B;
}

/* La cabecera y el pie declaran `transition` junto a .site-header/.site-footer
   (arriba, cerca de su selector base) pero el VALOR de noche vive aquí, con
   el resto de la transición día/noche. */
body[data-temp="night"] .site-header {
  background: #16232F;
  border-bottom-color: #2C4257;
}

body[data-temp="night"] .site-footer {
  background: #16232F;
  border-top-color: #2C4257;
}

/* La mascota saluda al pasar el ratón por encima — solo donde hay hover de
   verdad, que en táctil se queda pegado tras el primer toque. */
@media (hover: hover) {
  .mascota-img { transition: transform 0.2s ease; }
  .site-header__home:hover .mascota-img,
  .cta-proyector:hover .mascota-img {
    animation: mascota-saludo 0.7s ease;
  }
}

@keyframes mascota-saludo {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(-10deg) scale(1.08); }
  55%  { transform: rotate(7deg) scale(1.1); }
  80%  { transform: rotate(-4deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1); }
}

/* ── Icono grande de escena (nudo y desenlace) ──
   Encabeza el capítulo cuando no hay portada — la portada solo aparece en
   la carátula y en la apertura, una vez por partida. */
.lect-icono-escena {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 0;
  color: #6BA6D6;
}

.lect-icono-escena svg { width: 76px; height: 76px; display: block; }

/* ── Título y caja de texto, compartidos por apertura/nudo/desenlace ── */
.lect-tit {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.18;
  color: #A8CDE8;
  text-align: center;
  margin: 0.75rem 0 0;
}

/* Justificado con partición de palabra: en una columna estrecha, sin
   guiones el español abre ríos blancos enormes. `lang="es"` va en el propio
   marcado (index.html) — sin idioma declarado el navegador no aplica
   `hyphens: auto`. */
.lect-caja {
  margin: 0.875rem 0 0;
  background: #22344A;
  border-radius: 1rem;
  padding: 1.125rem;
  color: #E7EFF7;
}

.lect-caja p {
  font-size: 1.03125rem;
  line-height: 1.68;
  font-weight: 600;
  text-align: justify;
  hyphens: auto;
  margin: 0;
}

.lect-caja p + p { margin-top: 0.875rem; }
.lect-caja strong { color: #BBD9EF; }

.lect-caja__moraleja {
  font-weight: 900 !important;
  color: #A8CDE8 !important;
  text-align: left !important;
  margin-top: 1rem !important;
}

/* ── Botón "Continuar" / "Empezar a leer" ──
   Un solo estilo para el botón de avanzar de la carátula y de cada escena:
   dice la pregunta o la acción que viene, nunca "Continuar" a secas. */
.lect-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  margin: 1.125rem 0 0;
  padding: 1rem 1.375rem;
  border: none;
  border-radius: 999px;
  background: #6BA6D6;
  color: #0F1B28;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.15s ease;
}

.lect-btn:hover { background: #7FB4DE; }
.lect-btn:active { transform: scale(0.98); }

.lect-btn:focus-visible {
  outline: 2px solid #6BA6D6;
  outline-offset: 2px;
}

/* ── Portada, en carátula y apertura ── */
#lect-media .lect-portada {
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: 1rem;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 0.5rem;
}

/* ── Volver al capítulo anterior — al fondo de la pantalla, fuera del
   grupo centrado de la pregunta: es la salida de la decisión, no parte de
   ella. .lect-decision-centro con flex:1 se queda con todo el hueco
   disponible, así que este botón cae justo después, pegado abajo. ── */
.lect-pagina-ant {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  margin: 1.5rem auto 0;
  padding: 0.4375rem 0.875rem 0.4375rem 0.6875rem;
  border: 1px solid #2C4257;
  border-radius: 999px;
  background: transparent;
  color: #9FB4C9;
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.lect-pagina-ant:hover { color: #E7EFF7; border-color: #3F5C79; }

/* ── La pregunta, sola en pantalla ──
   min-height con el alto real del viewport (100dvh, con fallback a 100vh)
   menos la cabecera y el pie, que son lo único que queda fuera de
   .kp-lectura en esta pantalla. .lect-decision-centro es quien centra la
   pregunta y las opciones dentro de ese hueco; #screen-decision solo
   reparte el espacio entre ese grupo y el botón de volver, al fondo. */
#screen-decision.active {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: calc(100dvh - var(--footer-h) * 2);
}

.lect-decision-centro {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lect-pregunta {
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.2;
  color: #E7EFF7;
  text-align: center;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.lect-opciones {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.lect-op {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  width: 100%;
  text-align: left;
  padding: 1.125rem 1.25rem;
  border: 2px solid #3A5471;
  border-radius: 1.25rem;
  background: #22344A;
  color: #E7EFF7;
  font-family: 'Nunito', sans-serif;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.lect-op:hover { border-color: #6BA6D6; }

.lect-op:active,
.lect-op.btn-active {
  transform: scale(0.99);
  border-color: #6BA6D6;
  background: #284259;
}

.lect-op:focus-visible {
  outline: 2px solid #6BA6D6;
  outline-offset: 2px;
}

.lect-op__ico,
.lect-op__ico-envoltorio {
  width: 44px;
  height: 44px;
  flex: none;
  color: #6BA6D6;
}

.lect-op__ico-envoltorio svg { display: block; width: 100%; height: 100%; }

/* ── Botón "Finales de la historia descubiertos" (desenlace) ──
   Sustituye a la antigua fila de cuatro casillas: un único botón que abre
   la modal con el árbol completo. */
.lect-btn-progreso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem auto 0;
  padding: 0.6875rem 1rem;
  border: 1px solid #3A5471;
  border-radius: 999px;
  background: #1F3145;
  color: #A8CDE8;
  font-family: 'Nunito', sans-serif;
  font-size: 0.8125rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.lect-btn-progreso:hover { border-color: #6BA6D6; color: #E7EFF7; }
.lect-btn-progreso svg { width: 17px; height: 17px; flex: none; }

/* ── Las tres acciones del desenlace ──
   Mismo tamaño y fondo entre sí, claramente más claras que .lect-caja de
   arriba (#22344A) — así se leen como botones y no como más párrafos
   apilados. La principal, además, con borde naranja: es la más visible,
   por delante de regalar. */
.lect-acciones {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 1.125rem 0 0;
}

.lect-accion {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  text-align: left;
  padding: 0.875rem 1rem;
  border: 1.5px solid #3F6084;
  border-radius: 1rem;
  background: #2E4761;
  color: #E7EFF7;
  font-family: 'Nunito', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lect-accion:hover { background: #35526E; border-color: #6BA6D6; }

.lect-accion--principal {
  border-color: #F0913C;
  background: #3A3120;
}

.lect-accion--principal:hover { background: #45391F; border-color: #F5A550; }

.lect-accion__icon { width: 28px; height: 28px; flex: none; color: #6BA6D6; }
.lect-accion--principal .lect-accion__icon { color: #F0913C; }

.lect-accion__txt { display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; }
.lect-accion__txt b { font-size: 0.875rem; font-weight: 900; line-height: 1.25; }
.lect-accion__txt span { font-size: 0.71875rem; color: #9FB4C9; font-weight: 700; line-height: 1.25; }

/* ── Modal del árbol de finales, en el mismo azul ── */
.tree-modal-card {
  background: #1B2A3B;
  color: #E7EFF7;
}

.tree-modal-cerrar {
  background: rgba(255, 255, 255, 0.1);
  color: #9FB4C9;
}

/* Mismo truco que .kp-modal-card__close: área táctil de 44px sin agrandar
   el botón visual de 32px (w-8 h-8 de Tailwind). */
.tree-modal-cerrar::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.tree-modal-cerrar:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #E7EFF7;
}

/* ── Carátula ──
   Portada grande, sinopsis, tema y duración, con "Empezar a leer" abajo —
   al estilo de la portada de un libro antes de abrirlo. */
.caratula-cover {
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.6);
}

.caratula-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 16%;
}

.caratula-tit {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.18;
  color: #E7EFF7;
  text-align: center;
  margin: 1.125rem 0 0;
  text-wrap: balance;
}

.caratula-tema {
  display: block;
  text-align: center;
  font-size: 0.71875rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #F0913C;
  margin: 0.5rem 0 0;
}

.caratula-sin {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #B7CBDD;
  text-align: center;
  margin: 0.625rem 0 0;
}

.caratula-meta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0.875rem 0 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: #9FB4C9;
}

.caratula-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.caratula-meta svg { width: 15px; height: 15px; flex: none; }

/* Separador del dragón — mismo patrón que el índice (raya · icono · raya),
   pero con el icono SOLO de contorno: en el índice va sobre crema y su
   fondo blanco no se nota; aquí, sobre azul, se vería como una mancha
   sólida si no fuera transparente (ver tools/gen-icons.js, ico-book-contorno). */
.dragon-sep {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.625rem 0 0;
}

.dragon-sep__raya { flex: 1; height: 1px; background: rgba(240, 145, 60, 0.32); }
.dragon-sep__icono { width: 30px; height: 30px; flex: none; color: #F0913C; }

.otros-tit {
  font-size: 0.8125rem;
  font-weight: 900;
  color: #9FB4C9;
  text-align: center;
  margin: 0.875rem 0 0;
}

.otros-lista {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0.75rem 0 0;
}

.otros-cuento {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  background: #1F3145;
  border: 1px solid #2C4257;
  border-radius: 0.875rem;
  padding: 0.625rem;
  transition: border-color 0.15s ease;
}

.otros-cuento:hover { border-color: #6BA6D6; }

.otros-cuento__img {
  width: 60px;
  height: 60px;
  border-radius: 0.625rem;
  flex: none;
  background-size: cover;
  background-position: center;
}

.otros-cuento__txt { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.otros-cuento__tit { font-size: 0.84375rem; font-weight: 800; line-height: 1.25; color: #E7EFF7; }
.otros-cuento__tema { font-size: 0.6875rem; font-weight: 800; color: #7D95AC; }

@media (min-width: 640px) {
  .otros-lista { flex-direction: row; }
  .otros-cuento { flex: 1; flex-direction: column; text-align: center; padding: 0.875rem 0.75rem; }
  .otros-cuento__img { width: 100%; height: 96px; }

  .lect-acciones { flex-direction: row; }
  .lect-accion { flex-direction: column; text-align: center; align-items: center; gap: 0.375rem; }
  .lect-accion__txt { align-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  body, .site-header, .site-footer, .site-header__cuento-tit, .site-header__cuento-volver,
  .mascota-img, .cta-proyector, .cta-proyector::after {
    transition: none !important;
    animation: none !important;
  }
}