/**
 * Global — Header (fijo arriba, no sticky)
 * Figma (frame 1440): alto ~100px, padding lateral 80px, logo ~170px,
 * menú Body/S navy, botón "Cotizar" ocre tipo píldora.
 */

/* ---------- Layout ---------- */
.global-header {
	--header-height: 100px;
	position: relative;
	z-index: 100;
	width: 100%;
	background: var(--color-light);
}

.global-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 32px;
	min-height: var(--header-height);
	padding-inline: 80px;
}

.global-header__logo {
	display: inline-flex;
	align-items: center;
	justify-self: start;
}

.global-header__logo img {
	display: block;
	width: auto;
	height: 50px;
}

.global-header__logo-text {
	font-family: var(--font-serif);
	font-size: 32px;
	color: var(--color-black);
}

/* ---------- Menú ---------- */
.global-header__menu {
	display: flex;
	align-items: center;
	gap: clamp(32px, 6vw, 90px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.global-header__menu a {
	color: var(--color-navy);
	text-decoration: none;
	transition: color .2s ease;
}

.global-header__menu a:hover,
.global-header__menu a:focus-visible,
.global-header__menu .current-menu-item > a {
	color: var(--color-ochre);
}

/* ---------- Botón Cotizar ---------- */
.global-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 92px;
	min-height: 34px;
	padding: 8px 24px;
	border-radius: var(--radius-pill);
	background: var(--color-ochre);
	color: var(--color-light);
	text-decoration: none;
	transition: background-color .2s ease;
}

.global-header__cta:hover,
.global-header__cta:focus-visible {
	background: var(--color-terracotta);
	color: var(--color-light);
}

.global-header__cta--desktop { justify-self: end; }
.global-header__cta--mobile { display: none; }

/* ---------- Hamburguesa ---------- */
.global-header .global-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	justify-self: end;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

.global-header__toggle span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--color-navy);
	transition: transform .25s ease, opacity .2s ease;
}

.global-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.global-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.global-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Tablet / móvil (sin diseño aún: adaptación propia) ---------- */
@media (max-width: 1024px) {
	.global-header { --header-height: 72px; }

	.global-header__inner {
		grid-template-columns: 1fr auto;
		padding-inline: 24px;
	}

	.global-header__logo img { height: 38px; }

	.global-header__cta--desktop { display: none; }
	.global-header .global-header__toggle { display: flex; }

	.global-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
		padding: 32px 24px 40px;
		background: var(--color-light);
		box-shadow: 0 12px 24px rgba(35, 49, 69, .08);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .25s ease, transform .25s ease, visibility .25s;
	}

	.global-header__nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.global-header__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		font-size: var(--fs-body-l);
		line-height: var(--lh-body-l);
	}

	.global-header__cta--mobile { display: inline-flex; }
}

/* El panel móvil se posiciona respecto al header */
.global-header__inner { position: relative; }