/* ============================================================
   EL LIBRO — tapa estilo "Adventure Book" + páginas scrapbook
   ============================================================ */

#libroWrap {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vmin;
  opacity: 0;
  transition: opacity 1.4s ease;
}
#libroWrap.visible { opacity: 1; }

/* ============================================================
   Presentación con luces al aparecer el libro (~6 s)
   ============================================================ */
#presentacion {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: none;
  pointer-events: none;
  overflow: hidden;
}
#presentacion.activo { display: block; }

.pres-rayos,
.pres-nucleo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pres-rayos {
  width: 230vmax;
  height: 230vmax;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 245, 210, 0) 0deg 6deg,
    rgba(255, 245, 210, 0.16) 6deg 7deg
  );
  opacity: 0;
  animation: presRayos 6s ease-out forwards;
}
.pres-nucleo {
  width: 32vmax;
  height: 32vmax;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #fff 0%,
    rgba(255, 238, 180, 0.9) 24%,
    rgba(255, 205, 130, 0.35) 54%,
    transparent 72%
  );
  opacity: 0;
  filter: blur(2px);
  animation: presNucleo 6s ease-out forwards;
}
.pres-destellos span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px 3px rgba(255, 245, 210, 0.9);
  opacity: 0;
  animation: presDestello 6s ease-out forwards;
}
.pres-destellos span:nth-child(1)  { top: 30%; left: 22%; animation-delay: 0.6s; }
.pres-destellos span:nth-child(2)  { top: 24%; left: 70%; animation-delay: 1.0s; }
.pres-destellos span:nth-child(3)  { top: 62%; left: 18%; animation-delay: 0.9s; }
.pres-destellos span:nth-child(4)  { top: 68%; left: 78%; animation-delay: 1.4s; }
.pres-destellos span:nth-child(5)  { top: 18%; left: 45%; animation-delay: 1.2s; }
.pres-destellos span:nth-child(6)  { top: 80%; left: 50%; animation-delay: 1.6s; }
.pres-destellos span:nth-child(7)  { top: 44%; left: 12%; animation-delay: 1.8s; }
.pres-destellos span:nth-child(8)  { top: 50%; left: 88%; animation-delay: 1.1s; }
.pres-destellos span:nth-child(9)  { top: 35%; left: 60%; animation-delay: 2.1s; }
.pres-destellos span:nth-child(10) { top: 72%; left: 35%; animation-delay: 1.9s; }

@keyframes presNucleo {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(2.8); }
  35%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}
@keyframes presRayos {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0.4); }
  18%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(55deg) scale(1); }
}
@keyframes presDestello {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 1; transform: scale(1.4); }
}

/* La portada brilla mientras dura la presentación */
body.presentando .page-cover {
  animation: portadaBrillo 6s ease-out;
}
@keyframes portadaBrillo {
  0% { filter: brightness(2.4) saturate(1.2); }
  40% { filter: brightness(1.4); }
  100% { filter: brightness(1); }
}

/* Portada que crece desde pequeña, con las letras apareciendo */
.pres-portada {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(72vmin, 480px);
  aspect-ratio: 1.4 / 1;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background: radial-gradient(ellipse at 60% 38%, #4a2c1c 0%, #3a2113 55%, #2a1810 100%);
  box-shadow: 0 0 90px rgba(255, 220, 150, 0.55), 0 30px 90px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  animation: presCrecer 6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
/* lomo rojo */
.pres-portada::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 9%;
  background: linear-gradient(90deg, #7a1f16, #962a1e 60%, #6e1c14);
  box-shadow: inset -6px 0 12px rgba(0, 0, 0, 0.4);
}
.pres-oval {
  position: relative;
  z-index: 2;
  width: 80%;
  height: 82%;
  margin-left: 6%;
  border: 2px solid rgba(214, 138, 74, 0.55);
  border-radius: 50% / 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1%;
  text-align: center;
  font-family: "Permanent Marker", cursive;
  line-height: 1.02;
}
.pres-sub { font-size: clamp(0.55rem, 1.9vmin, 1rem); letter-spacing: 1px; margin-bottom: 2%; }
.pres-t1 { font-size: clamp(1rem, 4vmin, 2.4rem); }
.pres-t2 { font-size: clamp(1.4rem, 5.4vmin, 3.2rem); }
.pres-t3 { font-size: clamp(0.7rem, 2.6vmin, 1.5rem); }
.pres-globo { font-size: clamp(1.4rem, 5vmin, 2.6rem); margin-top: 2%; }

.pres-portada .pl {
  display: inline-block;
  opacity: 0;
  text-shadow: 0 0 10px rgba(255, 230, 170, 0.5);
  animation: presLetra 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes presCrecer {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.12) rotate(-6deg); }
  16%  { opacity: 1; }
  46%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  86%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes presLetra {
  0%   { opacity: 0; transform: translateY(8px) scale(0.3); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   Cierre del libro (contratapa centrada al final)
   ============================================================ */
#cierre {
  position: fixed;
  inset: 0;
  z-index: 13;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  background: radial-gradient(circle at center, rgba(14, 10, 18, 0.55), rgba(0, 0, 0, 0.92));
  perspective: 1800px;
  cursor: pointer;
}
#cierre.activo { display: flex; }

.cierre-portada {
  width: min(72vmin, 480px);
  aspect-ratio: 1.4 / 1;
  position: relative;
  border-radius: 12px;
  background: radial-gradient(ellipse at 55% 42%, #4a2c1c 0%, #3a2113 55%, #2a1810 100%);
  box-shadow: -12px 18px 50px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: left center;
  animation: cerrarLibro 1.5s cubic-bezier(0.45, 0.05, 0.2, 1) forwards;
  backface-visibility: hidden;
}
/* lomo rojo */
.cierre-portada::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 9%;
  background: linear-gradient(90deg, #7a1f16, #962a1e 60%, #6e1c14);
  box-shadow: inset -6px 0 12px rgba(0, 0, 0, 0.4);
  border-radius: 12px 0 0 12px;
}
.cierre-oval {
  width: 80%;
  height: 82%;
  margin-left: 6%;
  border: 2px solid rgba(214, 138, 74, 0.5);
  border-radius: 50% / 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4%;
  text-align: center;
}
.cierre-corazon {
  font-size: clamp(2rem, 7vmin, 3.4rem);
  color: #ff7d9c;
  text-shadow: 0 0 24px rgba(255, 125, 156, 0.6);
  animation: latirCierre 1.4s ease-in-out infinite;
  animation-delay: 1.4s;
}
.cierre-nombres {
  font-family: "Permanent Marker", cursive;
  font-size: clamp(1rem, 3.6vmin, 2rem);
  color: #e8c39a;
  letter-spacing: 1px;
}
.cierre-fin {
  font-family: "Caveat", cursive;
  font-size: clamp(0.9rem, 2.8vmin, 1.4rem);
  color: rgba(232, 195, 154, 0.8);
}
.cierre-hint {
  font-family: "Patrick Hand", cursive;
  color: rgba(255, 217, 168, 0.6);
  font-size: 0.9rem;
  opacity: 0;
  animation: aparecerHint 0.6s ease 1.6s forwards;
}

@keyframes cerrarLibro {
  0%   { transform: rotateY(-115deg) scale(0.97); opacity: 0.25; box-shadow: -2px 8px 20px rgba(0,0,0,0.5); }
  65%  { transform: rotateY(0deg) scale(1); opacity: 1; }
  78%  { transform: rotateY(0deg) scale(1.015); } /* golpecito al cerrar */
  100% { transform: rotateY(0deg) scale(1); opacity: 1; box-shadow: -12px 18px 50px rgba(0,0,0,0.7); }
}
@keyframes latirCierre {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
@keyframes aparecerHint {
  to { opacity: 1; }
}

#flipbook {
  /* Las dimensiones reales las fija StPageFlip; aquí solo un máximo */
  width: min(94vw, 1000px);
  height: min(70vw, 660px);
  max-height: 88vh;
}

/* Celular: una sola página, proporción de hoja, que llene la pantalla */
@media (max-width: 920px) {
  #flipbook {
    width: min(96vw, calc(92vh * 1.43));
    height: auto;
    aspect-ratio: 1.43 / 1;
    max-height: 92vh;
  }
}

/* Modo de una sola página (celular o sin librería) */
#flipbook.simple {
  position: relative;
  width: min(96vw, calc(90vh * 1.43));
  height: auto;
  aspect-ratio: 1.43 / 1;
  max-height: 92vh;
}
#flipbook.simple .page {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: scale(0.98);
  pointer-events: none;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
#flipbook.simple .page.activa {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* ---------------- Página base ---------------- */
.page {
  width: 100%;
  height: 100%;
  background: #fbf7ef;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  color: #3a2a18;
  -webkit-font-smoothing: antialiased;
}

/* textura sutil de papel */
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.012) 0,
    rgba(0, 0, 0, 0.012) 1px,
    transparent 1px,
    transparent 4px
  );
}

/* ============================================================
   TAPA — estilo "Our Adventure Book"
   ============================================================ */
.page-cover {
  background:
    radial-gradient(ellipse at 60% 40%, #4a2c1c 0%, #3a2113 55%, #2a1810 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-cover::before {
  /* veta de madera/cuero */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.16) 0,
    rgba(0, 0, 0, 0.16) 2px,
    transparent 2px,
    transparent 7px
  );
  opacity: 0.5;
}
/* lomo rojo a la izquierda */
.page-cover::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 9%;
  background: linear-gradient(90deg, #7a1f16, #962a1e 60%, #6e1c14);
  box-shadow: inset -6px 0 12px rgba(0, 0, 0, 0.4);
}

.cover-oval {
  position: relative;
  z-index: 2;
  width: 78%;
  height: 80%;
  margin-left: 6%;
  border: 2px solid rgba(214, 138, 74, 0.55);
  border-radius: 50% / 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5%;
  box-shadow: 0 0 0 6px rgba(214, 138, 74, 0.12);
}

.cover-sub {
  font-family: "Permanent Marker", cursive;
  font-size: clamp(0.7rem, 2.2vmin, 1.3rem);
  letter-spacing: 2px;
  color: #e8c39a;
  opacity: 0.85;
}

.cover-titulo {
  font-family: "Permanent Marker", cursive;
  line-height: 1.02;
  text-align: center;
  font-size: clamp(1.6rem, 7vmin, 4.6rem);
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.cover-titulo .w { display: block; }
.cover-titulo .w span { display: inline-block; } /* letras */

.cover-globo {
  margin-top: 2%;
  font-size: clamp(1.8rem, 7vmin, 4rem);
  position: relative;
}
.cover-globo::after {
  /* tapa de frasco */
  content: "";
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 16%;
  background: #d8c39a;
  border-radius: 3px;
}

/* ============================================================
   PÁGINAS DE SCRAPBOOK
   ============================================================ */
.sb {
  --kraft: #cdb38a;
  --acento: #8a5a2b;
  --titulo: #3a2a18;
  --tape: rgba(180, 210, 255, 0.55);
  --menta: #e9f1e2;
  padding: 0;
}

/* fondo dividido (mitad papel / mitad kraft), como en las fotos */
.sb-fondo {
  position: absolute;
  inset: 0;
}
.sb-fondo .lado-kraft {
  position: absolute;
  top: -3%;
  bottom: -3%;
  width: var(--kw, 62%);
  background:
    linear-gradient(135deg, var(--kraft), color-mix(in srgb, var(--kraft) 80%, #000 6%));
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.08);
}
.lay-izq .sb-fondo .lado-kraft { right: -2%; clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
.lay-der .sb-fondo .lado-kraft { left: -2%; clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%); }

/* color sólido suave en el otro lado (según plantilla) */
.sb-fondo .lado-color {
  position: absolute;
  inset: 0;
  background: var(--menta);
}

/* Plantillas (paletas profesionales y armoniosas) */
.pl-kraft   { --kraft:#cdb38a; --acento:#8a5a2b; --menta:#f6eedd; --tape:#e6cfa0; --titulo:#4a3320; }
.pl-menta   { --kraft:#cdb38a; --acento:#4f7d52; --menta:#e4efe0; --tape:#bcd9a8; --titulo:#3a4f32; }
.pl-rosa    { --kraft:#dcae93; --acento:#c25f86; --menta:#fbe7ef; --tape:#f3c6d8; --titulo:#7a3450; }
.pl-cielo   { --kraft:#c9b491; --acento:#3f6e9c; --menta:#e3effb; --tape:#bcd9f0; --titulo:#2f4f6e; }
.pl-crema   { --kraft:#d8c096; --acento:#a07b3b; --menta:#fbf2e0; --tape:#efe0b8; --titulo:#5a4320; }
.pl-durazno { --kraft:#dab693; --acento:#c2683b; --menta:#fde7da; --tape:#f6cdae; --titulo:#8a4324; }
.pl-lavanda { --kraft:#cbb79a; --acento:#7a5aa8; --menta:#efe7fa; --tape:#d6c6f0; --titulo:#4f3a7a; }
.pl-coral   { --kraft:#dcb295; --acento:#d2604f; --menta:#ffe8e2; --tape:#f6c3b6; --titulo:#9a3a2a; }

/* Columna de texto */
.sb-texto {
  position: absolute;
  top: 5%;
  bottom: 5%;
  width: 30%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 2.2%;
  overflow: hidden;
}
.lay-izq .sb-texto { left: 3.5%; }
.lay-der .sb-texto { right: 3.5%; text-align: right; align-items: flex-end; }

.sb-titulo {
  margin: 0;
  line-height: 1;
  font-size: clamp(0.9rem, 3.1vmin, 1.8rem);
  color: var(--titulo);
  flex-shrink: 0;
  overflow-wrap: anywhere;
}
.sb-titulo .w { display: block; }
/* estilos mezclados de palabra (scrapbook) */
.sb-titulo .f-script { font-family: "Caveat", cursive; font-weight: 700; }
.sb-titulo .f-marker { font-family: "Permanent Marker", cursive; }
.sb-titulo .f-tall   { font-family: "Amatic SC", cursive; font-weight: 700; letter-spacing: 1px; }
.sb-titulo .f-hand   { font-family: "Patrick Hand", cursive; }
.sb-titulo .f-serif  { font-family: "Pacifico", cursive; }
.sb-titulo .grande   { font-size: 1.18em; }
.sb-titulo .acento   { color: var(--acento); }

.sb-fecha {
  align-self: flex-start;
  flex-shrink: 0;
  display: inline-block;
  font-family: "Patrick Hand", cursive;
  font-weight: bold;
  font-size: clamp(0.7rem, 2.1vmin, 1.1rem);
  color: #2a2118;
  background: var(--tape);
  padding: 3px 14px;
  transform: rotate(-2.5deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.lay-der .sb-fecha { align-self: flex-end; transform: rotate(2deg); }

.sb-desc {
  margin: 0;
  font-family: "Kalam", "Patrick Hand", cursive;
  font-size: clamp(0.6rem, 1.95vmin, 0.98rem);
  line-height: 1.42;
  color: #463524;
  /* tarjeta tipo nota para que la descripción no se pierda */
  background: rgba(255, 252, 245, 0.85);
  padding: 5% 6%;
  border-radius: 4px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.13);
  transform: rotate(-1.2deg);
  position: relative;
  /* se ajusta al espacio disponible; si es muy larga, scroll (no se corta) */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.lay-der .sb-desc { transform: rotate(1.3deg); text-align: left; }
/* cinta sobre la nota */
.sb-desc::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 18%;
  width: 30%;
  height: 16px;
  background: var(--tape);
  opacity: 0.8;
  transform: rotate(-3deg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.sb-lugar {
  display: inline-block;
  flex-shrink: 0;
  font-family: "Patrick Hand", cursive;
  font-size: clamp(0.68rem, 2vmin, 0.95rem);
  color: #fff;
  background: var(--acento);
  padding: 2px 12px 2px 10px;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* Zona de fotos */
.sb-fotos {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 66%;
  z-index: 2;
}
.lay-izq .sb-fotos { right: 0; }
.lay-der .sb-fotos { left: 0; }

.polaroid {
  position: absolute;
  background: #fff;
  padding: 3.2% 3.2% 11% 3.2%;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.28);
  transform: rotate(var(--r, 0deg));
  width: var(--w, 44%);
}
/* cinta adhesiva sobre cada foto (look de álbum) */
.polaroid::before {
  content: "";
  position: absolute;
  top: -5%;
  left: 50%;
  width: 38%;
  height: 13%;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--tape, rgba(255, 255, 255, 0.6));
  opacity: 0.72;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.polaroid img,
.polaroid video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.92;
  object-fit: cover;
  background: #e7e2d8;
}
.polaroid figcaption {
  font-family: "Shadows Into Light", cursive;
  font-size: clamp(0.5rem, 1.7vmin, 0.95rem);
  line-height: 1.1;
  text-align: center;
  color: #444;
  margin-top: 4%;
  max-height: 2.3em;
  overflow: hidden;
}

/* Garabatos decorativos */
.doodle {
  position: absolute;
  z-index: 1;
  color: var(--acento);
  opacity: 0.7;
  font-family: "Patrick Hand", cursive;
  pointer-events: none;
}

/* ---------------- Página de propósito ---------------- */
.page-purpose {
  background: #d7c19a;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 9%;
}
.page-purpose::before {
  background-image: repeating-linear-gradient(
    45deg, rgba(0,0,0,0.02) 0, rgba(0,0,0,0.02) 1px, transparent 1px, transparent 5px);
}
.purpose-inner { position: relative; z-index: 2; max-width: 86%; }
.purpose-titulo {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(1.6rem, 6vmin, 3.4rem);
  color: #5a3a1c;
  margin-bottom: 4%;
}
.purpose-texto {
  font-family: "Kalam", cursive;
  font-size: clamp(0.85rem, 2.8vmin, 1.3rem);
  line-height: 1.7;
  color: #4a3320;
}
.purpose-corazon {
  margin-top: 5%;
  font-size: clamp(1.4rem, 5vmin, 2.4rem);
  color: #b5557e;
}

/* ---------------- Página "esperando" ---------------- */
.page-esperando {
  background: #eef2f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8%;
  gap: 4%;
}
.esperando-marco {
  width: 46%;
  aspect-ratio: 1 / 1.1;
  border: 3px dashed #b9c4cf;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2rem, 8vmin, 4rem);
  color: #b9c4cf;
}
.esperando-texto {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(1.4rem, 5vmin, 2.6rem);
  color: #6b7886;
}
.esperando-sub {
  font-family: "Patrick Hand", cursive;
  font-size: clamp(0.8rem, 2.6vmin, 1.05rem);
  color: #97a3af;
}

/* Página decorativa de cierre (para centrar la contratapa) */
.page-fin {
  background: #e7d9bd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4%;
  text-align: center;
}
.fin-corazon {
  font-size: clamp(2rem, 8vmin, 4rem);
  color: #b5557e;
}
.fin-texto {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(1.1rem, 4vmin, 2.1rem);
  color: #6b4a2a;
  max-width: 70%;
}

/* Número de página */
.folio {
  position: absolute;
  bottom: 3%;
  z-index: 6;
  font-family: "Patrick Hand", cursive;
  font-size: clamp(0.6rem, 1.7vmin, 0.95rem);
  color: rgba(40, 30, 20, 0.45);
  pointer-events: none;
}
.folio.izq { left: 5%; }
.folio.der { right: 5%; }

/* Sombra interna de lomo para todas las páginas (efecto libro) */
.page:not(.page-cover) {
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.05);
}