/* ==========================================================================
   APERTURAS.CSS — Estilos de las nuevas aperturas M1 → M2
   + Halo luminoso del cursor
   No modifica nada existente: solo agrega.
   ========================================================================== */

/* ════════════════════════════════════════════════════════════════════════
   HALO LUMINOSO DEL CURSOR — siempre visible, se intensifica en hover
   ════════════════════════════════════════════════════════════════════════ */
/* Forzar cursor:none en TODOS los elementos para eliminar el cursor nativo
   que a veces reaparece sobre SVG, spans con texto, etc. */
@media (hover:hover) and (pointer:fine){
  html, body, body *,
  body *::before, body *::after{
    cursor:none !important;
  }
}
#cursor-glow{
  position:fixed;
  width:160px; height:160px;
  border-radius:50%;
  pointer-events:none;
  z-index:99997;
  left:-500px; top:-500px;
  transform:translate(-50%,-50%) scale(0.75);
  background:radial-gradient(
    circle,
    rgba(201,168,76,.18) 0%,
    rgba(201,168,76,.09) 35%,
    rgba(201,168,76,.03) 60%,
    rgba(201,168,76,0)   75%
  );
  mix-blend-mode:screen;
  transition:transform .35s cubic-bezier(.22,1,.36,1),
             opacity .3s,
             background .3s;
  opacity:.85;
  filter:blur(3px);
  will-change:transform, opacity, left, top;
}
/* Activo pero sin hover: visible en todo momento que el mouse está sobre el doc */
body.cursor-glow-on #cursor-glow{
  opacity:1;
}
/* Con hover sobre flecha/botón: se agranda y se ilumina más */
body.cursor-glow-active #cursor-glow{
  transform:translate(-50%,-50%) scale(1.3);
  opacity:1;
  background:radial-gradient(
    circle,
    rgba(201,168,76,.55) 0%,
    rgba(201,168,76,.28) 30%,
    rgba(201,168,76,.10) 55%,
    rgba(201,168,76,0)   75%
  );
}
body.cursor-glow-strong #cursor-glow{
  transform:translate(-50%,-50%) scale(1.5);
  opacity:1;
  background:radial-gradient(
    circle,
    rgba(201,168,76,.65) 0%,
    rgba(201,168,76,.35) 30%,
    rgba(201,168,76,.12) 55%,
    rgba(201,168,76,0)   75%
  );
}
@media (hover:none), (pointer:coarse){
  #cursor-glow{ display:none !important; }
}
@media (prefers-reduced-motion:reduce){
  #cursor-glow{ transition:opacity .2s; }
}

/* ════════════════════════════════════════════════════════════════════════
   CONTENEDOR BASE DE APERTURAS
   ════════════════════════════════════════════════════════════════════════ */
.apertura-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10,6,8,.96);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s;
  overflow:hidden;
}
.apertura-overlay.active{
  opacity:1;
  pointer-events:all;
}

/* ════════════════════════════════════════════════════════════════════════
   APERTURA: CAJA DE REGALO
   ════════════════════════════════════════════════════════════════════════ */
.caja-wrap{
  position:relative;
  width:min(300px, 78vw);
  aspect-ratio:1/1;
  perspective:900px;
  transform-style:preserve-3d;
  /* Estado inicial: la caja entra con pop */
  opacity:0;
  transform:scale(.4) translateY(40px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),
             transform .8s cubic-bezier(.34,1.56,.64,1);
}
.caja-wrap.entrando{
  opacity:1;
  transform:scale(1) translateY(0);
}
.caja-cuerpo{
  position:absolute;
  inset:0;
  top:22%;
  background:linear-gradient(145deg,#110D10,#0a0608);
  border:1px solid rgba(201,168,76,.4);
  border-radius:4px;
  box-shadow:
    0 30px 60px rgba(0,0,0,.7),
    inset 0 0 40px rgba(0,0,0,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:transform 1s cubic-bezier(.22,1,.36,1), box-shadow .8s;
}
.caja-cinta-v{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:12%;
  transform:translateX(-50%);
  background:linear-gradient(90deg,
    rgba(201,168,76,.15),
    rgba(201,168,76,.85) 20%,
    rgba(201,168,76,.85) 80%,
    rgba(201,168,76,.15));
  box-shadow:0 0 20px rgba(201,168,76,.35);
  pointer-events:none;
}
.caja-cinta-h{
  position:absolute;
  left:0; right:0;
  top:50%;
  height:12%;
  transform:translateY(-50%);
  background:linear-gradient(180deg,
    rgba(201,168,76,.15),
    rgba(201,168,76,.85) 20%,
    rgba(201,168,76,.85) 80%,
    rgba(201,168,76,.15));
  box-shadow:0 0 20px rgba(201,168,76,.35);
  pointer-events:none;
}
.caja-brillo{
  position:absolute;
  inset:0;
  background:radial-gradient(
    circle at 30% 20%,
    rgba(255,255,255,.18),
    rgba(255,255,255,0) 60%);
  pointer-events:none;
  opacity:0;
  transition:opacity .8s;
}
.caja-cuerpo.brillando .caja-brillo{ opacity:1; }
.caja-cuerpo.brillando{
  box-shadow:
    0 30px 60px rgba(0,0,0,.7),
    0 0 50px rgba(201,168,76,.35),
    inset 0 0 40px rgba(201,168,76,.1);
}
.caja-cuerpo.levantando{
  transform:translateY(-12%) scale(1.02);
}
.caja-texto{
  position:relative;
  z-index:2;
  font-family:'Cinzel','Cormorant Garamond',serif;
  font-size:.68rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:#C9A84C;
  text-align:center;
  padding:0 1rem;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .7s .2s, transform .7s .2s;
}
.caja-cuerpo.brillando .caja-texto{
  opacity:1;
  transform:translateY(0);
}

.caja-tapa{
  position:absolute;
  top:0; left:-3%; right:-3%;
  height:28%;
  background:linear-gradient(145deg,#1a1418,#110D10);
  border:1px solid rgba(201,168,76,.4);
  border-radius:4px;
  box-shadow:
    0 20px 40px rgba(0,0,0,.6),
    inset 0 -10px 20px rgba(0,0,0,.4);
  transform-origin:50% 100%;
  transition:transform 1.3s cubic-bezier(.34,1.56,.64,1),
             opacity 1.3s cubic-bezier(.34,1.56,.64,1);
  z-index:5;
  --caja-cinta: #C9A84C;
}
/* Temblor anticipatorio antes de abrirse */
.caja-tapa.temblando{
  animation:cajaTemblor .4s ease-in-out 2;
}
@keyframes cajaTemblor{
  0%, 100% { transform:translate(0,0) rotate(0); }
  25%      { transform:translate(-2px, 0) rotate(-.5deg); }
  75%      { transform:translate(2px, 0)  rotate(.5deg); }
}
.caja-cinta-top{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:11%;
  transform:translateX(-50%);
  background:linear-gradient(90deg,
    rgba(201,168,76,.15),
    var(--caja-cinta,#C9A84C) 30%,
    var(--caja-cinta,#C9A84C) 70%,
    rgba(201,168,76,.15));
  box-shadow:0 0 15px rgba(201,168,76,.4);
}
.caja-mono{
  position:absolute;
  top:-60%; left:50%;
  transform:translateX(-50%);
  width:70%;
  height:70%;
  pointer-events:none;
  transition:transform .5s;
}
.caja-mono.temblando{
  animation:monoTemblor .35s ease-in-out 3;
}
@keyframes monoTemblor{
  0%, 100% { transform:translateX(-50%) rotate(0); }
  50%      { transform:translateX(-50%) rotate(4deg) scale(1.05); }
}
.caja-mono-l, .caja-mono-r{
  position:absolute;
  top:20%;
  width:45%;
  height:80%;
  border-radius:50% 50% 10% 50%;
  background:radial-gradient(
    ellipse at 35% 35%,
    #d4b85d 0%,
    var(--caja-cinta,#C9A84C) 45%,
    #8a6f2c 100%);
  box-shadow:
    0 8px 20px rgba(0,0,0,.4),
    inset -4px -4px 10px rgba(0,0,0,.25),
    inset 4px 4px 10px rgba(255,255,255,.15);
  transition:transform 1.2s cubic-bezier(.34,1.56,.64,1), opacity 1s .2s;
}
.caja-mono-l{
  left:2%;
  transform-origin:100% 50%;
  transform:rotate(-18deg);
}
.caja-mono-r{
  right:2%;
  transform-origin:0% 50%;
  transform:rotate(18deg) scaleX(-1);
}
.caja-mono-c{
  position:absolute;
  top:42%; left:50%;
  transform:translate(-50%,-50%);
  width:24%;
  height:24%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,
    #f4d578, var(--caja-cinta,#C9A84C), #8a6f2c);
  box-shadow:
    0 4px 12px rgba(0,0,0,.5),
    inset -2px -2px 6px rgba(0,0,0,.3),
    inset 2px 2px 6px rgba(255,255,255,.2);
  z-index:2;
  transition:transform .8s, opacity .6s;
}
/* Tapa abierta → se eleva más y rota lento, moño se desata */
.caja-tapa.abierta{
  transform:translateY(-260%) rotateX(-35deg) rotateZ(18deg);
  opacity:0;
}
.caja-tapa.abierta .caja-mono-l{
  transform:rotate(-110deg) translateY(-40px);
  opacity:0;
}
.caja-tapa.abierta .caja-mono-r{
  transform:rotate(110deg) scaleX(-1) translateY(-40px);
  opacity:0;
}
.caja-tapa.abierta .caja-mono-c{
  transform:translate(-50%,-50%) scale(0) rotate(180deg);
  opacity:0;
}

/* Confeti */
.caja-confeti{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:10;
  overflow:visible;
}
.caja-confeti-p{
  position:absolute;
  top:40%; left:50%;
  border-radius:2px;
  opacity:0;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  animation:cajaConfettiPop 1.8s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes cajaConfettiPop{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(0deg); }
  12%  { opacity:1; }
  100% {
    opacity:0;
    transform:translate(calc(-50% + var(--dx,0)), calc(-50% + var(--dy,0) + 260px)) scale(1) rotate(var(--rot,180deg));
  }
}

/* ════════════════════════════════════════════════════════════════════════
   APERTURA: POLAROID
   ════════════════════════════════════════════════════════════════════════ */
.polaroid-wrap{
  position:relative;
  width:min(300px, 78vw);
  perspective:1200px;
  opacity:0;
  transform:translateY(40px) scale(.6) rotate(-8deg);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),
             transform .9s cubic-bezier(.22,1,.36,1);
}
.polaroid-wrap.saliendo{
  opacity:1;
  transform:translateY(0) scale(1) rotate(0deg);
}
.polaroid-card{
  position:relative;
  width:100%;
  background:#f5edd8;
  padding:14px 14px 58px 14px;
  border-radius:3px;
  box-shadow:
    0 30px 60px rgba(0,0,0,.6),
    0 10px 20px rgba(0,0,0,.4),
    inset 0 0 25px rgba(0,0,0,.04);
  transition:transform 1.2s cubic-bezier(.22,1,.36,1);
  --pol-accent:#C9A84C;
}
.polaroid-card.inclinada{
  transform:rotate(-3deg);
}
.polaroid-foto{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background:#2a2520;
  overflow:hidden;
  border-radius:1px;
}
.polaroid-foto img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.6) contrast(1.1);
  transition:filter 1.6s ease-out;
}
.polaroid-card.revelando .polaroid-foto img{
  filter:brightness(1) contrast(1) saturate(1.05);
}
/* Velo blanco que se desvanece = efecto polaroid revelándose */
.polaroid-revelado{
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,
      rgba(245,237,216,.95) 0%,
      rgba(230,220,200,.92) 50%,
      rgba(210,195,165,.92) 100%);
  z-index:2;
  mix-blend-mode:normal;
}
/* Flash al inicio */
.polaroid-flash{
  position:absolute;
  inset:0;
  background:#fff;
  opacity:0;
  z-index:3;
  pointer-events:none;
}
.polaroid-flash.disparo{
  animation:polFlash .5s ease-out;
}
@keyframes polFlash{
  0%   { opacity:0; }
  15%  { opacity:1; }
  100% { opacity:0; }
}
.polaroid-pie{
  position:absolute;
  bottom:14px; left:14px; right:14px;
  text-align:center;
  font-family:'Dancing Script','Cormorant Garamond',cursive;
  font-size:1.25rem;
  color:#2a2520;
  letter-spacing:.02em;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .8s 1.4s, transform .8s 1.4s;
}
.polaroid-card.revelando .polaroid-pie{
  opacity:1;
  transform:translateY(0);
}

/* ════════════════════════════════════════════════════════════════════════
   APERTURA: CORTINA DE TEATRO
   ════════════════════════════════════════════════════════════════════════ */
.cortina-escenario{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:radial-gradient(ellipse at center, #1a0a14 0%, #0a0608 70%);
}
.cortina-luz{
  position:absolute;
  top:-20%; left:50%;
  width:80%; height:120%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 30%,
    rgba(255,220,150,.22),
    rgba(255,220,150,.08) 40%,
    transparent 70%);
  pointer-events:none;
  opacity:0;
  animation:cortLuz 2.5s ease-in forwards;
}
@keyframes cortLuz{
  0%   { opacity:0; }
  40%  { opacity:.2; }
  100% { opacity:1; }
}
.cortina-marco-top{
  position:absolute;
  top:0; left:0; right:0;
  height:60px;
  background:
    linear-gradient(180deg, #5a1a22 0%, #3a0a12 60%, #2a0008 100%);
  border-bottom:3px solid #C9A84C;
  box-shadow:0 4px 20px rgba(0,0,0,.6);
  z-index:4;
}
.cortina-izq, .cortina-der{
  position:absolute;
  top:0; bottom:0;
  width:52%;
  background:linear-gradient(180deg,
    #6a1a24 0%,
    #4a0a18 40%,
    #380010 80%,
    #280008 100%);
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.6),
    0 0 30px rgba(0,0,0,.8);
  transition:transform 1.7s cubic-bezier(.65,.05,.36,1);
  z-index:3;
  will-change:transform;
}
.cortina-izq{
  left:0;
  transform-origin:left center;
}
.cortina-der{
  right:0;
  transform-origin:right center;
}
.cortina-izq.abriendo{
  transform:translateX(-100%) scaleX(.85);
}
.cortina-der.abriendo{
  transform:translateX(100%) scaleX(.85);
}
/* pliegues verticales */
.cortina-pliegues{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,.25) 4%,
    rgba(255,255,255,.04) 8%,
    rgba(0,0,0,.35) 12%,
    rgba(0,0,0,0) 16%
  );
  pointer-events:none;
}
.cortina-borde-dorado{
  position:absolute;
  top:0; bottom:0;
  width:6px;
  background:linear-gradient(180deg,
    #d4b85d, #C9A84C 30%, #8a6f2c);
  box-shadow:0 0 15px rgba(201,168,76,.5);
}
.cortina-izq .cortina-borde-dorado{ right:0; }
.cortina-der .cortina-borde-dorado{ left:0; }

.cortina-texto{
  position:relative;
  z-index:2;
  font-family:'Cinzel','Cormorant Garamond',serif;
  font-size:.85rem;
  letter-spacing:.5em;
  text-transform:uppercase;
  color:#C9A84C;
  opacity:0;
  transform:translateY(20px) scale(.9);
  transition:opacity 1s, transform 1.2s cubic-bezier(.22,1,.36,1);
  text-shadow:0 0 25px rgba(201,168,76,.5), 0 0 60px rgba(201,168,76,.3);
}
.cortina-texto.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* ════════════════════════════════════════════════════════════════════════
   APERTURA: LIBRO ANTIGUO
   ════════════════════════════════════════════════════════════════════════ */
.libro-wrap{
  position:relative;
  width:min(420px, 85vw);
  aspect-ratio:1.3/1;
  perspective:1600px;
  transform-style:preserve-3d;
  opacity:0;
  transform:translateY(30px) rotateX(20deg) scale(.85);
  transition:opacity 1s cubic-bezier(.22,1,.36,1),
             transform 1s cubic-bezier(.22,1,.36,1);
}
.libro-wrap.entrando{
  opacity:1;
  transform:translateY(0) rotateX(8deg) scale(1);
}
.libro-sombra{
  position:absolute;
  left:5%; right:5%;
  bottom:-20px;
  height:25px;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,.6),
    rgba(0,0,0,0) 70%);
  filter:blur(4px);
}
.libro-cuerpo{
  position:relative;
  width:100%; height:100%;
  transform-style:preserve-3d;
}
.libro-tapa-tras{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#2a1810,#1a0a08);
  border-radius:4px 8px 8px 4px;
  box-shadow:0 20px 40px rgba(0,0,0,.5);
}
.libro-paginas{
  position:absolute;
  inset:3% 4% 3% 8%;
  background:linear-gradient(180deg,#f5edd8 0%,#ede3cc 100%);
  border-radius:1px 4px 4px 1px;
  box-shadow:
    inset 0 0 40px rgba(139,105,20,.15),
    inset 6px 0 15px rgba(0,0,0,.08);
  opacity:0;
  transition:opacity .6s;
}
.libro-paginas.activas{ opacity:1; }
.libro-pagina{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#f5edd8,#ede3cc);
  transform-origin:left center;
  box-shadow:0 0 10px rgba(0,0,0,.15), inset -10px 0 20px rgba(139,105,20,.08);
  backface-visibility:hidden;
  transition:transform 1s cubic-bezier(.65,.05,.36,1);
}
.libro-paginas.activas .libro-pg-1{
  transform:rotateY(-165deg);
  transition-delay:.1s;
}
.libro-paginas.activas .libro-pg-2{
  transform:rotateY(-155deg);
  transition-delay:.28s;
}
.libro-paginas.activas .libro-pg-3{
  transform:rotateY(-145deg);
  transition-delay:.46s;
}
.libro-pagina-contenido{
  position:absolute;
  inset:6% 8%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  opacity:0;
  transition:opacity .8s;
  font-family:'Cormorant Garamond',serif;
  color:#2a1810;
}
.libro-pagina-contenido.visible{ opacity:1; }
.libro-ornamento-top, .libro-ornamento-bot{
  font-size:1.4rem;
  color:#8a6f2c;
  letter-spacing:.1em;
  opacity:.7;
}
.libro-texto{
  font-family:'Cinzel','Cormorant Garamond',serif;
  font-size:clamp(.7rem, 1.8vw, 1rem);
  letter-spacing:.4em;
  text-transform:uppercase;
  text-align:center;
  color:#2a1810;
  padding:0 .5rem;
}
.libro-lomo{
  position:absolute;
  top:0; bottom:0;
  left:0;
  width:8%;
  background:linear-gradient(90deg,#1a0a08 0%,#2a1810 50%,#1a0a08 100%);
  box-shadow:inset -3px 0 8px rgba(0,0,0,.6);
  border-radius:3px 0 0 3px;
  z-index:4;
}
.libro-tapa{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#3a2418 0%,#2a1810 40%,#1a0a08 100%);
  border:1px solid rgba(201,168,76,.4);
  border-radius:4px 8px 8px 4px;
  box-shadow:
    0 20px 40px rgba(0,0,0,.5),
    inset 0 0 50px rgba(0,0,0,.4);
  transform-origin:left center;
  transition:transform 1.3s cubic-bezier(.65,.05,.36,1);
  z-index:5;
  --libro-accent:#C9A84C;
}
.libro-tapa.abierta{
  transform:rotateY(-170deg);
}
.libro-tapa-ornamento{
  position:absolute;
  inset:8%;
  border:1px solid rgba(201,168,76,.35);
  border-radius:2px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:1rem;
}
.libro-orn-esquina{
  position:absolute;
  color:var(--libro-accent,#C9A84C);
  font-size:1.1rem;
  opacity:.8;
}
.libro-orn-tl{ top:.3rem; left:.3rem; }
.libro-orn-tr{ top:.3rem; right:.3rem; }
.libro-orn-bl{ bottom:.3rem; left:.3rem; }
.libro-orn-br{ bottom:.3rem; right:.3rem; }
.libro-tapa-titulo{
  font-family:'Cinzel','Cormorant Garamond',serif;
  font-size:clamp(.75rem, 2vw, 1.1rem);
  letter-spacing:.35em;
  text-transform:uppercase;
  color:#C9A84C;
  text-align:center;
  padding:0 1.2rem;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.libro-tapa-sello{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Cinzel',serif;
  font-size:1.2rem;
  overflow:hidden;
  box-shadow:0 0 20px rgba(201,168,76,.4);
}
.libro-tapa-sello img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width:480px){
  .caja-wrap{ width:min(240px, 70vw); }
  .polaroid-wrap{ width:min(260px, 75vw); }
  .libro-wrap{ width:min(340px, 88vw); }
  .cortina-texto{ font-size:.7rem; letter-spacing:.4em; }
}
@media (prefers-reduced-motion:reduce){
  .caja-tapa, .caja-cuerpo, .caja-mono-l, .caja-mono-r, .caja-mono-c,
  .polaroid-wrap, .polaroid-card, .polaroid-foto img, .polaroid-pie,
  .cortina-izq, .cortina-der, .cortina-texto,
  .libro-wrap, .libro-tapa, .libro-pagina, .libro-pagina-contenido, .libro-paginas{
    transition-duration:.3s !important;
    animation-duration:.3s !important;
  }
  .caja-confeti-p{ display:none; }
}