/* ============================================================================
 *  LIBRO  ·  el motor 3D, el papel rasgado, las cintas y el pie de pagina
 * ----------------------------------------------------------------------------
 *  REGLA DE RENDIMIENTO QUE ATRAVIESA TODO ESTE ARCHIVO:
 *  lo unico que se anima es transform y opacity. Ni un width, ni un top,
 *  ni un margin animado. El resto es estatico y se pinta una sola vez.
 * ==========================================================================*/

/* ---------------------------------------------------------------------
 * LA CAJA DEL LIBRO
 * -------------------------------------------------------------------
 *  Aqui vive la perspectiva. Las hojas son nietas de esta caja y
 *  reciben la perspectiva porque .libro conserva el espacio 3D.
 * -------------------------------------------------------------------*/
.libro-caja {
  position: relative;
  width: var(--pw);
  height: var(--ph);
  /* Hueco reservado para el pie: al centrar el libro en la pantalla, este
     margen entra en el calculo y el progreso nunca queda cortado abajo.
     El JS ajusta --pie-alto segun la pantalla (menos en las bajas). */
  margin-bottom: var(--pie-alto, 84px);
  /* Las cintas sobresalen por la derecha, asi que el libro se corre a la
     izquierda justo esa mitad: lo que queda centrado en la pantalla es el
     conjunto (libro + cintas), no solo el libro. Sin esto, en un movil
     estrecho la ultima cinta se sale por el borde. */
  margin-right: var(--sale, 34px);
  /* La camara, MUCHO mas cerca. A 4.2x el ancho estaba tan lejos que la
     hoja giraba casi sin escorzo y parecia un plano dando vueltas; a 1.9x
     la hoja se acorta al alejarse y el giro por fin tiene volumen. */
  perspective: calc(var(--pw) * 1.9);
  perspective-origin: 50% 44%;
  z-index: 10;
  /* pan-y deja pasar el desplazamiento vertical (para las hojas con mucho
     texto) y reserva el horizontal para el gesto de pasar pagina */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.libro-caja[data-modo="doble"] { width: calc(var(--pw) * 2); }

/* ---------------------------------------------------------------------
 * LAS SOMBRAS SOBRE LA MESA
 * -------------------------------------------------------------------
 *  Lo que de verdad hace que un objeto se vea apoyado son DOS sombras,
 *  no una:
 *
 *   · la DIFUSA: grande, suave y desplazada en el sentido contrario a
 *     la luz (aqui la lampara esta arriba a la izquierda, asi que cae
 *     hacia abajo y a la derecha). Da el peso.
 *   · la de CONTACTO: pequeña, oscura y muy pegada al canto. Es la que
 *     dice "esto toca la mesa". Sin ella el libro parece flotar aunque
 *     tenga sombra grande.
 *
 *  Las dos son degradados radiales, ya suaves de nacimiento: no hace
 *  falta ningun blur (que si costaria en cada repintado).
 * -------------------------------------------------------------------*/
.libro-sombra {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.libro-sombra--difusa {
  left:   calc(var(--pw) * -.14);
  right:  calc(var(--pw) * -.20);
  bottom: calc(var(--pw) * -.20);
  height: calc(var(--pw) * .46);
  background: radial-gradient(ellipse 50% 50% at 48% 38%,
    rgba(18,7,2,.80) 0%, rgba(18,7,2,.44) 42%, rgba(18,7,2,0) 76%);
}
.libro-sombra--contacto {
  left:   calc(var(--pw) * -.03);
  right:  calc(var(--pw) * -.05);
  bottom: calc(var(--pw) * -.055);
  height: calc(var(--pw) * .12);
  background: radial-gradient(ellipse 50% 50% at 50% 34%,
    rgba(8,3,1,.88) 0%, rgba(8,3,1,.50) 36%, rgba(8,3,1,0) 68%);
}

/* halo ambiental: oscurece la mesa alrededor de todo el libro */
.libro-sombra--difusa::before {
  content: '';
  position: absolute;
  left: -18%; right: -18%; top: -240%; bottom: -40%;
  border-radius: 46%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(20,8,3,.42) 0%, rgba(20,8,3,.18) 46%, rgba(20,8,3,0) 72%);
}

/* ---------------------------------------------------------------------
 * LA TAPA  ·  lo que se ve por debajo del bloque de hojas
 * -------------------------------------------------------------------*/
/* ---------------------------------------------------------------------
 *  Cuero con uso: no esta nuevo, pero tampoco destrozado.
 *  El desgaste se consigue apilando capas ESTATICAS (se pintan una vez y
 *  no vuelven a costar nada durante los volteos):
 *    · roces claros en las esquinas, donde mas se manosea un libro
 *    · una pátina irregular, como la cera que se acumula con los años
 *    · el grano del cuero
 *    · un brillo desigual, mas vivo arriba a la izquierda
 * -------------------------------------------------------------------*/
.libro-tapa {
  position: absolute;
  inset: calc(var(--pw) * -.022);
  border-radius: calc(var(--pw) * .016);
  background:
    /* roces claros de las cuatro esquinas */
    radial-gradient(ellipse 22% 16% at 2% 2%,   rgba(214,158,120,.34), rgba(214,158,120,0) 70%),
    radial-gradient(ellipse 20% 14% at 98% 3%,  rgba(214,158,120,.26), rgba(214,158,120,0) 70%),
    radial-gradient(ellipse 24% 15% at 3% 98%,  rgba(214,158,120,.30), rgba(214,158,120,0) 70%),
    radial-gradient(ellipse 20% 13% at 97% 97%, rgba(214,158,120,.22), rgba(214,158,120,0) 70%),
    /* patina desigual */
    radial-gradient(ellipse 46% 30% at 26% 22%, rgba(196,132,92,.20), rgba(196,132,92,0) 72%),
    radial-gradient(ellipse 38% 44% at 82% 62%, rgba(58,26,15,.26),  rgba(58,26,15,0)  74%),
    radial-gradient(ellipse 30% 22% at 58% 88%, rgba(58,26,15,.20),  rgba(58,26,15,0)  76%),
    /* brillo del cuero */
    linear-gradient(148deg, rgba(255,214,176,.14) 0%, rgba(255,214,176,0) 34%),
    linear-gradient(150deg, #8c4b33 0%, #6b3524 42%, #4e2618 100%);
  box-shadow:
    0 calc(var(--pw) * .05) calc(var(--pw) * .13) rgba(0,0,0,.55),
    0 calc(var(--pw) * .012) calc(var(--pw) * .03) rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(226,200,145,.24),
    inset 0 calc(var(--pw) * .02) calc(var(--pw) * .05) rgba(255,206,164,.07),
    inset 0 calc(var(--pw) * -.02) calc(var(--pw) * .06) rgba(0,0,0,.30);
  overflow: hidden;
}

/* Grano del cuero y rozaduras finas */
.libro-tapa::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23c)' opacity='.6'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: .17;
}

/* Filigrana grabada en la tapa, con el dorado ya algo apagado por el uso */
.libro-tapa::after {
  content: '';
  position: absolute;
  inset: calc(var(--pw) * .008);
  border: 1px solid rgba(226,200,145,.20);
  border-radius: calc(var(--pw) * .01);
  pointer-events: none;
  /* el filo dorado se ha ido perdiendo por partes */
  -webkit-mask-image: linear-gradient(112deg,
    #000 0%, rgba(0,0,0,.35) 18%, #000 34%, rgba(0,0,0,.5) 52%,
    #000 68%, rgba(0,0,0,.3) 84%, #000 100%);
  mask-image: linear-gradient(112deg,
    #000 0%, rgba(0,0,0,.35) 18%, #000 34%, rgba(0,0,0,.5) 52%,
    #000 68%, rgba(0,0,0,.3) 84%, #000 100%);
}

/* ---------------------------------------------------------------------
 * LA GUARDA  ·  la cara interior de la tapa (solo en libro abierto)
 * -------------------------------------------------------------------*/
.libro-guarda { display: none; }

.libro-caja[data-modo="doble"] .libro-guarda {
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  z-index: 6;                       /* detras del bloque de hojas */
  overflow: hidden;
  background:
    radial-gradient(60% 45% at 50% 42%, rgba(226,200,145,.14), rgba(226,200,145,0) 70%),
    /* enrejado de rombos, como el papel de guarda de un libro antiguo */
    repeating-linear-gradient( 62deg, rgba(226,200,145,.055) 0 1px, rgba(226,200,145,0) 1px 22px),
    repeating-linear-gradient(-62deg, rgba(226,200,145,.055) 0 1px, rgba(226,200,145,0) 1px 22px),
    linear-gradient(150deg, #7e4130 0%, #62311f 55%, #4a2317 100%);
  box-shadow: inset -14px 0 26px rgba(0,0,0,.42);
}

.libro-guarda__marco {
  text-align: center;
  padding: calc(var(--pw) * .09) calc(var(--pw) * .12);
  border: 1px solid rgba(226,200,145,.34);
  border-radius: 2px;
  position: relative;
}
.libro-guarda__marco::before {
  content: '';
  position: absolute;
  inset: calc(var(--pw) * .014);
  border: 1px solid rgba(226,200,145,.18);
  border-radius: 2px;
}
.libro-guarda__monograma {
  margin: 0;
  font-family: var(--f-script);
  font-size: calc(var(--pw) * .21);
  line-height: 1;
  color: var(--dorado-claro);
  opacity: .82;
}
.libro-guarda__monograma span {
  font-family: var(--f-libro);
  font-size: .42em;
  opacity: .75;
  margin-inline: .04em;
}
.libro-guarda__pie {
  margin: calc(var(--pw) * .03) 0 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(226,200,145,.6);
  text-indent: .34em;
}

/* ---------------------------------------------------------------------
 * LA SOMBRA QUE ARROJA LA HOJA AL LEVANTARSE
 * -------------------------------------------------------------------
 *  Cuando levantas una hoja, esa hoja tapa la luz y deja una sombra
 *  sobre la pagina que va quedando al descubierto: oscura pegada al
 *  lomo y desvanecida hacia fuera, y va barriendo conforme la hoja se
 *  aparta. Es un detalle pequeño pero es lo que separa "dos planos que
 *  giran" de "un libro".
 *
 *  Se estira con scaleX (nunca con width) y solo aparece durante el
 *  volteo; con el libro quieto no existe.
 * -------------------------------------------------------------------*/
.libro-sombra-volteo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 11;                /* sobre las hojas, bajo la contratapa */
  pointer-events: none;
  opacity: 0;
  transform-origin: left center;
  transform: scaleX(.06);
  background: linear-gradient(90deg,
    rgba(38,18,8,.62) 0%, rgba(38,18,8,.34) 22%,
    rgba(38,18,8,.12) 52%, rgba(38,18,8,0) 100%);
}
.libro-caja[data-modo="doble"] .libro-sombra-volteo { left: 50%; width: 50%; }

@keyframes sombraVolteo {
  0%   { transform: scaleX(.05); opacity: 0; }
  22%  { opacity: .85; }
  62%  { opacity: .45; }
  100% { transform: scaleX(1.05); opacity: 0; }
}
.libro--volteando .libro-sombra-volteo {
  animation: sombraVolteo var(--dur-sombra, var(--dur-hoja)) var(--curva-hoja) both;
}
/* Al retroceder, la sombra se recoge hacia el lomo en vez de abrirse */
.libro--volteando-atras .libro-sombra-volteo { animation-direction: reverse; }

/* ---------------------------------------------------------------------
 * CONTRATAPA  ·  el final del libro
 * -------------------------------------------------------------------
 *  Al pasar la ultima hoja, en vez de quedarse en blanco enseñando el
 *  carton, el libro se cierra por detras: aparece la guarda de atras,
 *  con el sello de lacre marcado en caliente.
 * -------------------------------------------------------------------*/
.libro-contratapa {
  position: absolute;
  inset: 0;
  z-index: 12;                       /* por encima de las hojas (10) */
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: calc(var(--pw) * .004);
  background:
    radial-gradient(72% 52% at 50% 44%, rgba(226,200,145,.13), rgba(226,200,145,0) 72%),
    repeating-linear-gradient( 62deg, rgba(226,200,145,.05) 0 1px, rgba(226,200,145,0) 1px 22px),
    repeating-linear-gradient(-62deg, rgba(226,200,145,.05) 0 1px, rgba(226,200,145,0) 1px 22px),
    linear-gradient(150deg, #7e4130 0%, #62311f 55%, #47210f 100%);
  box-shadow: inset 0 0 calc(var(--pw) * .12) rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease .1s, visibility .45s;
}
.libro--final .libro-contratapa { opacity: 1; visibility: visible; }

.libro-contratapa__int {
  text-align: center;
  padding: var(--s3) var(--s4);
  max-width: calc(var(--pw) * .86);
  transform: translateY(calc(var(--pw) * .04));
  opacity: 0;
  transition: transform .6s cubic-bezier(.2,.8,.3,1) .18s, opacity .6s ease .18s;
}
.libro--final .libro-contratapa__int { transform: translateY(0); opacity: 1; }

.libro-contratapa__titulo {
  margin: var(--s3) 0 0;
  font-family: var(--f-script);
  font-size: calc(var(--pw) * .17);
  line-height: 1;
  color: var(--dorado-claro);
}
.libro-contratapa__texto {
  margin: var(--s2) 0 0;
  font-size: var(--t-md);
  line-height: 1.6;
  color: rgba(243,233,220,.78);
  text-wrap: balance;
}
.libro-contratapa__pie {
  margin: var(--s2) 0 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(226,200,145,.58);
  text-indent: .32em;
}
.libro-contratapa__boton {
  margin-top: var(--s3);
  color: var(--dorado-claro);
  background: rgba(255,255,255,.06);
  border-color: rgba(226,200,145,.42);
}
.libro-contratapa__boton:hover { background: rgba(226,200,145,.16); }

/* ---------------------------------------------------------------------
 * EL SELLO DE LACRE
 * -------------------------------------------------------------------
 *  Tres capas para que parezca prensado en caliente y no una pegatina:
 *    · el quemado: el halo oscuro que el lacre caliente deja alrededor
 *    · la cera: disco de bordes irregulares, brillante arriba y hundido
 *      abajo, con la sombra que proyecta sobre el cuero
 *    · las iniciales: grabadas en hueco (sombra clara arriba y oscura
 *      abajo, justo al reves que un texto en relieve)
 * -------------------------------------------------------------------*/
.sello {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--pw) * .40);
  height: calc(var(--pw) * .40);
  margin-inline: auto;
}
.sello__quemado {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(38,14,6,.55) 38%, rgba(38,14,6,.28) 56%, rgba(38,14,6,0) 74%);
}
.sello__cera {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  /* bordes irregulares, como la cera al aplastarse */
  border-radius: 47% 53% 51% 49% / 49% 47% 53% 51%;
  background:
    radial-gradient(ellipse 60% 46% at 34% 26%, rgba(255,168,140,.42), rgba(255,168,140,0) 62%),
    radial-gradient(ellipse 70% 60% at 68% 82%, rgba(60,10,4,.55), rgba(60,10,4,0) 66%),
    linear-gradient(152deg, #b23f2b 0%, #8e2a1b 46%, #6a1a10 100%);
  box-shadow:
    inset 0 calc(var(--pw) * .008) calc(var(--pw) * .016) rgba(255,180,150,.30),
    inset 0 calc(var(--pw) * -.010) calc(var(--pw) * .020) rgba(40,8,3,.62),
    0 calc(var(--pw) * .010) calc(var(--pw) * .022) rgba(30,10,4,.55);
}
/* reborde estriado del sello */
.sello__cera::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  border: 1px solid rgba(255,190,160,.22);
  box-shadow: inset 0 0 calc(var(--pw) * .02) rgba(40,8,3,.5);
}
.sello__iniciales {
  position: relative;
  font-family: var(--f-script);
  font-size: calc(var(--pw) * .155);
  line-height: 1;
  color: #d9836a;
  /* grabado en hueco: luz por abajo, sombra por arriba */
  text-shadow:
     0 -1px 1px rgba(48,10,4,.85),
     0 1px 1px rgba(255,186,158,.42);
}
.sello__iniciales em {
  font-family: var(--f-libro);
  font-style: normal;
  font-size: .42em;
  opacity: .8;
  margin-inline: .06em;
}

/* ---------------------------------------------------------------------
 * EL LOMO  ·  la costura del libro, en el borde izquierdo
 * -------------------------------------------------------------------*/
/* Con el libro cerrado por detras no hay canal que enseñar, y ademas la
   linea partia el sello justo por la mitad. */
.libro--final .libro-lomo { opacity: 0; transition: opacity .4s ease; }

.libro-lomo {
  position: absolute;
  top: calc(var(--pw) * -.022);
  bottom: calc(var(--pw) * -.022);
  left: calc(var(--pw) * -.022);
  width: calc(var(--pw) * .05);
  border-radius: calc(var(--pw) * .016) 0 0 calc(var(--pw) * .016);
  background:
    linear-gradient(90deg,
      rgba(60,26,15,.0) 0%,
      rgba(40,17,10,.55) 38%,
      rgba(30,12,7,.75) 62%,
      rgba(0,0,0,.28) 100%),
    linear-gradient(150deg, #7d3f2a, #52281a);
  z-index: 14;
  pointer-events: none;
}
.libro-caja[data-modo="doble"] .libro-lomo {
  left: calc(50% - var(--pw) * .025);
  width: calc(var(--pw) * .05);
  border-radius: 0;
  background: linear-gradient(90deg,
    rgba(74,40,26,0) 0%, rgba(74,40,26,.22) 26%,
    rgba(52,26,16,.42) 50%, rgba(74,40,26,.22) 74%, rgba(74,40,26,0) 100%);
}

/* ---------------------------------------------------------------------
 * LOS CANTOS  ·  el grosor de las hojas que faltan y de las leidas
 * -------------------------------------------------------------------
 *  Se escalan con transform (no con width) segun el avance de lectura.
 * -------------------------------------------------------------------*/
.libro-canto {
  position: absolute;
  top: calc(var(--pw) * .012);
  bottom: calc(var(--pw) * .012);
  width: calc(var(--pw) * .038);
  pointer-events: none;
  z-index: 6;
  transition: transform .5s ease;
  background:
    repeating-linear-gradient(90deg,
      #f6ecdc 0 1.5px, #e2d2ba 1.5px 3px);
  box-shadow: 0 0 calc(var(--pw)*.02) rgba(0,0,0,.25);
}
.libro-canto--der {
  right: calc(var(--pw) * -.036);
  border-radius: 0 calc(var(--pw)*.008) calc(var(--pw)*.008) 0;
  transform-origin: left center;
  transform: scaleX(var(--restante, 1));
}
.libro-canto--izq {
  left: calc(var(--pw) * -.038);
  border-radius: calc(var(--pw)*.008) 0 0 calc(var(--pw)*.008);
  transform-origin: right center;
  transform: scaleX(var(--leido, 0));
  z-index: 4;
}

/* ---------------------------------------------------------------------
 * EL BLOQUE DE HOJAS
 * -------------------------------------------------------------------*/
.libro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  z-index: 10;
}

.hoja {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  /* Sin will-change por defecto: solo se pone en la hoja que se mueve */
}

.libro-caja[data-modo="doble"] .hoja { left: 50%; width: 50%; }

/* La transicion se enciende solo cuando toca (durante el arrastre NO,
   para que la hoja siga el dedo exactamente).
   --dur la fija el JS: la misma cifra manda sobre el giro, la comba y el
   brillo, asi las tres cosas van al mismo compas. */
.hoja--transicion { transition: transform var(--dur, var(--dur-hoja)) var(--curva-hoja); }

/* ---------------------------------------------------------------------
 * LA COMBA  ·  el papel no gira rigido, se arquea
 * -------------------------------------------------------------------
 *  Va en un elemento aparte porque el giro tambien es transform y las
 *  dos cosas no caben en la misma propiedad.
 *  El sesgado desfasa los bordes de arriba y abajo (el canto exterior se
 *  retrasa respecto al lomo) y el achatamiento minimo remata la ilusion
 *  de que la hoja se curva hacia el lector.
 * -------------------------------------------------------------------*/
.hoja__flexion {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
}

@keyframes combaHoja {
  0%   { transform: skewY(0deg)    scaleY(1); }
  18%  { transform: skewY(2.2deg)  scaleY(.988); }
  50%  { transform: skewY(3.0deg)  scaleY(.976); }
  82%  { transform: skewY(1.9deg)  scaleY(.989); }
  100% { transform: skewY(0deg)    scaleY(1); }
}

/* Volteo completo (flecha, toque, teclado o salto de cinta) */
.hoja--animando:not(.hoja--arrastrando):not(.hoja--soltando) .hoja__flexion {
  animation: combaHoja var(--dur, var(--dur-hoja)) var(--curva-hoja) both;
}
/* Al soltar el dedo a media hoja: la animacion arranca YA EMPEZADA
   (retraso negativo) para engancharse justo donde estaba el papel. */
.hoja--soltando .hoja__flexion {
  animation: combaHoja var(--dur-comba, var(--dur-hoja)) var(--curva-hoja)
             var(--retraso-comba, 0ms) both;
}
.hoja--comba-inversa .hoja__flexion { animation-direction: reverse; }

/* ---------------------------------------------------------------------
 * EL BRILLO  ·  la luz que recorre la hoja mientras gira
 * -------------------------------------------------------------------
 *  Es la banda de luz que resbala por el papel cuando lo levantas contra
 *  una lampara. Sin esto el volteo se ve plano por muy bien que gire.
 * -------------------------------------------------------------------*/
.hoja__brillo {
  position: absolute;
  pointer-events: none;
  top: -6%;
  bottom: -6%;
  left: -55%;
  width: 78%;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-45%, 0, 0);
  background: linear-gradient(100deg,
    rgba(255,252,244,0)   0%,
    rgba(255,252,244,.16) 34%,
    rgba(255,255,250,.40) 50%,
    rgba(255,252,244,.16) 66%,
    rgba(255,252,244,0)   100%);
}
@keyframes brilloHoja {
  0%   { transform: translate3d(-45%,0,0);  opacity: 0; }
  18%  { opacity: .62; }
  82%  { opacity: .62; }
  100% { transform: translate3d(145%,0,0);  opacity: 0; }
}
.hoja--animando:not(.hoja--arrastrando):not(.hoja--soltando) .hoja__brillo {
  animation: brilloHoja var(--dur, var(--dur-hoja)) var(--curva-hoja) both;
}
.hoja--soltando .hoja__brillo {
  animation: brilloHoja var(--dur-comba, var(--dur-hoja)) var(--curva-hoja)
             var(--retraso-comba, 0ms) both;
}
.hoja--comba-inversa .hoja__brillo { animation-direction: reverse; }
.hoja--arrastrando .hoja__brillo { opacity: .6; }

/* Mientras se mueve: capa propia de compositing */
.hoja--animando { will-change: transform; }

.hoja--volteada { transform: rotateY(-180deg); }

/* En modo de una sola pagina, la hoja ya volteada queda fuera del libro:
   se esconde al terminar para no asomar por la izquierda */
.libro-caja[data-modo="simple"] .hoja--volteada.hoja--quieta { visibility: hidden; }

/* Hojas fuera de la ventana de montaje: ni se pintan ni ocupan trabajo */
.hoja--dormida { display: none; }

/* ---------------------------------------------------------------------
 * LAS DOS CARAS DE CADA HOJA
 * -------------------------------------------------------------------*/
.hoja__cara {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hoja__cara--dorso { transform: rotateY(180deg); }

/* ---------------------------------------------------------------------
 *  LA CARA QUE MIRA HACIA EL OTRO LADO NO DEBE RECOGER CLICS
 * -------------------------------------------------------------------
 *  backface-visibility: hidden hace que la cara de atras no se PINTE,
 *  pero el navegador sigue considerandola para saber donde has tocado:
 *  ahi sigue, ocupando el mismo trozo de pantalla.
 *
 *  Sin estas dos lineas, en el libro abierto de escritorio la pagina de
 *  la IZQUIERDA (que es el dorso de una hoja ya volteada) se veia bien
 *  pero ninguno de sus botones respondia: los clics se los quedaba la
 *  cara de delante, invisible y por encima.
 * -------------------------------------------------------------------*/
.hoja--volteada .hoja__cara--frente { pointer-events: none; }
.hoja:not(.hoja--volteada) .hoja__cara--dorso { pointer-events: none; }

/* ---------------------------------------------------------------------
 * SOMBREADO DE LA HOJA
 * -------------------------------------------------------------------
 *  Son DOS sombras distintas y las dos importan:
 *
 *  1. El PLIEGUE (::before de .pagina, mas abajo): la penumbra del papel
 *     cerca del lomo. Esa esta SIEMPRE, tambien con el libro quieto,
 *     porque en un libro de verdad el centro nunca se ilumina igual que
 *     el borde. Es lo que da volumen al conjunto.
 *
 *  2. El SOMBREADO DEL GIRO (::after de .hoja__cara, aqui): la hoja que
 *     se levanta se oscurece por la cara que se aleja de la luz y se
 *     aclara por la que se acerca. Solo aparece mientras gira.
 * -------------------------------------------------------------------*/
.hoja__cara::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur, var(--dur-hoja)) var(--curva-hoja);
  z-index: 8;
  clip-path: inherit;
}
.hoja__cara--frente::after {
  background: linear-gradient(90deg,
    rgba(48,24,14,.44) 0%, rgba(48,24,14,.19) 14%, rgba(70,40,24,.05) 34%,
    rgba(255,250,240,.08) 70%, rgba(255,250,240,.17) 100%);
}
.hoja__cara--dorso::after {
  background: linear-gradient(90deg,
    rgba(255,250,240,.15) 0%, rgba(90,50,30,.09) 40%,
    rgba(48,24,14,.22) 82%, rgba(48,24,14,.42) 100%);
}
.hoja--animando .hoja__cara::after { opacity: 1; }
/* mientras el dedo arrastra, la luz responde al momento, no a la curva */
.hoja--arrastrando .hoja__cara::after { transition: opacity .14s linear; }

/* ---------------------------------------------------------------------
 * LA FIBRA DEL PAPEL RASGADO
 * -------------------------------------------------------------------
 *  Va justo debajo del papel, recortada con el MISMO rasgado pero un
 *  pelin mas grande. Lo que asoma por el borde son las hebras claras que
 *  deja el papel al romperse a mano. Es el detalle que separa un borde
 *  "recortado" de un borde "rasgado".
 * -------------------------------------------------------------------*/
.hoja__fibra {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(155deg, #fffdf8 0%, #fbf4e8 55%, #f3e9d8 100%);
  /* Una sola sombra, y corta. Con dos (una fina y otra amplia) quedaba
     mas bonito pero cada drop-shadow obliga a recalcular la silueta
     recortada de la hoja entera: con la CPU al limite se notaba. */
  filter: drop-shadow(0 2px 3px rgba(92,56,32,.34));
}

/* ---------------------------------------------------------------------
 * EL PAPEL  ·  textura artesanal y borde rasgado
 * -------------------------------------------------------------------
 *  El clip-path irregular lo genera SVG.bordeRasgado() y lo inyecta el
 *  JS en la variable --rasgado de cada pagina, con una semilla distinta:
 *  ninguna hoja se rasga igual que la anterior, pero cada una siempre
 *  se rasga igual (no cambia al repintar).
 * -------------------------------------------------------------------*/
.pagina {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  /* El recorte lo pone el JS en linea: clip-path: url(#rasgado-N),
     un trazo de curvas en coordenadas 0..1 que escala con la pagina. */
  background:
    radial-gradient(130% 90% at 18% 2%,  rgba(255,255,255,.66), rgba(255,255,255,0) 58%),
    radial-gradient(100% 80% at 98% 100%, rgba(180,145,105,.20), rgba(180,145,105,0) 62%),
    radial-gradient(60% 40% at 70% 30%,  rgba(212,178,140,.13), rgba(212,178,140,0) 70%),
    linear-gradient(158deg, #fdf9f2 0%, #f9f2e5 46%, #f3e8d7 100%);
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------------
 * EL PLIEGUE  ·  la penumbra permanente junto al lomo
 * -------------------------------------------------------------------
 *  Esta SIEMPRE, tambien con el libro parado. En un libro de verdad el
 *  papel se hunde hacia la costura y ahi nunca entra la misma luz que en
 *  el borde de fuera; sin esta sombra las hojas parecen folios sueltos.
 *  Va acompañada del grano del papel.
 * -------------------------------------------------------------------*/
.pagina::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  background-image:
    /* sombra del pliegue: fuerte pegada al lomo y desvanecida hacia dentro */
    linear-gradient(90deg,
      rgba(104,64,38,.44) 0%,
      rgba(104,64,38,.26) 2.5%,
      rgba(104,64,38,.13) 6%,
      rgba(104,64,38,.05) 11%,
      rgba(104,64,38,.015) 17%,
      rgba(104,64,38,0)   24%),
    /* leve oscurecido tambien en el canto exterior, como una hoja curvada */
    linear-gradient(270deg,
      rgba(120,84,52,.13) 0%,
      rgba(120,84,52,.04) 3%,
      rgba(120,84,52,0)   9%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)' opacity='.45'/%3E%3C/svg%3E");
  background-size: auto, auto, 120px 120px;
  /* Sin mix-blend-mode a proposito: una mezcla obliga al navegador a
     recomponer la hoja contra su fondo en cada fotograma del giro. Con
     opacidad normal el resultado es practicamente el mismo y el volteo
     se compone de una sola pasada en la GPU. */
  opacity: .62;
}

/* El dorso es la misma hoja vista del otro lado: el pliegue se le queda
   a la derecha y el canto exterior a la izquierda. */
.hoja__cara--dorso .pagina::before {
  background-image:
    linear-gradient(270deg,
      rgba(104,64,38,.40) 0%,
      rgba(104,64,38,.24) 2.5%,
      rgba(104,64,38,.12) 6%,
      rgba(104,64,38,.045) 11%,
      rgba(104,64,38,.015) 17%,
      rgba(104,64,38,0)   24%),
    linear-gradient(90deg,
      rgba(120,84,52,.13) 0%,
      rgba(120,84,52,.04) 3%,
      rgba(120,84,52,0)   9%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)' opacity='.45'/%3E%3C/svg%3E");
}

/* Foto de fondo tenue de algunas hojas (se pone con data-fondo) */
.pagina__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: .16;
  pointer-events: none;
}
/* velo de color encima de la foto, para que el texto siempre se lea */
.pagina__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Velo de la paleta sobre la foto: nunca por debajo de estos valores,
     o el texto deja de leerse sobre las zonas claras del olivar. */
  background:
    radial-gradient(120% 78% at 50% 50%, rgba(250,244,234,.62) 0%, rgba(250,244,234,.86) 62%, rgba(243,231,213,.95) 100%),
    linear-gradient(180deg, rgba(250,243,232,.62) 0%, rgba(247,238,224,.42) 44%, rgba(240,227,206,.78) 100%);
}

/* ---------------------------------------------------------------------
 * EL CONTENIDO DE CADA PAGINA
 * -------------------------------------------------------------------*/
.pagina__cuerpo {
  position: relative;
  z-index: 3;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* "safe center" centra el contenido cuando cabe y lo pega arriba cuando
     no cabe. Con un "center" a secas, una hoja con mucho texto se
     desbordaria por arriba y el principio quedaria fuera de alcance. */
  justify-content: center;
  justify-content: safe center;
  align-items: center;
  text-align: center;
  gap: var(--s2);
  padding: calc(var(--pw) * .105) calc(var(--pw) * .115) calc(var(--pw) * .11);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(160,120,80,.35) transparent;
}
.pagina__cuerpo::-webkit-scrollbar { width: 4px; }
.pagina__cuerpo::-webkit-scrollbar-thumb {
  background: rgba(160,120,80,.32); border-radius: 4px;
}
.pagina__cuerpo::-webkit-scrollbar-track { background: transparent; }

/* Las paginas impares dejan aire a la derecha para las cintas */
.libro-caja[data-modo="simple"] .pagina__cuerpo { padding-right: calc(var(--pw) * .155); }

/* ---------------------------------------------------------------------
 * AVISO DE QUE LA HOJA SIGUE HACIA ABAJO
 * -------------------------------------------------------------------
 *  Alguna hoja (la galeria, con sus 17 fotos) no cabe entera y hay que
 *  desplazarla. Sin avisar, el invitado se queda pensando que ahi acaba.
 *  Este velo se desvanece hacia el borde y se apaga solo al llegar abajo.
 * -------------------------------------------------------------------*/
.pagina__mas {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: calc(var(--pw) * .16);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: linear-gradient(180deg,
    rgba(248,241,229,0) 0%, rgba(248,241,229,.82) 62%, rgba(245,236,222,.96) 100%);
}
.pagina__mas::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(var(--pw) * .042);
  width: calc(var(--pw) * .042);
  height: calc(var(--pw) * .042);
  margin-left: calc(var(--pw) * -.021);
  border-right: 1.5px solid var(--terracota);
  border-bottom: 1.5px solid var(--terracota);
  transform: rotate(45deg);
  opacity: .65;
  animation: bajaFlecha 1.8s ease-in-out infinite;
}
@keyframes bajaFlecha {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(22%, 22%); }
}
.pagina--desplazable .pagina__mas { opacity: 1; }
.pagina--abajo .pagina__mas { opacity: 0; }

/* Numero de folio impreso en la esquina inferior de cada hoja */
.pagina__folio {
  position: absolute;
  bottom: calc(var(--pw) * .038);
  left: 0; right: 0;
  z-index: 4;
  text-align: center;
  font-size: var(--t-xxs);
  letter-spacing: .3em;
  color: var(--tinta-tenue);
  opacity: .55;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
 * RAMOS DE ESQUINA
 * -------------------------------------------------------------------*/
.ramo {
  position: absolute;
  z-index: 2;
  display: block;
  width: calc(var(--pw) * .42);
  height: calc(var(--pw) * .42);
  pointer-events: none;
  opacity: .92;
  /* Imagen unica, cacheada, que js/svg.js deja en --img-ramo. Antes esto
     eran ~300 nodos SVG por esquina (mas de mil por hoja). */
  background-image: var(--img-ramo);
  background-size: contain;
  background-repeat: no-repeat;
}
.ramo--ai { top: calc(var(--pw) * -.035); left:  calc(var(--pw) * -.035); }
.ramo--ad { top: calc(var(--pw) * -.035); right: calc(var(--pw) * -.035); transform: scaleX(-1); }
.ramo--bi { bottom: calc(var(--pw) * -.035); left:  calc(var(--pw) * -.035); transform: scaleY(-1); }
.ramo--bd { bottom: calc(var(--pw) * -.035); right: calc(var(--pw) * -.035); transform: scale(-1); }
.ramo--sutil { opacity: .5; width: calc(var(--pw) * .34); height: calc(var(--pw) * .34); }

/* ---------------------------------------------------------------------
 * LA ESQUINA QUE INVITA A PASAR LA HOJA
 * -------------------------------------------------------------------*/
.doblez {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 7;
  width: calc(var(--pw) * .19);
  height: calc(var(--pw) * .19);
  pointer-events: none;
  /* la sombra que deja la esquina levantada */
  background: radial-gradient(circle at 100% 100%,
    rgba(120,84,54,.26) 0%, rgba(120,84,54,.10) 42%, rgba(120,84,54,0) 72%);
  opacity: 0;
  transform: translate3d(0,0,0) scale(.75);
  transform-origin: 100% 100%;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.3,1);
}
/* el reverso del papel, doblado */
.doblez::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62%;
  height: 62%;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: linear-gradient(315deg, #f6eee0 0%, #ecdfc9 46%, #d9c4a4 100%);
  border-radius: 0 0 calc(var(--pw) * .006) 0;
}
.hoja--activa .doblez { opacity: .8; transform: scale(1); }
.libro-caja:hover .hoja--activa .doblez { transform: scale(1.16); opacity: 1; }

/* ---------------------------------------------------------------------
 * MARCADORES  ·  las cintas que sobresalen del borde derecho
 * -------------------------------------------------------------------
 *  Van por DEBAJO del bloque de hojas (z-index menor), asi solo asoma
 *  la lengueta, igual que los marcapaginas de un libro de verdad.
 * -------------------------------------------------------------------*/
.marcadores {
  position: absolute;
  top: 50%;
  right: calc(var(--sale) * -1);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: calc(var(--tab-h) * .13);
  /* Sin z-index propio a proposito: asi cada pieza puede colocarse por
     delante o por detras del bloque de hojas por separado (la cinta
     detras, para que parezca que sale de dentro; la etiqueta delante). */
  z-index: auto;
  --tab-h: clamp(38px, calc(var(--ph) * .072), 66px);
}

/* El BOTON ocupa solo la lengueta que sobresale del libro. Si ocupara
   tambien la parte que se mete debajo, su centro caeria bajo la hoja y
   el toque no llegaria nunca. */
.marcador {
  position: relative;
  display: block;
  width: var(--sale);
  height: var(--tab-h);
  padding: 0;
  color: var(--nude-claro);
  transform-origin: right center;
  transform: translate3d(0,0,0);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), color .3s ease;
}
/* zona de toque un poco mas generosa que la cinta */
.marcador::before {
  content: '';
  position: absolute;
  inset: -3px -8px -3px 0;
}
.marcador:hover,
.marcador:focus-visible { transform: translate3d(calc(var(--pw) * .022), 0, 0); }

/* La cinta: se prolonga hacia la izquierda para meterse bajo el libro.
   Dos capas con la misma cola de golondrina: la de abajo es el hilo
   dorado y la de arriba, la tela. */
.marcador__cinta {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(var(--pw) * -.09);
  z-index: 5;                     /* < .libro (10) => solo asoma la lengueta */
  background: var(--cinta-borde);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--sale) * .24) 50%, 100% 100%, 0 100%);
  opacity: .55;
  filter: drop-shadow(-1px 2px 3px rgba(0,0,0,.35));
}
.marcador__cinta::after {
  content: '';
  position: absolute;
  inset: 1px 1px 1px 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 46%),
    linear-gradient(165deg, var(--cinta-fondo) 0%, var(--terracota-profunda) 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--sale) * .24) 50%, 100% 100%, 0 100%);
}
.marcador .ico {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--tab-h) * .52);
  height: calc(var(--tab-h) * .52);
  stroke-width: 1.6;
  z-index: 6;
  filter: drop-shadow(0 1px 1px rgba(50,20,10,.5));
}

/* cinta activa: mas oscura, sobresale mas y el hilo dorado se enciende */
.marcador[aria-current="true"] {
  --cinta-fondo: var(--cinta-activa);
  color: #fff6e6;
  transform: translate3d(calc(var(--pw) * .038), 0, 0);
}
.marcador[aria-current="true"] .ico { stroke-width: 1.9; }
.marcador[aria-current="true"] .marcador__cinta {
  background: var(--dorado);
  opacity: 1;
}

/* etiqueta flotante (solo en escritorio, al pasar el raton).
   z-index alto: tiene que verse POR ENCIMA de la hoja. */
.marcador__texto {
  position: absolute;
  z-index: 30;
  right: calc(100% + 6px);
  top: 50%;
  transform: translate(6px, -50%) scale(.94);
  transform-origin: right center;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nude-claro);
  background: rgba(75,37,24,.94);
  border: 1px solid rgba(226,200,145,.4);
  border-radius: 3px;
  padding: 5px 9px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .marcador:hover .marcador__texto,
  .marcador:focus-visible .marcador__texto {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
  }
}

/* ---------------------------------------------------------------------
 * PIE  ·  progreso y flechas
 * -------------------------------------------------------------------*/
.pie {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + clamp(10px, calc(var(--pw) * .045), 22px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, calc(var(--pw) * .04), 20px);
  z-index: 20;
  color: var(--nude);
}

.pie__flecha {
  display: grid;
  place-items: center;
  width: clamp(32px, calc(var(--pw) * .098), 42px);
  height: clamp(32px, calc(var(--pw) * .098), 42px);
  border-radius: 50%;
  border: 1px solid rgba(226,200,145,.36);
  color: var(--nude-claro);
  background: rgba(255,255,255,.05);
  transition: transform .25s ease, background-color .25s ease, opacity .25s ease;
}
.pie__flecha .ico { width: 46%; height: 46%; }
.pie__flecha--prev .ico { transform: scaleX(-1); }
.pie__flecha:hover { background: rgba(226,200,145,.16); transform: scale(1.08); }
.pie__flecha[disabled] { opacity: .25; pointer-events: none; }

.pie__progreso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: clamp(90px, calc(var(--pw) * .34), 150px);
}
.pie__titulo {
  font-size: clamp(10px, calc(var(--pw) * .032), 13px);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dorado-claro);
  white-space: nowrap;
}
.pie__barra {
  position: relative;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: rgba(226,200,145,.22);
  overflow: hidden;
}
.pie__barra span {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--avance, 0));
  background: linear-gradient(90deg, var(--dorado-oscuro), var(--dorado-claro));
  transition: transform .5s cubic-bezier(.3,.8,.3,1);
}
.pie__folio {
  font-size: clamp(9px, calc(var(--pw) * .028), 12px);
  letter-spacing: .22em;
  color: rgba(231,216,197,.6);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
 * PANTALLAS BAJAS (movil tumbado, portatiles muy anchos y bajos)
 * -------------------------------------------------------------------
 *  Cada pixel de alto cuenta: el pie se recoge en una sola linea, las
 *  flechas encogen y el titulo de seccion se va al lado del folio.
 * -------------------------------------------------------------------*/
.pantalla-compacta .pie {
  top: calc(100% + 8px);
  gap: 10px;
}
.pantalla-compacta .pie__progreso { flex-direction: row; align-items: center; gap: 9px; }
.pantalla-compacta .pie__barra { width: clamp(50px, calc(var(--pw) * .28), 110px); }
.pantalla-compacta .pie__flecha { width: 30px; height: 30px; }
.pantalla-compacta .pie__titulo { font-size: 10px; letter-spacing: .2em; }
.pantalla-compacta .audio__boton { width: 42px; height: 42px; }
.pantalla-compacta .audio__panel-int { width: min(52vw, 200px); padding: 9px 12px 11px; }

/* ---------------------------------------------------------------------
 * PISTA DE APERTURA  ·  se ve solo en la portada
 * -------------------------------------------------------------------*/
.pista {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pw) * .05);
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-xs);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--terracota-oscura);
  opacity: .8;
  white-space: nowrap;
  pointer-events: none;
  animation: latidoPista 2.6s ease-in-out infinite;
  /* halo de papel para que se lea aunque caiga sobre un ramo */
  text-shadow:
     0 0 6px rgba(251,246,238,.95),  0 0 12px rgba(251,246,238,.85),
     1px 1px 0 rgba(251,246,238,.9), -1px -1px 0 rgba(251,246,238,.9);
}
.pista .ico { width: 1.15em; height: 1.15em; }
/* en cuanto se abre el libro, la pista sobra */
.libro--abierto .pista { opacity: 0; animation: none; }
@keyframes latidoPista {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .55; }
  50%      { transform: translateX(-50%) translateY(-3px); opacity: .95; }
}

/* ---------------------------------------------------------------------
 * MODO SIN MOVIMIENTO  ·  el volteo pasa a ser un fundido
 * -------------------------------------------------------------------*/
.sin-movimiento .hoja {
  transform: none !important;
  transition: opacity .22s linear;
}
.sin-movimiento .hoja--volteada { opacity: 0; visibility: hidden; }
.sin-movimiento .hoja__cara::after { display: none; }
.sin-movimiento .pista { animation: none; opacity: .8; }
.sin-movimiento .libro-canto { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .hoja { transform: none !important; transition: opacity .2s linear; }
  .hoja--volteada { opacity: 0; visibility: hidden; }
  .hoja__cara::after { display: none; }
}