/* El libro mágico de la portada (a/libro.js lo mueve). Un grimorio de cuero con dorados que flota en la noche y se lee
   pasando la página: la tapa se abre, sale luz del lomo y cada hoja se curva al pasar. Las notas que explican cada pliego van fuera
   del libro (texto plano y nítido); en el móvil, debajo del libro.
   Sin JS o con movimiento reducido no hay pista: notas y páginas se leen una tras otra, planas.
   El 3D se decide antes de pintar: `.lb-3d` en <html> (un script en la cabecera, construir.py). Hasta que a/libro.js monta
   el libro (`.vivo`) se ve la portada en 3D con su cielo, sin libro ni notas; al montarlo, el libro aparece (`.listo`).
   --p es el lado de una página (cuadrada, como el libro impreso de 21,6 × 21,6 cm). */
.lb {
  --p: min(560px, calc(100vw - 32px));
  --f-libro: "IM Fell English", "Instrument Serif", Georgia, serif;
  --tinta: #3A2A1C;
  --tinta-2: #6A5440;
  --oro: linear-gradient(100deg, #8A6420 0%, #E8C46A 30%, #FFF0BE 46%, #E8C46A 60%, #8A6420 100%);
  position: relative; padding: 0; background: #0B0E1C; color: var(--night-ink);
}

/* ======== Plano: sin JS o con movimiento reducido ======== */
:root:not(.lb-3d) .lb .lb-pista { padding-block: clamp(28px, 4vw, 56px) 72px; }
:root:not(.lb-3d) .lb .lb-escena { display: grid; grid-template-columns: repeat(2, minmax(0, var(--p))); justify-content: center; gap: 0; row-gap: 20px; padding-inline: 16px; }
:root:not(.lb-3d) .lb :is(.lb-perspectiva, .lb-camara, .lb-flota, .lb-libro, .lb-hoja, .lb-notas) { display: contents; }
:root:not(.lb-3d) .lb .lb-cara { position: relative; inset: auto; transform: none; width: 100%; aspect-ratio: 1; height: auto; box-shadow: 0 20px 50px rgb(0 0 0 / .45); }
:root:not(.lb-3d) .lb .lb-solo-3d { display: none; }
:root:not(.lb-3d) .lb :is(.lb-portada, .lb-nota) { grid-column: 1 / -1; }
:root:not(.lb-3d) .lb .lb-nota { margin-top: 36px; }
:root:not(.lb-3d) .lb .tapa-frente { grid-column: 1 / -1; justify-self: center; width: min(100%, var(--p)); }
:root:not(.lb-3d) .lb .lb-portada { order: 0; } :root:not(.lb-3d) .lb .tapa-frente { order: 1; }
:root:not(.lb-3d) .lb [data-pliego-nota="1"] { order: 10; } :root:not(.lb-3d) .lb .detras[data-pliego="1"] { order: 11; } :root:not(.lb-3d) .lb .delante[data-pliego="1"] { order: 12; }
:root:not(.lb-3d) .lb [data-pliego-nota="2"] { order: 20; } :root:not(.lb-3d) .lb .detras[data-pliego="2"] { order: 21; } :root:not(.lb-3d) .lb .delante[data-pliego="2"] { order: 22; }
:root:not(.lb-3d) .lb [data-pliego-nota="3"] { order: 30; } :root:not(.lb-3d) .lb .detras[data-pliego="3"] { order: 31; } :root:not(.lb-3d) .lb .delante[data-pliego="3"] { order: 32; }
:root:not(.lb-3d) .lb [data-pliego-nota="4"] { order: 40; } :root:not(.lb-3d) .lb .detras[data-pliego="4"] { order: 41; } :root:not(.lb-3d) .lb .delante[data-pliego="4"] { order: 42; }
:root:not(.lb-3d) .lb [data-pliego-nota="5"] { order: 50; } :root:not(.lb-3d) .lb .detras[data-pliego="5"] { order: 51; } :root:not(.lb-3d) .lb .delante[data-pliego="5"] { order: 52; }
:root:not(.lb-3d) .lb [data-pliego-nota="6"] { order: 60; } :root:not(.lb-3d) .lb .detras[data-pliego="6"] { order: 61; } :root:not(.lb-3d) .lb .lb-base { order: 62; }
:root:not(.lb-3d) .lb .pag-viva canvas { display: none; }
@media (max-width: 760px) {
  :root:not(.lb-3d) .lb .lb-escena { grid-template-columns: minmax(0, var(--p)); }
}

/* ======== En 3D ======== */
.lb-3d .lb .lb-pista { position: relative; height: calc((var(--lb-pasos, 8) + 1) * 100svh); }
.lb-3d .lb .lb-escena { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* Antes de montarse, ni el libro ni las notas ni el cielo de noche: así no piden sus imágenes ni sus letras mientras llega
   el cielo de la tarde, que es lo más grande de la primera pantalla. Al montarse, el libro aparece fundido cuando su tapa
   está lista. El fundido va en .lb-perspectiva, fuera del 3D: una opacidad en .lb-camara aplanaría el libro. */
.lb-3d .lb:not(.vivo) :is(.lb-perspectiva, .lb-notas, .lb-cielo .noche, .lb-ver, .lb-pasar) { display: none; }
.lb-3d .lb .lb-perspectiva { position: absolute; inset: 0; z-index: 1; perspective: 2600px; perspective-origin: 50% 32%; transition: opacity .7s ease-out; }
.lb-3d .lb:not(.listo) :is(.lb-perspectiva, .lb-ver) { opacity: 0; }

/* El cielo: atardecer en la portada, noche al abrir el libro y más noche al final del cuento. */
.lb-cielo { position: absolute; inset: 0; }
.lb-cielo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.lb-cielo .tarde { filter: brightness(.72) saturate(1.05); }
.lb-cielo .noche { opacity: var(--lb-noche, 0); }
.lb-cielo::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: var(--lb-portada, 1); background: linear-gradient(90deg, rgb(10 12 26 / .82) 0%, rgb(10 12 26 / .55) 38%, transparent 64%); }
.lb-cielo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 80% at 50% 45%, transparent 30%, rgb(8 10 22 / .55) 100%), rgb(8 10 22 / calc(.15 + var(--lb-sueno, 0) * .45)); }
@media (max-width: 980px) { .lb-cielo::before { background: linear-gradient(180deg, rgb(10 12 26 / .85) 0%, rgb(10 12 26 / .6) 45%, transparent 75%); } }
.lb-escena > .sky { z-index: 0; opacity: calc(.35 + var(--lb-noche, 0) * .65); }
.lb-polvo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

.lb-camara { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; z-index: 1; }
.lb-flota { transform-style: preserve-3d; animation: lb-flota 7s ease-in-out infinite; }
@keyframes lb-flota { 0%, 100% { transform: translate3d(0, -4px, 0) rotateZ(-.3deg); } 50% { transform: translate3d(0, 4px, 0) rotateZ(.3deg); } }
.lb-libro { position: absolute; left: calc(var(--p) * -1); top: calc(var(--p) * -.5); width: calc(var(--p) * 2); height: var(--p); transform-style: preserve-3d; }
.lb-hoja { position: absolute; left: 50%; top: 0; width: var(--p); height: var(--p); transform-origin: 0 50%; transform-style: preserve-3d; }
.lb-hoja.lb-mueve { will-change: transform; }

/* Las caras: pergamino envejecido, con el lomo hundido y la luz según el ángulo. */
/* Cada cara es su propio contexto de apilamiento: lo que lleva z-index dentro (la banda, la luz, el lomo hundido) no sale
   de su cara. Si no, Safari lo ordena entre las hojas y la banda de una página de dentro se ve sobre la tapa cerrada. */
.lb-cara { position: absolute; inset: 0; overflow: hidden; isolation: isolate; color: var(--tinta); background: #EFDDB8 url(hoja-antigua.webp) center / cover; backface-visibility: hidden; -webkit-backface-visibility: hidden; container-type: size; }
.lb-cara.detras { transform: rotateY(180deg); }
.lb-cara::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: rgb(28 18 8 / calc(var(--lb-luz, 0) * .5)); }
.lb-cara.delante::before, .lb-base::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 16%; pointer-events: none; z-index: 3; background: linear-gradient(to right, rgb(60 36 14 / .34), rgb(60 36 14 / .08) 40%, transparent); }
.lb-cara.detras::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 16%; pointer-events: none; z-index: 3; background: linear-gradient(to left, rgb(60 36 14 / .34), rgb(60 36 14 / .08) 40%, transparent); }

/* La hoja que gira se dibuja con sus tiras (a/libro.js): las caras de verdad esperan quietas y ocultas. */
.lb-tiras { display: none; position: absolute; inset: 0; transform-style: preserve-3d; }
.lb-hoja.lb-mueve:not(.lb-tapa) > .lb-tiras { display: block; }
.lb-hoja.lb-mueve:not(.lb-tapa) > .lb-cara { visibility: hidden; }
.lb-tira { position: absolute; left: 0; top: 0; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; }
.lb-tcara { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lb-tcara.detras { transform: rotateY(180deg); }
.lb-copia.lb-cara { position: absolute; inset: 0 auto auto 0; transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
.lb-copia.lb-cara::after { display: none; }
.lb-copia *, .lb-copia *::before, .lb-copia *::after { animation: none !important; transition: none !important; }
.lb-tcara::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: linear-gradient(to right, rgb(28 18 8 / calc(var(--lb-luz, 0) * .5)), rgb(28 18 8 / calc(var(--lb-luz2, 0) * .5))); }
.lb-tcara.detras::after { background: linear-gradient(to left, rgb(28 18 8 / calc(var(--lb-luz, 0) * .5)), rgb(28 18 8 / calc(var(--lb-luz2, 0) * .5))); }

/* ---- La encuadernación: cuero granate con dorados, cantoneras, lomo con nervios y cantos dorados ---- */
.lb-tapa { top: -2%; height: 104%; width: calc(var(--p) * 1.04); }
.lb-tapa > .lb-cara { background: #4A1A14 url(tapa.webp) center / 100% 100%; }
.lb-tapa > .delante { border-radius: 3px 8px 8px 3px; }
.lb-tapa > .delante::before { width: 6%; background: linear-gradient(to right, rgb(0 0 0 / .45), rgb(255 220 180 / .10) 45%, rgb(0 0 0 / .2) 62%, transparent); }
/* Por dentro: el cuero se dobla sobre el cartón y encima van las guardas de papel marmoleado. */
.lb-tapa > .detras { border-radius: 8px 3px 3px 8px; }
.guardas::before { inset: 3.4% !important; width: auto !important; background: url(guardas.webp) center / cover !important; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25), inset -2.4cqi 0 4cqi rgb(0 0 0 / .4); z-index: 0 !important; }
.lb-base { inset: 0 0 0 50%; }
.lb-trasera { position: absolute; left: 50%; top: -2%; width: calc(var(--p) * 1.04); height: 104%; background: #4A1A14 url(tapa.webp) center / 100% 100%; border-radius: 3px 8px 8px 3px; transform: translateZ(-4px); box-shadow: 0 40px 90px rgb(0 0 0 / .6), 0 0 0 1px rgb(0 0 0 / .4); }
.lb-trasera::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(20 8 4 / .25); }
.lb-lomo { position: absolute; left: calc(50% - var(--lb-grueso, 30px)); top: -2%; width: var(--lb-grueso, 30px); height: 104%; transform-origin: 100% 50%; transform: translateZ(-4px) rotateY(90deg); background: #4A1A14 url(lomo.webp) center / 100% 100%; border-radius: 6px; opacity: var(--lb-portada, 1); }
/* Los cantos dorados: abajo, el canto de cola de cada montón (lo que se ve con el libro inclinado hacia ti). */
.lb-canto { position: absolute; top: 100%; width: var(--p); transform-origin: 0 0; transform: rotateX(90deg); }
.lb-canto.der { left: 50%; height: var(--lb-grosor, 0px); background: linear-gradient(90deg, #6E4A14, #F4D98E 30%, #FFF2C8 45%, #E2B95A 60%, #7A5418); }
.lb-canto.izq { left: 0; height: var(--lb-grosor-izq, 0px); background: linear-gradient(90deg, #7A5418, #E2B95A 40%, #FFF2C8 55%, #F4D98E 70%, #6E4A14); }
/* La luz que sale del libro al abrirlo. */
.lb-luz { position: absolute; inset: -30% -10%; pointer-events: none; opacity: var(--lb-brillo, 0); transform: translateZ(var(--lb-alto, 40px)); background: radial-gradient(closest-side at 50% 50%, rgb(255 236 170 / .5), rgb(255 214 120 / .16) 45%, transparent 75%); }

/* La sombra de la hoja que se levanta sobre la que tapa. */
.lb-sombra { position: absolute; top: 0; height: 100%; width: var(--lb-ancho, 0%); opacity: 0; pointer-events: none; transform: translateZ(var(--lb-z, 1px)); }
.lb-sombra.der { left: 50%; background: linear-gradient(to right, rgb(30 18 8 / .6), rgb(30 18 8 / .14) 70%, transparent); }
.lb-sombra.izq { right: 50%; background: linear-gradient(to left, rgb(30 18 8 / .6), rgb(30 18 8 / .14) 70%, transparent); }

/* ---- La tapa: medallón con el retrato y el título en pan de oro ---- */
.tapa-frente { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-content: center; padding: 17% 18% 15%; gap: 2.2cqi; text-align: center; }
.tapa-medalla { width: 44cqi; aspect-ratio: 1; border-radius: 50%; overflow: hidden; align-self: end; background: #F3E6C8; box-shadow: 0 0 0 1.1cqi #2A0E0A, 0 0 0 1.8cqi #C99A3E, 0 0 0 2.2cqi #6B4512, 0 1.6cqi 3cqi rgb(0 0 0 / .55); }
.tapa-medalla img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 20%; filter: sepia(.18) saturate(.92); }
.tapa-titulo { font: 400 8.8cqi/1 var(--f-libro); letter-spacing: .01em; text-wrap: balance; background: var(--oro); background-size: 240% 100%; background-position: var(--lb-brillo-tapa, 30%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.tapa-autor { font: italic 400 3.6cqi/1.2 var(--f-libro); color: #E9CF8C; opacity: .9; }
.exlibris { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; width: 50%; padding: 6cqi 4cqi 5cqi; background: #F3E6C8 url(hoja-antigua.webp) center / cover; border-radius: 3px; box-shadow: 0 0 0 .6cqi #F3E6C8, 0 0 0 .9cqi #8A6420, 0 1cqi 3cqi rgb(0 0 0 / .45); display: grid; justify-items: center; gap: 1.6cqi; text-align: center; color: var(--tinta); }
.exlibris span { font: italic 400 max(12px, 3.4cqi)/1 var(--f-libro); color: var(--tinta-2); }
.exlibris b { font: 400 max(22px, 9cqi)/1 var(--f-libro); }
.exlibris i { font-style: normal; color: #B8862F; font-size: max(12px, 3.4cqi); }

/* ---- Las páginas ---- */
.lb-cara img.lb-sangre, .lb-cara canvas.lb-sangre { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pag-ilus .lb-sangre { filter: sepia(.08); }
.pag-ilus::after { box-shadow: inset 0 0 6cqi rgb(90 56 20 / .35); }
.pag-banda { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 4.5%; padding: 2.6cqi 4cqi 2.8cqi; background: #F2E3C4 url(hoja-antigua.webp) center / 400% auto; border-radius: 2px; box-shadow: 0 .6cqi 2cqi rgb(40 24 8 / .3); font: 400 max(13px, 3.25cqi)/1.45 var(--f-read); color: var(--tinta); text-wrap: pretty; }
.pag-banda::first-letter { font: 400 1.9em/.9 var(--f-libro); float: left; margin: .06em .08em 0 0; color: #7A2E1C; }
.pag-banda .k { background: linear-gradient(transparent 14%, rgb(255 226 140 / .75) 14%, rgb(255 226 140 / .75) 88%, transparent 88%); box-shadow: none; }
.pag-num { position: absolute; bottom: 4.5%; left: 50%; translate: -50% 0; font: italic 400 max(11px, 2.8cqi)/1 var(--f-libro); color: var(--tinta-2); }

.pag-creditos { display: grid; justify-items: center; align-content: center; gap: 2.4cqi; padding: 9% 13%; text-align: center; }
.pag-vineta { width: 18cqi; height: auto; filter: sepia(.1) drop-shadow(0 .8cqi 1cqi rgb(60 40 20 / .25)); }
.pag-titulo { font: 400 max(22px, 7.6cqi)/1.02 var(--f-libro); color: #7A2E1C; }
.pag-firma { font: italic 400 max(13px, 3.4cqi)/1.4 var(--f-libro); color: var(--tinta-2); }
.pag-firma b { font-weight: 400; color: var(--tinta); }
.pag-adorno { color: #B8862F; letter-spacing: .6em; font-size: max(10px, 2.4cqi); }
.pag-colofon { font: 400 max(11px, 2.5cqi)/1.5 var(--f-read); color: var(--tinta-2); max-width: 30em; }

.pag-pulpo { position: absolute; width: 48%; right: 7%; bottom: 9%; rotate: 6deg; filter: sepia(.15) drop-shadow(0 1cqi 1.4cqi rgb(60 40 20 / .3)); }
.pag-estrella { position: absolute; width: 50%; left: 50%; top: 50%; translate: -50% -50%; filter: sepia(.1) drop-shadow(0 1cqi 1.4cqi rgb(60 40 20 / .3)); }
.pag-polaroid { position: absolute; margin: 0; left: 9%; top: 8%; width: 46%; padding: 2.4cqi 2.4cqi 7cqi; background: #FBF7EF; rotate: -4deg; box-shadow: 0 1cqi 2.4cqi rgb(40 24 8 / .35); }
.pag-polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pag-polaroid figcaption, .pag-dibujo figcaption { position: absolute; left: 0; right: 0; bottom: 2cqi; text-align: center; font: italic 400 max(12px, 3cqi)/1 var(--f-libro); color: var(--tinta); }
.pag-polaroid::before, .pag-dibujo::before { content: ""; position: absolute; top: -2cqi; left: 50%; width: 18cqi; height: 5cqi; translate: -50% 0; rotate: 3deg; background: rgb(240 226 190 / .75); box-shadow: 0 .3cqi .6cqi rgb(0 0 0 / .12); }
.pag-poses { position: absolute; right: 6%; bottom: 10%; width: 50%; rotate: 3deg; background: #FBF7EF; padding: 1.4cqi; box-shadow: 0 1cqi 2.4cqi rgb(40 24 8 / .3); }
.pag-dibujo { position: absolute; margin: 0; left: 10%; top: 8%; width: 80%; padding: 2.4cqi 2.4cqi 8cqi; background: #FBF7EF; rotate: -2deg; box-shadow: 0 1cqi 2.4cqi rgb(40 24 8 / .35); }
.pag-dibujo img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.pag-fin { display: grid; grid-template-rows: 1fr auto; padding: 8% 9% 7%; gap: 3cqi; }
.pag-dibuja { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 2cqi; min-height: 0; }
.lb-titulillo { font: italic 400 max(14px, 4.4cqi)/1.1 var(--f-libro); text-align: center; color: #7A2E1C; }
.pag-marco { border: .5cqi dashed rgb(106 84 64 / .45); border-radius: 2cqi; }
.pag-ceras { position: absolute; width: 42%; right: -4%; bottom: -8%; rotate: -10deg; mix-blend-mode: multiply; }
.pag-cta { display: grid; justify-items: center; gap: 1.8cqi; text-align: center; }
.pag-cta h2 { font: 400 max(18px, 5.4cqi)/1.05 var(--f-libro); color: var(--tinta); }
.pag-cta h2 em { color: #7A2E1C; }
.pag-cta p { font: 400 max(11px, 2.6cqi)/1.3 var(--f-ui); color: var(--tinta-2); }
.pag-cta .btn { min-height: 44px; font-size: max(13px, 3cqi); }

/* La tinta que se escribe sola (a/libro.js parte el texto en palabras). */
.lb.vivo [data-tinta]:not(.escrita) .tw { opacity: 0; }
/* Safari no esconde la capitular con la opacidad de su palabra: se esconde aparte hasta que se escribe. */
.lb.vivo [data-tinta]:not(.escrita)::first-letter { color: transparent; }
.lb.vivo [data-tinta].escrita .tw { animation: lb-tinta 1.1s ease-out both; animation-delay: calc(var(--i) * 55ms); }
@keyframes lb-tinta {
  0% { opacity: 0; color: #C9952E; text-shadow: 0 0 .5em rgb(255 214 120 / .95); }
  35% { opacity: 1; color: #B07E22; text-shadow: 0 0 .4em rgb(255 214 120 / .7); }
  100% { opacity: 1; text-shadow: 0 0 0 transparent; }
}

.lb.vivo [data-tinta].escrita .tw.de-nuevo { animation: lb-tinta-otra 1.3s ease-out both; animation-delay: 0s; }
@keyframes lb-tinta-otra {
  0% { opacity: 0; color: #C9952E; text-shadow: 0 0 .5em rgb(255 214 120 / .95); }
  35% { opacity: 1; color: #B07E22; text-shadow: 0 0 .4em rgb(255 214 120 / .7); }
  100% { opacity: 1; text-shadow: 0 0 0 transparent; }
}
/* La voz: lo leído se queda en tinta roja y la palabra que suena, con luz. */
.pag-banda .tw { transition: color .2s, background-color .2s; border-radius: 2px; }
.pag-banda .tw.dicha { color: #6E2416; }
.pag-banda .tw.ahora { background-color: rgb(255 226 140 / .8); }

/* ======== El texto de la portada, al lado del libro cerrado; se va al abrir la tapa ======== */
.lb-portada { position: absolute; z-index: 2; left: max(24px, calc((100vw - 1200px) / 2 + 16px)); top: calc(50% + 32px); width: min(500px, 40vw); transform: translateY(calc(-50% + (1 - var(--lb-portada, 1)) * -40px)); opacity: var(--lb-portada, 1); display: grid; gap: 20px; }
.lb-3d .lb .lb-portada { visibility: var(--lb-portada-vis, visible); }
:root:not(.lb-3d) .lb .lb-portada { position: static; transform: none; width: auto; max-width: 680px; justify-self: center; margin-bottom: 20px; }
.lb-portada .hero-kicker { order: -1; }
.lb-portada h1 { font-size: clamp(2.4rem, 1.5rem + 2.6vw, 4.2rem); text-shadow: 0 2px 24px rgb(8 10 22 / .6); }
.lb-portada h1 em { display: block; color: var(--gold); font-style: italic; }
.lb-portada .lede { text-shadow: 0 1px 12px rgb(8 10 22 / .8); }

/* «Ver el libro», debajo del libro cerrado (a/libro.js lo pone en --x y --y). Se va con el texto al abrir la tapa. La tapa
   también lo abre. */
.lb-ver { position: absolute; z-index: 2; left: var(--x, 70%); top: var(--y, 80%); translate: -50% 0; display: inline-flex; align-items: center; gap: .45em; min-height: 46px; padding: .6em 1.05em .6em 1.3em; border-radius: 999px; border: 1px solid rgb(240 208 122 / .45); background: rgb(11 14 28 / .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--gold); font: 600 1rem/1 var(--f-ui); cursor: pointer; opacity: var(--lb-portada, 1); visibility: var(--lb-portada-vis, visible); transition: border-color .2s, background-color .2s; }
.lb.listo .lb-ver { animation: lb-funde .7s ease-out backwards; }
@keyframes lb-funde { from { opacity: 0; } }
.lb-ver:hover { border-color: var(--gold); background: rgb(11 14 28 / .78); }
.lb-ver svg { width: 18px; height: 18px; animation: lb-baja 1.8s ease-in-out infinite; }
@keyframes lb-baja { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.lb.vivo[data-pliego="0"] .tapa-frente { cursor: pointer; }

/* ======== Pasar la página: en el escritorio, a los lados del libro y a media altura; en el móvil, entre el libro y la
   nota, donde llega el pulgar. Salen al abrir la tapa (a/libro.js los deja inertes en la portada). ======== */
.lb-pasar { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: clamp(0, calc(1 - var(--lb-portada, 1) * 3), 1); }
.lb-paso { position: absolute; pointer-events: auto; display: grid; justify-items: center; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--night-ink); font: 600 .78rem/1.2 var(--f-ui); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lb-paso i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgb(11 14 28 / .68); border: 1px solid rgb(240 208 122 / .4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .2s, border-color .2s, transform .15s; }
.lb-paso svg { width: 24px; height: 24px; color: var(--gold); }
.lb-paso span { max-width: 6.5em; color: var(--night-ink); text-shadow: 0 1px 2px rgb(8 10 22 / .95), 0 0 10px rgb(8 10 22 / .9), 0 0 18px rgb(8 10 22 / .7); }
.lb-paso:hover i { border-color: var(--gold); background: rgb(11 14 28 / .8); }
.lb-paso:active i { transform: scale(.94); }
.lb[data-modo="pliego"] .lb-paso { top: calc(50% + var(--lb-cy, 0px)); translate: 0 -26px; }
.lb[data-modo="pliego"] .lb-paso.atras { right: calc(50% + var(--p) + 20px); }
.lb[data-modo="pliego"] .lb-paso.alante { left: calc(50% + var(--p) + 20px); }
.lb[data-modo="una"] .lb-pasar { inset: auto 12px; top: calc(50% + var(--lb-cy, 0px) + var(--p) * .5 + 14px); height: 44px; }
.lb[data-modo="una"] .lb-paso { bottom: 0; grid-auto-flow: column; gap: 2px; min-height: 44px; padding: 0 14px 0 6px; border-radius: 999px; background: rgb(11 14 28 / .6); border: 1px solid rgb(240 208 122 / .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .9rem; }
.lb[data-modo="una"] .lb-paso i { width: 30px; height: 30px; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.lb[data-modo="una"] .lb-paso span { max-width: none; color: var(--night-ink); text-shadow: none; }
.lb[data-modo="una"] .lb-paso.atras { left: 0; }
.lb[data-modo="una"] .lb-paso.alante { right: 0; padding: 0 6px 0 14px; }
.lb[data-modo="una"] .lb-paso.alante i { order: 1; }
.lb[data-modo="una"][data-pasar="lados"] .lb-pasar { inset: 0; height: auto; }
.lb[data-modo="una"][data-pasar="lados"] .lb-paso { top: calc(50% + var(--lb-cy, 0px)); bottom: auto; translate: 0 -50%; width: 46px; min-height: 46px; padding: 0; justify-content: center; }
.lb[data-modo="una"][data-pasar="lados"] .lb-paso span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lb[data-modo="una"][data-pasar="lados"] .lb-paso.atras { left: auto; right: calc(50% + var(--p) * .5 + 10px); }
.lb[data-modo="una"][data-pasar="lados"] .lb-paso.alante { right: auto; left: calc(50% + var(--p) * .5 + 10px); }

/* ======== Las notas ======== */
.lb.vivo .lb-notas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lb-nota { display: grid; gap: 10px; align-content: start; padding: 20px 22px 22px; color: var(--tinta); background: #F1E2C2 url(pergamino.webp) center / cover; border-radius: 4px; box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 18px 40px rgb(0 0 0 / .45); font-size: .98rem; line-height: 1.5; }
.lb-nota h2 { font: 400 1.75rem/1.05 var(--f-libro); color: var(--tinta); }
.lb-nota p { color: #4E3D2C; }
.lb-nota .linkish { color: #7A2E1C; font-size: inherit; }
.lb-chip { justify-self: start; font: 600 .7rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #7A2E1C !important; border: 1px solid rgb(122 46 28 / .35); padding: .45em .7em; border-radius: 999px; }
.lb-pie { font-size: .85rem; }
.lb.vivo .lb-nota { position: absolute; opacity: 0; translate: 0 14px; rotate: -1.2deg; transition: opacity .35s, translate .45s cubic-bezier(.2, .7, .3, 1); visibility: hidden; }
.lb.vivo .lb-nota.activo { opacity: 1; translate: 0 0; pointer-events: auto; visibility: visible; }
/* En el escritorio, la nota descansa sobre la página izquierda (o en su esquina de abajo si la página tiene dibujo). */
.lb.vivo[data-modo="pliego"] .lb-nota { width: min(calc(var(--p) * .8), 410px); left: calc(50% - var(--p) * .5 - min(calc(var(--p) * .4), 205px)); top: calc(50% + var(--lb-cy, 0px) - var(--p) * .42); }
.lb.vivo[data-modo="pliego"] .lb-nota[data-sitio="abajo"] { top: auto; bottom: max(24px, calc(50% - var(--lb-cy, 0px) - var(--p) * .64)); left: calc(50% - var(--p) * 1.1); width: min(calc(var(--p) * .68), 360px); rotate: -2deg; }
.lb.vivo[data-modo="pliego"] .lb-nota.solo-movil { display: none; }
/* En el móvil, debajo del libro. */
.lb.vivo[data-modo="una"] .lb-nota { left: 12px; right: 12px; bottom: calc(var(--lb-barra, 0px) + 14px); padding: 14px 16px 16px; gap: 6px; font-size: .92rem; rotate: 0deg; }
.lb.vivo[data-modo="una"] .lb-nota h2 { font-size: 1.4rem; }

/* Las puertas: el peque elige y la página lo escribe. */
.lb-puertas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.lb-pregunta { grid-column: 1 / -1; font: 400 1.2rem/1.2 var(--f-libro); color: var(--tinta) !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lb-pregunta span { font: 600 .68rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: #8A6420; }
.lb-puerta { display: grid; justify-items: center; gap: 2px; padding: 9px 6px; border-radius: 10px; border: 1px solid rgb(106 84 64 / .3); background: rgb(255 250 238 / .7); font: 600 .84rem/1.15 var(--f-ui); color: var(--tinta); cursor: pointer; transition: background-color .2s, border-color .2s, transform .15s; }
.lb-puerta span { font-size: 1.35rem; }
.lb-puerta:hover { border-color: #B8862F; }
.lb-puerta[aria-pressed="true"] { background: #FFF1C9; border-color: #D9A93A; box-shadow: 0 0 0 2px rgb(240 208 122 / .5); }
/* La puerta del peque va la primera, con el borde a trazos (como en la app) y en amarillo si es la elegida. */
.lb-suya { border: 1.5px dashed #B8862F; background: transparent; }
.lb-suya[aria-expanded="true"], .lb-suya.elegida { background: #FFF1C9; border-style: solid; border-color: #D9A93A; }
.lb-suya.elegida { box-shadow: 0 0 0 2px rgb(240 208 122 / .5); }
.lb-otra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .85rem; }
.lb-otra label { color: #4E3D2C; }
.lb-otra input { flex: 1 1 150px; min-width: 0; min-height: 38px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgb(106 84 64 / .35); background: rgb(255 250 238 / .85); font: inherit; color: var(--tinta); }
.lb-otra .btn { color: var(--tinta); border-color: rgb(106 84 64 / .45); }
.lb[data-modo="una"] .lb-otra label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* En el móvil la nota no crece al abrir su idea: el campo ocupa el sitio de la explicación. */
.lb[data-modo="una"] .lb-nota:has(.lb-otra:not([hidden])) > p:not(.lb-chip) { display: none; }
.lb[data-modo="una"] .lb-puerta { padding: 6px 4px; min-height: 44px; align-content: center; }
.lb[data-modo="una"] .lb-puerta span { display: none; }

/* ======== El índice: dónde estás y cómo salir ======== */
.lb-indice { position: absolute; z-index: 3; right: max(16px, calc((100vw - 1200px) / 2 + 16px)); top: 78px; display: flex; align-items: center; gap: 14px; padding: 7px 12px; border-radius: 999px; background: rgb(11 14 28 / .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / .1); font-size: .85rem; opacity: clamp(0, calc(1 - var(--lb-portada, 1) * 3), 1); }
.lb-indice ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.lb-indice ol a { display: grid; place-items: center; width: 18px; height: 22px; }
.lb-indice ol a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--night-ink-3); opacity: .55; transition: background-color .2s, transform .2s; }
.lb-indice ol a[aria-current="true"]::before { background: var(--gold); opacity: 1; transform: scale(1.3); }
.lb-indice > a { color: var(--night-ink-2); text-decoration: none; white-space: nowrap; }
.lb-indice > a:hover { color: var(--night-ink); }

@media (max-width: 980px) {
  .lb-3d .lb .lb-portada { left: 16px; right: 16px; width: auto; top: 76px; transform: translateY(calc((1 - var(--lb-portada, 1)) * -30px)); gap: 12px; }
  .lb-portada h1 { font-size: clamp(1.9rem, 1.2rem + 3.4vw, 2.8rem); }
  .lb-3d .lb .lb-portada .facts { gap: 4px 16px; font-size: .9rem; color: var(--night-ink-2); text-shadow: 0 1px 10px rgb(8 10 22 / .9); }
  .lb-3d .lb .lb-portada .lb-solo-ancho { display: none; }
  .lb-indice { top: 68px; right: 12px; padding: 5px 10px; }
  .lb-indice > a { font-size: .8rem; }
}
@media (max-height: 700px) and (min-width: 981px) {
  .lb-3d .lb .lb-portada .facts { display: none; }
}
/* En el móvil, el papel y el cuero en 640 px (srcset no llega a los fondos). */
@media (max-width: 760px) {
  .lb-cara, .exlibris, .pag-banda { background-image: url(hoja-antigua-640.webp); }
  .lb-tapa > .lb-cara, .lb-trasera { background-image: url(tapa-640.webp); }
}