/* =====================================================================
   Página genérica (page.php): portada del sistema B (desvanecida con foto
   o clara con patrón) y el contenido del editor en una medida de lectura.
   Las páginas con diseño propio agregan paginas/pagina-{slug}.css.
   ===================================================================== */

.cta-pagina-hero.cta-hero--clara {
	padding-bottom: 48px;
}
@media (min-width: 1024px) {
	.cta-pagina-hero.cta-hero--clara {
		justify-content: flex-start;
		padding-top: calc(var(--alto-header) + 52px);
		padding-bottom: 64px;
	}
}

.cta-pagina-cuerpo {
	position: relative;
	background: var(--fondo);
}
.cta-pagina-cuerpo .cta-contenido-pagina {
	padding-bottom: calc(var(--seccion-y) + 8px);
	font-size: 17px;
	line-height: 1.8;
}
.cta-pagina-cuerpo .cta-contenido-pagina > .cta-seccion + .cta-seccion {
	margin-top: 0;
}
.cta-pagina-cuerpo .cta-contenido-pagina .cta-seccion--texto h2,
.cta-pagina-cuerpo .cta-prosa > h2:not([class]) {
	font-size: clamp(26px, 2.8vw, 36px);
	line-height: 1.15;
}
.cta-pagina-cuerpo .cta-contenido-pagina .cta-seccion h3 {
	margin-top: 1.2em;
	font-size: 20px;
	letter-spacing: -0.01em;
	line-height: 1.25;
	font-weight: 700;
}
.cta-paginas-internas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--e-7);
	font-weight: 600;
}
.cta-paginas-internas a,
.cta-paginas-internas > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1.5px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	text-decoration: none;
}
@media (max-width: 767px) {
	.cta-pagina-cuerpo .cta-contenido-pagina {
		padding-top: 40px;
		font-size: 16px;
	}
}

/* <pantallas-grandes> Decisión 106 (19-oct-2026): desde 1440 px las medidas fijas
   de esta hoja crecen con la pantalla (× --u, tokens.css; ARQUITECTURA.md §3).
   GENERADO por herramientas/pantallas-grandes.py a partir de lo de arriba:
   no se edita a mano; después de cambiar la hoja, correr el script. Los
   ajustes propios de pantallas grandes van después de la marca de cierre. */
@media (min-width: 1440px) {
	.cta-pagina-hero.cta-hero--clara {
		padding-bottom: calc(48 * var(--u));
	}
	.cta-pagina-hero.cta-hero--clara {
		padding-top: calc(var(--alto-header) + calc(52 * var(--u)));
		padding-bottom: calc(64 * var(--u));
	}
	.cta-pagina-cuerpo .cta-contenido-pagina {
		padding-bottom: calc(var(--seccion-y) + calc(8 * var(--u)));
		font-size: calc(17 * var(--u));
	}
	.cta-pagina-cuerpo .cta-contenido-pagina .cta-seccion--texto h2,
	.cta-pagina-cuerpo .cta-prosa > h2:not([class]) {
		font-size: clamp(calc(26 * var(--u)), 2.8vw, calc(36 * var(--u)));
	}
	.cta-pagina-cuerpo .cta-contenido-pagina .cta-seccion h3 {
		font-size: calc(20 * var(--u));
	}
	.cta-paginas-internas {
		gap: calc(8 * var(--u));
	}
	.cta-paginas-internas a,
	.cta-paginas-internas > span {
		min-width: calc(44 * var(--u));
		min-height: calc(44 * var(--u));
		padding: 0 calc(12 * var(--u));
	}
}
/* </pantallas-grandes> */