/* =============================================================
   Happy Learning — el cuento
   Cuatro niveles tipográficos y nada más:
   línea de cuento · apoyo · dato · folio
   ============================================================= */

/* --- Tipografías incrustadas ---
   Editorial (portada, folios, versalitas): American Typewriter, si no Playfair Display
   Cuento (las frases):  Baloo 2 — redonda, sin puntas
   Cuerpo (lo que se lee largo): Nunito
   Mano (las frases manuscritas): Snell Roundhand, si no Mrs Saint Delafield          */
@font-face{font-family:'Berkshire Swash';font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/berkshire-swash-latin-400-normal.woff2") format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/playfair-display-latin-500-normal.woff2") format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/playfair-display-latin-600-normal.woff2") format('woff2');}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/baloo-2-latin-400-normal.woff2") format('woff2');}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/baloo-2-latin-500-normal.woff2") format('woff2');}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/baloo-2-latin-600-normal.woff2") format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/nunito-latin-400-normal.woff2") format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/nunito-latin-600-normal.woff2") format('woff2');}
@font-face{font-family:'Nunito';font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/nunito-latin-400-italic.woff2") format('woff2');}
@font-face{font-family:'Mrs Saint Delafield';font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/mrs-saint-delafield-latin-400-normal.woff2") format('woff2');}

:root {
  --morado:      #9176CC;
  --morado-tinta:#5D4890;
  --morado-hondo:#3D2F63;
  --menta:       #9EFF9E;
  --rosa:        #FABEF1;
  --amarillo:    #FFFF6E;
  --coral:       #FF6E5E;
  --azul:        #5294E9;

  --papel:       #FBF5E9;
  --papel-2:     #F3E7D2;
  --canto:       #E6D6B8;
  --tinta:       #3B3450;
  --tinta-suave: #574B6E;
  --tinta-tenue: #8D82A2;
  --filete:      rgba(59,52,80,.15);

  --editorial: "American Typewriter", "Playfair Display", Georgia, serif;
  --display:   "Baloo 2", "Trebuchet MS", sans-serif;
  --cuerpo:    "Nunito", system-ui, sans-serif;
  --mano:      "Snell Roundhand", "Mrs Saint Delafield", cursive;

  --margen:  clamp(1.8rem, 3.6vw, 3.6rem);
  --lomo-m:  clamp(1.4rem, 2.8vw, 2.8rem);

  --suave: cubic-bezier(.16,1,.3,1);
  /* repartida: la hoja gira parejo de principio a fin, sin latigazo */
  --libro: cubic-bezier(.45,.05,.35,1);
  /* el ritmo del libro: lento, de leer en calma */
  --giro: 1480ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--cuerpo); font-size: 17px; line-height: 1.62;
  color: var(--tinta); background: #E9DFF8;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
::selection { background: var(--morado); color: #fff; }
:focus-visible { outline: 2px solid var(--morado); outline-offset: 3px; border-radius: 3px; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 999; padding: .6rem 1rem; background: var(--papel); border-radius: 6px; }
.skip-link:focus { top: 1rem; }

/* =============================================================
   El cuarto en capas — la profundidad se mueve con el cursor
   ============================================================= */
.cuarto { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.capa { position: absolute; inset: -6%; will-change: transform; transition: transform .8s var(--suave); }

/* El clima de cada pliego: el cuarto cambia de luz con la historia */
:root { --pared-a: #F4ECFD; --pared-b: #E2D5F6; --luz-a: rgba(255,252,240,.95); --luz-b: rgba(255,247,224,.42);
        --mesa-a: #EBDCC2; --mesa-b: #D6BE97; --estrellas: 0; --vineta: rgba(110,84,160,.20); }
[data-clima="portada"] { --pared-a:#F4ECFD; --pared-b:#E2D5F6; --luz-a:rgba(255,252,240,.95); --luz-b:rgba(255,247,224,.42); }
[data-clima="amanecer"] { --pared-a:#FDF0E4; --pared-b:#F6DCC8; --luz-a:rgba(255,238,196,.98); --luz-b:rgba(255,206,150,.5);
                          --mesa-a:#EEDCBE; --mesa-b:#D8BE94; --vineta:rgba(160,104,70,.18); }
[data-clima="juego"]    { --pared-a:#EEFBEC; --pared-b:#D8F2DC; --luz-a:rgba(250,255,240,.95); --luz-b:rgba(206,246,206,.45);
                          --vineta:rgba(80,140,100,.16); }
[data-clima="mesa"]     { --pared-a:#FDEFF2; --pared-b:#F8DCE2; --luz-a:rgba(255,246,240,.95); --luz-b:rgba(255,206,196,.45);
                          --vineta:rgba(170,90,90,.16); }
[data-clima="cuartos"]  { --pared-a:#F2ECFE; --pared-b:#DED0F6; --luz-a:rgba(252,250,255,.95); --luz-b:rgba(214,198,246,.45);
                          --vineta:rgba(110,84,160,.2); }
[data-clima="camino"]   { --pared-a:#FDFAE6; --pared-b:#F3EDC4; --luz-a:rgba(255,253,226,.98); --luz-b:rgba(246,236,168,.5);
                          --vineta:rgba(150,130,60,.16); }
[data-clima="tarde"]    { --pared-a:#FBEBE0; --pared-b:#EED6D0; --luz-a:rgba(255,232,200,.96); --luz-b:rgba(246,186,150,.46);
                          --mesa-a:#E8D2B2; --mesa-b:#CFB088; --vineta:rgba(150,90,70,.2); }
[data-clima="noche"]    { --pared-a:#3A2F63; --pared-b:#221A44; --luz-a:rgba(214,206,255,.34); --luz-b:rgba(140,120,220,.16);
                          --mesa-a:#4A3A63; --mesa-b:#2C2044; --estrellas: 1; --vineta:rgba(10,6,26,.5); }

.capa--pared, .capa--luz, .capa--mesa, .vineteado, .capa--estrellas {
  transition: background 2.1s var(--suave), opacity 2.1s var(--suave);
}
/* Estrellas: siempre en el aire, difuminadas en el polvo mágico.
   De día apenas se insinúan; de noche mandan. */
.capa--estrellas { opacity: calc(.34 + var(--estrellas) * .66); }
.capa--estrellas svg { width: 100%; height: 100%; overflow: visible; }
.capa--estrellas path {
  filter: drop-shadow(0 0 2px rgba(255,240,180,.9));
  animation: destella 8.6s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
.capa--estrellas path:nth-child(3n)   { animation-duration: 11.4s; animation-delay: -2.8s; }
.capa--estrellas path:nth-child(3n+1) { animation-duration: 9.7s;  animation-delay: -5.4s; }
.capa--estrellas path:nth-child(4n)   { animation-duration: 13.2s; animation-delay: -8.1s; }
/* pequeñas: polvo que brilla, no estrellas invasivas */
@keyframes destella {
  0%, 100% { opacity: .26; scale: .34; }
  50%      { opacity: .92; scale: .56; }
}

.capa--pared {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.55) 0%, transparent 58%),
    linear-gradient(180deg, var(--pared-a) 0%, var(--pared-b) 100%);
}
.capa--luz {
  background:
    radial-gradient(46% 62% at 50% 6%, var(--luz-a), var(--luz-b) 42%, transparent 72%);
}
.capa--muebles { top: auto; bottom: -2%; height: 46%; opacity: .85; filter: blur(7px); }
.capa--muebles svg { width: 100%; height: 100%; }
/* la guirnalda vive en su propia franja arriba: nunca toca el libro */
.guirnalda {
  position: fixed; top: 0; left: -3%; width: 106%; z-index: 6;
  pointer-events: none; overflow: visible;
}
/* alto propio y proporcional: los banderines nunca se recortan */
.guirnalda-svg { display: block; width: 100%; height: clamp(78px, 6.9vw, 122px); }
.guirnalda .cuerda { opacity: .75; }
/* el banderín solo se balancea; su posición la pone el grupo de fuera */
.banderin {
  pointer-events: auto; cursor: pointer;
  transform-box: fill-box; transform-origin: 50% 0%;
  animation: brisa 5.5s ease-in-out infinite;
  transition: none;
}
.banderin path { opacity: .85; }
.banderin:nth-child(3n)   { animation-duration: 6.4s; animation-delay: -1.2s; }
.banderin:nth-child(3n+1) { animation-duration: 7.1s; animation-delay: -2.6s; }
.banderin:hover { animation: columpia .75s cubic-bezier(.3,.75,.35,1); }
@keyframes brisa   { 0%,100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
@keyframes columpia {
  0%   { rotate: 0deg; }
  20%  { rotate: 16deg; }
  45%  { rotate: -11deg; }
  70%  { rotate: 6deg; }
  85%  { rotate: -3deg; }
  100% { rotate: 0deg; }
}

.capa--mesa {
  top: auto; bottom: -6%; left: -6%; right: -6%; height: 32%;
  background:
    linear-gradient(180deg, var(--mesa-a) 0%, var(--mesa-b) 100%),
    repeating-linear-gradient(93deg, rgba(255,255,255,.05) 0 3px, transparent 3px 32px);
  box-shadow: inset 0 14px 30px rgba(150,118,74,.16);
}
.capa--mesa::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7) 22%, rgba(255,255,255,.8) 50%, rgba(255,255,255,.7) 78%, transparent);
}
/* el aire con brillo */
.capa--polvo span {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0 34%, rgba(255,246,214,.5) 60%, transparent 76%);
  animation: flotar 26s ease-in-out infinite;
  filter: blur(.4px);
  opacity: .5;
}
.capa--polvo span:nth-child(1){left:9%;top:26%;animation-duration:27s}
.capa--polvo span:nth-child(2){left:18%;top:58%;animation-duration:33s;animation-delay:-6s;width:4px;height:4px}
.capa--polvo span:nth-child(3){left:27%;top:16%;animation-duration:24s;animation-delay:-12s}
.capa--polvo span:nth-child(4){left:36%;top:70%;animation-duration:30s;animation-delay:-3s;width:8px;height:8px}
.capa--polvo span:nth-child(5){left:45%;top:22%;animation-duration:35s;animation-delay:-18s;width:4px;height:4px}
.capa--polvo span:nth-child(6){left:54%;top:62%;animation-duration:28s;animation-delay:-9s}
.capa--polvo span:nth-child(7){left:63%;top:32%;animation-duration:31s;animation-delay:-21s;width:5px;height:5px}
.capa--polvo span:nth-child(8){left:72%;top:52%;animation-duration:26s;animation-delay:-14s}
.capa--polvo span:nth-child(9){left:81%;top:20%;animation-duration:34s;animation-delay:-25s;width:4px;height:4px}
.capa--polvo span:nth-child(10){left:90%;top:44%;animation-duration:29s;animation-delay:-8s}
.capa--polvo span:nth-child(11){left:14%;top:40%;animation-duration:32s;animation-delay:-17s;width:5px;height:5px}
.capa--polvo span:nth-child(12){left:68%;top:12%;animation-duration:25s;animation-delay:-11s;width:4px;height:4px}

@keyframes flotar {
  0%,100% { transform: translate3d(0,0,0); opacity: .25; }
  25%     { transform: translate3d(16px,-30px,0); opacity: .9; }
  50%     { transform: translate3d(-12px,-54px,0); opacity: .5; }
  75%     { transform: translate3d(-24px,-26px,0); opacity: .75; }
}
.vineteado {
  position: absolute; inset: 0;
  background: radial-gradient(76% 64% at 50% 46%, transparent 44%, var(--vineta) 100%);
}

/* =============================================================
   El libro
   ============================================================= */
.lectura {
  position: relative; z-index: 2; min-height: 100svh; padding-top: 136px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1rem, 2.6vh, 1.9rem);
  padding: 0 clamp(.7rem, 3vw, 2rem) clamp(1rem, 3vh, 2.2rem);
}
.libro { position: relative; }
.resplandor { display: none; }

/* Sin JS: el cuento se lee de corrido */
.pliego { display: block; }
/* el margen de abajo reserva sitio al folio: la letra nunca lo toca */
.hoja { position: relative; padding: var(--margen); padding-bottom: calc(var(--margen) + 1.5rem); background: var(--papel); }

/* --- Con JS: pliego abierto --- */
.tapa { display: none; }
html.js .libro {
  --alto: min(64svh, 610px);
  height: var(--alto);
  width: min(95vw, calc(var(--alto) * 1.68));
  transition: width .7s var(--suave);
  perspective: 3200px;
  filter: drop-shadow(0 26px 44px rgba(88,60,140,.34));
}
/* cerrado: solo se ve la tapa */
html.js .libro.esta-cerrado { width: min(48vw, calc(var(--alto) * .84)); }
/* a mitad del giro la tapa está de perfil: ahí el libro se ensancha sin que se note */
html.js .libro.esta-cerrado.abriendo { width: min(48vw, calc(var(--alto) * .84)); }
html.js .libro.abriendo { transition: none; }
html.js .libro.abriendo .pliegos { transition: none; }
html.js .libro.esta-cerrado .pliegos { opacity: 0; }
html.js .libro.esta-cerrado::before, html.js .libro.esta-cerrado::after { opacity: 0; }
html.js .pliegos { transition: opacity .7s var(--suave); }

html.js .tapa {
  display: block; position: absolute; top: 0; right: 0; z-index: 60;
  width: min(48vw, calc(var(--alto) * .84)); height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1.5s var(--libro);
  cursor: pointer; padding: 0; text-align: center;
}
html.js .libro.abriendo .tapa { transform: rotateY(-178deg); }
html.js .libro.esta-abierto .tapa { display: none; }
.tapa-cara {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 6px 22px 22px 6px; overflow: hidden;
}
.tapa-cara--fuera {
  background-color: #F6EEDC;
  box-shadow: inset 0 0 0 1px rgba(93,72,144,.18), inset 0 0 70px rgba(120,90,50,.14);
  justify-content: center;
}
/* la ilustración manda: ocupa toda la tapa y el título va encima */
.tapa-arte {
  position: absolute; inset: 0; z-index: 1;
  background-image: url("assets/img/lamina-portada.webp");
  background-size: cover; background-position: center 72%;
}
/* el velo abre un claro en el centro para que el título se lea
   sin tapar la ilustración: fundido arriba, abajo y un halo al medio */
.tapa-velo {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(74% 32% at 50% 45%, rgba(251,245,233,.82) 0%, rgba(251,245,233,.58) 46%, rgba(251,245,233,.16) 76%, transparent 100%),
    linear-gradient(180deg, rgba(251,245,233,.72) 0%, rgba(251,245,233,.34) 14%, transparent 30%),
    linear-gradient(0deg, rgba(251,245,233,.86) 0%, rgba(251,245,233,.52) 10%, transparent 24%);
}
.tapa-marco {
  position: absolute; inset: 16px; z-index: 3; border-radius: 4px 16px 16px 4px;
  border: 1px solid rgba(93,72,144,.35);
  box-shadow: inset 0 0 0 4px rgba(251,245,233,.5), inset 0 0 0 5px rgba(93,72,144,.16);
}
.tapa-texto {
  position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center;
  padding: 0 clamp(1.2rem, 9%, 2.6rem);
}
.tapa-escudo { width: clamp(46px, 8%, 62px); height: auto; opacity: .95; }
.tapa-sobre {
  font-family: var(--editorial); margin-top: .7rem; font-size: .68rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--morado-tinta); opacity: .8;
}
/* el guiño bilingüe, encima del título */
.tapa-en {
  font-family: var(--mano); font-size: clamp(1.05rem, 2.3vh, 1.35rem);
  color: var(--morado-tinta); opacity: .92; margin-bottom: .1rem;
}
.tapa-titulo {
  font-family: "Berkshire Swash", "American Typewriter", Georgia, serif; font-weight: 400;
  font-size: clamp(2.3rem, 6.2vh, 3.5rem); line-height: 1.06; color: var(--morado-hondo);
  letter-spacing: -.005em;
  text-shadow: 0 1px 0 rgba(255,252,242,.85), 0 0 22px rgba(251,245,233,.85);
}
/* filete fino entre el título y la marca */
.tapa-filete {
  width: clamp(56px, 34%, 118px); height: 1px; margin: clamp(.6rem, 1.6vh, 1rem) 0 clamp(.5rem, 1.4vh, .85rem);
  background: linear-gradient(90deg, transparent, rgba(93,72,144,.55), transparent);
}
.tapa-sub {
  font-family: var(--editorial);
  font-size: clamp(.66rem, 1.5vh, .78rem); letter-spacing: .32em; text-transform: uppercase;
  color: var(--morado-tinta); opacity: .85;
}
.tapa-pie {
  font-family: var(--editorial); position: absolute; bottom: 2.9rem; left: 0; right: 0; z-index: 4;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--morado-tinta); opacity: .75;
}
/* la invitación, abajo del todo y respirando */
.tapa-toque {
  position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 4vh, 2.4rem); z-index: 4;
  font-family: var(--editorial); font-size: .66rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--morado-tinta); opacity: .7;
  animation: respira-toque 4.6s ease-in-out infinite;
}
@keyframes respira-toque { 0%,100% { opacity: .38 } 50% { opacity: .82 } }
.tapa-cara--fuera::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background-image: url("assets/img/paper.webp"); background-size: 320px 320px;
  mix-blend-mode: multiply; opacity: .55;
}
.tapa-cara--dentro {
  transform: rotateY(180deg);
  background: linear-gradient(178deg, #FDF9F0 0%, var(--papel) 46%, var(--papel-2) 100%);
  border-radius: 22px 6px 6px 22px;
}
/* el lomo del libro cerrado */
html.js .libro.esta-cerrado .tapa::after {
  content: ""; position: absolute; left: -10px; top: 4px; bottom: 4px; width: 12px;
  background: linear-gradient(90deg, #4d3a7c, #6d54a8);
  border-radius: 6px 0 0 6px;
}
html.js .resplandor {
  display: block; position: absolute; inset: -6% -4%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,250,232,.85), rgba(255,246,220,.28) 46%, transparent 72%);
  filter: blur(22px);
}
/* el canto del libro: un bloque de papel, no rayas */
html.js .libro::before, html.js .libro::after {
  content: ""; position: absolute; top: 10px; bottom: 10px; width: 7px; z-index: 1;
  background: linear-gradient(90deg, #F2E7D2 0%, #E9DBC0 45%, #D9C6A4 100%);
}
html.js .libro::before {
  left: -7px; border-radius: 10px 0 0 10px;
  background: linear-gradient(270deg, #F2E7D2 0%, #E9DBC0 45%, #D9C6A4 100%);
  box-shadow: -1px 0 3px rgba(90,64,30,.18);
}
html.js .libro::after {
  right: -7px; border-radius: 0 10px 10px 0;
  box-shadow: 1px 0 3px rgba(90,64,30,.18);
}

html.js .pliegos { position: absolute; inset: 0; z-index: 10; transform-style: preserve-3d; }
html.js .pliego { position: absolute; inset: 0; display: flex; visibility: hidden; }
html.js .pliego.es-actual  { visibility: visible; z-index: 20; }
html.js .pliego.es-entrante { visibility: visible; z-index: 10; }
html.js .pliego.oculta-der .hoja--der { visibility: hidden; }
html.js .pliego.oculta-izq .hoja--izq { visibility: hidden; }

html.js .hoja {
  flex: 1 1 50%; width: 50%; overflow: hidden;
  display: flex; flex-direction: column;
  background:
    linear-gradient(178deg, #FDF9F0 0%, var(--papel) 46%, var(--papel-2) 100%);
}
html.js .hoja--izq { padding-right: var(--lomo-m); border-radius: 22px 0 0 22px;
  background-image: linear-gradient(90deg, rgba(92,62,26,0) 84%, rgba(92,62,26,.16) 100%), linear-gradient(178deg, #FDF9F0 0%, var(--papel) 46%, var(--papel-2) 100%); }
html.js .hoja--der { padding-left: var(--lomo-m); border-radius: 0 22px 22px 0;
  background-image: linear-gradient(270deg, rgba(92,62,26,0) 84%, rgba(92,62,26,.16) 100%), linear-gradient(178deg, #FDF9F0 0%, var(--papel) 46%, var(--papel-2) 100%); }
.hoja::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background-image: url("assets/img/paper.webp"); background-size: 340px 340px;
  mix-blend-mode: multiply; opacity: 1;
}
.hoja::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(122% 92% at 50% 34%, transparent 54%, rgba(120,86,40,.09) 100%);
}
.caja { position: relative; z-index: 3; margin-block: auto; width: 100%; max-width: 30em; }
.hoja--centrada .caja { text-align: center; max-width: 22em; margin-inline: auto; }
/* la portadilla del logo: nada toca los márgenes */
.hoja--centrada .manuscrita { font-size: clamp(1.45rem, 2.4vw, 2.05rem); }
.hoja--centrada .pie-portada { font-size: clamp(.68rem, 1.5vh, .78rem); letter-spacing: .18em; }

/* La página práctica: la misma caja, más apretada, para que la tabla
   entera respire dentro de los márgenes en vez de desbordarlos. */
.hoja--practica .caja { max-width: 34em; }
.hoja--practica .linea--corta { font-size: clamp(1.2rem, 2.4vh, 1.5rem); line-height: 1.28; }
.hoja--practica .tarifas { margin-top: clamp(.8rem, 2vh, 1.3rem); }
.hoja--practica .tarifas th,
.hoja--practica .tarifas td { padding: clamp(.34rem, 1.05vh, .58rem) 0; }
.hoja--practica .tarifas tbody th { font-size: 1.05rem; }
.hoja--practica .tarifas .num b { font-size: 1.14rem; }
.hoja--practica .nota { margin-top: clamp(.5rem, 1.4vh, .95rem); font-size: .84rem; line-height: 1.45; }

/* --- La lámina: ilustración a sangre, sin nada encima --- */
.lamina {
  padding: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* Lámina sin ilustración todavía: cada capítulo tiene su propia luz,
   para que el libro tenga ritmo de color mientras llegan los dibujos. */
/* el shorthand background de .hoja resetea size/position: hay que reponerlos aquí */
html.js .lamina {
  background-color: var(--papel);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: background-position 1.1s var(--suave), background-size 1.1s var(--suave);
}
/* en pantalla ancha la ilustración se recorta: al pasar el mouse se recorre entera */
html.js .lamina[style*="url"] { cursor: crosshair; }
html.js .lamina::before { display: none; }
html.js .lamina[data-lamina="cap1"] {   /* amanecer */
  background-image:
    radial-gradient(62% 44% at 28% 78%, rgba(255,214,160,.62), transparent 72%),
    radial-gradient(54% 40% at 74% 64%, rgba(255,110,94,.26), transparent 74%),
    linear-gradient(178deg, #FDF9F0 0%, var(--papel) 52%, var(--papel-2) 100%);
}
html.js .lamina[data-lamina="cap2"] {   /* juego y menta */
  background-image:
    radial-gradient(60% 44% at 30% 76%, rgba(158,255,158,.5), transparent 72%),
    radial-gradient(52% 38% at 72% 58%, rgba(145,118,204,.28), transparent 74%),
    linear-gradient(178deg, #FDF9F0 0%, var(--papel) 52%, var(--papel-2) 100%);
}
html.js .lamina[data-lamina="cap3"] {   /* mesa y coral */
  background-image:
    radial-gradient(58% 44% at 32% 78%, rgba(255,110,94,.34), transparent 72%),
    radial-gradient(50% 38% at 74% 60%, rgba(250,190,241,.5), transparent 74%),
    linear-gradient(178deg, #FDF9F0 0%, var(--papel) 52%, var(--papel-2) 100%);
}
html.js .lamina[data-lamina="cap4"] {   /* los cuartos, lavanda */
  background-image:
    radial-gradient(62% 46% at 30% 80%, rgba(145,118,204,.42), transparent 74%),
    radial-gradient(48% 36% at 74% 58%, rgba(82,148,233,.24), transparent 74%),
    linear-gradient(178deg, #FDF9F0 0%, var(--papel) 52%, var(--papel-2) 100%);
}
html.js .lamina[data-lamina="cap5"] {   /* los caminos, amarillo */
  background-image:
    radial-gradient(60% 44% at 28% 78%, rgba(255,255,110,.5), transparent 72%),
    radial-gradient(52% 38% at 76% 62%, rgba(158,255,158,.34), transparent 74%),
    linear-gradient(178deg, #FDF9F0 0%, var(--papel) 52%, var(--papel-2) 100%);
}
html.js .lamina[data-lamina="cap6"] {   /* el refugio, tarde */
  background-image:
    radial-gradient(64% 46% at 32% 80%, rgba(255,190,150,.5), transparent 74%),
    radial-gradient(50% 38% at 72% 58%, rgba(145,118,204,.3), transparent 74%),
    linear-gradient(178deg, #FDF9F0 0%, var(--papel) 52%, var(--papel-2) 100%);
}
.lamina--noche { background-color: #2b2054; }
html.js .lamina--noche:not([style*="url"]) {
  background-image:
    radial-gradient(60% 40% at 30% 82%, rgba(120,92,190,.5), transparent 72%),
    radial-gradient(70% 46% at 62% 96%, rgba(70,52,120,.6), transparent 76%),
    linear-gradient(180deg, #241a45 0%, #30245c 58%, #4b3a7d 100%);
}
.lamina--noche::after { opacity: .35; }

/* =============================================================
   Los cuatro niveles y nada más
   ============================================================= */
.linea {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem); line-height: 1.3;
  color: var(--morado-hondo); letter-spacing: -.005em;
}
.linea--corta { font-size: clamp(1.35rem, 2.1vw, 1.7rem); }

.apoyo { margin-top: 1.1rem; font-size: 1.08rem; color: var(--tinta-suave); }
.horario { margin-top: 1.3rem; padding-top: .8rem; border-top: 1px solid var(--filete); font-size: .98rem; color: var(--tinta-suave); }

.manuscrita { font-family: var(--mano); font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.2; color: var(--morado-tinta); }
.manuscrita--cierre { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 1.6rem; }
.marca { width: min(172px, 45%); height: auto; margin: 0 auto 1.5rem; }
.pie-portada { font-family: var(--editorial); margin-top: 1rem; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-tenue); }

.folio {
  font-family: var(--editorial);
  position: absolute; bottom: clamp(1rem, 2.4vh, 1.5rem); left: 0; right: 0; z-index: 3;
  text-align: center; font-size: .8rem; letter-spacing: .2em; color: var(--tinta-tenue);
}

/* --- El guiño en inglés: aquí se vive en dos idiomas --- */
.ingles {
  display: block; margin-bottom: .5rem;
  font-family: var(--mano); font-size: clamp(1.5rem, 2.3vw, 1.9rem);
  color: var(--morado); opacity: .95;
}
.ingles--pie { margin: 1.1rem 0 0; font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--morado-tinta); opacity: .9; }
.page--night .ingles, .lamina--noche + .hoja .ingles { color: var(--rosa); }

/* --- Los espacios --- */
.lista { margin-top: 1.4rem; }
.lista > div { padding-block: .75rem; border-top: 1px solid var(--filete); }
.lista > div:first-child { border-top: 0; padding-top: .2rem; }
.lista dt { font-family: var(--display); font-weight: 600; font-size: 1.18rem; color: var(--morado-hondo); }
.lista dd { margin: .1rem 0 0; font-size: 1rem; color: var(--tinta-suave); }

/* --- Las tarifas: una tabla de verdad, no una lista pegada --- */
.tarifas { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.tarifas th, .tarifas td { text-align: left; padding: .62rem 0; vertical-align: baseline; }
.tarifas thead th {
  font-family: var(--editorial); font-weight: 500; font-size: .7rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-tenue);
  border-bottom: 1.5px solid var(--filete); padding-bottom: .45rem;
}
.tarifas tbody tr + tr th, .tarifas tbody tr + tr td { border-top: 1px solid var(--filete); }
.tarifas tbody th { font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--morado-hondo); padding-right: 1rem; }
.tarifas tbody tr { transition: transform .4s var(--suave), color .3s; }
.tarifas tbody tr:hover { transform: translateX(6px); }
.tarifas tbody tr:hover th { color: var(--coral); }
.lista > div { transition: transform .4s var(--suave); }
.lista > div:hover { transform: translateX(6px); }
.lista > div:hover dt { color: var(--coral); }
.tarifas td { font-size: 1rem; color: var(--tinta-suave); }
.tarifas .num { text-align: right; white-space: nowrap; }
.tarifas .num b { font-family: var(--editorial); font-weight: 600; font-size: 1.22rem; color: var(--tinta); display: block; }
.tarifas .num small { font-size: .78rem; color: var(--tinta-tenue); }
.nota { margin-top: 1rem; font-size: .88rem; line-height: 1.5; color: var(--tinta-tenue); }
/* 2027: cuatro programas. El horario baja bajo el nombre (una columna menos) para que
   la tabla quepa en la misma hoja sin cambiar el libro. La mejor opción se dice con
   palabras, no con una caja: el cuento no tiene etiquetas de oferta. */
.tarifas--horario tbody th small { display: block; font-family: var(--cuerpo, inherit); font-weight: 400;
  font-size: .78rem; color: var(--tinta-tenue); margin-top: .05rem; line-height: 1.3; }
.tarifas__mejor th small em { font-style: normal; color: var(--coral); white-space: nowrap;
  font-family: var(--editorial); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.tarifas__mejor .num b { color: var(--morado-hondo); }
.hoja--practica .tarifas--horario th,
.hoja--practica .tarifas--horario td { padding: clamp(.26rem, .8vh, .5rem) 0; }
.hoja--practica .tarifas--horario ~ .nota { font-size: .78rem; line-height: 1.4; margin-top: clamp(.4rem, 1vh, .7rem); }
/* Hoja «Lo que trae cada camino»: la misma lista de los cuartos, más apretada */
.hoja--practica .lista--trae { margin-top: clamp(.6rem, 1.6vh, 1.1rem); }
.hoja--practica .lista--trae > div { padding: clamp(.25rem, .8vh, .6rem) 0; }
.hoja--practica .lista--trae dt { font-size: 1.02rem; }
.hoja--practica .lista--trae dd { font-size: .84rem; line-height: 1.4; }
.hoja--practica .lista--trae dd + dd { margin-top: .35rem; }
.hoja--practica .lista--trae dd b { font-weight: 600; color: var(--tinta); }

/* --- Cierre --- */
.boton {
  font-family: var(--editorial); display: inline-block; padding: .82rem 1.7rem; border-radius: 3px;
  background: var(--morado-hondo); color: var(--papel);
  font-size: .96rem; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(61,47,99,.3);
  transition: transform .45s var(--suave), box-shadow .45s var(--suave);
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(61,47,99,.36); }
.contacto { margin-top: 1.7rem; padding-top: 1rem; border-top: 1px solid var(--filete); display: grid; gap: .3rem; font-size: .96rem; color: var(--tinta-suave); }
.contacto a { border-bottom: 1px solid rgba(59,52,80,.22); justify-self: center; }
.redes { display: flex; gap: .9rem; justify-content: center; margin-top: .4rem; font-style: italic; font-size: .88rem; }
.redes a { border: 0; }
.credito { margin-top: .7rem; font-size: .76rem; color: var(--tinta-tenue); }

/* =============================================================
   Mecánica: lomo, hoja que gira, chispas
   ============================================================= */
.lomo { display: none; }
html.js .lomo {
  display: block; position: absolute; top: 0; bottom: 0; left: 50%;
  width: clamp(70px, 13%, 170px); z-index: 30;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg,
    rgba(70,45,20,0)    0%,
    rgba(70,45,20,.045) 26%,
    rgba(70,45,20,.11)  40%,
    rgba(56,34,12,.20)  48%,
    rgba(56,34,12,.22)  50%,
    rgba(56,34,12,.20)  52%,
    rgba(70,45,20,.11)  60%,
    rgba(70,45,20,.045) 74%,
    rgba(70,45,20,0)    100%);
}

.hoja-que-gira { display: none; }
html.js .hoja-que-gira {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  z-index: 40; transform-origin: left center; transform-style: preserve-3d;
  pointer-events: none; display: none;
}
html.js .hoja-que-gira.activa { display: block; }
.cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.cara--frente { transform: rotateY(0deg); border-radius: 0 22px 22px 0;
  box-shadow: inset -14px 0 26px -18px rgba(70,45,20,.5); }
.cara--dorso  { transform: rotateY(180deg); border-radius: 22px 0 0 22px; }
html.js .cara > .hoja { position: absolute; inset: 0; width: 100%; height: 100%; flex: none; }
.sombra-giro {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(50,30,10,.46) 0%, rgba(50,30,10,.08) 34%, transparent 62%),
    linear-gradient(270deg, rgba(255,250,235,.5) 0%, transparent 26%);
}
/* la hoja que gira proyecta su sombra sobre la plana de abajo */
html.js .pliego.es-entrante .hoja--izq::after,
html.js .pliego.es-entrante .hoja--der::after { opacity: 1; }
html.js .libro.girando .pliego.es-entrante .hoja--izq {
  animation: sombra-barre var(--giro) var(--libro);
}
@keyframes sombra-barre {
  0%   { box-shadow: inset 40px 0 60px -30px rgba(60,36,10,.55); }
  55%  { box-shadow: inset 120px 0 90px -40px rgba(60,36,10,.35); }
  100% { box-shadow: inset 0 0 0 rgba(60,36,10,0); }
}
@keyframes gira-avanza { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes gira-vuelve { from { transform: rotateY(-180deg); } to { transform: rotateY(0deg); } }
@keyframes sombra-cae  { 0% { opacity: 0; } 42% { opacity: .8; } 100% { opacity: 0; } }
.hoja-que-gira.avanza { animation: gira-avanza var(--giro) var(--libro) forwards; }
.hoja-que-gira.vuelve { animation: gira-vuelve var(--giro) var(--libro) forwards; }
.hoja-que-gira.avanza .sombra-giro,
.hoja-que-gira.vuelve .sombra-giro { animation: sombra-cae var(--giro) var(--libro) forwards; }

.hoja-que-gira { display: none; }
html.js .hoja-que-gira {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  z-index: 40; transform-origin: left center; transform-style: preserve-3d;
  pointer-events: none; display: none;
}
html.js .hoja-que-gira.activa { display: block; }
.cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.cara--frente { transform: rotateY(0deg); border-radius: 0 22px 22px 0;
  box-shadow: inset -14px 0 26px -18px rgba(70,45,20,.5); }
.cara--dorso  { transform: rotateY(180deg); border-radius: 22px 0 0 22px; }
html.js .cara > .hoja { position: absolute; inset: 0; width: 100%; height: 100%; flex: none; }
.sombra-giro {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(50,30,10,.46) 0%, rgba(50,30,10,.08) 34%, transparent 62%),
    linear-gradient(270deg, rgba(255,250,235,.5) 0%, transparent 26%);
}
/* la hoja que gira proyecta su sombra sobre la plana de abajo */
html.js .pliego.es-entrante .hoja--izq::after,
html.js .pliego.es-entrante .hoja--der::after { opacity: 1; }
html.js .libro.girando .pliego.es-entrante .hoja--izq {
  animation: sombra-barre var(--giro) var(--libro);
}
@keyframes sombra-barre {
  0%   { box-shadow: inset 40px 0 60px -30px rgba(60,36,10,.55); }
  55%  { box-shadow: inset 120px 0 90px -40px rgba(60,36,10,.35); }
  100% { box-shadow: inset 0 0 0 rgba(60,36,10,0); }
}
@keyframes gira-avanza { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes gira-vuelve { from { transform: rotateY(-180deg); } to { transform: rotateY(0deg); } }
@keyframes sombra-cae  { 0% { opacity: 0; } 42% { opacity: .8; } 100% { opacity: 0; } }
.hoja-que-gira.avanza { animation: gira-avanza var(--giro) var(--libro) forwards; }
.hoja-que-gira.vuelve { animation: gira-vuelve var(--giro) var(--libro) forwards; }
.hoja-que-gira.avanza .sombra-giro,
.hoja-que-gira.vuelve .sombra-giro { animation: sombra-cae var(--giro) var(--libro) forwards; }

.chispas { position: absolute; inset: 0; z-index: 41; pointer-events: none; overflow: hidden; }
.chispa {
  position: absolute; width: 13px; height: 13px; margin: -6px 0 0 -6px; opacity: 0;
  background: radial-gradient(circle, #fff 0 20%, rgba(255,238,180,.95) 34%, transparent 70%);
  animation: chispea 1.1s var(--suave) forwards;
}
@keyframes chispea {
  0%   { opacity: 0; transform: scale(.3) rotate(0deg); }
  35%  { opacity: 1; transform: scale(1.2) rotate(40deg); }
  100% { opacity: 0; transform: scale(.5) translateY(-28px) rotate(95deg); }
}

/* =============================================================
   La entrada del texto: la historia se escribe al pasar la hoja
   ============================================================= */
[data-entra] { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--suave), transform .8s var(--suave); }
[data-entra].dentro { opacity: 1; transform: none; }
.palabra { display: inline-block; opacity: 0; transform: translateY(14px); transition: opacity .85s var(--suave), transform .85s var(--suave); }
.palabra.dentro { opacity: 1; transform: none; }


/* =============================================================
   Mando y flechas
   ============================================================= */
.mando {
  position: relative; z-index: 50; display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.4rem);
  padding: .38rem .5rem; border-radius: 999px;
  background: rgba(255,255,255,.66); border: 1px solid rgba(93,72,144,.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(94,66,140,.16); color: var(--morado-hondo);
}
.mando-paso { display: flex; align-items: center; gap: .5rem; }
.mando-btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: var(--morado-tinta);
  transition: background-color .3s, color .3s, transform .3s var(--suave);
}
.mando-btn:hover { background: rgba(145,118,204,.16); transform: translateY(-1px); }
.mando-btn:disabled { opacity: .25; pointer-events: none; }
.mando-btn[aria-pressed="true"] { background: var(--morado); color: #fff; }
.mando-btn--wa:hover { background: rgba(30,142,78,.9); color: #fff; }
.mando-cuenta { font-family: var(--editorial); font-size: .84rem; letter-spacing: .06em; color: var(--morado-tinta); min-width: 4.6rem; text-align: center; }
.mando-cuenta i { font-style: italic; opacity: .55; }

.flecha {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 45;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  color: rgba(93,72,144,.5);
  transition: color .35s, background-color .35s, opacity .35s;
}
.flecha--izq { left: clamp(.3rem, 2.4vw, 2.4rem); }
.flecha--der { right: clamp(.3rem, 2.4vw, 2.4rem); }
.flecha:hover { color: var(--morado-hondo); background: rgba(255,255,255,.6); }
.flecha:disabled { opacity: 0; pointer-events: none; }
.flecha--der:not(:disabled) svg { animation: latido 3.6s ease-in-out infinite; }
@keyframes latido { 0%,100% { transform: translateX(0); opacity: .8; } 50% { transform: translateX(5px); opacity: 1; } }
.flecha--der:hover svg { animation: none; }

/* la mitad sobre la que estás se aclara: se entiende que ahí se hace clic */
html.js .libro.lado-der .hoja--der,
html.js .libro.lado-izq .hoja--izq { filter: brightness(1.03); }
html.js .libro.lado-der, html.js .libro.lado-izq { cursor: pointer; }
html.js .hoja { transition: filter .5s var(--suave); }

/* =============================================================
   Asistente
   ============================================================= */
.asistente {
  position: fixed; left: 50%; bottom: 5.4rem; transform: translateX(-50%); z-index: 80;
  width: min(92vw, 340px); background: var(--papel); border-radius: 4px;
  box-shadow: 0 28px 56px rgba(60,40,110,.34); border: 1px solid rgba(59,52,80,.14);
  display: none; flex-direction: column; overflow: hidden;
}
.asistente:not([hidden]) { display: flex; }
.asistente-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem .9rem; border-bottom: 1px solid var(--filete);
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--morado-tinta);
}
.asistente-hilo { padding: .85rem; overflow-y: auto; max-height: 250px; display: flex; flex-direction: column; gap: .5rem; font-size: .95rem; }
.burbuja { padding: .45rem .7rem; border-radius: 3px; max-width: 90%; line-height: 1.45; }
.burbuja--bot { background: var(--papel-2); color: var(--tinta-suave); align-self: flex-start; }
.burbuja--tu  { background: var(--morado-tinta); color: #fff; align-self: flex-end; }
.asistente-forma { display: flex; border-top: 1px solid var(--filete); }
.asistente-forma input { flex: 1; border: 0; background: none; padding: .7rem .85rem; font: inherit; color: var(--tinta); }
.asistente-forma input:focus { outline: none; }
.asistente-forma button { padding: 0 1rem; color: var(--morado-tinta); font-size: 1.1rem; }

/* =============================================================
   Móvil: una hoja a la vez
   ============================================================= */
@media (max-width: 899px) {
  body { font-size: 17px; }
  .lectura { padding-top: 92px; }
  /* en móvil la guirnalda se recorta al centro, a su tamaño natural */
  html.js .libro { width: 100%; aspect-ratio: auto; perspective: none; filter: drop-shadow(0 18px 34px rgba(88,60,140,.3)); }
  html.js .libro::before, html.js .libro::after { display: none; }
  html.js .pliegos { position: static; }
  html.js .pliego { position: relative; inset: auto; display: none; flex-direction: column; visibility: visible; }
  html.js .pliego.es-actual { display: flex; animation: entra-hoja .5s var(--suave) both; }
  html.js .hoja { width: 100%; flex: 0 0 auto; border-radius: 0; }
  html.js .hoja--izq { border-radius: 14px 14px 0 0; padding-right: var(--margen); min-height: 34svh; }
  html.js .hoja--der { border-radius: 0 0 14px 14px; padding-left: var(--margen); }
  html.js .lomo, html.js .hoja-que-gira { display: none !important; }
  html.js .libro { --alto: auto; height: auto; }
  html.js .libro.esta-cerrado { width: 100%; }
  html.js .tapa { position: relative; width: 100%; height: min(70svh, 560px); }
  html.js .libro.esta-cerrado .tapa::after { display: none; }
  /* al abrir, la tapa sale del flujo: si no, su hueco empuja la hoja hacia abajo */
  html.js .libro.abriendo .tapa {
    position: absolute; top: 0; left: 0; right: 0; z-index: 60;
    transform: none; opacity: 0; transition: opacity .42s var(--suave);
  }
  .flecha { display: none; }
  html.js .pliego.es-actual { cursor: pointer; }
  .caja { max-width: none; }
  /* en vertical la ilustración deja aire muerto arriba: se acerca y se apoya abajo */
  .tapa-arte { background-size: 132% auto; background-position: center 88%; }
  /* El velo es un halo justo detrás del título, no una nube sobre la lámina.
     La legibilidad la pone la sombra del texto, no tapar la ilustración. */
  .tapa-velo {
    background:
      radial-gradient(42% 12% at 50% 41%, rgba(251,245,233,.52) 0%, rgba(251,245,233,.22) 58%, transparent 100%),
      linear-gradient(0deg, rgba(251,245,233,.44) 0%, rgba(251,245,233,.12) 7%, transparent 16%);
  }
  .tapa-titulo {
    text-shadow:
      0 1px 0 rgba(255,253,246,.95),
      0 0 10px rgba(251,245,233,1),
      0 0 30px rgba(251,245,233,.95);
  }
  .tapa-en, .tapa-sub { text-shadow: 0 0 12px rgba(251,245,233,1), 0 0 26px rgba(251,245,233,.9); }
  .tapa-toque { color: var(--morado-hondo); opacity: .82; text-shadow: 0 0 10px rgba(251,245,233,1); }
  /* el marco deja de aportar halo: solo un filete finísimo */
  .tapa-marco { inset: 12px; box-shadow: none; border-color: rgba(93,72,144,.28); }
  /* la textura de papel no debe apagar la acuarela */
  .tapa-cara--fuera::after { opacity: .3; }
  .tapa-cara--fuera { box-shadow: inset 0 0 0 1px rgba(93,72,144,.18); }
  /* cerrado, las hojas no ocupan sitio: si no, se hace scroll hacia la nada */
  html.js .libro.esta-cerrado .pliegos { display: none; }
  /* la primera hoja entra de una pieza, sin escalonarse */
  html.js .pliego.es-actual { animation-duration: .38s; }
  @keyframes entra-hoja { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
}

/* =============================================================
   La apertura tal cual estaba en la version publicada.
   Acotada a pantalla ancha: en movil se queda la version nueva.
   ============================================================= */
@media (min-width: 900px) {
  html.js .tapa { transition: transform 1.5s cubic-bezier(.28,.72,.24,1); }
  html.js .libro.esta-cerrado .pliegos { opacity: 0; }
  html.js .pliegos { transition: opacity .7s var(--suave); }
  html.js .libro.abriendo { transition: width .7s var(--suave); }
  html.js .libro.abriendo .pliegos { transition: opacity .7s var(--suave); }
}

@media (prefers-reduced-motion: reduce) {
  /* se quita el adorno (polvo, chispas, parallax), no el giro del libro */
  :root { --giro: 1100ms; }
  .capa--polvo span, .flecha--der svg, .tapa-toque { animation: none; }
  .chispa { display: none; }
  .capa { transition: none; }
  /* el texto no se desplaza, pero sí aparece: es color, no movimiento */
  .palabra { transform: none; transition: opacity .5s var(--suave); }
  .palabra.dentro { transform: none; }
}

/* Laptops bajas (1280x720 y parecidas): las dos hojas prácticas se aprietan un poco.
   Solo en escritorio y solo cuando falta alto; en pantallas normales y en celular no cambia nada. */
@media (min-width: 900px) and (max-height: 740px) {
  .hoja--practica .linea--corta { font-size: 1.12rem; line-height: 1.22; }
  .hoja--practica .tarifas--horario { margin-top: .55rem; }
  .hoja--practica .tarifas--horario thead th { padding-bottom: .3rem; }
  .hoja--practica .tarifas--horario th,
  .hoja--practica .tarifas--horario td { padding: .2rem 0; }
  .hoja--practica .tarifas .num b { font-size: 1.05rem; }
  .hoja--practica .lista--trae { margin-top: .45rem; }
  .hoja--practica .lista--trae > div { padding: .2rem 0; }
  .hoja--practica .lista--trae dt { font-size: .96rem; }
  .hoja--practica .lista--trae dd { font-size: .8rem; line-height: 1.35; }
  .hoja--practica .nota { margin-top: .35rem; }
}