/* ==========================================================================
   Header — fijo desde el inicio y para siempre (plan §01, D1).

   IMPORTANTE: nunca alternar `position` en scroll (nada de
   absolute → fixed). El header es `position: fixed` en todo momento;
   lo único que cambia con la clase `.is-scrolled` es el fondo y el
   color de texto, con transición suave. Ambos estados usan texto claro:
   la diferencia real es solo el fondo (transparente vs. negro).

   El JS que alterna `.is-scrolled` es la Fase 6.1. Aquí la clase se
   aplica manualmente (o vía las herramientas del navegador) para
   verificar el estado.

   El isotipo (águila) en SVG todavía no existe (ver
   assets/img/INVENTARIO.md): por ahora el logo es solo el logotipo en
   texto, en dos líneas.
   ========================================================================== */

.aq-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--aq-z-header);
	background-color: transparent;
	color: var(--aq-white);
	transition: background-color var(--aq-transition-base) var(--aq-ease);
}

.aq-header.is-scrolled {
	background-color: var(--aq-black);
	border-bottom: 1px solid var(--aq-gold-2);

}

.aq-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--aq-space-4);
	padding-block: var(--aq-space-4);
}

/* Desde `lg` el header queda un poco más alto (logo de dos líneas +
   nav + botón CONTACTO en una sola fila). Medido en Chrome headless en
   los tres breakpoints (Fase 3.3): 78px hasta `lg`, ~84px desde `lg`.
   Se corrige aquí el token compartido para que el padding-top del hero
   (Fase 4.1) nunca deje una franja tapada por el header. */
@media (min-width: 992px) {
	:root {
		--aq-header-height: 88px;
	}
}

/* --------------------------------------------------------------------
   Logotipo — dos líneas, serif. Es texto, no el isotipo (pendiente).
   -------------------------------------------------------------------- */
/* Familia, peso, letter-spacing y mayúsculas vienen de .aq-brand-wordmark
   (base/typography.css, aplicada en el HTML junto a esta clase); acá
   solo lo propio de este lugar: tamaño, interlineado (título en dos
   líneas) y el reseteo de color/decoración por ser un link. */
.aq-header__brand {
	display: block;
	font-size: 1.25rem;
	line-height: 1.15;
	color: inherit;
	text-decoration: none;
}

.aq-logo-header {
	display: block;
	width: 140px;
	height: auto;
}

/* --------------------------------------------------------------------
   Navegación de escritorio (se muestra desde `lg`, ver d-none d-lg-flex
   en el HTML)
   -------------------------------------------------------------------- */
.aq-header__nav {
	align-items: center;
	gap: var(--aq-space-6);
}

.aq-header__links {
	display: flex;
	align-items: center;
	gap: var(--aq-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Familia, tamaño, peso y mayúsculas vienen de .aq-caption-label
   (base/typography.css, aplicada en el HTML junto a esta clase); acá
   solo lo propio del link: posición, color y transición. */
.aq-header__link {
	position: relative;
	display: inline-block;
	padding-block: var(--aq-space-2);
	color: inherit;
	text-decoration: none;
	transition: color var(--aq-transition-fast) var(--aq-ease);
}

/* Hover no está definido en el diseño: dorado, coherente con el resto
   de los estados interactivos de la paleta (botones, ítem activo). */
.aq-header__link:hover {
	color: var(--aq-gold);
}

.aq-header__link.is-active {
	color: var(--aq-gold);
}

/* Indicador de ítem activo: subrayado dorado corto */
.aq-header__link.is-active::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1.25rem;
	height: 2px;
	background-color: var(--aq-gold);
	transform: translateX(-50%);
	width: 100%;
	
}

/* --------------------------------------------------------------------
   Toggler móvil — ícono propio, no el de Bootstrap (evita depender de
   las variables de .navbar, que no se usa aquí).
   -------------------------------------------------------------------- */
.aq-header__toggler {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
}

/* --------------------------------------------------------------------
   Menú móvil — offcanvas de Bootstrap, a pantalla completa, fondo
   oscuro. Se personaliza sobreescribiendo las variables --bs-offcanvas-*
   de la instancia, nunca la clase .offcanvas directamente.
   -------------------------------------------------------------------- */
.aq-mobile-menu {
	--bs-offcanvas-width: 100vw;
	--bs-offcanvas-bg: var(--aq-black);
	--bs-offcanvas-color: var(--aq-white);
	--bs-offcanvas-border-width: 0;
	--bs-offcanvas-padding-x: var(--aq-space-5);
	--bs-offcanvas-padding-y: var(--aq-space-5);
}

/* Familia, peso, letter-spacing y mayúsculas vienen de .aq-brand-wordmark
   (base/typography.css, aplicada en el HTML junto a esta clase); acá
   solo el tamaño propio de este lugar. */
.aq-mobile-menu__brand {
	font-size: 1.125rem;
}

.aq-mobile-menu__links {
	display: flex;
	flex-direction: column;
	gap: var(--aq-space-5);
	margin: 0 0 var(--aq-space-7);
	padding: 0;
	list-style: none;
}

.aq-mobile-menu__links .aq-header__link {
	font-size: var(--aq-fs-h4);
	font-family: var(--aq-font-serif);
	letter-spacing: 0;
	text-transform: none;
}

.aq-mobile-menu__links .aq-header__link.is-active::after {
	left: 0;
	transform: none;
}

/* El botón CONTACTO queda al final del panel (mt-auto en el HTML) */