/**
 * Raíz compartida por todos los widgets de RadioWP.
 *
 * Sin build step no hay variables de SCSS, así que las custom properties hacen ese
 * trabajo: se definen una vez aquí y cada widget las consume con var(). Un cambio de
 * marca se toca en este archivo, no en N hojas de estilo.
 *
 * Cada CSS de widget declara este archivo como dependencia, así que basta con que el
 * widget se renderice para que estas variables estén disponibles.
 */

:root {
	/* Superficies y tinta */
	--radiowp-color-bg: #ffffff;
	--radiowp-color-surface: #ffffff;
	--radiowp-color-surface-sunken: #f5f4f4;
	--radiowp-color-fg: #16151a;
	--radiowp-color-muted: #64616b;

	/*
	 * accent es el rojo de marca, y solo se usa en elementos que no son texto:
	 * subrayados, bordes, anillos de foco. Ahí el umbral de contraste es 3:1 y lo pasa.
	 *
	 * accent-ink es para superficies con texto blanco encima. Blanco sobre #ea3323 da
	 * 4.2:1, y WCAG AA exige 4.5:1 para texto normal; sobre #d62d1e da 4.9:1. A ojo son
	 * el mismo rojo, pero el botón «Suscríbete» solo cumple con el segundo.
	 */
	--radiowp-color-accent: #ea3323;
	--radiowp-color-accent-ink: #d62d1e;
	--radiowp-color-accent-hover: #b8251a;
	--radiowp-color-accent-contrast: #ffffff;

	/*
	 * Superficies oscuras: la franja y la banda de la revista. Blanco sobre tinta da 16:1.
	 *
	 * accent-on-dark existe porque el rojo de marca sobre tinta solo da 4.29:1, y un texto
	 * pequeño necesita 4.5:1. Este aclarado da 6.4:1 y sigue leyéndose como el mismo rojo.
	 */
	--radiowp-color-ink: #16151a;
	--radiowp-color-on-ink: #ffffff;
	--radiowp-color-on-ink-muted: #a9a6ae;
	--radiowp-color-accent-on-dark: #ff6a5c;

	/*
	 * Los dos extremos del degradado del logotipo, muestreados del PNG: el azul profundo
	 * de la «C» y el rojo de la «&». Puestos en una línea recorren el espectro político,
	 * que es exactamente lo que esta publicación cubre. Se usa una sola vez, en el borde
	 * superior de la página. Es una firma, no un motivo: repetirlo lo convierte en ruido.
	 */
	--radiowp-color-spectrum-start: #083d92;
	--radiowp-color-spectrum-end: var(--radiowp-color-accent);

	/* La cabecera pegada deja ver el contenido pasar por debajo, difuminado. */

	/* Líneas */
	--radiowp-color-border: rgba(22, 21, 26, 0.14);
	--radiowp-border: 1px solid var(--radiowp-color-border);

	/*
	 * Tipografía. El titular va en serif y todo lo demás en la sans del sistema: es la
	 * convención de la prensa, y aquí separa el periodismo de la interfaz.
	 *
	 * Sin webfont a propósito. No se conoce todavía la familia del sitio, y enlazar una
	 * a ciegas produce un fallback silencioso. Estas pilas resuelven a New York o Georgia
	 * según el sistema: el fallback ES el diseño. Cuando haya familia, se cambia aquí.
	 */
	--radiowp-font-display: ui-serif, Georgia, "Times New Roman", serif;
	--radiowp-font-heading: inherit;
	--radiowp-font-body: inherit;
	--radiowp-line-height-body: 1.6;

	/* Escala de espaciado interno */
	--radiowp-space-xs: 0.5rem;
	--radiowp-space-sm: 0.75rem;
	--radiowp-space-md: 1.5rem;

	/*
	 * Ritmo de la página. Todas las secciones respiran igual y se alinean por el mismo
	 * borde: si cada widget elige su propio clamp, la página se lee como un collage de
	 * plantillas. Cambiar el aire de la portada entera es cambiar estas tres líneas.
	 *
	 * `tight` es para lo que se intercala entre secciones —la publicidad— y no debe
	 * pesar tanto como el contenido que separa.
	 */
	--radiowp-container: 1440px;
	--radiowp-gutter: clamp(1rem, 4vw, 2rem);
	--radiowp-section-space: clamp(1.5rem, 4vw, 2.75rem);
	--radiowp-section-space-tight: clamp(1.25rem, 2.5vw, 1.75rem);

	/* Forma. Radios contenidos: el registro es editorial, no de producto SaaS. */
	--radiowp-radius: 2px;
	--radiowp-radius-lg: 4px;

	/* Elevación */
	--radiowp-shadow: 0 1px 2px rgba(22, 21, 26, 0.06), 0 8px 24px rgba(22, 21, 26, 0.08);

	/* Movimiento */
	--radiowp-transition: 200ms ease;

	/* Apilado */
	--radiowp-z-header: 100;
	--radiowp-z-scrim: 90;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--radiowp-transition: 0ms;
	}
}

/*
 * Encabezado de sección: título en versalitas con el subrayado rojo, y «Ver todas» al
 * otro extremo. Vive aquí y no en un widget porque lo comparten varios, y base.css es
 * dependencia de todos. Duplicarlo en cada CSS los haría divergir.
 */
.radiowp-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.radiowp-head__title {
	margin: 0;
	padding-bottom: 0.375rem;
	border-bottom: 3px solid var(--radiowp-color-accent);
	color: var(--radiowp-color-fg);
	--radiowp-heading-color: var(--radiowp-color-fg);
	font-size: clamp(0.9375rem, 2.2vw, 1.1875rem);
	font-weight: 800;
	letter-spacing: 0.07em;
	line-height: 1;
	text-transform: uppercase;
}

.radiowp-head__more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--radiowp-color-accent-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* Solo el color en los estados: el tema pone `a:visited` y `a:hover` oscuros. Va aparte
   porque una regla con estado pesa más que las de escritorio y les pisaría el tamaño. */
.radiowp-head__more:visited,
.radiowp-head__more:hover,
.radiowp-head__more:focus,
.radiowp-head__more:active {
	color: var(--radiowp-color-accent-ink);
}

.radiowp-head__more:hover {
	color: var(--radiowp-color-accent-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.radiowp-head__arrow {
	width: 0.4375rem;
	height: 0.4375rem;
	border-top: 2px solid currentColor;
	border-inline-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--radiowp-transition);
}

.radiowp-head__more:hover .radiowp-head__arrow {
	transform: translateX(2px) rotate(45deg);
}

/* Visible para lectores de pantalla, invisible en pantalla. */
.radiowp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Blindaje frente al tema. El tema del sitio (newsever) sigue cargando su style.css aunque
 * la página use Canvas, y trae `h1…h6 { color: #000 }` y `a`, `a:visited`, `a:hover`
 * oscuros. Un selector de elemento le gana a la herencia, así que cualquier titular o
 * enlace nuestro que heredaba el blanco de una banda oscura salía negro sobre negro.
 *
 * `html body` sube la especificidad justo por encima de la del tema (solo elementos) sin
 * llegar a la de una clase: cualquier regla propia de un widget sigue mandando.
 */
html body :where([class*="radiowp-"]) a {
	color: inherit;
}

/* Titulares: el tema trae además `body.aft-light-mode h2 { color: #404040 }`, que pesa
   más que una clase. `html:root body` le gana; como también le ganaría a la clase de cada
   titular, el titular que quiere un color propio lo declara en --radiowp-heading-color. */
html:root body :where([class*="radiowp-"]) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--radiowp-heading-color, inherit);
}

/* Los estados del tema (`a:visited`, `a:hover`…) cuentan como clase: los enlaces sin clase
   propia vuelven a heredar. Los que la tienen declaran sus estados en su hoja.

   OJO, en todo el plugin: `:visited` va SIEMPRE en su propio selector, nunca dentro de
   `:is()` o `:where()`. Chrome, por privacidad, no lo aplica ahí, y la regla se ignora sin
   avisar: era lo que dejaba en gris oscuro los enlaces ya visitados en el modo oscuro. */
html body :where([class*="radiowp-"]) a:where(:not([class])):visited,
html body :where([class*="radiowp-"]) a:where(:not([class])):hover,
html body :where([class*="radiowp-"]) a:where(:not([class])):focus,
html body :where([class*="radiowp-"]) a:where(:not([class])):active {
	color: inherit;
}

/* Alguna hoja del sitio le pone `margin: 16px 0` a las imágenes: dentro de un marco con
   proporción fija eso deja una franja gris arriba de cada foto. Las nuestras van a cero. */
html:root body :where([class*="radiowp-"]) img {
	margin: 0;
}

/* ==========================================================================
 * Modo oscuro
 *
 * Lo enciende el script del <head> (Theme_Mode.php) solo en páginas montadas con
 * RadioWP. Pensado para leer de noche, no para lucir:
 * - Fondo #131316, no negro puro: el blanco sobre negro absoluto «vibra» y cansa.
 * - Texto #ebe8e4, blanco hueso: 15.5:1 sobre el fondo. El secundario #a7a3ab, 7.9:1.
 * - El rojo como TEXTO pasa a accent-on-dark (6.4:1); como FONDO de botón se queda el
 *   de marca, que con texto blanco encima sigue cumpliendo.
 * - Las bandas que ya eran oscuras (revista, pie, consultores) bajan un punto para
 *   seguir distinguiéndose del fondo.
 * ========================================================================== */

html[data-radiowp-theme="dark"] {
	color-scheme: dark;

	--radiowp-color-bg: #131316;
	--radiowp-color-surface: #1b1b20;
	--radiowp-color-surface-sunken: #202127;
	--radiowp-color-fg: #ebe8e4;
	--radiowp-color-muted: #a7a3ab;
	--radiowp-color-border: rgba(255, 255, 255, 0.12);
	--radiowp-color-ink: #0b0b0d;
	--radiowp-color-on-ink: #f2f0ed;
	--radiowp-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* El fondo de la página es del tema y de Elementor (blanco): entre widget y widget se
   verían franjas blancas. */
html[data-radiowp-theme="dark"] body {
	background-color: var(--radiowp-color-bg);
	color: var(--radiowp-color-fg);
}

/* El rojo usado como texto. */
html[data-radiowp-theme="dark"] .radiowp-head__more,
html[data-radiowp-theme="dark"] .radiowp-head__more:visited,
html[data-radiowp-theme="dark"] .radiowp-head__more:hover,
html[data-radiowp-theme="dark"] .radiowp-head__more:focus,
html[data-radiowp-theme="dark"] .radiowp-head__more:active,
html[data-radiowp-theme="dark"] .radiowp-hero__card-title a:hover,
html[data-radiowp-theme="dark"] .radiowp-card__title a:hover,
html[data-radiowp-theme="dark"] .radiowp-header__search-toggle:hover,
html[data-radiowp-theme="dark"] .radiowp-header__search-toggle[aria-expanded="true"],
html[data-radiowp-theme="dark"] .radiowp-sponsored__eyebrow {
	color: var(--radiowp-color-accent-on-dark);
}

/* Fotos un punto más apagadas: de noche, una foto a pleno brillo deslumbra. Los anuncios
   no se tocan: son del anunciante. */
html[data-radiowp-theme="dark"] :is(.radiowp-card__image, .radiowp-hero__image, .radiowp-hero__card-image, .radiowp-videos__image) {
	filter: brightness(0.92);
}

/* Los escudos de Destino 27 son trazos negros: sobre fondo oscuro desaparecen. */
html[data-radiowp-theme="dark"] .radiowp-states .radiowp-states__escudo {
	filter: invert(1);
}

/* El logotipo a color no se lee sobre oscuro: se cambia por el monograma blanco. */
.radiowp-header__brand .radiowp-header__logo--dark {
	display: none;
}

html[data-radiowp-theme="dark"] .radiowp-header__brand > :not(.radiowp-header__logo--dark) {
	display: none;
}

html[data-radiowp-theme="dark"] .radiowp-header__brand .radiowp-header__logo--dark {
	display: block;
}

/* ==========================================================================
 * Etiqueta «Nuevo» (common.js, entradas de las últimas 6 horas)
 * ========================================================================== */

.radiowp-new {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	margin-inline-end: 0.5rem;
	padding: 0.1875rem 0.4375rem;
	border-radius: 999px;
	background-color: var(--radiowp-color-accent-ink);
	color: var(--radiowp-color-accent-contrast);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	vertical-align: 0.1em;
}

/* Un punto que late despacio: «esto acaba de pasar». Quieto si se pidió menos movimiento. */
.radiowp-new::before {
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background-color: currentColor;
	animation: radiowp-pulse 1.8s ease-in-out infinite;
}

@keyframes radiowp-pulse {
	50% {
		opacity: 0.35;
	}
}

@media (prefers-reduced-motion: reduce) {
	.radiowp-new::before {
		animation: none;
	}
}

/* ==========================================================================
 * Aparición suave (common.js). La clase la pone el JS solo a lo que está fuera de
 * pantalla al cargar, así que sin JS nada queda oculto.
 * ========================================================================== */

.radiowp-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.radiowp-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Destino 27: los estados entran uno tras otro. */
.radiowp-reveal .radiowp-states__item {
	opacity: 0;
	transform: translateY(10px) scale(0.98);
	transition: opacity 400ms ease, transform 400ms ease;
	transition-delay: calc(var(--radiowp-i, 0) * 35ms + 150ms);
}

.radiowp-reveal.is-visible .radiowp-states__item {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.radiowp-reveal,
	.radiowp-reveal .radiowp-states__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
 * Selector de tema: Claro / Oscuro / Sistema (header y footer)
 *
 * Una pastilla con tres botones. Solo existe donde el tema oscuro existe
 * (html[data-radiowp-themeable]); en el resto de páginas no ocupa sitio.
 * Colores con currentColor: sirve igual sobre el header claro que sobre el pie oscuro.
 * ========================================================================== */

.radiowp-theme-switch {
	display: none;
}

html[data-radiowp-themeable] .radiowp-theme-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--radiowp-switch-border, var(--radiowp-color-border));
	border-radius: 999px;
}

/* Dos clases: el tema del sitio estiliza `button` (fondo naranja, 38px de alto). */
.radiowp-theme-switch .radiowp-theme-switch__option {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	height: 1.875rem;
	min-width: 1.875rem;
	margin: 0;
	padding: 0 0.5rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	opacity: 0.7;
	cursor: pointer;
	transition: background-color var(--radiowp-transition), opacity var(--radiowp-transition);
}

.radiowp-theme-switch .radiowp-theme-switch__option:hover {
	background: transparent;
	color: inherit;
	opacity: 1;
}

.radiowp-theme-switch .radiowp-theme-switch__option[aria-pressed="true"] {
	background-color: var(--radiowp-switch-active, var(--radiowp-color-surface-sunken));
	opacity: 1;
}

.radiowp-theme-switch .radiowp-theme-switch__option:focus-visible {
	outline: 2px solid var(--radiowp-color-accent);
	outline-offset: 1px;
}

/* Iconos dibujados con CSS: sol, luna, pantalla. */
.radiowp-theme-switch__icon {
	position: relative;
	flex: 0 0 auto;
	display: block;
}

.radiowp-theme-switch__icon--light {
	width: 0.5rem;
	height: 0.5rem;
	margin: 0.25rem;
	border-radius: 50%;
	background-color: currentColor;
	box-shadow:
		0 -0.4375rem 0 -0.15rem currentColor,
		0 0.4375rem 0 -0.15rem currentColor,
		0.4375rem 0 0 -0.15rem currentColor,
		-0.4375rem 0 0 -0.15rem currentColor,
		0.3125rem 0.3125rem 0 -0.15rem currentColor,
		-0.3125rem -0.3125rem 0 -0.15rem currentColor,
		0.3125rem -0.3125rem 0 -0.15rem currentColor,
		-0.3125rem 0.3125rem 0 -0.15rem currentColor;
}

.radiowp-theme-switch__icon--dark {
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 50%;
	box-shadow: inset -0.25rem -0.15rem 0 0 currentColor;
	transform: rotate(-20deg);
}

.radiowp-theme-switch__icon--system {
	width: 0.875rem;
	height: 0.625rem;
	margin-bottom: 0.1875rem;
	border: 2px solid currentColor;
	border-radius: 2px;
}

.radiowp-theme-switch__icon--system::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -0.375rem;
	width: 0.5rem;
	height: 2px;
	background-color: currentColor;
	transform: translateX(-50%);
}

/* En el header, solo iconos: el texto queda en el title y en el lector de pantalla. */
.radiowp-theme-switch--header .radiowp-theme-switch__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.radiowp-theme-switch--header .radiowp-theme-switch__option {
	justify-content: center;
	padding: 0;
	width: 1.875rem;
}

/* En el pie, sobre fondo oscuro. */
.radiowp-theme-switch--footer {
	--radiowp-switch-border: rgba(255, 255, 255, 0.18);
	--radiowp-switch-active: rgba(255, 255, 255, 0.14);
}