/* ══════════════════════════════════════════════════════════════
   Alma y Simón · estilos del sitio
   Paleta sacada de las ilustraciones: bosque de noche, luz de
   luciérnaga, el celeste del auto volador y el fuego del título.
   Tres temas: noche (predeterminado), día y alto contraste.
   El tamaño de todo depende de --tam (lo elige cada lector).
   ══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Grandstander'; src: url('../assets/fonts/grandstander.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Andika'; src: url('../assets/fonts/andika-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Andika'; src: url('../assets/fonts/andika-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('../assets/fonts/atkinson-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('../assets/fonts/atkinson-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'OpenDyslexic'; src: url('../assets/fonts/opendyslexic-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'OpenDyslexic'; src: url('../assets/fonts/opendyslexic-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --tam: 1;
  --noche: #0E3B3C;
  --noche-hondo: #08292B;
  --musgo: #15504C;
  --musgo-claro: #1E6560;
  --luz: #FFC94D;
  --luz-hondo: #F0A825;
  --celeste: #8ED3F2;
  --fuego: #E8542A;
  --hoja: #7CC46A;
  --papel: #FFFBF2;
  --tinta: #17302F;

  /* tema noche (predeterminado) */
  --fondo: var(--noche);
  --fondo-2: var(--noche-hondo);
  --superficie: var(--musgo);
  --superficie-2: var(--musgo-claro);
  --texto: #F5EFDF;
  --texto-suave: #C9D9D3;
  --borde: rgba(245, 239, 223, .22);
  --acento: var(--luz);
  --acento-texto: #2A1C00;
  --enlace: var(--celeste);
  --foco: var(--celeste);
  --sombra: 0 10px 30px rgba(0, 0, 0, .35);

  --letra: 'Andika', 'Atkinson', system-ui, sans-serif;
  --titulos: 'Grandstander', 'Andika', system-ui, sans-serif;
  --interletra: normal;
  --interlinea: 1.6;
  --radio: 18px;
  --ancho: 1120px;
  color-scheme: dark;
}

/* Tamaño elegido por el lector: todo está en rem, así crece entero */
html { font-size: calc(100% * var(--tam)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html[data-tema="dia"] {
  --fondo: #F6F1E3;
  --fondo-2: #EAE2CC;
  --superficie: #FFFFFF;
  --superficie-2: #FFF6E0;
  --texto: #17302F;
  --texto-suave: #3F5A57;
  --borde: rgba(23, 48, 47, .18);
  --acento: #0E3B3C;
  --acento-texto: #FFFFFF;
  --enlace: #0B5E86;
  --foco: #0B5E86;
  --sombra: 0 8px 24px rgba(23, 48, 47, .14);
  color-scheme: light;
}
html[data-tema="contraste"] {
  --fondo: #000000;
  --fondo-2: #000000;
  --superficie: #000000;
  --superficie-2: #1A1A1A;
  --texto: #FFFFFF;
  --texto-suave: #FFFFFF;
  --borde: #FFFFFF;
  --acento: #FFE500;
  --acento-texto: #000000;
  --enlace: #FFE500;
  --foco: #FFE500;
  --sombra: none;
  color-scheme: dark;
}
html[data-letra="atkinson"] { --letra: 'Atkinson', 'Andika', system-ui, sans-serif; }
html[data-letra="dislexia"] { --letra: 'OpenDyslexic', 'Andika', system-ui, sans-serif; --interlinea: 1.75; }
html.espacio { --interletra: .06em; --interlinea: 1.95; }
html.espacio body { word-spacing: .16em; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 1.125rem;
  line-height: var(--interlinea);
  letter-spacing: var(--interletra);
  min-height: 100vh;
  overflow-x: hidden;
}
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
a { color: var(--enlace); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--titulos); line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: normal; }
h1 { font-size: clamp(2rem, 5.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }

/* Foco bien visible para teclado (nunca se esconde) */
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
html[data-tema="contraste"] :focus-visible { outline-width: 4px; }

.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Escondido por completo hasta que llega el foco (con letra grande, un "top" fijo dejaba asomar el enlace). */
.saltar { position: absolute; left: 12px; top: 0; z-index: 1000; background: var(--acento); color: var(--acento-texto); padding: .7rem 1.1rem; border-radius: 12px; font-weight: 700; text-decoration: none; transform: translateY(-130%); }
.saltar:focus, .saltar:focus-visible { transform: translateY(12px); }

.envoltura { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .7rem 1.35rem;
  border-radius: 999px; border: 2px solid transparent;
  font-family: var(--letra); font-weight: 700; font-size: 1.1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-luz { background: var(--acento); color: var(--acento-texto); box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.btn-luz:hover { background: var(--luz-hondo); }
html[data-tema="dia"] .btn-luz:hover { background: #134f50; }
html[data-tema="contraste"] .btn-luz { box-shadow: none; border-color: #FFFFFF; }
.btn-borde { background: transparent; color: var(--texto); border-color: var(--borde); }
.btn-borde:hover { background: var(--superficie-2); }
.btn-fuego { background: #C9431D; color: #FFFFFF; }
.btn-fuego:hover { background: #A63612; }
html[data-tema="contraste"] .btn-fuego { background: #000; color: #FFE500; border-color: #FFE500; }
.btn-grande { min-height: 64px; font-size: 1.25rem; padding: .9rem 1.8rem; }
.btn-chico { min-height: 44px; padding: .45rem 1rem; font-size: 1rem; }
.btn-ancho { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.enlace { background: none; border: 0; padding: 0; color: var(--enlace); text-decoration: underline; cursor: pointer; }

/* ══════════════ BARRA SUPERIOR ══════════════ */
.barra {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem max(16px, env(safe-area-inset-left)) .55rem max(16px, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--fondo-2) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
html[data-tema="contraste"] .barra { background: #000; border-bottom: 2px solid #fff; }
.barra-marca { display: flex; align-items: center; margin-right: auto; min-height: 48px; }
.barra-marca img { height: 40px; width: auto; display: block; }
html[data-tema="dia"] .barra-marca img { filter: drop-shadow(0 0 0 transparent); }
.barra-volver { display: inline-flex; align-items: center; gap: .3rem; min-height: 48px; padding: 0 .7rem; border-radius: 12px; color: var(--texto); text-decoration: none; font-weight: 700; }
.barra-volver:hover { background: var(--superficie-2); }

.btn-a11y {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: .35rem .95rem .35rem .45rem;
  border-radius: 999px; border: 2px solid var(--acento);
  background: var(--fondo); color: var(--texto); font-weight: 700; font-size: 1rem;
}
.btn-a11y:hover { background: var(--superficie-2); }
.btn-a11y .aa { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--acento); color: var(--acento-texto); font-family: var(--titulos); font-weight: 900; font-size: 1rem; letter-spacing: -.02em; }
.btn-a11y-texto { white-space: nowrap; line-height: 1.15; }
.btn-a11y-texto small { display: block; font-weight: 400; font-size: .75rem; color: var(--texto-suave); line-height: 1.1; }

.perfil { position: relative; }
.perfil > summary { list-style: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; border: 2px solid var(--borde); background: var(--superficie); overflow: hidden; }
.perfil > summary::-webkit-details-marker { display: none; }
.perfil > summary img { width: 100%; height: 100%; object-fit: cover; }
.perfil-inicial { font-family: var(--titulos); font-weight: 800; font-size: 1.2rem; }
.perfil-menu { position: absolute; right: 0; top: calc(100% + 10px); width: min(320px, 90vw); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; box-shadow: var(--sombra); z-index: 60; }
.perfil-menu p { font-size: 1rem; }
.perfil-menu .btn { width: 100%; margin-top: .4rem; }
.perfil-google { min-height: 44px; display: flex; justify-content: center; margin: .6rem 0 .3rem; }

@media (max-width: 560px) {
  .barra-marca img { height: 30px; }
  .btn-a11y-texto small { display: none; }
  .btn-a11y { padding-right: .75rem; font-size: .95rem; gap: .4rem; }
  .btn-a11y .aa { width: 30px; height: 30px; font-size: .9rem; }
}
@media (max-width: 380px) {
  .btn-a11y-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .btn-a11y { padding: .35rem; }
}

/* ══════════════ PANEL "LEER A MI MANERA" ══════════════ */
.panel-fondo { position: fixed; inset: 0; z-index: 200; background: rgba(0, 10, 10, .55); display: flex; justify-content: flex-end; }
.panel-fondo[hidden] { display: none; }
.panel {
  width: min(460px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--fondo); color: var(--texto);
  border-left: 1px solid var(--borde);
  padding: 1.1rem 1.1rem 2.5rem;
  box-shadow: -10px 0 40px rgba(0,0,0,.35);
}
html[data-tema="contraste"] .panel { border-left: 3px solid #fff; }
.panel-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.panel-cabeza h2 { font-size: 1.6rem; margin: 0; }
.panel-cerrar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--borde); background: transparent; color: var(--texto); }
.panel-cerrar:hover { background: var(--superficie-2); }
.panel-bajada { color: var(--texto-suave); font-size: 1rem; margin-bottom: 1rem; }
.panel-grupo { border: 0; margin: 0 0 1.2rem; padding: 0; }
.panel-grupo > legend, .panel-grupo > .legend { font-family: var(--titulos); font-weight: 800; font-size: 1.15rem; margin-bottom: .5rem; padding: 0; }
.panel-ayuda { font-size: .92rem; color: var(--texto-suave); margin: .4rem 0 0; }

.tamano { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: .5rem; }
.tamano button { height: 64px; border-radius: 16px; border: 2px solid var(--borde); background: var(--superficie); color: var(--texto); font-family: var(--titulos); font-weight: 900; }
.tamano button:hover { border-color: var(--acento); }
.tamano .menos { font-size: 1.1rem; }
.tamano .mas { font-size: 1.7rem; }
.tamano output { text-align: center; font-weight: 700; font-size: 1.15rem; }
.tamano output small { display: block; font-weight: 400; font-size: .85rem; color: var(--texto-suave); }

.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .55rem; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  min-height: 74px; padding: .5rem; text-align: center;
  border-radius: 16px; border: 2px solid var(--borde); background: var(--superficie);
  font-weight: 700; font-size: 1rem; line-height: 1.2;
}
.opcion span b { font-family: var(--titulos); font-size: 1.35rem; line-height: 1; }
.opcion input:checked + span { border-color: var(--acento); box-shadow: inset 0 0 0 2px var(--acento); background: var(--superficie-2); }
.opcion input:checked + span::after { content: '✓'; position: absolute; top: 6px; right: 10px; font-weight: 900; color: var(--acento); }
.opcion input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 3px; }
.muestra-dia { background: #FFFBF2 !important; color: #17302F; }
.muestra-noche { background: #0E3B3C !important; color: #F5EFDF; }
.muestra-contraste { background: #000 !important; color: #FFE500; border-color: #fff !important; }
.muestra-andika b { font-family: 'Andika' !important; }
.muestra-atkinson b { font-family: 'Atkinson' !important; }
.muestra-dislexia b { font-family: 'OpenDyslexic' !important; font-size: 1.1rem !important; }

.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: .55rem .9rem; border-radius: 16px; border: 2px solid var(--borde); background: var(--superficie); margin-bottom: .55rem; cursor: pointer; }
.interruptor > span { font-weight: 700; line-height: 1.25; }
.interruptor > span small { display: block; font-weight: 400; font-size: .88rem; color: var(--texto-suave); }
.interruptor input { appearance: none; -webkit-appearance: none; flex: none; width: 58px; height: 34px; border-radius: 999px; background: var(--fondo-2); border: 2px solid var(--borde); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.interruptor input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--texto-suave); transition: transform .15s, background .15s; }
.interruptor input:checked { background: var(--acento); border-color: var(--acento); }
.interruptor input:checked::after { transform: translateX(24px); background: var(--acento-texto); }
html[data-tema="contraste"] .interruptor input:checked::after { background: #000; }

.panel-muestra { border-radius: 16px; border: 2px dashed var(--borde); padding: .9rem 1rem; margin: .2rem 0 1.2rem; font-size: 1.15rem; background: var(--superficie); }
.panel-muestra small { display: block; font-size: .8rem; color: var(--texto-suave); margin-bottom: .2rem; font-family: var(--letra); }
html.mayus .panel-muestra .texto-muestra, html.mayus .muestra-libro { text-transform: uppercase; }
.panel-pie { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }
.panel-pie .btn { flex: 1 1 160px; }

/* ══════════════ INICIO ══════════════ */
.cinta-feria { margin: 0; padding: .7rem 16px; text-align: center; background: var(--acento); color: var(--acento-texto); font-weight: 700; }

.hero { position: relative; overflow: hidden; isolation: isolate; }
.luciernagas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
html.quieto .luciernagas, html[data-tema="contraste"] .luciernagas { display: none; }
.hero-grilla { display: grid; gap: 1.6rem; align-items: center; padding: 1.6rem 0 2.6rem; }
@media (min-width: 860px) { .hero-grilla { grid-template-columns: minmax(260px, 400px) 1fr; gap: 3.2rem; padding: 3rem 0 4rem; } }
.hero-libro { display: flex; justify-content: center; }
.libro-3d { position: relative; width: min(66vw, 340px); perspective: 1400px; }
.libro-3d img { display: block; width: 100%; border-radius: 6px 14px 14px 6px; box-shadow: -2px 0 0 #6b3a1d, -10px 0 0 #2a1608, 0 30px 60px rgba(0,0,0,.45), 0 0 80px rgba(255, 201, 77, .18); transform: rotateY(-14deg) rotateX(3deg); transform-origin: left center; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.libro-3d:hover img { transform: rotateY(-4deg) rotateX(1deg); }
html.quieto .libro-3d img { transform: none; transition: none; }
html[data-tema="contraste"] .libro-3d img { box-shadow: 0 0 0 3px #fff; transform: none; }
.hero-titulo { margin: 0 0 .7rem; }
.hero-titulo img { display: block; width: min(560px, 100%); height: auto; }
html[data-tema="dia"] .hero-titulo img { filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.hero-bajada { font-size: 1.25rem; max-width: 34em; color: var(--texto); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.3rem 0 .8rem; }
.hero-acciones .btn { flex: 1 1 220px; }
.hero-seguir { display: block; font-size: .95rem; font-weight: 400; opacity: .85; }
.hero-nota { font-size: .95rem; color: var(--texto-suave); }
.hero-nota a, .hero-nota .enlace { font-weight: 700; }
.contador { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; color: var(--texto-suave); margin-top: .4rem; }
.contador .ico { color: var(--acento); }
.recorrido-btn { display: inline-flex; align-items: center; gap: .7rem; margin-top: .6rem; min-height: 52px; padding: .4rem 1rem .4rem .4rem; border-radius: 999px; border: 2px solid var(--borde); background: transparent; color: var(--texto); text-align: left; }
.recorrido-btn:hover { background: var(--superficie-2); }
.recorrido-btn .rb-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--celeste); color: #08292B; font-size: .95rem; }
html[data-tema="dia"] .recorrido-btn .rb-ico { background: #0E3B3C; color: #fff; }
.recorrido-btn small { display: block; font-size: .85rem; color: var(--texto-suave); }

/* ── ¿Cómo te gusta leer? ── */
.como-leer { padding: 2.4rem 0; background: var(--fondo-2); border-block: 1px solid var(--borde); }
.como-leer-grilla { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .como-leer-grilla { grid-template-columns: 1fr 1.15fr; align-items: start; gap: 2.4rem; } }
.como-leer h2 { margin-bottom: .3rem; }
.como-leer-bajada { color: var(--texto-suave); max-width: 32em; }
.formas { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .formas { grid-template-columns: repeat(3, 1fr); } }
.forma { position: relative; }
.forma input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.forma label { display: flex; flex-direction: column; gap: .35rem; min-height: 118px; padding: .85rem .8rem; border-radius: 18px; border: 2px solid var(--borde); background: var(--superficie); line-height: 1.2; height: 100%; }
.forma .forma-ico { font-family: var(--titulos); font-size: 1.7rem; font-weight: 900; line-height: 1; min-height: 1.9rem; display: flex; align-items: center; gap: .3rem; }
.forma .forma-ico .ico { width: 1.6rem; height: 1.6rem; }
.forma strong { font-size: 1.05rem; }
.forma small { font-size: .85rem; color: var(--texto-suave); }
.forma input:checked + label { border-color: var(--acento); background: var(--superficie-2); box-shadow: inset 0 0 0 2px var(--acento); }
.forma input:checked + label::after { content: '✓'; position: absolute; top: 8px; right: 12px; font-weight: 900; font-size: 1.1rem; color: var(--acento); }
.forma input:focus-visible + label { outline: 3px solid var(--foco); outline-offset: 3px; }

.vista-previa { border-radius: 22px; overflow: hidden; background: var(--papel); color: var(--tinta); box-shadow: var(--sombra); }
html[data-tema="contraste"] .vista-previa { background: #000; color: #fff; border: 3px solid #fff; }
html[data-tema="noche"] .vista-previa { background: #10393A; color: #F3EAD3; }
.vista-previa-img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.vista-previa-texto { padding: 1.1rem 1.3rem 1.3rem; font-size: 1.2rem; line-height: var(--interlinea); }
.vista-previa-texto small { display: block; font-size: .85rem; opacity: .75; margin-bottom: .3rem; }
.vista-previa-texto p { margin: 0; text-indent: 1.4em; }
html.mayus .vista-previa-texto p { text-transform: uppercase; }
.vista-previa-pie { display: flex; gap: .6rem; flex-wrap: wrap; padding: 0 1.3rem 1.3rem; }

/* ── Mapa de la aventura ── */
.seccion { padding: 2.8rem 0; }
.seccion-bajada { color: var(--texto-suave); max-width: 36em; margin-bottom: 1.6rem; }
.mapa-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: 1fr; counter-reset: cap; }
@media (min-width: 620px) { .mapa-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .mapa-lista { grid-template-columns: repeat(3, 1fr); } }
.parada a { display: grid; grid-template-columns: 92px 1fr; gap: .9rem; align-items: center; padding: .6rem; border-radius: 20px; text-decoration: none; color: var(--texto); background: var(--superficie); border: 2px solid transparent; height: 100%; }
.parada a:hover { border-color: var(--acento); }
.parada-img { position: relative; width: 92px; height: 92px; border-radius: 16px; overflow: hidden; background: var(--fondo-2); }
.parada-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parada-num { position: absolute; left: 6px; top: 6px; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 .3rem; border-radius: 999px; background: var(--acento); color: var(--acento-texto); font-family: var(--titulos); font-weight: 900; font-size: 1rem; }
.parada-texto { display: flex; flex-direction: column; gap: .15rem; line-height: 1.25; }
.parada-texto strong { font-family: var(--titulos); font-size: 1.12rem; }
.parada-texto small { color: var(--texto-suave); font-size: .9rem; }
.parada-estado { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 700; }
.parada-hecho .parada-estado { color: var(--hoja); }
html[data-tema="dia"] .parada-hecho .parada-estado { color: #2D7A2F; }
.parada-actual a { border-color: var(--acento); }
.parada-actual .parada-estado { color: var(--acento); }
html[data-tema="dia"] .parada-actual .parada-estado { color: #8A5A00; }
.progreso { height: 12px; border-radius: 999px; background: var(--fondo-2); overflow: hidden; border: 1px solid var(--borde); }
.progreso > span { display: block; height: 100%; background: linear-gradient(90deg, var(--luz-hondo), var(--luz)); border-radius: inherit; }
html[data-tema="contraste"] .progreso > span { background: #FFE500; }
.mapa-progreso { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.mapa-progreso .progreso { flex: 1 1 220px; }

/* ── Más aventuras ── */
.aventuras { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .aventuras { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; } .aventura-juego { grid-row: span 2; } }
.aventura { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 230px; border-radius: 24px; overflow: hidden; text-decoration: none; color: #fff; background: var(--noche-hondo); isolation: isolate; }
.aventura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
.aventura::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,41,43,0) 25%, rgba(8,41,43,.92) 85%); }
.aventura:hover img { transform: scale(1.04); }
html.quieto .aventura:hover img { transform: none; }
.aventura-texto { padding: 1.2rem 1.3rem 1.3rem; }
.aventura-texto strong { display: block; font-family: var(--titulos); font-size: 1.55rem; line-height: 1.1; margin-bottom: .3rem; }
.aventura-texto span { display: block; font-size: 1rem; color: #E8EFE9; max-width: 28em; }
.aventura-chip { display: inline-flex; margin-top: .7rem; padding: .35rem .8rem; border-radius: 999px; background: var(--luz); color: #2A1C00; font-weight: 700; font-size: .95rem; }
.aventura-juego { min-height: 340px; }
html[data-tema="contraste"] .aventura { border: 3px solid #fff; }
html[data-tema="contraste"] .aventura::before { background: rgba(0,0,0,.78); }
.mini-enlaces { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }

/* ── Banda "a la gorra" ── */
.gorra { padding: 2.8rem 0; background: var(--fondo-2); border-top: 1px solid var(--borde); }
.gorra-grilla { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 860px) { .gorra-grilla { grid-template-columns: 1.2fr 1fr; gap: 3rem; } }
.gorra-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.papel-tarjeta { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem .8rem .8rem; border-radius: 20px; background: var(--superficie); text-decoration: none; color: var(--texto); border: 2px solid var(--borde); }
.papel-tarjeta:hover { border-color: var(--acento); }
.papel-tarjeta img { width: 70px; border-radius: 4px 8px 8px 4px; box-shadow: -4px 0 0 #2a1608, 0 8px 16px rgba(0,0,0,.3); }
.papel-tarjeta strong { display: block; font-family: var(--titulos); font-size: 1.2rem; }
.papel-tarjeta span span { font-size: .95rem; color: var(--texto-suave); }


.autor-nota { padding: 2.8rem 0; }
.autor-grilla { display: grid; gap: 1.4rem; align-items: center; }
@media (min-width: 720px) { .autor-grilla { grid-template-columns: 220px 1fr; gap: 2.4rem; } }
.autor-foto { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 4px solid var(--acento); }
@media (min-width: 720px) { .autor-foto { width: 220px; height: 220px; } }

.pie { padding: 2rem 16px 2.6rem; text-align: center; font-size: .95rem; color: var(--texto-suave); border-top: 1px solid var(--borde); }
.pie nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; margin-bottom: .8rem; }
.pie nav a { color: var(--texto); font-weight: 700; padding: .4rem 0; }
.pie img { width: 30px; height: 30px; vertical-align: middle; margin-right: .4rem; }

/* ══════════════ PÁGINAS INTERNAS ══════════════ */
.interna { padding: 1.8rem 0 3rem; }
.interna-cabeza { margin-bottom: 1.6rem; max-width: 46em; }
.interna-cabeza p { color: var(--texto-suave); font-size: 1.15rem; }
.vacio { padding: 1.6rem; border: 2px dashed var(--borde); border-radius: var(--radio); text-align: center; }
.aviso { padding: .9rem 1.1rem; border-radius: 14px; background: var(--superficie-2); border-left: 6px solid var(--acento); margin-bottom: 1.2rem; }
.aviso-ok { border-left-color: var(--hoja); }
.aviso-error { border-left-color: var(--fuego); }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 400; background: var(--texto); color: var(--fondo); padding: .8rem 1.2rem; border-radius: 14px; font-weight: 700; box-shadow: var(--sombra); max-width: calc(100% - 32px); text-align: center; }

.formulario { display: grid; gap: 1rem; max-width: 560px; }
.formulario label { display: grid; gap: .35rem; font-weight: 700; }
.formulario label small { font-weight: 400; color: var(--texto-suave); }
.formulario input, .formulario select, .formulario textarea { min-height: 52px; padding: .65rem .9rem; border-radius: 14px; border: 2px solid var(--borde); background: var(--superficie); color: var(--texto); font-weight: 400; }
.formulario textarea { min-height: 120px; resize: vertical; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { border-color: var(--acento); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 40%, transparent); }
.formulario-nota { font-size: .95rem; color: var(--texto-suave); }

/* Dibujos para colorear */
.dibujos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 1rem; }
.dibujo { background: var(--superficie); border-radius: 20px; overflow: hidden; border: 1px solid var(--borde); display: flex; flex-direction: column; }
.dibujo-vista { display: block; background: #fff; aspect-ratio: 210 / 297; }
.dibujo-vista img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dibujo-pie { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.dibujo-pie strong { font-family: var(--titulos); font-size: 1.15rem; line-height: 1.2; }
.dibujo-acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.dibujo-acciones .btn { flex: 1 1 auto; }
.cuadernillo { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: 1rem 1.2rem; border-radius: 20px; background: var(--superficie-2); margin-bottom: 1.4rem; }
.cuadernillo p { margin: 0; flex: 1 1 260px; }

/* Visor de imágenes */
.visor { position: fixed; inset: 0; z-index: 300; background: rgba(0, 8, 8, .92); display: grid; place-items: center; padding: 16px; }
.visor[hidden] { display: none; }
.visor img { max-width: 100%; max-height: 82vh; border-radius: 10px; background: #fff; }
.visor figcaption { color: #fff; text-align: center; margin-top: .8rem; max-width: 60ch; }
.visor-cerrar { position: absolute; top: 14px; right: 14px; width: 56px; height: 56px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.4); color: #fff; display: grid; place-items: center; }

/* Colaborar */
.colaborar-grilla { display: grid; gap: 1.6rem; }
@media (min-width: 860px) { .colaborar-grilla { grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; } }
.destinos { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; }
.destinos li { padding: .7rem 0; border-bottom: 1px solid var(--borde); color: var(--texto-suave); }
.destinos li:first-child { border-top: 1px solid var(--borde); }
.destinos strong { display: block; color: var(--texto); }
.alcancia { padding: 1.4rem; border-radius: 24px; background: var(--superficie); border: 2px solid var(--borde); text-align: center; }
.alcancia-qr { width: 200px; height: 200px; background: #fff; padding: 10px; border-radius: 16px; margin: .4rem auto 1rem; display: block; }
.alias { display: flex; flex-direction: column; align-items: center; gap: .15rem; width: 100%; padding: .9rem; margin-bottom: .9rem; border-radius: 18px; border: 2px dashed var(--acento); background: var(--fondo-2); color: var(--texto); }
.alias-etiqueta { font-size: .9rem; color: var(--texto-suave); }
.alias-valor { font-family: var(--titulos); font-size: 1.6rem; font-weight: 900; }
.alias-accion { display: inline-flex; gap: .4rem; align-items: center; font-weight: 700; color: var(--acento); font-size: .95rem; }
html[data-tema="dia"] .alias-accion { color: #0E3B3C; }
.otras-formas { display: grid; column-gap: 2.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 1rem; }
.otra-forma { padding: 1rem 0 1.1rem; border-top: 1px solid var(--borde); }
.otra-forma strong { display: block; font-size: 1.1rem; margin-bottom: .2rem; }
.otra-forma p { font-size: 1rem; color: var(--texto-suave); margin-bottom: .6rem; }

/* Contacto */
.contacto { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 780px) { .contacto { grid-template-columns: 280px 1fr; gap: 2.6rem; } }
.contacto-foto img { width: 100%; max-width: 280px; border-radius: 24px; border: 4px solid var(--acento); }
.canales { display: grid; gap: .6rem; margin: 1.2rem 0; }
.canal { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: 18px; background: var(--superficie); border: 2px solid var(--borde); color: var(--texto); text-decoration: none; }
.canal:hover { border-color: var(--acento); }
.canal .ico { width: 1.6rem; height: 1.6rem; color: var(--acento); }
.canal small { display: block; color: var(--texto-suave); font-size: .9rem; }
.canal-wa .ico { color: #25D366; }

/* Recorrido del libro */
.recorrido { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.momento { display: grid; grid-template-columns: 20px 1fr; gap: 1rem; }
.momento-marca { width: 20px; height: 20px; border-radius: 50%; background: var(--acento); margin-top: .5rem; box-shadow: 0 0 0 6px color-mix(in srgb, var(--acento) 25%, transparent); }
.momento-cuando { color: var(--texto-suave); font-size: 1rem; margin-bottom: .3rem; }
.momento-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin-top: 1rem; }
.momento-fotos a { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 1; }
.momento-fotos img { width: 100%; height: 100%; object-fit: cover; }

/* Libro en papel */
.papel { display: grid; gap: 1.6rem; }
@media (min-width: 820px) { .papel { grid-template-columns: 320px 1fr; gap: 3rem; } }
.papel-datos { font-size: .95rem; color: var(--texto-suave); margin-top: 1rem; text-align: center; }
.papel-precio { font-family: var(--titulos); font-size: 1.6rem; color: var(--acento); }
.pedido-hecho { padding: 1rem 1.2rem; border-radius: 18px; background: var(--superficie-2); border-left: 6px solid var(--hoja); display: grid; gap: .3rem; margin-bottom: 1rem; }

/* Accesibilidad (declaración) */
.texto-largo { max-width: 46em; }
.texto-largo h2 { margin-top: 2rem; }
.texto-largo ul { padding-left: 1.3rem; }
.texto-largo li { margin-bottom: .45rem; }
.teclas { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: baseline; }
kbd { display: inline-block; min-width: 2em; padding: .1rem .5rem; border-radius: 8px; border: 2px solid var(--borde); border-bottom-width: 4px; background: var(--superficie); font-family: var(--letra); font-weight: 700; text-align: center; }

/* Mensaje al autor */
.mensaje-caja { padding: 1.4rem; border-radius: 24px; background: var(--superficie); border: 1px solid var(--borde); }

/* Recorrido guiado */
.guia-capa { position: fixed; inset: 0; z-index: 260; pointer-events: none; }
.guia-foco { position: absolute; border-radius: 20px; box-shadow: 0 0 0 9999px rgba(0, 10, 10, .72); outline: 3px solid var(--luz); transition: all .35s ease; }
html.quieto .guia-foco { transition: none; }
.guia-caja { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100% - 24px)); z-index: 270; background: var(--fondo); color: var(--texto); border: 2px solid var(--acento); border-radius: 22px; padding: 1rem 1.1rem; box-shadow: var(--sombra); pointer-events: auto; }
.guia-caja p { font-size: 1.1rem; margin-bottom: .8rem; }
.guia-botones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.guia-paso { margin-left: auto; color: var(--texto-suave); font-size: .9rem; }
.guia-caja.arriba { bottom: auto; top: calc(16px + env(safe-area-inset-top)); }
.guia-capa.sin-foco { background: rgba(0, 10, 10, .55); }
.guia-texto { font-size: 1.15rem; line-height: 1.5; }
.btn-texto { background: transparent; border-color: transparent; color: var(--texto); text-decoration: underline; }
.recorrido-btn.nuevo .rb-ico { animation: latido 1.8s ease-in-out 3; }
@keyframes latido { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(142, 211, 242, .6); } 50% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(142, 211, 242, 0); } }

/* Asistente de bienvenida (primera vez) */
.asistente { position: fixed; inset: 0; z-index: 280; display: grid; place-items: center; padding: 16px; background: rgba(0, 10, 10, .7); }
.asistente[hidden] { display: none; }
.asistente-caja { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--fondo); border: 2px solid var(--acento); border-radius: 26px; padding: 1.3rem 1.3rem 1.5rem; box-shadow: var(--sombra); }
.asistente-caja h2 { margin-bottom: .2rem; }
.asistente-caja .formas { margin: 1rem 0 1.2rem; }

/* Modo "sin animaciones" */
html.quieto *, html.quieto *::before, html.quieto *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Alto contraste: sin fondos de imagen detrás del texto, bordes firmes */
html[data-tema="contraste"] .parada a, html[data-tema="contraste"] .forma label, html[data-tema="contraste"] .opcion span,
html[data-tema="contraste"] .interruptor, html[data-tema="contraste"] .canal, html[data-tema="contraste"] .dibujo,
html[data-tema="contraste"] .papel-tarjeta, html[data-tema="contraste"] .alcancia { border-color: #fff; }
html[data-tema="contraste"] .texto-suave, html[data-tema="contraste"] small { color: #fff !important; }

@media print {
  .barra, .pie, .btn, .gorra { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ══════════════ VENTANAS GENÉRICAS ══════════════ */
.modal-fondo { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3, 16, 17, .72); }
.modal { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--fondo); color: var(--texto); border: 2px solid var(--acento); border-radius: 26px; padding: 1.6rem 1.3rem 1.3rem; text-align: center; box-shadow: var(--sombra); }
.modal-cerrar { position: absolute; top: 10px; right: 10px; }
.modal-botones { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1rem; }
.modal-botones .btn { flex: 1 1 180px; }
.regalo-codigo { font-family: var(--titulos); font-size: 2.4rem; letter-spacing: .15em; color: var(--acento); margin: .4rem 0; }
.banda-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.vista-album .seccion { padding-top: 1.4rem; }

/* ══════════════ MODO FERIA ══════════════ */
.vista-stand { min-height: 100vh; overflow-x: hidden; }
.stand { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 24px; isolation: isolate; }
.stand-grilla { display: grid; gap: 2rem; align-items: center; width: min(1240px, 100%); }
@media (min-width: 900px) { .stand-grilla { grid-template-columns: minmax(0, 1fr) 260px; gap: 3rem; } }
.stand-acciones h1 { margin: 0; }
.stand-acciones h1 img { display: block; width: min(520px, 100%); }
.stand-bajada { font-family: var(--titulos); font-size: clamp(1.5rem, 3vw, 2rem); margin: .3rem 0 1.1rem; }
/* la tapa es "Leer"; en la tablet acostada, las cinco en fila como sobre un estante */
.laminas.laminas-stand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.laminas-stand .lamina-leer { grid-column: 1 / -1; }
.laminas-stand .lamina-leer .lamina-foto { aspect-ratio: 16 / 9; }
.laminas-stand .lamina-leer img { object-position: 50% 42%; }
@media (min-width: 700px) {
  .laminas.laminas-stand { grid-template-columns: 1.15fr 1fr 1fr; }
  .laminas-stand .lamina-leer { grid-column: 1; grid-row: span 2; }
  .laminas-stand .lamina-leer .lamina-foto { aspect-ratio: auto; flex: 1; }
  .laminas-stand .lamina-leer img { object-position: 50% 0; }
  .laminas-stand:has(> li[hidden]) > li:last-child { grid-column: span 2; }
  .laminas-stand:has(> li[hidden]) > li:last-child .lamina-foto { aspect-ratio: auto; flex: 1; min-height: 160px; }
}
@media (min-width: 1040px) {
  .laminas.laminas-stand { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); align-items: end; }
  .laminas-stand > li { align-items: flex-end; }
  .laminas-stand .lamina-leer { grid-row: auto; }
  .laminas-stand .lamina-leer .lamina-foto { aspect-ratio: 2 / 3; flex: none; }
  .laminas-stand:has(> li[hidden]) > li:last-child { grid-column: auto; }
  .laminas-stand:has(> li[hidden]) > li:last-child .lamina-foto { aspect-ratio: 1; flex: none; min-height: 0; }
}
.laminas-stand .lamina-nombre { font-size: clamp(1.4rem, 2.6vw, 1.9rem); padding: .55rem .2rem .7rem; }
.stand-formas { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.6rem; }
.stand-formas button { min-height: 56px; padding: .5rem 1.1rem; border-radius: 999px; border: 2px solid var(--borde); background: transparent; color: var(--texto); font-weight: 700; font-size: 1.05rem; }
.stand-formas button:hover { border-color: var(--acento); }
.stand-formas a { color: var(--texto); font-weight: 700; min-height: 48px; display: inline-flex; align-items: center; }
.stand-qr { text-align: center; background: #fff; color: #0E3B3C; border-radius: 24px; padding: 1.2rem; }
.stand-qr img { width: 100%; max-width: 240px; }
.stand-qr p { margin: .6rem 0 0; font-size: 1.1rem; }
.stand-url { font-family: var(--titulos); font-weight: 800; }
.stand-salir { position: absolute; bottom: 10px; right: 16px; font-size: .9rem; opacity: .6; }
.stand-alerta { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: rgba(0,0,0,.75); padding: 16px; }
.stand-alerta div { background: var(--fondo); border: 3px solid var(--acento); border-radius: 26px; padding: 1.6rem; text-align: center; max-width: 480px; }
.stand-alerta p { font-size: 1.4rem; font-family: var(--titulos); }

/* ══════════════════════════════════════════════════════════════
   INICIO Y PORTADA DE INGRESO
   Arriba la tapa y el botón grande. En el medio, las láminas:
   lo que se puede hacer, con una ilustración del libro y una palabra
   (impresas como figuritas, que es el idioma del álbum).
   Abajo, una lista sencilla para los grandes.
   ══════════════════════════════════════════════════════════════ */
.saludo, .portada { position: relative; overflow: hidden; isolation: isolate; }
.saludo-grilla, .portada-grilla {
  display: grid; grid-template-columns: 104px minmax(0, 1fr);
  grid-template-areas: "tapa texto" "acc acc";
  gap: 1.1rem; align-items: center; padding: 1.3rem 0 1.1rem;
}
.saludo-tapa.libro-3d, .portada-libro.libro-3d { grid-area: tapa; width: 100%; }
.saludo-tapa.libro-3d img, .portada-libro.libro-3d img { box-shadow: -2px 0 0 #6b3a1d, -6px 0 0 #2a1608, 0 16px 30px rgba(0,0,0,.45); }
.saludo-texto, .portada-texto { grid-area: texto; min-width: 0; }
.saludo-acciones, .portada-acciones { grid-area: acc; display: grid; gap: .6rem; }
.saludo-acciones > .btn, .portada-acciones > .btn { width: 100%; }
@media (min-width: 760px) {
  .saludo-grilla, .portada-grilla {
    grid-template-columns: 200px minmax(0, 540px); grid-template-areas: "tapa texto" "tapa acc";
    align-items: end; column-gap: 2.8rem; row-gap: 1.3rem; padding: 2.6rem 0 2.2rem;
  }
  .saludo-acciones, .portada-acciones { align-self: start; justify-items: start; }
  .saludo-acciones > .btn, .portada-acciones > .btn { width: auto; min-width: 280px; }
  .saludo-tapa.libro-3d img, .portada-libro.libro-3d img { box-shadow: -2px 0 0 #6b3a1d, -10px 0 0 #2a1608, 0 30px 60px rgba(0,0,0,.45), 0 0 80px rgba(255, 201, 77, .18); }
}
.saludo-titulo { margin: 0; font-size: clamp(1.9rem, 7vw, 3rem); }
.saludo-bajada { margin: .3rem 0 0; font-size: 1.15rem; color: var(--texto-suave); }
.saludo-pie { display: flex; align-items: center; gap: .8rem; width: 100%; }
.saludo-pie .progreso { flex: 1; height: 10px; }
.portada-texto .hero-titulo { margin: 0; }
.portada-texto .hero-titulo img { width: 100%; max-width: 480px; }
.portada-bajada { margin: .5rem 0 0; font-size: 1.1rem; }
@media (min-width: 760px) { .portada-bajada { font-size: 1.3rem; } }
.portada-acciones .contador, .grandes .contador { margin: 0; font-size: .95rem; color: var(--texto-suave); }

/* El botón que despliega los capítulos */
.tarjeta-mas { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 48px; padding: .4rem .2rem; border: 0; background: transparent; color: var(--texto); font: 700 1rem var(--letra); text-align: left; cursor: pointer; }
.tarjeta-mas .ico { width: 1.2em; height: 1.2em; transition: transform .25s ease; }
.tarjeta-mas[aria-expanded="true"] .ico { transform: rotate(180deg); }
.tarjeta-mas:hover span { text-decoration: underline; }
.capitulos-btn { flex: none; padding-inline: .1rem .3rem; }
.progreso + .capitulos-btn { margin-left: auto; padding-inline: .6rem .3rem; }
.capitulos { padding-bottom: 1.6rem; }
.desplegando { animation: desplegar .28s ease-out; }
@keyframes desplegar { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── Las láminas ── */
.menu-libro { padding: 1.4rem 0 .6rem; }
.menu-titulo { margin: 0 0 1rem; font-size: 1.5rem; }
.laminas { list-style: none; margin: 0; padding: 0 0 .6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem .95rem; }
.laminas > li { display: flex; min-width: 0; }
.lamina-ancha { grid-column: 1 / -1; }
@media (min-width: 720px) { .laminas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 1.4rem; } .lamina-ancha { grid-column: span 2; } }
@media (min-width: 1040px) { .laminas { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lamina-ancha { grid-column: auto; } }
/* sin "Leo yo" (el navegador no reconoce la voz) las figuritas ocupan el hueco */
.laminas:has(> li[hidden]) .lamina-ancha { grid-column: auto; }
@media (min-width: 720px) and (max-width: 1039px) { .laminas:has(> li[hidden]) .lamina-ancha { grid-column: 1 / -1; } }

.lamina {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  padding: 7px 7px 0; border-radius: 5px;
  background: var(--papel); color: var(--tinta); text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 12px 22px -10px rgba(0, 0, 0, .6);
  transform: rotate(var(--giro, 0deg)); transition: transform .18s ease;
}
.laminas > li:nth-child(1) .lamina { --giro: -1.5deg; }
.laminas > li:nth-child(2) .lamina { --giro: 1.2deg; }
.laminas > li:nth-child(3) .lamina { --giro: .7deg; }
.laminas > li:nth-child(4) .lamina { --giro: -1deg; }
.laminas > li:nth-child(5) .lamina { --giro: .4deg; }
.lamina:hover, .lamina:focus-visible { transform: rotate(0deg) translateY(-3px); }
.lamina:active { transform: rotate(0deg) scale(.98); }
.lamina:focus-visible { outline-offset: 4px; }
html.quieto .lamina { transition: none; }
.lamina-foto { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--noche-hondo); }
.lamina-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lamina-nombre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 .5rem; padding: .5rem .2rem .6rem; font: 800 1.3rem/1.1 var(--titulos); text-align: center; }
.lamina-nombre small { font: 700 .95rem/1.1 var(--letra); color: #56625F; }
/* las figuritas: tres en abanico sobre el marrón del sobre */
.lamina-ancha .lamina-foto { flex: 1; aspect-ratio: auto; min-height: 150px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 118%, rgba(255, 201, 77, .55), transparent 62%), linear-gradient(135deg, #7A3E1E, #4E240F); }
@media (min-width: 1040px) { .lamina-ancha .lamina-foto { aspect-ratio: 1; min-height: 0; } }
.lamina-figus img { position: absolute; width: auto; height: 74%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; border: 4px solid #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
  transform: translateX(calc((var(--k) - 1) * 62%)) rotate(calc((var(--k) - 1) * 8deg)); }
.lamina-figus img:nth-child(2) { z-index: 2; height: 82%; }
@media (min-width: 1040px) { .lamina-figus img { height: 52%; } .lamina-figus img:nth-child(2) { height: 60%; } }
.lamina-sobres { position: absolute; z-index: 3; top: 8px; right: 8px; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .35rem; border-radius: 999px; background: #B83D17; color: #fff; border: 3px solid #fff; font: 900 1.15rem/1 var(--titulos); }
.lamina-foto .pintura-propia { position: absolute; right: 6%; bottom: 6%; width: auto; height: 62%; object-fit: contain; background: #fff; padding: 4px; border-radius: 4px; box-shadow: 0 6px 14px rgba(0,0,0,.4); transform: rotate(5deg); }

html[data-tema="dia"] .lamina { box-shadow: 0 0 0 1px rgba(23, 48, 47, .14), 0 10px 20px -10px rgba(23, 48, 47, .45); }
html[data-tema="contraste"] .lamina { background: #000; color: #fff; border: 3px solid #fff; padding: 5px 5px 0; box-shadow: none; transform: none; }
html[data-tema="contraste"] .lamina-nombre small { color: #FFE500; }
html[data-tema="contraste"] .lamina:hover, html[data-tema="contraste"] .lamina:focus-visible { border-color: #FFE500; }

/* ── Invitados: guardar el avance con Google ── */
.gancho-cuenta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin: 1rem 0 0; padding: .9rem 3rem .9rem 1rem; border-radius: 14px; background: var(--fondo-2); }
.gancho-texto { flex: 1 1 260px; margin: 0; }
.gancho-cerrar { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--texto); display: grid; place-items: center; }
.gancho-cerrar .ico { width: 20px; height: 20px; }
html[data-tema="contraste"] .gancho-cuenta { border: 2px solid #fff; }
.google-boton { min-height: 44px; display: flex; align-items: center; }
.google-cargando { font-size: .9rem; color: var(--texto-suave); }

.guardar { padding: 1.6rem 0 .4rem; }
.guardar-caja { display: grid; gap: .75rem; justify-items: start; max-width: 620px; padding: 1.3rem 1.2rem 1.2rem; border-radius: 16px; background: var(--fondo-2); }
html[data-tema="contraste"] .guardar-caja { border: 2px solid #fff; }
.guardar-caja h2 { margin: 0; font-size: 1.4rem; }
.guardar-caja p { margin: 0; }
.guardar-otra { padding-top: .75rem; border-top: 1px solid var(--borde); width: 100%; color: var(--texto-suave); font-size: .98rem; }
.guardar-nota { font-size: .85rem; color: var(--texto-suave); }
body.sin-google #entrarInvitado { background: var(--acento); color: var(--acento-texto); border-color: transparent; }

/* ── Para los grandes ── */
.grandes { padding: 1.8rem 0 2.6rem; }
.grandes-titulo { margin: 0 0 .5rem; font-size: 1.35rem; }
.grandes-lista { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; }
@media (min-width: 760px) { .grandes-lista { grid-template-columns: 1fr 1fr; column-gap: 2.6rem; } }
.grandes-lista > li { border-bottom: 1px solid var(--borde); }
.grandes-lista a, .grandes-lista button { display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 76px; padding: .55rem .1rem; border: 0; background: none; color: var(--texto); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.grandes-lista b { display: block; font-size: 1.06rem; line-height: 1.25; }
.grandes-lista small { display: block; margin-top: .1rem; font-size: .92rem; line-height: 1.3; color: var(--texto-suave); }
.grandes-lista a:hover b, .grandes-lista button:hover b { text-decoration: underline; text-underline-offset: .18em; }
.grandes-img { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: var(--superficie-2); color: var(--acento); }
.grandes-img .ico { width: 24px; height: 24px; }
img.grandes-tapa { width: 38px; height: 57px; margin-inline: 8px; border-radius: 2px 5px 5px 2px; box-shadow: -3px 0 0 #2a1608; }
.grandes-aa { background: var(--acento); color: var(--acento-texto); font: 900 1.2rem var(--titulos); }
.grandes-gorra { background: #B83D17; color: #fff; }
.grandes-play { background: var(--celeste); color: #08292B; }
html[data-tema="dia"] .grandes-play { background: #0E3B3C; color: #fff; }
html[data-tema="contraste"] .grandes-img { border: 2px solid #fff; background: #000; color: #FFE500; }
#recorridoBtn.nuevo .grandes-play { animation: latido 1.8s ease-in-out 3; }

/* piezas sueltas que usan otras páginas */
.btn-alias { display: grid; justify-items: start; gap: 0; text-align: left; padding: .5rem 1.1rem; min-height: 64px; border-radius: 18px; border: 2px dashed var(--acento); background: transparent; color: var(--texto); line-height: 1.15; cursor: pointer; }
.btn-alias .alias-etq { font-size: .78rem; color: var(--texto-suave); font-weight: 700; }
.btn-alias b { font-family: var(--titulos); font-size: 1.3rem; letter-spacing: .01em; }
.btn-alias small { font-size: .8rem; color: var(--acento); font-weight: 700; }
html[data-tema="dia"] .btn-alias small { color: #6E4700; }
@media (max-width: 859px) { .colaborar-grilla .alcancia { order: -1; } }
.mano-desliza { display: inline-block; animation: deslizar 1.6s ease-in-out infinite; }
@keyframes deslizar { 0%, 100% { transform: translateX(10px); } 50% { transform: translateX(-10px); } }
html.quieto .mano-desliza { animation: none; }

.abriendo { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(4, 22, 23, .82); }
.abriendo-caja { display: grid; justify-items: center; gap: 1rem; color: var(--texto); font: 800 1.3rem var(--titulos); }
.abriendo-luz { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, #FFE9A8, var(--acento) 55%, transparent 70%); animation: latir 1s ease-in-out infinite alternate; }
@keyframes latir { from { transform: scale(.8); opacity: .6; } to { transform: scale(1.15); opacity: 1; } }
@media (max-width: 560px) { .solo-ancho { display: none; } }
.barra-volver span { white-space: nowrap; }
.toast { pointer-events: none; width: max-content; max-width: min(560px, calc(100% - 32px)); }
/* Con letra muy grande el aviso no puede tapar media página: crece, pero con un tope. */
.toast { font-size: clamp(16px, 1.05rem, 22px); line-height: 1.35; }
.vista-lector .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
html[data-tema="contraste"] .escena { background: #000; color: #fff; border: 2px solid #fff; }
html[data-tema="contraste"] .escena figcaption small { color: #FFE500; }


/* Modo feria: limpieza manual entre personas. */
.stand-pie-acciones {display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem 1rem 1.75rem;text-align:center}
.stand-pie-acciones>.btn {min-height:48px}
.stand-pie-acciones>a:not(.btn) {color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:540px) {.stand-pie-acciones {flex-direction:column}}

/* ══════════════ LECTURA FÁCIL CON APOYOS VISUALES (pictos.js) ══════════════ */
.facil-con-pictos p { display: flex; align-items: center; gap: .6em; padding: .35em .4em; border-radius: 14px; }
.facil-con-pictos p:nth-child(odd) { background: color-mix(in srgb, var(--acento) 7%, transparent); }
.facil-con-pictos p::before { display: none; }
.facil-con-pictos p:not(.con-pictos)::before { display: inline; content: '●'; flex: none; width: 2.6em; text-align: center; color: var(--acento); }
.picto-fila { display: inline-flex; flex: none; gap: .25em; min-width: 2.6em; }
.picto { width: 2.6em; height: 2.6em; border-radius: 12px; object-fit: cover; object-position: 50% 20%; border: 2px solid color-mix(in srgb, var(--acento) 55%, transparent); background: #fff; }
html[data-tema="contraste"] .picto { border-color: #FFE500; }
@media (max-width: 480px) { .picto { width: 2.2em; height: 2.2em; } .picto-fila { min-width: 2.2em; } }

/* 3.2.0: lectura universal sin cuenta ni dependencia de JavaScript. */
.entrada-simple { text-align:center; margin:1rem 0; }
.entrada-simple a, .simple-ediciones a, .simple-volver a { display:inline-block; padding:.6rem; text-underline-offset:.2em; }
.libro-simple, .lectura-legal { max-width:76ch; margin:1.5rem auto; padding:clamp(1rem,4vw,2.5rem); line-height:1.8; overflow-wrap:anywhere; }
.libro-simple { background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio); }
.simple-cabecera h1 { font-size:clamp(1.6rem,5vw,2.6rem); line-height:1.2; }
.simple-etiqueta, .simple-numero { color:var(--texto-suave); font-size:.85rem; }
.simple-ediciones { display:flex; flex-wrap:wrap; gap:.6rem; }
.simple-ediciones [aria-current] { font-weight:bold; border:2px solid currentColor; border-radius:.5rem; }
.simple-cabecera nav a { display:inline-block; padding:.4rem 0; }
.simple-cabecera nav ol { padding-inline-start:1.6rem; }
.simple-pagina { border-top:1px solid var(--borde); padding-block:1rem; scroll-margin-top:6rem; }
.simple-pagina h2 { font-size:1.5rem; line-height:1.35; }
.simple-pagina p { margin:.6rem 0 1rem; }
.simple-pagina figure { margin:1.5rem 0; }
.simple-pagina figure img { display:block; width:auto; max-width:100%; height:auto; max-height:80vh; margin:auto; object-fit:contain; }
.simple-pagina figcaption { font-size:.9rem; margin-top:.75rem; color:var(--texto-suave); }
.lectura-legal h1 { font-size:2rem; line-height:1.25; }
.lectura-legal h2 { font-size:1.4rem; margin-top:1.8rem; line-height:1.35; }
.lectura-legal p { margin:.7rem 0; }
@media (max-width:480px) {
  .vista-texto .barra, .vista-privacidad .barra { flex-wrap:wrap; }
  .libro-simple { margin:.75rem; }
}
@media print {
  .vista-texto { background:#fff!important; color:#000!important; }
  .vista-texto .barra, .vista-texto .pie, .vista-texto .panel-fondo, .vista-texto .saltar, .vista-texto .simple-ediciones, .vista-texto .simple-volver, .vista-texto .toast { display:none!important; }
  .vista-texto .libro-simple { max-width:none; border:0; margin:0; padding:0; background:#fff; font-size:12pt; }
  .vista-texto .simple-pagina { break-inside:auto; border-color:#ccc; }
  .vista-texto .simple-pagina h2 { break-after:avoid; }
  .vista-texto figure { break-inside:avoid; }
  .vista-texto .simple-numero, .vista-texto figcaption { color:#333; }
}

/* Reflujo al ampliar el texto: la barra no fuerza un ancho de escritorio. */
.barra { flex-wrap:wrap; }
.btn-a11y { max-width:100%; min-width:0; }
.btn-a11y-texto { min-width:0; white-space:normal; overflow-wrap:anywhere; }

/* 3.3: el modelo a la gorra forma parte de la lectura, no de un pago obligatorio. */
.gorra-portada{margin-block:1rem}
.gorra-visible{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border:1px solid currentColor;border-radius:18px;background:var(--fondo-tarjeta,transparent);color:inherit;text-align:left;min-width:0}
.gorra-visible strong{font-size:1.12rem}.gorra-visible p{margin:.35rem 0 0;font-size:.94rem;max-width:52ch;line-height:1.45}.gorra-acciones{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;flex-shrink:0}.gorra-alias{display:flex;flex-direction:column;gap:.1rem;padding:.55rem .9rem;white-space:normal;overflow-wrap:anywhere;max-width:100%}.gorra-alias small{font-size:.75rem}.barra-gorra{display:inline-flex;gap:.3rem;align-items:center;font-weight:700;text-decoration:none;min-height:44px;flex-shrink:0}.stand-qr .gorra-visible{display:block;font-size:.85rem}.stand-qr .gorra-acciones{margin-top:.7rem}
@media(max-width:760px){.gorra-visible{flex-direction:column;align-items:stretch}.gorra-acciones{flex-shrink:1}.gorra-acciones>*{flex:1;min-width:0}.barra-gorra{font-size:.85rem}.barra{gap:.5rem}.barra .btn-a11y-texto{display:none}.barra-gorra .ico{display:none}}
@media print{.gorra-visible .gorra-copiar{display:none}.gorra-visible button{border:0;background:transparent;color:#000;box-shadow:none}.gorra-visible a{color:inherit}.barra-gorra{display:none}}