/* ==========================================================================
   Navegación: submenús, menú lateral, buscador y volver arriba.
   ========================================================================== */

.sl24-menu__item--con-hijos {
	display: flex;
	align-items: center;
}

.sl24-menu__toggle {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	color: var(--sl24-text-muted);
	transition: transform var(--sl24-transicion);
}

.sl24-menu__toggle[aria-expanded="true"] {
	transform: rotate(180deg);
}

.sl24-menu__submenu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: var(--sl24-z-dropdown);
	display: block;
	min-width: 13rem;
	margin: 0;
	padding: var(--sl24-space-2) 0;
	background: var(--sl24-surface);
	border: 1px solid var(--sl24-border);
	box-shadow: var(--sl24-elev-2);
	list-style: none;
}

.sl24-menu__submenu[hidden] {
	display: none;
}

.sl24-menu__submenu .sl24-menu__enlace {
	display: block;
	padding: var(--sl24-space-2) var(--sl24-space-4);
	color: var(--sl24-text);
	font-size: var(--sl24-fs-sm);
	text-transform: none;
	letter-spacing: normal;
	border: 0;
}

.sl24-menu__submenu .sl24-menu__enlace:hover {
	background: var(--sl24-bg-subtle);
	color: var(--sl24-cat-texto);
}

.sl24-menu--topbar .sl24-menu__enlace {
	color: currentColor;
	font-size: var(--sl24-fs-2xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--sl24-track-caps);
}

/* Menú lateral ------------------------------------------------------------ */

.sl24-offcanvas {
	position: fixed;
	inset: 0;
	z-index: var(--sl24-z-modal);
}

.sl24-offcanvas[hidden] {
	display: none;
}

.sl24-offcanvas__fondo {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / .5);
}

.sl24-offcanvas__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sl24-space-5);
	width: min(88vw, 20rem);
	padding: var(--sl24-space-4);
	overflow-y: auto;
	background: var(--sl24-surface);
	animation: sl24-entrar-lateral 220ms cubic-bezier(.2, 0, .2, 1);
}

@keyframes sl24-entrar-lateral {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

.sl24-offcanvas__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--sl24-space-3);
	border-bottom: 1px solid var(--sl24-border);
}

.sl24-offcanvas__titulo {
	font-family: var(--sl24-font-titulos);
	font-size: var(--sl24-fs-lg);
	font-weight: 900;
}

.sl24-offcanvas__cerrar {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
}

.sl24-offcanvas__subtitulo {
	margin-bottom: var(--sl24-space-2);
	color: var(--sl24-text-muted);
	font-family: var(--sl24-font-cuerpo);
	font-size: var(--sl24-fs-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sl24-track-caps);
}

.sl24-offcanvas__nav {
	min-width: 0;
}

.sl24-offcanvas__nav--secundario .sl24-menu__enlace {
	font-weight: 500;
}

.sl24-menu--offcanvas,
.sl24-menu--offcanvas-secundario {
	flex-direction: column;
}

.sl24-menu--offcanvas .sl24-menu__enlace,
.sl24-menu--offcanvas-secundario .sl24-menu__enlace {
	display: block;
	padding: var(--sl24-space-3) 0;
	border-bottom: 1px solid var(--sl24-border);
	color: var(--sl24-text);
	font-weight: 600;
}

.sl24-menu--offcanvas .sl24-menu__item {
	padding-inline-start: var(--sl24-space-3);
	border-inline-start: 3px solid var(--sl24-cat);
}

.sl24-menu--offcanvas .sl24-menu__submenu {
	position: static;
	padding: 0 0 var(--sl24-space-2) var(--sl24-space-3);
	border: 0;
	box-shadow: none;
}

.sl24-offcanvas__redes {
	margin-top: auto;
	padding-top: var(--sl24-space-4);
	border-top: 1px solid var(--sl24-border);
}

.sl24-redes--offcanvas {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

/* En la barra el enlace de red es un botón cuadrado con el ícono centrado, y
   para eso usa grid. Acá lleva ícono Y nombre, y en grid el nombre caía DEBAJO
   del ícono: la lista salía en dos alturas por red. Con flex en fila vuelven a
   quedar uno al lado del otro, que es lo que el «gap» de abajo daba por hecho. */
.sl24-redes--offcanvas .sl24-redes__enlace {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--sl24-space-3);
	width: auto;
	height: auto;
	padding: var(--sl24-space-2) 0;
	color: var(--sl24-text);
}

/* Buscador ---------------------------------------------------------------- */

.sl24-buscador {
	position: fixed;
	inset: 0;
	z-index: var(--sl24-z-modal);
}

.sl24-buscador[hidden] {
	display: none;
}

.sl24-buscador__fondo {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / .55);
}

.sl24-buscador__panel {
	position: relative;
	width: min(100%, 46rem);
	margin: 8vh auto 0;
	padding: var(--sl24-space-5);
	background: var(--sl24-surface);
	border-radius: var(--sl24-radius-lg);
}

.sl24-buscador__form {
	display: flex;
	align-items: center;
	gap: var(--sl24-space-2);
	padding-bottom: var(--sl24-space-3);
	border-bottom: 2px solid var(--sl24-accent);
}

.sl24-buscador__campo {
	flex: 1 1 auto;
	min-width: 0;
	background: none;
	border: 0;
	color: var(--sl24-text);
	font-family: var(--sl24-font-titulos);
	font-size: var(--sl24-fs-xl);
	font-weight: 700;
}

.sl24-buscador__campo:focus {
	outline: none;
}

.sl24-buscador__enviar,
.sl24-buscador__cerrar {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
}

.sl24-buscador__ayuda {
	margin-top: var(--sl24-space-2);
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-2xs);
}

.sl24-buscador__resultados {
	max-height: 55vh;
	margin-top: var(--sl24-space-4);
	overflow-y: auto;
}

.sl24-buscador__resultados ul {
	display: grid;
	gap: var(--sl24-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl24-buscador__resultados li + li {
	padding-top: var(--sl24-space-3);
	border-top: 1px solid var(--sl24-border);
}

.sl24-buscador__resultados a {
	display: block;
	color: var(--sl24-text);
	font-weight: 600;
}

.sl24-buscador__resultados a:hover {
	color: var(--sl24-accent);
}

.sl24-buscador__cat {
	display: block;
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sl24-track-caps);
}

.sl24-buscador__vacio {
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-sm);
}

/* Volver arriba ----------------------------------------------------------- */

.sl24-arriba {
	position: fixed;
	inset-block-end: var(--sl24-space-4);
	inset-inline-end: var(--sl24-space-4);
	z-index: var(--sl24-z-sticky);
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	background: var(--sl24-accent);
	color: var(--sl24-text-inverse);
	border-radius: 50%;
	box-shadow: var(--sl24-elev-2);
}

.sl24-arriba[hidden] {
	display: none;
}

/* La regla de la barra fija vive en el CSS crítico (afecta el layout desde el
   primer pintado); acá sólo el efecto de reducción del encabezado al bajar. */

/* ==========================================================================
   Sistema de tarjetas.
   La separación por defecto es un borde fino, no una sombra: se pinta más
   rápido y se lee más limpio en una portada densa.
   ========================================================================== */

.sl24-card__cuerpo {
	display: flex;
	flex-direction: column;
	gap: var(--sl24-space-2);
	min-width: 0;
}

.sl24-card__titulo {
	line-height: var(--sl24-lh-snug);
}

.sl24-card__titulo a {
	transition: color var(--sl24-transicion);
}

/* El hover (rojo + subrayado) está en critico.css: pasar el mouse no puede
   depender de que haya terminado de cargar la hoja diferida. Acá sólo queda la
   transición. */

.sl24-card__bajada {
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-sm);
	line-height: var(--sl24-lh-base);
}

.sl24-card__bajada--hero {
	font-size: var(--sl24-fs-md);
}

.sl24-card__imagen {
	transition: transform 620ms cubic-bezier(.2, 0, .2, 1);
}

/* Sólo donde hay mouse de verdad. En pantalla táctil el :hover queda pegado
   después de tocar y la foto se queda agrandada hasta que se toca otra cosa,
   que es peor que no tener el efecto. */
@media (hover: hover) {
	.sl24-card__media:hover .sl24-card__imagen {
		transform: scale(1.06);
	}
}

/* El placeholder es transparente y con el ícono en gris neutro: el recuadro
   toma el color de --sl24-bg-inset del contenedor, gris claro en modo claro y
   #242424 en oscuro. Por eso ya no lleva opacidad ni object-fit: cover, que lo
   estiraba. Se centra el ícono a su tamaño natural. */
.sl24-imagen--respaldo {
	object-fit: contain;
	padding: 12%;
	background: var(--sl24-bg-inset);
}

/* Destacada --------------------------------------------------------------- */

.sl24-card--featured .sl24-card__titulo {
	font-size: var(--sl24-fs-xl);
}

.sl24-card--vertical .sl24-card__media {
	aspect-ratio: 3 / 4;
}

/* Lista ------------------------------------------------------------------- */

.sl24-card--list {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--sl24-space-3);
}

.sl24-card--list .sl24-card__media--thumb {
	flex: 0 0 88px;
	width: 88px;
}

.sl24-card--list .sl24-card__titulo {
	font-size: var(--sl24-fs-base);
	font-weight: 700;
}

.sl24-card--list .sl24-card__cuerpo {
	gap: var(--sl24-space-1);
}

/* Sólo texto -------------------------------------------------------------- */

.sl24-card--text {
	gap: var(--sl24-space-1);
	padding-inline-start: var(--sl24-space-3);
	border-inline-start: 3px solid var(--sl24-cat);
}

.sl24-card--text .sl24-card__hora {
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-2xs);
	font-variant-numeric: tabular-nums;
}

.sl24-card--text .sl24-card__titulo {
	font-size: var(--sl24-fs-base);
	font-weight: 700;
}

/* ==========================================================================
   EL LENGUAJE DE LAS SECCIONES

   Once de las catorce secciones eran grillas de fotos: seis rectángulos del
   mismo tamaño, seis fotos de agencia del mismo tamaño y seis titulares del
   mismo cuerpo, once veces seguidas al bajar. Eso —y no la paleta ni la
   tipografía— es lo que hacía que la mitad de abajo se viera como cualquier
   portal.

   Dos reglas lo corrigen, y son las mismas que ya rigen la apertura:

   1. La foto es la excepción, no la regla. Dentro de una sección la lleva sólo
      la nota que abre; el resto es tipografía. Deportes y Espectáculos quedan
      afuera a propósito: ahí la foto ES la nota.

   2. La jerarquía la hace el salto de cuerpo. Entre la que abre y las que
      siguen hay una relación de 2 a 1, igual que en la apertura. Sin ese
      salto, ocho titulares iguales son una pared.

   Todo se declara acá y nada se hereda del bloque tipográfico del crítico.
   Esta hoja se difiere y carga DESPUÉS: un font-size suelto de este lado le
   gana a la display del otro y el titular sale en la fuente del sistema. Ya
   pasó dos veces —con el nombre de sección y con el titular de apertura— y las
   dos veces costó encontrarlo.
   ========================================================================== */

/* La display tiene un piso de cuerpo y lo rompí yo.

   Es una condensada de afiche: abajo de unos 28 px, en versales, y encima de
   una foto, deja de ser un titular y pasa a ser una mancha. La regla estaba
   escrita hace rato en el crítico —«la display no baja de ~24 px, una
   condensada a cuerpo de lectura no es una decisión de estilo, es un texto que
   no se puede leer»— y al aplicarla a TODOS los titulares de sección la
   rompí. Eso es lo que hacía ilegibles Deportes, Economía y Espectáculos.

   Ahora la display va sólo donde el cuerpo la aguanta: el titular que abre la
   sección. Todo lo demás vuelve a la fuente de titulares, en caja baja y a
   cuerpo de lectura. El contraste entre las dos es, además, más fuerte que
   cuando todo estaba en la misma condensada.

   Opinión queda afuera del todo: una columna firmada compuesta en condensada y
   versales se lee como un titular de deportes. */
.sl24-seccion:not(.sl24-seccion--opinion) .sl24-card--featured .sl24-card__titulo,
.sl24-seccion:not(.sl24-seccion--opinion) .sl24-card--featured .sl24-card__titulo a {
	font-family: var(--sl24-font-titulos);
	font-weight: 800;
	letter-spacing: -.02em;
	text-transform: none;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	line-height: 1.08;
}

/* Las que siguen: legibles antes que decorativas. Caja baja, no versales — un
   titular largo en mayúsculas se lee entre un 10 % y un 15 % más lento, y en
   una lista de ocho no se perdona. */
.sl24-seccion .sl24-card--text .sl24-card__titulo {
	/* Subido desde clamp(1rem, 1.35vw, 1.125rem), que a 1280 px daba 17 px
	   justos. En una columna angosta y en serif, ese cuerpo obligaba a acercarse
	   a la pantalla: son titulares para leer, no metadatos. */
	font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
	line-height: 1.3;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

/* Adentro de una sección la barra de acento a la izquierda sobra: el color ya
   lo dijo el nombre de la sección, tres líneas más arriba, a cuerpo de titular.
   Repetirlo en cada ítem es ruido. Queda una regla fina arriba, que es lo que
   separa de verdad. */
.sl24-seccion .sl24-card--text {
	padding-inline-start: 0;
	padding-block-start: var(--sl24-space-2);
	border-inline-start: 0;
	border-block-start: 1px solid var(--sl24-border);
}

.sl24-seccion .sl24-card--text .sl24-card__hora {
	font-family: var(--sl24-font-mono, ui-monospace, "Courier New", monospace);
	letter-spacing: -.02em;
}

/* El índice va más apretado todavía: la hora entra en la misma línea que el
   titular en vez de ocupar un renglón propio. Con veinte notas cortas en
   columnas, veinte renglones de hora sueltos duplican la altura del bloque sin
   agregar información. */
.sl24-seccion .sl24-card--indice {
	display: grid;
	grid-template-columns: 3.1rem minmax(0, 1fr);
	gap: 0 var(--sl24-space-2);
	align-items: baseline;
}

/* La foto del lead pierde la proporción de tarjeta y toma la de la apertura:
   más ancha que alta, para que la sección abra como abre una página y no como
   abre una ficha. */
.sl24-seccion .sl24-card--featured .sl24-card__media {
	aspect-ratio: 3 / 2;
}

/* Distintivos y metadatos -------------------------------------------------- */

.sl24-badge {
	transition: background var(--sl24-transicion);
}

.sl24-badge--mini {
	padding: 0;
	background: none;
	color: var(--sl24-cat-texto);
}

.sl24-badge--articulo {
	padding: var(--sl24-space-1) var(--sl24-space-3);
	font-size: var(--sl24-fs-xs);
}

.sl24-fecha__etiqueta {
	color: var(--sl24-cat-texto);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sl24-track-caps);
}

.sl24-autor__avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

.sl24-autor__enlace {
	color: inherit;
	font-weight: 600;
}

.sl24-vistas,
.sl24-lectura {
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   LOS TRES RECURSOS QUE FALTABAN

   De las capturas que eligió el medio: la categoría como píldora, la firma
   visible al lado del titular, y la foto en 3:2.

   Todo va scopeado a .sl24-seccion. La apertura queda intacta a pedido del
   cliente —la condensada, el kicker con su regla, el 16:10— porque es la
   pieza que aprobó, y meter mano ahí para «unificar» sería cambiar lo único
   que ya está bien.
   ========================================================================== */

/* La categoría, en píldora. En las cinco referencias la sección se nombra en
   un rótulo chico y redondeado, nunca en un bloque de color: el color pinta la
   página cuando se repite catorce veces, y acá sólo marca. */
.sl24-seccion .sl24-kicker {
	display: inline-block;
	padding: .28rem .75rem;
	border: 1px solid var(--sl24-cat-texto);
	border-radius: 999px;
	color: var(--sl24-cat-texto);
	font-family: var(--sl24-font-titulos);
	font-size: var(--sl24-fs-2xs);
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1;
	text-transform: uppercase;
}

/* La regla que traía el kicker no se dibuja dentro de la píldora: el borde
   redondeado ya hace el trabajo de separar. Fuera de las secciones —en la
   apertura— sigue existiendo y sigue estilada. */
.sl24-seccion .sl24-kicker__regla {
	display: none;
}

.sl24-seccion .sl24-kicker:hover {
	background: var(--sl24-cat-fondo);
	color: var(--sl24-cat-sobre);
	border-color: var(--sl24-cat-fondo);
}

/* La firma, en el color de acento y pegada al titular.
   Las tres referencias que la muestran la tratan como parte del titular, no
   como metadato: 5W la pone en coral justo debajo, del mismo cuerpo que la
   bajada. Es lo que convierte una nota en la nota de alguien. */
.sl24-seccion .sl24-card__meta .sl24-autor,
.sl24-seccion .sl24-card__meta .sl24-autor a {
	color: var(--sl24-cat-texto);
	font-weight: 700;
}

/* 3:2 en vez de 16:9. Es la proporción de 5W y de Jot Down, y la diferencia se
   nota más de lo que sugiere el número: 16:9 es proporción de video y recorta
   por arriba y por abajo justo donde una foto de nota tiene la información. */
.sl24-seccion .sl24-card__media {
	aspect-ratio: 3 / 2;
}

/* El modo superpuesto no tiene proporcion propia: su foto se estira a todo el
   rectangulo de la tarjeta, que ya tiene alto. Sin esta excepcion la regla de
   arriba se la imponia y la foto quedaba a 3:2 dentro de una tarjeta mas alta:
   el titular caia FUERA de la imagen, sobre el fondo claro de la seccion, en
   blanco sobre gris. Es decir, la disposicion «titular sobre la foto» dejaba de
   poner el titular sobre la foto.

   Va con tres clases y no con dos porque el crítico declara «aspect-ratio:
   auto» con la misma especificidad que la regla de arriba, y cards.css carga
   despues: en un empate gana el archivo mas tardio. Es el mismo choque que
   escondio la tipografia de titulares en su momento.

   Alcanza a las tres disposiciones que usan el modo: tira, especial e
   inmersivo. */
.sl24-seccion .sl24-card--super .sl24-card__media,
.sl24-seccion .sl24-card--super .sl24-card__media--hero {
	aspect-ratio: auto;
}

/* La vertical y la cartelera conservan la suya: son formatos elegidos, no el
   recorte por defecto. */
.sl24-seccion .sl24-card--vertical .sl24-card__media,
.sl24-seccion .sl24-card--afiche-cartelera .sl24-card__media {
	aspect-ratio: 2 / 3;
}

/* La foto de la tarjeta de texto, cuando la disposición la pide.

   Va arriba y en 3:2, la misma proporción que el resto de las secciones: es
   una nota como cualquier otra, no una miniatura de índice. */
.sl24-card--text .sl24-card__media--text {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	margin-bottom: var(--sl24-space-3);
}

.sl24-card--text .sl24-card__media--text .sl24-card__imagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Estructura general, publicidad, widgets, pie, formularios y estados vacíos.
   ========================================================================== */

/* Columnas ---------------------------------------------------------------- */

.sl24-columnas {
	display: grid;
	gap: var(--sl24-space-6);
	padding-block: var(--sl24-space-6);
	align-items: start;
}

.sl24-columnas__principal {
	min-width: 0;
}

/* Publicidad -------------------------------------------------------------- */

.sl24-ad--inline {
	margin-block: var(--sl24-space-6);
	padding-inline: 0;
}

.sl24-ad--sidebar-1,
.sl24-ad--sidebar-2,
.sl24-ad--article-inline-1,
.sl24-ad--article-inline-2 {
	max-width: 100%;
	padding-inline: 0;
}

.sl24-ad__enlace {
	display: block;
	width: 100%;
	height: 100%;
}

/* Mapa de espacios. Sólo se dibuja para quien puede editar el tema, así que
   puede permitirse ser evidente: recuadro punteado en rojo, el nombre del
   espacio en grande y debajo su formato y su identificador, que es el que
   aparece en la lista del Personalizador. */
.sl24-ad--placeholder {
	display: grid;
	place-items: center;
	gap: var(--sl24-space-1);
	min-height: 4.5rem;
	aspect-ratio: var(--sl24-ad-ratio-movil, 3 / 1);
	padding: var(--sl24-space-3) var(--sl24-gutter);
	background: rgb(150 5 12 / .07);
	background: color-mix(in srgb, var(--sl24-accent) 7%, transparent);
	border: 1px dashed var(--sl24-accent);
	color: var(--sl24-text-muted);
	text-align: center;
}

@media (min-width: 60em) {
	.sl24-ad--placeholder {
		aspect-ratio: var(--sl24-ad-ratio, 6 / 1);
	}
}

.sl24-ad__hueco-nombre {
	color: var(--sl24-accent-tinta, var(--sl24-accent));
	font-size: var(--sl24-fs-sm);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--sl24-track-caps);
}

.sl24-ad__hueco-dato {
	font-size: var(--sl24-fs-3xs);
	font-variant-numeric: tabular-nums;
}

/* Fila de banners cuadrados 800×800 entre secciones ------------------------ */

.sl24-ad-fila {
	padding-block: var(--sl24-space-5);
}

/* .sl24-ad-fila__interior lleva también .sl24-contenedor: de ahí sale el ancho
   máximo y el gutter. Acá sólo la grilla. En móvil los cuadrados se apilan. */
.sl24-ad-fila__interior {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sl24-space-4);
}

/* Cada cuadrado es un .sl24-ad normal, que trae su propio ancho máximo, margen
   y padding para cuando va suelto. Dentro de la fila esos límites estorban: se
   anulan para que ocupe su celda de la grilla. */
.sl24-ad--cuadro {
	max-width: none;
	margin: 0;
	padding-inline: 0;
}

@media (min-width: 48em) {
	.sl24-ad-fila__interior {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Modo «fila de cuadrados» dentro de un slot cualquiera (encabezado, bajo la
   apertura, artículo, pie…). Es el mismo formato que la fila de portada, pero
   las imágenes son sub-campos del propio slot. Hereda el ancho del .sl24-ad. */

/* Se conserva la clase para poder segmentar la fila desde Ad Inserter o CSS del
   cliente; la grilla la maneja .sl24-ad__fila, así que acá sólo se anula el
   centrado de texto del .sl24-ad base. */
.sl24-ad--fila-slot {
	text-align: initial;
}

.sl24-ad__fila {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sl24-space-4);
}

.sl24-ad__fila-item {
	display: grid;
	place-items: center;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

@media (min-width: 48em) {
	.sl24-ad__fila {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Barra lateral ----------------------------------------------------------- */

.sl24-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--sl24-space-5);
	min-width: 0;
}

.sl24-sidebar__widgets {
	display: flex;
	flex-direction: column;
	gap: var(--sl24-space-5);
}

.sl24-sidebar__pegajoso {
	position: sticky;
	top: var(--sl24-space-4);
}

/* Widgets ----------------------------------------------------------------- */

.sl24-widget {
	padding-bottom: var(--sl24-space-4);
	border-bottom: 1px solid var(--sl24-border);
}

.sl24-widget:last-child {
	border-bottom: 0;
}

.sl24-widget__titulo {
	display: flex;
	align-items: center;
	gap: var(--sl24-space-2);
	margin-bottom: var(--sl24-space-4);
	padding-bottom: var(--sl24-space-2);
	border-bottom: 2px solid var(--sl24-accent);
	font-size: var(--sl24-fs-base);
	text-transform: uppercase;
	letter-spacing: var(--sl24-track-caps);
}

.sl24-widget ul {
	display: grid;
	gap: var(--sl24-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl24-widget li > a {
	color: var(--sl24-text);
	font-size: var(--sl24-fs-sm);
	font-weight: 600;
}

.sl24-widget li > a:hover {
	color: var(--sl24-accent);
}

.sl24-lista-rank {
	counter-reset: sl24-rank;
}

.sl24-lista-rank > li {
	display: flex;
	align-items: flex-start;
	gap: var(--sl24-space-3);
	counter-increment: sl24-rank;
}

.sl24-lista-rank > li::before {
	content: counter(sl24-rank);
	flex: 0 0 auto;
	min-width: 1.4em;
	color: var(--sl24-cat-texto);
	font-family: var(--sl24-font-titulos);
	font-size: var(--sl24-fs-xl);
	font-weight: 900;
	line-height: 1;
}

.sl24-widget-newsletter__texto {
	margin-bottom: var(--sl24-space-3);
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-sm);
}

.sl24-widget-redes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sl24-space-2);
}

.sl24-widget-redes .sl24-redes__enlace {
	width: 38px;
	height: 38px;
	background: var(--sl24-bg-inset);
	color: var(--sl24-text);
}

.sl24-widget-redes .sl24-redes__enlace:hover {
	background: var(--sl24-accent);
	color: var(--sl24-text-inverse);
}

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

/* El pie es oscuro en los dos modos, como sanluis24.com.ar: sobrio, no cansa y
   deja que el rojo resalte sólo en los detalles. Sus colores son propios y no
   siguen a los tokens del tema, porque el fondo es fijo. El rojo de marca puro
   (#96050c) no llega a contraste como texto sobre este negro, así que para los
   títulos se usa un rojo aclarado (--sl24-footer-rojo, ~5:1); el rojo profundo
   se reserva para rellenos como el botón, donde el texto blanco encima sí
   contrasta. */
.sl24-footer {
	--sl24-footer-rojo: #f2564e;
	margin-top: var(--sl24-space-6);
	background: #16181c;
	color: #c9ccd3;
}

.sl24-footer a {
	color: currentColor;
}

.sl24-footer a:hover {
	color: #fff;
}

.sl24-footer .sl24-widget {
	border-bottom: 0;
	padding-bottom: 0;
}

.sl24-footer .sl24-widget__titulo {
	border-bottom-color: rgb(255 255 255 / .28);
}

.sl24-footer .sl24-widget li > a {
	color: currentColor;
}

.sl24-footer__widgets {
	padding-block: var(--sl24-space-5);
	border-bottom: 1px solid rgb(255 255 255 / .1);
}

.sl24-footer__grilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--sl24-space-5);
}

.sl24-footer__info-interior {
	display: grid;
	gap: var(--sl24-space-5);
	padding-block: var(--sl24-space-5);
}

.sl24-footer__marca {
	min-width: 0;
}

.sl24-footer__marca .custom-logo {
	width: auto;
	max-height: 44px;
	/* El logo suele venir en color sobre fondo claro: sobre el negro del pie hay
	   que llevarlo a blanco para que no quede una caja recortada. */
	filter: brightness(0) invert(1);
}

.sl24-footer__columna {
	display: flex;
	flex-direction: column;
	gap: var(--sl24-space-5);
	min-width: 0;
}

.sl24-footer__nombre {
	font-family: var(--sl24-font-titulos);
	font-size: var(--sl24-fs-xl);
	font-weight: 900;
}

.sl24-footer__descripcion {
	max-width: 42ch;
	margin-block: var(--sl24-space-3);
	font-size: var(--sl24-fs-sm);
	opacity: .82;
}

.sl24-redes--footer .sl24-redes__enlace {
	width: 36px;
	height: 36px;
	background: rgb(255 255 255 / .12);
}

.sl24-menu--legal {
	flex-wrap: wrap;
	gap: var(--sl24-space-2) var(--sl24-space-4);
	font-size: var(--sl24-fs-sm);
}

/* El menú legal y el enlace para volver a decidir sobre cookies van en la misma
   línea: son lo mismo para el lector, aunque uno sea un menú y el otro un
   botón. */
.sl24-footer__legales {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sl24-space-2) var(--sl24-space-4);
}

.sl24-footer__bloque {
	min-width: 0;
}

.sl24-footer__subtitulo {
	margin-bottom: var(--sl24-space-3);
	padding-bottom: var(--sl24-space-2);
	border-bottom: 2px solid var(--sl24-footer-rojo);
	color: var(--sl24-footer-rojo);
	font-family: var(--sl24-font-cuerpo);
	font-size: var(--sl24-fs-2xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--sl24-track-caps);
}

.sl24-footer__lista {
	display: grid;
	gap: var(--sl24-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--sl24-fs-sm);
}

.sl24-footer__lista a {
	opacity: .86;
	transition: opacity var(--sl24-transicion);
}

.sl24-footer__lista a:hover {
	opacity: 1;
}

.sl24-footer__lista--contacto {
	line-height: var(--sl24-lh-base);
}

/* El bloque del programa lleva fondo propio: es lo que el medio quiere que se
   note en el pie, no una columna más de enlaces. Apenas más claro que el fondo,
   con un filo rojo a la izquierda para marcarlo sin gritar. */
.sl24-footer__bloque--radio {
	padding: var(--sl24-space-3) var(--sl24-space-4);
	background: rgb(255 255 255 / .05);
	border-inline-start: 3px solid var(--sl24-footer-rojo);
	border-radius: var(--sl24-radius);
}

.sl24-footer__programa {
	font-family: var(--sl24-font-titulos);
	font-size: var(--sl24-fs-base);
	font-weight: 900;
	line-height: var(--sl24-lh-snug);
}

.sl24-footer__horario {
	margin-top: var(--sl24-space-1);
	font-size: var(--sl24-fs-sm);
	opacity: .82;
}

.sl24-footer__escuchar {
	display: inline-flex;
	align-items: center;
	gap: var(--sl24-space-2);
	margin-top: var(--sl24-space-3);
	padding: var(--sl24-space-2) var(--sl24-space-4);
	/* Relleno rojo de marca profundo: el texto blanco encima contrasta bien
	   (6.9:1) y no depende del acento ajustado por modo. */
	background: #96050c;
	color: #fff;
	font-size: var(--sl24-fs-2xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--sl24-track-caps);
	border-radius: var(--sl24-radius);
	transition: opacity var(--sl24-transicion);
}

.sl24-footer__escuchar:hover {
	color: #fff;
	opacity: .88;
}

.sl24-footer__escuchar .sl24-icono {
	width: 14px;
	height: 14px;
}

.sl24-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sl24-space-3);
	padding-block: var(--sl24-space-3);
	border-top: 1px solid rgb(255 255 255 / .1);
	/* Un gris propio y no opacidad: la opacidad del 70 % se multiplicaba con
	   la de adentro y la letra chica quedaba por debajo de 4,5:1. */
	color: #b4b8bf;
	font-size: var(--sl24-fs-2xs);
}

.sl24-footer__creditos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sl24-space-1) var(--sl24-space-4);
}

/* El crédito de desarrollo va un punto más apagado que el resto de la línea:
   pertenece al pie, pero no compite con el registro ni con la dirección, que
   son los datos que el lector puede necesitar de verdad. */
/* Apagado con un gris propio y no con opacidad: al 78 % quedaba en 4,1:1
   sobre el pie y no llegaba al 4,5:1 que pide la letra chica. Este da 7,8:1. */
.sl24-footer__autoria {
	color: #a8acb4;
}

.sl24-footer__autoria-enlace {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

.sl24-footer__autoria-enlace:hover,
.sl24-footer__autoria-enlace:focus-visible {
	color: var(--sl24-accent-tinta, var(--sl24-accent));
}

/* Formularios ------------------------------------------------------------- */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea {
	width: 100%;
	padding: var(--sl24-space-3);
	background: var(--sl24-surface);
	border: 1px solid var(--sl24-border-strong);
	border-radius: var(--sl24-radius);
	color: var(--sl24-text);
	font: inherit;
	font-size: var(--sl24-fs-sm);
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
textarea:focus {
	border-color: var(--sl24-focus);
	outline: 2px solid var(--sl24-focus);
	outline-offset: 1px;
}

.sl24-form-buscar {
	display: flex;
	gap: var(--sl24-space-2);
}

.sl24-form-buscar__enviar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	background: var(--sl24-accent);
	color: var(--sl24-text-inverse);
	border-radius: var(--sl24-radius);
}

.sl24-boton {
	display: inline-block;
	padding: var(--sl24-space-3) var(--sl24-space-6);
	background: var(--sl24-accent);
	color: var(--sl24-text-inverse);
	font-size: var(--sl24-fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sl24-track-caps);
	border: 0;
	border-radius: var(--sl24-radius);
	transition: background var(--sl24-transicion);
}

.sl24-boton:hover {
	background: var(--sl24-blue-dark);
	color: var(--sl24-text-inverse);
}

.sl24-boton[disabled] {
	opacity: .55;
	cursor: default;
}

/* «Cargar más»: lo usan la portada y los listados, por eso vive en la hoja
   común y no en la de la portada, que en un listado no se carga. */
.sl24-cargar-mas {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sl24-space-2);
	margin-top: var(--sl24-space-6);
}

.sl24-cargar-mas__estado {
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-2xs);
}

/* Estados vacíos y paginación ---------------------------------------------- */

.sl24-vacio {
	padding-block: var(--sl24-space-8);
	text-align: center;
}

.sl24-vacio__titulo {
	margin-bottom: var(--sl24-space-3);
	font-size: var(--sl24-fs-xl);
}

.sl24-vacio__texto {
	margin-bottom: var(--sl24-space-4);
	color: var(--sl24-text-muted);
}

.sl24-vacio .sl24-form-buscar {
	max-width: 26rem;
	margin-inline: auto;
}

.sl24-paginacion {
	margin-top: var(--sl24-space-6);
}

.sl24-paginacion__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sl24-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl24-paginacion__item .page-numbers {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding-inline: var(--sl24-space-2);
	background: var(--sl24-surface);
	border: 1px solid var(--sl24-border);
	border-radius: var(--sl24-radius);
	color: var(--sl24-text);
	font-size: var(--sl24-fs-sm);
	font-weight: 600;
}

.sl24-paginacion__item .page-numbers.current,
.sl24-paginacion__item .page-numbers:hover {
	background: var(--sl24-accent);
	border-color: var(--sl24-accent);
	color: var(--sl24-text-inverse);
}

/* Escritorio -------------------------------------------------------------- */

@media (min-width: 60em) {
	.sl24-columnas {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.sl24-sin-sidebar .sl24-columnas {
		grid-template-columns: minmax(0, 1fr);
	}

	.sl24-footer__info-interior {
		grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(10rem, 1fr));
		align-items: start;
	}
}

/* ==========================================================================
   Banda de suscripción al boletín.

   Es lo único de todo el tema que sale en rojo pleno a lo ancho de la
   pantalla. Por eso funciona: hay un solo pedido al lector en toda la página,
   y está entre el final del contenido y el pie, que es donde queda alguien que
   terminó de leer.
   ========================================================================== */

.sl24-news {
	background: var(--sl24-accent);
	color: var(--sl24-white);
	/* El foco por defecto es el azul de marca y sobre rojo no se distingue. */
	--sl24-focus: #ffffff;
}

.sl24-news__interior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sl24-space-4) var(--sl24-space-6);
	padding-block: var(--sl24-space-5);
}

.sl24-news__texto {
	display: flex;
	flex: 1 1 16rem;
	align-items: center;
	gap: var(--sl24-space-3);
	font-size: var(--sl24-fs-sm);
	font-weight: 600;
	line-height: var(--sl24-lh-snug);
}

.sl24-news__icono {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
}

.sl24-news__form {
	display: flex;
	flex: 1 1 22rem;
	min-width: 0;
}

.sl24-news__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--sl24-space-3) var(--sl24-space-4);
	background: var(--sl24-white);
	border: 0;
	color: var(--sl24-text);
	font: inherit;
	font-size: var(--sl24-fs-sm);
}

/* Negro y no blanco: sobre rojo, un botón blanco al lado de un campo blanco
   se lee como una sola pieza y deja de parecer un botón. */
.sl24-news__boton {
	flex: 0 0 auto;
	padding: var(--sl24-space-3) var(--sl24-space-5);
	background: var(--sl24-ink);
	color: var(--sl24-white);
	font-size: var(--sl24-fs-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sl24-track-caps);
	transition: background var(--sl24-transicion);
}

.sl24-news__boton:hover,
.sl24-news__boton:focus-visible {
	background: #000;
}

.sl24-news__redes {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--sl24-space-3);
	margin-inline-start: auto;
}

.sl24-news__seguinos {
	font-size: var(--sl24-fs-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sl24-track-caps);
}

.sl24-redes--news .sl24-redes__enlace {
	color: var(--sl24-white);
	opacity: .85;
}

.sl24-redes--news .sl24-redes__enlace:hover,
.sl24-redes--news .sl24-redes__enlace:focus-visible {
	opacity: 1;
}

/* En pantalla chica el bloque de redes se va abajo y ocupa el ancho: apretado
   contra el botón quedaba a cuatro píxeles del dedo. */
@media (max-width: 47.99em) {
	.sl24-news__redes {
		flex: 1 0 100%;
		margin-inline-start: 0;
		justify-content: center;
	}
}

/* ==========================================================================
   MOVIDO DESDE EL CRÍTICO — riel lateral, emergente y cuadro de permiso

   Ninguna de estas piezas se ve antes de scrollear ni al primer pintado:
   el riel sólo existe a partir de 1600 px y arranca oculto; el emergente y
   el permiso salen con [hidden] hasta que un guion los destapa, segundos
   después. Tenerlas inline costaba 311 líneas en el HTML de CADA página,
   incluidas las notas, sin que nadie las mirara en el primer segundo.

   La regla que ESCONDE el riel se queda en el crítico a propósito: si se
   fuera con el resto, el riel se dibujaría en el flujo del documento hasta
   que llegara esta hoja y empujaría el contenido.
   ========================================================================== */

@media (min-width: 100em) {
	/*
	 * Las tres piezas van en flujo, dentro de una columna flex. Antes la
	 * pestaña y las redes estaban en posición absoluta y sólo el lema quedaba
	 * centrado: con eso, que se montaran una sobre otra dependía del alto de la
	 * ventana, y por eso el mismo sitio se veía bien en un monitor y solapado
	 * en otro. En flujo no pueden pisarse: el navegador reparte lo que hay.
	 */
	.sl24-riel {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		z-index: var(--sl24-z-sticky);
		display: flex;
		width: 48px;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		/*
		 * El riel está fijo al viewport, así que arranca en el borde de arriba
		 * de la ventana y no debajo de la cabecera: sin este relleno el lema
		 * empieza a la altura del logo y se lee montado sobre las bandas.
		 *
		 * El valor lo escribe riel.js midiendo la cabecera de verdad. Un número
		 * fijo no alcanza: la cabecera mide distinto según esté o no la barra
		 * superior, según haya banner cargado en el encabezado y según el ancho
		 * de pantalla, así que acierta en una configuración y falla en las
		 * otras. Eso es justamente lo que pasaba con el valor anterior.
		 *
		 * El de reserva —para cuando no hay JavaScript— es holgado a propósito:
		 * en el peor caso el lema queda más abajo de lo necesario, que se ve
		 * bien; nunca por detrás de la cabecera, que se ve roto.
		 */
		padding-block: var(--sl24-riel-inicio) var(--sl24-space-7);
		/* Separación garantizada entre el lema y las redes. El lema se centra
		   con margin-block: auto, y ese auto vale cero justo cuando no sobra
		   espacio —o sea, en el único caso en que la separación hace falta—.
		   El gap no depende de que sobre nada. */
		gap: var(--sl24-space-5);
		pointer-events: none;
	}

	.sl24-riel > * {
		flex: 0 0 auto;
		pointer-events: auto;
	}

	/* El lema se queda con todo el aire sobrante, repartido arriba y abajo por
	   igual: queda centrado en la franja que va de la cabecera a las redes,
	   haya o no pestaña de sección. Las redes quedan al pie. */
	.sl24-riel__lema {
		margin-block: auto;
	}

	/* La pestaña de sección: rojo pleno, texto girado, pegada al borde. */
	.sl24-riel__pestana {
		padding: var(--sl24-space-4) var(--sl24-space-2);
		background: var(--sl24-accent);
		color: var(--sl24-white);
		font-size: var(--sl24-fs-2xs);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: var(--sl24-track-caps);
		white-space: nowrap;
		writing-mode: vertical-rl;
	}

	/* El lema es la pieza elástica: es la única que puede ceder, así que se
	   queda con el espacio sobrante y se recorta si no alcanza. */
	.sl24-riel__lema {
		flex: 0 1 auto;
		min-height: 0;
		overflow: hidden;
		color: var(--sl24-text-muted);
		/* El guion del riel baja este valor cuando la cabecera es alta y el
		   lema no entra a cuerpo pleno. Sin JavaScript queda el de reserva. */
		font-size: var(--sl24-lema-tam, var(--sl24-fs-3xs));
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .22em;
		white-space: nowrap;
		/* De abajo hacia arriba: es el sentido en que se leen los lomos y el
		   único que no obliga a inclinar la cabeza al revés. */
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}

	.sl24-riel__redes {
		display: grid;
		gap: var(--sl24-space-4);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/*
	 * Ventana baja: el riel suelta piezas en vez de apretarlas.
	 *
	 * El corte es por ALTO, que es la medida que faltaba: hasta ahora el riel
	 * sólo miraba el ancho, y por eso una notebook ancha pero baja lo mostraba
	 * entero sin tener dónde ponerlo.
	 *
	 * Primero se va el LEMA, no las redes. Estaba al revés y el umbral era de
	 * 62em —992 px—: una pantalla de 1080p deja alrededor de 950 px de ventana
	 * una vez descontado el navegador, así que las redes desaparecían en el
	 * monitor más común que existe. Y son lo único que el riel aporta de útil:
	 * el lema es decoración.
	 *
	 * Los umbrales van bajos a propósito. El riel sólo existe a partir de 1.600
	 * px de ancho, y una ventana así de ancha y de menos de 640 px de alto es
	 * un caso raro; el corte tiene que atender ese caso raro y no el habitual.
	 */
	/* El umbral estaba en 40 em y era muy bajo: entre 40 y 48 em el lema entraba
	   en el riel pero no entero, y overflow: hidden lo cortaba a mitad de
	   palabra --se leía «INFORMACIÓN SIN RUI»--. Medio lema no es medio adorno,
	   es un error a la vista. Con el corte acá, o se ve completo o no se ve.

	   La cuenta: 256 px de reserva para la cabecera + 180 del lema + 24 del gap
	   + 200 de las redes + 48 del pie = 708 px, o sea 44 em. 48 deja aire. */
	/* Piso duro, sólo para cuando no corre JavaScript.

	   Estaba en 48em —768 px— y ése era el motivo de que el lema faltara en
	   pantallas grandes: un portátil 1440p al 200 % da un viewport de 720 px y
	   caía debajo del umbral, mientras que uno 1080p sin escalar da 1080 y
	   pasaba. El umbral medía la ventana, que no es lo que decide si el lema
	   entra: eso lo decide lo que sobra después de la cabecera.

	   De eso ahora se ocupa riel.js, que achica el cuerpo lo justo y sólo lo
	   esconde si quedaría ilegible. Acá queda un piso muy por debajo, para el
	   caso en que el guion no corra: a 34em no entra ni al cuerpo mínimo. */
	@media (max-height: 34em) {
		.sl24-riel__lema {
			display: none;
		}
	}

	@media (max-height: 26em) {
		.sl24-riel__redes {
			display: none;
		}
	}

	.sl24-riel__enlace {
		display: block;
		color: var(--sl24-text-muted);
	}

	.sl24-riel__enlace:hover {
		color: var(--sl24-accent);
	}
}


/* El guion del riel marca esto cuando el lema no entra: con la cabecera alta
   —banner cargado— el espacio que queda puede ser menor que el texto aunque la
   ventana parezca holgada. Antes se cortaba a mitad de palabra. */
.sl24-riel--sin-lema .sl24-riel__lema {
	display: none;
}

/* ==========================================================================
   EMERGENTE PUBLICITARIO Y CONSENTIMIENTO DE AVISOS

   Las dos únicas piezas del sitio que se le ponen delante al lector sin que
   las haya pedido. Por eso las dos se cierran fácil y ninguna arranca visible:
   salen con [hidden] y las destapa el guion.
   ========================================================================== */

.sl24-popup {
	position: fixed;
	inset: 0;
	z-index: var(--sl24-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sl24-space-5);
}

.sl24-popup[hidden] {
	display: none;
}

/* Con el emergente abierto la página de atrás no se desplaza: si no, el dedo
   que intenta cerrarlo termina scrolleando la portada. */
.sl24-popup-abierto,
.sl24-popup-abierto body {
	overflow: hidden;
}

.sl24-popup__fondo {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / .72);
}

.sl24-popup__caja {
	position: relative;
	width: min(100%, 26rem);
	max-height: 92vh;
	overflow: auto;
	background: var(--sl24-bg);
	border-radius: var(--sl24-radius);
	padding: var(--sl24-space-4);
}

/* Arriba y por fuera del aviso: dentro de la imagen se confunde con el propio
   banner y el lector no lo encuentra. */
.sl24-popup__cerrar {
	position: absolute;
	inset-block-start: var(--sl24-space-2);
	inset-inline-end: var(--sl24-space-2);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: var(--sl24-bg);
	color: var(--sl24-text);
	cursor: pointer;
	box-shadow: 0 1px 6px rgb(0 0 0 / .28);
}

.sl24-popup__rotulo {
	display: block;
	margin-bottom: var(--sl24-space-2);
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-3xs);
	letter-spacing: var(--sl24-track-caps);
	text-transform: uppercase;
}

/* --- El cuadro de permiso ------------------------------------------------

   No es un modal: no tapa la página ni bloquea la lectura. Se apoya en una
   esquina y espera. Preguntar no puede costarle al lector lo mismo que
   aceptar. */

.sl24-permiso {
	position: fixed;
	inset-block-end: var(--sl24-space-5);
	inset-inline-start: var(--sl24-space-5);
	z-index: var(--sl24-z-sticky);
	width: min(calc(100vw - 2 * var(--sl24-space-5)), 23rem);
}

.sl24-permiso[hidden] {
	display: none;
}

.sl24-permiso__caja {
	background: var(--sl24-bg);
	border: 1px solid var(--sl24-border);
	border-radius: var(--sl24-radius);
	padding: var(--sl24-space-4);
	box-shadow: 0 6px 24px rgb(0 0 0 / .18);
}

.sl24-permiso__titulo {
	margin: 0 0 var(--sl24-space-2);
	font-size: var(--sl24-fs-md);
	line-height: 1.25;
}

.sl24-permiso__texto {
	margin: 0 0 var(--sl24-space-4);
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-sm);
	line-height: 1.5;
}

.sl24-permiso__botones {
	display: flex;
	gap: var(--sl24-space-3);
}

.sl24-permiso__boton {
	flex: 1 1 auto;
	padding: var(--sl24-space-3);
	border: 1px solid var(--sl24-border);
	border-radius: var(--sl24-radius);
	background: none;
	color: var(--sl24-text);
	font-family: inherit;
	font-size: var(--sl24-fs-sm);
	font-weight: 700;
	cursor: pointer;
}

/* El «sí» destaca, pero el «no» no se esconde: los dos se leen y los dos se
   tocan igual de fácil. Un rechazo difícil de encontrar no es un permiso. */
.sl24-permiso__boton--si {
	border-color: var(--sl24-accent);
	background: var(--sl24-accent);
	color: var(--sl24-white);
}

/* El «no» lleva su propia regla y no queda como el sobrante del «sí»: mismo
   tamaño, mismo peso, borde marcado. Un rechazo que se ve apagado es un
   rechazo que el diseño está desalentando, y eso invalida el permiso. */
.sl24-permiso__boton--no {
	border-color: var(--sl24-text-muted);
	color: var(--sl24-text);
}

@media (hover: hover) {
	.sl24-permiso__boton--no:hover {
		border-color: var(--sl24-text);
		background: var(--sl24-bg-inset);
	}
}

/* ==========================================================================
   Página de artículo.
   ========================================================================== */

/* La página de la nota es MÁS ANGOSTA que la portada, a propósito.

   El contenedor del sitio mide 1520 px y el cuerpo de una nota no puede pasar
   de unos 46 rem: más ancho que eso, el ojo pierde el renglón al volver. Con
   las dos medidas conviviendo, la nota quedaba pegada a la izquierda y entre
   ella y la columna de banners se abría un hueco de casi 400 px que no era
   parte de ningún diseño, sólo lo que sobraba.

   Ahora el contenedor se achica hasta medir exactamente lo que ocupan las dos
   columnas. La nota conserva su medida de lectura, la publicidad queda al lado
   y el aire pasa a estar donde tiene que estar: repartido en los márgenes, a
   los dos lados por igual. Es lo que hacen todos los diarios de referencia. */
.sl24-columnas--articulo {
	max-width: 72rem;
	gap: var(--sl24-space-7);
	padding-top: var(--sl24-space-5);
}

.sl24-articulo {
	min-width: 0;
	max-width: 46rem;
}

/* Sin columna de banners no hay nada que justifique correr la nota a un lado:
   se centra. Es el mismo problema del hueco, en su versión sin publicidad. */
.sl24-sin-sidebar .sl24-columnas--articulo .sl24-articulo {
	margin-inline: auto;
}

/* Filete entre la nota y la columna de banners. Con el hueco de antes no hacía
   falta nada para separarlas; ahora que están a una distancia de lectura, la
   línea es lo que dice dónde termina la noticia y dónde empieza lo pago.

   La columna se estira a lo alto de la nota para que el filete llegue hasta
   abajo: cortado a un tercio se lee como un error de dibujo. El segundo banner
   sigue pegándose al scroll por su cuenta (.sl24-sidebar__pegajoso), que es la
   forma correcta —fijar la columna entera dejaría fuera de alcance todo lo que
   no entre en una pantalla—. */
@media (min-width: 60em) {
	.sl24-columnas--articulo {
		align-items: stretch;
	}

	.sl24-columnas--articulo .sl24-sidebar {
		padding-inline-start: var(--sl24-space-6);
		border-inline-start: 1px solid var(--sl24-border);
	}
}

/* Migas de pan ------------------------------------------------------------ */

.sl24-migas {
	margin-bottom: var(--sl24-space-4);
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-xs);
}

.sl24-migas__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sl24-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl24-migas__item + .sl24-migas__item::before {
	content: "/";
	margin-inline-end: var(--sl24-space-2);
	color: var(--sl24-border-strong);
}

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

.sl24-articulo__cabecera {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sl24-space-3);
	margin-bottom: var(--sl24-space-5);
}

.sl24-articulo__titulo {
	font-size: var(--sl24-fs-2xl);
	line-height: var(--sl24-lh-tight);
}

.sl24-articulo__bajada {
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-md);
	line-height: var(--sl24-lh-base);
	text-wrap: pretty;
}

.sl24-articulo__meta {
	width: 100%;
	padding-block: var(--sl24-space-3);
	border-block: 1px solid var(--sl24-border);
	font-size: var(--sl24-fs-xs);
}

/* Imagen destacada -------------------------------------------------------- */

.sl24-articulo__figura {
	margin-bottom: var(--sl24-space-5);
}

.sl24-articulo__imagen {
	width: 100%;
	border-radius: var(--sl24-radius);
}

.sl24-articulo__credito {
	margin-top: var(--sl24-space-2);
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-2xs);
	line-height: var(--sl24-lh-base);
}

/* Cuerpo ------------------------------------------------------------------ */

.sl24-articulo__cuerpo {
	font-size: var(--sl24-fs-md);
	line-height: var(--sl24-lh-loose);
}

.sl24-articulo__cuerpo > * + * {
	margin-top: var(--sl24-space-5);
}

.sl24-articulo__cuerpo h2 {
	margin-top: var(--sl24-space-7);
	font-size: var(--sl24-fs-xl);
}

.sl24-articulo__cuerpo h3 {
	margin-top: var(--sl24-space-6);
	font-size: var(--sl24-fs-lg);
}

.sl24-articulo__cuerpo a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.sl24-articulo__cuerpo ul,
.sl24-articulo__cuerpo ol {
	padding-inline-start: var(--sl24-space-5);
}

.sl24-articulo__cuerpo li + li {
	margin-top: var(--sl24-space-2);
}

.sl24-articulo__cuerpo blockquote {
	padding-inline-start: var(--sl24-space-5);
	border-inline-start: 3px solid var(--sl24-cat);
	font-family: var(--sl24-font-titulos);
	font-size: var(--sl24-fs-lg);
	font-weight: 700;
	line-height: var(--sl24-lh-snug);
}

.sl24-articulo__cuerpo img {
	border-radius: var(--sl24-radius);
}

.sl24-articulo__cuerpo figcaption {
	margin-top: var(--sl24-space-2);
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-2xs);
}

/* Barra de progreso ------------------------------------------------------- */

.sl24-progreso {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--sl24-z-header);
	height: 3px;
	background: transparent;
	pointer-events: none;
}

.sl24-progreso__barra {
	width: 0;
	height: 100%;
	background: var(--sl24-cat);
	transition: width 90ms linear;
}

/* Compartir --------------------------------------------------------------- */

.sl24-compartir {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sl24-space-3);
	margin-block: var(--sl24-space-6);
	padding-block: var(--sl24-space-4);
	border-block: 1px solid var(--sl24-border);
}

.sl24-compartir__titulo {
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sl24-track-caps);
}

.sl24-compartir__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sl24-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl24-compartir__enlace {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--sl24-bg-inset);
	color: var(--sl24-text);
	border-radius: var(--sl24-radius);
	transition: background var(--sl24-transicion), color var(--sl24-transicion);
}

.sl24-compartir__enlace:hover {
	background: var(--sl24-accent);
	color: var(--sl24-text-inverse);
}

.sl24-compartir__enlace.esta-copiado {
	background: var(--sl24-blue);
	color: var(--sl24-text-inverse);
}

/* Etiquetas y ficha de autor ---------------------------------------------- */

.sl24-tags__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sl24-space-2);
	margin: var(--sl24-space-5) 0 0;
	padding: 0;
	list-style: none;
}

.sl24-tags__enlace {
	display: inline-block;
	padding: var(--sl24-space-1) var(--sl24-space-3);
	background: var(--sl24-bg-inset);
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-2xs);
	border-radius: var(--sl24-radius);
}

.sl24-tags__enlace:hover {
	background: var(--sl24-cat);
	color: var(--sl24-text-inverse);
}

.sl24-autor-ficha {
	display: flex;
	gap: var(--sl24-space-4);
	margin-block: var(--sl24-space-6);
	padding: var(--sl24-space-4);
	background: var(--sl24-bg-subtle);
	border-inline-start: 3px solid var(--sl24-cat);
}

.sl24-autor-ficha__avatar {
	flex: 0 0 auto;
	border-radius: 50%;
}

.sl24-autor-ficha__nombre {
	margin-bottom: var(--sl24-space-1);
	font-size: var(--sl24-fs-base);
}

.sl24-autor-ficha__bio {
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-sm);
}

/* Relacionadas y comentarios ---------------------------------------------- */

.sl24-relacionadas {
	margin-top: var(--sl24-space-7);
}

.sl24-relacionadas__titulo {
	display: flex;
	align-items: center;
	gap: var(--sl24-space-3);
	margin-bottom: var(--sl24-space-5);
	padding-bottom: var(--sl24-space-2);
	border-bottom: 1px solid var(--sl24-border);
	font-size: var(--sl24-fs-lg);
	text-transform: uppercase;
	letter-spacing: var(--sl24-track-caps);
}

/* Columnas explícitas, no auto-fit. Las relacionadas viven dentro de la
   columna del artículo, que es angosta: con minmax() el navegador decide que
   no entra una segunda columna y las apila. Fijando el número de columnas
   quedan siempre una al lado de la otra, que es como se leen. */
.sl24-relacionadas__grilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sl24-space-5) var(--sl24-space-4);
}

/* Salta de 2 a 4 sin pasar por 3: el default son cuatro relacionadas y con
   tres columnas quedaría una huérfana sola en la segunda fila. */
@media (min-width: 48em) {
	.sl24-relacionadas__grilla {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* En la columna angosta el titular de cuatro palabras por línea se vuelve
   ilegible: baja un escalón. */
.sl24-relacionadas__grilla .sl24-card__titulo {
	font-size: var(--sl24-fs-sm);
	font-weight: 700;
}

.sl24-comentarios {
	margin-top: var(--sl24-space-7);
}

.sl24-comentarios__titulo {
	margin-bottom: var(--sl24-space-5);
	font-size: var(--sl24-fs-lg);
}

.sl24-comentarios__lista,
.sl24-comentarios__lista .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl24-comentarios__lista .children {
	margin-top: var(--sl24-space-4);
	padding-inline-start: var(--sl24-space-5);
	border-inline-start: 1px solid var(--sl24-border);
}

.sl24-comentarios__lista .comment-body {
	padding-block: var(--sl24-space-4);
	border-top: 1px solid var(--sl24-border);
	font-size: var(--sl24-fs-sm);
}

/* El aviso de privacidad del formulario: se lee antes de escribir, no después
   de mandar, así que va arriba y en el tono de una nota al pie. */
.sl24-comentarios__privacidad {
	margin-bottom: var(--sl24-space-3);
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-2xs);
	line-height: var(--sl24-lh-base);
}

.sl24-comentarios__privacidad a {
	color: var(--sl24-accent);
	text-decoration: underline;
}

.sl24-comentarios__form label {
	display: block;
	margin-bottom: var(--sl24-space-1);
	font-size: var(--sl24-fs-sm);
	font-weight: 600;
}

.sl24-comentarios__form p {
	margin-bottom: var(--sl24-space-4);
}

.sl24-paginas-post {
	display: flex;
	gap: var(--sl24-space-2);
	margin-top: var(--sl24-space-5);
	font-size: var(--sl24-fs-sm);
}

/* Página 404 -------------------------------------------------------------- */

.sl24-error404 {
	padding-block: var(--sl24-space-8);
}

.sl24-error404__titulo {
	font-size: var(--sl24-fs-2xl);
}

.sl24-error404__texto {
	margin-block: var(--sl24-space-3) var(--sl24-space-5);
	color: var(--sl24-text-muted);
}

.sl24-error404 .sl24-form-buscar {
	max-width: 30rem;
}

.sl24-error404__sugerencias {
	margin-top: var(--sl24-space-8);
}

/* Videos de YouTube dentro de la nota ---------------------------------------
   Los que pega la redacción se cambian por la miniatura con el botón de
   reproducir (inc/cookies.php), igual que los del tema: el reproductor se
   carga recién al tocarlo. Mismas reglas que en la portada, que acá no carga
   home-layouts.css. */

.sl24-video {
	position: relative;
	overflow: hidden;
	background: var(--sl24-bg-inset);
	border-radius: var(--sl24-radius);
	aspect-ratio: 16 / 9;
}

.sl24-video__miniatura {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sl24-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	background: rgb(0 0 0 / .25);
	color: #fff;
	cursor: pointer;
	transition: background var(--sl24-transicion);
}

.sl24-video__play:hover {
	background: rgb(0 0 0 / .42);
}

.sl24-video__play .sl24-icono {
	width: 56px;
	height: 56px;
}

.sl24-video__titulo {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: var(--sl24-space-3);
	background: linear-gradient(to top, rgb(0 0 0 / .78), transparent);
	color: #fff;
	font-size: var(--sl24-fs-sm);
	font-weight: 700;
	pointer-events: none;
}

.sl24-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Dentro de un bloque de YouTube de WordPress, el alto del cuadro ya lo
   reserva el propio bloque con un relleno invisible arriba (::before), y
   espera que el reproductor se ubique encima. La miniatura tiene que ir ahí,
   ocupando ese mismo lugar: si no, queda el hueco del tamaño del video y la
   miniatura debajo. */
.wp-has-aspect-ratio .wp-block-embed__wrapper > .sl24-video {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

/* ==========================================================================
   Modo oscuro.
   Es una paleta propia, no una inversión: se redefinen los tokens semánticos
   y nada más. Los acentos institucionales los recalcula inc/colors.php para
   que superen 4.5:1 sobre este fondo — el rojo #95050b puro daría 2.4:1.
   ========================================================================== */

/* Los tokens de la paleta oscura viven en critico.css, inline: no pueden
   llegar diferidos porque el tema ya está aplicado antes del primer pintado.
   Acá quedan sólo los ajustes por componente.

   La barra superior y el pie usan el azul institucional como fondo, que en
   modo oscuro queda casi negro y pierde identidad: se los lleva a la
   superficie elevada con un borde de acento. */
/* El pie ya es oscuro en los dos modos (ver sitio.css), así que no necesita
   override por modo. Sólo se ajusta el hover del icono social de la barra
   superior, que sí cambia con el tema. */
[data-theme="dark"] .sl24-redes--topbar .sl24-redes__enlace:hover {
	background: var(--sl24-bg-inset);
}

[data-theme="dark"] .sl24-nav {
	border-bottom-color: var(--sl24-accent);
}

[data-theme="dark"] .sl24-boton {
	background: var(--sl24-accent);
	color: var(--sl24-text-inverse);
}

[data-theme="dark"] .sl24-boton:hover {
	background: var(--sl24-text);
	color: var(--sl24-text-inverse);
}

[data-theme="dark"] .sl24-form-buscar__enviar,
[data-theme="dark"] .sl24-paginacion__item .page-numbers.current,
[data-theme="dark"] .sl24-paginacion__item .page-numbers:hover {
	background: var(--sl24-accent);
	border-color: var(--sl24-accent);
	color: var(--sl24-text-inverse);
}

/* El distintivo y la pestaña ya no necesitan excepción por modo: el color de
   su texto sale de --sl24-cat-sobre, que inc/colors.php calcula por categoría
   y por modo verificando el contraste real contra el acento. */

[data-theme="dark"] .sl24-seccion--alterna,
[data-theme="dark"] .sl24-franja,
[data-theme="dark"] .sl24-area-widgets,
[data-theme="dark"] .sl24-archivo-cabecera {
	background: var(--sl24-bg-subtle);
}

/* Sobre foto el velo ya garantiza contraste: el texto queda blanco en los dos
   modos y no debe seguir al token de texto. */
[data-theme="dark"] .sl24-card--super .sl24-card__titulo a,
[data-theme="dark"] .sl24-card--super .sl24-card__bajada,
[data-theme="dark"] .sl24-card--super .sl24-meta,
[data-theme="dark"] .sl24-card--super .sl24-kicker {
	color: #fff;
}

/* El respaldo ya no necesita excepción por modo: es transparente y toma el
   color del contenedor, que en oscuro ya es --sl24-bg-inset. */

[data-theme="dark"] .sl24-card__media,
[data-theme="dark"] .sl24-video {
	background: var(--sl24-bg-inset);
}

/* ==========================================================================
   Programa en vivo: ventana de video flotante + notificaciones (campana,
   bandeja y toast). Todo en color de categoría cuando corresponde.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ventana de video flotante
   -------------------------------------------------------------------------- */

.sl24-vivo {
	position: fixed;
	inset-block-end: 12px;
	inset-inline-end: 12px;
	z-index: var(--sl24-z-sticky);
	width: 330px;
	max-width: calc(100vw - 24px);
	background: #0c0d10;
	border: 1px solid var(--sl24-border-strong);
	border-radius: var(--sl24-radius);
	box-shadow: var(--sl24-elev-2);
	overflow: hidden;
}

.sl24-vivo[hidden] {
	display: none;
}

.sl24-vivo__barra {
	display: flex;
	align-items: center;
	gap: var(--sl24-space-2);
	padding: 6px 8px;
	background: #16181c;
	color: #fff;
}

.sl24-vivo__señal {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	background: #ff3b30;
	border-radius: 50%;
	animation: sl24-latido 1.4s ease-in-out infinite;
}

.sl24-vivo__vivo {
	flex: 0 0 auto;
	color: #ff5a52;
	font-size: var(--sl24-fs-3xs);
	font-weight: 900;
	letter-spacing: var(--sl24-track-caps);
}

.sl24-vivo__titulo {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: var(--sl24-fs-2xs);
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sl24-vivo__cerrar {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	color: #fff;
	border-radius: var(--sl24-radius);
}

.sl24-vivo__cerrar:hover {
	background: rgb(255 255 255 / .14);
}

.sl24-vivo__marco {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	background: #000;
}

.sl24-vivo__miniatura {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .6;
}

.sl24-vivo__cargando {
	position: absolute;
	color: #fff;
	font-size: var(--sl24-fs-2xs);
}

.sl24-vivo__marco iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* El contenedor no genera caja: el panel y la burbuja se posicionan fijos por
   su cuenta. */
.sl24-vivo-wrap {
	display: contents;
}

/* Burbuja: el estado minimizado. Chica, en silencio, siempre a mano para
   volver a abrir el vivo. */
.sl24-vivo-burbuja {
	position: fixed;
	/* Apilada arriba del botón «volver arriba» (≈42px) para no encimarse. */
	inset-block-end: calc(var(--sl24-space-4) + 46px);
	inset-inline-end: var(--sl24-space-4);
	z-index: var(--sl24-z-header);
	display: inline-flex;
	align-items: center;
	gap: var(--sl24-space-1);
	padding: 5px 6px 5px 10px;
	background: #16181c;
	color: #fff;
	border: 1px solid var(--sl24-border-strong);
	border-radius: 999px;
	box-shadow: var(--sl24-elev-2);
}

.sl24-vivo-burbuja[hidden] {
	display: none;
}

.sl24-vivo-burbuja__abrir {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-size: var(--sl24-fs-3xs);
	font-weight: 800;
	letter-spacing: var(--sl24-track-caps);
}

.sl24-vivo-burbuja__x {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	color: #fff;
	opacity: .7;
}

.sl24-vivo-burbuja__x:hover {
	opacity: 1;
}

/* En móvil el panel pasa a una franja arriba de todo, a todo el ancho. El resto
   de la página se corre con --sl24-vivo-alto (ver critico.css), así no tapa el
   encabezado. */
@media (max-width: 767px) {
	.sl24-vivo {
		inset-block: 0 auto;
		inset-inline: 0;
		width: 100%;
		max-width: none;
		border-radius: 0;
		border-inline: 0;
		border-block-start: 0;
		/* Por encima del encabezado, que se esconde por detrás al deslizar. */
		z-index: var(--sl24-z-overlay);
	}

	.sl24-vivo__marco {
		aspect-ratio: auto;
		height: 180px;
	}

	/* En móvil la notificación deja libre la esquina inferior derecha, donde
	   viven la burbuja del vivo y el botón «volver arriba». */
	.sl24-toast-host {
		width: min(22rem, calc(100vw - 10rem));
	}
}

/* --------------------------------------------------------------------------
   Campana en la barra de categorías
   -------------------------------------------------------------------------- */

.sl24-campana {
	position: relative;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	color: var(--sl24-text);
}

.sl24-campana .sl24-icono {
	width: 20px;
	height: 20px;
}

.sl24-campana.tiene-novedades .sl24-icono {
	color: var(--sl24-accent);
	animation: sl24-campana-toca 2.4s ease-in-out infinite;
	transform-origin: 50% 4px;
}

.sl24-campana__conteo {
	position: absolute;
	inset-block-start: -2px;
	inset-inline-end: -2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--sl24-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
	border-radius: 999px;
}

.sl24-campana__conteo[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Bandeja de novedades
   -------------------------------------------------------------------------- */

.sl24-bandeja {
	position: fixed;
	inset: 0;
	z-index: var(--sl24-z-modal);
}

.sl24-bandeja[hidden] {
	display: none;
}

.sl24-bandeja__fondo {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / .5);
}

.sl24-bandeja__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	width: min(92vw, 24rem);
	background: var(--sl24-surface);
	box-shadow: var(--sl24-elev-2);
	animation: sl24-entrar-derecha 220ms cubic-bezier(.2, 0, .2, 1);
}

.sl24-bandeja__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sl24-space-3) var(--sl24-space-4);
	border-bottom: 2px solid var(--sl24-accent);
}

.sl24-bandeja__titulo {
	font-size: var(--sl24-fs-lg);
}

.sl24-bandeja__cerrar {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--sl24-text);
}

.sl24-bandeja__lista {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.sl24-bandeja__item {
	border-block-end: 1px solid var(--sl24-border);
}

.sl24-bandeja__avisos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sl24-space-2) var(--sl24-space-3);
	align-items: center;
	padding: var(--sl24-space-3) var(--sl24-space-4);
	border-block-start: 1px solid var(--sl24-border);
	background: var(--sl24-bg-subtle);
	font-size: var(--sl24-fs-sm);
}

.sl24-bandeja__avisos[hidden] {
	display: none;
}

.sl24-bandeja__avisos-texto {
	flex: 1 1 100%;
	margin: 0;
	color: var(--sl24-text-muted);
}

.sl24-bandeja__reactivar {
	padding: var(--sl24-space-1) var(--sl24-space-3);
	border: 1px solid var(--sl24-accent);
	border-radius: 999px;
	color: var(--sl24-accent);
	font-weight: 700;
}

.sl24-bandeja__reactivar:hover,
.sl24-bandeja__reactivar:focus-visible {
	background: var(--sl24-accent);
	color: var(--sl24-white);
}

.sl24-bandeja__reactivar[hidden] {
	display: none;
}

.sl24-bandeja__vacio {
	padding: var(--sl24-space-5) var(--sl24-space-4);
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-sm);
}

/* --------------------------------------------------------------------------
   Ítem de novedad (compartido por bandeja y toast)
   -------------------------------------------------------------------------- */

.sl24-bandeja__enlace,
.sl24-toast__enlace {
	display: flex;
	gap: var(--sl24-space-3);
	align-items: center;
	min-width: 0;
	color: var(--sl24-text);
}

.sl24-bandeja__enlace {
	padding: var(--sl24-space-3) var(--sl24-space-4);
}

.sl24-bandeja__enlace:hover {
	background: var(--sl24-bg-subtle);
}

.sl24-nov__media {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	overflow: hidden;
	background: var(--sl24-bg-inset);
	border-radius: var(--sl24-radius);
}

.sl24-nov__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sl24-nov__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sl24-nov__cat {
	color: var(--sl24-cat-texto, var(--sl24-accent));
	font-size: var(--sl24-fs-3xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--sl24-track-caps);
}

.sl24-nov__titulo {
	font-family: var(--sl24-font-titulos);
	font-size: var(--sl24-fs-sm);
	font-weight: 700;
	line-height: var(--sl24-lh-snug);
	/* Máximo tres líneas: un titular largo no debe estirar la notificación. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.sl24-nov__hora {
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-3xs);
}

/* --------------------------------------------------------------------------
   Notificación flotante (toast)
   -------------------------------------------------------------------------- */

.sl24-toast-host {
	position: fixed;
	z-index: var(--sl24-z-sticky);
	display: flex;
	flex-direction: column;
	gap: var(--sl24-space-2);
	width: min(22rem, calc(100vw - 24px));
	pointer-events: none;
}

.sl24-toast-host--abajo-izquierda {
	inset-block-end: 12px;
	inset-inline-start: 12px;
}

.sl24-toast-host--abajo-derecha {
	inset-block-end: 12px;
	inset-inline-end: 12px;
}

.sl24-toast-host--arriba-derecha {
	inset-block-start: 12px;
	inset-inline-end: 12px;
}

.sl24-toast {
	position: relative;
	overflow: hidden;
	padding: var(--sl24-space-3);
	padding-inline-end: var(--sl24-space-5);
	background: var(--sl24-surface);
	border-inline-start: 4px solid var(--sl24-cat, var(--sl24-accent));
	border-radius: var(--sl24-radius);
	box-shadow: var(--sl24-elev-2);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .3s ease, transform .3s ease;
}

.sl24-toast.esta-visible {
	opacity: 1;
	transform: translateY(0);
}

.sl24-toast.sin-anim {
	transition: none;
	transform: none;
}

.sl24-toast__cerrar {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 4px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	color: var(--sl24-text-muted);
}

.sl24-toast__cerrar:hover {
	color: var(--sl24-text);
}

.sl24-toast__pausar {
	margin-top: var(--sl24-space-2);
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-3xs);
	text-decoration: underline;
}

.sl24-toast__pausar:hover {
	color: var(--sl24-text);
}

.sl24-toast__progreso {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--sl24-cat, var(--sl24-accent));
	transform: scaleX(1);
	transform-origin: inline-start;
}

/* Último momento: rojo y con latido, prevalece sobre el color de sección. */
.sl24-toast.es-breaking {
	border-inline-start-color: var(--sl24-breaking, var(--sl24-accent));
}

.sl24-toast.es-breaking .sl24-nov__cat,
.sl24-toast.es-breaking .sl24-nov__titulo {
	color: var(--sl24-breaking, var(--sl24-accent));
}

.sl24-toast.es-breaking .sl24-toast__progreso {
	background: var(--sl24-breaking, var(--sl24-accent));
}

.sl24-toast.es-radio {
	border-inline-start-color: #ff3b30;
}

.sl24-toast.es-radio .sl24-nov__cat {
	color: #ff5a52;
}

@keyframes sl24-latido {
	0%, 100% { opacity: 1; }
	50% { opacity: .3; }
}

@keyframes sl24-campana-toca {
	0%, 92%, 100% { transform: rotate(0); }
	94% { transform: rotate(12deg); }
	96% { transform: rotate(-10deg); }
	98% { transform: rotate(6deg); }
}

@keyframes sl24-entrar-derecha {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.sl24-vivo__señal,
	.sl24-campana.tiene-novedades .sl24-icono,
	.sl24-bandeja__panel {
		animation: none;
	}

	.sl24-toast__progreso {
		display: none;
	}
}

/**
 * Barra de consentimiento de cookies.
 *
 * Va abajo y ancla al borde, no en el medio de la pantalla: el lector llegó a
 * leer una nota, no a contestar un formulario. Tapa lo menos posible y deja
 * seguir leyendo mientras decide.
 *
 * @package sl24
 */

.sl24-cookies {
	position: fixed;
	z-index: var(--sl24-z-overlay);
	right: 0;
	bottom: 0;
	left: 0;
	padding: var(--sl24-space-3) var(--sl24-gutter);
	background: var(--sl24-bg-inset);
	border-top: 2px solid var(--sl24-red);
	box-shadow: 0 -6px 24px rgb(0 0 0 / 12%);
}

.sl24-cookies[hidden] {
	display: none;
}

.sl24-cookies__caja {
	display: flex;
	flex-direction: column;
	gap: var(--sl24-space-2);
	max-width: var(--sl24-container);
	margin: 0 auto;
}

.sl24-cookies__titulo {
	margin: 0 0 var(--sl24-space-1);
	font-family: var(--sl24-font-titulos);
	font-size: var(--sl24-fs-base);
	line-height: var(--sl24-lh-tight);
}

.sl24-cookies__texto p {
	margin: 0;
	color: var(--sl24-text-muted);
	font-size: var(--sl24-fs-xs);
	line-height: var(--sl24-lh-base);
}

.sl24-cookies__enlace {
	color: var(--sl24-accent);
	text-decoration: underline;
}

/* --- Elegir por familia --------------------------------------------------- */

.sl24-cookies__detalle {
	display: flex;
	flex-direction: column;
	gap: var(--sl24-space-2);
	padding: var(--sl24-space-2);
	background: var(--sl24-bg);
	border: 1px solid var(--sl24-border);
}

.sl24-cookies__detalle[hidden] {
	display: none;
}

.sl24-cookies__opcion {
	display: flex;
	align-items: flex-start;
	gap: var(--sl24-space-2);
}

.sl24-cookies__opcion input {
	/* El área de toque mínima: una casilla de 13px no se acierta con el dedo. */
	width: 22px;
	height: 22px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--sl24-red);
}

.sl24-cookies__opcion label {
	font-size: var(--sl24-fs-xs);
	line-height: var(--sl24-lh-base);
}

.sl24-cookies__opcion strong {
	display: block;
}

.sl24-cookies__opcion span {
	color: var(--sl24-text-muted);
}

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

.sl24-cookies__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sl24-space-2);
}

/* Los dos primeros pesan lo mismo a propósito: un «aceptar» enorme al lado de
   un «rechazar» escondido es no preguntar, disfrazado de pregunta. */
.sl24-cookies__boton {
	flex: 1 1 auto;
	min-width: 10rem;
	justify-content: center;
}

.sl24-cookies__boton[hidden] {
	display: none;
}

/* «Guardar elección» aparece recién al desplegar las casillas. Va último y, en
   pantalla angosta, ocupa la línea entera: ahí es la acción que corresponde y
   no tiene que competir por el ancho con los dos atajos que deciden por todo
   junto. En pantalla ancha entran los cuatro en una línea. */
.sl24-cookies__guardar {
	flex: 1 1 100%;
	order: 1;
}

.sl24-cookies__elegir,
.sl24-cookies__reabrir {
	padding: 0;
	border: 0;
	background: none;
	color: var(--sl24-text-muted);
	font: inherit;
	font-size: var(--sl24-fs-2xs);
	text-decoration: underline;
	cursor: pointer;
}

.sl24-cookies__elegir:hover,
.sl24-cookies__reabrir:hover {
	color: var(--sl24-accent);
}

/* En el pie el fondo es oscuro: el gris apagado de las páginas claras ahí
   daba 2:1 y casi no se leía. El mismo gris de la autoría, 7,8:1. */
.sl24-footer .sl24-cookies__reabrir {
	color: #a8acb4;
}

.sl24-footer .sl24-cookies__reabrir:hover,
.sl24-footer .sl24-cookies__reabrir:focus-visible {
	color: #fff;
}

@media (min-width: 48em) {
	.sl24-cookies__caja {
		flex-direction: row;
		align-items: center;
	}

	.sl24-cookies__texto {
		flex: 1 1 auto;
	}

	.sl24-cookies__acciones {
		flex: 0 0 auto;
	}

	.sl24-cookies__boton {
		flex: 0 0 auto;
	}

	/* Al desplegar «Elegir» la barra vuelve a apilarse: las casillas necesitan
	   el ancho completo para leerse. */
	.sl24-cookies__caja:has(.sl24-cookies__detalle:not([hidden])) {
		flex-direction: column;
		align-items: stretch;
	}
}