/* ==========================================================================
   Base: reset mínimo, tipografía, foco, utilidades
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--letra);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* La raíz de cada página es el contenedor de las medidas cqi. */
.sitio {
	container-type: inline-size;
	min-width: 0;
	background: var(--papel);
}

::selection { background: var(--seleccion); }

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

h1, h2, h3, h4, p, blockquote, figure, dl, dd, ol, ul { margin: 0; }
cite { font-style: normal; }
ol, ul { padding: 0; list-style: none; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

a {
	color: var(--tinta);
	text-decoration: none;
	transition: color var(--transicion), background-color var(--transicion);
}
a:hover { color: var(--rojo); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Radio 0 en todo. */
* { border-radius: 0; }

/* Foco visible en rojo; nunca el anillo azul del navegador. */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--rojo);
	outline-offset: 2px;
}
/* Sobre fondos rojos el foco rojo no se vería: se invierte a blanco. */
.fondo-rojo :focus-visible { outline-color: var(--papel); }

.tabular { font-variant-numeric: tabular-nums; }

.solo-lectores {
	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-contenido {
	position: absolute;
	left: var(--margen);
	top: -100px;
	z-index: 100;
	padding: 12px 16px;
	background: var(--rojo);
	color: var(--papel);
	font-weight: 700;
}
.saltar-contenido:focus { top: 8px; color: var(--papel); }

/* ---------- Tipografía de roles ---------- */

.etiqueta {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--tracking-etiqueta);
	text-transform: uppercase;
	line-height: 1.3;
}
.etiqueta--peq { font-size: 12px; }
.etiqueta--bloque { font-size: 14px; font-weight: 800; }
.etiqueta--roja { color: var(--rojo); }

.antetitulo {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
}
.antetitulo--peq { font-size: 12px; gap: 4px 10px; }
.antetitulo__seccion { color: var(--rojo); }
.antetitulo__fecha {
	color: var(--gris);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.titulo-pagina {
	font-weight: 800;
	font-size: var(--fs-h1);
	line-height: 0.95;
	letter-spacing: -0.035em;
}
.titulo-poster {
	font-weight: 900;
	font-size: var(--fs-poster);
	line-height: 0.95;
	letter-spacing: -0.035em;
}
.titulo-bloque {
	font-weight: 800;
	font-size: var(--fs-h2);
	line-height: 1;
	letter-spacing: -0.03em;
}
.titulo-tarjeta {
	font-weight: 700;
	font-size: var(--fs-h3);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}
.entradilla {
	font-size: var(--fs-entradilla);
	line-height: 1.45;
	color: var(--texto-2);
}
.meta {
	font-size: var(--fs-meta);
	color: var(--gris);
}

/* ---------- Fotografía: regla mixta ---------- */

.foto {
	position: relative;
	overflow: hidden;
	background: var(--placeholder);
}
.foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.foto--retrato { background: var(--placeholder-2); }
/* Actualidad (noticias, actos, galerías): blanco y negro por CSS. */
.foto--actualidad img { filter: var(--filtro-bn); }
/* Personas: a color (sin filtro). */

.foto--16x9 { aspect-ratio: 16 / 9; }
.foto--21x9 { aspect-ratio: 21 / 9; }
.foto--3x2  { aspect-ratio: 3 / 2; }
.foto--4x3  { aspect-ratio: 4 / 3; }
.foto--4x5  { aspect-ratio: 4 / 5; }
.foto--1x1  { aspect-ratio: 1; }

/* ---------- Estructura de página ---------- */

.seccion {
	padding: var(--seccion-y) var(--margen);
}
.cabecera-bloque {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: clamp(16px, 2cqi, 28px);
}
.cabecera-bloque__enlace { font-size: 14px; font-weight: 600; }
.cuerpo-bloque {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hueco);
	border-top: var(--regla);
	padding-top: clamp(20px, 2.4cqi, 32px);
}

/* Contenido provisional: solo lo ve resaltado quien ha iniciado sesión. */
.logged-in .provisional { background: var(--seleccion); color: var(--tinta); }

/* Zona táctil de al menos 44px en enlaces de texto pequeños, sin cambiar su aspecto. */
.toque-amplio { position: relative; }
.toque-amplio::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }