/* =========================================================================
   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; }

/* 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); }

/* 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);
}

.menu-movil { display: none; }

/* ---------------------------------------------------------------- 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); }

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

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

.tarjeta__imagen {
	display: block;
	overflow: hidden;
	background: var(--fondo-hueco);
	border-radius: var(--radio);
	aspect-ratio: 16 / 9;
}
.tarjeta__imagen img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}
.tarjeta:hover .tarjeta__imagen img { transform: scale(1.03); }

.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; }
.tarjeta--mini .tarjeta__imagen { aspect-ratio: 4 / 3; }

/* 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); }

.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);
}

.articulo__portada {
	margin-block: 0 clamp(1.5rem, 3vw, 2.25rem);
	max-width: 40rem;
}
.articulo__portada img {
	width: 100%;
	height: auto;
	max-height: 22rem;
	object-fit: cover;
	border-radius: var(--radio);
}
.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 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; }

.contenido p { margin: 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__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; }

/* ------------------------------------------------------------- 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__hemeroteca { align-self: stretch; 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ú */

.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 pantallas sin ratón el submenú se despliega en línea. */
@media (hover: none) {
	.nav-secciones .sub-menu {
		position: static;
		left: auto;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		min-width: 0;
		padding: 0;
		display: flex;
		gap: .9rem;
	}
	.nav-secciones .menu-item-has-children > a::after { display: none; }
	.nav-secciones .sub-menu a { padding: .7rem 0; }
}

/* ------------------------------------- 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);
	margin: 2.5rem auto 0;
	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; }
}

/* --------------------------------------------------------------- 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 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; }

.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;
}
.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;
}
.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__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; }

/* --------------------------------------------- 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;
}

/* --------------------------------------------------------------- idiomas
   Selector a la derecha del menú. Es un <details>, así que se abre y se cierra
   sin JavaScript y responde al teclado por sí solo. */

.nav-secciones > .contenedor {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	position: relative;
}
.nav-secciones > .contenedor > ul { margin-inline: auto; }

.idiomas {
	position: relative;
	flex: none;
	margin-left: auto;
	font-family: var(--sans);
}
.idiomas__actual {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .6rem;
	border: 1px solid var(--filete);
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--texto-suave);
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}
.idiomas__actual::-webkit-details-marker { display: none; }
.idiomas__actual:hover { border-color: var(--acento); color: var(--acento); }
.idiomas[open] .idiomas__actual { border-color: var(--acento); color: var(--acento); }
.idiomas[open] .idiomas__actual svg { transform: rotate(180deg); }

.idiomas__codigo {
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
}
.idiomas__nombre { font-weight: 400; }

.idiomas__lista {
	position: absolute;
	top: calc(100% + .35rem);
	right: 0;
	z-index: 40;
	min-width: 11rem;
	margin: 0;
	padding: .3rem;
	list-style: none;
	background: var(--fondo);
	border: 1px solid var(--filete);
	border-radius: var(--radio);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .09);
}
.idiomas__lista a {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .55rem;
	border-radius: calc(var(--radio) - 2px);
	font-size: .82rem;
	color: var(--texto);
	text-decoration: none;
}
.idiomas__lista a:hover { background: var(--fondo-hueco); color: var(--acento); }
.idiomas__aviso {
	margin-left: auto;
	font-size: .68rem;
	color: var(--texto-tenue);
	font-style: italic;
}

/* En estrecho el selector baja y se queda solo con el código. */
@media (max-width: 48rem) {
	.nav-secciones > .contenedor { flex-wrap: wrap; justify-content: space-between; }
	.nav-secciones > .contenedor > ul { margin-inline: 0; }
	.idiomas__actual .idiomas__nombre { display: none; }
}