/* 100 · Bola de Espejos — fiesta disco de noche. Apertura: la bola cuelga apagada; al tocarla se enciende y sus
   destellos inundan la pantalla. Portada: los puntos de luz giran por todo el fondo (WebGL, modo destellos).
   Orden: la pista — cada sección entra con un barrido de luz de color y el tinte cambia de magenta a lila y cian.
   Fecha: la bola baja, se abre en dos mitades y adentro brilla el día. */
.c-disco { --display-peso: 800; --nombre-color: #FFFFFF; --titulo-letra: "Syne"; --titulo-peso: 800; --titulo-espacio: -.02em; --dia-letra: "Monoton"; --dia-color: #FFFFFF;
	--edad-letra: "Monoton"; --edad-color: #FF5CA8; --radio: 24px; --vj: 64px; --sombra: 0 26px 40px rgb(0 0 0 / .55); --nombre-tam: clamp(3.6rem, 9vw, 8rem); --display-espacio: -.03em;
	--tinte-mezcla: screen; --tinte-op: .16; }
.c-disco .xv-cielo { display: none; }
.c-disco main { background: radial-gradient(120% 60% at 50% 0%, #241A4E, #12122B 60%); }
.c-disco main > .xv-sec:not(#portada) { background: transparent; }
.c-disco .v-velo { background: radial-gradient(55% 40% at 50% 46%, rgb(10 8 30 / .55), transparent 75%); }

/* portada */
.c-disco .e-evento { color: #2DE2E6; letter-spacing: .55em; font-weight: 700; font-size: .78rem; text-shadow: 0 0 14px rgb(45 226 230 / .7); }
.c-disco .e-nombre { text-shadow: 0 0 2px #fff, 0 0 26px rgb(229 57 143 / .7), 0 0 60px rgb(142 124 240 / .5); }
.c-disco .e-edad { gap: .2em; }
.c-disco .e-edad-n { text-shadow: 0 0 22px rgb(229 57 143 / .8); }
.c-disco .e-edad-t { font-family: "Syne", sans-serif; font-weight: 700; color: #FFFFFF; text-transform: uppercase; letter-spacing: .3em; font-size: clamp(.9rem, 2vw, 1.2rem); }
.c-disco .e-fecha { color: #FFFFFF; background: rgb(18 18 43 / .55); padding: 7px 18px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .18); backdrop-filter: blur(6px); }
.c-disco .e-pista { color: #FFFFFF; }
.di-bola { --w: min(30vmin, 250px); right: 4vw; top: -5vh; --r: 0deg; --dy: -26vh; --ds: -.2; --ex: 0px; --ey: -50vh; --ed: .3s; --fd: 3.4s; --fa: 6px; --fr: 3deg; }
.di-tacones { --w: min(28vmin, 250px); left: 3vw; bottom: 4vh; --r: -16deg; --dx: -10vw; --dy: 10vh; --dr: -10deg; --ex: -30vw; --ey: 0px; --ed: .6s; --fd: 5s; --fa: 8px; --fr: 3deg; }

/* secciones: paneles de vidrio oscuro con borde de neón */
.c-disco main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { background: rgb(22 18 56 / .62); border: 1px solid rgb(255 255 255 / .12); border-radius: 28px; padding: clamp(26px, 4vw, 52px);
	backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgb(229 57 143 / .14), 0 0 40px -10px rgb(142 124 240 / .35), 0 30px 60px -30px rgb(0 0 0 / .7); }
.c-disco .xv-kicker { color: #FF5CA8; letter-spacing: .42em; }
.c-disco .xv-titulo { color: #FFFFFF; }
.c-disco .xv-titulo .xv-script { font-family: "Monoton", cursive; font-weight: 400; color: #2DE2E6; font-size: .86em; letter-spacing: .02em; text-shadow: 0 0 16px rgb(45 226 230 / .55); }
.c-disco .xv-superficie { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .14); }
.c-disco .xv-momento time { color: #2DE2E6; }
.c-disco .e-firma { font-family: "Syne", sans-serif; font-weight: 800; color: #FF5CA8; text-shadow: 0 0 18px rgb(229 57 143 / .6); }
.c-disco .xv-boton:not(.xv-boton-suave) { background: #B51D69; color: #FFFFFF; border-color: #B51D69; box-shadow: 0 0 24px rgb(229 57 143 / .45); }
.c-disco .xv-boton-suave { color: #FFFFFF; border-color: rgb(255 255 255 / .35); }
.c-disco .e-ornamento { width: min(70%, 260px); }

/* fecha: la bola baja, se abre y adentro está el día */
.c-disco .e-fecha-k { color: #2DE2E6; }
.di-m-bola { left: 18%; top: 4%; width: 64%; transform: translateY(calc((1 - var(--t1)) * -70%)) rotate(calc(var(--t1) * 30deg)); opacity: clamp(0, calc((1 - var(--t2)) * 4), 1); filter: drop-shadow(0 0 30px rgb(229 57 143 / .45)); }
.di-m-media { top: 20%; width: 52%; opacity: clamp(0, calc(var(--t2) * 4), 1); filter: drop-shadow(0 0 24px rgb(232 199 122 / .5)); }
.di-m-a { left: -2%; transform: translateX(calc(var(--t2) * -14%)) rotate(calc(-40deg - var(--t2) * 18deg)); }
.di-m-b { right: -2%; transform: scaleX(-1) translateX(calc(var(--t2) * -14%)) rotate(calc(-40deg - var(--t2) * 18deg)); }
.di-m-luz { inset: 20%; border-radius: 50%; background: radial-gradient(circle, rgb(255 246 224 / .95), rgb(229 57 143 / .45) 52%, transparent 72%); opacity: var(--t2); transform: scale(calc(.3 + var(--t2) * .7)); }
.c-disco .e-dia { font-size: clamp(4.4rem, 13vw, 7.6rem); text-shadow: 0 0 24px rgb(229 57 143 / .9); }
.c-disco .e-mes { font-family: "Syne", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .3em; color: #12122B; font-size: clamp(.9rem, 2.4vw, 1.2rem); margin-top: 6px; }
.c-disco .e-anio { color: #2A1640; }
.c-disco .e-sem { color: #D9DCE6; }

/* cierre */
.di-cierre-bola { position: absolute; left: 50%; top: 4%; width: min(26vmin, 180px); translate: -50% 0; filter: drop-shadow(0 0 40px rgb(229 57 143 / .5)); animation: e-flota 3s ease-in-out infinite alternate; }
.c-disco .e-cierre { padding-top: clamp(200px, 30vh, 280px); }
.c-disco .e-nombre-fin { text-shadow: 0 0 26px rgb(229 57 143 / .6); }

@media (max-width: 760px) {
	.c-disco { --nombre-tam: clamp(2.8rem, 13vw, 4.4rem); }
	.di-bola { --w: 38vw; right: -4vw; top: -3vh; }
	.di-tacones { --w: 36vw; left: -4vw; bottom: 3vh; }
}