/* ==========================================================================
   Páginas: Testimonios, San Agustín, León XIV, Nosotros, Sala de prensa
   ========================================================================== */

/* ---------- Piezas comunes ---------- */

.cabecera-pagina--regla { border-bottom: var(--regla); }

/* Bloque partido (texto + imagen) con regla vertical de 2px. La regla va
   arriba y a la izquierda del segundo elemento, desplazada 2px: al apilarse,
   la vertical queda recortada y se ve la horizontal. Sin puntos de corte. */
.partido {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	border-bottom: var(--regla);
}
.partido > .partido__segundo {
	margin: -2px 0 0 -2px;
	border-top: var(--regla);
	border-left: var(--regla);
}

.lista-reglada { border-top: var(--regla); }
.lista-reglada > li,
.lista-reglada > a,
.lista-reglada > div { border-bottom: var(--regla-fina); }

.seccion--hueso { background: var(--hueso); border-top: var(--regla); }
.seccion--regla-arriba { border-top: var(--regla); }

.cabecera-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: clamp(20px, 2.4cqi, 32px);
}
.cabecera-lista--base { align-items: baseline; margin-bottom: 20px; }
.titulo-bloque--mb { margin-bottom: clamp(20px, 2.4cqi, 32px); }

.cta-roja {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	align-items: flex-end;
	justify-content: space-between;
	padding: clamp(32px, 4cqi, 56px) var(--margen);
	background: var(--rojo);
	color: var(--papel);
}
.cta-roja__texto { flex: 1 1 480px; display: flex; flex-direction: column; gap: 12px; }
.cta-roja__titulo { font-weight: 800; font-size: clamp(30px, 3.6cqi, 52px); line-height: 1; letter-spacing: -0.03em; }
.cta-roja__parrafo { font-size: 17px; max-width: 56ch; }

.enlace-subrayado {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
	font-size: var(--fs-ui);
}
.enlace-subrayado > span { box-shadow: inset 0 -2px 0 var(--rojo); padding-bottom: 2px; }

.hueco-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--gris-borde-oscuro);
	font-size: 11px;
	color: var(--gris);
}

/* ---------- Testimonios ---------- */

.serie-bloque { background: var(--hueso); }
.serie-bloque__foto { flex: 1 1 440px; min-height: 360px; }
.serie-bloque__foto.foto { aspect-ratio: auto; }
.serie-bloque__texto {
	flex: 1 1 440px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(28px, 4cqi, 56px) var(--margen);
}
.serie-bloque__titulo { font-weight: 800; font-size: clamp(36px, 4.2cqi, 64px); line-height: 0.95; letter-spacing: -0.035em; }
.serie-bloque__parrafo { max-width: 52ch; font-size: 17px; line-height: 1.5; color: var(--texto-2); }

.episodios { margin-top: 8px; }
.episodios a {
	display: flex;
	gap: 16px;
	align-items: baseline;
	min-height: 44px;
	padding: 12px 0;
}
.episodios__num { flex: none; width: 24px; font-weight: 800; font-size: 14px; color: var(--rojo); font-variant-numeric: tabular-nums; }
.episodios__titulo { flex: 1; font-weight: 700; font-size: 17px; line-height: 1.25; }
.episodios__lugar { flex: none; font-size: 13px; color: var(--gris); }
.episodios a:hover .episodios__lugar { color: var(--rojo); }

.testimonios-listado { padding: clamp(28px, 3.5cqi, 52px) var(--margen) clamp(40px, 5cqi, 72px); }
.rejilla-testimonios {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: clamp(28px, 3cqi, 40px) clamp(20px, 2.4cqi, 32px);
}
.tarjeta-testimonio-grande {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 16px;
	border-top: var(--regla);
}
.tarjeta-testimonio-grande__foto { position: relative; }
.tarjeta-testimonio-grande__formato {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 5px 9px;
	background: var(--tinta);
	color: var(--papel);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}
.tarjeta-testimonio-grande__pais { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rojo); }
.tarjeta-testimonio-grande__titulo { font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; }
.tarjeta-testimonio-grande__meta { font-size: 14px; color: var(--gris); }

/* Ficha de testimonio */
.testimonio-ficha { display: flex; flex-direction: column; gap: 16px; }
.testimonio-ficha dl { border-top: var(--regla); }
.testimonio-ficha dl > div { display: flex; gap: 16px; padding: 10px 0; border-bottom: var(--regla-fina); font-size: 14px; }
.testimonio-ficha dt { flex: none; width: 80px; color: var(--gris); }
.testimonio-ficha dd { font-weight: 600; }
.testimonio-video { aspect-ratio: 16 / 9; background: var(--tinta); }
.testimonio-video iframe { width: 100%; height: 100%; border: 0; }

/* ---------- San Agustín ---------- */

.apertura-texto {
	flex: 1.3 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	justify-content: flex-end;
	padding: clamp(32px, 4cqi, 64px) var(--margen);
}
.apertura-titulo { font-weight: 800; font-size: clamp(40px, 5.6cqi, 92px); line-height: 0.95; letter-spacing: -0.035em; }
.apertura-imagen { flex: 1 1 360px; min-height: 380px; }
.apertura-imagen.foto { aspect-ratio: auto; }

.dos-columnas {
	display: flex;
	flex-wrap: wrap;
	gap: 32px clamp(32px, 5cqi, 80px);
	padding: var(--seccion-y) var(--margen);
}
.dos-columnas__titulo { flex: 0 1 280px; }
.texto-largo {
	flex: 1 1 520px;
	min-width: 0;
	max-width: 760px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	font-size: var(--fs-cuerpo);
	line-height: 1.6;
	color: var(--texto-cuerpo);
}
.texto-largo > * { margin: 0; }
.texto-largo a { box-shadow: inset 0 -1px 0 var(--rojo); }

.claves { border-top: var(--regla); border-bottom: var(--regla); }
.claves__cabecera { padding: clamp(24px, 3cqi, 40px) var(--margen) 0; }
.claves__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	padding: clamp(20px, 2.4cqi, 32px) var(--margen) clamp(32px, 4cqi, 56px);
}
.clave {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-right: clamp(0px, 2cqi, 28px);
	padding: 24px clamp(0px, 2cqi, 28px) 24px 0;
	border-top: var(--regla);
}
.clave__num { font-weight: 900; font-size: 48px; line-height: 1; letter-spacing: -0.04em; color: var(--rojo); }
.clave__titulo { font-weight: 800; font-size: clamp(26px, 2.4cqi, 34px); line-height: 1; letter-spacing: -0.025em; }
.clave__cita { font-weight: 600; font-size: 18px; line-height: 1.35; }
.clave__fuente { font-size: 13px; color: var(--gris); }
.clave__texto { font-size: 16px; color: var(--texto-2); }

/* ---------- San Agustín · Etapas con imagen (pestañas) ---------- */

.etapas { border-top: var(--regla); }
.etapas__cabecera {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(24px, 3cqi, 40px) var(--margen) 0;
}
.etapas__intro {
	max-width: 34ch;
	font-weight: 700;
	font-size: clamp(24px, 2.6cqi, 40px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}
.etapas__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(24px, 4cqi, 72px);
	align-items: start;
	padding: clamp(24px, 3cqi, 40px) var(--margen) clamp(40px, 5cqi, 72px);
}
.etapas__lista { display: flex; flex-direction: column; border-top: var(--regla-fina); }
.etapa-pestana {
	display: flex;
	align-items: baseline;
	gap: 16px;
	width: 100%;
	min-height: 44px;
	padding: 18px 0;
	border: 0;
	border-bottom: var(--regla-fina);
	background: none;
	color: var(--texto-2);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: color var(--transicion), box-shadow var(--transicion);
}
.etapa-pestana__num {
	flex: none;
	min-width: 2ch;
	font-weight: 900;
	font-size: 28px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--gris-claro);
	transition: color var(--transicion);
}
.etapa-pestana__textos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.etapa-pestana__cuando,
.etapa-panel__cuando {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: var(--tracking-etiqueta);
	text-transform: uppercase;
	color: var(--gris);
}
.etapa-pestana__titulo { font-weight: 800; font-size: clamp(20px, 1.8cqi, 26px); line-height: 1.1; letter-spacing: -0.02em; }
.etapa-pestana:hover,
.etapa-pestana.is-activa { color: var(--tinta); }
.etapa-pestana:hover .etapa-pestana__num { color: var(--tinta); }
.etapa-pestana.is-activa { box-shadow: inset 0 -3px 0 var(--rojo); }
.etapa-pestana.is-activa .etapa-pestana__num { color: var(--rojo); }
.etapa-pestana:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

.etapas__paneles { position: sticky; top: 24px; }
.etapa-panel { display: flex; flex-direction: column; gap: 20px; }
.etapa-panel__figura { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.etapa-panel__pie { font-size: 13px; color: var(--gris); }
/* Imagen panorámica para dejar sitio al texto; se encuadra la parte alta del cuadro (las caras). */
.etapa-panel__foto img { object-position: 50% 18%; }
.etapa-panel__cuerpo { display: flex; flex-direction: column; gap: 10px; }
.etapa-panel__titulo { font-weight: 800; font-size: clamp(24px, 2.2cqi, 32px); line-height: 1.05; letter-spacing: -0.025em; }
.etapa-panel__texto { max-width: 62ch; font-size: 17px; line-height: 1.6; color: var(--texto-2); }
.etapa-panel__texto p + p { margin-top: 12px; }

/* Con JavaScript y en escritorio: solo la etapa activa, que aparece con un fundido.
   La fecha y el título ya están en la pestaña: en el panel solo los leen los lectores de pantalla. */
@container (min-width: 900px) {
	.etapas--js .etapa-panel:not(.is-activa) { display: none; }
	.etapas--js .etapa-panel.is-activa { animation: etapas-aparecer .35s ease; }
	.etapas--js .etapa-panel__cuando,
	.etapas--js .etapa-panel__titulo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}
@keyframes etapas-aparecer { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.etapas--js .etapa-panel.is-activa { animation: none; }
}

/* Móvil: sin pestañas, todas las etapas seguidas. */
@container (max-width: 899.98px) {
	.etapas__cuerpo { grid-template-columns: 1fr; }
	.etapas__lista { display: none; }
	.etapas__paneles { position: static; display: flex; flex-direction: column; gap: 40px; }
}

.pares > div {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	padding: 24px 0;
}
.par { flex: 1 1 380px; display: flex; flex-direction: column; gap: 6px; }
.par__quien { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.par--papa .par__quien { color: var(--rojo); }
.par__frase--papa { font-weight: 700; font-size: clamp(20px, 1.8cqi, 26px); line-height: 1.2; }
.par__frase--agustin { font-size: clamp(18px, 1.5cqi, 21px); line-height: 1.35; color: var(--texto-2); }
.par__fuente { font-size: 13px; color: var(--gris); }

.descargas > a {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
	min-height: 44px;
	padding: 16px 0;
}
.descargas__titulo { flex: 1 1 300px; font-weight: 700; font-size: 18px; }
.descargas__tipo { width: 200px; font-size: 14px; color: var(--gris); }
.descargas__accion { display: flex; gap: 8px; font-weight: 700; font-size: 14px; }
.descargas > a:hover .descargas__tipo { color: var(--rojo); }
.cabecera-lista__apoyo { font-size: 15px; color: var(--texto-2); }

/* ---------- León XIV ---------- */

.apertura-retrato-figura { position: relative; display: flex; flex: 1 1 360px; margin: 0; }
.apertura-retrato { flex: 1 1 auto; min-height: 420px; }
/* Crédito sobre la foto, abajo a la derecha. */
.credito-foto {
	position: absolute;
	right: 12px;
	bottom: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
	pointer-events: none;
}
.apertura-retrato.foto { aspect-ratio: auto; }
.apertura-texto--leon { justify-content: space-between; gap: 20px; }
.apertura-texto__arriba { display: flex; flex-direction: column; gap: 16px; }
.apertura-texto__entradilla { max-width: 46ch; font-size: clamp(18px, 1.5cqi, 21px); color: var(--texto-2); }

.ficha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	border-top: var(--regla);
}
.ficha > div { padding: 14px 16px 14px 0; border-bottom: var(--regla-fina); }
.ficha dt { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.ficha dd { margin-top: 4px; font-weight: 700; font-size: 18px; }

.cronologia > li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 32px;
	align-items: baseline;
	padding: 18px 0;
}
.cronologia__anio { flex: none; width: 120px; font-weight: 800; font-size: clamp(22px, 2cqi, 28px); letter-spacing: -0.02em; color: var(--rojo); font-variant-numeric: tabular-nums; }
.cronologia__lugar { flex: none; width: 150px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.cronologia__texto { flex: 1 1 320px; font-size: 18px; line-height: 1.4; }
.cronologia__vacia { padding: 18px 0; color: var(--gris); }

.pie-dos { display: flex; flex-wrap: wrap; overflow: hidden; border-top: var(--regla); }
.pie-dos__col {
	flex: 1 1 420px;
	min-width: 0;
	padding: clamp(32px, 4cqi, 56px) var(--margen);
}
.pie-dos__col + .pie-dos__col { margin: -2px 0 0 -2px; border-top: var(--regla); border-left: var(--regla); }
.pie-dos__lema { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.pie-dos__docs { display: flex; flex-direction: column; gap: 16px; }
.escudo { flex: none; width: 160px; min-height: 190px; background: var(--hueso); }
.escudo img { width: 100%; height: 190px; object-fit: contain; }
.escudo:has(img) { background: none; } /* el gris solo marca el hueco cuando aún no hay escudo */
.escudo__credito { margin-top: 8px; font-size: 11px; line-height: 1.4; color: var(--gris); text-align: center; }
.escudo__credito a { color: inherit; text-decoration: underline; }
.lema__texto { flex: 1 1 220px; display: flex; flex-direction: column; gap: 12px; }
.titulo-medio { font-weight: 800; font-size: clamp(26px, 2.6cqi, 36px); line-height: 1; letter-spacing: -0.025em; }
.lema__parrafo { font-size: 17px; color: var(--texto-2); }

.documentos > a { display: flex; justify-content: space-between; gap: 16px; min-height: 44px; padding: 14px 0; }
.documentos__detalle { display: block; font-size: 14px; color: var(--gris); }
.documentos__flecha { flex: none; font-weight: 700; }

/* ---------- Nosotros ---------- */

.apertura-roja {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(36px, 5cqi, 80px) var(--margen);
	background: var(--rojo);
	color: var(--papel);
}
.apertura-roja__titulo { font-weight: 900; font-size: clamp(48px, 8cqi, 132px); line-height: 0.88; letter-spacing: -0.045em; }

.nosotros-proyecto { border-bottom: var(--regla); }
.indice {
	flex: 0 1 240px;
	align-self: flex-start;
	position: sticky;
	top: 16px;
	display: flex;
	flex-direction: column;
	border-top: var(--regla);
	font-weight: 700;
	font-size: var(--fs-ui);
}
/* Cuando el índice pasa encima del texto (pantallas estrechas) deja de ser fijo: si no, tapa el texto. */
@container (max-width: 919.98px) {
	.indice { position: static; }
}
.indice a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; border-bottom: var(--regla-fina); }
.indice a[aria-current="true"] { color: var(--rojo); }
.texto-largo--proyecto { font-size: clamp(19px, 1.5cqi, 22px); line-height: 1.55; }
.texto-largo--proyecto > p:first-child {
	font-weight: 700;
	font-size: clamp(24px, 2.4cqi, 34px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--tinta);
}
[id] { scroll-margin-top: 16px; }

.generales { display: flex; flex-wrap: wrap; gap: var(--hueco); }
.general {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding-top: 20px;
	border-top: var(--regla);
}
.general__foto { flex: 0 0 180px; height: 220px; }
.general__foto.foto { aspect-ratio: auto; }
.general__texto { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; }
.general__cargo { font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-etiqueta); text-transform: uppercase; color: var(--rojo); }
.general__nombre { font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; }
.general__saludo { font-size: 16px; color: var(--texto-2); }
.general__texto .enlace-flecha { margin-top: auto; }

.ordenes__cabecera {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: clamp(20px, 2.4cqi, 32px);
}
.ordenes__texto { flex: 0 1 460px; font-size: 16px; color: var(--texto-2); }
.ordenes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	border-top: var(--regla);
}
.orden { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 24px 0; border-bottom: var(--regla-fina); }
.orden__sigla { font-weight: 900; font-size: 36px; line-height: 1; letter-spacing: -0.03em; color: var(--rojo); }
.orden__nombre { font-size: 19px; line-height: 1.2; }
.orden__dato { font-size: 14px; color: var(--gris); }

/* ---------- Sala de prensa ---------- */

.oficinas { display: flex; flex-wrap: wrap; overflow: hidden; border-bottom: var(--regla); }
.oficina {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: -2px 0 0 -2px;
	padding: clamp(28px, 3cqi, 44px) var(--margen);
	border-top: var(--regla);
	border-left: var(--regla);
}
.oficina__cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.oficina__nombre { display: flex; flex-direction: column; gap: 6px; }
.oficina__titulo { font-weight: 800; font-size: clamp(24px, 2.4cqi, 32px); line-height: 1.05; letter-spacing: -0.02em; }
.oficina__logo { flex: none; width: 88px; height: 56px; }
.oficina__logo img { width: 100%; height: 100%; object-fit: contain; }
.contacto { border-top: var(--regla); }
.contacto > div { display: flex; gap: 16px; padding: 12px 0; border-bottom: var(--regla-fina); }
.contacto dt { flex: none; width: 100px; font-size: 14px; color: var(--gris); }
.contacto dd { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.oficina .boton { align-self: flex-start; min-width: 240px; }

.notas > a {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 32px;
	align-items: baseline;
	min-height: 44px;
	padding: 18px 0;
}
.notas__fecha { flex: none; width: 120px; font-size: 14px; color: var(--gris); font-variant-numeric: tabular-nums; }
.notas__titulo { flex: 1 1 360px; font-weight: 700; font-size: 19px; line-height: 1.25; }
.notas__orden { min-width: 60px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rojo); }
.notas__accion { font-weight: 700; font-size: 14px; }

.materiales {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	border-top: var(--regla);
}
.material { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 18px 0; border-bottom: var(--regla-fina); }
.material__titulo { font-size: 18px; }
.material__detalle { font-size: 14px; color: var(--gris); }
.material:hover .material__detalle { color: var(--rojo); }

.vacio-provisional { padding: 18px 0; color: var(--gris); }