/**
 * Header — nodo 1:184 del Figma.
 *
 * Desktop: navy a sangre, padding 48/22, logo 40px de alto, nav de 14px
 * con tracking 0.7px, CTA outline de 1.5px.
 * Mobile: como el Figma no trae frames, resolvemos con un panel desplegable
 * que respeta los mismos tokens.
 *
 * @package covipro
 */

.cvp-header {
	background: var(--cvp-navy);
	color: var(--cvp-white);
	position: relative;
	z-index: 20;
}

.cvp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cvp-sp-5);
	min-height: var(--cvp-header-h);
	padding: var(--cvp-sp-3) var(--cvp-gutter);
	max-width: var(--cvp-container);
	margin-inline: auto;
}

/* --- Logo -------------------------------------------------------------- */

.cvp-header__brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	line-height: 0;
}

.cvp-header__logo {
	height: 40px;      /* alto del Figma; el ancho lo da el aspect ratio */
	width: auto;
}

/*
 * Figma del 6 de octubre de 2026: el logo del encabezado va todo en blanco
 * («COVIPRO Logo - White»). El PNG es el logo original, con «federación» en
 * verde; el filtro lo pasa a blanco sin tocar el archivo.
 */
img.cvp-header__logo { filter: brightness(0) invert(1); }

/* Fallback de texto cuando todavía no hay archivo de logo. */
.cvp-header__logo--text {
	font-family: var(--cvp-font-display);
	font-weight: 700;
	font-size: var(--cvp-fs-md);
	line-height: 1;
	color: var(--cvp-white);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

/* --- Navegación -------------------------------------------------------- */

.cvp-header__nav {
	display: flex;
	align-items: center;
	gap: var(--cvp-sp-5);
	flex: 1 1 auto;
	justify-content: flex-end;
}

.cvp-header__menu {
	display: flex;
	align-items: center;
	gap: var(--cvp-sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cvp-header__menu li {
	margin: 0;
	position: relative;
}

.cvp-header__menu a {
	font-family: var(--cvp-font-text);
	font-weight: 500;
	font-size: var(--cvp-fs-sm);
	letter-spacing: var(--cvp-tracking-nav);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cvp-white);
	white-space: nowrap;
	padding-block: 4px;
	position: relative;
}

/* Subrayado amarillo en hover y en la página activa.
   Sólo en el primer nivel: dentro del desplegable los enlaces son de bloque,
   así que la línea barría los 220px del panel y chocaba con su borde amarillo. */
.cvp-header__menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--cvp-yellow);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--cvp-dur) var(--cvp-ease);
}

.cvp-header__menu > li > a:hover::after,
.cvp-header__menu > li > a:focus-visible::after,
.cvp-header__menu > li.current-menu-item > a::after,
.cvp-header__menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* Submenús: el diseño no los define, así que van sobrios y consistentes. */
.cvp-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	/* Sin margen: con un hueco entre el ítem y el panel, al bajar el mouse se
	   cruza una zona muerta, el li deja de estar en hover y el desplegable se
	   cierra antes de llegar. La separación se hace con padding, que sí forma
	   parte del área que mantiene abierto el menú. */
	margin: 0;
	padding: calc(var(--cvp-sp-1) * 2) 0 var(--cvp-sp-1);
	list-style: none;
	background: var(--cvp-navy);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--cvp-dur) var(--cvp-ease);
}

.cvp-header__menu li:hover > .sub-menu,
.cvp-header__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.cvp-header__menu .sub-menu a {
	display: block;
	padding: var(--cvp-sp-1) var(--cvp-sp-2);
	white-space: normal;
	transition: color var(--cvp-dur) var(--cvp-ease);
}

/* Dentro del desplegable el activo y el hover se marcan con el color del
   texto, no con una línea: en una lista vertical el subrayado leía mal. */
.cvp-header__menu .sub-menu a:hover,
.cvp-header__menu .sub-menu a:focus-visible,
.cvp-header__menu .sub-menu .current-menu-item > a {
	color: var(--cvp-yellow);
}

.cvp-header__cta {
	flex-shrink: 0;
	position: relative;
}

/* El botón mide 37px de alto en tablet y 22 en celular, porque el Figma lo
   dibuja así. En vez de agrandarlo y romper el diseño, le estiramos el área
   de toque a 44 con una capa invisible centrada. */
.cvp-header__cta::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
}

/* --- Botón de menú mobile ---------------------------------------------- */

.cvp-header__toggle {
	display: none;
	/* 44x44: el botón dibujado son 26x18, pero un área de toque menor a 44
	   se falla seguido en pantallas chicas. Entra en los 64px del header. */
	place-content: center;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: 0;
	padding: var(--cvp-sp-1);
	cursor: pointer;
	color: var(--cvp-white);
}

.cvp-header__toggle-bars,
.cvp-header__toggle-bars::before,
.cvp-header__toggle-bars::after {
	display: block;
	width: 26px;
	height: 2px;
	background: currentColor;
	transition: transform var(--cvp-dur) var(--cvp-ease),
	            opacity var(--cvp-dur) var(--cvp-ease);
}

.cvp-header__toggle-bars::before,
.cvp-header__toggle-bars::after {
	content: "";
	position: relative;
}

.cvp-header__toggle-bars::before { top: -8px; }
.cvp-header__toggle-bars::after  { top: 6px; }

.cvp-header__toggle[aria-expanded="true"] .cvp-header__toggle-bars {
	background: transparent;
}

.cvp-header__toggle[aria-expanded="true"] .cvp-header__toggle-bars::before {
	transform: translateY(8px) rotate(45deg);
}

.cvp-header__toggle[aria-expanded="true"] .cvp-header__toggle-bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* --- Mobile ------------------------------------------------------------ */

@media (max-width: 1100px) {
	.cvp-header__menu { gap: var(--cvp-sp-3); }
	.cvp-header__menu a { font-size: var(--cvp-fs-xs); }
}

@media (max-width: 900px) {
	/* La hamburguesa va al extremo derecho, después del CTA. */
	.cvp-header__toggle { display: grid; order: 3; }

	/* Con el nav fuera del flujo quedan tres cajas y space-between las
	   repartía a lo ancho. El botón y la hamburguesa van juntos a la derecha. */
	.cvp-header__inner { gap: var(--cvp-sp-2); }
	.cvp-header__cta { margin-left: auto; }

	.cvp-header__nav {
		position: absolute;
		inset: 100% 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--cvp-navy);
		padding: var(--cvp-sp-2) var(--cvp-gutter) var(--cvp-sp-4);
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		display: none;
	}

	.cvp-header__nav.is-open { display: flex; }

	.cvp-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.cvp-header__menu a {
		display: block;
		padding: var(--cvp-sp-2) 0;
		font-size: var(--cvp-fs-base);
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.cvp-header__menu a::after { display: none; }

	.cvp-header__menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		padding-left: var(--cvp-sp-2);
		margin: 0;
	}

	/* El CTA vive en la fila del header, no en el panel: sin margen y
	   centrado con el logo. */
	.cvp-header__cta {
		margin-top: 0;
		align-self: center;
	}
}

/* --- Mobile — nodo 148:984 --------------------------------------------
   El diseño baja el header a 64px. Mantiene el logo a la izquierda y el
   botón CONTACTANOS a la derecha; la hamburguesa la conservamos porque el
   diseño no dibuja ninguna navegación y sin ella no se podría navegar. */

@media (max-width: 700px) {
	:root { --cvp-header-h: 64px; }

	.cvp-header__inner { min-height: 64px; }

	.cvp-header__cta {
		font-size: 0.625rem;              /* 10 */
		padding: 5px 10px;
		min-height: 0;
	}

	/* El padding del inner sumaba 40px sobre los 64 del diseño. */
	.cvp-header__inner { padding-block: 8px; }
}