/* ==========================================================================
   Aiseguros — Cabecera de subpágina
   Referencia: docs/referencias/Miga de pan.png
   ========================================================================== */

.aiseg-ph {
	--aiseg-ph-overlay: 0.70;
	--aiseg-ph-min: 380px;
	/* Punto de interés vertical de la foto. La banda visible es una franja
	   estrecha de la imagen (ver `.aiseg-ph__img`), así que el encuadre por
	   defecto rara vez acierta: se ajusta por página desde Elementor. */
	--aiseg-ph-focus-y: 50%;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--aiseg-ph-min);
	/* El header flota sobre la cabecera: se compensa con relleno superior para
	   que el título no quede debajo de la barra del menú. */
	padding: clamp(120px, 13vw, 150px) clamp(16px, 4vw, 40px) clamp(48px, 6vw, 72px);
	overflow: hidden;
	background-color: var(--aiseguros-color-dark, #04304a);
	text-align: center;
}

/* ⚠️ `.aiseg-ph .aiseg-ph__img` y no `.aiseg-ph__img` a secas: Elementor trae
   `.elementor img { height: auto }` con especificidad 0-1-1, que le gana a una
   sola clase. Con `height: auto` la foto usaba su proporción natural en vez de
   llenar la cabecera: a 1440px sobresalía por casualidad y al estrechar dejaba
   la franja navy al descubierto (a 390px faltaban 266px). */
.aiseg-ph .aiseg-ph__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * ⚠️ Las fotos son casi cuadradas (1000×900) y la cabecera es una franja de
	 * ~3.4:1: sólo se ve un TERCIO del alto de la imagen. Centrarla corta
	 * cabezas y deja fuera lo que da sentido a la foto.
	 */
	object-position: 50% var(--aiseg-ph-focus-y, 50%);
}

/* Velo con tinte de marca: la foto es de stock y el degradado la integra. */
.aiseg-ph__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	/*
	 * El velo es MÁS CLARO ARRIBA, que es donde la foto puede respirar, y se
	 * cierra hacia abajo, que es donde caen el título y la miga de pan.
	 * Los topes están calculados para que el texto blanco mantenga 4.5:1
	 * incluso sobre una zona blanca de la foto: por debajo de 0.62 de opacidad
	 * la miga (texto pequeño) deja de cumplir.
	 */
	background:
		linear-gradient(
			to bottom,
			rgba(4, 48, 74, calc(var(--aiseg-ph-overlay) * 0.62)) 0%,
			rgba(4, 48, 74, calc(var(--aiseg-ph-overlay) * 0.92)) 42%,
			rgba(4, 48, 74, var(--aiseg-ph-overlay)) 100%
		),
		radial-gradient(ellipse at 70% 20%, rgba(74, 179, 231, 0.28) 0%, rgba(74, 179, 231, 0) 62%);
	pointer-events: none;
}

.aiseg-ph__inner {
	position: relative;
	z-index: 2;
	max-width: 820px;
}

.aiseg-ph .aiseg-ph__title {
	margin: 0;
	color: var(--aiseguros-color-white, #FFFFFF);
	font-size: clamp(2.1rem, 5vw, 3.5rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.aiseg-ph__subtitle {
	margin: 16px auto 0;
	max-width: 640px;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	line-height: 1.6;
}

/* ==========================================================================
   Miga de pan
   ========================================================================== */

.aiseg-ph__crumbs {
	margin-top: clamp(18px, 2.5vw, 26px);
}

.aiseg-ph__crumbs ol {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 9px 18px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--aiseguros-border-radius-pill, 999px);
	/*
	 * ⚠️ SIN `backdrop-filter`. Aquí el fondo que habría que desenfocar es la
	 * FOTO de la cabecera, y no existe hasta que la imagen carga: la píldora
	 * se veía transparente y, segundos después, el navegador componía el
	 * desenfoque de golpe. Ese trabajo tardío es lo que frenaba el scroll una
	 * sola vez por carga.
	 *
	 * El velo ya oscurece la foto, así que un fondo translúcido plano da el
	 * mismo aspecto de cristal, se pinta con el resto y no cuesta nada.
	 */
	background: rgba(4, 48, 74, 0.46);
	list-style: none;
	font-size: 0.86rem;
	font-weight: 600;
}

.aiseg-ph__crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--aiseguros-color-white, #FFFFFF);
}

/* Separador entre niveles.
   ⚠️ `flex-shrink: 0` es imprescindible: el separador es un item flex y, cuando
   el último nivel es un titular largo que no cabe, el navegador lo encoge hasta
   0px y el punto desaparece sin más. */
.aiseg-ph__crumbs li + li::before {
	content: "";
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
}

.aiseg-ph__crumbs a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	transition: color var(--aiseg-dur-base, 300ms) var(--aiseg-ease-out, ease);
}

.aiseg-ph__crumbs a:hover,
.aiseg-ph__crumbs a:focus-visible {
	color: var(--aiseguros-color-secondary, #4ab3e7);
}

.aiseg-ph__crumbs svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.aiseg-ph__crumbs a {
		transition: none;
	}
}

/*
 * Pantallas BAJAS: con 380px fijos la cabecera ocupaba el 97% de un móvil en
 * horizontal —sólo se veía la foto, con el título 10px por debajo del borde y
 * la miga de pan 140—. Se recorta para que quepan título y ruta.
 */
@media (max-height: 500px) {
	/*
	 * ⚠️ Relleno superior PEQUEÑO, no el de la cabecera. En páginas internas el
	 * menú NO flota sobre esta sección: va en el flujo y ya la empuja hacia
	 * abajo. Reservar aquí su alto lo sumaba dos veces —la sección empezaba en
	 * 115 y el título en 281—, y la miga de pan acababa 52px por debajo del
	 * borde de la pantalla.
	 */
	.aiseg-ph {
		--aiseg-ph-min: 0px;
		padding-top: 26px;
		padding-bottom: 26px;
	}

	.aiseg-ph .aiseg-ph__title {
		font-size: clamp(1.5rem, 4vw, 2rem);
	}

	.aiseg-ph__subtitle {
		font-size: 0.92rem;
	}
}