/* ==========================================================================
   aq-hero — bloque de gran altura con imagen de fondo + overlay.
   Componente compartido por el Hero principal (--home, Fase 4.1) y el
   Banner interior (--interior, Fase 5.1): es EL MISMO componente con
   modificador, no dos copias (así lo pide el plan §02/§11).

   Foto: hasta la Fase 7, era assets/img/banner.avif fija en la base
   .aq-hero (Fase 7, Etapa B: subida ahí para que --home y --interior la
   compartieran sin duplicar la ruta). Desde la Pasada 2 de la Fase 8,
   el background-image lo pone el atributo style="" en línea, armado
   por aquila_background_style() (inc/imagenes.php) desde el campo ACF
   de imagen de cada variante (aq_hero_imagen / aq_banner_imagen) — la
   declaración fija se sacó de acá a propósito: si se dejaba, quedaba
   como una imagen fantasma en cuanto el campo estuviera vacío (nunca
   se vería el estado "sin imagen", ni se podría cambiar de foto de
   verdad desde el admin). background-size y background-position SE
   QUEDAN: son el resto del encuadre (aquila_background_style() también
   los pone en línea, pero estos son el respaldo si el helper no
   imprime nada por algún motivo). El color de fondo de .aq-hero queda
   como respaldo adicional: se ve mientras la imagen carga o si no hay
   ninguna cargada.

   El overlay SÍ es compartido por las dos variantes (mecanismo único,
   Fase 7.3): un degradado, no un tinte plano. rgba(0,0,0,.35) uniforme
   alcanzaba a duras penas con .aq-hero__lead y sobraba con el H1, pero
   fallaba el contraste exacto donde vive el texto (esquina inferior
   izquierda, por el `justify-content: flex-end`) contra una foto con
   cielo/luces claras. El degradado concentra el oscurecimiento donde
   está el texto y deja el resto de la foto más visible — ver el
   registro de tareas.md, Fase 7.3, para las mediciones de contraste
   (percentil 95 de luminancia, no el píxel más claro ni el promedio)
   contra la foto real que motivaron los valores exactos de abajo.

   El header es fijo (Fase 3): el hero compensa su altura con
   padding-top: var(--aq-header-height), y no con margin, para que el
   fondo del hero seguir ocupando esa franja detrás del header.
   ========================================================================== */

.aq-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	padding-top: var(--aq-header-height);
	background-color: var(--aq-black);
	background-size: cover;
	background-position: center;
	color: var(--aq-white);
	/* Punto focal en móvil sin revisar todavía (pendiente desde la
	   Fase 4.1, ver tareas.md): "center" es un valor de partida
	   razonable para un contrapicado sin horizonte que recortar, no
	   una posición verificada a 375px. Aplica a las dos variantes por
	   igual desde Fase 7 (Etapa B): --interior pasó a compartir la
	   misma foto, mismo mecanismo que el overlay y los tokens de abajo. */

	/* El hero es, en los hechos, un tema oscuro (como .aq-section--dark)
	   pero no usa esa clase porque no es una banda con container simple:
	   redefine los mismos tokens semánticos por la misma razón — si no,
	   el H1 hereda --bs-heading-color oscuro de tokens.css y desaparece
	   sobre este fondo. */
	--aq-text: var(--aq-white);
	--aq-heading: var(--aq-white);
	--bs-heading-color: var(--aq-white);
}

/* Overlay — degradado compartido por --home y --interior (Fase 7.3).
   "to top": el primer stop es la base del bloque (donde vive el
   texto, por el `justify-content: flex-end` de .aq-hero) y el último
   es el borde superior. Pesado abajo, casi transparente arriba: oscurece
   solo donde hace falta para el contraste del texto y conserva mucho
   más de la fotografía que un tinte plano sobre todo el bloque. */
.aq-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: 
	linear-gradient(
		to top,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.05) 100%
	),
	linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.05) 100%
	);

	z-index: var(--aq-z-overlay);
}

/* El contenido va sobre el overlay */
.aq-hero__content {
	position: relative;
	z-index: 2;
}

/* text-wrap: balance reparte el texto entre líneas de forma más pareja
   que el ajuste normal (evita, por ejemplo, una última línea con una
   sola palabra huérfana). Es agnóstico al contenido: no depende de esta
   cadena exacta, así que sigue funcionando si el titular cambia vía ACF
   — a diferencia de un max-width afinado a mano. Los navegadores que no
   lo soportan simplemente lo ignoran y ajustan normal. Solo en el H1
   del hero/banner interior, no en los H2 de sección. */
.aq-hero__title {
	margin-bottom: var(--aq-space-4);
	text-wrap: balance;
}

.aq-hero__lead {
	margin-bottom: var(--aq-space-6);
	max-width: 36rem;
}

/* --------------------------------------------------------------------
   Variante --home (Hero principal, Fase 4.1)
   "Aparenta cercano a pantalla completa": min-height 100vh calza justo
   porque el header es fixed y no ocupa espacio en el flujo — el hero
   arranca en y=0, igual que el header.
   -------------------------------------------------------------------- */
.aq-hero--home {
	min-height: 100vh;
	padding-bottom: var(--aq-space-9);
}

/* --------------------------------------------------------------------
   Variante --interior (Banner interior, Fase 5.1)
   "Altura aproximadamente la mitad" del hero (plan §11): min-height en
   vh, no en rem, para que siga siendo relativo al viewport igual que
   --home. Escala progresiva por breakpoint (más bajo en mobile, más
   alto desde lg) — medida propia de implementación, no de marca, mismo
   criterio que --aq-icon-circle-size en la Fase 2.3.

   Con una caja tan baja, el padding-top: var(--aq-header-height) que
   compensa el header fijo (heredado de .aq-hero) pesa mucho más como
   proporción del alto total que en --home — se verificó con Chrome en
   los tres breakpoints que el H1 nunca queda debajo del header ni
   pegado a él (ver tareas.md, registro de decisiones Fase 5.1).
   -------------------------------------------------------------------- */
.aq-hero--interior {
	min-height: 45vh;
	padding-bottom: var(--aq-space-6);
}

@media (min-width: 768px) {
	.aq-hero--interior {
		min-height: 50vh;
	}
}

@media (min-width: 1200px) {
	.aq-hero--interior {
		min-height: 55vh;
	}
}