/* ==================================================================
   Mis 50 años · Carmen — gala art déco nocturna (cumple-50)
   Paleta única: negro, dorado, champán y marfil.
   Tipografías: Italiana (títulos), Aboreto (rótulos), Tenor Sans (texto).
   Forma propia: el chaflán art déco (esquinas cortadas) y el abanico.
   ================================================================== */

:root{
  --negro:#0B0908;
  --noche:#120E0B;
  --carbon:#1A1511;
  --humo:#2A2118;
  --oro:#C9A45C;
  --oro-claro:#E6C88A;
  --oro-vivo:#F3DFAE;
  --oro-osc:#8C6A2F;
  --bronce:#6E5122;
  --champan:#EAD9B8;
  --marfil:#F6F0E4;
  --marfil-2:#EEE3CE;
  --texto:#EDE4D3;
  --texto-suave:#C4B597;
  --tinta:#1B1510;
  --tinta-suave:#54452F;
  --titulo-oro:#EBD3A0;
  --linea:rgba(201,164,92,.5);
  --display:'Italiana','Didot','Bodoni 72','Times New Roman',serif;
  --caps:'Aboreto','Italiana',serif;
  --sans:'Tenor Sans','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(--negro)}
body{
  background:var(--negro);
  color:var(--texto);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.cerrado{overflow:hidden;height:100%}
img{max-width:100%;display:block}
b,strong{font-weight:400;color:var(--oro-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(--oro-claro);outline-offset:3px}

/* ------------------------------------------------------------------
   PORTADA · telón con el 50 (el fotograma 0 del video)
   ------------------------------------------------------------------ */
.portada{position:fixed;inset:0;z-index:60;overflow:hidden;background:var(--negro)}
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}
/* el foco que respira sobre el 50 */
.foco{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(circle var(--foco-r,220px) at var(--foco-x,50%) var(--foco-y,42%),rgba(255,214,150,.30) 0%,rgba(255,214,150,.10) 45%,rgba(255,214,150,0) 72%);
  mix-blend-mode:screen;
  opacity:.35;
}
/* el 50: caja por left/top/width/height en píxeles reales (sin transform: se ve nítido) */
.escena{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden}
.portada.lista .escena{visibility:visible}
.numero{position:absolute;left:0;top:0;width:0;height:0}
.numero img{display:block;width:100%;height:100%}
.numero__brillo{
  position:absolute;
  inset:0;
  -webkit-mask:url(assets/numero-50.webp) center/100% 100% no-repeat;
  mask:url(assets/numero-50.webp) center/100% 100% no-repeat;
  background:linear-gradient(105deg,rgba(255,250,232,0) 38%,rgba(255,250,232,.9) 48%,rgba(255,236,190,.35) 53%,rgba(255,250,232,0) 62%) no-repeat;
  background-size:280% 100%;
  background-position:140% 0;
  mix-blend-mode:screen;
  animation:barrido 6s ease-in-out 1.4s infinite;
}
@keyframes barrido{0%{background-position:140% 0}34%,100%{background-position:-40% 0}}
/* polvo de oro flotando */
.chispas{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.chispa{
  position:absolute;
  bottom:-10px;
  width:var(--t,3px);
  height:var(--t,3px);
  border-radius:50%;
  background:#FFE6AE;
  box-shadow:0 0 6px 1px rgba(255,214,140,.8);
  opacity:0;
  animation:flotar var(--d,12s) linear var(--r,0s) infinite;
}
@keyframes flotar{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:.9}
  50%{opacity:.35}
  70%{opacity:.85}
  100%{transform:translate3d(var(--x,20px),-105vh,0);opacity:0}
}

/* cabecera: nombre y fecha encima del 50 (vertical) o a sus lados (horizontal) */
.portada__cabecera{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(100% - var(--n-top,26vh) + clamp(10px,2vh,22px));
  z-index:5;
  padding:0 max(18px,var(--izq)) 0 max(18px,var(--der));
  text-align:center;
  pointer-events:none;
  visibility:hidden;
}
.portada.lista .portada__cabecera,.portada.lista .portada__fecha{visibility:visible}
.portada__titular{display:flex;flex-direction:column;align-items:center}
.portada__sobre{
  display:block;
  font-family:var(--caps);
  font-size:clamp(10.5px,2.9vw,13px);
  letter-spacing:.34em;
  color:var(--champan);
  text-shadow:0 2px 10px rgba(0,0,0,.8);
  margin:0 0 4px .34em;
}
.portada__nombre{
  display:block;
  font-family:var(--display);
  /* nunca más alto que el espacio libre sobre el 50 (tabletas en vertical recortan el arte arriba) */
  font-size:min(17vw,8.4vh,104px,calc(var(--n-top,300px) * .48));
  line-height:.98;
  color:var(--oro-vivo);
  letter-spacing:.02em;
  text-shadow:0 2px 16px rgba(0,0,0,.85),0 0 34px rgba(233,196,120,.28);
}
/* la fecha va justo debajo del 50 (vertical) o a su derecha (horizontal) */
.portada__fecha{
  position:absolute;
  left:0;
  right:0;
  top:calc(var(--n-bottom,70vh) + clamp(10px,2.2vh,22px));
  z-index:5;
  width:fit-content;
  max-width:calc(100% - 32px);
  pointer-events:none;
  visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px 12px;
  margin:0 auto;
  padding:8px 18px 9px;
  border:1px solid rgba(201,164,92,.75);
  background:rgba(11,9,8,.58);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  color:var(--oro-vivo);
  font-size:clamp(12.5px,3.5vw,15px);
  line-height:1.35;
  letter-spacing:.03em;
  box-shadow:inset 0 0 0 3px rgba(11,9,8,.4),inset 0 0 0 4px rgba(201,164,92,.25);
}
.portada__sep{display:inline-block;width:6px;height:6px;transform:rotate(45deg);background:var(--oro)}
.portada__fecha .solo-anio{display:none}
html.horizontal .portada__fecha .solo-anio{display:inline}

/* horizontal (escritorio, celular echado): el nombre a la izquierda del 50 y la fecha a la derecha */
html.horizontal .portada__cabecera{top:0;bottom:0;padding:0}
html.horizontal .portada__titular{
  position:absolute;
  right:calc(100% - var(--n-left,40vw) + 3.2vw);
  top:var(--n-mid,50vh);
  transform:translateY(-50%);
  align-items:flex-end;
  text-align:right;
  width:calc(var(--n-left,40vw) - 6vw);
}
html.horizontal .portada__sobre{margin:0 0 6px}
html.horizontal .portada__nombre{font-size:min(8.6vw,15vh,128px)}
@media (orientation:landscape) and (max-height:500px){
  .portada__tap{padding-bottom:calc(var(--abajo) + 12px)}
  .portada__pista{min-height:44px}
}
html.horizontal .portada__fecha{
  position:absolute;
  right:auto;
  width:auto;
  max-width:none;
  left:calc(var(--n-right,60vw) + 3.2vw);
  top:var(--n-mid,50vh);
  transform:translateY(-50%);
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin:0;
  padding:14px 22px 15px;
  font-size:clamp(14px,1.45vw,19px);
  text-align:left;
}
html.horizontal .portada__sep{width:42px;height:1px;transform:none}

/* 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(24px,5.6vh,56px));
  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:50px;
  padding:0 24px 0 18px;
  border:1px solid rgba(230,200,138,.9);
  background:rgba(11,9,8,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--oro-vivo);
  font-family:var(--caps);
  font-size:12.5px;
  letter-spacing:.2em;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.portada__pista::before{
  content:'';
  position:absolute;
  inset:-5px;
  border:1px solid rgba(230,200,138,.85);
  animation:anillo 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes anillo{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.18,1.45);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)}}
.portada__tap:hover .portada__pista,
.portada__tap:focus-visible .portada__pista{background:var(--oro);color:var(--negro);border-color:var(--oro-vivo)}
@media (hover:none){
  .portada__pista{background:var(--oro);color:var(--negro);border-color:var(--oro-vivo)}
}

.velo{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:radial-gradient(circle at 50% 46%,#3A2C1A 0%,#16110C 45%,var(--negro) 80%);
}

/* ------------------------------------------------------------------
   EL RECORRIDO · video, foto en el marco 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(--negro)}
.viaje__fin{opacity:0}
.viaje__foto{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  overflow:hidden;
  opacity:0;
  z-index:1;
  background:#000;
}
.viaje__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.viaje__foto::after{
  content:'';
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,236,190,.45),inset 0 0 24px rgba(0,0,0,.35);
}
.viaje__foto--luz::after{animation:fogonazo 1.6s ease-out 1}
@keyframes fogonazo{0%{box-shadow:inset 0 0 0 1px rgba(255,236,190,.9),inset 0 0 80px 30px rgba(255,236,190,.85)}100%{box-shadow:inset 0 0 0 1px rgba(255,236,190,.45),inset 0 0 24px rgba(0,0,0,.35)}}

/* placa art déco: negro translúcido con doble filete dorado */
.viaje__texto,.viaje__final,.viaje__placa{
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.viaje__texto{
  position:absolute;
  text-wrap:balance;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 12%);
  z-index:2;
  margin:0;
  padding:12px 18px 13px;
  text-align:center;
  background:rgba(11,9,8,.64);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.7),inset 0 0 0 5px rgba(11,9,8,.1),inset 0 0 0 6px rgba(201,164,92,.3);
  font-family:var(--display);
  font-size:clamp(25px,7.2vw,40px);
  line-height:1.2;
  color:var(--oro-vivo);
  opacity:0;
}
.viaje__final{
  position:absolute;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 3.4%);
  z-index:2;
  padding:10px 16px 14px;
  text-align:center;
  background:rgba(11,9,8,.66);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.7),inset 0 0 0 5px rgba(11,9,8,.1),inset 0 0 0 6px rgba(201,164,92,.3);
  opacity:0;
}
.viaje__placa{margin:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.viaje__nombre{display:block;font-family:var(--display);font-size:clamp(42px,12.5vw,66px);line-height:1.02;color:var(--oro-vivo)}
.viaje__invita{display:block;margin-top:2px;font-family:var(--caps);font-size:clamp(11px,3.2vw,13.5px);letter-spacing:.22em;color:var(--champan)}
.viaje__invita b{color:var(--oro-vivo)}

html.horizontal .viaje__texto{
  left:0;
  right:0;
  width:fit-content;
  max-width:88vw;
  margin:0 auto;
  bottom:calc(var(--abajo) + 7%);
  padding:12px 34px 14px;
  font-size:clamp(28px,3.1vw,46px);
}
html.horizontal .viaje__final{inset:0;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.horizontal .viaje__placa{
  position:absolute;
  top:var(--m-mid,50vh);
  transform:translateY(-50%);
  width:min(26vw,380px);
  padding:18px 22px 20px;
  background:rgba(11,9,8,.6);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.7),inset 0 0 0 5px rgba(11,9,8,.1),inset 0 0 0 6px rgba(201,164,92,.3);
  text-align:center;
}
html.horizontal .viaje__placa--nombre{right:calc(100% - var(--m-left,38vw) + 4vw)}
html.horizontal .viaje__placa--invita{left:calc(var(--m-right,62vw) + 4vw)}
html.horizontal .viaje__nombre{font-size:clamp(46px,5vw,82px)}
html.horizontal .viaje__invita{font-size:clamp(13px,1.2vw,17px);line-height:1.9;margin:0}
html.horizontal .viaje__invita b{display:block;font-family:var(--caps);font-size:1.75em;letter-spacing:.12em;line-height:1.3;margin-top:8px}

/* ------------------------------------------------------------------
   BOTONES FIJOS · volver, música y reflector
   ------------------------------------------------------------------ */
.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:44px;
  padding:0 18px 0 12px;
  border:1px solid rgba(201,164,92,.7);
  background:rgba(11,9,8,.74);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--oro-vivo);
  font-family:var(--caps);
  font-size:12px;
  letter-spacing:.2em;
  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(--oro);color:var(--negro)}
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:9px;
  min-height:54px;
  padding:5px 16px 5px 6px;
  border:1px solid rgba(201,164,92,.75);
  background:rgba(11,9,8,.78);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--oro-claro);
  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 los textos van abajo: el botón se aparta y vuelve al terminar */
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(--humo);border-color:var(--oro-vivo)}
.musica-flotante__copa{position:relative;display:block;width:40px;height:42px;border-radius:50%;background:radial-gradient(circle at 50% 60%,rgba(201,164,92,.35),rgba(11,9,8,0) 70%)}
.musica-flotante__copa img{position:absolute;left:50%;top:50%;width:26px;height:auto;margin:-18px 0 0 -13px}
.musica-flotante__copa i{
  position:absolute;
  left:50%;
  top:9px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#FFF3D0;
  opacity:0;
}
.musica-flotante--tocando .musica-flotante__copa i{animation:burbujita 1.6s ease-in infinite}
.musica-flotante--tocando .musica-flotante__copa i:nth-child(3){animation-delay:.5s;margin-left:-4px}
.musica-flotante--tocando .musica-flotante__copa i:nth-child(4){animation-delay:1s;margin-left:3px}
@keyframes burbujita{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(-16px);opacity:0}}
.musica-flotante__ondas{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.musica-flotante__ondas i{display:block;width:3px;height:6px;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(230,200,138,.55)}
.musica-flotante:not(.musica-flotante--tocando) .musica-flotante__copa img{filter:grayscale(.7) brightness(.75)}

/* reflector de escenario: una luz cálida que sigue al cursor (solo con ratón) */
.reflector{
  position:fixed;
  left:0;
  top:0;
  z-index:40;
  width:900px;
  height:900px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,224,168,.13) 0%,rgba(255,224,168,.06) 28%,rgba(255,224,168,0) 62%);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .8s ease;
}
html.raton body.abierto .reflector{opacity:1}
html.tactil .reflector{display:none}

/* ------------------------------------------------------------------
   CUERPO · piezas comunes
   ------------------------------------------------------------------ */
.gala{position:relative;z-index:1;opacity:0;transition:opacity .7s ease}
body.abierto .gala{opacity:1}
section{position:relative;overflow:hidden}
.rotulo{
  margin:0 0 10px;
  font-family:var(--caps);
  font-size:12px;
  line-height:1.6;
  letter-spacing:.32em;
  color:var(--oro);
  text-align:center;
}
.rotulo--tinta{color:var(--bronce)}
.rotulo--chico{margin-top:30px}
.titulo{
  position:relative;
  text-wrap:balance;
  margin:0 auto 18px;
  max-width:14em;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(42px,12vw,64px);
  line-height:1.04;
  letter-spacing:.01em;
  color:var(--titulo-oro);
  text-align:center;
}
.titulo--tinta{color:var(--tinta)}
/* letras que se encienden */
[data-letras]{position:relative}
[data-letras] .p{display:inline-block;white-space:nowrap}
[data-letras] .l{display:inline-block}
.chispa-titulo{
  position:absolute;
  width:22px;
  height:22px;
  margin:-11px 0 0 -11px;
  pointer-events:none;
  background:radial-gradient(circle,#FFF8E4 0%,#FFE3A6 30%,rgba(255,227,166,0) 70%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  transform:scale(0);
}
.revela{opacity:0;transform:translateY(16px);transition:opacity .75s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.revela.vista{opacity:1;transform:none}
/* orla art déco que se dibuja */
.orla{display:block;width:min(260px,72%);height:auto;margin:18px auto;overflow:visible}
.orla path,.dibuja path,.dibuja rect,.dibuja line{fill:none;stroke:var(--oro);stroke-width:1.2;stroke-linecap:square}
.orla--tinta path{stroke:var(--oro-osc)}
/* abanico art déco (lo arma el JS: varillas que giran sobre su eje) */
.abanico{display:block;overflow:visible}
.abanico .varilla{fill:url(#g-oro);stroke:rgba(11,9,8,.55);stroke-width:.6}
.abanico .abanico__arco{fill:none;stroke:var(--oro-claro);stroke-width:1.1}
.abanico .abanico__eje{fill:var(--oro-osc);stroke:var(--oro-vivo);stroke-width:.8}
/* burbujas de champán */
.burbujas{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.burbuja{
  position:absolute;
  bottom:-24px;
  border-radius:50%;
  border:1px solid rgba(240,222,180,.55);
  background:
    radial-gradient(circle at 32% 28%,rgba(255,252,240,.95) 0,rgba(255,252,240,.95) 9%,rgba(255,252,240,0) 22%),
    radial-gradient(circle at 50% 50%,rgba(255,236,190,0) 55%,rgba(255,236,190,.22) 80%,rgba(255,236,190,.05) 100%);
  opacity:0;
  animation:subir var(--d,12s) linear var(--r,0s) infinite;
}
.burbujas--oro .burbuja{border-color:rgba(140,106,47,.55);background:radial-gradient(circle at 32% 28%,#FFFFFF 0,#FFFFFF 10%,rgba(255,255,255,0) 24%),radial-gradient(circle at 50% 50%,rgba(201,164,92,0) 55%,rgba(201,164,92,.25) 82%,rgba(201,164,92,.05) 100%)}
.burbujas.pausa .burbuja,.burbujas.pausa .chispa{animation-play-state:paused}
@keyframes subir{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:.85}
  80%{opacity:.55}
  100%{transform:translate3d(var(--x,10px),calc(-1 * var(--alto,760px)),0);opacity:0}
}
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:0 28px;
  border:1px solid var(--oro);
  background:transparent;
  color:var(--oro-vivo);
  font-family:var(--caps);
  font-size:12.5px;
  letter-spacing:.2em;
  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(--oro);color:var(--negro)}

/* ------------------------------------------------------------------
   LA NOCHE DE CARMEN
   ------------------------------------------------------------------ */
.noche{
  padding:calc(var(--arriba) + 86px) 24px 84px;
  background:
    radial-gradient(ellipse 70% 45% at 50% 18%,rgba(201,164,92,.16) 0%,rgba(201,164,92,0) 70%),
    linear-gradient(180deg,#0E0B09 0%,var(--negro) 60%,var(--noche) 100%);
}
.noche__dentro{position:relative;z-index:1;display:grid;gap:34px;justify-items:center;max-width:1040px;margin:0 auto}
.retrato{position:relative;width:min(72vw,300px);aspect-ratio:3/4;margin:26px 0 0}
.retrato__abanico{position:absolute;left:50%;top:-22%;width:62%;margin-left:-31%;z-index:0}
.retrato__marco{
  position:absolute;
  inset:13px;
  z-index:1;
  overflow:hidden;
  background:#000;
  clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px),0 22px);
}
.retrato__marco img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.retrato__linea{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.noche__texto{text-align:center;max-width:560px}
.noche__nombre{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(72px,24vw,128px);
  line-height:.95;
  color:var(--oro-vivo);
  letter-spacing:.02em;
  text-shadow:0 0 40px rgba(233,196,120,.18);
}
.noche__edad{margin:8px 0 0;font-family:var(--caps);font-size:14px;letter-spacing:.3em;color:var(--champan)}
.noche__edad b{font-family:var(--caps);font-size:1.7em;letter-spacing:.06em;color:var(--oro-vivo);vertical-align:-.08em}
.noche__fecha{margin:0;font-size:18px;line-height:1.6;color:var(--texto)}
.noche__fecha b{display:inline-block;margin-top:2px;font-family:var(--caps);font-size:14px;letter-spacing:.24em;color:var(--oro-claro)}
.noche__frase{margin:18px auto 0;max-width:30em;color:var(--texto-suave);font-size:16px;text-wrap:balance}

/* ------------------------------------------------------------------
   CINCO DÉCADAS · línea de tiempo horizontal
   ------------------------------------------------------------------ */
.decadas{
  padding:84px 0 60px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%,rgba(201,164,92,.12),rgba(201,164,92,0) 70%),
    var(--noche);
  border-top:1px solid rgba(201,164,92,.18);
}
.decadas__cabeza{padding:0 24px;text-align:center;position:relative;z-index:1}
.decadas__cabeza .titulo{margin-bottom:10px}
.decadas__guia{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--texto-suave)}
.guia__mano{width:22px;height:22px;color:var(--oro-claro);animation:deslizar 2.2s ease-in-out infinite}
@keyframes deslizar{0%,100%{transform:translateX(6px)}50%{transform:translateX(-8px) rotate(-8deg)}}
.solo-raton{display:none}
html.pin .solo-raton{display:inline}
html.pin .solo-tactil{display:none}
.decadas__ventana{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:34px 0 8px;
}
.decadas__ventana::-webkit-scrollbar{display:none}
.decadas__pista{position:relative;display:flex;gap:26px;width:max-content;padding:0 12vw}
.decadas__hilo{position:absolute;left:0;top:0;height:2px;width:10px;overflow:visible;pointer-events:none}
.decadas__hilo line{stroke:var(--oro);stroke-width:2}
.decadas__pista::before{
  content:'';
  position:absolute;
  left:12vw;
  right:12vw;
  top:48px;
  height:1px;
  background:rgba(201,164,92,.22);
}
.decada{
  position:relative;
  flex:0 0 72vw;
  max-width:310px;
  scroll-snap-align:center;
  padding-top:70px;
  text-align:center;
}
.decada__nodo{
  position:absolute;
  left:50%;
  top:41px;
  width:15px;
  height:15px;
  margin-left:-7.5px;
  transform:rotate(45deg);
  border:1px solid var(--oro);
  background:var(--noche);
  transition:background-color .5s ease,box-shadow .5s ease;
}
.decada--activa .decada__nodo{background:var(--oro-claro);box-shadow:0 0 16px 3px rgba(233,200,130,.55)}
.decada__epoca{position:absolute;left:0;right:0;top:0;margin:0;font-family:var(--caps);font-size:13px;letter-spacing:.3em;color:var(--oro-claro)}
.decada__foto{
  position:relative;
  margin:0;
  aspect-ratio:3/4;
  padding:7px;
  border:1px solid var(--linea);
  background:#000;
}
.decada__foto::after{content:'';position:absolute;inset:3px;border:1px solid rgba(201,164,92,.28);pointer-events:none}
.decada__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 25%;
  filter:sepia(.9) brightness(.5) blur(2px);
  transform:scale(1.05);
  transition:filter 1.6s ease,transform 2s cubic-bezier(.2,.7,.2,1);
}
.decada--activa .decada__foto img{filter:sepia(0) brightness(1) blur(0);transform:none}
.decada__anio{margin:14px 0 0;font-family:var(--display);font-size:44px;line-height:1;color:var(--oro-vivo)}
.decada__titulo{margin:6px 0 6px;font-family:var(--display);font-weight:400;font-size:26px;line-height:1.15;color:var(--champan)}
.decada__texto{margin:0 auto;max-width:17em;font-size:15.5px;line-height:1.6;color:var(--texto-suave);text-wrap:balance}
.decada--hoy .decada__foto{border-color:var(--oro)}
.decada--hoy .decada__anio{color:#FFE9B8;text-shadow:0 0 22px rgba(233,200,130,.45)}
.decadas__progreso{position:relative;width:min(220px,50vw);height:2px;margin:26px auto 0;background:rgba(201,164,92,.2)}
.decadas__progreso span{position:absolute;inset:0;background:var(--oro);transform-origin:0 50%;transform:scaleX(.02)}

/* escritorio con ratón: la sección se fija y el scroll la recorre de lado */
html.pin .decadas{
  height:100vh;
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0;
}
html.pin .decadas__ventana{overflow:hidden;padding-top:26px;scroll-snap-type:none}
html.pin .decadas__pista{gap:7vw;padding:0 14vw}
html.pin .decadas__pista::before{left:14vw;right:14vw}
html.pin .decada{flex:0 0 auto;width:min(19vw,26vh,280px);max-width:none}
html.pin .decadas__cabeza .titulo{font-size:clamp(46px,5vw,66px);margin-bottom:4px}
html.pin .decadas__progreso{margin-top:18px}
html.pin .decada__anio{font-size:clamp(34px,5vh,48px)}
html.pin .decada__titulo{font-size:clamp(20px,3vh,26px)}
html.pin .decada__texto{font-size:15px}

/* ------------------------------------------------------------------
   UNAS PALABRAS · marfil
   ------------------------------------------------------------------ */
.palabras{
  padding:96px 26px 84px;
  text-align:center;
  color:var(--tinta);
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%,#FFFBF2 0%,rgba(255,251,242,0) 70%),
    linear-gradient(180deg,var(--marfil) 0%,var(--marfil-2) 100%);
}
.palabras b{color:var(--bronce)}
.palabras__abanico{width:min(210px,56vw);margin:0 auto 10px}
.palabras__cita{
  text-wrap:balance;
  margin:0 auto 22px;
  max-width:13em;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(34px,9.4vw,56px);
  line-height:1.12;
  color:var(--tinta);
}
.palabras__texto{margin:0 auto;max-width:34em;text-align:left;font-size:17.5px;color:var(--tinta-suave)}
.capitular{
  float:left;
  margin:4px 12px 0 0;
  font-family:var(--display);
  font-size:78px;
  line-height:.8;
  color:var(--oro-osc);
}
.palabras__firma{margin:0;font-family:var(--display);font-size:52px;line-height:1;color:var(--tinta)}

/* ------------------------------------------------------------------
   LA FECHA · video de la torre de copas + cuenta regresiva
   ------------------------------------------------------------------ */
.fecha-sec{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:84px 20px;background:var(--negro) center/cover no-repeat}
.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 70% 60% at 50% 50%,rgba(11,9,8,.28) 0%,rgba(11,9,8,.6) 100%),
    linear-gradient(180deg,rgba(11,9,8,.62) 0%,rgba(11,9,8,.12) 50%,rgba(11,9,8,.7) 100%);
}
.fecha-sec__dentro{position:relative;z-index:1;text-align:center;width:100%;max-width:640px}
.fecha{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(84vw,340px);
  margin:6px auto 0;
  padding:30px 20px 32px;
  background:rgba(11,9,8,.48);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  clip-path:polygon(34px 0,calc(100% - 34px) 0,100% 34px,100% calc(100% - 34px),calc(100% - 34px) 100%,34px 100%,0 calc(100% - 34px),0 34px);
}
.fecha__marco{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fecha__dia{font-family:var(--caps);font-size:15px;letter-spacing:.42em;color:var(--champan);margin-left:.42em}
.fecha__num{font-family:var(--display);font-size:clamp(120px,36vw,176px);line-height:.92;color:var(--oro-vivo);text-shadow:0 0 36px rgba(233,196,120,.3)}
.fecha__mes{font-family:var(--display);font-size:clamp(28px,8vw,36px);line-height:1.1;color:var(--champan)}
.fecha__hora{
  margin-top:16px;
  padding:9px 18px 10px;
  background:var(--oro);
  color:var(--negro);
  font-family:var(--caps);
  font-size:13px;
  letter-spacing:.2em;
}
.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,92px);
  padding:12px 6px 10px;
  border:1px solid rgba(201,164,92,.55);
  background:rgba(11,9,8,.55);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.cuenta__n{font-family:var(--display);font-size:clamp(34px,10vw,50px);line-height:1;color:var(--oro-vivo);font-variant-numeric:tabular-nums;min-width:1.4em}
.cuenta__t{margin-top:6px;font-family:var(--caps);font-size:10.5px;letter-spacing:.24em;color:var(--champan)}
.cuenta__hoy{margin:12px 0 0;font-family:var(--display);font-size:40px;color:var(--oro-vivo)}
.cuenta__hoy[hidden]{display:none}

/* ------------------------------------------------------------------
   EL PROGRAMA DE LA NOCHE
   ------------------------------------------------------------------ */
.programa{
  padding:90px 24px 86px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(201,164,92,.12),rgba(201,164,92,0) 70%),
    var(--negro);
}
.programa__cuerpo{position:relative;max-width:560px;margin:34px auto 0}
.programa__lista{position:relative;list-style:none;margin:0;padding:0}
.programa__hilo{position:absolute;left:31px;top:44px;width:2px;height:calc(100% - 88px);overflow:visible}
.programa__hilo line{stroke:var(--oro);stroke-width:2}
.programa__cuerpo::before{content:'';position:absolute;left:31.5px;top:44px;bottom:44px;width:1px;background:rgba(201,164,92,.22)}
.momento{position:relative;display:grid;grid-template-columns:64px 1fr;column-gap:18px;align-items:center;padding:14px 0 18px}
.momento__marca{position:relative;grid-row:span 2;width:64px;height:64px;display:flex;align-items:flex-end;justify-content:center}
.momento__marca .abanico{position:absolute;left:0;top:0;width:64px;height:auto}
.momento__marca b{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin-bottom:-6px;
  border:1px solid var(--oro);
  background:var(--negro);
  font-family:var(--display);
  font-size:17px;
  color:var(--oro-vivo);
}
.momento__hora{align-self:end;font-family:var(--caps);font-size:13px;letter-spacing:.22em;color:var(--oro)}
.momento__que{align-self:start;font-family:var(--display);font-size:clamp(25px,7vw,32px);line-height:1.15;color:var(--champan);text-wrap:balance}

/* ------------------------------------------------------------------
   DÓNDE · toda la tarjeta es el botón al mapa
   ------------------------------------------------------------------ */
.donde{padding:90px 22px 90px;background:var(--noche);border-top:1px solid rgba(201,164,92,.16)}
.lugar{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  max-width:520px;
  margin:26px auto 0;
  padding:34px 22px 30px;
  overflow:hidden;
  text-align:center;
  text-decoration:none;
  color:var(--texto);
  background:linear-gradient(160deg,#1E1813 0%,#15110D 100%);
  transition:background-color .4s ease;
}
.lugar__luz{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle 260px at var(--lx,50%) var(--ly,20%),rgba(255,222,160,.16),rgba(255,222,160,0) 70%);
  transition:opacity .4s ease;
}
.lugar__linea{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lugar__pin{position:relative;width:54px;height:auto;margin-bottom:8px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.lugar__nombre{position:relative;font-family:var(--display);font-size:clamp(34px,9.6vw,46px);line-height:1.08;color:var(--oro-vivo)}
.lugar__dir{position:relative;font-size:16px;line-height:1.5;color:var(--texto)}
.lugar__hora{position:relative;margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--texto-suave)}
.lugar__hora b{color:var(--oro-vivo)}
.lugar__ir{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:48px;
  margin-top:18px;
  padding:0 24px 0 18px;
  border:1px solid var(--oro);
  color:var(--oro-vivo);
  font-family:var(--caps);
  font-size:12.5px;
  letter-spacing:.2em;
  transition:background-color .35s ease,color .35s ease;
}
.lugar:hover,.lugar:focus-visible{background:linear-gradient(160deg,#261E16 0%,#18130E 100%)}
.lugar:hover .lugar__ir,.lugar:focus-visible .lugar__ir{background:var(--oro);color:var(--negro)}
@media (hover:none){
  .lugar__ir{background:var(--oro);color:var(--negro)}
  .lugar__luz{background:radial-gradient(circle 240px at 50% 12%,rgba(255,222,160,.16),rgba(255,222,160,0) 70%)}
}

/* ------------------------------------------------------------------
   CÓDIGO DE VESTIMENTA · marfil
   ------------------------------------------------------------------ */
.vestir{
  padding:92px 22px 84px;
  text-align:center;
  color:var(--tinta);
  background:linear-gradient(180deg,var(--marfil-2) 0%,var(--marfil) 100%);
}
.vestir b{color:var(--bronce)}
.atuendos{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:560px;margin:30px auto 0;align-items:start}
.atuendo{margin:0;display:flex;flex-direction:column;align-items:center}
.atuendo__percha{height:min(64vw,330px);display:flex;align-items:flex-start;justify-content:center;transform-origin:50% 2%}
.atuendo__percha img{height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(27,21,16,.22))}
.atuendo:first-child .atuendo__percha img{height:100%}
.atuendo figcaption{margin-top:12px;display:flex;flex-direction:column;align-items:center}
.atuendo figcaption b{font-family:var(--display);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;text-align:center}
.vestir__nota{margin:26px auto 0;max-width:30em;font-size:17px;color:var(--tinta-suave);text-wrap:balance}
.tonos{display:flex;justify-content:center;gap:26px;list-style:none;margin:22px 0 0;padding:0}
.tonos li{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--caps);font-size:11.5px;letter-spacing:.2em;color:var(--tinta-suave)}
.tono{display:block;width:46px;height:46px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(27,21,16,.25),0 0 0 5px var(--marfil),0 0 0 6px rgba(140,106,47,.5)}
.tono--oro{background:linear-gradient(135deg,#8C6A2F 0%,#E6C88A 45%,#FFF1CC 55%,#C9A45C 100%)}

/* ------------------------------------------------------------------
   MESA DE REGALOS · lluvia de sobres
   ------------------------------------------------------------------ */
.regalos{padding:92px 20px 90px;background:var(--negro);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:24px 14px;list-style:none;margin:34px auto 0;padding:0;max-width:760px}
.regalo{display:flex;flex-direction:column;align-items:center;text-align:center}
.regalo__arco{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  max-width:190px;
  height:168px;
  padding:18px 10px 14px;
  overflow:hidden;
  border-radius:999px 999px 0 0;
  background:linear-gradient(180deg,#FBF4E6 0%,#EAD9B8 100%);
  box-shadow:inset 0 0 0 1px rgba(140,106,47,.6),inset 0 0 0 6px #F5ECDA,inset 0 0 0 7px rgba(140,106,47,.35);
  transition:background-color .4s ease;
}
.regalo__arco img{max-height:128px;width:auto;max-width:80%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 8px 10px rgba(27,21,16,.25))}
.regalo b{display:block;margin-top:12px;font-family:var(--display);font-size:23px;line-height:1.15;color:var(--champan)}
.regalo small{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--texto-suave)}
.sobres{
  position:relative;
  max-width:560px;
  margin:54px auto 0;
  padding:38px 24px 32px;
  overflow:hidden;
  color:var(--tinta);
  background:linear-gradient(180deg,#FBF6EC 0%,var(--marfil-2) 100%);
  clip-path:polygon(26px 0,calc(100% - 26px) 0,100% 26px,100% calc(100% - 26px),calc(100% - 26px) 100%,26px 100%,0 calc(100% - 26px),0 26px);
}
.sobres__linea{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sobres__linea path{stroke:var(--oro-osc)}
.sobres__lluvia{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sobre-cae{
  position:absolute;
  top:-60px;
  width:var(--t,34px);
  height:auto;
  opacity:.16;
  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),720px,0) rotate(var(--g1,18deg))}}
.sobres.pausa .sobre-cae{animation-play-state:paused}
.sobres__ico{position:relative;width:74px;height:auto;margin:0 auto 6px;filter:drop-shadow(0 8px 12px rgba(27,21,16,.25))}
.sobres__titulo{position:relative;margin:0;font-family:var(--display);font-weight:400;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:190px;height:190px;padding:10px;background:var(--marfil);box-shadow:0 0 0 1px rgba(140,106,47,.5),0 0 0 6px var(--marfil),0 0 0 7px var(--oro)}
.sobres__qr figcaption{margin-top:16px;max-width:19em;font-size:14px;line-height:1.5;color:var(--tinta-suave);text-wrap:balance}

/* ------------------------------------------------------------------
   GALERÍA · postales de la gala
   ------------------------------------------------------------------ */
.galeria-sec{padding:92px 22px 70px;background:linear-gradient(180deg,var(--noche) 0%,var(--negro) 100%)}
.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;background:#000}
.postal__foto img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.postal__linea{position:absolute;left:-7px;top:-7px;width:calc(100% + 14px);height:calc(100% + 14px);overflow:visible;pointer-events:none}
.postal__linea rect{fill:none;stroke:var(--oro);stroke-width:1}
.postal figcaption{margin-top:14px;text-align:center;font-family:var(--caps);font-size:12px;letter-spacing:.26em;color:var(--oro-claro);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;transform:rotate(45deg);border:1px solid var(--oro);transition:background-color .35s ease}
.punto--activo::before{background:var(--oro)}

/* ------------------------------------------------------------------
   CONFIRMAR · marfil
   ------------------------------------------------------------------ */
.confirmar{
  padding:92px 22px 90px;
  text-align:center;
  color:var(--tinta);
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%,rgba(201,164,92,.22),rgba(201,164,92,0) 70%),
    var(--marfil);
}
.confirmar b{color:var(--bronce)}
.confirmar > *:not(.burbujas){position:relative;z-index:1}
.confirmar__texto{margin:0 auto;max-width:28em;color:var(--tinta-suave);text-wrap:balance}
.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:50px;
  height:50px;
  padding:0;
  border:1px solid var(--oro-osc);
  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(--oro-vivo)}
.contador__n{min-width:8.5em;font-size:16px;color:var(--tinta-suave)}
.contador__n b{display:block;font-family:var(--display);font-size:52px;line-height:1;color:var(--tinta)}
.boton--wa{background:var(--tinta);border-color:var(--tinta);color:var(--oro-vivo)}
.boton--wa:hover,.boton--wa:focus-visible{background:var(--oro);border-color:var(--oro);color:var(--tinta)}

/* ------------------------------------------------------------------
   MI CANCIÓN · el gramófono
   ------------------------------------------------------------------ */
.cancion{
  padding:92px 22px 86px;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 60%,rgba(201,164,92,.16),rgba(201,164,92,0) 70%),
    var(--negro);
}
.cancion > *:not(.burbujas){position:relative;z-index:1}
.cancion .titulo{margin-bottom:4px}
.cancion__artista{margin:0;font-family:var(--caps);font-size:14px;letter-spacing:.32em;color:var(--champan)}
.gramofono{
  position:relative;
  display:block;
  width:min(56vw,240px);
  margin:30px auto 0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.gramofono img{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.6))}
.gramofono__halo{
  position:absolute;
  left:50%;
  top:30%;
  width:120%;
  aspect-ratio:1;
  margin:-60% 0 0 -60%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,222,160,.35) 0%,rgba(255,222,160,0) 65%);
  opacity:.35;
  transition:opacity .5s ease;
}
.gramofono:hover .gramofono__halo,.gramofono:focus-visible .gramofono__halo,.cancion.tocando .gramofono__halo{opacity:1}
.gramofono__notas{position:absolute;left:62%;top:4%;z-index:2;width:30%;height:40%;pointer-events:none}
.gramofono__notas i{
  position:absolute;
  left:calc(var(--i,0) * 22%);
  bottom:0;
  width:8px;
  height:8px;
  border-radius:50%;
  border:1px solid rgba(255,236,190,.8);
  opacity:0;
}
.gramofono__notas i:nth-child(1){--i:0}.gramofono__notas i:nth-child(2){--i:1}.gramofono__notas i:nth-child(3){--i:2}.gramofono__notas i:nth-child(4){--i:3}
.cancion.tocando .gramofono__notas i{animation:nota 2.2s ease-out infinite}
.cancion.tocando .gramofono__notas i:nth-child(2){animation-delay:.55s}
.cancion.tocando .gramofono__notas i:nth-child(3){animation-delay:1.1s}
.cancion.tocando .gramofono__notas i:nth-child(4){animation-delay:1.65s}
@keyframes nota{0%{transform:translate(0,0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translate(18px,-90px) scale(1.2);opacity:0}}
.cancion__pista{margin:16px 0 0;font-size:15px;color:var(--texto-suave)}
.cancion__pista a{color:var(--oro-claro)}
.yt-oculto{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:-9999px}

/* ------------------------------------------------------------------
   CIERRE
   ------------------------------------------------------------------ */
.cierre{
  padding:96px 22px 90px;
  text-align:center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%,rgba(201,164,92,.2),rgba(201,164,92,0) 70%),
    linear-gradient(180deg,var(--negro) 0%,#15100B 100%);
}
.cierre > *:not(.burbujas):not(.cierre__confeti){position:relative;z-index:1}
.cierre__confeti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.confeti{position:absolute;left:50%;top:18%;width:8px;height:14px;background:linear-gradient(135deg,#8C6A2F,#F3DFAE 50%,#C9A45C)}
.cierre__abanico{width:min(240px,62vw);margin:0 auto 6px}
.cierre__titulo{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(66px,20vw,140px);
  line-height:1;
  color:var(--oro-vivo);
  text-shadow:0 0 40px rgba(233,196,120,.22);
}
.cierre__texto{margin:12px auto 0;max-width:22em;font-size:18px;color:var(--texto);text-wrap:balance}
.cierre__firma{margin:18px 0 28px;font-family:var(--display);font-size:44px;line-height:1;color:var(--champan)}
.boton--claro{border-color:var(--oro)}

/* ------------------------------------------------------------------
   CRÉDITOS · pie común
   ------------------------------------------------------------------ */
.creditos{
  padding:56px 24px calc(var(--abajo) + 104px);
  text-align:center;
  background:#0E0B09;
  border-top:1px solid rgba(201,164,92,.3);
}
.creditos__pregunta{margin:0 0 18px;font-family:var(--display);font-size:clamp(24px,6.6vw,30px);line-height:1.2;color:var(--champan)}
.creditos__wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:0 26px;
  background:var(--oro);
  color:var(--negro);
  text-decoration:none;
  font-family:var(--caps);
  font-size:12.5px;
  letter-spacing:.16em;
  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(--champan);color:var(--negro);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(--oro),var(--oro)) 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:var(--oro-vivo)}
.creditos__extras{display:none}
.creditos__marca{margin:28px auto 0;padding-top:20px;max-width:420px;border-top:1px solid rgba(201,164,92,.28);display:flex;flex-direction:column;gap:4px}
.creditos__logo{font-family:var(--caps);font-size:16px;letter-spacing:.2em;color:var(--oro-vivo)}
.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{letter-spacing:.12em}
  .boton,.creditos__wa{padding:0 18px}
  .portada__pista{padding:0 18px 0 14px}
}

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

  .noche{padding:120px 48px 96px}
  .noche__dentro{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:72px;align-items:center;justify-items:start}
  .retrato{width:360px;margin:40px 0 0}
  .noche__texto{text-align:left}
  .noche__texto .rotulo{text-align:left}
  .noche__texto .orla{margin-left:0}
  .noche__nombre{font-size:clamp(96px,11vw,150px)}
  .noche__frase{margin-left:0}

  .palabras{padding:100px 40px 92px}

  .programa{padding:100px 40px 92px}
  .programa__cuerpo{max-width:880px}
  .programa__hilo{left:50%;margin-left:-1px}
  .programa__cuerpo::before{left:50%;margin-left:-.5px}
  .momento{grid-template-columns:1fr 64px 1fr;column-gap:34px;padding:18px 0 26px}
  .momento__marca{grid-column:2;grid-row:1 / span 2}
  .momento__hora,.momento__que{grid-column:3;text-align:left}
  .momento:nth-child(even) .momento__hora,.momento:nth-child(even) .momento__que{grid-column:1;text-align:right}
  .momento__hora{grid-row:1}
  .momento__que{grid-row:2}

  .fecha{width:420px;padding:36px 24px 38px}
  .fecha__num{font-size:200px}
  .fecha__mes{font-size:40px}
  .cuenta__dato{min-width:104px}
  .cuenta__n{font-size:56px}
  .donde{padding:100px 40px 96px}
  .lugar{padding:46px 40px 40px}

  .vestir{padding:100px 40px 92px}
  .atuendos{gap:40px;max-width:640px}
  .atuendo__percha{height:380px}

  .regalos{padding:100px 40px 92px}
  .regalos__lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px}
  .regalo__arco{max-width:210px;height:188px}
  .regalo:hover .regalo__arco{background:linear-gradient(180deg,#FFFFFF 0%,#F3E3C2 100%)}
  .regalo:hover .regalo__arco img{transform:scale(1.07)}
  .sobres{padding:46px 44px 40px}

  .galeria-sec{padding:100px 40px 86px}
  .galeria{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:44px 34px;
    overflow:visible;
    padding:14px 8px 0;
    margin:24px auto 0;
    max-width:1000px;
  }
  .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:var(--oro-vivo)}

  .confirmar{padding:100px 40px 92px}
  .cancion{padding:100px 40px 92px}
  .cierre{padding:104px 40px 96px}
}
@media (min-width:1100px){
  .noche__dentro{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:96px}
  .retrato{width:400px}
}

/* ------------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .revela{opacity:1;transform:none;transition:none}
  .numero__brillo,.chispa,.burbuja,.sobre-cae,.portada__pista::before,.pista__mano,.guia__mano,.gramofono__notas i,.musica-flotante__ondas i,.musica-flotante__copa i{animation:none!important}
  .decada__foto img{filter:none;transform:none;transition:none}
  .reflector{display:none}
}

/* ------------------------------------------------------------------
   PANTALLAS GRANDES (revisión 2026-09-28): el llamado a abrir el telón
   nace dorado también con mouse (el hover lo invierte) y se ve desde lejos
   ------------------------------------------------------------------ */
@media (hover:hover) and (pointer:fine){
  .portada__pista{background:var(--oro);color:var(--negro);border-color:var(--oro-vivo)}
  .portada__tap:hover .portada__pista,
  .portada__tap:focus-visible .portada__pista{background:rgba(11,9,8,.72);color:var(--oro-vivo);border-color:var(--oro-vivo)}
}
@media (min-width:1100px){
  .portada__pista{min-height:60px;padding:0 34px 0 26px;font-size:15px;gap:12px}
  .pista__mano{width:26px;height:26px}
}