/* ============================================================
   MOTOR — estilos de las formas de contar y de navegar
   Usa solo las variables del estilo visual (estilos.css y temas/),
   así cualquier combinación funciona con cualquier estilo.
   ============================================================ */

/* ---------- Piezas comunes ---------- */
.bloque { position: relative; }
.entrada__lista { margin: .4em 0 0; padding-left: 1.2em; }
.rsvp-caja { background: var(--oscuro); color: var(--sobre-oscuro); border-radius: var(--radio); padding: clamp(18px, 4vw, 34px); margin-top: 1.4em; text-align: left; }
.cuento-clasica .rsvp-caja { background: none; padding: 0; margin-top: 0; }
.rsvp-caja .rsvp { margin-top: 0; }
.programa--claro::before { background: color-mix(in srgb, var(--acento) 55%, transparent); }
.programa--claro b { color: var(--titulo); }
.programa--claro span { color: var(--texto-suave); }
.programa--claro time { color: var(--acento-texto); }

/* Cuenta atrás fuera de la portada clásica: toma los colores del contexto */
:where(.bloque:not(.cuento-clasica)) .countdown { margin: 1.4em 0; }
:where(.bloque:not(.cuento-clasica)) .countdown div { border-color: color-mix(in srgb, var(--acento) 60%, transparent); background: color-mix(in srgb, var(--tarjeta) 70%, transparent); color: var(--titulo); }
:where(.bloque:not(.cuento-clasica)) .countdown span { color: var(--texto-suave); }

/* Quiz */
.quiz { display: grid; gap: 1em; text-align: left; margin-top: 1.4em; }
.quiz__p { background: var(--tarjeta); border: var(--borde) solid var(--linea); border-radius: var(--radio); padding: 1.1em 1.3em; color: var(--texto); }
.quiz__preg { margin-bottom: .7em; font-weight: 500; }
.quiz__ops { display: flex; flex-wrap: wrap; gap: .5em; }
.quiz__op { font: inherit; padding: .55em 1.1em; border-radius: var(--radio-btn); border: var(--borde) solid var(--acento); background: transparent; color: var(--texto); cursor: pointer; }
.quiz__op:hover { background: color-mix(in srgb, var(--acento) 18%, transparent); }
.quiz__op.es-correcta { background: #3f8f4f; border-color: #3f8f4f; color: #fff; }
.quiz__op.fallo { background: #c0392b; border-color: #c0392b; color: #fff; }
.quiz__dato { margin: .7em 0 0; font-size: .92rem; color: var(--texto-suave); font-style: italic; }
.quiz__total { text-align: center; font-family: var(--serif); font-size: 1.4rem; color: var(--titulo); }

.sin-scroll { overflow: hidden; }
.wrap-cuento { width: min(760px, 100% - 32px); margin-inline: auto; }

/* ==========================================================
   FORMAS DE CONTAR
   ========================================================== */

/* 2. Chat ---------------------------------------------------- */
.cuento-chat.bloque { background: color-mix(in srgb, var(--fondo-alt) 70%, var(--fondo));
  background-image: radial-gradient(color-mix(in srgb, var(--acento) 14%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; }
.chat-cabecera { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .8em; padding: .8em 16px; background: var(--oscuro); color: var(--sobre-oscuro); }
.chat-cabecera b { display: block; font-family: var(--serif); font-size: 1.15rem; }
.chat-cabecera small { color: var(--acento); }
.chat-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.chat-hilo { width: min(720px, 100% - 24px); margin: 0 auto; padding: 1.2em 0; display: flex; flex-direction: column; gap: .45em; }
.chat-dia { align-self: center; font-size: .75rem; background: var(--tarjeta); color: var(--texto-suave); padding: .2em .9em; border-radius: 8px; margin: 0 0 .6em; }
.burbuja { max-width: min(82%, 520px); padding: .6em .9em 1.3em; border-radius: 14px; position: relative; font-size: .98rem; line-height: 1.45; box-shadow: 0 1px 2px var(--sombra-color); }
.burbuja b { display: block; color: var(--acento-texto); font-weight: 600; margin-bottom: .15em; }
.burbuja small { position: absolute; right: .7em; bottom: .3em; font-size: .68rem; opacity: .6; }
.burbuja--ellos { align-self: flex-start; background: var(--tarjeta); color: var(--texto); border-top-left-radius: 4px; }
.burbuja--yo { align-self: flex-end; background: color-mix(in srgb, var(--acento) 35%, var(--tarjeta)); color: var(--texto); border-top-right-radius: 4px; }
.burbuja--ancha { max-width: 100%; width: 100%; padding-bottom: .9em; }
.burbuja--tarjeta { padding-bottom: .6em; }
.burbuja__enlace { display: inline-block; margin-top: .4em; font-weight: 600; }

/* 3. Periódico ---------------------------------------------- */
.cuento-periodico.bloque { background: var(--fondo); }
.diario-portada, .diario-seccion { width: min(1100px, 100% - 32px); margin: 0 auto; }
.diario-portada { padding: 90px 0 30px; text-align: center; }
.diario-cabecera { border-top: 4px double var(--titulo); border-bottom: 4px double var(--titulo); padding: .6em 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1em; font-size: .8rem; text-transform: uppercase; letter-spacing: .15em; color: var(--texto-suave); }
.diario-cabecera h1 { font-size: clamp(2rem, 7vw, 4.6rem); margin: 0; letter-spacing: -.01em; }
.diario-antetitulo { margin: 1.5em 0 .3em; color: var(--acento-texto); text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; font-weight: 600; }
.diario-titular { font-size: clamp(2.2rem, 7vw, 5rem); line-height: 1.02; margin: 0 0 .3em; text-align: center; }
.diario-entradilla { font-size: 1.2rem; max-width: 760px; margin: 0 auto; font-style: italic; color: var(--texto-suave); }
.diario-cuenta { margin-top: 1.4em; } .diario-cuenta > span { font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: var(--texto-suave); }
.diario-cuenta .countdown { justify-content: center; }
.diario-seccion { padding: 40px 0; border-top: 1px solid var(--linea); }
.diario-seccion__etiqueta { display: inline-block; background: var(--titulo); color: var(--fondo); padding: .1em .7em; font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; margin: 0 0 .6em; }
.diario-seccion__titular { text-align: left; font-size: clamp(1.8rem, 4.5vw, 3rem); margin-bottom: .3em; }
.diario-seccion__entradilla { font-size: 1.15rem; font-weight: 500; max-width: 820px; }
.diario-columnas { columns: 3 260px; column-gap: 2.2em; column-rule: 1px solid var(--linea); margin-top: 1em; }
.diario-columnas article { break-inside: avoid; margin-bottom: 1.2em; }
.diario-columnas h3 { font-size: 1.25rem; margin-bottom: .2em; }
.diario-columnas p { margin: 0 0 .4em; }
.diario-hora { font-weight: 700; color: var(--acento-texto); }
.diario-firma { text-align: right; font-style: italic; }
.diario-enlace { font-weight: 600; }

/* 4. Carta --------------------------------------------------- */
.cuento-carta.bloque { padding: 22px 16px; background: var(--fondo-alt); }
.carta-hoja { width: min(720px, 100%); margin: 0 auto; padding: clamp(28px, 6vw, 60px); background-color: var(--tarjeta);
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--acento) 25%, transparent) 31px 32px);
  box-shadow: 0 10px 30px var(--sombra-color); color: var(--texto); font-family: var(--serif); font-size: 1.15rem; line-height: 2; }
.bloque--portada .carta-hoja { margin-top: 70px; }
.carta-lugar { text-align: right; font-style: italic; color: var(--texto-suave); }
.carta-saludo, .carta-apartado, .carta-firma { font-family: var(--script); font-size: 2rem; color: var(--titulo); line-height: 1.3; margin: .4em 0; }
.carta-firma { text-align: right; }
.carta-texto { margin: 0 0 .6em; }
.carta-enlace { font-style: italic; }

/* 5. Cuento -------------------------------------------------- */
.cuento-cuento.bloque { background: var(--fondo); padding: 30px 16px; }
.cuento-portada { text-align: center; padding: 90px 0 30px; }
.cuento-erase { font-family: var(--script); font-size: clamp(1.8rem, 5vw, 2.8rem); color: var(--acento-texto); }
.cuento-titulo { font-family: var(--script); font-size: var(--tam-nombres); line-height: 1; margin: .1em 0 .3em; }
.cuento-titulo em { color: var(--acento); font-style: normal; }
.cuento-sub { color: var(--texto-suave); }
.cuento-portada .countdown { justify-content: center; }
.cuento-capitulo { width: min(720px, 100%); margin: 0 auto; padding: 30px 0; border-top: 1px dashed var(--linea); }
.cuento-num { text-align: center; font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--acento-texto); margin: 0; }
.cuento-parrafo { font-family: var(--serif); font-size: 1.2rem; line-height: 1.8; text-align: justify; hyphens: auto; }
.cuento-parrafo--capital::first-letter { float: left; font-family: var(--script); font-size: 4.2em; line-height: .8; padding: .08em .1em 0 0; color: var(--acento); }
.cuento-fin { text-align: center; font-style: italic; color: var(--texto-suave); }

/* 6. Videojuego ---------------------------------------------- */
.cuento-juego.bloque { padding: 24px 16px; background: var(--fondo); }
.juego-portada { text-align: center; padding: 80px 16px 40px; background: var(--hero-fondo); color: var(--hero-texto); margin: -24px -16px 0; }
.juego-hud { display: flex; justify-content: space-between; max-width: 760px; margin: 0 auto 2em; font-family: var(--serif); font-size: .9rem; background: rgba(0,0,0,.35); color: #fff; padding: .5em 1em; border-radius: 8px; }
.juego-pre { text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; color: var(--acento); }
.juego-titulo { font-family: var(--script); font-size: var(--tam-nombres); line-height: 1.1; color: var(--hero-texto); text-shadow: 3px 3px 0 rgba(0,0,0,.35); }
.juego-titulo em { color: var(--acento); font-style: normal; }
.juego-sub { letter-spacing: .3em; font-size: .85rem; }
.juego-portada .countdown { justify-content: center; }
.juego-portada .countdown div { background: rgba(0,0,0,.3); color: #fff; }
.juego-portada .countdown span { color: rgba(255,255,255,.8); }
.juego-start { animation: juego-parpadeo 1.2s steps(2) infinite; }
@keyframes juego-parpadeo { 50% { opacity: .55; } }
.juego-nivel { width: min(820px, 100%); margin: 24px auto; padding: clamp(18px, 4vw, 30px); background: var(--tarjeta); border: 4px solid var(--acento); border-radius: var(--radio); box-shadow: 6px 6px 0 var(--titulo); color: var(--texto); }
.juego-nivel__num { display: inline-block; background: var(--titulo); color: var(--fondo); font-family: var(--serif); font-size: .8rem; padding: .25em .8em; letter-spacing: .15em; margin: 0 0 .6em; }
.juego-nivel h2 { text-align: left; font-size: clamp(1.4rem, 4vw, 2.2rem); }
.juego-misiones { list-style: none; padding: 0; margin: 1em 0 .4em; display: grid; gap: .6em; }
.juego-misiones li { display: flex; gap: .8em; align-items: flex-start; padding: .8em 1em; border: 2px dashed var(--linea); border-radius: var(--radio-campo); cursor: pointer; transition: .2s; }
.juego-misiones li:hover { border-color: var(--acento); }
.juego-misiones li p { margin: .2em 0 0; }
.juego-check { flex: 0 0 22px; height: 22px; border: 3px solid var(--acento); border-radius: 4px; margin-top: .2em; }
.juego-misiones li.hecha { opacity: .7; border-style: solid; border-color: #3f8f4f; }
.juego-misiones li.hecha .juego-check { background: #3f8f4f; border-color: #3f8f4f; }
.juego-misiones li.hecha .juego-check::after { content: "✔"; color: #fff; display: block; text-align: center; line-height: 16px; font-size: 14px; }
.juego-pista { font-size: .8rem; color: var(--texto-suave); margin: 0; }
.juego-firma { text-align: right; font-style: italic; }

/* 7. Terminal ------------------------------------------------ */
.cuento-terminal.bloque { background: var(--oscuro); color: var(--sobre-oscuro); padding: 10px 16px; }
.cuento-terminal.bloque--portada { padding-top: 80px; }
.term { width: min(900px, 100%); margin: 0 auto; padding: 14px 0; font-family: "VT323", "Courier New", monospace; font-size: 1.15rem; line-height: 1.45; }
.term a { color: var(--acento); }
.term-linea { margin: .6em 0 .2em; }
.term-prompt { color: var(--acento); }
.term-banner { font-family: inherit; font-size: clamp(1rem, 3.4vw, 1.5rem); color: var(--acento); white-space: pre-wrap; margin: .6em 0; }
.term-titulo { color: var(--acento); font-weight: 700; margin: .3em 0; }
.term-salida { margin: .15em 0 .15em 1.2em; color: var(--sobre-oscuro-suave); }
.term-clave { color: var(--sobre-oscuro); font-weight: 700; }
.term .countdown div { background: transparent; color: var(--acento); }
.term .countdown span { color: var(--sobre-oscuro-suave); }
.term .ruta__esquema, .term .rsvp-caja, .term .quiz { margin-left: 1.2em; }

/* 8. Entrevista ---------------------------------------------- */
.cuento-entrevista.bloque { background: var(--fondo); padding: 10px 16px; }
.entre-portada { width: min(820px, 100%); margin: 0 auto; padding: 100px 0 30px; text-align: center; }
.entre-sello { display: inline-block; border: 2px solid var(--acento); color: var(--acento-texto); padding: .3em 1em; text-transform: uppercase; letter-spacing: .25em; font-size: .75rem; transform: rotate(-3deg); }
.entre-portada h1 { font-size: clamp(2.2rem, 7vw, 4.4rem); font-style: italic; margin: .4em 0; }
.entre-sub { font-size: 1.15rem; color: var(--texto-suave); }
.entre-portada .countdown { justify-content: center; }
.entre-bloque { width: min(820px, 100%); margin: 0 auto; padding: 28px 0; border-top: 1px solid var(--linea); }
.entre-p { font-family: var(--serif); font-size: clamp(1.4rem, 3.5vw, 1.9rem); color: var(--titulo); font-weight: var(--peso-titulo); margin: 0 0 .5em; }
.entre-p::before { content: "— "; color: var(--acento); }
.entre-r { padding-left: 1.2em; border-left: 3px solid var(--acento); }
.entre-quien { font-weight: 700; color: var(--acento-texto); text-transform: uppercase; font-size: .8rem; letter-spacing: .12em; }
.entre-firma { font-style: italic; }

/* 9. Lista rápida -------------------------------------------- */
.cuento-lista.bloque { background: var(--fondo); padding: 10px 16px; font-size: 1.12rem; }
.lista-portada, .lista-bloque { width: min(760px, 100%); margin: 0 auto; }
.lista-portada { padding: 90px 0 20px; }
.lista-pre { text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; color: var(--acento-texto); margin: 0; }
.lista-portada h1 { font-size: clamp(2.4rem, 8vw, 4.4rem); margin: .1em 0 .2em; }
.lista-sub { color: var(--texto-suave); }
.lista-bloque { padding: 22px 0; border-top: 2px solid var(--linea); }
.lista-bloque h2 { text-align: left; font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: .3em; }
.lista-intro { color: var(--texto-suave); }
.lista-puntos { list-style: none; padding: 0; margin: .6em 0; display: grid; gap: .55em; }
.lista-puntos li { padding: .7em 1em; background: var(--tarjeta); border-radius: var(--radio-campo); border-left: 5px solid var(--acento); }
.lista-firma { font-style: italic; text-align: right; }

/* 10. Infografía --------------------------------------------- */
.cuento-infografia.bloque { background: var(--fondo); padding: 10px 16px; }
.info-portada { text-align: center; padding: 90px 16px 30px; background: var(--hero-fondo); color: var(--hero-texto); margin: -10px -16px 0; }
.info-pre { text-transform: uppercase; letter-spacing: .25em; font-size: .8rem; color: var(--acento); }
.info-portada h1 { font-family: var(--script); font-size: var(--tam-nombres); line-height: 1; color: var(--hero-texto); margin: .1em 0 .4em; }
.info-portada h1 em { color: var(--acento); font-style: normal; }
.info-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8em; max-width: 900px; margin: 0 auto 1em; }
.info-datos div { padding: 1em .6em; border-radius: var(--radio); background: color-mix(in srgb, var(--tarjeta) 16%, transparent); border: var(--borde) solid color-mix(in srgb, var(--acento) 55%, transparent); }
.info-datos b { display: block; font-family: var(--serif); font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.05; color: var(--acento); }
.info-portada .info-datos div { background: rgba(0,0,0,.16); }
.info-portada .info-datos b { color: var(--hero-texto); text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.info-portada .info-datos span { color: var(--hero-suave); }
.info-datos span { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; }
.info-portada .countdown { justify-content: center; }
.info-portada .countdown div { background: rgba(255,255,255,.08); color: var(--hero-texto); }
.info-portada .countdown span { color: var(--hero-suave); }
.info-bloque { width: min(1000px, 100%); margin: 0 auto; padding: 36px 0; }
.info-num { font-family: var(--serif); font-size: 4rem; line-height: 1; color: color-mix(in srgb, var(--acento) 45%, transparent); margin: 0; }
.info-bloque h2 { text-align: left; }
.info-bloque .info-datos div { background: var(--tarjeta); color: var(--texto); }
.info-bloque .info-datos b { color: var(--acento-texto); }
.info-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1em; margin-top: 1em; }
.info-ficha { background: var(--tarjeta); border-radius: var(--radio); padding: 1.3em; border: var(--borde) solid var(--linea); color: var(--texto); }
.info-icono { font-size: 2.4rem; display: block; line-height: 1; margin-bottom: .3em; }
.info-meta { display: block; font-family: var(--serif); font-size: 2rem; color: var(--acento-texto); line-height: 1.1; }
.info-ficha h3 { font-size: 1.2rem; margin: .2em 0; }
.info-ficha p { margin: 0 0 .4em; font-size: .95rem; }
.info-firma { font-family: var(--script); font-size: 1.8rem; color: var(--titulo); }

/* ==========================================================
   FORMAS DE NAVEGAR
   ========================================================== */

/* 1. Página larga (formas de contar que no son la clásica): hueco para el menú fijo */
.nav-scroll:not(.cuento-clasica), .nav-sobre:not(.cuento-clasica) { padding-top: 66px; }
.nav-scroll .bloque, .nav-sobre .bloque { scroll-margin-top: 70px; }
.nav-scroll .chat-cabecera, .nav-sobre .chat-cabecera { top: 66px; }

/* 2. App con pestañas */
.app-cabecera { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: .8em 16px; background: var(--nav-solido); box-shadow: 0 2px 12px var(--sombra-color); color: var(--titulo); font-family: var(--serif); }
.app-cabecera b span { color: var(--acento); }
.app-cabecera small { color: var(--texto-suave); font-family: var(--sans); }
.app-zona { padding-bottom: 86px; min-height: 100dvh; }
.app-zona .hero { min-height: calc(100dvh - 140px); }
.app-pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 2px; overflow-x: auto; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--nav-solido); box-shadow: 0 -2px 16px var(--sombra-color); scrollbar-width: none; }
.app-pestanas::-webkit-scrollbar { display: none; }
.app-pestanas button { flex: 1 0 74px; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: var(--texto-suave); font: 500 .7rem var(--sans); padding: .4em .2em; border-radius: 12px; cursor: pointer; }
.app-pestanas button span { font-size: 1.35rem; line-height: 1; }
.app-pestanas button.activa { color: var(--titulo); background: color-mix(in srgb, var(--acento) 22%, transparent); }

/* 3. Pantallas en horizontal */
.nav-horizontal { overflow: hidden; }
html[data-nav="horizontal"] body { overflow: hidden; }
.hz-pista { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; height: 100dvh; scrollbar-width: none; }
.hz-pista::-webkit-scrollbar { display: none; }
.hz-pantalla { flex: 0 0 100%; width: 100%; height: 100dvh; overflow-y: auto; scroll-snap-align: start; padding-bottom: 90px; }
.hz-pantalla .hero { min-height: 100dvh; }
.hz-puntos { position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 30; display: flex; gap: 6px; }
.hz-puntos button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: color-mix(in srgb, var(--texto) 30%, transparent); cursor: pointer; }
.hz-puntos button.activa { background: var(--acento); width: 24px; border-radius: 6px; }
.hz-flechas { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: .6em; background: var(--nav-solido); border-radius: 999px; padding: 4px; box-shadow: 0 4px 18px var(--sombra-color); }
.hz-flechas button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--primario); color: var(--sobre-primario); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.hz-titulo { font-size: .8rem; color: var(--texto); min-width: 140px; text-align: center; }

/* 4. Stories */
html[data-nav="stories"] body { overflow: hidden; background: #111; }
.st-marco { position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(480px, 100%); background: var(--fondo); overflow: hidden; box-shadow: 0 0 60px rgba(0,0,0,.5); }
.st-barras { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 5; display: flex; gap: 4px; }
.st-barras i { flex: 1; height: 3px; border-radius: 2px; background: rgba(128,128,128,.35); overflow: hidden; }
.st-barras i b { display: block; height: 100%; width: 0; background: var(--acento); }
.st-barras i.vista b { width: 100%; }
.st-barras i.actual b { width: 100%; animation: st-llenar .6s ease-out; }
@keyframes st-llenar { from { width: 0; } }
.st-autor { position: absolute; top: 18px; left: 10px; right: 10px; z-index: 5; display: flex; align-items: center; gap: .6em; color: var(--titulo); font-size: .9rem; background: color-mix(in srgb, var(--fondo) 80%, transparent); padding: .3em .6em; border-radius: 999px; }
.st-autor b span { color: var(--acento); }
.st-autor small { margin-left: auto; color: var(--texto-suave); }
.st-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento); font-size: .8rem; font-weight: 700; }
.st-pantallas { position: absolute; top: 62px; bottom: 56px; left: 0; right: 0; overflow-y: auto; }
.st-pantalla .hero { min-height: 100%; padding-top: 40px; }
.st-zona { position: absolute; top: 62px; bottom: 56px; width: 10%; z-index: 4; border: 0; background: transparent; cursor: pointer; }
.st-zona--izq { left: 0; } .st-zona--der { right: 0; }
.st-botones { position: absolute; bottom: 0; left: 0; right: 0; height: 56px; display: flex; gap: 8px; padding: 8px; background: var(--nav-solido); }
.st-botones button { flex: 1; border: 0; border-radius: 999px; background: var(--primario); color: var(--sobre-primario); font: 500 .9rem var(--sans); cursor: pointer; }
.st-botones button:first-child { background: transparent; color: var(--texto); border: 1px solid var(--linea); }

/* 5. Sobre que se abre */
.sobre-capa { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; align-content: center; gap: 1.4em; background: var(--hero-fondo); transition: opacity .8s; padding: 16px; }
.sobre-capa.fuera { opacity: 0; pointer-events: none; }
.sobre { position: relative; width: min(440px, 88vw); aspect-ratio: 1.55; background: color-mix(in srgb, var(--tarjeta) 88%, var(--acento)); border-radius: 8px; box-shadow: 0 30px 60px rgba(0,0,0,.35); perspective: 900px; }
.sobre::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(155deg, transparent 49.5%, color-mix(in srgb, var(--acento) 30%, var(--tarjeta)) 50%), linear-gradient(205deg, transparent 49.5%, color-mix(in srgb, var(--acento) 22%, var(--tarjeta)) 50%); z-index: 2; pointer-events: none; }
.sobre__solapa { position: absolute; inset: 0 0 45% 0; background: color-mix(in srgb, var(--acento) 40%, var(--tarjeta)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .8s ease; z-index: 3; }
.sobre__carta { position: absolute; left: 6%; right: 6%; top: 8%; bottom: 8%; background: var(--tarjeta); border-radius: 6px; z-index: 1; display: grid; place-content: center; text-align: center; gap: .2em; color: var(--titulo); transition: transform .9s .5s ease; }
.sobre__carta p { margin: 0; font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-suave); }
.sobre__carta b { font-family: var(--script); font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 400; }
.sobre__carta b span { color: var(--acento); }
.sobre__lacre { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); z-index: 4; width: 74px; height: 74px; border-radius: 50%; border: 0; cursor: pointer; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--primario) 60%, #fff), var(--primario) 60%, var(--primario-hover)); color: var(--sobre-primario); font: 700 1rem var(--serif); box-shadow: 0 6px 16px rgba(0,0,0,.35); animation: lacre-latido 1.6s ease-in-out infinite; transition: opacity .3s; }
@keyframes lacre-latido { 50% { transform: translate(-50%, -50%) scale(1.07); } }
.sobre__pista { color: var(--hero-texto); text-align: center; letter-spacing: .1em; margin: 0; }
.sobre-capa.abierto .sobre__solapa { transform: rotateX(180deg); z-index: 0; }
.sobre-capa.abierto .sobre__lacre { opacity: 0; }
.sobre-capa.abierto .sobre__carta { transform: translateY(-55%); z-index: 3; }

/* 6. Mapa de paradas */
.mp-tablero { padding: 60px 0 90px; background: var(--fondo-alt); }
.mp-paradas { list-style: none; padding: 0; margin: 2em auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.2em 1em; max-width: 900px; counter-reset: p; }
.mp-paradas li { position: relative; }
.mp-paradas li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -1em; width: 1em; border-top: 3px dotted var(--acento); }
.mp-paradas button { width: 100%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; border-radius: 50% 50% 46% 54% / 52% 48% 52% 48%; border: var(--borde) solid var(--acento); background: var(--tarjeta); color: var(--texto); cursor: pointer; font: 500 .95rem var(--sans); box-shadow: 0 8px 20px var(--sombra-color); transition: transform .2s; position: relative; }
.mp-paradas button:hover { transform: translateY(-4px) rotate(-2deg); }
.mp-num { position: absolute; top: 6%; left: 10%; width: 30px; height: 30px; border-radius: 50%; background: var(--primario); color: var(--sobre-primario); display: grid; place-items: center; font-size: .85rem; }
.mp-icono { font-size: 2.2rem; line-height: 1; }
.mp-meta { background: var(--acento) !important; color: var(--sobre-acento) !important; }
.mp-paradas button.visitada::after { content: "✔"; position: absolute; top: 6%; right: 10%; width: 26px; height: 26px; border-radius: 50%; background: #3f8f4f; color: #fff; display: grid; place-items: center; font-size: .8rem; }
.mp-panel { position: fixed; inset: 0; z-index: 200; background: var(--fondo); display: flex; flex-direction: column; animation: mp-sube .35s ease; }
@keyframes mp-sube { from { transform: translateY(40px); opacity: 0; } }
.mp-panel__barra { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .6em 12px; background: var(--nav-solido); box-shadow: 0 2px 12px var(--sombra-color); }
.mp-panel__barra button { border: var(--borde) solid var(--acento); background: none; color: var(--texto); border-radius: 999px; padding: .45em 1em; font: 500 .85rem var(--sans); cursor: pointer; }
.mp-panel__barra span { font-family: var(--serif); color: var(--titulo); }
.mp-panel__contenido { flex: 1; overflow-y: auto; }

/* 7. Acordeón */
.ac-lista { padding: 30px 0 60px; display: grid; gap: .8em; }
.ac-item { background: var(--tarjeta); border: var(--borde) solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.ac-item summary { list-style: none; display: flex; align-items: center; gap: .8em; padding: 1em 1.2em; cursor: pointer; font-family: var(--serif); font-size: clamp(1.15rem, 3vw, 1.45rem); color: var(--titulo); }
.ac-item summary::-webkit-details-marker { display: none; }
.ac-item summary::after { content: "+"; margin-left: auto; color: var(--acento); font: 400 1.6rem var(--sans); transition: transform .2s; }
.ac-item[open] summary::after { transform: rotate(45deg); }
.ac-icono { font-size: 1.5rem; }
.ac-item .seccion { padding: 30px 0; }
.ac-item .bloque > * > .wrap > h2:first-child, .ac-item .bloque .kicker { display: none; }

/* 8. Libro */
.lb { width: min(920px, 100% - 16px); margin: 16px auto 30px; position: relative; perspective: 1600px; }
.lb-lomo { position: absolute; left: -8px; top: 0; bottom: 60px; width: 16px; border-radius: 8px 0 0 8px; background: linear-gradient(90deg, var(--titulo), color-mix(in srgb, var(--titulo) 60%, var(--fondo))); z-index: 2; }
.lb-paginas { background: var(--tarjeta); border-radius: 4px 14px 14px 4px; box-shadow: 0 20px 50px var(--sombra-color), inset 12px 0 20px -12px rgba(0,0,0,.25); min-height: calc(100dvh - 110px); overflow: hidden; }
.lb-pagina { transform-origin: left center; }
.lb-pagina.entra-der { animation: lb-pasar .6s ease both; }
.lb-pagina.entra-izq { animation: lb-volver .6s ease both; }
@keyframes lb-pasar { from { transform: rotateY(-70deg); opacity: 0; } }
@keyframes lb-volver { from { transform: rotateY(40deg); opacity: 0; } }
.lb-pie { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: 12px 4px; }
.lb-pie button { border: var(--borde) solid var(--acento); background: var(--tarjeta); color: var(--texto); border-radius: 999px; padding: .55em 1.1em; font: 500 .85rem var(--sans); cursor: pointer; }
.lb-pie button:disabled { opacity: .35; cursor: default; }
.lb-pie span { font-family: var(--serif); color: var(--texto-suave); }

/* 9. Baraja de cartas */
.bj { width: min(800px, 100% - 24px); margin: 14px auto; }
.bj-mazo { position: relative; height: calc(100dvh - 110px); }
.bj-carta { position: absolute; inset: 0; overflow-y: auto; border-radius: calc(var(--radio) + 6px); background: var(--fondo); box-shadow: 0 16px 40px var(--sombra-color); border: var(--borde) solid var(--linea); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s; }
.bj-carta[data-pos="0"] { z-index: 10; }
.bj-carta[data-pos="1"] { z-index: 9; transform: translateY(14px) scale(.96) rotate(1.5deg); }
.bj-carta[data-pos="2"] { z-index: 8; transform: translateY(28px) scale(.92) rotate(-1.5deg); }
.bj-carta[data-pos="3"] { z-index: 7; transform: translateY(40px) scale(.88); }
.bj-carta[data-pos="oculta"] { opacity: 0; transform: scale(.85); z-index: 1; }
.bj-carta[data-pos="fuera"] { opacity: 0; transform: translateX(-120%) rotate(-14deg); z-index: 11; pointer-events: none; }
.bj-carta[data-pos]:not([data-pos="0"]) { overflow: hidden; }
.bj-carta .hero { min-height: 100%; }
.bj-mandos { display: flex; justify-content: space-between; align-items: center; padding-top: 58px; gap: .6em; }
.bj-mandos button { border: 0; background: var(--primario); color: var(--sobre-primario); border-radius: 999px; padding: .6em 1.2em; font: 500 .9rem var(--sans); cursor: pointer; }
.bj-mandos button:first-child { background: transparent; color: var(--texto); border: 1px solid var(--linea); }
.bj-mandos span { color: var(--texto-suave); font-family: var(--serif); }

/* 10. Paso a paso */
.pp-mando { display: flex; flex-direction: column; align-items: center; gap: .6em; padding: 30px 0 50px; }
.pp-siguiente { font-size: 1rem; animation: pp-latido 1.8s ease-in-out infinite; }
@keyframes pp-latido { 50% { transform: translateY(4px); } }
.pp-todo { border: 0; background: none; color: var(--texto-suave); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; }
.pp-aparece { animation: pp-entra .6s ease both; }
@keyframes pp-entra { from { opacity: 0; transform: translateY(24px); } }

@media (max-width: 700px) {
  .diario-cabecera { grid-template-columns: 1fr; }
  .mp-paradas { grid-template-columns: repeat(2, 1fr); }
  .mp-paradas li::after { display: none; }
  .lb-pie button, .bj-mandos button { font-size: .78rem; padding: .5em .8em; }
}
@media (prefers-reduced-motion: reduce) { .pp-siguiente, .sobre__lacre, .juego-start { animation: none; } }