/* ==================================================================
   Mis XV · El baile de medianoche · Luciana (xv-cenicienta)
   Paleta única: azul noche, azul hielo, plata y blanco perla.
   Tipografías: Bodoni Moda (títulos y nombre), Imperial Script (acentos),
   Hanken Grotesk (texto y rótulos).
   Forma propia: el ventanal del palacio (arco de medio punto) y el reloj.
   Lenguaje: escarcha que crece y descubre los textos, cascadas de destellos
   plateados, agujas que avanzan por las horas, telones que giran como un vals.
   ================================================================== */

:root{
  --noche:#0E1733;
  --noche-2:#131F45;
  --azul:#1C2B5E;
  --azul-2:#253872;
  --hielo:#CFE3F4;
  --hielo-2:#A9C6E6;
  --hielo-vivo:#E7F2FC;
  --plata:#C4CDDC;
  --plata-osc:#8793AD;
  --perla:#F5F7FB;
  --perla-2:#E8EEF7;
  --tinta:#13204A;
  --tinta-suave:#3B4A74;
  --texto:#E9EFF8;
  --texto-suave:#B9C7DD;
  --linea:rgba(207,227,244,.45);
  --display:'Bodoni Moda','Didot','Bodoni 72','Times New Roman',serif;
  --guion:'Imperial Script','Snell Roundhand','Segoe Script',cursive;
  --sans:'Hanken Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --arriba:env(safe-area-inset-top,0px);
  --abajo:env(safe-area-inset-bottom,0px);
  --izq:env(safe-area-inset-left,0px);
  --der:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--noche)}
body{
  background:var(--noche);
  color:var(--texto);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.cerrado{overflow:hidden;height:100%}
img{max-width:100%;height:auto;display:block}
b,strong{font-weight:600;color:var(--hielo-vivo)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.defs{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:2px solid var(--hielo);outline-offset:3px}
[hidden]{display:none!important}

/* ------------------------------------------------------------------
   PORTADA · la zapatilla en la escalinata (el fotograma 0 del video)
   ------------------------------------------------------------------ */
.portada{position:fixed;inset:0;z-index:60;overflow:hidden;background:var(--noche)}
body.abierto .portada{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s}
.portada__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* la zapatilla: caja por left/top/width/height en píxeles reales (sin transform: nítida) */
.escena{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden}
.portada.lista .escena{visibility:visible}
.zapatilla{position:absolute;left:0;top:0;width:0;height:0}
.zapatilla img{display:block;width:100%;height:100%}
.zapatilla__brillo{
  position:absolute;
  inset:0;
  -webkit-mask:url(assets/zapatilla.webp) center/100% 100% no-repeat;
  mask:url(assets/zapatilla.webp) center/100% 100% no-repeat;
  background:linear-gradient(110deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.95) 47%,rgba(214,234,255,.45) 52%,rgba(255,255,255,0) 62%) no-repeat;
  background-size:300% 100%;
  background-position:150% 0;
  mix-blend-mode:screen;
  animation:barrido 5.2s ease-in-out 1.2s infinite;
}
@keyframes barrido{0%{background-position:150% 0}38%,100%{background-position:-50% 0}}
.zapatilla__destellos{position:absolute;inset:0}
.chispa-z{
  position:absolute;
  width:var(--t,18px);
  height:var(--t,18px);
  margin:calc(var(--t,18px) / -2) 0 0 calc(var(--t,18px) / -2);
  background:radial-gradient(circle,#FFFFFF 0%,#E7F2FC 26%,rgba(207,227,244,0) 66%);
  clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);
  opacity:0;
  animation:titilar var(--d,2.6s) ease-in-out var(--r,0s) infinite;
}
@keyframes titilar{0%,100%{opacity:0;transform:scale(.3) rotate(0deg)}45%{opacity:1;transform:scale(1) rotate(45deg)}60%{opacity:.85;transform:scale(.8) rotate(60deg)}}
/* polvo plateado: sube desde la zapatilla y cae como escarcha por la escena */
.polvo{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.mota{
  position:absolute;
  width:var(--t,3px);
  height:var(--t,3px);
  border-radius:50%;
  background:#F2F8FF;
  box-shadow:0 0 6px 1px rgba(207,227,244,.85);
  opacity:0;
  animation:subir-mota var(--d,6s) linear var(--r,0s) infinite;
}
@keyframes subir-mota{
  0%{transform:translate3d(0,0,0);opacity:0}
  15%{opacity:.95}
  70%{opacity:.5}
  100%{transform:translate3d(var(--x,10px),var(--y,-260px),0);opacity:0}
}
.copo{
  position:absolute;
  top:-12px;
  width:var(--t,3px);
  height:var(--t,3px);
  border-radius:50%;
  background:#FFFFFF;
  box-shadow:0 0 5px rgba(231,242,252,.8);
  opacity:0;
  animation:caer-copo var(--d,14s) linear var(--r,0s) infinite;
}
@keyframes caer-copo{
  0%{transform:translate3d(0,0,0);opacity:0}
  10%{opacity:.8}
  85%{opacity:.6}
  100%{transform:translate3d(var(--x,30px),105vh,0);opacity:0}
}

/* cabecera: "Mis XV", el nombre y "El baile de medianoche" (arriba en vertical, a la izquierda en horizontal) */
.portada__cabecera{
  position:absolute;
  inset:0;
  z-index:5;
  padding:calc(var(--arriba) + clamp(24px,5vh,64px)) max(16px,var(--der)) 0 max(16px,var(--izq));
  text-align:center;
  pointer-events:none;
  visibility:hidden;
}
.portada.lista .portada__cabecera{visibility:visible}
.portada__cabecera::before{
  content:'';
  position:absolute;
  left:50%;
  top:0;
  width:min(120vw,760px);
  height:calc(var(--arriba) + clamp(210px,34vh,330px));
  margin-left:max(-60vw,-380px);
  background:radial-gradient(ellipse 50% 58% at 50% 42%,rgba(8,14,34,.5) 0%,rgba(8,14,34,.22) 55%,rgba(8,14,34,0) 80%);
  pointer-events:none;
}
.portada__xv,.portada__nombre,.portada__baile{position:relative;display:block}
.portada__xv{
  font-family:var(--guion);
  font-size:clamp(34px,10vw,58px);
  line-height:1;
  color:var(--hielo);
  text-shadow:0 2px 14px rgba(8,14,34,.9),0 0 26px rgba(207,227,244,.35);
}
.portada__nombre{
  margin-top:-.02em;
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(54px,min(20vw,10.4vh),118px);
  line-height:1;
  letter-spacing:.005em;
  color:#FFFFFF;
  text-shadow:0 2px 18px rgba(8,14,34,.9),0 0 42px rgba(170,205,240,.4);
}
.portada__baile{
  margin-top:8px;
  font-size:clamp(11px,3.1vw,13.5px);
  font-weight:600;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--hielo-vivo);
  text-shadow:0 2px 10px rgba(8,14,34,.95);
}
/* la fecha: debajo de la zapatilla (vertical) o bajo el nombre (horizontal) */
.portada__fecha{
  position:absolute;
  left:0;
  right:0;
  top:calc(var(--z-bottom,70vh) + clamp(10px,2.2vh,22px));
  width:fit-content;
  max-width:calc(100% - 32px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px 12px;
  margin:0 auto;
  padding:9px 20px 10px;
  border-radius:999px;
  border:1px solid rgba(231,242,252,.7);
  background:rgba(14,23,51,.6);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--perla);
  font-size:clamp(13px,3.6vw,15.5px);
  font-weight:500;
  line-height:1.35;
  letter-spacing:.02em;
  box-shadow:inset 0 0 0 3px rgba(14,23,51,.35),inset 0 0 0 4px rgba(207,227,244,.22);
}
.portada__sep{display:inline-block;width:6px;height:6px;rotate:45deg;background:var(--hielo)}
.portada__fecha .solo-anio{display:none}
html.horizontal .portada__fecha .solo-anio{display:inline}

/* horizontal (escritorio, celular echado): el título a la izquierda, sobre el cielo */
html.horizontal .portada__cabecera{
  inset:auto;
  left:max(6vw,calc(var(--izq) + 20px));
  top:14vh;
  width:min(40vw,700px);
  padding:0;
  text-align:left;
}
html.horizontal .portada__cabecera::before{left:-8vw;top:-10vh;width:calc(100% + 16vw);height:calc(100% + 20vh);margin:0;background:radial-gradient(ellipse 50% 50% at 45% 48%,rgba(8,14,34,.45) 0%,rgba(8,14,34,.18) 60%,rgba(8,14,34,0) 82%)}
html.horizontal .portada__xv{font-size:min(4.2vw,8vh,76px)}
html.horizontal .portada__nombre{font-size:clamp(60px,min(9.4vw,17vh),184px);margin-top:.02em}
html.horizontal .portada__baile{font-size:clamp(12px,1.05vw,17px);margin-top:12px}
html.horizontal .portada__fecha{
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  margin:clamp(16px,3vh,30px) 0 0;
  justify-content:flex-start;
  padding:11px 24px 12px;
  font-size:clamp(14px,1.2vw,19px);
}

/* el toque: botón a pantalla completa, píldora abajo con la manito */
.portada__tap{
  position:absolute;
  inset:0;
  z-index:6;
  width:100%;
  border:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding:0 16px calc(var(--abajo) + clamp(22px,4.6vh,48px));
  font:inherit;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.portada__tap:focus-visible{outline:none}
.portada__pista{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:0 26px 0 20px;
  border-radius:999px;
  border:1px solid rgba(231,242,252,.9);
  background:rgba(14,23,51,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--perla);
  font-size:13px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.portada__pista::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:1.5px solid rgba(231,242,252,.85);
  animation:anillo 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes anillo{0%{transform:scale(1);opacity:.95}70%,100%{transform:scale(1.14,1.5);opacity:0}}
.pista__mano{width:22px;height:22px;flex:0 0 auto;animation:toque 1.8s ease-in-out infinite}
@keyframes toque{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(4px) scale(.88)}70%{transform:translateY(0) scale(1)}}
/* estado llamativo (azul noche sobre la escalinata clara): nace así en táctil y con mouse; el hover lo invierte */
.portada__pista{background:var(--tinta);color:#FFFFFF;border-color:#FFFFFF;box-shadow:0 0 0 4px rgba(255,255,255,.28),0 10px 30px rgba(8,14,34,.5),0 0 36px rgba(207,227,244,.55)}
.portada__tap:hover .portada__pista,
.portada__tap:focus-visible .portada__pista{background:var(--hielo-vivo);color:var(--tinta);border-color:#FFFFFF}
@media (hover:none){
  .portada__tap:hover .portada__pista{background:var(--tinta);color:#FFFFFF}
}
@media (orientation:landscape) and (max-height:500px){
  .portada__tap{align-items:flex-end;padding:0 max(4vw,var(--der)) calc(var(--abajo) + 12px) 16px}
  .portada__pista{min-height:46px;font-size:12px}
}
@media (min-width:1100px){
  .portada__pista{min-height:62px;padding:0 36px 0 28px;font-size:15px;gap:12px}
  .pista__mano{width:26px;height:26px}
}

.velo{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:radial-gradient(circle at 50% 44%,#2A3F7A 0%,#16224A 48%,var(--noche) 82%);
}

/* ------------------------------------------------------------------
   EL RECORRIDO · video, foto en la esfera del reloj y textos en placas
   ------------------------------------------------------------------ */
.viaje{position:absolute;inset:0;z-index:4;opacity:0;visibility:hidden;pointer-events:none}
.viaje__video,.viaje__fin{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--noche)}
.viaje__fin{opacity:0}
.viaje__esfera{position:absolute;left:0;top:0;width:0;height:0;z-index:1}
.viaje__foto{position:absolute;inset:-1px;border-radius:50%;overflow:hidden;opacity:0;background:var(--perla-2)}
.viaje__foto img{width:100%;height:100%;object-fit:cover}
.viaje__foto::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 0 22px rgba(14,23,51,.28)}
.viaje__luz{
  position:absolute;
  inset:-16%;
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(231,242,252,.7) 34%,rgba(207,227,244,0) 70%);
  pointer-events:none;
}
.viaje__agujas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0}
.aguja{fill:url(#g-aguja);stroke:rgba(231,242,252,.85);stroke-width:1.2;stroke-linejoin:round}
.aguja__eje{fill:#DCE6F3;stroke:var(--tinta);stroke-width:2}
.aguja__eje2{fill:var(--tinta)}

/* placas: azul noche translúcido con filete plateado (legibles sobre el salón claro) */
.viaje__texto,.viaje__final{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.viaje__texto{
  position:absolute;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 12%);
  z-index:2;
  margin:0;
  padding:13px 18px 15px;
  text-align:center;
  text-wrap:balance;
  border-radius:22px;
  background:rgba(14,23,51,.64);
  box-shadow:inset 0 0 0 1px rgba(231,242,252,.6),inset 0 0 0 5px rgba(14,23,51,.12),inset 0 0 0 6px rgba(207,227,244,.25);
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(24px,6.8vw,38px);
  line-height:1.2;
  color:#FFFFFF;
  opacity:0;
}
.viaje__final{
  position:absolute;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 3.6%);
  z-index:2;
  padding:12px 16px 16px;
  text-align:center;
  border-radius:26px;
  background:rgba(14,23,51,.66);
  box-shadow:inset 0 0 0 1px rgba(231,242,252,.6),inset 0 0 0 5px rgba(14,23,51,.12),inset 0 0 0 6px rgba(207,227,244,.25);
  opacity:0;
}
.viaje__placa{margin:0}
.viaje__xv{display:block;font-family:var(--guion);font-size:clamp(30px,8.4vw,44px);line-height:1;color:var(--hielo)}
.viaje__nombre{display:block;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(46px,13.5vw,70px);line-height:1;color:#FFFFFF}
.viaje__invita{display:block;margin-top:6px;text-wrap:balance;font-size:clamp(11px,3.1vw,13.5px);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--hielo-vivo)}
.viaje__invita b{color:#FFFFFF}

html.horizontal .viaje__texto{
  left:0;
  right:0;
  width:fit-content;
  max-width:88vw;
  margin:0 auto;
  bottom:calc(var(--abajo) + 7%);
  padding:13px 36px 15px;
  font-size:clamp(28px,3vw,46px);
}
html.horizontal .viaje__final{inset:0;padding:0;background:none;box-shadow:none;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
html.horizontal .viaje__placa{
  position:absolute;
  top:var(--e-mid,50vh);
  width:min(25vw,390px);
  padding:20px 22px 22px;
  border-radius:26px;
  background:rgba(14,23,51,.62);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  box-shadow:inset 0 0 0 1px rgba(231,242,252,.6),inset 0 0 0 5px rgba(14,23,51,.12),inset 0 0 0 6px rgba(207,227,244,.25);
  text-align:center;
  translate:0 -50%;
}
html.horizontal .viaje__placa--nombre{right:calc(100% - var(--e-left,36vw) + 3vw)}
html.horizontal .viaje__placa--invita{left:calc(var(--e-right,64vw) + 3vw)}
html.horizontal .viaje__xv{font-size:clamp(34px,3.2vw,56px)}
html.horizontal .viaje__nombre{font-size:clamp(50px,5.2vw,88px)}
html.horizontal .viaje__invita{font-size:clamp(13px,1.15vw,17px);line-height:1.9;margin:0}
html.horizontal .viaje__invita b{display:block;font-family:var(--display);font-style:italic;font-weight:500;font-size:2.1em;letter-spacing:0;text-transform:none;line-height:1.15;margin-top:6px}

/* ------------------------------------------------------------------
   BOTONES FIJOS · volver y música
   ------------------------------------------------------------------ */
.volver-fijo{
  position:fixed;
  top:calc(var(--arriba) + 12px);
  left:calc(var(--izq) + 12px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:46px;
  padding:0 18px 0 12px;
  border-radius:999px;
  border:1px solid rgba(207,227,244,.7);
  background:rgba(14,23,51,.76);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--perla);
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .35s ease,color .35s ease,opacity .4s ease,visibility 0s;
}
.volver-fijo svg{width:16px;height:16px}
.volver-fijo:hover,.volver-fijo:focus-visible{background:var(--hielo-vivo);color:var(--tinta)}
body.cerrado .volver-fijo{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}

.musica-flotante{
  position:fixed;
  right:calc(var(--der) + 14px);
  bottom:calc(var(--abajo) + 14px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:56px;
  padding:5px 18px 5px 6px;
  border-radius:999px;
  border:1px solid rgba(207,227,244,.75);
  background:rgba(14,23,51,.8);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--hielo);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .4s ease,visibility 0s linear .4s,transform .4s ease,background-color .35s ease,border-color .35s ease;
}
html.musica .musica-flotante{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease,visibility 0s,transform .4s ease,background-color .35s ease,border-color .35s ease}
/* durante el recorrido las placas van abajo: el botón se aparta y vuelve al terminar */
body.cerrado .musica-flotante{top:calc(var(--arriba) + 12px);bottom:auto;min-height:48px;padding:4px 14px 4px 5px;gap:6px}
body.cerrado .musica-flotante__zapatilla{width:38px;height:38px}
body.cerrado .musica-flotante__zapatilla img{width:30px;margin:-15px 0 0 -15px}
html.musica.viajando .musica-flotante{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}
.musica-flotante:hover,.musica-flotante:focus-visible{background:var(--azul-2);border-color:#FFFFFF}
.musica-flotante__zapatilla{position:relative;display:block;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 50% 55%,rgba(207,227,244,.34),rgba(14,23,51,0) 70%)}
.musica-flotante__zapatilla img{position:absolute;left:50%;top:50%;width:34px;height:auto;margin:-17px 0 0 -17px}
.musica-flotante__zapatilla i{
  position:absolute;
  width:7px;
  height:7px;
  left:8px;
  top:8px;
  background:#FFFFFF;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  opacity:0;
}
.musica-flotante--tocando .musica-flotante__zapatilla i{animation:titilar 1.6s ease-in-out infinite}
.musica-flotante--tocando .musica-flotante__zapatilla i:nth-child(3){animation-delay:.5s;left:30px;top:6px}
.musica-flotante--tocando .musica-flotante__zapatilla i:nth-child(4){animation-delay:1s;left:33px;top:30px}
.musica-flotante__ondas{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.musica-flotante__ondas i{display:block;width:3px;height:6px;border-radius:2px;background:currentColor}
.musica-flotante--tocando .musica-flotante__ondas i{animation:onda-sonido .9s ease-in-out infinite}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(2){animation-delay:.15s}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(3){animation-delay:.3s}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(4){animation-delay:.45s}
@keyframes onda-sonido{0%,100%{height:6px}50%{height:18px}}
.musica-flotante:not(.musica-flotante--tocando){color:rgba(207,227,244,.6)}
.musica-flotante:not(.musica-flotante--tocando) .musica-flotante__zapatilla img{opacity:.6}

/* ------------------------------------------------------------------
   CASCADAS DE DESTELLOS PLATEADOS (una capa fija para toda la página)
   ------------------------------------------------------------------ */
.destellos{position:fixed;inset:0;z-index:65;pointer-events:none;overflow:hidden}
.destello{
  position:absolute;
  left:0;
  top:0;
  width:var(--t,12px);
  height:var(--t,12px);
  margin:calc(var(--t,12px) / -2) 0 0 calc(var(--t,12px) / -2);
  background:radial-gradient(circle,#FFFFFF 0%,#EAF4FF 30%,rgba(207,227,244,0) 70%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}
.destello--punto{clip-path:none;border-radius:50%;background:#FFFFFF;box-shadow:0 0 6px rgba(231,242,252,.9)}

/* ------------------------------------------------------------------
   ESCARCHA · el texto se descubre con una máscara que crece desde un
   cristal de hielo (el JS la pone solo si hay GSAP y movimiento)
   ------------------------------------------------------------------ */
html.escarcha-on .escarcha:not(.escarcha--vista){
  -webkit-mask-image:linear-gradient(transparent,transparent);
  mask-image:linear-gradient(transparent,transparent);
}
html.escarcha-on .escarcha.escarchando{
  -webkit-mask-image:radial-gradient(circle at var(--ex,0%) var(--ey,50%),#000 0,#000 calc(var(--er,0px) - 46px),rgba(0,0,0,.35) calc(var(--er,0px) - 14px),transparent var(--er,0px));
  mask-image:radial-gradient(circle at var(--ex,0%) var(--ey,50%),#000 0,#000 calc(var(--er,0px) - 46px),rgba(0,0,0,.35) calc(var(--er,0px) - 14px),transparent var(--er,0px));
}
.cristal{position:absolute;z-index:3;pointer-events:none;overflow:visible}
.cristal path{fill:none;stroke:#F2F8FF;stroke-width:1.3;stroke-linecap:round;filter:none}
.cristal circle{fill:#FFFFFF}

/* ------------------------------------------------------------------
   CUERPO · piezas comunes
   ------------------------------------------------------------------ */
.baile{position:relative;z-index:1;opacity:0;transition:opacity .7s ease}
body.abierto .baile{opacity:1}
section{position:relative;overflow:hidden}
.rotulo{
  position:relative;
  margin:0 0 10px;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--hielo);
  text-align:center;
}
.rotulo--tinta{color:var(--tinta-suave)}
.rotulo--chico{margin-top:30px}
.titulo{
  position:relative;
  text-wrap:balance;
  margin:0 auto 18px;
  max-width:14em;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(40px,11vw,62px);
  line-height:1.06;
  letter-spacing:-.005em;
  color:#FFFFFF;
  text-align:center;
}
.titulo--tinta{color:var(--tinta)}
.revela{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.revela.vista{opacity:1;transform:none}
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 28px;
  border-radius:999px;
  border:1px solid var(--hielo);
  background:transparent;
  color:var(--perla);
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.boton svg{width:20px;height:20px;flex:0 0 auto}
.boton:hover,.boton:focus-visible{background:var(--hielo-vivo);color:var(--tinta)}
/* fondo de noche estrellada, compartido por las secciones oscuras */
.estrellada{
  background:
    radial-gradient(1.2px 1.2px at 12% 18%,rgba(255,255,255,.8) 50%,transparent 51%),
    radial-gradient(1px 1px at 72% 12%,rgba(255,255,255,.7) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 88% 44%,rgba(255,255,255,.6) 50%,transparent 51%),
    radial-gradient(1px 1px at 34% 62%,rgba(255,255,255,.55) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 58% 84%,rgba(255,255,255,.6) 50%,transparent 51%),
    radial-gradient(1px 1px at 6% 78%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(59,90,160,.35) 0%,rgba(59,90,160,0) 70%),
    linear-gradient(180deg,var(--noche) 0%,var(--noche-2) 100%);
  background-size:260px 260px,310px 310px,230px 230px,280px 280px,340px 340px,250px 250px,100% 100%,100% 100%;
}

/* telón de raso que gira como un vals (galería y retrato) */
.telon{position:absolute;inset:0;z-index:2;perspective:900px;pointer-events:none}
.telon__hoja{
  position:absolute;
  top:0;
  bottom:0;
  width:50.5%;
  background:
    linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 22%,rgba(14,23,51,0) 70%,rgba(14,23,51,.25) 100%),
    repeating-linear-gradient(90deg,#B9CCE6 0,#E9F1FB 7%,#9FB6D7 15%,#DCE7F5 23%,#A9BFDD 31%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  backface-visibility:hidden;
}
.telon__hoja--izq{left:0;transform-origin:0 50%}
.telon__hoja--der{right:0;transform-origin:100% 50%}
.telon.abierto{visibility:hidden}

/* ------------------------------------------------------------------
   LA QUINCEAÑERA
   ------------------------------------------------------------------ */
.quince{padding:calc(var(--arriba) + 84px) 24px 76px}
.quince__dentro{position:relative;z-index:1;display:grid;gap:36px;justify-items:center;max-width:1080px;margin:0 auto}
.ventanal{position:relative;width:min(68vw,300px);aspect-ratio:3/4;margin:0}
.ventanal__foto{position:absolute;inset:0;overflow:hidden;border-radius:999px 999px 18px 18px;background:var(--azul)}
.ventanal__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.ventanal .telon{border-radius:999px 999px 18px 18px;overflow:hidden}
.ventanal__marco{
  position:absolute;
  inset:-10px;
  border-radius:999px 999px 26px 26px;
  border:1px solid rgba(231,242,252,.8);
  pointer-events:none;
}
.ventanal__marco::after{content:'';position:absolute;inset:4px;border-radius:999px 999px 22px 22px;border:1px solid rgba(207,227,244,.35)}
.quince__texto{text-align:center;max-width:560px}
.quince__nombre{
  margin:0;
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(72px,22vw,128px);
  line-height:.98;
  color:#FFFFFF;
  text-shadow:0 0 40px rgba(170,205,240,.25);
}
.quince__edad{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 0;text-align:left;font-size:13px;font-weight:600;letter-spacing:.24em;line-height:1.5;text-transform:uppercase;color:var(--hielo)}
.quince__xv{font-family:var(--display);font-size:56px;font-weight:500;letter-spacing:.02em;line-height:1;color:#FFFFFF}
.quince__dedicatoria{position:relative;margin:20px auto 0;max-width:31em;font-size:17.5px;color:var(--texto);text-wrap:pretty}
.quince__firma{margin:20px 0 0;font-size:15px;color:var(--texto-suave)}
.quince__firma span{display:block;font-family:var(--guion);font-size:52px;line-height:1.1;color:var(--hielo-vivo)}

/* ------------------------------------------------------------------
   MI CORTE · el candelabro de cristal
   ------------------------------------------------------------------ */
.corte{padding:80px 18px 84px;text-align:center}
.candelabro{position:relative;max-width:760px;margin:22px auto 0;padding-bottom:6px}
.candelabro__luz{
  position:absolute;
  left:50%;
  top:0;
  width:min(96vw,560px);
  aspect-ratio:1;
  margin-left:max(-48vw,-280px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(207,227,244,.42) 0%,rgba(120,160,220,.16) 40%,rgba(14,23,51,0) 70%);
  opacity:.25;
  transition:opacity 1.2s ease;
  pointer-events:none;
}
.candelabro.encendido .candelabro__luz{opacity:1}
.candelabro__img{position:relative;z-index:2;width:min(48vw,250px);margin:0 auto;filter:brightness(.72) saturate(.9);transition:filter 1.2s ease}
.candelabro.encendido .candelabro__img{filter:brightness(1.08) saturate(1)}
.candelabro__nivel{position:relative;z-index:2;margin-top:30px}
.candelabro__nivel + .candelabro__nivel{margin-top:26px}
.candelabro__rol{margin:0 0 26px;font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--hielo)}
.colgantes{display:flex;justify-content:center;flex-wrap:wrap;gap:18px 10px}
.colgante{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:58px;
  padding:13px 13px 12px;
  border-radius:999px 999px 20px 20px;
  border:1px solid rgba(207,227,244,.35);
  background:linear-gradient(170deg,rgba(255,255,255,.08) 0%,rgba(207,227,244,.03) 100%);
  transition:background-color .8s ease,border-color .8s ease,box-shadow .8s ease;
}
.colgante b{font-family:var(--display);font-weight:500;font-size:19.5px;line-height:1.2;color:rgba(233,239,248,.45);transition:color .8s ease}
.colgante__gema{
  position:absolute;
  left:50%;
  top:-7px;
  width:13px;
  height:13px;
  margin-left:-6.5px;
  rotate:45deg;
  border:1px solid rgba(231,242,252,.7);
  background:linear-gradient(135deg,#FFFFFF 0%,#9FB6D7 60%,#E7F2FC 100%);
  opacity:.55;
  transition:opacity .6s ease,box-shadow .6s ease;
}
.colgante::before{
  content:'';
  position:absolute;
  left:50%;
  bottom:calc(100% + 5px);
  width:4px;
  height:var(--cadena,22px);
  margin-left:-2px;
  background:radial-gradient(circle,rgba(231,242,252,.9) 1.3px,rgba(231,242,252,0) 1.8px) 50% 0/4px 6px repeat-y;
  opacity:.5;
  transition:opacity .6s ease;
  pointer-events:none;
}
.colgante.encendido::before{opacity:1}
.candelabro__nivel[data-nivel="1"] .colgante{--cadena:34px}
.colgante--mini{--cadena:14px}
.colgante.encendido{border-color:rgba(231,242,252,.9);background:linear-gradient(170deg,rgba(255,255,255,.18) 0%,rgba(207,227,244,.08) 100%);box-shadow:0 0 26px rgba(207,227,244,.22),inset 0 0 18px rgba(207,227,244,.12)}
.colgante.encendido b{color:#FFFFFF}
.colgante.encendido .colgante__gema{opacity:1;box-shadow:0 0 12px 3px rgba(231,242,252,.8)}
.colgante--mini{min-width:108px;min-height:50px;padding:10px 12px 9px}
.colgante--mini b{font-size:19px}
.colgantes--corte{max-width:420px;margin:0 auto}

/* ------------------------------------------------------------------
   LA FECHA · la torre del reloj en bucle + cuenta regresiva
   ------------------------------------------------------------------ */
.fecha-sec{min-height:88svh;display:flex;align-items:center;justify-content:center;padding:76px 20px;background:var(--noche) url(assets/noche-movil.webp) center/cover no-repeat}
html.horizontal .fecha-sec{background-image:url(assets/noche-desktop.webp)}
.fecha-sec__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fecha-sec__velo{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 46% at 50% 52%,rgba(14,23,51,.42) 0%,rgba(14,23,51,.18) 70%),
    linear-gradient(180deg,rgba(14,23,51,.5) 0%,rgba(14,23,51,.05) 40%,rgba(14,23,51,.62) 100%);
}
.nieve{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.nieve.pausa .copo{animation-play-state:paused}
.fecha-sec__dentro{position:relative;z-index:1;text-align:center;width:100%;max-width:680px}
.fecha{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(80vw,330px);
  margin:8px auto 0;
  padding:48px 20px 30px;
  border-radius:999px 999px 30px 30px;
  background:rgba(14,23,51,.5);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  box-shadow:inset 0 0 0 1px rgba(231,242,252,.75),inset 0 0 0 7px rgba(14,23,51,.2),inset 0 0 0 8px rgba(207,227,244,.3),0 18px 50px rgba(8,14,34,.45);
}
.fecha__dia{font-size:14px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--hielo);margin-left:.42em}
.fecha__num{font-family:var(--display);font-weight:500;font-variation-settings:'opsz' 14;font-size:clamp(118px,36vw,176px);line-height:.95;color:#FFFFFF;text-shadow:0 0 38px rgba(170,205,240,.35);font-variant-numeric:lining-nums}
.fecha__mes{font-family:var(--display);font-style:italic;font-size:clamp(26px,7.6vw,34px);line-height:1.15;color:var(--hielo-vivo)}
.fecha__hora{margin-top:16px;padding:9px 20px 10px;border-radius:999px;background:var(--hielo-vivo);color:var(--tinta);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.cuenta{display:flex;justify-content:center;gap:clamp(8px,2.6vw,18px)}
.cuenta__dato{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:clamp(68px,19vw,94px);
  padding:12px 6px 10px;
  border-radius:18px;
  border:1px solid rgba(207,227,244,.55);
  background:rgba(14,23,51,.55);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.cuenta__n{font-family:var(--display);font-weight:500;font-size:clamp(34px,10vw,50px);line-height:1;color:#FFFFFF;font-variant-numeric:lining-nums tabular-nums;min-width:1.4em}
.cuenta__t{margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--hielo)}
.cuenta__hoy{margin:12px 0 0;font-family:var(--display);font-style:italic;font-size:40px;color:#FFFFFF}

/* ------------------------------------------------------------------
   DÓNDE · dos tarjetas, cada una es el botón al mapa
   ------------------------------------------------------------------ */
.donde{padding:80px 20px 80px;background:linear-gradient(180deg,var(--perla) 0%,var(--perla-2) 100%);color:var(--tinta);text-align:center}
.donde .rotulo{color:var(--tinta-suave)}
.donde .titulo{color:var(--tinta)}
.lugares{display:grid;gap:22px;max-width:980px;margin:28px auto 0}
.lugar{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:30px 20px 26px;
  overflow:hidden;
  border-radius:180px 180px 26px 26px;
  text-decoration:none;
  color:var(--tinta);
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F6FC 100%);
  box-shadow:0 0 0 1px rgba(19,32,74,.14),inset 0 0 0 6px #FFFFFF,inset 0 0 0 7px rgba(169,198,230,.8),0 14px 34px rgba(19,32,74,.1);
  transition:background-color .4s ease,box-shadow .4s ease;
}
/* escarcha en las esquinas de la tarjeta */
.lugar__escarcha{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 0 100%,rgba(169,198,230,.45) 0,rgba(169,198,230,0) 90px),
    radial-gradient(circle at 100% 100%,rgba(169,198,230,.45) 0,rgba(169,198,230,0) 90px);
}
.lugar__ico{position:relative;width:auto;height:64px;margin:0 0 8px;filter:drop-shadow(0 6px 10px rgba(19,32,74,.2))}
.lugar__tipo{position:relative;font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--tinta-suave)}
.lugar__nombre{position:relative;margin-top:2px;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(30px,8.4vw,40px);line-height:1.1;color:var(--tinta);text-wrap:balance}
.lugar__sitio{position:relative;margin-top:8px;font-size:17px;font-weight:600;color:var(--tinta)}
.lugar__dir{position:relative;font-size:16px;line-height:1.5;color:var(--tinta-suave)}
.lugar__hora{position:relative;margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--tinta-suave)}
.lugar__hora b{color:var(--tinta)}
.lugar__ir{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:50px;
  margin-top:18px;
  padding:0 26px 0 20px;
  border-radius:999px;
  border:1px solid var(--tinta);
  color:var(--tinta);
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:background-color .35s ease,color .35s ease;
}
.lugar__ir{background:var(--tinta);color:var(--perla)}
.lugar:hover,.lugar:focus-visible{background:linear-gradient(180deg,#FFFFFF 0%,#E4EEF9 100%);box-shadow:0 0 0 1px rgba(19,32,74,.3),inset 0 0 0 6px #FFFFFF,inset 0 0 0 7px var(--hielo-2),0 18px 40px rgba(19,32,74,.16)}
.lugar:hover .lugar__ir,.lugar:focus-visible .lugar__ir{background:transparent;color:var(--tinta)}
@media (hover:none){
  .lugar:hover .lugar__ir{background:var(--tinta);color:var(--perla)}
}

/* ------------------------------------------------------------------
   LAS HORAS DEL BAILE · el itinerario sobre la esfera de un reloj
   ------------------------------------------------------------------ */
.horas{padding:84px 20px 80px;overflow:visible}
.horas__cabeza{text-align:center}
.horas__cuerpo{position:relative;max-width:1000px;margin:18px auto 0}
.reloj-pista{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:0 -20px;
  padding:calc(var(--arriba) + 62px) 20px 26px;
  pointer-events:none;
  /* en celular la lista pasa por debajo del reloj: una franja de noche la tapa y se funde abajo */
  background:linear-gradient(180deg,rgba(14,23,51,.97) 0%,rgba(14,23,51,.97) 84%,rgba(14,23,51,0) 100%);
}
.reloj{position:relative;width:min(56vw,236px);pointer-events:auto}
.reloj__svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 14px 30px rgba(4,8,22,.55))}
.reloj__aro{fill:none;stroke:url(#g-plata);stroke-width:9}
.reloj__aro2{fill:none;stroke:rgba(207,227,244,.6);stroke-width:1.2}
.reloj__cara{fill:url(#g-esfera)}
.reloj__marca{stroke:var(--tinta-suave);stroke-width:1.2;stroke-linecap:round}
.reloj__marca--hora{stroke:var(--tinta);stroke-width:2.6}
.reloj__num{font-family:var(--display);font-weight:500;font-size:23px;fill:var(--tinta);text-anchor:middle;dominant-baseline:central}
.reloj__gema{fill:#FFFFFF;stroke:var(--hielo-2);stroke-width:1.2;transition:fill .5s ease}
.reloj__gema.encendida{fill:#8FB3E4;stroke:#FFFFFF;filter:drop-shadow(0 0 5px rgba(143,179,228,.9))}
.reloj__ahora{
  margin:10px auto 0;
  width:fit-content;
  padding:6px 16px 7px;
  border-radius:999px;
  background:rgba(14,23,51,.8);
  border:1px solid rgba(207,227,244,.55);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--hielo-vivo);
}
.momentos{position:relative;list-style:none;margin:24px auto 0;padding:0 0 0 30px;max-width:560px}
.momentos::before{content:'';position:absolute;left:8px;top:10px;bottom:30px;width:1px;background:linear-gradient(180deg,rgba(207,227,244,.6),rgba(207,227,244,.12))}
.momento{position:relative;display:flex;flex-direction:column;padding:18px 0 9vh;opacity:.5;transition:opacity .6s ease}
.momento:last-child{padding-bottom:12px}
.momento::before{
  content:'';
  position:absolute;
  left:-27px;
  top:36px;
  width:12px;
  height:12px;
  rotate:45deg;
  border:1px solid var(--hielo);
  background:var(--noche);
  transition:background-color .5s ease,box-shadow .5s ease;
}
.momento.pasado,.momento.activo{opacity:1}
.momento.pasado::before,.momento.activo::before{background:var(--hielo-vivo);box-shadow:0 0 14px 3px rgba(207,227,244,.55)}
.momento__hora{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--hielo)}
.momento__que{margin-top:4px;font-family:var(--display);font-weight:500;font-size:clamp(26px,7.4vw,34px);line-height:1.15;color:#FFFFFF;text-wrap:balance}
.momento__nota{margin-top:4px;font-size:15.5px;color:var(--texto-suave)}
.momento--medianoche .momento__que{font-style:italic}

/* ------------------------------------------------------------------
   EL CAMBIO DE ZAPATILLA
   ------------------------------------------------------------------ */
.cambio{padding:80px 22px 78px;color:var(--tinta);background:radial-gradient(ellipse 70% 45% at 50% 100%,rgba(169,198,230,.45),rgba(169,198,230,0) 70%),linear-gradient(180deg,var(--hielo-vivo) 0%,var(--perla) 100%)}
.cambio__dentro{display:grid;gap:34px;justify-items:center;max-width:1040px;margin:0 auto}
.cambio__foto{position:relative;width:min(56vw,250px);aspect-ratio:3/4;margin:0;border-radius:999px 999px 18px 18px;overflow:hidden;box-shadow:0 0 0 1px rgba(19,32,74,.2),0 0 0 8px #FFFFFF,0 0 0 9px var(--hielo-2),0 20px 40px rgba(19,32,74,.18)}
.cambio__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.cambio__texto{text-align:center;max-width:560px}
.cambio__intro{margin:0 auto;max-width:30em;font-size:17px;color:var(--tinta-suave);text-wrap:pretty}
.pedestal{
  position:relative;
  display:block;
  width:min(80vw,360px);
  aspect-ratio:1.45;
  margin:18px auto 0;
  padding:0;
  border:0;
  border-radius:40px;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pedestal::before{
  content:'';
  position:absolute;
  left:12%;
  right:12%;
  bottom:4%;
  height:30%;
  border-radius:50%;
  border:1.5px solid rgba(19,32,74,.35);
  animation:anillo-cojin 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes anillo-cojin{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.18,1.45);opacity:0}}
.pedestal[aria-pressed="true"]::before{animation:none;opacity:0}
.pedestal__cojin{
  position:absolute;
  left:12%;
  right:12%;
  bottom:4%;
  height:30%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%,#FFFFFF 0%,#DCE7F5 45%,#A9BFDD 78%,#8EA7CB 100%);
  box-shadow:0 12px 26px rgba(19,32,74,.22),inset 0 -6px 14px rgba(19,32,74,.18),0 0 0 3px rgba(255,255,255,.7),0 0 0 4px rgba(135,147,173,.6);
}
.pedestal__luz{
  position:absolute;
  left:50%;
  top:46%;
  width:120%;
  aspect-ratio:1;
  margin:-60% 0 0 -60%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,1) 0%,rgba(231,242,252,.85) 22%,rgba(169,198,230,.3) 45%,rgba(169,198,230,0) 66%);
  opacity:0;
  pointer-events:none;
}
.pedestal__plana,.pedestal__cristal{position:absolute;left:12%;width:76%;height:auto;bottom:21%}
.pedestal__plana{filter:drop-shadow(0 8px 10px rgba(19,32,74,.25))}
.pedestal__cristal{opacity:0;visibility:hidden}
.pedestal:focus-visible{outline:2px solid var(--tinta);outline-offset:6px}
.cambio__pista{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  margin:18px 0 0;
  padding:0 22px 0 16px;
  border-radius:999px;
  border:1px solid var(--tinta);
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--tinta);
  background:transparent;
  transition:background-color .35s ease,color .35s ease;
}
.cambio__pista .pista__mano{color:currentColor}
/* nace llamativa (táctil y mouse); pasar el cursor por la zapatilla la invierte */
.cambio__pista{background:var(--tinta);color:var(--perla)}
.pedestal:hover + .cambio__pista{background:transparent;color:var(--tinta)}
@media (hover:none){.pedestal:hover + .cambio__pista{background:var(--tinta);color:var(--perla)}}
.cambio__hecho{margin:16px auto 0;max-width:26em;font-family:var(--display);font-style:italic;font-size:21px;line-height:1.35;color:var(--tinta)}
.cambio__hecho b{color:var(--tinta)}

/* ------------------------------------------------------------------
   GALERÍA · telones de raso que giran como un vals
   ------------------------------------------------------------------ */
.galeria-sec{padding:80px 22px 64px}
.galeria{
  display:flex;
  gap:22px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:16px 14vw 18px;
  margin:10px -22px 0;
  scrollbar-width:none;
}
.galeria::-webkit-scrollbar{display:none}
.postal{position:relative;flex:0 0 70vw;max-width:330px;margin:0;scroll-snap-align:center;transition:opacity .45s ease}
.postal__foto{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:999px 999px 16px 16px;background:var(--azul);box-shadow:0 0 0 1px rgba(207,227,244,.55),0 0 0 6px rgba(14,23,51,.9),0 0 0 7px rgba(207,227,244,.3)}
.postal__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.postal .telon{border-radius:999px 999px 16px 16px;overflow:hidden;bottom:auto;aspect-ratio:3/4;width:100%}
.postal figcaption{margin-top:16px;text-align:center;font-size:12.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--hielo);transition:color .35s ease}
.puntos{display:flex;justify-content:center;gap:0;margin-top:10px}
.punto{position:relative;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.punto::before{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;rotate:45deg;border:1px solid var(--hielo);transition:background-color .35s ease}
.punto--activo::before{background:var(--hielo)}

/* ------------------------------------------------------------------
   CÓDIGO DE VESTIMENTA
   ------------------------------------------------------------------ */
.vestir{padding:80px 22px 80px;text-align:center;color:var(--tinta);background:linear-gradient(180deg,var(--perla) 0%,var(--perla-2) 100%)}
.vestir .rotulo{color:var(--tinta-suave)}
.vestir .titulo{color:var(--tinta);font-style:italic}
.atuendos{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:600px;margin:26px auto 0;align-items:start}
.atuendo{margin:0;display:flex;flex-direction:column;align-items:center}
.atuendo__arco{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  height:min(78vw,380px);
  padding:22px 10px 12px;
  border-radius:999px 999px 18px 18px;
  background:radial-gradient(ellipse at 50% 20%,#FFFFFF 0%,#EAF1FA 60%,#D9E5F3 100%);
  box-shadow:inset 0 0 0 1px rgba(19,32,74,.14),inset 0 0 0 6px #FFFFFF,inset 0 0 0 7px rgba(169,198,230,.7);
  overflow:hidden;
}
.atuendo__arco img{height:100%;width:auto;max-width:92%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(19,32,74,.22));transform-origin:50% 0}
.atuendo figcaption{margin-top:12px;display:flex;flex-direction:column;align-items:center}
.atuendo figcaption b{font-family:var(--display);font-style:italic;font-weight:500;font-size:30px;line-height:1.1;color:var(--tinta)}
.atuendo figcaption span{font-size:15px;line-height:1.45;color:var(--tinta-suave);text-wrap:balance}
.vestir__nota{margin:28px auto 0;max-width:30em;font-size:16px;font-weight:600;letter-spacing:.06em;color:var(--tinta-suave)}
.tonos{display:flex;justify-content:center;flex-wrap:wrap;gap:18px 22px;list-style:none;margin:16px 0 0;padding:0}
.tonos li{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.tono{display:block;width:46px;height:46px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(19,32,74,.25),0 0 0 5px #FFFFFF,0 0 0 6px rgba(135,147,173,.6)}
.tono--plata{background:linear-gradient(135deg,#8793AD 0%,#E4EAF3 45%,#FFFFFF 55%,#AEB9CD 100%)}
.reservado{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  max-width:520px;
  margin:32px auto 0;
  padding:18px 22px;
  border-radius:24px;
  text-align:left;
  background:var(--noche);
  color:var(--texto);
  box-shadow:0 16px 34px rgba(19,32,74,.22);
}
.reservado__muestra{position:relative;flex:0 0 auto;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFFFFF 0%,#CFE3F4 40%,#9EC0E6 100%);box-shadow:0 0 0 3px var(--noche),0 0 0 4px rgba(231,242,252,.8),0 0 26px rgba(207,227,244,.6)}
.reservado__muestra i{position:absolute;right:4px;top:2px;width:16px;height:16px;background:#FFFFFF;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:titilar 2.4s ease-in-out infinite}
.reservado__texto{margin:0;font-size:16px;line-height:1.55;color:var(--texto)}
.reservado__texto b{color:#FFFFFF}

/* ------------------------------------------------------------------
   MESA DE REGALOS · lluvia de sobres
   ------------------------------------------------------------------ */
.regalos{padding:80px 20px 80px;text-align:center}
.regalos__intro{margin:0 auto;max-width:30em;color:var(--texto-suave);text-wrap:balance}
.regalos__lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;list-style:none;margin:28px auto 0;padding:0;max-width:820px}
.regalo{display:flex;flex-direction:column;align-items:center;text-align:center}
.regalo__vitrina{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  max-width:188px;
  height:160px;
  padding:22px 12px 14px;
  overflow:hidden;
  border-radius:999px 999px 16px 16px;
  background:linear-gradient(180deg,rgba(207,227,244,.16) 0%,rgba(207,227,244,.05) 100%);
  box-shadow:inset 0 0 0 1px rgba(207,227,244,.5),inset 0 0 0 6px rgba(14,23,51,.35),inset 0 0 0 7px rgba(207,227,244,.18);
  transition:background-color .4s ease;
}
.regalo__vitrina::after{content:'';position:absolute;left:0;top:0;width:40%;height:100%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.14) 50%,rgba(255,255,255,0) 100%);pointer-events:none}
.regalo__vitrina img{max-height:130px;width:auto;max-width:78%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 10px 12px rgba(4,8,22,.45))}
.regalo b{display:block;margin-top:12px;font-family:var(--display);font-weight:500;font-size:23px;line-height:1.15;color:#FFFFFF}
.regalo small{display:block;margin-top:2px;font-size:14.5px;line-height:1.4;color:var(--texto-suave)}
.sobres{
  position:relative;
  max-width:560px;
  margin:44px auto 0;
  padding:36px 22px 30px;
  overflow:hidden;
  border-radius:200px 200px 28px 28px;
  color:var(--tinta);
  background:linear-gradient(180deg,#FFFFFF 0%,var(--perla-2) 100%);
  box-shadow:inset 0 0 0 1px rgba(19,32,74,.12),inset 0 0 0 7px #FFFFFF,inset 0 0 0 8px rgba(169,198,230,.8);
}
.sobres__lluvia{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sobre-cae{position:absolute;top:-60px;width:var(--t,34px);height:auto;opacity:.2;animation:caer var(--d,9s) linear var(--r,0s) infinite}
@keyframes caer{0%{transform:translate3d(0,0,0) rotate(var(--g0,-12deg))}100%{transform:translate3d(var(--x,20px),760px,0) rotate(var(--g1,18deg))}}
.sobres.pausa .sobre-cae{animation-play-state:paused}
.sobres__ico{position:relative;width:86px;height:auto;margin:0 auto 8px;filter:drop-shadow(0 8px 12px rgba(19,32,74,.25))}
.sobres__titulo{position:relative;margin:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:36px;line-height:1.1;color:var(--tinta)}
.sobres__texto{position:relative;margin:8px auto 0;max-width:26em;font-size:16px;color:var(--tinta-suave);text-wrap:balance}
.sobres__qr{position:relative;margin:20px auto 0;display:flex;flex-direction:column;align-items:center}
.sobres__qr img{width:176px;height:176px;padding:10px;border-radius:12px;background:var(--perla);box-shadow:0 0 0 1px rgba(19,32,74,.3),0 0 0 6px #FFFFFF,0 0 0 7px var(--hielo-2)}
.sobres__qr figcaption{margin-top:16px;max-width:19em;font-size:14.5px;line-height:1.5;color:var(--tinta-suave);text-wrap:balance}

/* ------------------------------------------------------------------
   CONFIRMAR
   ------------------------------------------------------------------ */
.confirmar{padding:78px 22px 80px;text-align:center;color:var(--tinta);background:radial-gradient(ellipse 70% 50% at 50% 100%,rgba(169,198,230,.5),rgba(169,198,230,0) 70%),linear-gradient(180deg,var(--hielo-vivo) 0%,var(--perla) 100%)}
.confirmar .rotulo{color:var(--tinta-suave)}
.confirmar .titulo{color:var(--tinta);font-style:italic}
.confirmar__zapatilla{width:min(40vw,170px);height:auto;margin:0 auto 12px;filter:drop-shadow(0 12px 16px rgba(19,32,74,.28)) brightness(.92) contrast(1.15)}
.confirmar__texto{margin:0 auto;max-width:28em;color:var(--tinta-suave);text-wrap:balance}
.confirmar__texto b{color:var(--tinta)}
.contador{display:flex;align-items:center;justify-content:center;gap:18px;margin:26px 0 24px}
.contador__btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border:1px solid var(--tinta);border-radius:50%;background:transparent;color:var(--tinta);cursor:pointer;transition:background-color .3s ease,color .3s ease}
.contador__btn svg{width:20px;height:20px}
.contador__btn:hover,.contador__btn:focus-visible{background:var(--tinta);color:var(--perla)}
.contador__n{min-width:8.5em;font-size:16px;color:var(--tinta-suave)}
.contador__n b{display:block;font-family:var(--display);font-weight:500;font-size:54px;line-height:1;color:var(--tinta);font-variant-numeric:lining-nums}
.boton--wa{background:var(--tinta);border-color:var(--tinta);color:var(--perla)}
.boton--wa:hover,.boton--wa:focus-visible{background:var(--hielo-vivo);border-color:var(--tinta);color:var(--tinta)}

/* ------------------------------------------------------------------
   MI VALS · la cajita de música
   ------------------------------------------------------------------ */
.cancion{padding:80px 22px 78px;text-align:center}
.cancion .titulo{margin-bottom:4px;font-style:italic}
.cancion__artista{margin:0;font-size:14px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--hielo)}
.cajita{position:relative;display:block;width:min(52vw,220px);margin:30px auto 0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cajita img{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 16px 26px rgba(4,8,22,.6))}
.cajita__halo{position:absolute;left:50%;top:40%;width:130%;aspect-ratio:1;margin:-65% 0 0 -65%;border-radius:50%;background:radial-gradient(circle,rgba(207,227,244,.42) 0%,rgba(207,227,244,0) 64%);opacity:.4;transition:opacity .5s ease}
.cajita:hover .cajita__halo,.cajita:focus-visible .cajita__halo,.cancion.tocando .cajita__halo{opacity:1}
.cajita__notas{position:absolute;left:44%;top:0;z-index:2;width:44%;height:44%;pointer-events:none}
.cajita__notas i{position:absolute;left:calc(var(--i,0) * 24%);bottom:0;width:12px;height:12px;background:#FFFFFF;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0}
.cajita__notas i:nth-child(1){--i:0}.cajita__notas i:nth-child(2){--i:1}.cajita__notas i:nth-child(3){--i:2}.cajita__notas i:nth-child(4){--i:3}
.cancion.tocando .cajita__notas i{animation:nota 2.2s ease-out infinite}
.cancion.tocando .cajita__notas i:nth-child(2){animation-delay:.55s}
.cancion.tocando .cajita__notas i:nth-child(3){animation-delay:1.1s}
.cancion.tocando .cajita__notas i:nth-child(4){animation-delay:1.65s}
@keyframes nota{0%{transform:translate(0,0) scale(.5) rotate(0);opacity:0}20%{opacity:1}100%{transform:translate(16px,-96px) scale(1.2) rotate(90deg);opacity:0}}
.cancion__pista{margin:16px 0 0;font-size:15px;color:var(--texto-suave)}
.cancion__pista a{color:var(--hielo-vivo)}
.yt-oculto{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:-9999px}

/* ------------------------------------------------------------------
   CIERRE
   ------------------------------------------------------------------ */
.cierre{padding:80px 22px 84px;text-align:center;background:radial-gradient(ellipse 70% 50% at 50% 30%,rgba(90,130,200,.3),rgba(90,130,200,0) 70%),linear-gradient(180deg,var(--noche-2) 0%,var(--noche) 100%)}
.cierre__tiara{width:min(56vw,250px);margin:0 auto 10px;filter:drop-shadow(0 10px 18px rgba(4,8,22,.55))}
.cierre__titulo{margin:0 auto;max-width:11em;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(44px,12.5vw,92px);line-height:1.04;color:#FFFFFF;text-wrap:balance;text-shadow:0 0 40px rgba(170,205,240,.3)}
.cierre__firma{margin:14px 0 0;font-family:var(--guion);font-size:64px;line-height:1.1;color:var(--hielo-vivo)}
.cierre__texto{margin:6px auto 28px;font-size:14px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--hielo)}
.boton--claro{border-color:var(--hielo)}

/* ------------------------------------------------------------------
   CRÉDITOS · pie común
   ------------------------------------------------------------------ */
.creditos{padding:56px 24px calc(var(--abajo) + 104px);text-align:center;background:#0A1128;border-top:1px solid rgba(207,227,244,.25)}
.creditos__pregunta{margin:0 0 18px;font-family:var(--display);font-style:italic;font-size:clamp(24px,6.6vw,30px);line-height:1.25;color:var(--perla)}
.creditos__wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 26px;
  border-radius:999px;
  background:var(--hielo-vivo);
  color:var(--tinta);
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:none;
  transition:background-color .35s ease,color .35s ease;
}
.creditos__wa svg{width:20px;height:20px}
.creditos__wa:hover,.creditos__wa:focus-visible{background:var(--hielo-2);color:var(--tinta);box-shadow:none}
.creditos__correo{
  display:table;
  margin:20px auto 0;
  padding:12px 2px;
  color:var(--texto-suave);
  font-size:14.5px;
  text-decoration:none;
  background:linear-gradient(var(--hielo),var(--hielo)) no-repeat 0 calc(100% - 9px)/0 1px;
  transition:background-size .4s ease,color .35s ease;
}
.creditos__correo:hover,.creditos__correo:focus-visible{background-size:100% 1px;color:#FFFFFF}
.creditos__extras{display:none}
.creditos__marca{margin:28px auto 0;padding-top:20px;max-width:420px;border-top:1px solid rgba(207,227,244,.25);display:flex;flex-direction:column;gap:4px}
.creditos__logo{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.06em;color:#FFFFFF}
.creditos__lema{font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--texto-suave)}

/* celulares angostos: los botones no se parten en dos líneas */
@media (max-width:380px){
  .boton,.creditos__wa,.lugar__ir,.portada__pista,.cambio__pista{letter-spacing:.1em}
  .boton,.creditos__wa{padding:0 18px}
  .portada__pista{padding:0 20px 0 16px}
  .colgante{min-width:132px}
  .colgante--mini{min-width:100px}
}

/* ------------------------------------------------------------------
   ESCRITORIO
   ------------------------------------------------------------------ */
@media (min-width:768px){
  body{font-size:18px}
  .titulo{font-size:clamp(56px,6vw,86px)}
  .rotulo{font-size:13px}

  .quince{padding:110px 48px 86px}
  .quince__dentro{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:80px;align-items:center;justify-items:start}
  .ventanal{width:380px}
  .quince__texto{text-align:left}
  .quince__texto .rotulo{text-align:left}
  .quince__edad{justify-content:flex-start}
  .quince__nombre{font-size:clamp(104px,11.5vw,160px)}
  .quince__dedicatoria{margin-left:0}

  .corte{padding:86px 40px 90px}
  .candelabro{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;max-width:920px}
  .candelabro__img{width:280px;grid-column:1 / -1}
  .candelabro__nivel + .candelabro__nivel{margin-top:30px}
  .candelabro__nivel--corte{grid-column:1 / -1;margin-top:34px}
  .candelabro__nivel[data-nivel="1"] .colgantes,.candelabro__nivel[data-nivel="2"] .colgantes{flex-wrap:nowrap}
  .colgante{min-width:190px}
  .colgante b{font-size:24px}
  .colgantes--corte{max-width:720px}
  .colgante--mini{min-width:140px}

  .fecha{width:380px;padding:54px 24px 34px}
  .fecha__num{font-size:196px}
  .fecha__mes{font-size:38px}
  .cuenta__dato{min-width:106px}
  .cuenta__n{font-size:56px}

  .donde{padding:86px 40px 86px}
  .lugares{grid-template-columns:1fr 1fr;gap:30px}
  .lugar{padding:44px 34px 36px}

  .horas{padding:86px 40px 86px}
  .horas__cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start;margin-top:30px}
  .reloj-pista{top:calc(50vh - 190px);margin:0;padding:0;background:none}
  .reloj{width:min(34vw,360px)}
  .momentos{margin:0;padding-top:6vh}
  .momento{padding-bottom:7vh}

  .cambio{padding:86px 40px 86px}
  .cambio__dentro{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:72px;align-items:center}
  .cambio__foto{width:340px}

  .vestir{padding:86px 40px 82px}
  .atuendos{gap:36px;max-width:660px}
  .atuendo__arco{height:360px}

  .regalos{padding:86px 40px 86px}
  .regalos__lista{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px}
  .regalo__vitrina{max-width:200px;height:182px}
  .regalo:hover .regalo__vitrina{background:linear-gradient(180deg,rgba(207,227,244,.26) 0%,rgba(207,227,244,.08) 100%)}
  .regalo:hover .regalo__vitrina img{transform:scale(1.07)}
  .sobres{padding:48px 44px 40px}

  .galeria-sec{padding:86px 40px 76px}
  .galeria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 34px;overflow:visible;padding:14px 8px 0;margin:24px auto 0;max-width:940px}
  .postal{flex:none;max-width:none}
  .puntos{display:none}
  /* el cursor apaga a las otras y agranda la FOTO (la caja nunca se mueve) */
  .galeria:has(.postal:hover) .postal{opacity:.45}
  .galeria:has(.postal:hover) .postal:hover{opacity:1}
  .postal:hover .postal__foto img{transform:scale(1.06)}
  .postal:hover figcaption{color:#FFFFFF}

  .confirmar{padding:86px 40px 86px}
  .cancion{padding:86px 40px 82px}
  .cierre{padding:84px 40px 80px}
  .cierre__tiara{width:210px}
  .cierre__titulo{font-size:clamp(56px,6vw,80px)}
}
@media (min-width:1100px){
  .quince__dentro{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:100px}
  .ventanal{width:420px}
}

/* ------------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .revela{opacity:1;transform:none;transition:none}
  .zapatilla__brillo,.chispa-z,.mota,.copo,.sobre-cae,.portada__pista::before,.pista__mano,.cajita__notas i,.musica-flotante__ondas i,.musica-flotante__zapatilla i,.reservado__muestra i,.pedestal::before{animation:none!important}
  .telon{display:none}
  .momento{opacity:1}
}