/* ==================================================================
   Mis 18 · Renata — "La pista" (cumple-18-disco)
   Paleta única: noche violeta profundo (nunca negro), rosa neón, violeta y
   plata. Tipografías: Meow Script (el nombre, como letrero de neón), Tilt
   Neon (títulos y cifras: tubos de neón) y Urbanist (texto y rótulos).
   Forma propia: el aro (el aro de neón y espejos de la pista).
   Lenguaje: puntos de luz de la bola que barren la página al entrar a cada
   sección, tubos de neón que parpadean al encenderse, barras de ecualizador
   y destellos de brillo.
   ================================================================== */

:root{
  --noche:#150A2E;
  --noche-2:#1C0E3D;
  --noche-3:#26124F;
  --indigo:#1A0C44;
  --uva:#2A0F52;
  --ciruela:#2B0E45;
  --magenta-osc:#4A0E4B;
  --rosa:#FF3EA5;
  --rosa-claro:#FF8CCB;
  --rosa-vivo:#FFD6EC;
  --violeta:#9B5CFF;
  --violeta-claro:#C9A8FF;
  --lila:#E8DBFF;
  --plata:#DCDFEE;
  --plata-2:#A9AEC8;
  --plata-osc:#6F7494;
  --blanco:#FBF8FF;
  --texto:#F3ECFF;
  --texto-suave:#CDC1EA;
  --tinta:#1B0B3A;
  --tinta-suave:#4A3B78;
  --tubo-apagado:#6A59A0;
  --firma:'Meow Script','Brush Script MT','Segoe Script',cursive;
  --neon:'Tilt Neon','Trebuchet MS','Segoe UI',system-ui,sans-serif;
  --sans:'Urbanist','Segoe UI',system-ui,-apple-system,sans-serif;
  --luz-rosa:0 0 2px #fff,0 0 8px var(--rosa),0 0 20px var(--rosa),0 0 44px rgba(255,62,165,.55);
  --luz-violeta:0 0 2px #fff,0 0 8px var(--violeta),0 0 20px var(--violeta),0 0 44px rgba(155,92,255,.55);
  --luz-plata:0 0 2px #fff,0 0 10px rgba(220,223,238,.9),0 0 26px rgba(201,168,255,.65);
  --pad:22px;
  --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.66;
  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:700}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
:focus-visible{outline:2px solid var(--rosa-vivo);outline-offset:3px}
a,button{-webkit-tap-highlight-color:transparent}

/* ------------------------------------------------------------------
   PORTADA · la entrada de la discoteca (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__pic{position:absolute;inset:0;display:block}
.portada__fondo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% var(--ancla-y,50%)}
/* la escena de sustituto (pared, puerta, túnel y 18) y el túnel del recorrido sin video */
.portada__lienzo{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;display:block}
html.con-portada .portada__lienzo{opacity:0}

/* los puntos de luz de la bola: capas que se deslizan sin fin (solo se mueve el transform). Cada capa lleva su
   dibujo dos veces (::before y ::after, mitad y mitad: el bucle no tiene costura) y cada punto es un degradado
   del tamaño del punto, colocado en su sitio (disco.js escribe --puntos, --tam y --pos). Nunca degradados a
   capa completa: treinta por capa hacían la portada ~40 veces más cara de pintar. */
.reflejos{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.reflejos i{
  position:absolute;
  left:0;
  top:0;
  width:200%;
  height:100%;
  opacity:var(--o,.85);
  animation:barrer var(--d,46s) linear infinite;
}
.reflejos i::before,.reflejos i::after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:50%;
  height:100%;
  background-image:var(--puntos,none);
  background-size:var(--tam,auto);
  background-position:var(--pos,0 0);
  background-repeat:no-repeat;
}
.reflejos i::after{left:50%}
.reflejos i:nth-child(2){--d:64s;--o:.6;animation-direction:reverse}
.reflejos i:nth-child(3){--d:35s;--o:.5}
@keyframes barrer{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
body.abierto .portada .reflejos i{animation-play-state:paused}
html.tactil .reflejos i:nth-child(3){display:none}

/* la bola de espejos: caja por left/top/width/height en píxeles reales; el lienzo sobresale para los destellos */
.escena{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden}
.portada.lista .escena{visibility:visible}
.bola{position:absolute;left:0;top:0;width:0;height:0}
.bola__lienzo{position:absolute;left:-40%;top:-40%;width:180%;height:180%;max-width:none;display:block}
.bola__cadena{position:absolute;left:50%;bottom:97%;width:2px;height:120vh;margin-left:-1px;background:linear-gradient(180deg,rgba(220,223,238,.12) 0%,rgba(220,223,238,.75) 100%)}
.bola__halo{
  position:absolute;
  inset:-75%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,140,203,.36) 0%,rgba(155,92,255,.18) 36%,rgba(155,92,255,0) 66%);
  animation:halo 4.6s ease-in-out infinite alternate;
}
@keyframes halo{from{opacity:.6;transform:scale(.95)}to{opacity:1;transform:scale(1.06)}}

/* bruma: un velo oscuro abajo (para la fecha y el botón) */
.portada__bruma{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(21,10,46,.84) 0%,rgba(21,10,46,.36) 17%,rgba(21,10,46,0) 32%);
}
html.con-portada .portada__bruma{
  background:
    linear-gradient(0deg,rgba(21,10,46,.86) 0%,rgba(21,10,46,.4) 18%,rgba(21,10,46,0) 34%),
    radial-gradient(ellipse 78% 14% at 50% calc(var(--banda-top,26vh) + var(--banda-alto,16vh) * .56),rgba(21,10,46,.6) 0%,rgba(21,10,46,0) 100%);
}

/* cabecera: el nombre es el letrero de neón de la pared */
.portada__cabecera{
  position:absolute;
  left:0;
  right:0;
  top:var(--banda-top,26vh);
  height:var(--banda-alto,17vh);
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  text-align:center;
  pointer-events:none;
  visibility:hidden;
}
.portada.lista .portada__cabecera{visibility:visible}
.portada__sobre{
  display:block;
  margin:0 0 0 .5em;
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(11.5px,3.2vw,14px);
  line-height:1.3;
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--plata);
  text-shadow:0 0 12px rgba(201,168,255,.85);
}
.portada__nombre{
  display:block;
  padding:.06em .22em 0;
  font-family:var(--firma);
  font-size:max(58px,min(29vw,calc(var(--banda-alto,150px) * .74),156px));
  line-height:1.02;
  color:var(--rosa-vivo);
  text-shadow:var(--luz-rosa);
  white-space:nowrap;
  animation:encender 1.1s steps(1,end) .35s 1 both,zumbido 7s steps(1,end) 3s infinite;
}
@keyframes encender{0%{opacity:.16}7%{opacity:1}13%{opacity:.2}20%{opacity:1}27%{opacity:.45}33%{opacity:1}52%{opacity:.8}58%,100%{opacity:1}}
@keyframes zumbido{0%,100%{opacity:1}91%{opacity:1}92%{opacity:.62}93.500%{opacity:1}95%{opacity:.8}96%{opacity:1}}

/* el toque: botón a pantalla completa; abajo, la fecha y el llamado con la manito */
.portada__tap{
  position:absolute;
  inset:0;
  z-index:7;
  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(18px,4.4vh,52px));
  font:inherit;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.portada__tap:focus-visible{outline:none}
.portada__llamado{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%}
.portada__fecha{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:3px 10px;
  max-width:100%;
  padding:8px 18px 9px;
  border-radius:999px;
  border:1px solid rgba(220,223,238,.6);
  background:rgba(21,10,46,.74);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--blanco);
  font-size:clamp(13px,3.6vw,15.5px);
  font-weight:600;
  line-height:1.35;
}
.portada__fecha .solo-anio{display:none}
html.horizontal .portada__fecha .solo-anio{display:inline}
.portada__sep{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--rosa)}
.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 var(--rosa-claro);
  background:rgba(21,10,46,.78);
  color:var(--rosa-vivo);
  font-family:var(--sans);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.portada__pista::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:1px solid rgba(255,214,236,.95);
  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.42);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(--rosa);color:var(--tinta);border-color:var(--rosa-vivo)}
/* en táctil el hover no existe: nace en su estado llamativo */
@media (hover:none){
  .portada__pista{background:var(--rosa);color:var(--tinta);border-color:var(--rosa-vivo)}
}
/* con mouse también nace llamativo; el hover lo invierte */
@media (hover:hover) and (pointer:fine){
  .portada__pista{background:var(--rosa);color:var(--tinta);border-color:var(--rosa-vivo)}
  .portada__tap:hover .portada__pista,
  .portada__tap:focus-visible .portada__pista{background:var(--noche);color:var(--rosa-vivo);border-color:var(--rosa-claro)}
}

/* marca del arte provisional (fase A): se quita sola cuando llega la portada generada */
.nota-arte{
  position:absolute;
  left:calc(var(--izq) + 12px);
  top:calc(var(--arriba) + 12px);
  z-index:6;
  font-size:9.5px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(220,223,238,.55);
  pointer-events:none;
  transition:opacity .3s ease;
}
html.con-portada .nota-arte,html.viajando .nota-arte{opacity:0}

.velo{
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:radial-gradient(circle at 50% 38%,#4A1C8F 0%,var(--noche-2) 52%,var(--noche) 100%);
}

/* ------------------------------------------------------------------
   EL RECORRIDO · video (o llegada fija), foto en el aro y 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%}
.viaje__video{max-width:none;object-fit:cover;object-position:50% var(--ancla-y,50%);background:var(--noche);opacity:0}
.viaje__fin{opacity:0;overflow:hidden;background:var(--noche)}
.viaje__fin-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% var(--ancla-y,50%)}

/* la llegada de sustituto: la pista con la bola girando y el aro de neón y espejos */
.pista{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% var(--aro-y,45%),rgba(255,62,165,.42) 0%,rgba(155,92,255,.24) 30%,rgba(155,92,255,0) 62%),
    linear-gradient(180deg,#1A0C44 0%,var(--noche-2) 46%,#2A0F52 100%);
}
html.con-llegada .pista{display:none}
.pista::before{
  content:'';
  position:absolute;
  inset:0;
  background:conic-gradient(from 150deg at 50% var(--bola-y,13%),rgba(255,255,255,0) 0deg,rgba(255,140,203,.2) 9deg,rgba(255,255,255,0) 19deg,rgba(255,255,255,0) 26deg,rgba(232,219,255,.18) 34deg,rgba(255,255,255,0) 43deg,rgba(255,255,255,0) 49deg,rgba(255,140,203,.2) 58deg,rgba(255,255,255,0) 68deg,rgba(255,255,255,0) 360deg);
}
.pista__suelo{
  position:absolute;
  left:-40%;
  right:-40%;
  bottom:0;
  height:52%;
  transform:perspective(560px) rotateX(58deg);
  transform-origin:50% 100%;
  background:
    radial-gradient(circle 30px at 38px 38px,rgba(255,62,165,.7),rgba(255,62,165,0)),
    radial-gradient(circle 30px at 190px 114px,rgba(155,92,255,.75),rgba(155,92,255,0)),
    radial-gradient(circle 30px at 114px 190px,rgba(255,214,236,.5),rgba(255,214,236,0)),
    linear-gradient(rgba(255,140,203,.55) 2px,rgba(255,140,203,0) 2px),
    linear-gradient(90deg,rgba(201,168,255,.55) 2px,rgba(201,168,255,0) 2px),
    #1F0D48;
  background-size:304px 228px,304px 228px,304px 228px,76px 76px,76px 76px,auto;
  -webkit-mask-image:linear-gradient(0deg,#000 30%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(0deg,#000 30%,rgba(0,0,0,0) 100%);
}
.reflejos--pista{z-index:1}
.bola--pista{z-index:2}
.aro--llegada{position:absolute;left:0;top:0;width:0;height:0;z-index:2}
.aro__fondo{position:absolute;inset:13%;border-radius:50%;background:#1A0B38}

/* el fogonazo al atravesar el 18 */
.viaje__destello{
  position:absolute;
  inset:0;
  opacity:0;
  background:radial-gradient(circle at 50% var(--fuga-y,62%),#FFFFFF 0%,#FFD6EC 16%,rgba(255,62,165,.82) 38%,rgba(155,92,255,.5) 62%,rgba(21,10,46,.2) 100%);
}

/* la foto dentro del aro (un círculo que sigue al marco medido en el video) */
.viaje__foto{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  overflow:hidden;
  opacity:0;
  border-radius:50%;
  background:#1A0B38;
}
.viaje__foto img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 30%}
.viaje__foto::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,214,236,.5),inset 0 0 26px rgba(21,10,46,.6);
}
.viaje__foto::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.96) 0%,rgba(255,140,203,.66) 50%,rgba(255,140,203,0) 86%);
  opacity:0;
}
.viaje__foto--luz::before{animation:destello 1.6s ease-out 1}
@keyframes destello{0%{opacity:1}100%{opacity:0}}

/* placas: violeta noche translúcido con filete rosa (legibles sobre el video) */
.viaje__texto{
  position:absolute;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 11%);
  z-index:3;
  margin:0;
  padding:13px 18px 15px;
  border-radius:20px;
  text-align:center;
  text-wrap:balance;
  background:rgba(21,10,46,.76);
  box-shadow:inset 0 0 0 1px rgba(255,140,203,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  font-family:var(--neon);
  font-size:clamp(25px,7vw,38px);
  line-height:1.18;
  color:var(--blanco);
  text-shadow:0 0 14px rgba(255,62,165,.7);
  opacity:0;
}
.viaje__final{
  position:absolute;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 3.4%);
  z-index:3;
  padding:4px 16px 16px;
  border-radius:22px;
  text-align:center;
  background:rgba(21,10,46,.78);
  box-shadow:inset 0 0 0 1px rgba(255,140,203,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
}
.viaje__placa{margin:0}
.viaje__nombre{display:block;font-family:var(--firma);font-size:clamp(56px,16vw,84px);line-height:1.1;color:var(--rosa-vivo);text-shadow:var(--luz-rosa)}
.viaje__invita{display:block;font-size:clamp(11px,3.1vw,13px);font-weight:700;line-height:1.6;letter-spacing:.24em;text-transform:uppercase;color:var(--blanco)}
.viaje__invita b{color:var(--rosa-claro)}

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 15px;
  font-size:clamp(26px,3vw,44px);
}
html.horizontal .viaje__final{inset:0;padding:0;border-radius: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(28vw,460px);
  padding:14px 22px 20px;
  border-radius:22px;
  background:rgba(21,10,46,.74);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,140,203,.62);
  text-align:center;
}
html.horizontal .viaje__placa--nombre{right:calc(100% - var(--m-left,38vw) + 7vw)}
html.horizontal .viaje__placa--invita{left:calc(var(--m-right,62vw) + 7vw)}
html.horizontal .viaje__nombre{font-size:clamp(48px,5.6vw,104px);white-space:nowrap}
html.horizontal .viaje__invita{font-size:clamp(12px,1.05vw,15px);line-height:1.9}
html.horizontal .viaje__invita b{display:block;font-family:var(--neon);font-weight:400;font-size:2.7em;letter-spacing:.04em;text-transform:none;line-height:1.15;margin-top:4px;color:var(--rosa-vivo);text-shadow:var(--luz-rosa)}

/* ------------------------------------------------------------------
   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:44px;
  padding:0 18px 0 12px;
  border-radius:999px;
  border:1px solid rgba(220,223,238,.65);
  background:rgba(21,10,46,.82);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--blanco);
  font-family:var(--sans);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,opacity .4s ease,visibility 0s;
}
.volver-fijo svg{width:16px;height:16px}
.volver-fijo:hover,.volver-fijo:focus-visible{background:var(--rosa);border-color:var(--rosa-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:10px;
  min-height:54px;
  padding:6px 17px 6px 7px;
  border-radius:999px;
  border:1px solid rgba(255,140,203,.75);
  background:rgba(21,10,46,.88);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--rosa-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 las placas 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(--noche-3);border-color:var(--rosa-vivo)}
.musica-flotante__bola{
  position:relative;
  display:block;
  width:40px;
  height:40px;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,0) 24%),
    repeating-linear-gradient(0deg,rgba(21,10,46,.6) 0 1px,rgba(21,10,46,0) 1px 6.6px),
    repeating-linear-gradient(90deg,rgba(21,10,46,.6) 0 1px,rgba(21,10,46,0) 1px 6.6px),
    radial-gradient(circle at 40% 34%,#F6F3FF 0%,#BDB8DE 38%,#756FA6 70%,#3A2F6B 100%);
  box-shadow:0 0 0 1px rgba(220,223,238,.6),0 0 12px rgba(255,62,165,.55);
}
.musica-flotante__bola i{
  position:absolute;
  inset:-20%;
  border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,62,165,0) 0deg,rgba(255,62,165,.6) 60deg,rgba(155,92,255,0) 130deg,rgba(155,92,255,.6) 220deg,rgba(255,255,255,.5) 290deg,rgba(255,62,165,0) 360deg);
  animation:girar 3.6s linear infinite paused;
}
.musica-flotante--tocando .musica-flotante__bola i{animation-play-state:running}
@keyframes girar{to{transform:rotate(360deg)}}
.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(255,140,203,.62)}
/* de vuelta en la portada el llamado a tocar va abajo: el botón sube a la esquina y se queda en la bola */
body.cerrado .musica-flotante{top:calc(var(--arriba) + 10px);bottom:auto;right:calc(var(--der) + 10px);min-height:50px;padding:4px;gap:0}
body.cerrado .musica-flotante__ondas{display:none}

/* ------------------------------------------------------------------
   EL BARRIDO · los puntos de luz de la bola cruzan la página
   ------------------------------------------------------------------ */
.barrido{position:fixed;inset:0;z-index:45;overflow:hidden;pointer-events:none;visibility:hidden}
body.abierto .barrido{visibility:visible}
.barrido i{
  position:absolute;
  left:0;
  top:0;
  width:var(--t,30px);
  height:calc(var(--t,30px) * .78);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,var(--c,rgba(255,255,255,.9)) 0%,rgba(255,255,255,0) 70%);
  opacity:0;
}

/* ------------------------------------------------------------------
   CUERPO · piezas comunes
   ------------------------------------------------------------------ */
.disco{position:relative;z-index:1;opacity:0;transition:opacity .7s ease}
body.abierto .disco{opacity:1}
section{position:relative;overflow:hidden;padding:86px var(--pad) 82px}

.cabeza{position:relative;z-index:1;text-align:center}
.rotulo{
  margin:0 0 10px;
  font-family:var(--sans);
  font-weight:700;
  font-size:12px;
  line-height:1.6;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--violeta-claro);
  text-align:center;
}
.rotulo--chico{margin-top:44px}
.titulo{
  margin:0 auto;
  max-width:11.5em;
  font-family:var(--neon);
  font-weight:400;
  font-size:clamp(42px,12.2vw,62px);
  line-height:1.06;
  text-align:center;
  text-wrap:balance;
}

/* tubos de neón: cada palabra es un tubo que parpadea al encenderse */
.neon{color:var(--rosa-vivo);text-shadow:var(--luz-rosa)}
.neon em{font-style:normal;color:var(--lila);text-shadow:var(--luz-violeta)}
.neon--plata{color:#FFFFFF;text-shadow:var(--luz-plata)}
.tubo{display:inline-block}
html.js .neon--apagado .tubo{color:var(--tubo-apagado);text-shadow:none}
html.js .neon--apagado .tubo.tubo--on{color:inherit;text-shadow:inherit;animation:encender .85s steps(1,end) 1 both}

/* letreros de neón en caligrafía (el nombre, el local, la firma) */
.letrero{font-family:var(--firma);font-weight:400;color:var(--rosa-vivo);text-shadow:var(--luz-rosa)}
html.js .letrero--apagado{color:var(--tubo-apagado);text-shadow:none}
.letrero--prende{animation:encender 1s steps(1,end) 1 both}
.cifra{font-family:var(--neon);font-weight:400;font-variant-numeric:lining-nums}

/* barras de ecualizador: saltan cuando el título se enciende y bailan mientras suena la música */
.eq{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:30px;margin:16px auto 0}
.eq i{
  display:block;
  flex:0 0 3px;
  width:3px;
  height:100%;
  border-radius:2px;
  background:linear-gradient(180deg,var(--rosa-claro) 0%,var(--violeta) 100%);
  transform:scaleY(var(--h,.3));
  transform-origin:50% 100%;
}
html.sonando .eq--viva i{animation:eq-baila var(--d,.8s) ease-in-out var(--r,0s) infinite alternate}
html .eq.eq--salta i{animation:eq-salta .36s ease-in-out var(--r,0s) 6 alternate}
@keyframes eq-salta{from{transform:scaleY(.1)}to{transform:scaleY(1)}}
@keyframes eq-baila{from{transform:scaleY(calc(var(--h,.3) * .35))}to{transform:scaleY(calc(var(--h,.3) * .9 + .32))}}
.eq--mini{height:16px;gap:2px;margin:0}
.eq--mini i{flex-basis:2.5px;width:2.5px}

html.js .revela{opacity:0;transform:translateY(16px);transition:opacity .75s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
html.js .revela.vista{opacity:1;transform:none}

.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:0 30px;
  border-radius:999px;
  border:1px solid var(--rosa-claro);
  background:transparent;
  color:var(--rosa-vivo);
  font-family:var(--sans);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.2em;
  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(--rosa);border-color:var(--rosa);color:var(--tinta)}
.boton--claro{border-color:var(--plata);color:var(--blanco)}
.boton--claro:hover,.boton--claro:focus-visible{background:var(--blanco);border-color:var(--blanco);color:var(--tinta)}
.boton--wa{background:var(--rosa);border-color:var(--rosa);color:var(--tinta);box-shadow:none}
.boton--wa:hover,.boton--wa:focus-visible{background:var(--blanco);border-color:var(--blanco);color:var(--tinta);box-shadow:none}

/* marcador de una foto que todavía no llega y trazo provisional de un ícono */
.sin-foto img{display:none}
.marcador{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px;
  text-align:center;
  color:var(--violeta-claro);
  background:repeating-linear-gradient(135deg,rgba(201,168,255,.14) 0 12px,rgba(201,168,255,.04) 12px 24px),var(--noche-3);
}
.sin-foto .marcador{display:flex}
.marcador svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.marcador b{font-size:10.5px;font-weight:700;line-height:1.5;letter-spacing:.22em;text-transform:uppercase}
.marcador small{font-size:12.5px;line-height:1.3;color:var(--texto-suave)}
.provisional{display:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sin-foto .provisional{display:block}

/* el aro de neón y espejos (lo arma disco.js a su tamaño real) */
.aro{position:relative}
.aro__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.aro__foto{position:absolute;inset:13%;border-radius:50%;overflow:hidden;background:var(--noche-3)}
.aro__foto img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 16%}
.aro__tubo circle{fill:none;stroke-linecap:round}
.espejo--titila{animation:titilar var(--d,2.6s) ease-in-out var(--r,0s) infinite alternate}
@keyframes titilar{from{opacity:.45}to{opacity:1}}
html.js .aro--apagado .aro__tubo{opacity:.16}
.aro--prende .aro__tubo{animation:encender .95s steps(1,end) 1 both}

/* destellos de brillo: estrellitas de cuatro puntas que titilan (las reparte disco.js) */
.chispas{position:absolute;inset:0;pointer-events:none;z-index:1}
.chispas i{
  position:absolute;
  width:var(--t,14px);
  height:var(--t,14px);
  margin:calc(var(--t,14px) / -2) 0 0 calc(var(--t,14px) / -2);
  background:var(--c,#FFFFFF);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  transform:scale(0);
  animation:chispa var(--d,2.6s) ease-in-out var(--r,0s) infinite;
}
@keyframes chispa{0%,58%,100%{transform:scale(0) rotate(-12deg)}76%{transform:scale(1) rotate(0deg)}88%{transform:scale(.45) rotate(8deg)}}
.chispas.pausa i{animation-play-state:paused}

/* ------------------------------------------------------------------
   RENATA
   ------------------------------------------------------------------ */
.renata{
  padding:calc(var(--arriba) + 84px) var(--pad) 78px;
  background:
    radial-gradient(ellipse 96% 40% at 50% 0%,rgba(255,62,165,.3) 0%,rgba(255,62,165,0) 70%),
    radial-gradient(ellipse 80% 36% at 50% 30%,rgba(155,92,255,.24) 0%,rgba(155,92,255,0) 70%),
    linear-gradient(180deg,var(--noche-2) 0%,var(--noche) 100%);
}
.renata__dentro{position:relative;z-index:1;display:grid;gap:20px;justify-items:center;max-width:1080px;margin:0 auto}
.aro--retrato{width:min(80vw,336px);aspect-ratio:1;margin:0}
.renata__texto{position:relative;text-align:center;max-width:560px}
.renata__nombre{margin:0;font-size:clamp(88px,27vw,136px);line-height:1.04}
.renata__edad{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  margin:0;
  font-weight:700;
  font-size:13px;
  line-height:1;
  letter-spacing:.44em;
  text-transform:uppercase;
  color:var(--plata);
}
.renata__edad span:first-child{margin-left:.44em}
.renata__edad b{font-size:66px;line-height:1;letter-spacing:0;color:var(--lila);text-shadow:var(--luz-violeta)}
.renata__fecha{margin:22px 0 0;font-family:var(--neon);font-size:clamp(21px,5.8vw,26px);line-height:1.3;color:var(--blanco)}
.renata__fecha b{display:inline-block;margin-top:8px;font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--rosa-claro)}
.renata__mensaje{margin:22px auto 0;max-width:31em;color:var(--texto-suave);text-wrap:pretty}

/* ------------------------------------------------------------------
   LA FECHA · la pista de luces y la cuenta en vúmetro
   ------------------------------------------------------------------ */
.fecha-sec{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:96px var(--pad) 0;
  background:linear-gradient(180deg,var(--noche) 0%,var(--indigo) 46%,var(--uva) 100%);
}
/* el suelo de la pista: baldosas de luz en perspectiva (estático; solo parpadea una capa) */
.suelo{
  position:absolute;
  left:-40%;
  right:-40%;
  bottom:0;
  height:40%;
  transform:perspective(380px) rotateX(64deg);
  transform-origin:50% 100%;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,140,203,.5) 2px,rgba(255,140,203,0) 2px),
    linear-gradient(90deg,rgba(201,168,255,.5) 2px,rgba(201,168,255,0) 2px),
    #1F0D48;
  background-size:76px 76px,76px 76px,auto;
  -webkit-mask-image:linear-gradient(0deg,#000 16%,rgba(0,0,0,0) 96%);
  mask-image:linear-gradient(0deg,#000 16%,rgba(0,0,0,0) 96%);
}
.suelo::before,.suelo::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle 30px at 38px 38px,rgba(255,62,165,.75),rgba(255,62,165,0)),
    radial-gradient(circle 30px at 190px 114px,rgba(155,92,255,.8),rgba(155,92,255,0)),
    radial-gradient(circle 30px at 266px 190px,rgba(255,214,236,.55),rgba(255,214,236,0));
  background-size:304px 228px;
  animation:baldosas 2.2s steps(1,end) infinite;
}
.suelo::after{background-position:152px 76px;animation-delay:-1.1s}
@keyframes baldosas{0%{opacity:1}50%{opacity:.15}}
.suelo.pausa::before,.suelo.pausa::after{animation-play-state:paused}
.fecha-sec__dentro{position:relative;z-index:2;width:100%;max-width:660px;padding:0 0 clamp(120px,22vh,210px);text-align:center}
.fecha{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(78vw,300px);
  aspect-ratio:1;
  margin:26px auto 26px;
  padding-bottom:10px;
  border-radius:50%;
  background:rgba(21,10,46,.5);
}
.fecha__aro{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tubo-c{fill:none;stroke-width:2.6}
.tubo-c--rosa{stroke:var(--rosa-vivo);filter:drop-shadow(0 0 4px var(--rosa)) drop-shadow(0 0 12px rgba(255,62,165,.75))}
.tubo-c--violeta{stroke:var(--lila);filter:drop-shadow(0 0 4px var(--violeta)) drop-shadow(0 0 12px rgba(155,92,255,.75))}
html.js .fecha__aro--apagado .tubo-c{stroke:var(--tubo-apagado);filter:none}
.fecha__aro--prende{animation:encender .95s steps(1,end) 1 both}
.fecha__dia{font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.44em;text-transform:uppercase;color:var(--plata);margin-left:.44em}
.fecha__num{font-size:clamp(116px,35vw,144px);line-height:.94;color:var(--rosa-vivo);text-shadow:var(--luz-rosa)}
.fecha__mes{font-family:var(--neon);font-size:clamp(19px,5.4vw,22px);line-height:1.15;color:var(--lila)}
/* la hora: placa centrada con márgenes (sin translate: GSAP anima su entrada) sobre el borde de abajo del aro */
.fecha__hora{position:absolute;left:0;right:0;bottom:-16px;width:fit-content;margin:0 auto;padding:8px 18px 9px;border-radius:999px;background:var(--rosa);color:var(--tinta);font-weight:700;font-size:12.5px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.cuenta{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,2.6vw,16px)}
.cuenta__dato{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:clamp(66px,19vw,94px);
  padding:11px 6px 10px;
  border-radius:16px;
  border:1px solid rgba(201,168,255,.38);
  background:rgba(21,10,46,.66);
}
.vu{display:flex;flex-direction:column-reverse;gap:2px;width:100%;padding:0 13px;margin-bottom:9px}
.vu i{display:block;height:4px;border-radius:2px;background:rgba(201,168,255,.16);transition:background-color .2s ease}
.vu i.on{background:var(--violeta)}
.vu i.on:nth-child(n+5){background:var(--rosa)}
.vu i.on:nth-child(n+9){background:var(--rosa-vivo)}
.cuenta__n{font-family:var(--neon);font-size:clamp(32px,9.6vw,48px);line-height:1;color:var(--blanco);min-width:1.5em;text-align:center;text-shadow:0 0 12px rgba(201,168,255,.6)}
.cuenta__t{margin-top:5px;font-weight:700;font-size:10.5px;line-height:1.3;letter-spacing:.22em;text-transform:uppercase;color:var(--violeta-claro)}
.cuenta__hoy{margin:12px 0 0;font-family:var(--neon);font-size:40px;line-height:1.1;color:var(--rosa-vivo);text-shadow:var(--luz-rosa)}

/* ------------------------------------------------------------------
   DE BEBÉ A LOS 18 · galería
   ------------------------------------------------------------------ */
.galeria-sec{
  background:
    radial-gradient(ellipse 84% 26% at 50% 0%,rgba(255,62,165,.2) 0%,rgba(255,62,165,0) 70%),
    linear-gradient(180deg,var(--uva) 0%,var(--ciruela) 38%,var(--noche) 100%);
}
.galeria__edad{position:relative;z-index:1;display:flex;align-items:baseline;justify-content:center;gap:10px;margin:14px 0 0;line-height:1}
.galeria__edad b{min-width:1.24em;font-size:88px;line-height:1;text-align:right;color:var(--rosa-vivo);text-shadow:var(--luz-rosa)}
.galeria__edad span{min-width:4.6em;text-align:left;font-weight:700;font-size:13px;letter-spacing:.4em;text-transform:uppercase;color:var(--plata)}
.galeria__guia{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 0;font-size:14.5px;color:var(--texto-suave)}
.guia__mano{width:22px;height:22px;color:var(--rosa-claro);animation:deslizar 2.2s ease-in-out infinite}
@keyframes deslizar{0%,100%{transform:translateX(6px)}50%{transform:translateX(-8px) rotate(-8deg)}}
.galeria{
  position:relative;
  z-index:1;
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:14px 13vw 16px;
  margin:6px calc(-1 * var(--pad)) 0;
  scrollbar-width:none;
}
.galeria::-webkit-scrollbar{display:none}
.foto{position:relative;flex:0 0 74vw;max-width:330px;margin:0;scroll-snap-align:center;transition:opacity .45s ease}
.foto__marco{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:20px;background:var(--noche-3)}
.foto__marco img{width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
/* el filete de neón del marco: apagado hasta que la foto se enciende */
.foto__marco::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:20px;
  pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(106,89,160,.9);
}
.foto--encendida .foto__marco::after{box-shadow:inset 0 0 0 2px var(--rosa-vivo),inset 0 0 16px rgba(255,62,165,.8);animation:encender .8s steps(1,end) 1}
.foto--encendida:nth-child(even) .foto__marco::after{box-shadow:inset 0 0 0 2px var(--lila),inset 0 0 16px rgba(155,92,255,.85)}
.foto__edad{
  position:absolute;
  left:14px;
  top:6px;
  z-index:3;
  font-size:46px;
  line-height:1.1;
  color:var(--rosa-vivo);
  text-shadow:var(--luz-rosa),0 0 3px rgba(21,10,46,.9);
  pointer-events:none;
}
.foto:nth-child(even) .foto__edad{color:var(--lila);text-shadow:var(--luz-violeta),0 0 3px rgba(21,10,46,.9)}
.foto figcaption{margin-top:12px;text-align:center;font-weight:600;font-size:15.5px;line-height:1.4;color:var(--texto);transition:color .35s ease}
.foto figcaption b{display:block;font-family:var(--neon);font-weight:400;font-size:13px;letter-spacing:.3em;color:var(--violeta-claro)}
.puntos{position:relative;z-index:1;display:flex;justify-content:center;margin-top:4px}
.punto{position:relative;flex:0 1 44px;min-width:34px;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;border-radius:50%;border:1px solid var(--rosa-claro);transition:background-color .35s ease,box-shadow .35s ease}
.punto--activo::before{background:var(--rosa-claro);box-shadow:0 0 10px var(--rosa)}

/* ------------------------------------------------------------------
   MI GENTE · la bola lanza un haz de luz a cada uno
   ------------------------------------------------------------------ */
.gente{background:linear-gradient(180deg,var(--noche) 0%,var(--noche-2) 100%)}
.gente__intro{position:relative;z-index:1;margin:14px auto 0;max-width:25em;text-align:center;color:var(--texto-suave);text-wrap:balance}
.haces{position:relative;width:min(100%,430px);aspect-ratio:360/400;margin:16px auto 0}
.haces__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.haz{fill:url(#g-haz)}
.charco{fill:url(#g-charco)}
.haces__bola{position:absolute;left:50%;top:11%;width:22%;aspect-ratio:1;margin:-11% 0 0 -11%}
.persona{position:absolute;width:44%;text-align:center}
.persona--a{left:1.3%;top:44.500%}
.persona--b{left:54.700%;top:44.500%}
.persona--c{left:6.300%;top:81%}
.persona--d{left:49.700%;top:81%}
.persona h3{margin:0 0 2px;font-weight:700;font-size:10.5px;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;color:var(--violeta-claro)}
.persona p{margin:0;font-family:var(--neon);font-size:clamp(23px,6.4vw,29px);line-height:1.1;color:var(--blanco);text-shadow:0 0 14px rgba(255,140,203,.8)}

/* ------------------------------------------------------------------
   EL PROGRAMA · el tubo de neón baja y enciende cada momento
   ------------------------------------------------------------------ */
.programa{background:linear-gradient(180deg,var(--noche-2) 0%,var(--indigo) 100%)}
.programa__cuerpo{position:relative;z-index:1;max-width:560px;margin:38px auto 0}
.tuberia{position:absolute;left:29px;top:8px;bottom:8px;width:6px;margin-left:-3px;border-radius:3px;background:rgba(106,89,160,.5)}
.tuberia i{
  position:absolute;
  inset:0;
  border-radius:3px;
  background:linear-gradient(180deg,var(--rosa-vivo) 0%,var(--rosa) 100%);
  box-shadow:0 0 10px var(--rosa),0 0 24px rgba(255,62,165,.6);
  transform:scaleY(0);
  transform-origin:50% 0;
}
.programa__lista{position:relative;list-style:none;margin:0;padding:0}
.momento{position:relative;display:grid;grid-template-columns:58px 1fr;column-gap:16px;padding:0 0 40px}
.momento:last-child{padding-bottom:0}
.momento__pad{
  grid-row:1 / span 3;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--noche-3);
  box-shadow:inset 0 0 0 2px var(--tubo-apagado),0 0 0 6px var(--noche-2);
  color:var(--tubo-apagado);
  transition:color .4s ease,box-shadow .5s ease,background-color .5s ease;
}
.momento__pad svg{width:30px;height:30px}
.momento__pad img{width:74%;height:74%;object-fit:contain}
.momento--on .momento__pad{color:var(--rosa-vivo);background:#3A1470;box-shadow:inset 0 0 0 2px var(--rosa-vivo),0 0 0 6px var(--noche-2),0 0 20px 4px rgba(255,62,165,.6),inset 0 0 14px rgba(255,62,165,.5)}
.momento:nth-child(even).momento--on .momento__pad{color:var(--lila);box-shadow:inset 0 0 0 2px var(--lila),0 0 0 6px var(--noche-2),0 0 20px 4px rgba(155,92,255,.7),inset 0 0 14px rgba(155,92,255,.55)}
.momento__hora{align-self:end;font-family:var(--neon);font-size:14px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--rosa-claro)}
.momento:nth-child(even) .momento__hora{color:var(--violeta-claro)}
.momento__que{font-family:var(--neon);font-size:clamp(27px,7.4vw,34px);line-height:1.1;color:var(--blanco);text-wrap:balance}
.momento__nota{font-size:15.5px;line-height:1.5;color:var(--texto-suave)}
html.js .momento__hora,html.js .momento__que,html.js .momento__nota{opacity:.34;transition:opacity .7s ease}
html.js .momento--on .momento__hora,html.js .momento--on .momento__que,html.js .momento--on .momento__nota{opacity:1}
.momento--on .momento__pad{animation:encender .8s steps(1,end) 1}

/* ------------------------------------------------------------------
   DÓNDE · toda la tarjeta es el botón al mapa
   ------------------------------------------------------------------ */
.donde{
  background:
    radial-gradient(ellipse 84% 52% at 50% 62%,rgba(255,62,165,.2) 0%,rgba(255,62,165,0) 70%),
    linear-gradient(180deg,var(--indigo) 0%,var(--ciruela) 100%);
}
.lugar{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  max-width:560px;
  margin:32px auto 0;
  padding:34px 20px 30px;
  border-radius:28px;
  overflow:hidden;
  text-align:center;
  text-decoration:none;
  color:var(--texto);
  background:#1D0E40;
  box-shadow:inset 0 0 0 1px rgba(201,168,255,.6),inset 0 0 0 7px #170B33,inset 0 0 0 8px rgba(255,140,203,.42),0 24px 46px -26px rgba(8,3,22,.8);
  transition:background-color .4s ease;
}
.reflejos--tarjeta{z-index:0;opacity:0;transition:opacity 1.2s ease;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,0) 58%);mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,0) 58%)}
.reflejos--tarjeta i{--d:30s;--o:.7}
.reflejos--tarjeta i:nth-child(2){--d:42s;--o:.55}
.lugar--encendido .reflejos--tarjeta{opacity:1}
.lugar.pausa .reflejos--tarjeta i{animation-play-state:paused}
.lugar > *:not(.reflejos){position:relative;z-index:1}
.lugar__pin{display:block;width:42px;height:42px;color:var(--rosa-claro)}
.lugar__pin svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lugar__tipo{margin-top:6px;font-weight:700;font-size:11px;line-height:1.6;letter-spacing:.3em;text-transform:uppercase;color:var(--violeta-claro)}
.lugar__nombre{display:block;font-size:clamp(82px,24vw,112px);line-height:1}
.lugar__sub{font-family:var(--neon);font-size:17px;line-height:1.3;letter-spacing:.3em;text-transform:uppercase;color:var(--lila);margin-left:.3em}
.lugar__dir{margin-top:14px;font-size:16.5px;line-height:1.5;color:var(--texto)}
.lugar__hora{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--texto-suave)}
.lugar__hora b{color:var(--blanco)}
.lugar__ir{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:50px;
  margin-top:18px;
  padding:0 24px 0 18px;
  border-radius:999px;
  border:1px solid var(--rosa-claro);
  color:var(--rosa-vivo);
  font-weight:700;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.lugar:hover,.lugar:focus-visible{background:#2A1260}
.lugar:hover .lugar__ir,.lugar:focus-visible .lugar__ir{background:var(--rosa);border-color:var(--rosa);color:var(--tinta)}
@media (hover:none){
  .lugar__ir{background:var(--rosa);border-color:var(--rosa);color:var(--tinta)}
}

/* ------------------------------------------------------------------
   CÓDIGO DE VESTIMENTA · la pared de lentejuelas
   ------------------------------------------------------------------ */
.vestir{padding:66px 16px 70px;background:#9A9EC0}
.lentejuelas{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#7C80A6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.48' stop-color='%23D6D9EA'/%3E%3Cstop offset='1' stop-color='%23878CB2'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F3F1FB'/%3E%3Cstop offset='.5' stop-color='%23BDC0DA'/%3E%3Cstop offset='1' stop-color='%23777BA4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='24' height='24' fill='%236F7398'/%3E%3Cg fill='url(%23b)' stroke='%236A6E94' stroke-width='.7'%3E%3Ccircle cx='0' cy='0' r='11.4'/%3E%3Ccircle cx='24' cy='0' r='11.4'/%3E%3Ccircle cx='0' cy='24' r='11.4'/%3E%3Ccircle cx='24' cy='24' r='11.4'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='11.4' fill='url(%23a)' stroke='%236A6E94' stroke-width='.7'/%3E%3Cg fill='%235F638A'%3E%3Ccircle cx='12' cy='4.6' r='1.25'/%3E%3Ccircle cx='0' cy='16.6' r='1.25'/%3E%3Ccircle cx='24' cy='16.6' r='1.25'/%3E%3C/g%3E%3C/svg%3E") 0 0/24px 24px;
}
/* el brillo que recorre la pared (una banda de luz; en escritorio sigue al cursor) */
.lentejuelas__brillo{
  position:absolute;
  left:-60%;
  top:0;
  width:60%;
  height:100%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 38%,rgba(255,214,236,.8) 50%,rgba(232,219,255,.7) 62%,rgba(255,255,255,0) 100%);
  opacity:.9;
}
.lentejuelas::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle 260px at var(--lx,-400px) var(--ly,-400px),rgba(255,255,255,.7) 0%,rgba(255,214,236,.4) 40%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.vestir__placa{
  position:relative;
  z-index:1;
  max-width:620px;
  margin:0 auto;
  padding:40px 18px 34px;
  border-radius:30px;
  background:rgba(21,10,46,.93);
  box-shadow:inset 0 0 0 1px rgba(220,223,238,.6),0 30px 60px -30px rgba(21,10,46,.9);
  text-align:center;
}
.vestir .titulo{font-size:clamp(64px,19vw,92px)}
.vestir__texto{margin:16px auto 0;max-width:24em;color:var(--texto);text-wrap:balance}
.vestir__texto b{color:#FFFFFF}
.atuendos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;max-width:440px;margin:26px auto 0}
.atuendo{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center}
.atuendo__caja{
  position:relative;
  width:100%;
  aspect-ratio:3/4.3;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  overflow:hidden;
  color:var(--plata);
  background:radial-gradient(ellipse at 50% 30%,#3A1C7A 0%,var(--noche-3) 100%);
  box-shadow:inset 0 0 0 1px rgba(220,223,238,.45);
}
.atuendo__caja svg{width:56%;height:auto}
.atuendo__caja img{height:88%;width:auto;max-width:86%;object-fit:contain}
.atuendo figcaption{margin-top:12px;display:flex;flex-direction:column;align-items:center}
.atuendo figcaption b{font-family:var(--neon);font-weight:400;font-size:26px;line-height:1.1;color:#FFFFFF}
.atuendo figcaption span{font-size:15px;line-height:1.4;color:var(--texto-suave);text-wrap:balance}
.tonos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;list-style:none;margin:26px auto 0;padding:0;max-width:440px}
.tonos li{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;font-weight:700;font-size:9.5px;line-height:1.35;letter-spacing:.07em;text-transform:uppercase;text-align:center;color:var(--texto-suave)}
.tono{display:block;width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 0 5px var(--noche),0 0 0 6px rgba(220,223,238,.7)}
.tono--plata{background:linear-gradient(135deg,#8F93B4 0%,#F6F7FC 42%,#C9CCE0 60%,#7B7FA3 100%)}
.tono--lentejuela{
  background:
    radial-gradient(circle at 42% 34%,rgba(255,255,255,.95) 0 10%,rgba(255,255,255,0) 32%),
    radial-gradient(circle at 50% 50%,#EDEFFA 0 46%,#8F93B4 62%,rgba(143,147,180,0) 66%),
    #7C80A6;
  background-size:11.5px 11.5px;
}
.tono--metal{background:linear-gradient(135deg,#9B5CFF 0%,#FFD6EC 34%,#DCDFEE 52%,#C9A8FF 70%,#FF8CCB 100%)}
.tono--noche{
  background:
    radial-gradient(circle at 30% 32%,#FFFFFF 0 3%,rgba(255,255,255,0) 6%),
    radial-gradient(circle at 66% 58%,#FFFFFF 0 2.5%,rgba(255,255,255,0) 5.5%),
    radial-gradient(circle at 46% 76%,#DCDFEE 0 2%,rgba(220,223,238,0) 5%),
    radial-gradient(circle at 74% 26%,#DCDFEE 0 2%,rgba(220,223,238,0) 5%),
    #100628;
}
.tono--fucsia{background:radial-gradient(circle at 34% 30%,#FF9AD1 0%,var(--rosa) 55%,#D6157C 100%)}
.vestir__reserva{display:flex;align-items:center;justify-content:center;gap:14px;margin:26px 0 0;font-family:var(--neon);font-size:21px;line-height:1.3;color:var(--rosa-vivo)}
.vestir__reserva .tono{width:34px;height:34px;flex:0 0 auto}

/* ------------------------------------------------------------------
   REGALOS · ideas y lluvia de sobres
   ------------------------------------------------------------------ */
.regalos{background:linear-gradient(180deg,var(--ciruela) 0%,var(--noche-2) 60%,var(--noche) 100%);text-align:center}
.regalos__intro{position:relative;z-index:1;margin:14px auto 0;max-width:30em;color:var(--texto-suave);text-wrap:pretty}
.regalos__lista{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:28px 12px;max-width:520px;margin:32px auto 0;padding:0;list-style:none}
.regalo{display:flex;flex-direction:column;align-items:center;min-width:0}
.regalo__aro{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:108px;
  height:108px;
  border-radius:50%;
  color:var(--rosa-vivo);
  background:radial-gradient(circle at 50% 34%,#3A1C7A 0%,var(--noche-3) 100%);
  box-shadow:inset 0 0 0 2px var(--rosa-claro),0 0 0 5px var(--noche-2),0 0 0 6px rgba(201,168,255,.55),0 0 22px rgba(255,62,165,.35);
  transition:background-color .4s ease;
}
.regalo:nth-child(even) .regalo__aro{color:var(--lila);box-shadow:inset 0 0 0 2px var(--violeta-claro),0 0 0 5px var(--noche-2),0 0 0 6px rgba(255,140,203,.5),0 0 22px rgba(155,92,255,.4)}
.regalo__aro svg{width:46px;height:46px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.regalo__aro img{width:80%;height:80%;object-fit:contain;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.regalo b{display:block;margin-top:14px;font-family:var(--neon);font-weight:400;font-size:21px;line-height:1.15;color:var(--blanco)}
.regalo small{display:block;margin-top:2px;font-size:14.5px;line-height:1.4;color:var(--texto-suave);text-wrap:balance}
.sobres{
  position:relative;
  z-index:1;
  max-width:540px;
  margin:46px auto 0;
  padding:34px 22px 30px;
  border-radius:30px;
  overflow:hidden;
  color:var(--tinta);
  background:linear-gradient(160deg,#FBF8FF 0%,#DCDFEE 56%,#C9CCE0 100%);
  box-shadow:inset 0 0 0 1px #FFFFFF,inset 0 0 0 8px rgba(155,92,255,.14),0 26px 50px -28px rgba(8,3,22,.9);
}
.sobres__lluvia{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sobre-cae{
  position:absolute;
  top:-60px;
  width:var(--t,34px);
  height:calc(var(--t,34px) * .68);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 34'%3E%3Cpath d='M2 2h44v30H2zM2 2l22 17L46 2' fill='none' stroke='%239B5CFF' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.34;
  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;display:flex;align-items:center;justify-content:center;width:84px;height:84px;margin:0 auto 6px;color:#7B3FE0}
.sobres__ico svg{width:62px;height:62px;stroke-width:1.7}
.sobres__ico img{width:100%;height:100%;object-fit:contain}
.sobres__titulo{position:relative;margin:0;font-family:var(--neon);font-weight:400;font-size:34px;line-height:1.1;color:var(--tinta)}
.sobres__texto{position:relative;margin:10px auto 0;max-width:25em;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;border-radius:16px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(155,92,255,.5),0 0 0 6px #F3ECFF,0 0 0 7px var(--rosa)}
.sobres__qr figcaption{margin-top:16px;max-width:19em;font-size:14px;line-height:1.5;color:var(--tinta-suave);text-wrap:balance}

/* ------------------------------------------------------------------
   LA PLAYLIST · sección única
   ------------------------------------------------------------------ */
.playlist{
  background:
    radial-gradient(ellipse 84% 38% at 50% 34%,rgba(155,92,255,.26) 0%,rgba(155,92,255,0) 70%),
    linear-gradient(180deg,var(--noche) 0%,var(--noche-2) 40%,var(--ciruela) 100%);
}
.playlist__intro{position:relative;z-index:1;margin:14px auto 0;max-width:30em;text-align:center;color:var(--texto-suave);text-wrap:pretty}
.playlist__cuerpo{position:relative;z-index:1;display:grid;gap:26px;max-width:1000px;margin:28px auto 0}
.tornamesa{position:relative;width:min(68vw,280px);aspect-ratio:1;margin:0 auto}
.vinilo{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,#150A2E 0 1.5px,#27144F 1.5px 3px);
  box-shadow:0 22px 44px -18px rgba(8,3,22,.9),inset 0 0 0 2px rgba(201,168,255,.4),0 0 30px rgba(155,92,255,.3);
  animation:girar 6s linear infinite paused;
}
.playlist--sonando .vinilo{animation-play-state:running}
.vinilo__surcos{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 18deg,rgba(255,255,255,0) 0 11%,rgba(255,255,255,.22) 17%,rgba(255,255,255,0) 25% 61%,rgba(255,140,203,.2) 67%,rgba(255,255,255,0) 75%);
}
.vinilo__etiqueta{
  position:absolute;
  inset:28%;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:6.6% 4% 4.6%;   /* porcentajes del ancho del vinilo, no de la etiqueta */
  text-align:center;
  background:
    radial-gradient(circle,var(--noche) 0 6%,rgba(21,10,46,0) 6.6%),
    linear-gradient(140deg,#FFB3DC 0%,var(--rosa) 46%,var(--violeta) 100%);
  color:var(--tinta);
  overflow:hidden;
}
.vinilo__etiqueta small{font-weight:700;font-size:8px;line-height:1;letter-spacing:.2em;text-transform:uppercase}
.vinilo__etiqueta b{
  max-width:100%;
  font-family:var(--neon);
  font-weight:400;
  font-size:clamp(12px,3.7vw,15px);
  line-height:1.06;
  min-height:2.12em;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere;
}
.vinilo--vacio .vinilo__etiqueta b{opacity:.82}
.brazo{position:absolute;right:-10%;top:-9%;width:32%;height:auto;overflow:visible;transform-origin:68.900% 13.600%;rotate:-26deg;transition:rotate .9s cubic-bezier(.3,.7,.2,1)}
.playlist--sonando .brazo{rotate:5deg}
.brazo__base{fill:#2B1560;stroke:var(--plata-2);stroke-width:2}
.brazo__eje{fill:var(--plata)}
.brazo__tubo{fill:none;stroke:url(#g-plata);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.brazo__capsula{fill:var(--rosa);stroke:var(--rosa-vivo);stroke-width:1.5}
.playlist__lado{min-width:0}
.campo{display:grid;gap:8px;text-align:left}
.campo__rotulo{font-weight:700;font-size:11.5px;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;color:var(--violeta-claro)}
.campo__entrada{
  width:100%;
  min-height:58px;
  margin:0;
  padding:12px 18px;
  border:1px solid rgba(201,168,255,.75);
  border-radius:16px;
  background:rgba(21,10,46,.74);
  color:var(--blanco);
  font-family:var(--neon);
  font-size:20px;
  line-height:1.3;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease;
}
.campo__entrada::placeholder{color:#B2A5D8;opacity:1}
.campo__entrada:focus{outline:none;border-color:var(--rosa-vivo);background:rgba(38,18,79,.9);box-shadow:0 0 0 1px var(--rosa-vivo),0 0 18px rgba(255,62,165,.55)}
.sugerencias__rotulo{margin:18px 0 8px;font-size:14.5px;line-height:1.4;color:var(--texto-suave)}
.sugerencias{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-height:50px;
  margin:0;
  padding:6px 16px 7px;
  border:1px solid rgba(201,168,255,.55);
  border-radius:14px;
  background:rgba(38,18,79,.78);
  color:var(--blanco);
  font-family:var(--sans);
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.chip b{font-weight:600;font-size:14.5px;line-height:1.25}
.chip small{font-size:12.5px;line-height:1.25;color:var(--texto-suave);transition:color .3s ease}
.chip:focus-visible,.chip:active{background:var(--lila);border-color:#FFFFFF;color:var(--tinta)}
.chip:focus-visible small,.chip:active small{color:var(--tinta-suave)}
@media (hover:hover){
  .chip:hover{background:var(--lila);border-color:#FFFFFF;color:var(--tinta)}
  .chip:hover small{color:var(--tinta-suave)}
}
.chip.chip--elegida,.chip.chip--elegida:hover,.chip.chip--elegida:focus-visible,.chip.chip--elegida:active{background:var(--rosa);border-color:var(--rosa-vivo);color:var(--tinta)}
.chip.chip--elegida small,.chip.chip--elegida:hover small,.chip.chip--elegida:focus-visible small,.chip.chip--elegida:active small{color:var(--tinta)}
/* (la clase .lista es de la portada: la cola de canciones se llama .cola) */
.cola{list-style:none;margin:22px 0 0;padding:6px;border-radius:20px;background:rgba(21,10,46,.62);box-shadow:inset 0 0 0 1px rgba(201,168,255,.32)}
.fila{display:grid;grid-template-columns:26px minmax(0,1fr) auto 20px;align-items:center;column-gap:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,140,203,0)}
.fila__n{font-family:var(--neon);font-size:14px;line-height:1;color:var(--violeta-claro)}
.fila__t{min-width:0;text-align:left}
.fila__t b{display:block;font-weight:600;font-size:16px;line-height:1.25;color:var(--blanco);overflow-wrap:anywhere}
.fila__t small{display:block;font-size:13px;line-height:1.3;color:var(--texto-suave);overflow-wrap:anywhere}
.fila__de{font-weight:700;font-size:9.5px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--rosa-claro);text-align:right;max-width:6.4em}
.fila--tuya{border:1px dashed rgba(255,140,203,.65);background:rgba(255,62,165,.07)}
.fila--tuya .eq{visibility:hidden}
.fila--llena{border:1px solid var(--rosa-vivo);background:rgba(255,62,165,.18);box-shadow:0 0 18px rgba(255,62,165,.45)}
.fila--llena .eq{visibility:visible}
.fila--prende{animation:encender .8s steps(1,end) 1}
.playlist__estado{min-height:1.5em;margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--rosa-claro);text-align:center}

/* ------------------------------------------------------------------
   CONFIRMAR
   ------------------------------------------------------------------ */
.confirmar{
  background:
    radial-gradient(ellipse 100% 60% at 50% 100%,rgba(255,62,165,.36) 0%,rgba(255,62,165,0) 70%),
    linear-gradient(180deg,var(--ciruela) 0%,var(--magenta-osc) 100%);
  text-align:center;
}
.confirmar__texto{position:relative;z-index:1;margin:16px auto 0;max-width:29em;color:var(--texto);text-wrap:pretty}
.confirmar__texto b{color:#FFFFFF}
.contador{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:18px;margin:24px 0 20px}
.contador__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  padding:0;
  border:1px solid var(--rosa-claro);
  border-radius:50%;
  background:rgba(21,10,46,.62);
  color:var(--rosa-vivo);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.contador__btn svg{width:20px;height:20px}
.contador__btn:focus-visible,.contador__btn:active{background:var(--rosa);border-color:var(--rosa);color:var(--tinta)}
@media (hover:hover){
  .contador__btn:hover{background:var(--rosa);border-color:var(--rosa);color:var(--tinta)}
}
.contador__btn:disabled{opacity:.35;cursor:default;pointer-events:none}
.contador__n{min-width:7.5em;font-size:16px;line-height:1.4;color:var(--texto)}
.contador__n b{display:block;font-size:62px;line-height:1;color:#FFFFFF;text-shadow:var(--luz-rosa)}
.mi-cancion{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  max-width:420px;
  margin:0 auto 24px;
  padding:14px 18px 6px;
  border-radius:20px;
  background:rgba(21,10,46,.6);
  box-shadow:inset 0 0 0 1px rgba(255,140,203,.5);
}
.mi-cancion__rotulo{font-weight:700;font-size:10.5px;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;color:var(--violeta-claro)}
.mi-cancion__titulo{font-family:var(--neon);font-weight:400;font-size:21px;line-height:1.25;color:#FFFFFF;overflow-wrap:anywhere}
.mi-cancion--vacia .mi-cancion__titulo{font-family:var(--sans);font-weight:500;font-size:16px;color:var(--texto-suave)}
.mi-cancion__ir{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 4px;
  color:var(--rosa-claro);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(100% - 11px)/0 1px;
  transition:background-size .4s ease,color .3s ease;
}
.mi-cancion__ir:hover,.mi-cancion__ir:focus-visible{background-size:100% 1px;color:var(--rosa-vivo)}
.confirmar .boton--wa{position:relative;z-index:1}

/* ------------------------------------------------------------------
   MI CANCIÓN · la bola es el botón y el ecualizador redondo baila
   ------------------------------------------------------------------ */
.cancion{
  background:
    radial-gradient(ellipse 74% 42% at 50% 62%,rgba(155,92,255,.3) 0%,rgba(155,92,255,0) 70%),
    linear-gradient(180deg,var(--magenta-osc) 0%,var(--noche-2) 34%,var(--noche) 100%);
  text-align:center;
}
.cancion__artista{position:relative;z-index:1;margin:12px 0 0 .32em;font-weight:700;font-size:13px;line-height:1.5;letter-spacing:.32em;text-transform:uppercase;color:var(--plata)}
.tocadisco{
  position:relative;
  z-index:1;
  display:block;
  width:min(74vw,290px);
  aspect-ratio:1;
  margin:22px auto 0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tocadisco__eq{position:absolute;inset:0;pointer-events:none}
.tocadisco__eq i{position:absolute;left:50%;top:50%;width:4px;height:50%;margin-left:-2px;transform-origin:50% 0;transform:rotate(var(--a,0deg))}
.tocadisco__eq b{
  position:absolute;
  left:0;
  top:71%;
  width:100%;
  height:29%;
  border-radius:2px;
  background:linear-gradient(180deg,var(--violeta) 0%,var(--rosa-claro) 100%);
  transform:scaleY(var(--h,.3));
  transform-origin:50% 0;
}
.cancion.tocando .tocadisco__eq b{animation:eq-baila var(--d,.8s) ease-in-out var(--r,0s) infinite alternate}
.tocadisco__bola{position:absolute;inset:20%;border-radius:50%}
.tocadisco__bola::before{content:'';position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(255,62,165,.4) 40%,rgba(155,92,255,0) 72%);opacity:.5;transition:opacity .5s ease}
.tocadisco:hover .tocadisco__bola::before,.tocadisco:focus-visible .tocadisco__bola::before,.cancion.tocando .tocadisco__bola::before{opacity:1}
.tocadisco__play{
  position:absolute;
  right:8%;
  bottom:8%;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--rosa);
  color:var(--tinta);
  box-shadow:0 0 0 4px rgba(21,10,46,.9);
  transition:background-color .35s ease;
}
.tocadisco__play svg{width:26px;height:26px}
.tocadisco:hover .tocadisco__play,.tocadisco:focus-visible .tocadisco__play{background:#FFFFFF}
.ico-pausa{display:none}
.cancion.tocando .ico-play{display:none}
.cancion.tocando .ico-pausa{display:block}
.cancion__pista{position:relative;z-index:1;margin:18px 0 0;font-size:15px;color:var(--texto-suave)}
.cancion__pista a{color:var(--rosa-vivo)}
.yt-oculto{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:-9999px}

/* ------------------------------------------------------------------
   CIERRE · nos vemos en la pista
   ------------------------------------------------------------------ */
.cierre{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 var(--pad);
  background:linear-gradient(180deg,var(--noche) 0%,var(--indigo) 52%,var(--uva) 100%);
  text-align:center;
}
.suelo--cierre{height:34%}
.reflejos--cierre{z-index:1;opacity:.9}
.cierre.pausa .reflejos i{animation-play-state:paused}
.cierre__bola{position:absolute;left:50%;top:clamp(74px,12vh,120px);z-index:1;width:112px;height:112px;margin-left:-56px}
.cierre__dentro{position:relative;z-index:2;width:100%;max-width:660px;padding:clamp(240px,34vh,310px) 0 clamp(150px,24vh,220px)}
.cierre__titulo{font-size:clamp(46px,13.4vw,84px)}
.cierre__texto{margin:20px auto 0;max-width:22em;font-size:19px;line-height:1.5;color:var(--texto);text-wrap:balance}
.cierre__con{margin:28px 0 0 .3em;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.3em;text-transform:uppercase;color:var(--violeta-claro)}
.cierre__firma{margin:0;font-size:clamp(80px,24vw,128px);line-height:1.02}
.cierre .boton{margin-top:26px}

/* ------------------------------------------------------------------
   CRÉDITOS · pie común
   ------------------------------------------------------------------ */
.creditos{
  position:relative;
  z-index:1;
  padding:56px 24px calc(var(--abajo) + 104px);
  text-align:center;
  background:#100724;
  border-top:1px solid rgba(201,168,255,.3);
  color:var(--texto);
}
.creditos__pregunta{margin:0 0 18px;font-family:var(--neon);font-size:clamp(23px,6.4vw,29px);line-height:1.2;color:var(--blanco)}
.creditos__wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 26px;
  border-radius:999px;
  background:var(--rosa);
  color:var(--tinta);
  text-decoration:none;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.16em;
  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(--blanco);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(--rosa-claro),var(--rosa-claro)) 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(--rosa-vivo)}
.creditos__extras{display:none}
.creditos__marca{margin:28px auto 0;padding-top:20px;max-width:420px;border-top:1px solid rgba(201,168,255,.28);display:flex;flex-direction:column;gap:4px}
.creditos__logo{font-family:var(--neon);font-weight:400;font-size:21px;line-height:1.2;letter-spacing:.04em;color:var(--rosa-vivo)}
.creditos__lema{font-size:11px;font-weight:500;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}

@media (max-width:340px){
  .portada__fecha{font-size:11.5px;padding:7px 12px 8px;gap:3px 7px}
  .portada__pista{letter-spacing:.08em;font-size:12px}
}
/* 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 20px}
  .portada__pista{padding:0 20px 0 15px}
  .fila{column-gap:8px;padding:10px 9px}
  .fila__de{font-size:9px;max-width:5.4em}
}

/* ------------------------------------------------------------------
   HORIZONTAL (escritorio, celular echado): la portada en tres tercios
   (el letrero con el nombre a la izquierda, la puerta al centro y el
   llamado a la derecha)
   ------------------------------------------------------------------ */
html.horizontal .portada__cabecera{left:var(--izq);right:auto;top:0;width:calc(var(--lado,34vw) - var(--izq));height:100%;padding:0}
html.horizontal .portada__nombre{font-size:max(40px,min(calc(var(--lado,34vw) * .33),27vh,190px))}
html.horizontal .portada__sobre{font-size:clamp(11.5px,1.2vw,22px)}
html.horizontal .portada__tap{align-items:flex-end;justify-content:center;padding:0 var(--der) 0 0}
html.horizontal .portada__llamado{width:calc(var(--lado,34vw) - var(--der));gap:18px}
html.horizontal .portada__fecha{flex-direction:column;gap:0;border-radius:24px;padding:10px 26px 11px}
html.horizontal .portada__sep{display:none}
html.horizontal .portada__bruma{
  background:
    linear-gradient(90deg,rgba(21,10,46,.5) 0%,rgba(21,10,46,0) 34%),
    linear-gradient(270deg,rgba(21,10,46,.5) 0%,rgba(21,10,46,0) 34%);
}
@media (orientation:landscape) and (max-height:500px){
  .portada__pista{min-height:46px;padding:0 16px 0 12px;font-size:10.5px;letter-spacing:.1em;gap:7px}
  html.horizontal .portada__fecha{padding:6px 16px 7px;border-radius:18px;font-size:13px}
  html.horizontal .portada__llamado{gap:12px}
}

/* ------------------------------------------------------------------
   ESCRITORIO
   ------------------------------------------------------------------ */
@media (min-width:768px){
  :root{--pad:48px}
  body{font-size:18px}
  section{padding:108px var(--pad) 100px}
  .titulo{font-size:clamp(56px,5.8vw,86px)}
  .rotulo{font-size:12.5px}
  .eq{height:36px;gap:4px}
  .eq i{flex-basis:4px;width:4px}
  .eq--mini{height:16px;gap:2px}
  .eq--mini i{flex-basis:2.5px;width:2.5px}

  .renata{padding:128px var(--pad) 104px}
  .renata__dentro{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:76px;align-items:center}
  .aro--retrato{width:400px}
  .renata__nombre{font-size:clamp(120px,12.4vw,190px)}
  .renata__edad b{font-size:84px}
  .renata__mensaje{font-size:18.5px}

  .fecha-sec,.cierre{padding:0 var(--pad)}
  .fecha-sec{padding-top:120px}
  .fecha{width:340px}
  .fecha__num{font-size:170px}
  .fecha__mes{font-size:24px}
  .cuenta__dato{min-width:108px}
  .cuenta__n{font-size:56px}
  .vu{padding:0 20px}
  .suelo{background-size:96px 96px,96px 96px,auto}
  .suelo::before,.suelo::after{background-size:384px 288px}

  .galeria__edad,.galeria__guia,.puntos{display:none}
  .galeria{
    flex-wrap:wrap;
    justify-content:center;
    gap:40px 26px;
    overflow:visible;
    padding:10px 0 0;
    margin:36px auto 0;
    max-width:1100px;
  }
  .foto{flex:0 0 calc(25% - 20px);max-width:none}
  .foto__edad{font-size:52px}
  /* el cursor apaga a las otras y agranda la FOTO (la caja nunca se mueve) */
  .galeria:has(.foto:hover) .foto{opacity:.4}
  .galeria:has(.foto:hover) .foto:hover{opacity:1}
  .foto:hover .foto__marco img{transform:scale(1.06)}
  .foto:hover figcaption{color:var(--rosa-vivo)}

  .haces{width:560px}
  .persona h3{font-size:11.5px}
  .persona p{font-size:34px}

  .programa__cuerpo{max-width:880px;margin-top:52px}
  .tuberia{left:50%}
  .momento{grid-template-columns:1fr 66px 1fr;column-gap:30px;padding-bottom:52px}
  .momento__pad{grid-column:2;grid-row:1 / span 3;width:66px;height:66px}
  .momento__pad svg{width:34px;height:34px}
  .momento__hora,.momento__que,.momento__nota{grid-column:3;text-align:left}
  .momento:nth-child(even) .momento__hora,.momento:nth-child(even) .momento__que,.momento:nth-child(even) .momento__nota{grid-column:1;text-align:right}
  .momento__hora{grid-row:1;font-size:15px}
  .momento__que{grid-row:2;font-size:40px}
  .momento__nota{grid-row:3;font-size:17px}

  .lugar{padding:46px 40px 40px}
  .lugar__nombre{font-size:136px}

  .vestir{padding:96px var(--pad) 100px}
  .vestir__placa{padding:54px 44px 46px}
  .vestir .titulo{font-size:112px}
  .lentejuelas{background-size:28px 28px}
  .atuendos{gap:26px;max-width:470px}
  .tonos{gap:14px}
  .tonos li{font-size:10.5px;letter-spacing:.14em}

  .regalos__lista{grid-template-columns:repeat(4,1fr);max-width:900px;gap:20px}
  .regalo__aro{width:128px;height:128px}
  .regalo__aro svg{width:54px;height:54px}
  .regalo:hover .regalo__aro svg,.regalo:hover .regalo__aro img{transform:scale(1.14)}
  .regalo:hover .regalo__aro{background-color:#3A1C7A}
  .sobres{padding:44px 44px 40px}

  .playlist__cuerpo{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:70px;align-items:center;margin-top:44px}
  .tornamesa{width:340px}
  .vinilo__etiqueta b{font-size:18px}
  .playlist__estado{text-align:left}

  .tocadisco{width:320px}
  .cierre__bola{width:140px;height:140px;margin-left:-70px}
  .cierre__dentro{padding-top:clamp(270px,36vh,330px)}
}
@media (min-width:1100px){
  .portada__pista{min-height:62px;padding:0 38px 0 30px;font-size:15px;gap:13px}
  .portada__pista .pista__mano{width:27px;height:27px}
  .portada__fecha{font-size:18px;padding:10px 26px 11px}
  .renata__dentro{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:100px}
  .aro--retrato{width:440px}
}
@media (min-width:1600px){
  body{font-size:19px}
  .titulo{font-size:96px}
  .renata__dentro{grid-template-columns:minmax(0,500px) minmax(0,1fr);max-width:1260px}
  .aro--retrato{width:500px}
  .renata__mensaje{font-size:20px}
  .portada__pista{min-height:70px;padding:0 44px 0 34px;font-size:16.5px}
  .portada__pista .pista__mano{width:30px;height:30px}
  .portada__fecha{font-size:20px;padding:11px 30px 12px}
  .portada__sobre{letter-spacing:.56em}
}

/* ------------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html.js .revela{opacity:1;transform:none;transition:none}
  .reflejos i,.bola__halo,.portada__nombre,.portada__pista::before,.pista__mano,.guia__mano,.suelo::before,.suelo::after,.chispas i,
  .espejo--titila,.sobre-cae,.musica-flotante__ondas i,.musica-flotante__bola i,.vinilo,.eq i,.tocadisco__eq b{animation:none!important}
  html.js .momento__hora,html.js .momento__que,html.js .momento__nota{opacity:1}
  .brazo{transition:none}
}

/* ===== 29-oct · el toque: espejitos y destellos en la capa .magia (no agranda la página) ===== */
body{position:relative}
.magia{position:absolute;inset:0;z-index:30;overflow:hidden;pointer-events:none}
.brillo{position:absolute;width:var(--t);height:var(--t);margin:calc(var(--t) / -2) 0 0 calc(var(--t) / -2);pointer-events:none;will-change:transform,opacity}
.brillo--espejo{background:linear-gradient(135deg,#fff 0%,var(--c) 45%,#3B1C70 100%);border-radius:2px;box-shadow:0 0 8px var(--c),0 0 2px #fff inset}
.brillo--estrella{background:var(--c);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 5px var(--c))}

/* ===== 29-oct · la fecha sobre el bucle de la entrada (assets/fondo.mp4), con un velo para leer la cuenta ===== */
.fecha-sec__video,.fecha-sec__velo{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.fecha-sec__video{object-fit:cover;object-position:50% 40%;max-width:none}
.fecha-sec__velo{background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(21,10,46,.62) 0%,rgba(21,10,46,.5) 55%,rgba(21,10,46,.82) 100%),linear-gradient(180deg,var(--noche) 0%,rgba(21,10,46,0) 18%,rgba(21,10,46,0) 70%,var(--uva) 100%)}
.fecha-sec .suelo{z-index:1}