/* Noche · cumpleaños de adulto: negro, neón y dorado, esfera disco y destellos */
:root {
  --fondo: #0c0b12; --fondo-2: #15131f; --texto: #f4f0ff; --oro: #e7c77a; --magenta: #ff3ea5; --violeta: #7b5cff;
  --suave: #1c1a29; --acento: #ff3ea5; --sobre-acento: #fff;
  --linea: rgba(255, 62, 165, .35);
  --encabezado-fondo: rgba(12, 11, 18, .9); --menu-fondo: #0c0b12; --encabezado-texto: #f4f0ff;
  --fuente-display: "Syne", system-ui, sans-serif;
  --fuente-script: "Monoton", system-ui, sans-serif;
  --fuente-texto: "Inter", system-ui, sans-serif;
  --radio: 999px; --radio-foto: 16px;
}
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.espacio-sm { margin-top: 28px; }
.encabezado__marca { font: 800 24px var(--fuente-display); color: var(--oro); letter-spacing: .04em; }
.titulo { font-weight: 800; color: var(--texto); letter-spacing: -.01em; }
.eyebrow { color: var(--oro); }
.boton { font-family: var(--fuente-display); font-weight: 700; box-shadow: 0 0 22px rgba(255, 62, 165, .45); }
.boton--linea { background: transparent; color: var(--texto); border-color: rgba(244, 240, 255, .5); box-shadow: none; }

/* Destellos */
.destellos { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.destellos i { position: absolute; width: 6px; height: 6px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px 3px rgba(231,199,122,.8); animation: brillar 3s ease-in-out infinite; opacity: 0; }
.destellos i:nth-child(1) { top: 12%; left: 8%; } .destellos i:nth-child(2) { top: 22%; left: 86%; animation-delay: -.5s; }
.destellos i:nth-child(3) { top: 40%; left: 4%; animation-delay: -1s; } .destellos i:nth-child(4) { top: 55%; left: 92%; animation-delay: -1.5s; }
.destellos i:nth-child(5) { top: 70%; left: 12%; animation-delay: -2s; } .destellos i:nth-child(6) { top: 85%; left: 78%; animation-delay: -2.5s; }
.destellos i:nth-child(7) { top: 8%; left: 55%; animation-delay: -.8s; } .destellos i:nth-child(8) { top: 30%; left: 40%; animation-delay: -1.8s; }
.destellos i:nth-child(9) { top: 62%; left: 48%; animation-delay: -2.8s; } .destellos i:nth-child(10) { top: 92%; left: 30%; animation-delay: -1.2s; }
.destellos i:nth-child(11) { top: 48%; left: 70%; animation-delay: -2.2s; } .destellos i:nth-child(12) { top: 78%; left: 60%; animation-delay: -.3s; }
@keyframes brillar { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .destellos { display: none; } }

/* Esfera disco (CSS puro) */
.esfera { width: 90px; height: 90px; border-radius: 50%; margin-bottom: 14px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95) 0 6%, transparent 18%),
    conic-gradient(from 0deg, #c9c4d8, #6e6a80, #f3f0ff, #8a85a0, #d9d4ea, #5f5b70, #c9c4d8),
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 9px), #aaa;
  background-blend-mode: normal, overlay, normal; box-shadow: 0 0 40px rgba(123, 92, 255, .6), 0 0 80px rgba(255, 62, 165, .3);
  -webkit-mask: radial-gradient(circle, #000 70%, #000); animation: girar 10s linear infinite; position: relative; }
.esfera::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 1px, transparent 1px 9px); }
.esfera::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 60px; background: rgba(255,255,255,.4); }

/* Portada */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--fondo); }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .55; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,11,18,.2) 0%, rgba(12,11,18,.55) 45%, var(--fondo) 92%); }
.hero__texto { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; padding: 120px 20px 56px; }
.hero__pre { font: 700 14px var(--fuente-display); letter-spacing: .4em; text-transform: uppercase; color: var(--oro); }
.hero__edad { font: 400 clamp(120px, 38vw, 220px)/.9 var(--fuente-script); color: #fff; text-shadow: 0 0 8px #fff, 0 0 24px var(--magenta), 0 0 48px var(--magenta), 0 0 80px var(--violeta); margin: 6px 0; }
.hero__nombre { font: 800 clamp(30px, 7vw, 48px)/1.1 var(--fuente-display); }
.hero__fecha { font-size: 17px; margin-top: 8px; color: rgba(244,240,255,.85); }
.hero__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 1fr; align-items: center; }
  .hero::after { background: linear-gradient(90deg, var(--fondo) 0%, rgba(12,11,18,.85) 45%, rgba(12,11,18,.2) 100%); }
  .hero__foto { opacity: .8; }
  .hero__texto { grid-column: 1; padding: 100px 48px; }
}

/* Secciones */
.invitacion { background: var(--fondo); }
.frase { font: 700 clamp(22px, 4vw, 32px)/1.4 var(--fuente-display); max-width: 30ch; margin: 0 auto; }
.neon { background: var(--fondo-2); border-block: 1px solid var(--linea); }
.tarjeta { background: var(--suave); border-radius: 22px; padding: 32px 24px; border: 1px solid var(--linea); box-shadow: 0 0 30px rgba(123, 92, 255, .15); }

/* Cuenta regresiva */
.cuenta__item { background: var(--fondo); border: 1px solid var(--linea); border-radius: 16px; }
.cuenta__num { font-family: var(--fuente-display); font-weight: 800; color: #fff; text-shadow: 0 0 14px var(--magenta); }
.cuenta__lbl { color: var(--oro); }

/* La noche */
.eventos { max-width: 560px; margin-inline: auto; grid-template-columns: 1fr; }
.evento { background: var(--suave); border-radius: 22px; border: 1px solid var(--linea); }
.evento__tipo { color: var(--oro); }
.evento__hora { color: var(--magenta); font-weight: 800; font-family: var(--fuente-display); }
.evento__mapa { filter: invert(.9) hue-rotate(180deg) saturate(.6); }
.itin-caja { margin: 40px auto 0; max-width: 560px; }
.subtitulo { font: 800 30px var(--fuente-display); color: var(--oro); }
.itin__hora { color: var(--magenta); font-weight: 700; font-family: var(--fuente-display); }
.itin__txt { text-align: left; }
.itin__punto { background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }

/* Detalles */
.detalles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px; }
.vest__codigo { color: var(--oro); font-family: var(--fuente-display); font-weight: 800; }
.vest__ninos { color: rgba(244,240,255,.8); }
.cancion { font-size: 17px; }

/* Galería */
.galeria { grid-auto-flow: dense; }
.gal__item { border-radius: 16px; background: var(--suave); }
.gal__item:first-child { grid-row: span 2; aspect-ratio: auto; }
.hashtag { margin-top: 24px; }
.hashtag strong { color: var(--magenta); }

/* Confirmar */
.confirmar { background: radial-gradient(circle at 50% 0%, rgba(255,62,165,.35), transparent 60%), radial-gradient(circle at 50% 100%, rgba(123,92,255,.35), transparent 60%), var(--fondo); }
.confirmar .titulo { font: 400 clamp(56px, 14vw, 96px)/1 var(--fuente-script); text-shadow: 0 0 20px var(--magenta); }
.confirmar__texto { max-width: 42ch; margin: 14px auto 0; }

.pie { background: var(--fondo); color: rgba(244,240,255,.8); }
.pie__nombre { font: 800 34px var(--fuente-display); color: var(--oro); }
.btn-musica { background: var(--fondo-2); }

/* Ajustes: Monoton no tiene «¿» y Syne es muy ancha para 3 dígitos */
.confirmar .titulo { font: 800 clamp(48px, 12vw, 84px)/1 var(--fuente-display); color: #fff; text-shadow: 0 0 10px #fff, 0 0 26px var(--magenta), 0 0 52px var(--violeta); }
.cuenta__num { font-size: clamp(24px, 7vw, 46px); letter-spacing: -.02em; }
.cuenta__num { font-family: var(--fuente-texto); font-weight: 600; letter-spacing: 0; }