/*
 * FM Centro — estilos.
 *
 * Paleta: sale del logo (disco azul, anillo dorado). El azul noche viste lo que
 * es «radio» (cabecera, al aire, dial, reproductor, pie); el papel frío, lo que
 * es «leer». Los botones de escuchar son de acero (gris azulado) con el ícono
 * azul; sonando, el ícono pasa a blanco. En el dial, lo que suena ahora va en
 * blanco (la aguja, el programa al aire). El rojo solo para el punto de «en vivo».
 * Cada categoría tiene su color (--cat): La Araucanía, bosque; Nacional, señal.
 *
 * Tipos: Archivo (variable, con ancho) para titulares e interfaz; Literata para
 * el cuerpo de las notas.
 */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-wdth.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
}
@font-face {
	font-family: "Literata";
	src: url("../fonts/literata.woff2") format("woff2");
	font-weight: 200 900;
	font-display: swap;
}
@font-face {
	font-family: "Literata";
	src: url("../fonts/literata-italic.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

:root {
	--noche: #14254f;
	--noche-2: #1d3366;
	--noche-3: #2a4580;
	--senal: #2457c5;
	--oro: #f2b320;
	--papel: #f4f6fa;
	--papel-2: #e7ecf4;
	--blanco: #fff;
	--tinta: #172036;
	--tinta-2: #4b5671;
	--linea: #d9e0eb;
	--vivo: #e0362b;
	--bosque: #0f6b5c;
	--whatsapp: #0f7a40; /* el verde de WhatsApp oscurecido: texto blanco con contraste 4,5:1 */
	--acero: linear-gradient(170deg, #a1aec4, #6e798d);
	--acero-icono: #173c7b;

	--sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--serif: "Literata", Georgia, "Times New Roman", serif;
	--angosta: 80%;

	--ancho: 1200px;
	--ancho-texto: 720px;
	--borde: 16px;
	--radio: 4px;
	--barra: 68px;

	/* Fondo de la cabecera y del hero: una sola imagen con el mismo tamaño en los
	   dos, corrida en el hero por el alto de la cabecera, para que se lean como
	   una pieza. El alto de la cabecera sale de su relleno + el botón del menú
	   (celular) o el logo (escritorio). */
	--fondo-ancho: max(100vw, 1000px);
	--fondo-y: calc(var(--fondo-ancho) * -.12);
	--alto-cabecera: calc(68px + env(safe-area-inset-top));

	--cat: var(--senal);
}
.cat-laraucania { --cat: var(--bosque); }
.cat-nacional { --cat: var(--senal); }

*, *::before, *::after { box-sizing: border-box; }

html {
	background: var(--noche);
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 16px;
}

/* En iPhone, Safari pinta la franja del notch (y el rebote del scroll) con el fondo
   de la página: por eso el fondo es el azul de la radio y el papel vive en <main>. */
body {
	margin: 0;
	overflow-x: clip;
	background: var(--noche);
	color: var(--tinta);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--senal); }
a:hover { color: var(--noche); }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--senal); outline-offset: 2px; border-radius: 2px; }
.cabecera :focus-visible, .al-aire :focus-visible, .reproductor :focus-visible,
.pie :focus-visible, .dial :focus-visible, .archivo-cabeza :focus-visible { outline-color: var(--oro); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
	position: absolute; left: 8px; top: -60px; z-index: 100;
	background: var(--oro); color: var(--noche); padding: 10px 16px; font-weight: 700; border-radius: var(--radio);
}
.saltar:focus { top: 8px; }

.envoltura { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--borde); }
.envoltura-texto { max-width: calc(var(--ancho-texto) + 2 * var(--borde)); margin-inline: auto; padding-inline: var(--borde); }

#swup { display: block; background: var(--papel); }
#contenido:focus { outline: none; }

/* Navegación suave: un fundido corto al cambiar de página. */
.transition-fade { transition: opacity .16s ease; }
html.is-animating .transition-fade { opacity: 0; }

.icono { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Cabecera ---------- */

/* El velo de azul noche a la izquierda sostiene el contraste del texto blanco
   sobre las zonas celestes de la imagen (es horizontal: calza entre bloques). */
.cabecera, .al-aire, .archivo-cabeza.archivo-cabeza--fondo {
	background:
		linear-gradient(90deg, rgb(20 37 79 / .6), rgb(20 37 79 / .15) 75%),
		var(--noche) url("../img/fondo-al-aire.jpg") center var(--fondo-y) / var(--fondo-ancho) auto no-repeat;
}
.al-aire, .archivo-cabeza.archivo-cabeza--fondo {
	background-position: 0 0, center calc(var(--fondo-y) - var(--alto-cabecera));
}
.cabecera { color: var(--blanco); position: relative; z-index: 30; }
.cabecera__in {
	max-width: var(--ancho); margin-inline: auto;
	padding: calc(8px + env(safe-area-inset-top)) max(var(--borde), env(safe-area-inset-right)) 8px max(var(--borde), env(safe-area-inset-left));
	display: flex; align-items: center; gap: 12px;
}
.cabecera__logo { flex: none; margin-right: auto; }
.cabecera__logo img { height: 46px; width: auto; }

.nav__abrir {
	display: grid; place-items: center; width: 52px; height: 52px; margin-right: -8px;
	background: none; border: 0; border-radius: var(--radio); color: var(--blanco); cursor: pointer;
}
.nav__abrir .icono { width: 34px; height: 34px; }

.boton-vivo {
	display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px;
	background: var(--acero); color: var(--noche); border: 0; border-radius: var(--radio);
	font-weight: 750; font-stretch: 90%; cursor: pointer;
}

/* Íconos de play/pausa en todos los botones de la radio. */
[data-fm-play] .icono:nth-of-type(2) { display: none; }
[data-fm-play][aria-pressed="true"] .icono:nth-of-type(1) { display: none; }
[data-fm-play][aria-pressed="true"] .icono:nth-of-type(2) { display: block; }
.boton-vivo__icono, .al-aire__circulo, .reproductor__boton { color: var(--acero-icono); }
[data-fm-play][aria-pressed="true"] :is(.boton-vivo__icono, .al-aire__circulo),
.reproductor__boton[aria-pressed="true"] { color: var(--blanco); }

/* Menú del celular: panel que entra desde la derecha, a todo el alto. */
.nav__panel {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
	width: min(86vw, 360px);
	display: flex; flex-direction: column;
	background: var(--noche); color: var(--blanco);
	padding: 0 var(--borde) calc(16px + env(safe-area-inset-bottom));
	box-shadow: -16px 0 40px rgb(10 20 45 / .4);
	transform: translateX(100%); visibility: hidden;
	transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s;
	overflow-y: auto; overscroll-behavior: contain;
}
html.menu-abierto .nav__panel {
	transform: none; visibility: visible;
	transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.nav__panel-cabeza {
	display: flex; align-items: center; justify-content: flex-end;
	min-height: 62px; border-bottom: 1px solid rgb(255 255 255 / .14);
}
.nav__cerrar {
	display: grid; place-items: center; width: 52px; height: 52px; margin-right: -8px;
	background: none; border: 0; color: var(--blanco); cursor: pointer; border-radius: var(--radio);
}
.nav__cerrar .icono { width: 30px; height: 30px; }
.nav__lista { padding-top: 8px; }
.nav__lista a {
	display: flex; align-items: center; gap: 10px; min-height: 56px;
	color: var(--blanco); text-decoration: none;
	font-size: 1.375rem; font-weight: 700; font-stretch: 85%;
	border-bottom: 1px solid rgb(255 255 255 / .1);
}
.nav__lista a[aria-current="page"] { color: var(--oro); }
.nav__credito {
	margin-top: auto; padding-top: 24px;
	font-size: .75rem; color: rgb(255 255 255 / .5);
}
.nav__credito a { color: rgb(255 255 255 / .65); }
.nav__fondo {
	position: fixed; inset: 0; z-index: 55;
	background: rgb(10 20 45 / .55);
	opacity: 0; visibility: hidden;
	transition: opacity .26s ease, visibility 0s linear .26s;
}
html.menu-abierto .nav__fondo { opacity: 1; visibility: visible; transition: opacity .26s ease, visibility 0s; }
html.menu-abierto { overflow: hidden; }
/* El panel vive dentro de la cabecera: con el menú abierto, la cabecera pasa sobre la barra del reproductor. */
html.menu-abierto .cabecera { z-index: 70; }


@media (min-width: 960px) {
	:root { --alto-cabecera: calc(90px + env(safe-area-inset-top)); }
	.cabecera-espacio { height: 90px; } /* 66 px de logo + 12 px arriba y abajo */
	.cabecera__in { padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: 12px; gap: 28px; }
	.cabecera__logo img { height: 66px; }
	.nav__abrir, .nav__panel-cabeza, .nav__credito, .nav__fondo { display: none; }
	.nav__panel {
		position: static; width: auto; display: block; padding: 0; background: none; box-shadow: none;
		transform: none; visibility: visible; transition: none; overflow: visible;
	}
	.nav__lista { display: flex; gap: 4px; padding: 0; }
	.nav__lista a {
		font-size: 1rem; font-weight: 600; font-stretch: 100%; min-height: 44px; padding: 0 10px; border: 0;
		color: rgb(255 255 255 / .86);
		background-image: linear-gradient(var(--blanco), var(--blanco));
		background-size: 0 3px; background-position: 50% 100%; background-repeat: no-repeat;
		transition: background-size .15s ease, color .15s ease;
	}
	.nav__lista a:hover { color: var(--blanco); background-size: calc(100% - 20px) 3px; }
	.nav__lista a[aria-current="page"] { color: var(--blanco); background-size: calc(100% - 20px) 3px; }
	.nav__buscar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

	/* Al bajar: la cabecera queda fija, compacta y con el botón para escuchar. */
	html.cabecera-fija .cabecera {
		position: fixed; top: 0; left: 0; right: 0;
		box-shadow: 0 6px 20px rgb(10 20 45 / .3);
		animation: baja .22s cubic-bezier(.2, .8, .2, 1);
	}
	html.cabecera-fija .cabecera__in { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
	html.cabecera-fija .cabecera__logo img { height: 44px; }
	html.cabecera-fija .boton-vivo { display: inline-flex; }
	html.menu-abierto { overflow: visible; }
}
@keyframes baja { from { transform: translateY(-100%); } }

/* ---------- Al aire (portada y radio) ---------- */

.al-aire { color: var(--blanco); }
.al-aire__in {
	max-width: var(--ancho); margin-inline: auto; padding: 20px var(--borde) 18px;
	display: grid; gap: 16px; align-items: end;
}
/* «FM Centro» grande; debajo, qué programa está al aire y, al final, hasta cuándo y qué sigue. */
.al-aire__marca {
	font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: .95;
	font-weight: 820; font-stretch: 72%; letter-spacing: -.01em;
	color: var(--blanco);
}
.al-aire__programa {
	display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px;
	margin-top: 10px;
	font-size: clamp(1.1875rem, 2.4vw, 1.625rem); line-height: 1.2;
	font-weight: 600; color: rgb(255 255 255 / .85);
}
.al-aire__programa strong { font-weight: 780; color: var(--blanco); text-wrap: balance; }
.al-aire__programa .punto { align-self: center; }
.punto {
	width: 10px; height: 10px; border-radius: 50%; background: var(--vivo); flex: none;
	box-shadow: 0 0 0 0 rgb(224 54 43 / .6);
}
html[data-radio="sonando"] .punto { animation: latido 1.6s ease-out infinite; }
@keyframes latido {
	0% { box-shadow: 0 0 0 0 rgb(224 54 43 / .55); }
	100% { box-shadow: 0 0 0 10px rgb(224 54 43 / 0); }
}
.al-aire__horario { margin-top: 6px; font-size: 1.0625rem; color: rgb(255 255 255 / .8); }

.al-aire__boton {
	display: inline-flex; align-items: center; gap: 14px; justify-self: start;
	background: none; border: 0; padding: 0; color: var(--blanco); cursor: pointer;
	font-size: 1rem; font-weight: 700; font-stretch: 90%;
}
.al-aire__circulo {
	display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
	background: var(--acero);
	transition: transform .12s ease;
}
.al-aire__circulo .icono { width: 30px; height: 30px; }
.al-aire__boton:hover .al-aire__circulo { transform: scale(1.05); }
.al-aire__boton:active .al-aire__circulo { transform: scale(.97); }

@media (min-width: 760px) {
	.al-aire__in { grid-template-columns: 1fr auto; padding-top: 36px; padding-bottom: 28px; gap: 32px; }
	.al-aire__boton { justify-self: end; flex-direction: column; gap: 10px; font-size: .9375rem; }
	.al-aire__circulo { width: 96px; height: 96px; }
	.al-aire__circulo .icono { width: 42px; height: 42px; }
}

/* ---------- El dial ---------- */

.dial {
	background: var(--noche-2);
	overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.dial::-webkit-scrollbar { display: none; }
.dial__pista {
	position: relative; min-width: 1440px; /* 60 px por hora */
	padding: 0 24px;
}
@media (min-width: 1200px) {
	.dial__pista { min-width: 0; max-width: var(--ancho); margin-inline: auto; padding: 0 var(--borde); }
}
.dial__franjas {
	display: grid; grid-template-columns: repeat(96, minmax(0, 1fr));
	border-left: 1px solid rgb(255 255 255 / .18);
}
.dial__franja {
	min-width: 0; padding: 12px 8px 14px;
	border-right: 1px solid rgb(255 255 255 / .18);
	border-top: 3px solid transparent;
	color: rgb(255 255 255 / .72);
}
.dial__hora { display: block; font-size: .75rem; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .66); }
.dial__nombre {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	margin-top: 2px; font-size: .875rem; line-height: 1.2; font-weight: 600; font-stretch: 85%;
	hyphens: auto; -webkit-hyphens: auto;
}
/* Programas de una hora: letra más chica para que el nombre quepa sin cortarse a la mitad. */
.dial__franja--corta { padding-inline: 5px; }
.dial__franja--corta .dial__nombre { font-size: .6875rem; font-stretch: 75%; -webkit-line-clamp: 4; }
.dial__franja.es-ahora {
	border-top-color: var(--blanco);
	background: rgb(255 255 255 / .12);
	color: var(--blanco);
}
.dial__franja.es-ahora .dial__hora { color: var(--blanco); }
.dial__aguja {
	position: absolute; top: 0; bottom: 22px;
	left: calc(24px + (100% - 48px) * var(--pos));
	width: 2px; margin-left: -1px; background: var(--blanco);
	pointer-events: none;
}
.dial__aguja::before {
	content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	border: 6px solid transparent; border-top: 8px solid var(--blanco); border-bottom: 0;
}
@media (min-width: 1200px) {
	.dial__aguja { left: calc(var(--borde) + (100% - 2 * var(--borde)) * var(--pos)); }
}
.dial__escala { position: relative; height: 22px; }
.dial__escala li {
	position: absolute; top: 3px; left: calc(var(--h) / 24 * 100%);
	transform: translateX(-50%);
	font-size: .6875rem; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .62);
}
.dial__escala li:first-child { transform: none; }
.dial__escala li:last-child { transform: translateX(-100%); }

/* ---------- Notas ---------- */

.foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio); background: var(--papel-2); }

.sin-foto {
	position: relative; display: flex; align-items: flex-end; width: 100%; aspect-ratio: 16 / 9;
	border-radius: var(--radio); overflow: hidden;
	background-color: var(--cat);
	background-image: repeating-radial-gradient(circle at 0 100%, rgb(255 255 255 / .13) 0 2px, transparent 2px 26px);
	color: var(--blanco); padding: 12px 14px;
}
.sin-foto__cat { font-weight: 800; font-stretch: 75%; font-size: 1.125rem; line-height: 1; margin-left: auto; opacity: .92; }

.nota { position: relative; }
.nota__img { display: block; }
.nota__cat {
	display: inline-block; font-size: .8125rem; font-weight: 700; font-stretch: 90%;
	color: var(--cat); text-decoration: none; margin-bottom: 4px;
}
.nota__cat:hover { text-decoration: underline; color: var(--cat); }
.nota__titulo { font-weight: 720; font-stretch: var(--angosta); line-height: 1.12; letter-spacing: -.005em; text-wrap: pretty; }
.nota__titulo a { color: var(--tinta); text-decoration: none; }
.nota__titulo a:hover { color: var(--senal); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nota__fecha { margin-top: 6px; font-size: .8125rem; color: var(--tinta-2); }
.nota__bajada { margin-top: 10px; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.55; color: var(--tinta-2); }

.nota--grande .nota__img { margin-bottom: 14px; }
.nota--grande .nota__titulo { font-size: clamp(1.75rem, 4.2vw, 2.75rem); line-height: 1.04; font-weight: 790; font-stretch: 76%; }

.nota--card .nota__img { margin-bottom: 10px; }
.nota--card .nota__titulo { font-size: 1.25rem; }

.nota--linea {
	display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start;
	padding-block: 14px; border-top: 1px solid var(--linea);
}
.nota--linea .foto, .nota--linea .sin-foto { aspect-ratio: 3 / 2; }
.nota--linea .sin-foto__cat { display: none; }
.nota--linea .nota__titulo { font-size: 1.0625rem; }

.nota--texto { padding-block: 14px; border-top: 1px solid var(--linea); }
.nota--texto .nota__titulo { font-size: 1.0625rem; }

/* ---------- Portada ---------- */

.titulo-seccion {
	font-size: 1.75rem; font-weight: 820; font-stretch: 75%; line-height: 1.05; color: var(--tinta);
}
.titulo-seccion--chico { font-size: 1.25rem; padding-bottom: 4px; }

.portada-principal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; padding-bottom: 8px; }
.portada-principal__lista .nota--linea:first-of-type { border-top-color: var(--tinta); }

@media (min-width: 960px) {
	.portada-principal { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 40px; padding-top: 36px; }
	.portada-principal__lista .titulo-seccion--chico { margin-top: 2px; }
}

.bloque { padding-top: 40px; }
.bloque__cabeza {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
	border-top: 5px solid var(--cat); padding-top: 10px; margin-bottom: 18px;
}
.bloque__cabeza .titulo-seccion { color: var(--cat); font-size: 2rem; }
.bloque__todas { font-weight: 650; font-size: .9375rem; color: var(--tinta); }
.bloque__todas:hover { color: var(--cat); }

.bloque__grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
/* En el celular, solo la primera card va grande; las otras pasan a línea. */
.bloque__grilla .nota--card:not(:first-child),
.relacionadas__grilla .nota--card {
	display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start;
	padding-block: 14px; border-top: 1px solid var(--linea);
}
.bloque__grilla .nota--card:not(:first-child) .nota__img,
.relacionadas__grilla .nota--card .nota__img { margin: 0; }
.bloque__grilla .nota--card:not(:first-child) .foto,
.bloque__grilla .nota--card:not(:first-child) .sin-foto,
.relacionadas__grilla .nota--card .foto,
.relacionadas__grilla .nota--card .sin-foto { aspect-ratio: 3 / 2; }
.bloque__grilla .nota--card:not(:first-child) .sin-foto__cat,
.relacionadas__grilla .nota--card .sin-foto__cat { display: none; }
.bloque__grilla .nota--card:not(:first-child) .nota__titulo,
.relacionadas__grilla .nota--card .nota__titulo { font-size: 1.0625rem; }
.bloque__grilla .nota--card:first-child { padding-bottom: 14px; }

@media (min-width: 760px) {
	.bloque__grilla { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.bloque__grilla .nota--card,
	.bloque__grilla .nota--card:not(:first-child) {
		grid-column: span 4; display: block; padding: 0 0 20px; border: 0;
	}
	.bloque__grilla .nota--card:not(:first-child) .nota__img { margin-bottom: 10px; }
	.bloque__grilla .nota--card:not(:first-child) .foto,
	.bloque__grilla .nota--card:not(:first-child) .sin-foto { aspect-ratio: 16 / 9; }
	.bloque__grilla .nota--card:not(:first-child) .sin-foto__cat { display: block; }
	.bloque__grilla .nota--card:not(:first-child) .nota__titulo { font-size: 1.25rem; }
	.bloque__grilla .nota--texto { grid-column: span 3; }
}

/* Escríbenos: invitación a contactar por WhatsApp. */
.escribenos { margin-top: 48px; background: var(--papel-2); }
.escribenos__in { display: grid; gap: 16px; padding-block: 28px; align-items: center; }
.escribenos__titulo { font-size: 1.75rem; font-weight: 820; font-stretch: 75%; }
.escribenos p { margin-top: 4px; color: var(--tinta-2); font-size: 1.0625rem; }
@media (min-width: 760px) {
	.escribenos__in { grid-template-columns: 1fr auto; padding-block: 36px; }
}

/* ---------- Botones ---------- */

.boton {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
	padding: 0 20px; border-radius: 6px; border: 0;
	background: var(--noche); color: var(--blanco); text-decoration: none;
	font-weight: 700; font-stretch: 90%; font-size: 1rem; cursor: pointer;
}
.boton:hover { background: var(--noche-3); color: var(--blanco); }
.boton--whatsapp { background: var(--whatsapp); }
.boton--whatsapp:hover { background: #0b6534; }
.boton--grande { min-height: 56px; font-size: 1.125rem; padding: 0 24px; }

/* ---------- Nota (artículo) ---------- */

.articulo { background: var(--blanco); padding-bottom: 40px; }
.articulo__cabeza { padding-top: 28px; }
.articulo__cat {
	display: inline-block; font-weight: 700; font-stretch: 90%; font-size: .9375rem;
	color: var(--cat); text-decoration: none;
	border-top: 4px solid var(--cat); padding-top: 6px;
}
.articulo__titulo {
	margin-top: 10px;
	font-size: clamp(2rem, 5.6vw, 3.25rem); line-height: 1.04; font-weight: 800; font-stretch: 74%;
	letter-spacing: -.01em; text-wrap: balance;
}
.articulo__bajada {
	margin-top: 14px; font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: var(--tinta-2);
}
.articulo__meta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
	margin-top: 20px; padding-block: 10px; border-block: 1px solid var(--linea);
}
.articulo__fecha { font-size: .9375rem; color: var(--tinta-2); }

.compartir { display: flex; align-items: center; gap: 6px; }
.compartir__txt { font-size: .875rem; color: var(--tinta-2); margin-right: 4px; }
.compartir__btn {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	background: var(--papel); color: var(--tinta); border: 0; cursor: pointer; text-decoration: none;
}
.compartir__btn:hover { background: var(--papel-2); color: var(--tinta); }
.compartir__btn--whatsapp { background: var(--whatsapp); color: var(--blanco); }
.compartir__btn--whatsapp:hover { background: #0e7a40; color: var(--blanco); }
.compartir__btn.copiado { background: var(--bosque); color: var(--blanco); }

.articulo__foto { max-width: 1000px; margin: 24px auto 0; padding-inline: var(--borde); }
.articulo__foto figcaption { margin-top: 8px; font-size: .875rem; color: var(--tinta-2); }

.articulo__cuerpo {
	margin-top: 28px;
	font-family: var(--serif); font-size: 1.125rem; line-height: 1.75; color: var(--tinta);
	overflow-wrap: break-word;
}
.articulo__cuerpo > * + * { margin-top: 1.1em; }
.articulo__cuerpo p:empty { display: none; }
.articulo__cuerpo h2, .articulo__cuerpo h3 {
	font-family: var(--sans); font-stretch: 80%; font-weight: 780; line-height: 1.15; margin-top: 1.6em;
}
.articulo__cuerpo h2 { font-size: 1.625rem; }
.articulo__cuerpo h3 { font-size: 1.3125rem; }
.articulo__cuerpo strong, .articulo__cuerpo b { font-weight: 680; }
.articulo__cuerpo a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.articulo__cuerpo img { border-radius: var(--radio); }
.articulo__cuerpo figure { margin-inline: 0; }
.articulo__cuerpo figcaption, .articulo__cuerpo .wp-caption-text { font-family: var(--sans); font-size: .875rem; color: var(--tinta-2); margin-top: 6px; }
.articulo__cuerpo ul, .articulo__cuerpo ol { padding-left: 1.3em; }
.articulo__cuerpo ul { list-style: disc; }
.articulo__cuerpo ol { list-style: decimal; }
.articulo__cuerpo blockquote { margin-inline: 0; padding-left: 18px; border-left: 4px solid var(--cat); font-style: italic; }
.articulo__cuerpo iframe, .articulo__cuerpo video { max-width: 100%; }
.articulo__fuente {
	margin-top: 2em; padding-top: 12px; border-top: 1px solid var(--linea);
	font-family: var(--sans); font-size: .9375rem; color: var(--tinta-2);
}

@media (min-width: 760px) {
	.articulo__cabeza { padding-top: 48px; }
	.articulo__cuerpo { font-size: 1.1875rem; }
}

.relacionadas { padding-top: 36px; }
.relacionadas .titulo-seccion { color: var(--cat); border-top: 5px solid var(--cat); padding-top: 10px; margin-bottom: 16px; }
.relacionadas__grilla { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
	.relacionadas__grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
	.relacionadas__grilla .nota--card { display: block; padding: 0; border: 0; }
	.relacionadas__grilla .nota--card .nota__img { margin-bottom: 10px; }
	.relacionadas__grilla .nota--card .foto,
	.relacionadas__grilla .nota--card .sin-foto { aspect-ratio: 16 / 9; }
}

/* ---------- Archivos, búsqueda, páginas ---------- */

.archivo-cabeza { background: var(--noche); color: var(--blanco); padding: 28px 0 24px; }
.archivo-cabeza__titulo { font-size: clamp(2.25rem, 7vw, 3.75rem); font-weight: 820; font-stretch: 72%; line-height: 1; }
.archivo-cabeza__tipo { margin-top: 6px; color: rgb(255 255 255 / .8); }

.lista-archivo { padding-top: 12px; padding-bottom: 24px; }
.lista-archivo > * { max-width: 860px; }
.lista-archivo .nota--linea .nota__titulo { font-size: 1.1875rem; }
.lista-archivo__resumen { padding-top: 16px; color: var(--tinta-2); }
@media (min-width: 760px) {
	.lista-archivo .nota--linea { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding-block: 18px; }
	.lista-archivo .nota--linea .nota__titulo { font-size: 1.375rem; }
}

.paginacion { margin-top: 24px; }
.paginacion ul { display: flex; flex-wrap: wrap; gap: 6px; }
.paginacion a, .paginacion span {
	display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px;
	border-radius: var(--radio); background: var(--blanco); color: var(--tinta); text-decoration: none; font-weight: 650;
	border: 1px solid var(--linea);
}
.paginacion .current { background: var(--noche); color: var(--blanco); border-color: var(--noche); }
.paginacion .dots { background: none; border: 0; }

.vacio { padding-block: 24px; font-size: 1.125rem; color: var(--tinta-2); }

.buscador { display: flex; gap: 8px; margin-top: 16px; max-width: 560px; }
.buscador input {
	flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--linea);
	font: inherit; font-size: 1rem; color: var(--tinta); background: var(--blanco);
}
.buscador button {
	min-height: 48px; padding: 0 18px; border: 0; border-radius: 6px; cursor: pointer;
	background: var(--oro); color: var(--noche); font-weight: 750;
}

.pagina-simple { padding-top: 40px; padding-bottom: 40px; }
.pagina-simple h1 { font-size: clamp(2.25rem, 6vw, 3.25rem); font-weight: 820; font-stretch: 74%; line-height: 1.02; }
.pagina-simple > p { margin-top: 14px; font-size: 1.125rem; color: var(--tinta-2); }
.pagina-simple .boton { margin-top: 12px; }

.radio-ayuda .titulo-seccion { font-size: 1.75rem; }

.contacto__intro { font-size: 1.1875rem; }
.contacto .boton--whatsapp { margin-top: 20px; }
.contacto__datos { margin-top: 32px; display: grid; gap: 2px; font-size: 1.0625rem; }
.contacto__datos dt { font-weight: 700; }
.contacto__datos dd { margin: 0 0 14px; overflow-wrap: anywhere; }
@media (min-width: 600px) {
	.contacto__datos { grid-template-columns: max-content 1fr; gap: 12px 20px; }
	.contacto__datos dd { margin: 0; }
}
.contacto__redes { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.contacto__redes a { display: inline-flex; align-items: center; gap: 6px; }

.programacion-hoy { background: var(--noche); }
.programacion { display: grid; gap: 28px; padding-top: 32px; }
@media (min-width: 760px) { .programacion { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.programacion__dia h2 {
	font-size: 1.375rem; font-weight: 800; font-stretch: 78%;
	border-top: 4px solid var(--tinta); padding-top: 8px; margin-bottom: 4px;
}
.programacion__dia.es-hoy h2 { border-top-color: var(--oro); }
.programacion__hoy { font-size: .875rem; font-weight: 700; color: var(--tinta-2); margin-left: 6px; }
.programacion__dia li {
	display: grid; grid-template-columns: 7.5em 1fr auto; gap: 8px; align-items: baseline;
	padding: 10px 8px; border-bottom: 1px solid var(--linea);
}
.programacion__horas { font-variant-numeric: tabular-nums; color: var(--tinta-2); font-size: .9375rem; }
.programacion__nombre { font-weight: 650; }
.programacion__dia li.es-ahora { background: rgb(242 179 32 / .18); }
.programacion__ahora {
	display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 700; color: #b3261e; /* el rojo «en vivo» oscurecido: contraste sobre el destacado */
}
.programacion__ahora::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vivo); }

/* ---------- Pie ---------- */

.pie { background: var(--noche); color: rgb(255 255 255 / .82); }
#contenido { padding-bottom: 56px; }
#contenido:has(> .escribenos:last-child), #contenido:has(> .articulo:last-child) { padding-bottom: 0; }
.pie__in { max-width: var(--ancho); margin-inline: auto; padding: 36px var(--borde) 12px; display: grid; gap: 28px; }
.pie__marca img { height: 64px; width: auto; }
.pie__marca p { margin-top: 10px; font-size: .9375rem; }
.pie h2 { font-size: 1rem; font-weight: 750; color: var(--blanco); margin-bottom: 8px; }
.pie li { margin-block: 6px; }
.pie a { color: rgb(255 255 255 / .86); text-decoration: none; }
.pie a:hover { color: var(--oro); }
.pie__redes { display: flex; gap: 8px; margin-top: 10px; }
.pie__redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--noche-2); }
.pie__legal {
	max-width: var(--ancho); margin-inline: auto; padding: 16px var(--borde) calc(24px + var(--barra) + env(safe-area-inset-bottom));
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
	font-size: .8125rem; color: rgb(255 255 255 / .55);
}
.pie__legal a { color: rgb(255 255 255 / .75); text-decoration: underline; text-underline-offset: 2px; }
.pie__credito { margin-left: auto; }
@media (min-width: 760px) { .pie__in { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; } }

/* ---------- Reproductor fijo ---------- */

.reproductor {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
	min-height: var(--barra); padding: 8px var(--borde) calc(8px + env(safe-area-inset-bottom));
	background: var(--noche); color: var(--blanco);
	border-top: 1px solid rgb(255 255 255 / .12);
	box-shadow: 0 -8px 24px rgb(10 20 45 / .28);
}
.reproductor__boton {
	position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	background: var(--acero); border: 0; cursor: pointer;
}
.reproductor__boton .icono { width: 24px; height: 24px; }
.reproductor__carga {
	position: absolute; inset: -4px; border-radius: 50%;
	border: 3px solid transparent; border-top-color: var(--blanco);
	opacity: 0;
}
.reproductor[data-estado="cargando"] .reproductor__carga { opacity: 1; animation: gira .9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.reproductor__texto { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.reproductor__vivo {
	grid-column: 1 / -1; display: flex; align-items: center; gap: 6px;
	font-size: .75rem; font-weight: 650; color: rgb(255 255 255 / .72);
}
.reproductor__vivo .punto { width: 8px; height: 8px; }
.reproductor[data-estado="error"] .reproductor__vivo .punto { background: #8a93a8; }
.reproductor__programa {
	font-size: 1.0625rem; font-weight: 750; font-stretch: 82%;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reproductor__hasta { display: none; font-size: .875rem; color: rgb(255 255 255 / .65); white-space: nowrap; }
.reproductor__volumen { display: none; }

@media (min-width: 600px) {
	.reproductor__texto { grid-template-columns: auto auto; justify-content: start; }
	.reproductor__hasta { display: inline; }
}
@media (min-width: 960px) {
	.reproductor { padding-inline: max(var(--borde), calc((100vw - var(--ancho)) / 2 + var(--borde))); }
	.reproductor__volumen { display: block; }
	.reproductor__volumen input { width: 120px; accent-color: var(--blanco); }
}

/* ---------- Menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}