/* En vivo — específicos (prefijo .envivo-). Página completa en tono noche. */

/* ---- Hero --------------------------------------------------------------- */
.envivo-hero__rejilla {
	display: grid; grid-template-columns: 1.4fr .8fr;
	gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.envivo-hero__kicker { display: inline-flex; align-items: center; gap: .6em; }
.envivo-hero__titulo {
	font-family: var(--f-display); font-weight: 600;
	font-size: clamp(3rem, 10vw, 7rem); line-height: 1; letter-spacing: -0.03em; margin-top: 1.25rem;
}
.envivo-hero__titulo em { font-style: italic; color: var(--rojo); }
.envivo-hero__intro { margin-top: 1.5rem; color: var(--fg-70); max-width: 50ch; font-size: 1.05rem; }

.envivo-hero__lista { margin-top: 1rem; display: grid; gap: .9rem; }
.envivo-hero__dato { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--linea-negro); }
.envivo-hero__dato:last-child { border-bottom: 0; padding-bottom: 0; }
.envivo-hero__dato dt { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--crema-70); }
.envivo-hero__dato dd { font-family: var(--f-display); color: var(--crema); text-align: right; }

/* ---- Marco del reproductor --------------------------------------------- */
.envivo-marco { border: 1px solid var(--borde); background: var(--negro-2); border-radius: var(--radio); overflow: hidden; }
.envivo-marco__pantalla {
	position: relative; aspect-ratio: 16 / 9; display: grid; place-content: center; gap: .8rem; text-align: center;
	background: radial-gradient(60% 70% at 50% 38%, rgba(150, 26, 20, .28) 0%, transparent 62%), var(--negro);
	border-bottom: 1px solid var(--borde);
}
.envivo-marco__chip {
	position: absolute; top: 1rem; left: 1rem; color: var(--rojo);
	border: 1px solid var(--rojo); border-radius: 999px; padding: .35em .85em;
}
.envivo-marco__estado {
	font-family: var(--f-display); font-style: italic; font-weight: 600;
	font-size: clamp(1.6rem, 4vw, 2.8rem); color: var(--crema); padding-inline: 1rem;
}
.envivo-marco__hora { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--crema-70); }
.envivo-marco__pie { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.25rem; color: var(--crema-70); font-size: .68rem; letter-spacing: .1em; }

/* ---- Agenda ------------------------------------------------------------- */
.envivo-agenda { border-top: 1px solid var(--borde); }
.envivo-agenda__fila { display: grid; grid-template-columns: 10rem 1fr; gap: 1.5rem; align-items: baseline; padding-block: 1.5rem; border-bottom: 1px solid var(--borde); }
.envivo-agenda__cuando { display: flex; flex-direction: column; gap: .3rem; }
.envivo-agenda__dia { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; color: var(--crema); }
.envivo-agenda__hora { color: var(--naranja); letter-spacing: .12em; }
.envivo-agenda__nombre { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--crema); }
.envivo-agenda__nota { margin-top: .4rem; color: var(--fg-70); max-width: 60ch; }
.envivo-agenda__aviso { margin-top: 1.5rem; }

/* ---- Plataformas -------------------------------------------------------- */
.envivo-plataformas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.envivo-plataforma {
	display: grid; gap: .55rem; border: 1px solid var(--borde); background: var(--bg-2);
	padding: 1.7rem; border-radius: var(--radio);
	transition: border-color .18s ease, transform .18s ease;
}
.envivo-plataforma:hover { border-color: var(--naranja); transform: translateY(-2px); }
.envivo-plataforma__num { color: var(--naranja); }
.envivo-plataforma__nombre { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; color: var(--crema); }
.envivo-plataforma__texto { color: var(--fg-70); }
.envivo-plataforma__ir { margin-top: .4rem; }

@media (max-width: 900px) {
	.envivo-hero__rejilla { grid-template-columns: 1fr; }
	.envivo-plataformas { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.envivo-agenda__fila { grid-template-columns: 1fr; gap: .5rem; }
}