/*
Theme Name: Mañana
Description: Tema de la plataforma Mañana. Rojo, negro y gris; Oswald, Nunito Sans y Anton.
Version: 1.1.1
Requires PHP: 8.0
Text Domain: manana
*/

/* ---------------------------------------------------------------------------
   Tokens
   Del sistema de diseño entregado. El rojo es la identidad de Mañana.
   --------------------------------------------------------------------------- */

:root {
	--primary: #000000;
	--secondary: #e21c21;
	--tertiary: #606060;
	--neutral: #ffffff;

	/* El gris de fondo del índice de dossiers. No es el --tertiary rebajado:
	   ahí las tarjetas son rojas y el gris oscuro las sostiene; aquí las
	   tarjetas son fotografías y el fondo tiene que desaparecer. */
	--gris-claro: #f1f1f1;

	/* Tipografía calcada del sitio original en Wix (ver docs/SPEC.md §4.2).
	   Oswald titula y etiqueta; Nunito Sans sustituye a Avenir LT, que es de
	   Monotype y no se puede realojar sin licencia. */
	--fuente-titular: 'Oswald', 'Arial Narrow', sans-serif;
	--fuente-texto: 'Nunito Sans', -apple-system, system-ui, sans-serif;
	--fuente-etiqueta: 'Oswald', 'Arial Narrow', sans-serif;
	/* Anton aparece en el original en un solo sitio: SUSCRÍBETE. */
	--fuente-display: 'Anton', 'Arial Narrow', sans-serif;

	/* Pesos: el original usa Avenir 35 Light para el cuerpo y 85 Heavy para
	   los títulos de artículo. */
	--peso-texto: 300;
	--peso-fuerte: 800;

	/* El original no usa negro puro para el cuerpo del artículo. */
	--texto-cuerpo: #303030;

	--ancho: 1440px;
	/* 740 px: el ancho de la columna de lectura del sitio original. */
	--ancho-lectura: 46.25rem;
	--gutter: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--neutral);
	color: var(--primary);
	font-family: var(--fuente-texto);
	/* 18px/27px: los valores exactos del sitio original. */
	font-size: 1.125rem;
	font-weight: var(--peso-texto);
	line-height: 1.5;
	overflow-x: hidden;
}

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

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

/* Foco visible: la navegación por teclado no puede quedarse a ciegas sobre
   fondos rojos ni grises. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid var(--secondary);
	outline-offset: 3px;
}

.rojo a:focus-visible,
.hero a:focus-visible {
	outline-color: var(--neutral);
}

/* Salto al contenido, sólo visible al tabular. */
.saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--primary);
	color: var(--neutral);
	padding: 0.75rem 1.25rem;
	font-family: var(--fuente-etiqueta);
}

.saltar:focus {
	left: 0;
}

/* Para lo que debe existir en el documento pero no en la página: encabezados de
   sección que el diseño resuelve por otros medios. No usa display:none, que lo
   borraría también del árbol de accesibilidad. */
.solo-lectores {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.contenedor {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 0 1.25rem;
}

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

.cabecera {
	background: var(--neutral);
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/* Tres columnas y no flex con márgenes automáticos: así la navegación queda
   centrada respecto a la página, no respecto al hueco que dejan logo y lupa. */
.cabecera__inner {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 1.1rem 1.25rem;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
}

.cabecera__inner > form {
	justify-self: end;
}

.logo {
	font-family: var(--fuente-display);
	font-size: clamp(1.75rem, 3.4vw, 2.6rem);
	line-height: 1;
	color: var(--secondary);
	letter-spacing: -0.01em;
}

.nav {
	display: flex;
	gap: clamp(1.25rem, 4vw, 3.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La marca de sección activa va ENCIMA del texto, no debajo. */
.nav a {
	display: inline-block;
	font-family: var(--fuente-etiqueta);
	font-weight: 500;
	/* 18px con caja de 50px, como el original. */
	font-size: 1.125rem;
	line-height: 2.78;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tertiary);
	padding-top: 4px;
	border-top: 2px solid transparent;
	transition: border-color 0.15s, color 0.15s;
}

.nav a:hover,
.nav .activo a {
	color: var(--secondary);
	border-top-color: var(--secondary);
}

.cabecera__acciones {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	justify-self: end;
}

.buscar {
	background: none;
	border: 0;
	padding: 0.35rem;
	cursor: pointer;
	color: var(--primary);
	display: flex;
}

/* Hamburguesa y botón de cierre: sólo existen en móvil. */
.hamburguesa,
.nav-cerrar {
	display: none;
}

/* ---------------------------------------------------------------------------
   Hero — la pieza más reciente
   --------------------------------------------------------------------------- */

.hero {
	position: relative;
	display: block;
	min-height: clamp(22rem, 46vw, 34rem);
	background: var(--secondary);
	overflow: hidden;
}

.hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo inferior: el titular va en blanco sobre fotos de contraste impredecible
   y sin esto puede volverse ilegible. */
.hero__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.28) 45%,
		rgba(0, 0, 0, 0.05) 75%
	);
}

.hero__texto {
	position: relative;
	max-width: var(--ancho);
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(22rem, 46vw, 34rem);
	color: var(--neutral);
}

.hero__titulo {
	font-family: var(--fuente-titular);
	/* 68px en escritorio, con interlineado 75px = 1.1. */
	font-size: clamp(2.25rem, 5vw, 4.25rem);
	line-height: 1.1;
	font-weight: 500;
	margin: 0;
	max-width: 20ch;
	text-wrap: balance;
}

.hero__autor {
	margin: 1.25rem 0 0;
	font-size: clamp(1.15rem, 2.2vw, 2.1875rem);
	font-weight: 700;
	opacity: 0.95;
}

/* ---------------------------------------------------------------------------
   Banda de destacados
   --------------------------------------------------------------------------- */

.banda {
	background: var(--tertiary);
	padding: var(--gutter) 0;
}

.banda__grid {
	max-width: var(--ancho);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--gutter);
	padding: 0 var(--gutter);
}

.destacado {
	position: relative;
	display: block;
	min-height: clamp(15rem, 26vw, 20rem);
	background: var(--secondary);
	overflow: hidden;
}

.destacado__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.destacado:hover .destacado__img {
	transform: scale(1.03);
}

/* La caja blanca desborda el borde inferior de la imagen: es el gesto
   característico de la portada. */
.destacado__caja {
	position: absolute;
	left: 0;
	bottom: 1.75rem;
	width: min(88%, 24rem);
	background: var(--neutral);
	padding: 1rem 1.15rem;
}

.destacado__titulo {
	font-family: var(--fuente-titular);
	font-weight: 500;
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	line-height: 1.2;
	margin: 0;
	color: var(--primary);
}

/* ---------------------------------------------------------------------------
   Grilla roja — el archivo
   --------------------------------------------------------------------------- */

.archivo {
	background: var(--tertiary);
	padding: var(--gutter) 0 3rem;
}

.archivo__grid {
	max-width: var(--ancho);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gutter);
	padding: 0 var(--gutter);
}

/* Mientras llega la página siguiente, la grilla se atenúa y deja de aceptar
   clics: así no se pulsa una tarjeta que está a punto de ser reemplazada. */
.archivo--cargando .archivo__grid {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.rojo {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: clamp(13rem, 17vw, 15.5rem);
	background: var(--secondary);
	color: var(--neutral);
	padding: 1.1rem 1.25rem 1.4rem;
	transition: background 0.15s;
}

.rojo:hover {
	background: #c2161a;
}

.rojo__meta {
	font-family: var(--fuente-etiqueta);
	font-weight: 400;
	font-size: 0.8rem;
	line-height: 1.45;
	/* Blanco puro y no gris: sobre el rojo, un gris no llega al contraste AA. */
	color: var(--neutral);
}

.rojo__titulo {
	font-family: var(--fuente-titular);
	font-weight: 400;
	font-size: clamp(1.05rem, 1.5vw, 1.4rem);
	line-height: 1.2;
	margin: 1.5rem 0 0;
	text-wrap: balance;
}

/* Imagen de fondo en duotono rojo cuando la pieza tiene destacada.
   No es una opacidad baja —eso lavaba el rojo y dejaba la tarjeta turbia—:
   la imagen se pasa a escala de grises y se funde en multiplicado, así el rojo
   se mantiene saturado y la foto sólo aporta la luz y la sombra.
   Multiplicar además oscurece, nunca aclara, con lo que el texto blanco gana
   contraste en vez de perderlo. */
.rojo__fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.08);
	mix-blend-mode: multiply;
	opacity: 0.62;
	transition: opacity 0.25s ease;
}

.rojo--con-img:hover .rojo__fondo {
	opacity: 0.45;
}

/* El texto por encima de la imagen. */
.rojo__meta,
.rojo__titulo {
	position: relative;
	z-index: 1;
}

/* La mitad del archivo no tiene imagen destacada: esas quedan en rojo pleno,
   que es la respuesta del diseño a esa carencia, no un recurso de emergencia. */

/* ---------------------------------------------------------------------------
   Listado de archivo — una columna
   --------------------------------------------------------------------------- */

/* Los archivos de tipo van sobre blanco, no sobre el gris de la portada. */
.archivo--claro {
	background: var(--neutral);
	padding: clamp(1.5rem, 3vw, 2.5rem) 0 3.5rem;
}

.lista {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	gap: var(--gutter);
}

.archivo--cargando .lista {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.rojo--lista {
	min-height: clamp(9rem, 13vw, 11rem);
	padding: clamp(1.35rem, 2.4vw, 1.9rem) clamp(1.5rem, 2.6vw, 2.1rem);
	justify-content: flex-start;
}

.lista__cuerpo {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	/* El extracto queda arriba y "Leer más" abajo, con la altura que sobre. */
	gap: 0.4rem;
	max-width: 62ch;
}

.lista__titulo {
	font-family: var(--fuente-texto);
	font-weight: var(--peso-fuerte);
	font-size: clamp(1.25rem, 2.1vw, 1.875rem);
	line-height: 1.2;
	text-wrap: balance;
}

.lista__meta {
	font-family: var(--fuente-etiqueta);
	font-size: 0.8rem;
	/* Blanco puro sobre el rojo: un gris no llega al contraste AA. */
	color: var(--neutral);
	opacity: 0.9;
}

.lista__extracto {
	font-size: 0.9rem;
	line-height: 1.5;
	opacity: 0.95;
	/* Dos líneas como mucho: los extractos importados varían de 0 a 300
	   caracteres y sin recorte las tarjetas quedarían de alturas dispares. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lista__mas {
	margin-top: auto;
	padding-top: 0.9rem;
	font-family: var(--fuente-etiqueta);
	font-size: 0.75rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 255, 255, 0.55);
	align-self: flex-start;
	transition: border-color 0.15s;
}

.rojo--lista:hover .lista__mas {
	border-bottom-color: var(--neutral);
}

/* ---------------------------------------------------------------------------
   Índice de dossiers — grilla de dos columnas
   --------------------------------------------------------------------------- */

/* Los dossiers no se listan como los artículos. Cada uno es un proyecto con su
   propia imagen, así que su índice es una parrilla de dos piezas grandes sobre
   gris claro, con el titular en rojo sobre la fotografía y nada más: ni firma,
   ni fecha, ni extracto. Lo que invita a entrar es la imagen. */

.archivo--dossiers {
	background: var(--gris-claro);
	padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5.5rem);
}

.dossiers {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 0 1.25rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Aire, no el --gutter de 8px de la portada: aquí las piezas no forman un
	   mosaico continuo, se leen de una en una. */
	gap: clamp(1.25rem, 2.8vw, 2.5rem);
}

.archivo--cargando .dossiers {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.dossier {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Recorte fijo. Los originales van de la foto apaisada al escaneo vertical
	   de la cubierta de un libro, y sin una proporción común la parrilla queda
	   a saltos y las dos columnas dejan de emparejarse. */
	aspect-ratio: 8 / 7;
	overflow: hidden;
	/* Se ve mientras carga la imagen, y es el fondo definitivo de las piezas
	   que no tengan destacada. */
	background: var(--secondary);
	padding: 2rem clamp(1.5rem, 3.5vw, 3rem);
	text-align: center;
}

.dossier__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.dossier:hover .dossier__img {
	transform: scale(1.04);
}

/* Velo: iguala fotografías que llegan con exposiciones muy distintas y frena
   los blancos quemados, donde el titular rojo se disolvería. */
.dossier__velo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.22);
	transition: background 0.3s ease;
}

.dossier:hover .dossier__velo {
	background: rgba(0, 0, 0, 0.34);
}

.dossier__titulo {
	position: relative;
	z-index: 1;
	font-family: var(--fuente-titular);
	/* 600 es el tope de la Oswald variable que sirve el tema. */
	font-weight: 600;
	font-size: clamp(1.75rem, 3.6vw, 3.25rem);
	line-height: 1.2;
	color: var(--secondary);
	text-wrap: balance;
	/* El rojo es lo más difícil de posar sobre una fotografía: su luminancia cae
	   justo en el medio, así que pierde contraste contra los grises intermedios
	   y sólo se lee bien sobre lo muy claro o lo muy oscuro. Oscurecer el velo
	   no basta —a medio camino lo empeora—, así que el titular lleva su propia
	   penumbra: una sombra corta y densa que le fabrica un fondo negro a ras del
	   trazo, más otra abierta que separa el bloque del resto de la imagen.
	   A este cuerpo no se lee como contorno.
	   Aun así, sobre una foto clara y llena de detalle el rojo va justo: si en
	   algún dossier no se sostiene, la salida es el titular en blanco. */
	text-shadow:
		0 0 3px rgba(0, 0, 0, 0.85),
		0 2px 4px rgba(0, 0, 0, 0.7),
		0 0 18px rgba(0, 0, 0, 0.75);
}

/* Sin imagen la tarjeta se queda en rojo pleno, como el resto del tema, y el
   titular pasa a blanco: rojo sobre rojo no se lee. */
.dossier--sin-img .dossier__titulo {
	color: var(--neutral);
	text-shadow: none;
}

/* ---------------------------------------------------------------------------
   Paginación
   --------------------------------------------------------------------------- */

/* Blanco y no rojo: sobre el gris #606060 el rojo queda apagado y con poco
   contraste. El acento de color se reserva para la página activa. */
.paginacion {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 2.75rem 1rem 0.5rem;
	font-family: var(--fuente-etiqueta);
	font-size: 1.25rem;
	font-weight: 500;
}

.paginacion .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.5rem;
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.15s, background 0.15s;
}

.paginacion a.page-numbers:hover {
	color: var(--neutral);
	background: rgba(255, 255, 255, 0.14);
}

/* La página actual: blanca, plena, con un subrayado rojo que la ancla. */
.paginacion .page-numbers.current {
	color: var(--neutral);
	box-shadow: inset 0 -3px 0 var(--secondary);
}

.paginacion .page-numbers.dots {
	color: rgba(255, 255, 255, 0.45);
	min-width: 1.5rem;
}

/* Flechas: cuadrado con borde, que se invierte al pasar por encima. */
.paginacion .prev,
.paginacion .next {
	color: var(--neutral);
	border: 1px solid rgba(255, 255, 255, 0.45);
	min-width: 2.75rem;
	padding: 0;
}

.paginacion .prev:hover,
.paginacion .next:hover {
	background: var(--neutral);
	color: var(--tertiary);
	border-color: var(--neutral);
}

/* Misma geometría y mismo comportamiento sobre fondo blanco: sólo se invierten
   los colores, porque el blanco de la portada aquí sería invisible. */
.paginacion--claro .page-numbers {
	color: var(--tertiary);
}

.paginacion--claro a.page-numbers:hover {
	color: var(--primary);
	background: rgba(0, 0, 0, 0.06);
}

.paginacion--claro .page-numbers.current {
	color: var(--primary);
	box-shadow: inset 0 -3px 0 var(--secondary);
}

.paginacion--claro .page-numbers.dots {
	color: rgba(0, 0, 0, 0.35);
}

.paginacion--claro .prev,
.paginacion--claro .next {
	color: var(--primary);
	border-color: rgba(0, 0, 0, 0.25);
}

.paginacion--claro .prev:hover,
.paginacion--claro .next:hover {
	background: var(--primary);
	color: var(--neutral);
	border-color: var(--primary);
}

/* ---------------------------------------------------------------------------
   Artículo
   --------------------------------------------------------------------------- */

.entrada {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0 4rem;
}

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

.entrada__tipo {
	font-family: var(--fuente-etiqueta);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--secondary);
}

.entrada__titulo {
	/* El original titula los artículos con Avenir 85 Heavy a 40px/50px en rojo;
	   aquí lo hace Nunito Sans 800, su sustituto libre. */
	font-family: var(--fuente-texto);
	font-weight: var(--peso-fuerte);
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.25;
	color: var(--secondary);
	margin: 0.75rem 0 1.25rem;
	text-wrap: balance;
}

.entrada__meta {
	font-family: var(--fuente-etiqueta);
	font-size: 0.95rem;
	color: var(--tertiary);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.entrada__autor {
	color: var(--primary);
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Pieza libre (dossiers y ficto compuestos con Elementor)
   --------------------------------------------------------------------------- */

/* Deliberadamente vacía de estilo: ni ancho, ni relleno, ni tipografía. Todo
   eso lo pone Elementor por pieza, y cualquier regla de aquí se convertiría en
   algo que hay que pelear desde el maquetador. Existe sólo para dar un gancho
   con el que aislar el contenido del maquetador del resto del tema. */
.pieza-libre {
	/* Las secciones de Elementor son a sangre: el desbordamiento lateral se
	   corta aquí y no en <body>, para no matar ningún position: sticky. */
	overflow-x: clip;
}

/* El cuerpo viene de Wix: HTML plano de <p>, <em>, <figure> e <img>. */
.entrada__cuerpo {
	max-width: var(--ancho-lectura);
	margin: 0 auto;
	padding: 0 1.25rem;
	/* El original va a 18px/27px. Aquí 19px: Nunito Sans dibuja un trazo más
	   fino que Avenir Light y, aunque su altura de x es un 6% mayor, el
	   conjunto pedía un punto más de cuerpo. */
	font-size: 1.1875rem;
	line-height: 1.5;
	color: var(--texto-cuerpo);
}

.entrada__cuerpo p {
	margin: 0 0 1.4em;
}

/* El cuerpo va en peso ligero (300): sin esto, las negritas del texto importado
   apenas se distinguirían. */
.entrada__cuerpo strong,
.entrada__cuerpo b {
	font-weight: 700;
}

.entrada__cuerpo a {
	color: var(--secondary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.entrada__cuerpo figure {
	margin: 2.5rem 0 1rem;
}

/* Las imágenes se salen del ancho de lectura: son obra, no ilustración. */
.entrada__cuerpo figure img {
	width: 100%;
}

.entrada__cuerpo figure + p {
	font-size: 0.9rem;
	color: var(--tertiary);
	line-height: 1.5;
	margin-bottom: 2.5rem;
}

.entrada__cuerpo h3 {
	font-family: var(--fuente-titular);
	font-weight: 400;
	font-size: 1.5rem;
	margin: 2.5rem 0 1rem;
}

/* Notas al pie: enlaces internos recuperados del scrape de Wix. */
.entrada__cuerpo a[href^='#_ftn'] {
	text-decoration: none;
	font-size: 0.85em;
	vertical-align: super;
}

/* ---------------------------------------------------------------------------
   Archivos de tipo
   --------------------------------------------------------------------------- */

.encabezado-archivo {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4rem) 1.25rem 2rem;
}

.encabezado-archivo h1 {
	font-family: var(--fuente-titular);
	font-weight: 400;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	margin: 0;
}

.encabezado-archivo p {
	font-family: var(--fuente-etiqueta);
	color: var(--tertiary);
	margin: 0.5rem 0 0;
}

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

.pie {
	background: var(--tertiary);
	color: var(--neutral);
	padding: clamp(3rem, 7vw, 5.5rem) 0 3rem;
}

.pie__inner {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 0 1.25rem;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 3rem;
}

.pie__logo {
	font-family: var(--fuente-display);
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	line-height: 1;
	color: rgba(255, 255, 255, 0.42);
	margin: 0 0 1rem;
}

.pie__desc {
	max-width: 32ch;
	font-size: 0.875rem;
	line-height: 1.55;
	margin: 0 0 2rem;
}

.pie__comite {
	font-size: 0.875rem;
	line-height: 1.55;
}

.pie__comite strong {
	font-weight: 400;
	display: block;
}

.pie__suscribete {
	/* Anton: el único sitio donde el original lo usa. */
	font-family: var(--fuente-display);
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: inline-block;
	margin: 2rem 0 1rem;
}

.pie__redes {
	display: flex;
	gap: 0.75rem;
}

.pie__redes a {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	color: var(--tertiary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
}

.pie__redes a:hover {
	background: var(--neutral);
}

.pie__legal {
	max-width: var(--ancho);
	margin: 3rem auto 0;
	padding: 1.5rem 1.25rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------------------------
   Adaptación a pantallas menores
   --------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.archivo__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.banda__grid {
		grid-template-columns: 1fr 1fr;
	}

	.banda__grid > :first-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 720px) {
	.cabecera__inner {
		grid-template-columns: 1fr auto;
		gap: 0.75rem 1rem;
	}

	/* --- Menú deslizante --------------------------------------------------- */

	.hamburguesa {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
	}

	.hamburguesa span {
		display: block;
		width: 1.75rem;
		height: 3px;
		margin: 0 auto;
		background: var(--secondary);
	}

	.nav-principal {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 60;
		width: min(78vw, 21rem);
		padding: 6.5rem 1.75rem 2.5rem;
		/* Translúcido y no opaco: en el sitio original la portada se sigue
		   viendo por detrás del panel. Deja además que el botón de cierre,
		   blanco pleno, se lea como un cuadrado aparte. */
		background: rgba(255, 255, 255, 0.86);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);
		visibility: hidden;
		/* La visibilidad se retrasa hasta el final SOLO al cerrar. Al abrir
		   cambia de inmediato: si no, el panel sigue oculto durante la
		   animación y no se le puede llevar el foco. */
		transition: transform 0.28s ease, visibility 0s 0.28s;
	}

	body.nav-abierto .nav-principal {
		transform: none;
		visibility: visible;
		transition: transform 0.28s ease, visibility 0s;
	}

	/* Bloquea el desplazamiento del fondo mientras el panel está abierto. */
	body.nav-abierto {
		overflow: hidden;
	}

	.nav {
		flex-direction: column;
		gap: 2.5rem;
	}

	.nav a {
		font-size: 1.65rem;
		font-weight: 600;
		color: var(--secondary);
		/* En el panel deslizante los enlaces ya van todos en rojo: la marca de
		   sección activa no aportaría nada y sólo añadiría ruido. */
		border-top: 0;
		padding-top: 0;
	}

	.nav-cerrar {
		position: absolute;
		top: 1.15rem;
		right: 1.4rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3.4rem;
		height: 3.4rem;
		padding: 0;
		background: var(--neutral);
		box-shadow: 0 1px 10px rgba(0, 0, 0, 0.12);
		border: 0;
		color: var(--secondary);
		cursor: pointer;
	}

	/* --- Resto del layout -------------------------------------------------- */

	.banda__grid,
	.archivo__grid,
	.dossiers {
		grid-template-columns: 1fr;
	}

	/* A una sola columna la tarjeta recupera todo el ancho, y el 3,6vw del
	   titular se quedaría perdido dentro de ella. */
	.dossier__titulo {
		font-size: clamp(1.75rem, 7vw, 2.5rem);
	}

	.destacado__caja {
		width: min(92%, 22rem);
	}

	.pie__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}