/* ================================================================
   ENCABEZADOS FOTOGRÁFICOS · Azul FM + Turquesa
   Una sola capa institucional para Inicio y páginas interiores.
   ================================================================ */

:root {
	--ci-header-blue-rgb: 19, 139, 186;
	--ci-header-turquoise-rgb: 0, 189, 209;
}

/* Evita el destello oscuro mientras se descarga la fotografía. */
body .ci-hero,
body .ci-page-hero {
	background-color: rgb(var(--ci-header-blue-rgb)) !important;
}

/*
 * Azul más sólido detrás del texto y transición limpia hacia Turquesa.
 * No se mezcla negro, gris ni verde oscuro sobre la fotografía.
 */
body.elementor-page .ci-hero::before,
body.home.elementor-page .ci-hero::before,
body .ci-page-hero::before,
body .ci-page--familia .ci-page-hero::before,
body .ci-page--programas .ci-page-hero::before {
	background: linear-gradient(
		104deg,
		rgba(var(--ci-header-blue-rgb), .86) 0%,
		rgba(var(--ci-header-blue-rgb), .72) 38%,
		rgba(var(--ci-header-turquoise-rgb), .48) 70%,
		rgba(var(--ci-header-turquoise-rgb), .22) 100%
	) !important;
}

/* En pantallas estrechas el color cubre toda la foto para proteger la lectura. */
@media (max-width: 767px) {
	body.elementor-page .ci-hero::before,
	body.home.elementor-page .ci-hero::before,
	body .ci-page-hero::before,
	body .ci-page--familia .ci-page-hero::before,
	body .ci-page--programas .ci-page-hero::before {
		background: linear-gradient(
			108deg,
			rgba(var(--ci-header-blue-rgb), .9) 0%,
			rgba(var(--ci-header-blue-rgb), .78) 48%,
			rgba(var(--ci-header-turquoise-rgb), .62) 100%
		) !important;
	}
}