/* 89 · Fuegos de Medianoche — al revés: la cuenta regresiva va primero, como el conteo de Año Nuevo, y después la portada.
   Fuegos artificiales en código en toda la página (estallan también al tocar). En la fecha un cohete sube y estalla en el día. */
.c-fuegos { --display-peso: 400; --nombre-color: #F2F4FA; --titulo-letra: "Syne"; --titulo-peso: 800; --titulo-espacio: -.03em; --dia-letra: "Limelight"; --dia-color: #F2F4FA;
	--y-letra: "Syne"; --y-peso: 700; --y-tam: .32em; --y-color: #E8C46A; --y-margen: .1em 0 .14em; --radio: 20px; --vj: 54px; --sombra: 0 24px 30px rgb(0 0 0 / .5);
	--nombre-tam: clamp(4.2rem, 11vw, 9.4rem); --pareja-tam: 1; --display-espacio: .02em; }
.c-fuegos .xv-cielo { display: none; }
.c-fuegos .e-evento { color: #E8C46A; letter-spacing: .5em; font-weight: 700; }
.c-fuegos .e-nombre { text-shadow: 0 0 30px rgb(232 196 106 / .45); line-height: 1.04; }
.c-fuegos .e-fecha { color: #C9D0E0; letter-spacing: .14em; }
.fu-bengala-a { --w: min(18vmin, 180px); left: 6vw; bottom: 4vh; --r: -16deg; --dy: 12vh; --ey: 30vh; --ed: .6s; --fd: 3s; --fa: 4px; }
.fu-bengala-b { --w: min(16vmin, 160px); right: 6vw; bottom: 6vh; --r: 16deg; --dy: 14vh; --ey: 30vh; --ed: .8s; --fd: 3.4s; --fa: 4px; }
.c-fuegos .so-y { font-family: "Syne", sans-serif; font-weight: 700; font-size: .4em; color: #B08A2E; }
/* la fecha va primero: es la pantalla grande de la cuenta */
.c-fuegos #fecha { order: -1; }
.c-fuegos .e-fecha-k { color: #E8C46A; font-size: .9rem; letter-spacing: .6em; }
.c-fuegos .e-cuenta { --tam: clamp(2.6rem, 6vw, 4.4rem); }
/* la cuenta se ve desde el primer momento; el cohete y el día llegan al bajar */
.c-fuegos .e-sem, .c-fuegos .e-cuenta-caja { opacity: 1; }
.c-fuegos .e-fecha-escena::after { content: "Desliza para el estallido"; position: absolute; left: 50%; bottom: max(96px, 12vh); translate: -50% 0; font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; color: #C9D0E0; opacity: clamp(0, calc(1 - var(--t1) * 3), .8); white-space: nowrap; pointer-events: none; }
.c-fuegos .e-cierre .e-titulos, .c-fuegos .e-cierre > .xv-ancho { position: relative; z-index: 1; }
.c-fuegos .e-cierre::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(120vw, 900px); aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(circle, rgb(6 10 30 / .82) 0 30%, transparent 64%); pointer-events: none; z-index: 0; }
.c-fuegos .e-nombre-fin { text-shadow: 0 0 18px rgb(6 10 30 / .9), 0 0 30px rgb(232 196 106 / .35); }
.c-fuegos .e-cuenta .xv-num, .c-fuegos .e-cuenta .xv-d { color: #F2F4FA; text-shadow: 0 0 22px rgb(232 196 106 / .55); }
.c-fuegos #portada { background: transparent; }
.c-fuegos main > .xv-sec { background: transparent; }
.c-fuegos main > .xv-sec:not(#portada):not(#fecha) > .xv-ancho { background: rgb(10 18 48 / .55); border: 1px solid rgb(232 196 106 / .25); border-radius: 26px; padding: clamp(24px, 4vw, 44px); backdrop-filter: blur(6px); }
.c-fuegos .xv-kicker { color: #E8C46A; }
.c-fuegos .xv-titulo .xv-script { font-family: "Limelight", serif; color: #E8C46A; font-weight: 400; }
.c-fuegos .xv-superficie { background: rgb(17 26 61 / .7); border-color: rgb(232 196 106 / .25); }
.c-fuegos .xv-momento time { color: #E8C46A; }
.c-fuegos .e-firma { font-family: "Limelight", serif; color: #E8C46A; }
.c-fuegos .e-ornamento { width: min(56%, 220px); }
/* fecha: cohete → estallido → día */
.fu-m-cohete { left: 49%; top: 92%; width: 2%; height: 10%; border-radius: 4px; background: linear-gradient(180deg, #FFF3C9, #E8C46A 40%, transparent); transform: translateY(calc(var(--t1) * -420%)); opacity: clamp(0, calc((1 - var(--t1)) * 6), 1); }
.fu-m-estallido { inset: 0; border-radius: 50%; opacity: clamp(0, calc(var(--t1) * 4 - 2.6), 1) ; transform: scale(calc(.2 + var(--t2) * .8)) rotate(calc(var(--m) * 40deg));
	background: repeating-conic-gradient(from 0deg, rgb(232 196 106 / .9) 0 1.2deg, transparent 1.2deg 9deg), repeating-conic-gradient(from 4deg, rgb(240 140 178 / .7) 0 1deg, transparent 1deg 12deg);
	-webkit-mask: radial-gradient(circle, transparent 38%, #000 42%, #000 62%, transparent 72%); mask: radial-gradient(circle, transparent 38%, #000 42%, #000 62%, transparent 72%); filter: drop-shadow(0 0 10px rgb(232 196 106 / .6)); }
.c-fuegos .e-dia { font-size: clamp(4.4rem, 12vw, 7rem); text-shadow: 0 0 26px rgb(232 196 106 / .55); }
.c-fuegos .e-mes { font-family: "Syne", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .3em; color: #E8C46A; font-size: .9rem; margin-top: 8px; }
.c-fuegos .e-anio, .c-fuegos .e-sem { color: #C9D0E0; }
.fu-cierre-copas { position: relative; display: block; width: min(24vmin, 180px); margin: 0 auto; }
.c-fuegos .e-cierre-arte { position: relative; inset: auto; z-index: 0; }
@media (max-width: 760px) {
	.c-fuegos { --nombre-tam: clamp(3.6rem, 17vw, 5.2rem); }
	.c-fuegos .e-cuenta { --tam: clamp(1.6rem, 7vw, 2.1rem); }
	.fu-bengala-a { --w: 26vw; } .fu-bengala-b { --w: 22vw; }
}