/* ═══════════════════════════════════════════════════════════
   BOOK 3D — Luxury Flipbook Engine
   ═══════════════════════════════════════════════════════════ */

#book-container {
  position: fixed;
  inset: 0;
  /* Table Flat-lay background: Very dark wood/marble feel with center spotlight */
  background-color: #0f0a08;
  background-image: 
    radial-gradient(circle at center, rgba(74, 48, 36, 0.4) 0%, rgba(9, 8, 7, 1) 100%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2000px;
  overflow: hidden;
  z-index: 10;
}

/* Base shadow on the table to ground the physical book */
#book-container::after {
  content: '';
  position: absolute;
  width: 80vw;
  max-width: 400px;
  height: 75vh;
  max-height: 700px;
  background: transparent;
  box-shadow: 25px 25px 50px rgba(0,0,0,0.9), 0 0 30px rgba(0,0,0,0.6);
  border-radius: 2px 12px 12px 2px;
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════
   ENVELOPE 3D (PRIMERA ETAPA)
   ═══════════════════════════════════════════════════════════ */
#envelope {
  position: relative;
  /* Mantiene una proporción física estricta de 1 : 1.4 */
  width: min(82vw, 55vh);
  height: min(114.8vw, 77vh); /* 82 * 1.4 = 114.8 */
  margin: 0 auto;
  transform-style: preserve-3d;
  z-index: 5;
  scale: 1;
  translate: 0 0;
  transition: scale 2.5s cubic-bezier(0.25, 1, 0.5, 1), translate 2.5s cubic-bezier(0.25, 1, 0.5, 1); /* For final zoom */
}
#envelope.zoomed {
  scale: 1.15;
  translate: 0 2%;
}

#book {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  z-index: 0; /* Inside the envelope (Behind flaps, front of back) */
}
/* Prevenir FOUC: Ocultar cualquier desbordamiento de las páginas antes de que StPageFlip inicialice */
#book:not([data-initialized="true"]) {
  overflow: hidden;
}
#book.hidden-inside { pointer-events: none; }
#book.revealed { 
  pointer-events: auto; 
  z-index: 10; /* Al estar abierto, el libro pasa a primer plano */
}

/* Flaps (Solapas) */
.flap {
  position: absolute;
  background: linear-gradient(135deg, #F4D675 0%, #C9A227 100%);
  /* Usamos drop-shadow omnidireccional para simular un borde oscuro en todos los cortes de clip-path */
  filter: drop-shadow(0 0 2px rgba(90, 50, 10, 0.9)) drop-shadow(0 0 12px rgba(0,0,0,0.5));
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  pointer-events: auto;
}
/* Añadir una textura sutil de papel */
.flap::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 4px 4px;
  pointer-events: none;
  border-radius: inherit;
}

/* Al abrirse, ya no bloquean toques */
.flap.opened {
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(90, 50, 10, 0.4)) drop-shadow(0 -5px 15px rgba(0,0,0,0.4)); /* Sombra invertida al descansar sobre la mesa */
}

/* La base interior del sobre (la que queda en sombra detrás) */
.flap-back {
  inset: 0;
  background: linear-gradient(135deg, #C9A227 0%, #8A6914 100%);
  z-index: 0;
  /* Sombra proyectada exterior, y sombra interna para hundirlo visualmente */
  box-shadow: 25px 25px 50px rgba(0,0,0,0.9), 0 0 30px rgba(0,0,0,0.6), inset 0 0 50px rgba(0,0,0,0.6);
  pointer-events: none;
}
.flap-top {
  top: 0; left: 0; right: 0; height: 55%;
  transform-origin: top;
  z-index: 4;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(135deg, #F4D675 0%, #C9A227 50%, #8A6914 100%);
}
.flap-bottom {
  bottom: 0; left: 0; right: 0; height: 55%;
  transform-origin: bottom;
  z-index: 3;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  background: linear-gradient(-45deg, #F4D675 0%, #C9A227 50%, #8A6914 100%);
}
.flap-left {
  top: 0; bottom: 0; left: 0; width: 55%;
  transform-origin: left;
  z-index: 1;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: linear-gradient(-135deg, #F4D675 0%, #C9A227 50%, #8A6914 100%);
}
.flap-right {
  top: 0; bottom: 0; right: 0; width: 55%;
  transform-origin: right;
  z-index: 2;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
  background: linear-gradient(45deg, #F4D675 0%, #C9A227 50%, #8A6914 100%);
}

/* Flap Opened States */
.flap.opened.flap-top { transform: rotateX(180deg) translateZ(10px); }
.flap.opened.flap-bottom { transform: rotateX(-180deg) translateZ(10px); }
.flap.opened.flap-left { transform: rotateY(-180deg) translateZ(10px); }
.flap.opened.flap-right { transform: rotateY(180deg) translateZ(10px); }

/* ─── Sello Físico Premium / Wax Seal ─── */

/* Contenedor del anillo + sello */
.seal-ring-wrapper {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateZ(15px);
  z-index: 100;
  width: 155px; height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ─── BASE OSCURA del aro (estática, opaca) ─── */
.seal-ring-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #1A0E08 0deg, #241812 45deg, #2A1208 90deg,
    #1A0E08 135deg, #241812 180deg, #2A1208 225deg,
    #1A0E08 270deg, #241812 315deg, #1A0E08 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 38%, black 39%, black 50%, transparent 51%);
  mask: radial-gradient(circle, transparent 38%, black 39%, black 50%, transparent 51%);
  z-index: 0;
}

/* ─── ONDA LUMINOSA PRINCIPAL (gira — alta visibilidad) ─── */
.seal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #2A1208 20deg,
    #5A2608 50deg,
    #8A6914 75deg,
    #C9A227 95deg,
    #D88A2B 110deg,
    #E8A23A 125deg,
    #F4D675 140deg,
    #FFF1A8 152deg,
    #FFFFFF 165deg,
    #FFF1A8 178deg,
    #F4D675 190deg,
    #E8A23A 205deg,
    #D88A2B 220deg,
    #C9A227 235deg,
    #8A6914 255deg,
    #5A2608 280deg,
    #2A1208 310deg,
    transparent 340deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 38%, black 39%, black 50%, transparent 51%);
  mask: radial-gradient(circle, transparent 38%, black 39%, black 50%, transparent 51%);
  animation: sealRingRotate 4.5s linear infinite;
  filter: drop-shadow(0 0 6px rgba(244, 214, 117, 0.6));
  z-index: 1;
}

/* ─── REFLEJO ESPECULAR (gira en reversa, estrecho y brillante) ─── */
.seal-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    transparent 140deg,
    rgba(201,162,39, 0.2) 148deg,
    rgba(244,214,117, 0.5) 155deg,
    rgba(255,255,255, 0.85) 163deg,
    rgba(255,255,255, 1.0) 168deg,
    rgba(255,255,255, 0.85) 173deg,
    rgba(244,214,117, 0.5) 180deg,
    rgba(201,162,39, 0.2) 188deg,
    transparent 196deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 38%, black 39%, black 50%, transparent 51%);
  mask: radial-gradient(circle, transparent 38%, black 39%, black 50%, transparent 51%);
  animation: sealRingRotate 3s linear infinite reverse;
  z-index: 2;
}

/* ─── HALO / GLOW exterior (acompaña la onda) ─── */
.seal-ring-wrapper::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 100deg,
    rgba(232,162,58, 0.1) 120deg,
    rgba(244,214,117, 0.3) 140deg,
    rgba(255,241,168, 0.45) 155deg,
    rgba(255,255,255, 0.5) 165deg,
    rgba(255,241,168, 0.45) 175deg,
    rgba(244,214,117, 0.3) 190deg,
    rgba(232,162,58, 0.1) 210deg,
    transparent 230deg,
    transparent 360deg
  );
  animation: sealRingRotate 4.5s linear infinite;
  filter: blur(8px);
  z-index: 0;
}

@keyframes sealRingRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ─── El sello central — agrandado ─── */
#seal {
  position: relative;
  width: 118px; height: 118px;
  background: radial-gradient(circle at 30% 30%, #F4D675 0%, #C9A227 40%, #8A6914 80%, #4A3024 100%);
  border-radius: 48% 52% 47% 53% / 54% 46% 54% 46%;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.4),
    inset 2px 2px 8px rgba(255,255,255,0.5),
    0 6px 22px rgba(0,0,0,0.5),
    0 2px 10px rgba(201, 162, 39, 0.3);
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.6s ease, box-shadow 0.6s ease, filter 0.3s ease;
  z-index: 3;
}

#seal:hover {
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.4),
    inset 2px 2px 8px rgba(255,255,255,0.5),
    0 6px 22px rgba(0,0,0,0.5),
    0 0 18px rgba(244, 214, 117, 0.5),
    0 0 35px rgba(201, 162, 39, 0.2);
  filter: brightness(1.1);
}

#seal::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 241, 168, 0.5);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#seal .seal-content {
  font-family: var(--font-serif);
  color: #4A3024;
  font-size: 1.5rem;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(255, 241, 168, 0.4), -1px -1px 1px rgba(0,0,0,0.2);
  z-index: 2;
  letter-spacing: 1px;
}

/* Seal Breaking Animation */
#seal.broken {
  transform: translateY(100px) scale(0.9) rotate(25deg);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#seal.broken ~ .seal-ring,
.seal-ring-wrapper:has(#seal.broken) .seal-ring {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.seal-ring-wrapper:has(#seal.broken)::before,
.seal-ring-wrapper:has(#seal.broken)::after {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* --- AUTO-TRIGGER SEAL ANIMATION --- */
.seal-ring-wrapper.seal-auto-zoom {
  animation: sealAutoZoom 420ms cubic-bezier(.2,.9,.25,1) forwards;
}

.seal-halo-burst {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,214,117,0.22), rgba(201,162,39,0.10), rgba(74,48,36,0));
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  z-index: -1;
}

.seal-ring-wrapper.seal-auto-zoom .seal-halo-burst {
  animation: sealHaloBurst 420ms ease-out forwards;
}

@keyframes sealAutoZoom {
  0%   { transform: translate(-50%, -50%) translateZ(15px) scale(1); }
  45%  { transform: translate(-50%, -50%) translateZ(15px) scale(1.18); }
  75%  { transform: translate(-50%, -50%) translateZ(15px) scale(0.98); }
  100% { transform: translate(-50%, -50%) translateZ(15px) scale(1); }
}

@keyframes sealHaloBurst {
  0%   { opacity: 0; transform: scale(0.8); }
  40%  { opacity: 0.28; transform: scale(1.18); box-shadow: 0 12px 36px rgba(74,48,36,0.24), 0 0 28px rgba(201,162,39,0.18); }
  100% { opacity: 0; transform: scale(1.4); box-shadow: 0 0 0 rgba(74,48,36,0); }
}

/* ─── Responsive seal ─── */
@media (max-width: 600px) {
  .seal-ring-wrapper {
    width: 125px; height: 125px;
  }
  #seal {
    width: 95px; height: 95px;
  }
  #seal .seal-content {
    font-size: 1.3rem;
  }
}

/* Simulating book thickness (canto dorado/crema) - Applies to the wrapper now */
#envelope::before {
  content: '';
  position: absolute;
  top: 4px; left: 0; right: -4px; bottom: -4px;
  background: linear-gradient(135deg, var(--gold-dark), var(--brown-dark));
  border-radius: 2px 12px 12px 2px;
  z-index: -1;
  box-shadow: inset -2px -2px 5px rgba(255,255,255,0.1);
}


.page {
  background: var(--cream);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* --- CANTO FÍSICO DORADO ANIMADO --- */
.page::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  
  /* Gradiente metálico dorado intenso */
  background: linear-gradient(60deg, #8A6914 0%, #C9A227 35%, #fffde7 50%, #F4D675 65%, #8A6914 100%);
  background-size: 250% 250%;
  animation: cantoShine 3s ease-in-out infinite;

  /* Máscara XOR para dejar ÚNICAMENTE un borde de 4px pegado al extremo */
  padding: 4px;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

@keyframes cantoShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Page Materials */
.page-dark {
  background: var(--black-rich);
  border: 1px solid var(--gold-dark);
}

.page-cover {
  background: linear-gradient(135deg, var(--brown) 0%, var(--brown-medium) 100%);
  border: 2px solid var(--gold-dark);
  box-shadow: inset 8px 0 20px rgba(0,0,0,0.5), 
              10px 10px 30px rgba(0,0,0,0.8);
}


.page-paper {
  background: var(--cream);
  background-image: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* ─── CONTENEDOR DE CONTENIDO DE LA PÁGINA ────────────────────────────── */
.page-content, .frame-content {
  width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  /* Padding responsivo con clamp() para eficiencia en móviles y respiro en desktop */
  padding: clamp(16px, 4vw, 32px) clamp(16px, 5vw, 40px);
  padding-bottom: clamp(40px, 8vh, 60px); /* Respiro inferior para no sobreponerse a la navegación */
  position: relative;
}
.page-content::-webkit-scrollbar, .frame-content::-webkit-scrollbar { display: none; }

.page-center .page-content, .page-center .frame-content {
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* MARCO REQUERIDO */
.page-frame {
  height: 100%;
}

.frame-inner {
  display: block; /* Contenedor fluido, el footer es absoluto y no usa el grid */
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.frame-footer {
  /* Navegación independiente pegada al borde inferior, cero impacto al flujo */
  position: absolute;
  bottom: 2px; /* Pegado abajo con mínimo margen de seguridad */
  left: 0;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  z-index: 50; 
}

.pagination {
  display: flex;
  gap: 0.8rem; /* Espacio sutil entre flechas y número */
  align-items: center;
  justify-content: center;
}

/* Responsive */
@media (max-width: 720px) {
  html { font-size: 14px; }
  :root { 
    --space-6: 1.5rem;
    --space-4: 0.85rem;
  }
}

@media (max-width: 480px) {
  html { font-size: 12px; }
  :root { 
    --space-8: 2rem;
    --space-6: 1.2rem;
    --space-4: 0.75rem;
    --space-3: 0.5rem;
  }
}

/* Ocultar inicialmente para el motor de StPageFlip si es necesario */
.frame-footer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  flex-shrink: 0; /* Prevent shrinking */
}

.frame-footer.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.page-footer-number {
  font-family: var(--font-serif);
  color: #5E3E30;
  font-size: 0.85rem;
  font-weight: bold;
  text-align: center;
  min-width: 24px;
}

.book-btn {
  width: 40px; height: 40px; /* Área táctil invisible amplia */
  border-radius: 0;
  background: transparent;
  border: none;
  color: #5E3E30; /* Color café cálido */
  /* Profundidad café sutil y levísimo reflejo dorado en los bordes */
  text-shadow: 0 1px 3px rgba(94, 62, 48, 0.4), 0 0 6px rgba(201, 162, 39, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px; /* Chevron más grande pero fino */
  font-weight: 300;
  font-family: var(--font-serif);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.book-btn:hover {
  text-shadow: 0 1px 4px rgba(94, 62, 48, 0.5), 0 0 10px rgba(201, 162, 39, 0.5);
}
.book-btn:active {
  transform: scale(0.85); /* Reducción táctil */
  color: #4A3024; /* Ligeramente más oscuro al tocar */
  text-shadow: 0 0 12px rgba(201, 162, 39, 0.8), 0 0 20px rgba(201, 162, 39, 0.5); /* Brillo dorado instantáneo */
}

/* Animaciones de respiración/deslizamiento para invitar a tocar */
.book-btn.page-prev:not(:active) {
  animation: arrow-breathe-left 3.5s ease-in-out infinite;
}
.book-btn.page-next:not(:active) {
  animation: arrow-breathe-right 3.5s ease-in-out infinite;
}

@keyframes arrow-breathe-left {
  0%, 100% {
    transform: translateX(0);
    text-shadow: 0 1px 3px rgba(94, 62, 48, 0.4), 0 0 6px rgba(201, 162, 39, 0.25);
  }
  50% {
    transform: translateX(-3px);
    text-shadow: 0 1px 4px rgba(94, 62, 48, 0.5), 0 0 10px rgba(201, 162, 39, 0.6);
  }
}

@keyframes arrow-breathe-right {
  0%, 100% {
    transform: translateX(0);
    text-shadow: 0 1px 3px rgba(94, 62, 48, 0.4), 0 0 6px rgba(201, 162, 39, 0.25);
  }
  50% {
    transform: translateX(3px);
    text-shadow: 0 1px 4px rgba(94, 62, 48, 0.5), 0 0 10px rgba(201, 162, 39, 0.6);
  }
}

/* Floating particle canvas */
#book-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Tap to open indicator */
.tap-indicator {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--gold-luminous);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  animation: pulseGlow 2s infinite;
  cursor: pointer;
  z-index: 20;
}
.tap-indicator svg {
  width: 24px; height: 24px;
  animation: bounceRight 1.5s infinite;
}

@keyframes bounceRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* Depth shadow during flip */
.leaf {
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.leaf.flipping {
  box-shadow: -15px 15px 40px rgba(0,0,0,0.6);
}

/* ═══════════════════════════════════════════════════════════
   CIERRE FÍSICO DEL LIBRO (CONTRATAPA)
   ═══════════════════════════════════════════════════════════ */

/* Por defecto están ocultos y se activan vía JS */
#book-back-cover, #page-13-clone {
  position: absolute;
  top: 0; bottom: 0;
  /* En desktop (landscape) ocupan la mitad derecha */
  width: 50%; 
  right: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  z-index: 500;
  pointer-events: none;
}

/* En móvil (portrait) ocupan todo el ancho y giran desde la izquierda */
.is-portrait #book-back-cover, 
.is-portrait #page-13-clone {
  width: 100%;
  left: 0; right: 0;
}

/* Estilo de la contratapa */
.book-back-cover-face {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--black-rich) 0%, var(--brown-dark) 100%);
  border: 2px solid var(--gold-dark);
  box-shadow: inset 8px 0 20px rgba(0,0,0,0.5), 10px 10px 30px rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  /* Al estar detrás inicialmente (y al revés), giramos 180 para que la cara externa quede bien cuando se cierre */
  transform: rotateY(180deg);
}

.book-back-cover-face::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--gold-luminous);
  border-radius: 8px 1px 1px 8px; /* Invertido respecto a la portada */
  pointer-events: none;
}

.book-back-cover-monogram {
  color: var(--gold-dark);
  font-family: var(--font-serif);
  font-size: 2rem;
  opacity: 0.5;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Clon de la pág 13 (papel) */
#page-13-clone {
  background: var(--cream);
  background-image: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 4px 4px;
  box-shadow: -5px 0 15px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
}

/* Animaciones */
.is-closing #book {
  opacity: 0;
  transition: opacity 0.1s;
}

.is-closing #page-13-clone {
  display: block !important;
  animation: flipPage13 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}

.is-closing #book-back-cover {
  display: block !important;
  /* La contratapa gira justo cuando la hoja va a terminar (solapado sutil) */
  animation: closeBackCover 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards;
}

/* Estado cerrado final */
.is-closed #book {
  opacity: 0;
  pointer-events: none;
}
.is-closed #page-13-clone {
  display: none !important;
}
.is-closed #book-back-cover {
  display: block !important;
  transform: rotateY(-180deg) translateZ(10px);
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 20px 20px 40px rgba(0,0,0,0.8);
}

@keyframes flipPage13 {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(-180deg); opacity: 0; }
}

@keyframes closeBackCover {
  0% { transform: rotateY(0deg) translateZ(-5px); }
  100% { transform: rotateY(-180deg) translateZ(10px); }
}

/* Ajuste de perspectiva (centrado) en desktop al cerrar */
@media (min-width: 901px) {
  .is-closing #envelope, .is-closed #envelope {
    translate: 25% 2%;
    scale: 1.15;
    transition: scale 1.2s ease-in-out, translate 1.2s ease-in-out;
  }
}

/* ==========================================================================
   PATCH: FORZAR ENMARCADO Y OCULTAR NUMERACI�N EN PORTADA
   ========================================================================== */

/* Ocultar numeraci�n en la portada */
.page-cover .frame-footer,
.page-front .frame-footer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

:root {
  --safe-padding: 24px;
  --cover-max-scale: 1;
}

/* Asegurar recorte estricto dentro del marco */
.page-frame,
.frame-inner {
  position: relative;
  overflow: hidden !important;
  box-sizing: border-box;
}

/* �rea interior con padding obligatorio (safe area) */
.frame-inner {
  padding: var(--safe-padding);
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}

/* Contenido principal (portada) � no puede salirse del marco */
.page-cover .frame-content,
.page-front .frame-content {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: calc(var(--safe-padding));
  max-height: 100%;
}

/* Forzar que textos y bloques no excedan: */
.page-cover .frame-content * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Evitar que display:inline large text se salga (t�tulos muy grandes) */
.couple__name,
.page-cover h1,
.page-cover .names {
  display: inline-block;
  max-width: 100%;
  width: 100%;
  overflow: visible;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  transform-origin: center center;
  will-change: transform;
  transform: scale(var(--cover-max-scale));
  padding: 0.15em 0.1em;
}

/* Im�genes y elementos visuales dentro de portada */
.page-cover img,
.page-cover .graphic,
.page-cover svg {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
  display: block;
}

/* Asegurar que footer/ numeraci�n no sea empujada hacia el centro */
.frame-content { max-height: calc(100% - var(--footer-height, 72px)); }

/* Limitar transform/overflow visual para efectos */
.page-cover .effect,
.page-cover .shimmer,
.page-cover .seal-ring-wrapper {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Respeto mobile: mantener enmarcado proporcionalmente */
@media (max-width: 720px) {
  :root { --safe-padding: 16px; --footer-height: 64px; }
  .page-frame, .frame-inner { padding: var(--safe-padding); }
  .couple__name { font-size: clamp(28px, 6vw, 48px) !important; line-height: 1.3; }
}