/* =========================================================================
   Tribuna Atlántica — pensamiento contemporáneo
   Orden: tokens · reset · tipografía · layout · cabecera · tarjetas ·
          portada · artículo · equipo · filtros · pie
   ========================================================================= */

/* --------------------------------------------------------------- tokens */

:root {
	--fondo:        #ffffff;
	--fondo-alt:    #f5f6f8;
	--fondo-hueco:  #e9ebef;
	--texto:        #15171c;
	--texto-suave:  #565c66;
	--texto-tenue:  #7c828c;
	--filete:       #dfe2e7;
	--filete-fuerte:#15171c;
	--acento:       #0a3ce0;
	--acento-claro: #2f61ff;
	--acento-fondo: #e8eeff;
	--sombra:       0 1px 2px rgba(21, 23, 28, .05), 0 8px 24px rgba(21, 23, 28, .06);

	--serif: "Source Serif 4", Charter, Georgia, "Times New Roman", serif;
	--sans:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ancho:        1220px;
	--ancho-lectura: 42rem;
	--gutter:       clamp(1rem, 3vw, 2.5rem);
	--radio:        3px;
}

/* El fondo por defecto es blanco siempre. El modo oscuro solo entra si la persona
   lo pide con el conmutador; no se hereda del sistema operativo, porque este es un
   diario y el papel blanco es su estado natural. */
:root[data-tema="oscuro"] {
	--fondo:        #121317;
	--fondo-alt:    #1a1c21;
	--fondo-hueco:  #212429;
	--texto:        #eceef1;
	--texto-suave:  #a2a8b2;
	--texto-tenue:  #7d838d;
	--filete:       #2b2f36;
	--filete-fuerte:#eceef1;
	--acento:       #7aa2ff;
	--acento-claro: #a3c0ff;
	--acento-fondo: #16203a;
	--sombra:       0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------- reset */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
	margin: 0;
	background: var(--fondo);
	color: var(--texto);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 2px;
	border-radius: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.012em;
	margin: 0;
	text-wrap: balance;
}

p { margin: 0 0 1em; }

ul, ol { margin: 0; padding: 0; }

button { font: inherit; cursor: pointer; }

.visualmente-oculto {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.saltar {
	position: absolute; left: -9999px; top: 0;
	background: var(--texto); color: var(--fondo);
	padding: .75rem 1.25rem; z-index: 100;
}
.saltar:focus { left: 0; }

/* --------------------------------------------------------------- layout */

.contenedor {
	width: min(100% - var(--gutter) * 2, var(--ancho));
	margin-inline: auto;
}

.seccion-bloque { margin-block: clamp(2.5rem, 5vw, 4rem); }

/* Antetítulo: la marca tipográfica del diario. */
.antetitulo {
	display: inline-block;
	font-family: var(--sans);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--acento);
	margin-bottom: .4rem;
}
.antetitulo:hover { color: var(--acento-claro); text-decoration: underline; text-underline-offset: 3px; }

.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	font-family: var(--sans);
	font-size: .8125rem;
	color: var(--texto-tenue);
}
.meta > * + *::before {
	content: "·";
	margin-right: .75rem;
	color: var(--filete);
}
.meta__pais:hover { color: var(--acento); }

/* ------------------------------------------------------------- cabecera */

.cabecera { border-bottom: 2px solid var(--filete-fuerte); }

.cabecera__barra {
	border-bottom: 1px solid var(--filete);
	font-family: var(--sans);
	font-size: .75rem;
	color: var(--texto-tenue);
}
.cabecera__barra .contenedor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2.25rem;
}
.cabecera__fecha { text-transform: capitalize; }
.cabecera__acciones { display: flex; align-items: center; gap: .25rem; }

.boton-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem; height: 2rem;
	background: none;
	border: 0;
	border-radius: var(--radio);
	color: var(--texto-suave);
}
.boton-icono:hover { background: var(--fondo-hueco); color: var(--texto); }
.boton-icono svg { width: 1.05rem; height: 1.05rem; }
/* Los botones de tema y de menú llevan dos iconos y enseñan uno cada vez,
   ocultando el otro con el atributo «hidden». La regla de arriba le gana en
   especificidad a la del navegador, así que los dos botones salían con sus dos
   iconos a la vez: sol y luna juntos, abrir y cerrar juntos. */
.boton-icono svg[hidden] { display: none; }

/* Acceso al panel. Sin estas reglas el SVG no tenía ningún tamaño asignado y
   salía enorme, con el rótulo cayéndose debajo. Va a juego con los botones de
   al lado: misma altura, mismo icono, mismo color. */
.cabecera__acceso {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	height: 2rem;
	padding-inline: .5rem;
	border-radius: var(--radio);
	font-family: var(--sans);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1;
	color: var(--texto-suave);
	text-decoration: none;
	white-space: nowrap;
}
.cabecera__acceso:hover,
.cabecera__acceso:focus-visible {
	background: var(--fondo-hueco);
	color: var(--texto);
	text-decoration: none;
}
.cabecera__acceso svg {
	width: 1.05rem;
	height: 1.05rem;
	flex: none;
}

/* En pantallas estrechas se queda solo el icono, como los demás. */
@media (max-width: 30rem) {
	.cabecera__acceso { padding-inline: 0; width: 2rem; justify-content: center; font-size: 0; gap: 0; }
}

.masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: clamp(1rem, 3vw, 1.75rem);
}

.masthead__marca { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.masthead__marca img {
	max-height: 5.5rem;
	width: auto;
	max-width: min(100%, 26rem);
}
@media (max-width: 40rem) {
	.masthead__marca img { max-height: 4rem; }
}

/* El logo es tinta azul marino sobre transparente: en oscuro desaparece contra
   el fondo. Se pasa a blanco en bloque, que se lee bien aunque pierda el azul
   del arco. Lo suyo sería una versión del logo para fondo oscuro. */
:root[data-tema="oscuro"] .custom-logo { filter: brightness(0) invert(1); }


.masthead__nombre {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(1.6rem, 4.2vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
	white-space: nowrap;
}
.masthead__lema {
	font-family: var(--sans);
	font-size: .75rem;
	color: var(--texto-tenue);
	letter-spacing: .02em;
	margin-top: .3rem;
	max-width: 34ch;
	line-height: 1.35;
}

.masthead__hemeroteca {
	font-family: var(--sans);
	font-size: .8125rem;
	font-weight: 600;
	border: 1px solid var(--filete);
	border-radius: var(--radio);
	padding: .5rem .9rem;
	white-space: nowrap;
	transition: border-color .15s, color .15s;
}
.masthead__hemeroteca:hover { border-color: var(--acento); color: var(--acento); }

/* El botón del menú y la hemeroteca, juntos: en ancho solo se ve la
   hemeroteca; en el teléfono, los dos en una fila bajo el logo. */
.masthead__acciones { display: flex; align-items: center; gap: .6rem; }

/* Navegación de secciones */

.nav-secciones {
	border-top: 1px solid var(--filete);
	position: relative;
}
.nav-secciones > .contenedor > ul {
	display: flex;
	justify-content: center;
	list-style: none;
	gap: clamp(.9rem, 2.6vw, 2.25rem);
}
/* El desplazamiento lateral solo en pantallas estrechas: en escritorio recortaría
   los submenús desplegables. */
@media (max-width: 47.99rem) {
	.nav-secciones > .contenedor > ul {
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.nav-secciones > .contenedor > ul::-webkit-scrollbar { display: none; }
}

.nav-secciones a {
	display: block;
	padding: .7rem 0;
	font-family: var(--sans);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
	color: var(--texto-suave);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color .15s, border-color .15s;
}
.nav-secciones a:hover { color: var(--texto); }
.nav-secciones .current-menu-item > a,
.nav-secciones .current-category-ancestor > a {
	color: var(--texto);
	border-bottom-color: var(--acento);
}

/* El menú de teléfono no está aquí sino al final del fichero, a propósito:
   más abajo hay reglas de .nav-secciones —el desplegable y la barra que centra
   el menú— que le ganaban por orden y le dejaban la lista centrada a media
   página y dos flechas por sección. */

/* ---------------------------------------------------------------- migas */

.migas {
	font-family: var(--sans);
	font-size: .75rem;
	color: var(--texto-tenue);
	padding-block: 1rem;
}
.migas ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; }
.migas li + li::before { content: "›"; margin-right: .4rem; color: var(--filete); }
.migas a:hover { color: var(--acento); }
/* Las migas ya no se ven (solo quedan en el JSON-LD); este hueco ocupa lo que
   ocupaban —1rem arriba y abajo más una línea— para no mover los títulos. */
.migas-hueco { height: calc(2rem + .75rem * 1.6); }

/* -------------------------------------------------------------- tarjetas */

.tarjeta { display: flex; flex-direction: column; gap: .85rem; }

/* Marco 16:9 con relleno desenfocado.

   Toda imagen del sitio pasa por aquí: la de una tarjeta, la portada de un
   artículo y las que van dentro del texto. La foto se ve ENTERA —nunca se
   recorta una cabeza ni la mitad de un gráfico— y el hueco que sobra se rellena
   con la misma imagen ampliada y desenfocada, como en un reproductor de vídeo.

   Cuando la imagen ya viene en 1920×1080, que es lo que se pide al subirla, no
   sobra nada y el relleno no llega a verse.

   La dirección de la imagen la escribe PHP en «--imagen» (inc/imagenes.php).
   Sin esa variable el marco sigue funcionando: se queda con el fondo liso. */

.tarjeta__imagen,
.articulo__portada,
.marco-imagen {
	position: relative;
	display: block;
	overflow: hidden;
	isolation: isolate;
	background: var(--fondo-hueco);
	border-radius: var(--radio);
	aspect-ratio: 16 / 9;
}
.tarjeta__imagen::before,
.articulo__portada::before,
.marco-imagen::before {
	content: "";
	position: absolute;
	/* Se desborda a propósito: el desenfoque aclara los bordes y, sin este
	   margen, se vería un halo alrededor del marco. */
	inset: -8%;
	z-index: -1;
	background-image: var(--imagen);
	background-size: cover;
	background-position: center;
	filter: blur(2rem) saturate(1.25);
	transform: scale(1.08);
}
.tarjeta__imagen img,
.articulo__portada img,
.marco-imagen img {
	display: block;
	width: 100%; height: 100%;
	object-fit: contain;
	object-position: center;
}
.tarjeta__imagen img {
	transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}

/* Fotos más pequeñas que su marco (menos de 600px de ancho): a su tamaño real,
   centradas, nunca estiradas. Lo que sobra lo llena el desenfoque. */
.es-pequena img {
	position: absolute;
	inset: 0;
	margin: auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.tarjeta:hover .tarjeta__imagen img { transform: scale(1.03); }

/* Dentro del texto el marco es un bloque más, con su aire alrededor. */
.contenido .marco-imagen { margin-inline: auto; }
.contenido figure .marco-imagen { border-radius: var(--radio); }

/* Los retratos del equipo no son ilustraciones: son cuadrados y van recortados
   a propósito. */
.perfil__retrato img,
.equipo__retrato img,
.caja-autor__retrato img { object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
	.tarjeta:hover .tarjeta__imagen img { transform: none; }
}

.tarjeta__texto { display: flex; flex-direction: column; }

.tarjeta__titulo {
	font-size: 1.1875rem;
	line-height: 1.22;
	margin-bottom: .45rem;
}
.tarjeta__titulo a { background-image: linear-gradient(var(--acento), var(--acento)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s; }
.tarjeta__titulo a:hover { background-size: 100% 1px; color: var(--acento); }

.tarjeta__entradilla {
	font-family: var(--serif);
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--texto-suave);
	margin-bottom: .7rem;
}

.tarjeta--apertura .tarjeta__titulo { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.1; }
.tarjeta--apertura .tarjeta__entradilla { font-size: 1.0625rem; line-height: 1.55; }

.tarjeta--destacada .tarjeta__titulo { font-size: 1.375rem; }

.tarjeta--lista {
	flex-direction: row;
	align-items: flex-start;
	gap: 1rem;
	padding-block: 1.1rem;
	border-top: 1px solid var(--filete);
}
.tarjeta--lista:first-child { border-top: 0; padding-top: 0; }
.tarjeta--lista .tarjeta__titulo { font-size: 1.0625rem; margin-bottom: .35rem; }

.tarjeta--mini .tarjeta__titulo { font-size: .9375rem; line-height: 1.3; }
/* Las tarjetas pequeñas también enseñan la foto entera, como todas: recortarla
   se comía la mitad (y, con la miniatura cuadrada de 150px, además pixelaba). */

/* Numeración de "lo más leído" */
.lista-numerada { counter-reset: pcdd; list-style: none; }
.lista-numerada > li { counter-increment: pcdd; display: flex; gap: .9rem; padding-block: .9rem; border-top: 1px solid var(--filete); }
.lista-numerada > li:first-child { border-top: 0; padding-top: 0; }
.lista-numerada > li::before {
	content: counter(pcdd);
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--filete);
	min-width: 1.4rem;
}

/* ---------------------------------------------------------------- firma */

.firma { display: flex; align-items: center; gap: .55rem; margin-top: auto; }
.firma__retrato { flex: none; display: block; border-radius: 50%; overflow: hidden; background: var(--fondo-hueco); }
.firma__retrato img { width: 100%; height: 100%; object-fit: cover; }
.firma--mini .firma__retrato { width: 2rem; height: 2rem; }
.firma--normal .firma__retrato { width: 3rem; height: 3rem; }
.firma--grande .firma__retrato { width: 4.5rem; height: 4.5rem; }

.firma__datos { display: flex; flex-direction: column; min-width: 0; }
.firma__nombre {
	font-family: var(--sans);
	font-size: .8125rem;
	font-weight: 600;
	color: var(--texto);
	line-height: 1.3;
}
.firma__nombre:hover { color: var(--acento); }
.firma__cargo,
.firma__fecha {
	font-family: var(--sans);
	font-size: .75rem;
	color: var(--texto-tenue);
	line-height: 1.3;
}
.firma__cargo { max-width: 48ch; }
.firma--grande .firma__nombre { font-size: 1rem; }

/* -------------------------------------------------------------- portada */

.portada__apertura {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--filete);
}
.portada__secundarios-titulo {
	font-family: var(--sans);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	margin: 0 0 1rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--filete);
}
.portada__secundarios-mas {
	font-family: var(--sans);
	font-size: .82rem;
	font-weight: 600;
	color: var(--acento);
	text-decoration: none;
	margin-top: auto;
	padding-top: 1rem;
}
.portada__secundarios-mas:hover { text-decoration: underline; }

@media (min-width: 62rem) {
	.portada__apertura { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
	.portada__secundarios {
		display: flex;
		flex-direction: column;
		border-left: 1px solid var(--filete);
		padding-left: clamp(1.5rem, 3vw, 2.5rem);
	}
}
.portada__secundarios .tarjeta + .tarjeta { border-top: 1px solid var(--filete); padding-top: 1.25rem; margin-top: 1.25rem; }

/* Banda de columnistas */

.columnistas {
	background: var(--fondo-alt);
	border-block: 1px solid var(--filete);
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
.columnistas__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.columnistas__titulo {
	font-family: var(--sans);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--texto-suave);
}
.columnistas__lista {
	display: grid;
	gap: 1.25rem clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	list-style: none;
}
.columnista { display: flex; gap: .85rem; align-items: flex-start; }
.columnista__retrato {
	flex: none;
	width: 3.25rem; height: 3.25rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--fondo-hueco);
	box-shadow: 0 0 0 2px transparent;
	transition: box-shadow .2s ease;
}
.columnista:hover .columnista__retrato { box-shadow: 0 0 0 2px var(--acento); }
.columnista__retrato img { width: 100%; height: 100%; object-fit: cover; }
.columnista__nombre {
	font-family: var(--sans);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.25;
	display: block;
}
.columnista__nombre:hover { color: var(--acento); }
.columnista__ultimo {
	font-family: var(--serif);
	font-size: .9375rem;
	line-height: 1.3;
	margin-top: .25rem;
	display: block;
	color: var(--texto-suave);
}
.columnista__ultimo:hover { color: var(--acento); }

/* Bloques por sección */

.bloque__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 2px solid var(--filete-fuerte);
	padding-bottom: .5rem;
	margin-bottom: 1.5rem;
}
.bloque__titulo {
	font-size: 1.375rem;
	letter-spacing: -.02em;
}
.bloque__titulo a:hover { color: var(--acento); }
.bloque__ver-mas {
	font-family: var(--sans);
	font-size: .75rem;
	font-weight: 600;
	color: var(--texto-suave);
	white-space: nowrap;
}
.bloque__ver-mas:hover { color: var(--acento); }

.rejilla {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.rejilla--4 { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

.bloque--con-lateral { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 62rem) {
	.bloque--con-lateral { grid-template-columns: minmax(0, 1fr) 18rem; }
	.bloque__lateral { border-left: 1px solid var(--filete); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
}

/* ------------------------------------------------------- cabecera de archivo */

.cabecera-archivo {
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	border-bottom: 2px solid var(--filete-fuerte);
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.cabecera-archivo__titulo { font-size: clamp(1.9rem, 4.5vw, 3rem); letter-spacing: -.025em; }
.cabecera-archivo__descripcion {
	font-family: var(--serif);
	font-size: 1.0625rem;
	color: var(--texto-suave);
	max-width: 56ch;
	margin-top: .6rem;
}
.cabecera-archivo__cuenta {
	font-family: var(--sans);
	font-size: .8125rem;
	color: var(--texto-tenue);
	margin-top: .6rem;
}

/* -------------------------------------------------------------- artículo */

.articulo { padding-bottom: clamp(2rem, 4vw, 3.5rem); }

/* «Pensamiento contemporáneo» acompaña al nombre de la publicación: va pegado
   al título, no suelto dentro del texto. */
.articulo__coletilla {
	font-family: var(--sans);
	font-size: clamp(.95rem, 2vw, 1.1rem);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--acento);
	margin: .35rem 0 0;
}

/* La firma de la dirección, antes del texto. */
.firma-direccion {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	max-width: var(--medida, 42rem);
	margin: 1.75rem auto 2.25rem;
	padding-left: 1rem;
	border-left: 3px solid var(--acento);
	font-family: var(--sans);
	font-size: .9375rem;
	line-height: 1.45;
	color: var(--texto-suave);
}
.firma-direccion__nombre {
	font-weight: 700;
	color: var(--texto);
}
.firma-direccion__cargo { font-size: .875rem; }

.articulo__cabecera {
	max-width: 52rem;
	padding-block: clamp(1rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem);
	text-align: left;
}
.articulo__titulo {
	font-size: clamp(1.9rem, 4.6vw, 3.05rem);
	line-height: 1.08;
	letter-spacing: -.025em;
	margin-bottom: .85rem;
}
.articulo__entradilla {
	font-family: var(--serif);
	font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
	line-height: 1.5;
	color: var(--texto-suave);
	margin-bottom: 1.25rem;
}
.articulo__firma {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
	border-block: 1px solid var(--filete);
}

/* La foto de portada del artículo: el mismo marco 16:9 que el resto, con la
   imagen entera y el desenfoque detrás. Antes tenía reglas propias (alto
   automático, tope de 22rem y recorte) que chocaban con el marco: unas fotos
   salían cortadas y otras no llenaban el hueco. */
.articulo__foto {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	max-width: 44rem;
}
.articulo__pie-foto {
	font-family: var(--sans);
	font-size: .75rem;
	color: var(--texto-tenue);
	margin-top: .5rem;
}

/* Cuerpo del texto: serif, medida corta, ritmo generoso. */
.contenido {
	max-width: var(--ancho-lectura);
	margin-inline: auto;
	font-family: var(--serif);
	font-size: 1.1875rem;
	line-height: 1.68;
	color: var(--texto);
}
.contenido > * + * { margin-top: 1.35em; }

/* Texto justificado, como en un diario impreso. Sin partición de palabras el
   justificado abre agujeros entre palabras en cuanto la columna se estrecha,
   así que se activa: el navegador sabe partir en español porque el <html>
   declara el idioma. Los guiones se desactivan en pantallas anchas, donde la
   línea ya da de sí. */
.contenido p,
.contenido li,
.contenido blockquote p {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 7 3 3;
}
@media (min-width: 55rem) {
	.contenido p,
	.contenido li,
	.contenido blockquote p { hyphens: manual; -webkit-hyphens: manual; }
}

/* Lo mismo fuera del artículo. Los resúmenes de portada, de la hemeroteca y de
   los listados son texto del propio artículo, y hasta ahora salían en bandera
   mientras el artículo se veía justificado: la misma frase, dos aspectos según
   dónde se leyera. */
.tarjeta__entradilla,
.articulo__entradilla,
.publicar__entradilla p,
.perfil__biografia p,
.caja-autor__texto p {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 7 3 3;
}

/* En una columna estrecha —una tarjeta de lista en el móvil— el justificado
   abre agujeros entre palabras. Ahí manda la legibilidad. */
@media (max-width: 30rem) {
	.tarjeta__entradilla { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
}

/* Lo que no debe justificarse nunca: títulos, pies de foto y bloques de código,
   donde el espaciado forzado estorba en vez de ayudar. */
.contenido h2, .contenido h3, .contenido h4,
.contenido figcaption,
.contenido pre, .contenido pre p,
.contenido td, .contenido th { text-align: left; hyphens: manual; }

/* Solo se quita el margen de abajo que trae el párrafo por defecto. El de
   arriba lo pone «.contenido > * + *», que es la separación entre párrafos.
   Antes esta regla decía «margin: 0», y como pesa más que aquella, la anulaba:
   los párrafos de los artículos y de las páginas salían pegados, sin aire
   entre uno y otro. */
.contenido p { margin-bottom: 0; }
.contenido a {
	color: var(--acento);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.contenido a:hover { text-decoration-thickness: 2px; }

.contenido h2 { font-size: 1.6rem; margin-top: 2.2em; line-height: 1.2; }
.contenido h3 { font-size: 1.3rem; margin-top: 1.9em; line-height: 1.25; }
.contenido h4 { font-size: 1.1rem; margin-top: 1.7em; }

.contenido ul, .contenido ol { padding-left: 1.4em; }
.contenido li + li { margin-top: .5em; }

.contenido blockquote {
	margin: 2em 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--acento);
	font-size: 1.3rem;
	line-height: 1.4;
	color: var(--texto);
	font-style: italic;
}
.contenido blockquote p + p { margin-top: .6em; }

.contenido img,
.contenido figure { border-radius: var(--radio); }
.contenido figure { margin-inline: 0; }
.contenido figcaption {
	font-family: var(--sans);
	font-size: .75rem;
	color: var(--texto-tenue);
	margin-top: .5rem;
}

.contenido table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .9375rem; }
.contenido th, .contenido td { border: 1px solid var(--filete); padding: .6rem .75rem; text-align: left; }
.contenido th { background: var(--fondo-alt); font-weight: 600; }

.contenido pre {
	background: var(--fondo-alt);
	padding: 1rem;
	overflow-x: auto;
	border-radius: var(--radio);
	font-size: .875rem;
}

/* Wrappers de desbordamiento para tablas anchas */
.tabla-scroll { overflow-x: auto; }

.articulo__pie {
	max-width: var(--ancho-lectura);
	margin: clamp(2rem, 4vw, 3rem) auto 0;
}

.etiquetas-articulo { margin-bottom: 2rem; }
.etiquetas-articulo__titulo {
	font-family: var(--sans);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	margin-bottom: .6rem;
}

.pildoras { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; }
.pildoras a {
	display: inline-block;
	font-family: var(--sans);
	font-size: .75rem;
	padding: .3rem .65rem;
	border: 1px solid var(--filete);
	border-radius: 999px;
	color: var(--texto-suave);
	transition: border-color .15s, color .15s, background-color .15s;
}
.pildoras a:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-fondo); }

/* Caja de autor al final del artículo */

.caja-autor {
	display: grid;
	gap: 1.1rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--fondo-alt);
	border: 1px solid var(--filete);
	border-radius: var(--radio);
}
@media (min-width: 40rem) {
	.caja-autor { grid-template-columns: auto 1fr; align-items: start; }
}
.caja-autor__retrato {
	width: 5.5rem; height: 5.5rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--fondo-hueco);
}
.caja-autor__retrato img { width: 100%; height: 100%; object-fit: cover; }
.caja-autor__nombre { font-size: 1.25rem; }
.caja-autor__nombre a:hover { color: var(--acento); }
.caja-autor__cargo {
	font-family: var(--sans);
	font-size: .8125rem;
	color: var(--texto-suave);
	margin-top: .2rem;
}
.caja-autor__bio {
	font-family: var(--serif);
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--texto-suave);
	margin-top: .7rem;
}
.caja-autor__acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }

.boton {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--sans);
	font-size: .8125rem;
	font-weight: 600;
	padding: .55rem 1rem;
	border: 1px solid var(--filete-fuerte);
	border-radius: var(--radio);
	color: var(--texto);
	background: transparent;
	transition: background-color .15s, color .15s, border-color .15s;
}
.boton:hover { background: var(--filete-fuerte); color: var(--fondo); }
.boton--principal { background: var(--filete-fuerte); color: var(--fondo); }
.boton--principal:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton--sutil { border-color: var(--filete); color: var(--texto-suave); }
.boton--sutil:hover { border-color: var(--acento); background: transparent; color: var(--acento); }

/* --------------------------------------------------------------- equipo */

.perfil {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.75rem);
	padding-block: clamp(1.75rem, 4vw, 3rem);
	border-bottom: 2px solid var(--filete-fuerte);
}
@media (min-width: 48rem) {
	.perfil { grid-template-columns: 12rem 1fr; align-items: start; }
}
.perfil__retrato {
	width: 100%;
	max-width: 12rem;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--fondo-hueco);
}
.perfil__retrato img { width: 100%; height: 100%; object-fit: cover; }

.perfil__nombre { font-size: clamp(1.9rem, 4.5vw, 2.9rem); letter-spacing: -.025em; }
.perfil__cargo {
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 500;
	color: var(--acento);
	margin-top: .4rem;
}
.perfil__datos {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	font-family: var(--sans);
	font-size: .8125rem;
	color: var(--texto-tenue);
	margin-top: .8rem;
}
.perfil__bio {
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--texto-suave);
	margin-top: 1.1rem;
	max-width: 62ch;
}
.perfil__bio p { margin: 0; }
.perfil__bio p + p { margin-top: .85em; }
.perfil__subtitulo {
	font-family: var(--sans);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	margin: 1.6rem 0 .6rem;
}
.perfil__redes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; list-style: none; }

.equipo-rejilla {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	list-style: none;
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
.ficha-equipo {
	display: flex;
	gap: 1rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--filete);
}
.ficha-equipo__retrato {
	flex: none;
	width: 5rem; height: 5rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--fondo-hueco);
}
.ficha-equipo__retrato img { width: 100%; height: 100%; object-fit: cover; }
.ficha-equipo__nombre { font-size: 1.0625rem; line-height: 1.25; }
.ficha-equipo__nombre a:hover { color: var(--acento); }
.ficha-equipo__cargo {
	font-family: var(--sans);
	font-size: .75rem;
	color: var(--texto-suave);
	margin-top: .3rem;
	line-height: 1.4;
}
.ficha-equipo__cuenta {
	font-family: var(--sans);
	font-size: .75rem;
	color: var(--texto-tenue);
	margin-top: .5rem;
}

/* -------------------------------------------------------------- filtros */

.filtros {
	background: var(--fondo-alt);
	border: 1px solid var(--filete);
	border-radius: var(--radio);
	padding: clamp(1rem, 2.5vw, 1.5rem);
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.filtros__rejilla {
	display: grid;
	gap: .9rem;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.filtros__campo { display: flex; flex-direction: column; gap: .3rem; }
.filtros__etiqueta {
	font-family: var(--sans);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--texto-tenue);
}
.filtros select,
.filtros input[type="search"],
.filtros input[type="text"] {
	font-family: var(--sans);
	font-size: .875rem;
	padding: .5rem .6rem;
	border: 1px solid var(--filete);
	border-radius: var(--radio);
	background: var(--fondo);
	color: var(--texto);
	width: 100%;
}
.filtros__acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.filtros__activos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.filtro-activo {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--sans);
	font-size: .75rem;
	padding: .25rem .3rem .25rem .6rem;
	background: var(--acento-fondo);
	color: var(--acento);
	border-radius: 999px;
}
.filtro-activo a { font-weight: 700; line-height: 1; padding: 0 .25rem; }

/* ----------------------------------------------------------- paginación */

.paginacion { margin-block: clamp(2rem, 4vw, 3rem); }
.paginacion .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem;
	font-family: var(--sans);
	font-size: .875rem;
}
.paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding-inline: .6rem;
	border: 1px solid var(--filete);
	border-radius: var(--radio);
	color: var(--texto-suave);
}
.paginacion .page-numbers:hover { border-color: var(--acento); color: var(--acento); }
.paginacion .page-numbers.current {
	background: var(--filete-fuerte);
	border-color: var(--filete-fuerte);
	color: var(--fondo);
	font-weight: 600;
}
.paginacion .dots { border: 0; }

/* -------------------------------------------------------------- widgets */

.widget + .widget { margin-top: 2rem; }
.widget__titulo {
	font-family: var(--sans);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--texto-suave);
	border-bottom: 2px solid var(--filete-fuerte);
	padding-bottom: .45rem;
	margin-bottom: 1rem;
}
.widget ul { list-style: none; }
.widget li + li { margin-top: .5rem; }
.widget a:hover { color: var(--acento); }

/* ------------------------------------------------------------------ pie */

.pie {
	background: var(--fondo-alt);
	border-top: 2px solid var(--filete-fuerte);
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-block: clamp(2rem, 4vw, 3rem);
}
.pie__rejilla {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.pie__nombre {
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.1;
	margin: 0 0 .35rem;
}
.pie__nombre-largo {
	font-family: var(--sans);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--texto-suave);
	margin: 0 0 .9rem;
	max-width: 34ch;
}
.pie__descripcion {
	font-family: var(--serif);
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--texto-suave);
	max-width: 40ch;
}
.pie__titulo {
	font-family: var(--sans);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--texto-suave);
	margin-bottom: .8rem;
}
.pie ul { list-style: none; font-family: var(--sans); font-size: .875rem; }
.pie li + li { margin-top: .45rem; }
.pie a { color: var(--texto-suave); }
.pie a:hover { color: var(--acento); }

.pie__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--filete);
	font-family: var(--sans);
	font-size: .75rem;
	color: var(--texto-tenue);
}
.pie__legal ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem 1.25rem;
	line-height: 1.5;
}
.pie__legal li { display: flex; align-items: center; }
.pie__legal p { margin: 0; line-height: 1.5; }

/* Los enlaces legales bailaban de altura: la lista se alineaba con el centro del
   bloque de créditos, que tiene dos líneas. Se alinean por arriba y cada trozo
   cuida su propio interlineado. */
.pie__legal { align-items: flex-start; }
.pie__creditos { display: grid; gap: .3rem; }
.pie__entidad { color: var(--texto-tenue); }
.pie__legal ul { padding-top: .1rem; }
/* «.pie li + li» separa las listas en columna; en esta fila horizontal bajaba
   «Privacidad» y «Cookies» respecto a «Aviso legal». El hueco lo pone el gap. */
.pie__legal li + li { margin-top: 0; }

/* ------------------------------------------------------------- buscador */

.buscador-panel {
	display: none;
	border-bottom: 1px solid var(--filete);
	background: var(--fondo-alt);
	padding-block: 1rem;
}
.buscador-panel[data-abierto="true"] { display: block; }
.buscador-panel form { display: flex; gap: .5rem; }
.buscador-panel input[type="search"] {
	flex: 1;
	font-family: var(--serif);
	font-size: 1.0625rem;
	padding: .65rem .8rem;
	border: 1px solid var(--filete);
	border-radius: var(--radio);
	background: var(--fondo);
	color: var(--texto);
}

/* ------------------------------------------------------------ mensajes */

.aviso-vacio {
	padding: clamp(2rem, 5vw, 4rem) 0;
	text-align: center;
	max-width: 44ch;
	margin-inline: auto;
}
.aviso-vacio h2 { font-size: 1.5rem; margin-bottom: .6rem; }
.aviso-vacio p { color: var(--texto-suave); }

/* -------------------------------------------------------------- móviles */

@media (max-width: 47.99rem) {
	.masthead { flex-direction: column; align-items: flex-start; gap: .75rem; }
	.masthead__acciones { align-self: stretch; }
	.masthead__acciones > * { flex: 1 1 0; text-align: center; }
	.cabecera__barra .contenedor { min-height: 2.5rem; }
	.tarjeta--lista { flex-direction: column; gap: .6rem; }
	.articulo__firma { flex-direction: column; align-items: flex-start; }
	.perfil__retrato { max-width: 8rem; }
}

@media print {
	.cabecera, .pie, .filtros, .paginacion, .caja-autor__acciones, .buscador-panel { display: none; }
	body { background: #fff; color: #000; }
	.contenido { max-width: none; font-size: 11pt; }
}

/* =========================================================================
   Añadidos: menú desplegable, columna de filtros de portada e índice de países
   ========================================================================= */

/* ------------------------------------------------- menú con submenú */

/* El desplegable de escritorio. Va entero dentro de su ancho: si no, estas
   reglas —que en la hoja quedan por detrás— le ganaban a las del móvil por
   simple orden, y en el teléfono salían dos flechas y un submenú invisible que
   seguía ocupando su sitio. */

@media (min-width: 48rem) {
	.nav-secciones li { position: relative; }

	.nav-secciones .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: .35rem; height: .35rem;
		margin-left: .45rem;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
	}

	.nav-secciones .sub-menu {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%) translateY(-.25rem);
		z-index: 40;
		display: block;
		min-width: 13rem;
		padding: .35rem 0;
		margin: 0;
		background: var(--fondo);
		border: 1px solid var(--filete);
		border-radius: var(--radio);
		box-shadow: var(--sombra);
		opacity: 0;
		visibility: hidden;
		transition: opacity .15s, transform .15s, visibility .15s;
	}
	.nav-secciones li:hover > .sub-menu,
	.nav-secciones li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}
	.nav-secciones .sub-menu a {
		padding: .5rem .9rem;
		border-bottom: 0;
		margin-bottom: 0;
		font-weight: 500;
	}
	.nav-secciones .sub-menu a:hover { background: var(--fondo-alt); color: var(--acento); }

	/* En escritorio el botón de desplegar no existe: lo añade el script solo
	   para el menú del teléfono. */
	.nav-secciones__desplegar { display: none; }
}

/* Antes había aquí una regla para «pantallas sin ratón» que abría todos los
   submenús a la vez. Se ha quitado: lo que decide si el menú cabe desplegado es
   el ancho, no si hay ratón —un portátil táctil tiene las dos cosas— y de eso
   se encarga el bloque de móvil, más arriba. */

/* ------------------------------------- columna de filtros de la portada */

.portada__cuerpo { display: block; }

@media (min-width: 64rem) {
	.portada__cuerpo {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 19rem;
		gap: clamp(1.75rem, 3vw, 3rem);
		align-items: start;
	}
	.lateral-portada { border-left: 1px solid var(--filete); padding-left: clamp(1.5rem, 2.5vw, 2.25rem); }
	.lateral-portada__pegajoso { position: sticky; top: 1.5rem; }
}

.lateral-portada { margin-block: clamp(2.5rem, 5vw, 4rem); }
.lateral-portada .widget + .widget { margin-top: 1.75rem; }

.filtros__titulo {
	font-family: var(--sans);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--texto-suave);
	margin-bottom: .9rem;
}

.filtros--lateral .filtros__rejilla { grid-template-columns: 1fr; gap: .7rem; }
.filtros--lateral .filtros__acciones .boton { flex: 1; justify-content: center; }

.lista-cuenta { list-style: none; font-family: var(--sans); font-size: .875rem; }
.lista-cuenta li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	padding: .45rem 0;
	border-bottom: 1px solid var(--filete);
}
.lista-cuenta li:last-child { border-bottom: 0; }
.lista-cuenta a { color: var(--texto); }
.lista-cuenta a:hover { color: var(--acento); }
.lista-cuenta span { font-size: .75rem; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }

.widget__pie { font-family: var(--sans); font-size: .8125rem; margin-top: .8rem; }
.widget__pie a { color: var(--acento); font-weight: 600; }

.rejilla--3 { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }

/* --------------------------------------------------- índice de países */

.paises-rejilla {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	list-style: none;
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.pais-caja {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--filete);
	border-radius: var(--radio);
	padding: 1.1rem 1.25rem;
	background: var(--fondo);
	transition: border-color .18s, box-shadow .18s, transform .18s;
}
.pais-caja:hover {
	border-color: var(--acento);
	box-shadow: var(--sombra);
	transform: translateY(-2px);
}

.pais-caja__enlace { display: flex; flex-direction: column; gap: .2rem; }
.pais-caja__bandera { font-size: 1.75rem; line-height: 1; margin-bottom: .35rem; }
.pais-caja__nombre {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.015em;
}
.pais-caja:hover .pais-caja__nombre { color: var(--acento); }
.pais-caja__cuenta {
	font-family: var(--sans);
	font-size: .8125rem;
	color: var(--texto-tenue);
}
.pais-caja__firmas {
	font-family: var(--sans);
	font-size: .75rem;
	line-height: 1.5;
	color: var(--texto-suave);
	margin: .7rem 0 0;
	padding-top: .7rem;
	border-top: 1px solid var(--filete);
}
.pais-caja__firmas a:hover { color: var(--acento); text-decoration: underline; }

/* ---------------------------------- ficha de datos e índice del artículo */

.ficha-articulo,
.indice-articulo {
	max-width: var(--ancho-lectura);
	margin: clamp(1.25rem, 3vw, 2rem) auto;
}

.ficha-articulo__datos {
	display: grid;
	gap: .85rem 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	margin: 0;
	padding: 1.1rem 1.25rem;
	background: var(--fondo-alt);
	border: 1px solid var(--filete);
	border-radius: var(--radio);
	font-family: var(--sans);
}
.ficha-articulo__datos > div { min-width: 0; }
.ficha-articulo__temas { grid-column: 1 / -1; }

.ficha-articulo dt {
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	margin-bottom: .2rem;
}
.ficha-articulo dd {
	margin: 0;
	font-size: .875rem;
	line-height: 1.4;
	color: var(--texto);
}
.ficha-articulo dd a { color: var(--texto); border-bottom: 1px solid var(--filete); }
.ficha-articulo dd a:hover { color: var(--acento); border-bottom-color: var(--acento); }
.ficha-articulo__cargo {
	display: block;
	font-size: .75rem;
	color: var(--texto-tenue);
	margin-top: .15rem;
}

.indice-articulo {
	border-left: 3px solid var(--acento);
	padding: .25rem 0 .25rem 1.1rem;
}
.indice-articulo__titulo {
	font-family: var(--sans);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--texto-suave);
	margin-bottom: .6rem;
}
.indice-articulo ol { list-style: none; font-family: var(--sans); font-size: .875rem; }
.indice-articulo li + li { margin-top: .35rem; }
.indice-articulo__n3 { padding-left: 1rem; font-size: .8125rem; }
.indice-articulo a { color: var(--texto-suave); }
.indice-articulo a:hover { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }

/* Los titulares con ancla no deben quedar tapados al saltar a ellos. */
.contenido h2[id], .contenido h3[id] { scroll-margin-top: 1.5rem; }

/* ------------------------------------------------------------------ compartir
   Bloque al final del artículo. Los iconos son SVG en línea, así que no hay
   ninguna petición a terceros hasta que el lector pulsa. */

.compartir {
	max-width: var(--ancho);
	/* Va antes del texto del artículo: sin el margen de abajo, el primer
	   párrafo arrancaba pegado a los botones. */
	margin: 2.5rem auto 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--filete);
}
.compartir__titulo {
	font-family: var(--sans);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	margin: 0 0 .8rem;
}
.compartir__lista {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.compartir__enlace {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .8rem;
	border: 1px solid var(--filete);
	border-radius: 999px;
	background: none;
	font-family: var(--sans);
	font-size: .82rem;
	color: var(--texto);
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s, color .15s, background-color .15s;
}
.compartir__enlace:hover,
.compartir__enlace:focus-visible {
	border-color: var(--acento);
	color: var(--acento);
	text-decoration: none;
}
.compartir__enlace svg { flex: none; }
.compartir__enlace[data-copiado] {
	border-color: var(--acento);
	color: var(--acento);
}

@media (max-width: 30rem) {
	.compartir__enlace span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.compartir__enlace { padding: .6rem; }
}

/* --------------------------------------------------------------- newsletter
   Sale en la portada, al final de cada artículo y en el pie. El mismo bloque,
   con tres tamaños: en el pie es una columna estrecha más. */

.newsletter {
	border: 1px solid var(--filete);
	border-radius: var(--radio);
	/* Es un formulario de dos campos: con el relleno de antes ocupaba como una
	   portada y pedía más atención de la que merece. */
	padding: clamp(1rem, 2.2vw, 1.4rem);
	margin-block: clamp(1.75rem, 4vw, 2.5rem);
	background: var(--fondo-alt, transparent);
}
.newsletter__titulo { font-family: var(--serif); font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.25; margin: 0 0 .3rem; }
.newsletter__texto { font-family: var(--sans); font-size: .85rem; color: var(--texto-tenue); margin: 0 0 .85rem; max-width: 52ch; }
.newsletter .campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .7rem; }
.newsletter label { font-family: var(--sans); font-size: .8rem; font-weight: 600; }
.newsletter input[type="email"] {
	font-family: var(--sans); font-size: .95rem; color: var(--texto); background: var(--fondo);
	border: 1px solid var(--filete); border-radius: .35rem; padding: .55rem .7rem; width: 100%; max-width: 26rem;
}
.newsletter input[type="email"]:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.newsletter .campo--casilla { flex-direction: row; align-items: flex-start; gap: .6rem; }
.newsletter .campo--casilla label { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; font-size: .78rem; line-height: 1.45; color: var(--texto-tenue); }
.newsletter .campo--casilla input { margin-top: .2rem; flex: none; width: auto; }
/* El enlace a la política de privacidad, dentro del texto que se acepta: la
   regla general es `a { color: inherit }`, así que ahí salía del mismo gris que
   el resto y no parecía pulsable. Vale para la newsletter y para los formularios. */
.campo--casilla a {
	color: var(--acento);
	text-decoration: underline;
	text-underline-offset: .15em;
}
.campo--casilla a:hover,
.campo--casilla a:focus-visible { text-decoration-thickness: 2px; }
.newsletter .campo--trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsletter .campo--turnstile { margin-bottom: .9rem; max-width: 100%; }
.newsletter__acciones { margin: 0; }
.newsletter__aviso { font-family: var(--sans); font-size: .875rem; margin: .8rem 0 0; }
.newsletter__aviso--mal { color: #b32d2e; }

/* En el artículo va a todo el ancho de la columna de lectura. */
.newsletter--articulo { max-width: var(--ancho-lectura); margin-inline: auto; }

/* Con sitio, el correo y el botón van en la misma línea: el bloque baja a la
   mitad de alto y se lee como lo que es, un campo y un botón. En el pie no,
   que ahí es una columna estrecha. */
@media (min-width: 34rem) {
	.newsletter:not(.newsletter--pie) .newsletter__form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: .6rem;
		align-items: end;
	}
	.newsletter:not(.newsletter--pie) .newsletter__form > .campo:not(.campo--casilla):not(.campo--turnstile):not(.campo--trampa) {
		grid-column: 1;
		grid-row: 1;
	}
	.newsletter:not(.newsletter--pie) .newsletter__acciones {
		grid-column: 2;
		grid-row: 1;
		margin-bottom: .7rem;
	}
	.newsletter:not(.newsletter--pie) .campo--casilla,
	.newsletter:not(.newsletter--pie) .campo--turnstile,
	.newsletter:not(.newsletter--pie) .newsletter__aviso,
	.newsletter:not(.newsletter--pie) noscript { grid-column: 1 / -1; }
	.newsletter:not(.newsletter--pie) input[type="email"] { max-width: none; }
}

/* En el pie, sin caja: es una columna más entre las otras. */
.newsletter--pie { border: 0; padding: 0; margin: 0; background: none; }
.newsletter--pie .newsletter__titulo {
	font-family: var(--sans); font-size: .75rem; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--texto-tenue); margin-bottom: .6rem;
}
.newsletter--pie .newsletter__texto { font-size: .8125rem; margin-bottom: .8rem; }
.newsletter--pie input[type="email"] { max-width: 100%; font-size: .9rem; padding: .5rem .65rem; }
.newsletter--pie .campo--casilla label { font-size: .75rem; }
.newsletter--pie .boton { width: 100%; justify-content: center; }

/* --------------------------------------------------------------- formulario
   Contacto. Sirve también para cualquier otro formulario del sitio. */

.formulario-contacto { max-width: var(--ancho-lectura); margin-inline: auto; }

.formulario .campo { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.formulario label {
	font-family: var(--sans);
	font-size: .85rem;
	font-weight: 600;
	color: var(--texto);
}
.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"],
.formulario textarea {
	font-family: var(--sans);
	font-size: 1rem;
	color: var(--texto);
	background: var(--fondo);
	border: 1px solid var(--filete);
	border-radius: .35rem;
	padding: .65rem .8rem;
	width: 100%;
}
.formulario input:focus-visible,
.formulario textarea:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 1px;
	border-color: var(--acento);
}
.formulario textarea { resize: vertical; min-height: 9rem; }

/* Formularios largos (proponer una colaboración): bloques con título. */
.formulario__grupo { border: 0; padding: 0; margin: 0 0 1.75rem; min-width: 0; }
.formulario__grupo legend {
	font-family: var(--sans);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--acento);
	padding: 0 0 .4rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--filete);
	width: 100%;
}
.formulario .campo__ayuda { font-family: var(--sans); font-size: .8rem; color: var(--texto-tenue); line-height: 1.45; }
.formulario__nota { margin: -.4rem 0 1rem; }
/* Biografía: escribirla o adjuntarla en PDF. */
.formulario .formulario__bio { gap: .55rem; }
.formulario__etiqueta { font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--texto); }
.formulario__eleccion { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.formulario .formulario__eleccion label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; font-size: .9rem; cursor: pointer; }
.formulario .formulario__bio .campo { margin-bottom: 0; }
.formulario .formulario__bio { margin-bottom: 1.1rem; }
.formulario [hidden] { display: none !important; }
/* Enlaces a textos publicados: tres huecos y un botón para añadir más. */
.formulario__lista-ejemplos { display: grid; gap: .5rem; }
.formulario .formulario__mas { align-self: flex-start; margin-top: .15rem; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.formulario input[type="file"] {
	font-family: var(--sans);
	font-size: .9rem;
	color: var(--texto);
	border: 1px dashed var(--filete);
	border-radius: .35rem;
	padding: .6rem;
	width: 100%;
	max-width: 100%;
}
.formulario input[type="file"]:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.contenido .formulario p { margin-top: 0; }

.formulario .campo--casilla { flex-direction: row; align-items: flex-start; gap: .6rem; }
.formulario .campo--casilla label {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--texto-tenue);
}
.formulario .campo--casilla input { margin-top: .2rem; flex: none; }

/* La trampa para robots: fuera de la pantalla, pero sin display:none, que
   algunos la detectan. */
.formulario .campo--trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.aviso {
	font-family: var(--sans);
	font-size: .9rem;
	border-radius: .35rem;
	padding: .8rem 1rem;
	margin-bottom: 1.5rem;
	border: 1px solid;
}
.aviso--bien { border-color: #1c7c3c; color: #1c7c3c; background: color-mix(in srgb, #1c7c3c 8%, transparent); }
.aviso--mal  { border-color: #b32d2e; color: #b32d2e; background: color-mix(in srgb, #b32d2e 8%, transparent); }

/* Artículos con más de una firma: los retratos se solapan ligeramente, como en
   los créditos de una foto de agencia. */
.firma--varias .firma__retratos { display: inline-flex; }
.firma--varias .firma__retratos .firma__retrato + .firma__retrato { margin-left: -.55rem; }
.firma--varias .firma__retratos img { border: 2px solid var(--fondo); }
.firma__nombres { display: inline; }

/* ==========================================================================
   Artículo a dos columnas
   El texto a la izquierda y a la derecha la firma, la ficha, compartir y más
   lecturas. En pantallas estrechas el lateral cae debajo del texto, que es el
   orden en que interesa leerlo.
   ========================================================================== */

.articulo__cuerpo {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
@media (min-width: 68rem) {
	.articulo__cuerpo { grid-template-columns: minmax(0, 1fr) 21rem; }
}

.articulo__principal { min-width: 0; }

/* Dentro de su columna el texto ya no necesita centrarse a sí mismo. */
.articulo__principal .contenido {
	max-width: 44rem;
	margin-inline: 0;
}

.articulo__lateral { min-width: 0; }

/* El lateral acompaña al texto y se acaba donde se acabe: sin quedarse fijo ni
   tener barra de desplazamiento propia, que obligaba a rodar dos cosas a la vez. */

.lateral__caja {
	border: 1px solid var(--filete);
	border-radius: var(--radio);
	padding: 1.1rem 1.2rem;
	margin-bottom: 1rem;
	background: var(--fondo);
}
.lateral__caja:last-child { margin-bottom: 0; }

.lateral__titulo,
.lateral__antetitulo {
	font-family: var(--sans);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	margin: 0 0 .75rem;
}
.lateral__antetitulo { margin-bottom: .3rem; }

/* --- quién firma --- */
.lateral__autor { text-align: left; }
.lateral__retrato { display: inline-block; margin-bottom: .7rem; }
.lateral__retrato img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
}
.lateral__autor-nombre {
	font-family: var(--serif);
	font-size: 1.15rem;
	line-height: 1.2;
	margin: 0 0 .25rem;
}
.lateral__autor-nombre a { color: var(--texto); text-decoration: none; }
.lateral__autor-nombre a:hover { color: var(--acento); }
.lateral__autor-cargo {
	font-family: var(--sans);
	font-size: .8rem;
	line-height: 1.4;
	color: var(--texto-tenue);
	margin: 0 0 .6rem;
}
.lateral__autor-bio {
	font-family: var(--sans);
	font-size: .82rem;
	line-height: 1.55;
	color: var(--texto);
	margin: 0 0 .7rem;
}

.lateral__enlace {
	display: inline-block;
	font-family: var(--sans);
	font-size: .8rem;
	font-weight: 600;
	color: var(--acento);
	text-decoration: none;
	margin-top: .5rem;
}
.lateral__enlace:hover { text-decoration: underline; }

/* --- ficha --- */
.lateral__ficha { margin: 0; display: grid; gap: .7rem; }
.lateral__ficha > div { min-width: 0; }
.lateral__ficha dt {
	font-family: var(--sans);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	margin-bottom: .15rem;
}
.lateral__ficha dd {
	font-family: var(--sans);
	font-size: .875rem;
	line-height: 1.45;
	margin: 0;
	color: var(--texto);
}
.lateral__ficha a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--filete); }
.lateral__ficha a:hover { color: var(--acento); border-bottom-color: currentColor; }
.lateral__ficha-temas dd { line-height: 1.6; }

/* --- listas de artículos --- */
.lateral__lista { list-style: none; margin: 0; padding: 0; }
.lateral__lista li { padding-block: .6rem; border-top: 1px solid var(--filete); }
.lateral__lista li:first-child { border-top: 0; padding-top: 0; }
.lateral__lista li:last-child { padding-bottom: 0; }
.lateral__lista a {
	display: block;
	font-family: var(--serif);
	font-size: .95rem;
	line-height: 1.3;
	color: var(--texto);
	text-decoration: none;
}

/*
 * Cada fila del lateral: la foto a la izquierda y el texto al lado.
 *
 * La miniatura no se encoge —flex-shrink: 0— porque si no, con titulos largos el
 * cuadrado se estrecha y la foto sale deformada.
 */
.lateral__pieza {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
}
.lateral__miniatura {
	flex: 0 0 auto;
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 2px;
	overflow: hidden;
	background: var(--filete);
}
.lateral__miniatura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .2s ease;
}
.lateral__pieza:hover .lateral__miniatura img { opacity: .82; }
.lateral__pieza-texto { min-width: 0; }
.lateral__lista a:hover { color: var(--acento); }
.lateral__meta {
	display: block;
	font-family: var(--sans);
	font-size: .72rem;
	color: var(--texto-tenue);
	margin-top: .2rem;
}

/* El bloque de compartir dentro del lateral va sin su filete ni su margen. */
.lateral__caja .compartir {
	max-width: none;
	margin: 0;
	padding-top: 0;
	border-top: 0;
}
.lateral__caja .compartir__lista { gap: .35rem; }
.lateral__caja .compartir__enlace { padding: .4rem .6rem; font-size: .78rem; }
.lateral__caja .compartir__enlace span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* ==========================================================================
   Página «Publicar»
   ========================================================================== */

.publicar__portada {
	padding-block: clamp(1.5rem, 4vw, 3rem);
	border-bottom: 1px solid var(--filete);
}
.publicar__portada-texto { max-width: 46rem; }
.publicar__titulo {
	font-size: clamp(2.1rem, 5.5vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -.03em;
	margin: .4rem 0 .9rem;
}
/* Es un <div>: la presentación de la página puede ser más de un párrafo. */
.publicar__entradilla {
	font-family: var(--serif);
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	line-height: 1.55;
	color: var(--texto-tenue);
	margin: 0 0 1.6rem;
}
.publicar__entradilla p { margin: 0; }
.publicar__entradilla p + p { margin-top: .9em; }
.publicar__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin: 0 0 .8rem;
}
.publicar__nota {
	font-family: var(--sans);
	font-size: .85rem;
	color: var(--texto-tenue);
	margin: 0;
}

.boton--grande { padding: .85rem 1.6rem; font-size: 1rem; }
.boton--ancho { display: block; text-align: center; width: 100%; }

/* --- los tres pasos --- */
.publicar__pasos { margin-block: clamp(2.5rem, 5vw, 3.5rem); }
.pasos {
	list-style: none;
	margin: 1.4rem 0 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}
@media (min-width: 48rem) {
	.pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.paso { padding-top: 1rem; border-top: 3px solid var(--acento); }
.paso__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--acento);
	color: #fff;
	font-family: var(--sans);
	font-size: .85rem;
	font-weight: 700;
	margin-bottom: .6rem;
}
.paso__titulo {
	font-family: var(--serif);
	font-size: 1.2rem;
	line-height: 1.25;
	margin: 0 0 .4rem;
}
.paso__texto {
	font-family: var(--sans);
	font-size: .9rem;
	line-height: 1.6;
	color: var(--texto-tenue);
	margin: 0;
}

/* --- condiciones a dos columnas --- */
.publicar__cuerpo {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	padding-bottom: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 66rem) {
	.publicar__cuerpo { grid-template-columns: minmax(0, 1fr) 20rem; }
}
.publicar__texto { min-width: 0; }
.publicar__texto .contenido { max-width: 44rem; margin-inline: 0; }
.publicar__lateral { min-width: 0; }

.publicar__requisitos {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--sans);
	font-size: .875rem;
	line-height: 1.5;
}
.publicar__requisitos li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: .5rem;
}
.publicar__requisitos li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--acento);
}
.publicar__ayuda {
	font-family: var(--sans);
	font-size: .82rem;
	line-height: 1.55;
	color: var(--texto-tenue);
	margin: .9rem 0 0;
}
.lateral__caja--acento {
	border-color: var(--acento);
	background: color-mix(in srgb, var(--acento) 6%, transparent);
}
.lateral__caja--acento .publicar__ayuda { margin-top: 0; margin-bottom: .9rem; }
.lateral__caja--acento .publicar__ya { margin: .9rem 0 0; }
.publicar__ya a { color: var(--acento); font-weight: 600; }

/* --------------------------------------------- apertura y últimos artículos
   Las dos columnas se dejan a su altura natural, sin estirarse la una a la otra:
   el artículo grande con su foto y una entradilla breve, y al lado una lista sin
   fotos. Antes la columna derecha llevaba tarjetas con imagen, se iba muy alta y
   el artículo de apertura tenía que rellenar con un muro de texto. */

@media (min-width: 62rem) {
	.portada__apertura { align-items: start; }
}

/* La foto de apertura no se come la pantalla. */
.tarjeta--apertura .tarjeta__imagen { max-height: 21rem; }

.tarjeta--apertura .tarjeta__entradilla {
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* Lista de últimos: sin foto, separadas por un filete fino. */
.portada__secundarios .tarjeta--lista { padding-block: .9rem; }
.portada__secundarios .tarjeta--lista .tarjeta__titulo {
	font-size: 1.0625rem;
	line-height: 1.3;
	margin-bottom: .3rem;
}
.portada__secundarios .tarjeta--lista .antetitulo { margin-bottom: .3rem; }

/* Los párrafos de la entradilla de apertura, separados. Un resumen largo de un
   solo bloque se lee mal. */
.tarjeta--apertura .tarjeta__entradilla + .tarjeta__entradilla { margin-top: .85em; }

/* ------------------------------------------------------- cinta de colaboradores
   La lista va duplicada en el marcado y se desplaza media anchura: cuando la
   primera copia acaba de pasar, la segunda está exactamente donde empezó la
   primera, así que el bucle no se nota. Se detiene al pasar por encima, para
   poder leer y pinchar, y no se mueve para quien ha pedido al sistema que no le
   animen las interfaces. */

.columnistas__cinta {
	overflow: hidden;
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

.columnistas__cinta .columnistas__lista {
	display: flex;
	flex-wrap: nowrap;
	gap: 2rem;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Un poco más de un minuto por vuelta y persona: lento y sin prisa. */
	animation: pcdd-cinta calc(var(--cuantos, 14) * 4.5s) linear infinite;
}
.columnistas__cinta:hover .columnistas__lista,
.columnistas__cinta:focus-within .columnistas__lista { animation-play-state: paused; }

@keyframes pcdd-cinta {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - 1rem)); }
}

@media (prefers-reduced-motion: reduce) {
	.columnistas__cinta { overflow-x: auto; }
	.columnistas__cinta .columnistas__lista { animation: none; }
}

.columnistas__cinta .columnista {
	flex: 0 0 auto;
	width: 17rem;
}

.columnistas__pie { margin: 1.25rem 0 0; }

/* ------------------------------------------------- documentación asociada */

.documentos {
	max-width: 44rem;
	margin-top: 2.5rem;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--filete);
	border-radius: var(--radio);
	background: var(--fondo-alt);
}
.documentos__titulo {
	font-family: var(--sans);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	margin: 0 0 1rem;
}
.documentos__lista { list-style: none; margin: 0; padding: 0; }
.documento + .documento { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--filete); }
.documento__enlace {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--sans);
	font-size: .95rem;
	font-weight: 600;
	color: var(--acento);
	text-decoration: none;
}
.documento__enlace:hover { text-decoration: underline; }
.documento__enlace svg { flex: none; }
.documento__descripcion {
	font-family: var(--sans);
	font-size: .875rem;
	line-height: 1.5;
	margin: .35rem 0 0;
	color: var(--texto);
}
.documento__meta {
	font-family: var(--sans);
	font-size: .75rem;
	color: var(--texto-tenue);
	margin: .3rem 0 0;
}

/* ------------------------------------------------ la barra del menú
   El menú centrado en su barra. Antes compartía la fila con el selector de
   idioma, que ya no existe: la web solo está en español. */

.nav-secciones > .contenedor {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	position: relative;
}
.nav-secciones > .contenedor > ul { margin-inline: auto; }
/* En estrecho el menú se pega a la izquierda. */
@media (max-width: 48rem) {
	.nav-secciones > .contenedor > ul { margin-inline: 0; }
}

/* =========================================================================
   El menú en un teléfono

   Va al final del fichero para que sus reglas ganen a las de .nav-secciones
   que hay más arriba, sin tener que inflar selectores ni recurrir a !important.
   ========================================================================= */

/* El botón del menú solo se ve donde el menú no cabe desplegado. Tiene el
   mismo aspecto que «Hemeroteca y filtros», que va a su lado. */
.boton-menu {
	display: none;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	font-family: var(--sans);
	font-size: .8125rem;
	font-weight: 600;
	color: var(--texto);
	background: none;
	border: 1px solid var(--filete);
	border-radius: var(--radio);
	padding: .5rem .9rem;
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.boton-menu svg { width: 1.05rem; height: 1.05rem; flex: none; }
.boton-menu svg[hidden] { display: none; }
.boton-menu:hover,
.boton-menu[aria-expanded="true"] { border-color: var(--acento); color: var(--acento); }

@media (max-width: 47.99rem) {
	.boton-menu { display: inline-flex; }

	/* Cerrado ocupa cero: no es «visibility», para que no se pueda tabular
	   dentro de un menú que no se ve. */
	.nav-secciones[data-abierto="false"] > .contenedor > ul { display: none; }

	.nav-secciones > .contenedor {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* Deja de ser una tira que se arrastra de lado —donde media portada del
	   menú quedaba fuera de la pantalla y nada indicaba que siguiera— y pasa a
	   ser una lista, de arriba abajo, con los dedos en mente. */
	.nav-secciones > .contenedor > ul {
		display: block;
		overflow: visible;
		margin: 0;
		padding-bottom: .75rem;
	}
	.nav-secciones > .contenedor > ul > li { border-top: 1px solid var(--filete); }
	.nav-secciones > .contenedor > ul > li:first-child { border-top: 0; }

	.nav-secciones > .contenedor > ul a {
		padding: .9rem .25rem;
		font-size: .9375rem;
		white-space: normal;
		border-bottom: 0;
		margin-bottom: 0;
	}
	.nav-secciones .current-menu-item > a,
	.nav-secciones .current-category-ancestor > a {
		color: var(--acento);
		border-bottom: 0;
	}

	/* La flecha dibujada con bordes era decorativa y aquí estorba: el botón de
	   desplegar lleva la suya. */
	.nav-secciones .menu-item-has-children > a::after { display: none; }

	.nav-secciones .menu-item-has-children {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}
	.nav-secciones .menu-item-has-children > .sub-menu { grid-column: 1 / -1; }

	.nav-secciones__desplegar {
		/* 44 px de lado: lo mínimo para acertar con el dedo. */
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem; height: 2.75rem;
		padding: 0;
		background: none;
		border: 0;
		color: var(--texto-suave);
		cursor: pointer;
	}
	.nav-secciones__desplegar svg {
		width: 1.1rem; height: 1.1rem;
		transition: transform .15s;
	}
	.nav-secciones [data-abierto="true"] > .nav-secciones__desplegar svg { transform: rotate(180deg); }

	/* El submenú se abre solo cuando se pide. Antes, en pantallas sin ratón, se
	   mostraban todos a la vez y el menú se convertía en una lista interminable. */
	.nav-secciones .sub-menu {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		padding: 0 0 .5rem .9rem;
		border: 0;
		box-shadow: none;
		background: none;
		/* En horizontal no se notaba; en vertical aparece la viñeta. */
		list-style: none;
	}
	.nav-secciones li[data-abierto="true"] > .sub-menu { display: block; }
	.nav-secciones .sub-menu a { padding: .6rem .25rem; font-weight: 500; }

}

/* Sin JavaScript no hay botón de desplegar ni forma de abrir el menú, así que
   se enseña todo: vale más un menú largo que un menú inalcanzable. */
.no-js .nav-secciones[data-abierto="false"] > .contenedor > ul { display: block; }
.no-js .nav-secciones .sub-menu { display: block; }

/* -------------------------------------------------- documentos legales
   El aviso legal, la privacidad y las cookies son fichas de datos y párrafos
   largos. Estas dos reglas evitan que la ficha —«Número de registro:» y debajo
   el número— se lea como un párrafo corrido más. */

.contenido .ficha {
	margin-top: 1.1em;
	padding-left: .9rem;
	border-left: 2px solid var(--filete);
	font-family: var(--sans);
	font-size: .9375rem;
	line-height: 1.55;
	text-align: left;
	hyphens: manual;
}
.contenido .ficha strong { color: var(--texto); }

/* El botón que abre el panel de cookies: lo atiende el plugin del banner por su
   clase «cmplz-manage-consent». */
.contenido .cookies-abrir { margin-top: 1.6em; text-align: left; }

/* --------------------------------------------- darse de baja de la newsletter */
.baja-newsletter { max-width: 34rem; }
.baja-newsletter form { margin: 0 0 1rem; }
.baja-newsletter .campo--trampa { position: absolute; left: -9999px; }
.baja-newsletter__aviso { margin: .75rem 0 0; font-size: .9375rem; min-height: 1.4em; }
.baja-newsletter__aviso.es-bien { color: var(--texto); }
.baja-newsletter__aviso.es-error { color: #b32d2e; }
.baja-newsletter__nota { font-size: .875rem; color: var(--texto-suave, #5b616b); }