/* 158 · En Vivo — eventos transmitidos o híbridos: punto rojo de «en vivo», pantalla y chat. Se abre una pantalla negra con el botón de reproducir: aparece el punto rojo y arranca.
   Portada: el set de transmisión con cámara y luces a los lados, con las luces que titilan (WebGL, modo titila).
   Orden: la transmisión — cada sección es un segmento con su marca de grabación, su tiempo y una barra de progreso que avanza; el acceso en línea va como ventana de chat.
   Fecha: el contador «Empieza en…» llega al día. Cierre: «Gracias por conectarse». */
.c-envivo { --display-peso: 800; --nombre-color: #F4F6F8; --titulo-letra: "Inter"; --titulo-peso: 700; --titulo-espacio: -.03em;
	--dia-letra: "Inter"; --dia-color: #F4F6F8; --radio: 14px; --vj: 40px; --sombra: 0 18px 24px rgb(0 0 0 / .45); --nombre-tam: clamp(3rem, 8.4vw, 7rem); --ap-w: min(88vw, 460px); }
.c-envivo .xv-cielo { display: none; }
.c-envivo main { background: #0F1115; }
.c-envivo main > .xv-sec:not(#portada) { background: transparent; }
.c-envivo .v-velo { background: radial-gradient(46% 38% at 50% 50%, rgb(10 11 14 / .7), transparent 76%); }

/* apertura: la pantalla con el botón de reproducir */
.ap-t-envivo .ap-t-cara { background: #000000; border: 1px solid rgb(244 246 248 / .14); border-radius: 14px; aspect-ratio: 16 / 10; align-content: center; padding: 24px; box-shadow: 0 30px 80px rgb(0 0 0 / .7); }
.ap-t-envivo .ap-titulo small { color: #B9C0CA; } .ap-t-envivo .ap-titulo strong { color: #F4F6F8; font-size: clamp(1.8rem, 7vw, 2.6rem); letter-spacing: -.03em; }
.ap-v-punto { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; background: rgb(255 59 59 / .12); color: #FF4D4D; font: 800 .66rem/1 "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; opacity: .35; }
.ap-v-punto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
html.so-abre .ap-v-punto { opacity: 1; background: #FF3B3B; color: #FFFFFF; animation: ev-late 1s ease-in-out infinite; }
.ap-v-play { width: 0; height: 0; border-left: 26px solid #F4F6F8; border-top: 16px solid transparent; border-bottom: 16px solid transparent; margin: 6px 0 6px 8px; }
.ap-t-envivo .ap-t-boton { background: #F4F6F8; color: #0F1115; }
@keyframes ev-late { 50% { opacity: .55; } }

.c-envivo .e-evento { display: inline-flex; align-items: center; gap: 8px; color: #FFFFFF; background: #FF3B3B; padding: 6px 12px; border-radius: 4px; letter-spacing: .2em; font-size: .7rem; font-weight: 800; }
.c-envivo .e-evento::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; animation: ev-late 1s ease-in-out infinite; }
.c-envivo .e-logo { color: #B9C0CA; border-color: rgb(244 246 248 / .3); }
.c-envivo .e-lema { color: #B9C0CA; }
.c-envivo .e-fecha { color: #B9C0CA; }
.c-envivo .e-nombre { text-shadow: 0 6px 30px rgb(0 0 0 / .8); }
.ev-luz { --w: min(20vmin, 190px); right: 4vw; top: 8vh; --dy: -10vh; --ex: 30vw; --ey: 0px; --ed: .3s; --fd: 9s; --fa: 2px; --fr: 0deg; }
.ev-camara { --w: min(24vmin, 230px); left: 3vw; bottom: 4vh; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .5s; --fd: 9s; --fa: 2px; --fr: 0deg; }
.ev-micro { --w: min(18vmin, 170px); right: 4vw; bottom: 5vh; --dy: 10vh; --ex: 30vw; --ey: 0px; --ed: .65s; --fd: 8s; --fa: 2px; --fr: 0deg; }

/* segmentos con barra de progreso */
.c-envivo main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #171A21; border: 1px solid rgb(244 246 248 / .1); border-radius: 14px; padding: clamp(60px, 7vw, 80px) clamp(24px, 5vw, 64px) clamp(44px, 5vw, 64px); box-shadow: 0 30px 60px -40px rgb(0 0 0 / .9); overflow: hidden; }
.ev-rec { top: 20px; left: clamp(24px, 5vw, 64px); display: inline-flex; align-items: center; gap: 8px; font: 700 .7rem/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #B9C0CA; }
.ev-rec i { width: 8px; height: 8px; border-radius: 50%; background: #FF3B3B; }
.llego > .xv-ancho > .ev-rec i { animation: ev-late 1s ease-in-out infinite; }
.c-envivo .fi-progreso { height: 5px; } .c-envivo .fi-progreso::before { background: #FF3B3B; }
.c-envivo .xv-kicker { color: #5B9BFF; letter-spacing: .26em; font-weight: 700; }
.c-envivo .xv-titulo .xv-script { color: #5B9BFF; }
.c-envivo .xv-superficie { background: rgb(244 246 248 / .04); border: 1px solid rgb(244 246 248 / .1); border-radius: 10px; box-shadow: none; }
.c-envivo .xv-momento time { color: #FF4D4D; font-weight: 700; font-variant-numeric: tabular-nums; }
.c-envivo .e-firma { font-weight: 800; color: #5B9BFF; font-size: clamp(1.4rem, 3vw, 2rem); }
.c-envivo .xv-boton:not(.xv-boton-suave) { background: #F4F6F8; color: #0F1115; border-color: #F4F6F8; }
.c-envivo .e-ornamento { width: min(66%, 260px); }
.c-envivo .xv-rsvp textarea, .c-envivo .xv-rsvp input { background: rgb(244 246 248 / .06); color: #F4F6F8; border-color: rgb(244 246 248 / .2); }
/* el chat de la transmisión */
.ev-chat { max-width: 520px; margin: 0 auto; background: #171A21; border: 1px solid rgb(244 246 248 / .12); border-radius: 16px; overflow: hidden; display: grid; gap: 10px; padding-bottom: 16px; }
.ev-chat-cab { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: #1C2029; font: 700 .8rem/1 "Inter", sans-serif; color: #F4F6F8; border-bottom: 1px solid rgb(244 246 248 / .08); }
.ev-chat-cab i { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; }
.ev-msg { margin: 0 16px; max-width: 82%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: #232836; color: #E3E7EC; font-size: .92rem; line-height: 1.45; justify-self: start; }
.ev-msg b { display: block; font-size: .72rem; color: #5B9BFF; margin-bottom: 2px; }
.ev-yo { justify-self: end; border-radius: 14px 14px 4px 14px; background: #2B4C8C; } .ev-yo b { color: #BFD6FF; }
.ev-escribe { margin: 0 16px; display: inline-flex; gap: 4px; } .ev-escribe i { width: 7px; height: 7px; border-radius: 50%; background: #9AA3AF; animation: ev-late 1s ease-in-out infinite; } .ev-escribe i:nth-child(2) { animation-delay: .2s; } .ev-escribe i:nth-child(3) { animation-delay: .4s; }
.ev-chat-sec .fi-d { display: none; }

/* fecha: el contador «Empieza en…» */
.c-envivo .e-fecha-k { color: #5B9BFF; letter-spacing: .3em; font-weight: 700; }
@property --ev { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.ev-m-aro { inset: 4%; border-radius: 50%; background: conic-gradient(#FF3B3B calc(var(--t1) * 360deg), rgb(244 246 248 / .1) 0); -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%); mask: radial-gradient(circle, transparent 64%, #000 65%); opacity: clamp(0, calc(var(--t1) * 3), 1); }
.ev-m-txt { left: 0; right: 0; top: 24%; text-align: center; font: 700 .72rem/1 "Inter", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #B9C0CA; opacity: calc(var(--t1) - var(--t2) * .2); }
.c-envivo .e-dia { font-size: clamp(4.4rem, 12vw, 7rem); font-weight: 800; letter-spacing: -.04em; }
.c-envivo .e-mes { font-family: "Inter", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; color: #FF4D4D; font-size: clamp(.8rem, 2vw, 1rem); }
.c-envivo .e-anio { color: #B9C0CA; }

.ev-fin { position: absolute; left: 50%; top: 60px; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 8px; background: #171A21; border: 1px solid rgb(244 246 248 / .14); color: #B9C0CA; font: 700 .78rem/1 "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.ev-fin i { width: 10px; height: 10px; border-radius: 50%; background: #5A616C; }
.c-envivo .e-cierre { padding-top: clamp(150px, 22vh, 200px); }
.c-envivo .e-cierre .xv-kicker { color: #5B9BFF; }

@media (max-width: 760px) {
	.c-envivo { --nombre-tam: clamp(2.6rem, 12vw, 3.6rem); }
	.ev-luz { --w: 30vw; right: 0; top: 6vh; } .ev-camara { --w: 38vw; left: -4vw; bottom: 3vh; } .ev-micro { --w: 30vw; right: 0; bottom: 4vh; }
}