/* -----------------------------------------
   Soulmix - Cabecera (Desktop)
   ----------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: clamp(44px, calc(44 / 1920 * 100vw), 62px) 0 clamp(32px, calc(32 / 1920 * 100vw), 45px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, calc(24 / 1920 * 100vw), 34px);
}

.site-logo {
	flex: 0 0 auto;
	margin-left: clamp(40px, calc(40 / 1920 * 100vw), 56px);
}

.site-logo img {
	height: clamp(110px, calc(110 / 1920 * 100vw), 154px);
	width: auto;
}

/* Cards de navegación */
.header-nav {
	flex: 0 0 auto;
}

.header-nav__list {
	display: flex;
	align-items: center;
	min-height: clamp(72px, calc(72 / 1920 * 100vw), 101px);
	gap: clamp(40px, calc(40 / 1920 * 100vw), 56px);
	background-color: var(--color-btn-secondary);
	border-radius: clamp(20px, calc(20 / 1920 * 100vw), 28px);
	padding: 0 clamp(36px, calc(36 / 1920 * 100vw), 50px);
}

.header-nav__item {
	display: flex;
	align-items: center;
}

.header-nav .nav-link {
	display: inline-flex;
	align-items: center;
	gap: clamp(6px, calc(6 / 1920 * 100vw), 8px);
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	line-height: 1;
	color: var(--color-text);
	white-space: nowrap;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.header-nav .nav-link:hover {
	color: var(--color-btn-primary);
}

/* El botón de Contacto tiene fondo propio (crema) y no debe teñirse de
   naranja como el resto de enlaces de texto: mantiene su color original. */
.header-nav--right .nav-link--contact:hover {
	color: var(--color-btn-secondary);
}

/*
 * La flecha del megamenú es un SVG con fill fijo (#FAF9F2), así que un
 * <img> normal no se puede recolorear por CSS. Se pinta vía mask-image
 * (el SVG solo aporta la forma) + background-color, que sí hereda el color
 * del enlace en hover igual que el texto.
 */
.nav-arrow {
	width: clamp(8px, calc(8 / 1920 * 100vw), 11px);
	height: clamp(11px, calc(11 / 1920 * 100vw), 15px);
	display: inline-block;
	background-color: var(--color-text);
	-webkit-mask-image: url('../img/icons/flecha.svg');
	mask-image: url('../img/icons/flecha.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	transition: transform 0.5s ease, background-color 0.2s ease;
}

.header-nav__item--has-mega:hover .nav-arrow {
	background-color: var(--color-btn-primary);
	transform: rotate(180deg);
}

/* Botón de contacto (relleno color texto, texto color fondo secundario) */
.header-nav--right .nav-link--contact {
	background-color: var(--color-text);
	color: var(--color-btn-secondary);
	padding: clamp(17px, calc(17 / 1920 * 100vw), 24px) clamp(22px, calc(22 / 1920 * 100vw), 31px) clamp(15px, calc(15 / 1920 * 100vw), 21px);
	border-radius: 999px;
}

/* Selector de idioma (GTranslate) */
.header-nav__item:has(.lang-switcher) {
	margin-left: clamp(-22px, calc(-16 / 1920 * 100vw), -16px);
}

.lang-switcher {
	display: flex;
	align-items: center;
	position: relative;
}

.gtranslate_wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.gtranslate_wrapper .glink {
	display: inline-flex;
	align-items: center;
	gap: clamp(6px, calc(6 / 1920 * 100vw), 8px);
	font-family: var(--font-condensed) !important;
	font-weight: 900 !important;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px) !important;
	line-height: 1 !important;
	text-transform: uppercase;
	color: var(--color-text);
	white-space: nowrap;
}

.gtranslate_wrapper .glink.gt-current-lang::after {
	content: '';
	width: clamp(8px, calc(8 / 1920 * 100vw), 11px);
	height: clamp(11px, calc(11 / 1920 * 100vw), 15px);
	background-image: url('../img/icons/flecha.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.5s ease;
}

.gtranslate_wrapper.is-open .glink.gt-current-lang::after {
	transform: rotate(180deg);
}

/* Reutiliza el mismo patrón visual del megamenú de Productos */
/*
 * NOTA: el plugin GTranslate inyecta su propio CSS (opción `custom_css`,
 * editado vía script — ver memoria del proyecto) con un selector
 * `.gt-dropdown` que se carga después de este archivo y gana la cascada.
 * El posicionamiento real del dropdown (incluido el offset para igualar
 * el gap con el megamenú de Productos) vive ahí, no aquí. Estas reglas
 * quedan como fallback/documentación pero no son las que se aplican.
 */
.gt-dropdown {
	position: absolute;
	left: 50%;
	top: 100%;
	padding-top: clamp(40px, calc(40 / 1920 * 100vw), 56px);
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-8px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
	z-index: 10;
	pointer-events: none;
}

.gtranslate_wrapper.is-open .gt-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.gt-dropdown {
	gap: clamp(12px, calc(12 / 1920 * 100vw), 17px);
}

.gt-dropdown .glink {
	justify-content: center;
	background-color: var(--color-btn-secondary);
	border-radius: clamp(12px, calc(12 / 1920 * 100vw), 17px);
	padding: clamp(14px, calc(14 / 1920 * 100vw), 20px) clamp(24px, calc(24 / 1920 * 100vw), 34px);
	opacity: 1;
	transition: opacity 0.35s ease;
}

.gt-dropdown .glink:hover {
	opacity: 0.6;
}

/* Megamenú de Productos */
.header-nav__item--has-mega {
	position: relative;
}

/*
 * El menú se posiciona pegado (top:100%, sin margin-top) justo debajo del
 * trigger, así el área con :hover del <li> queda contigua a él sin ningún
 * hueco intermedio donde el cursor pueda "salirse" y perder el hover al
 * bajar. La separación visual de 40px respecto a la cabecera se logra con
 * un padding-top DENTRO del propio .mega-menu (transparente, antes de la
 * card gris), en vez de con distancia real entre elementos.
 */
.mega-menu {
	position: absolute;
	left: 0;
	top: 100%;
	padding-top: clamp(40px, calc(40 / 1920 * 100vw), 56px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
	z-index: 10;
	pointer-events: none;
}

.header-nav__item--has-mega:hover .mega-menu,
.mega-menu:hover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.mega-menu__list {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, calc(24 / 1920 * 100vw), 34px);
	background-color: var(--color-btn-secondary);
	border-radius: clamp(20px, calc(20 / 1920 * 100vw), 28px);
	padding: clamp(28px, calc(28 / 1920 * 100vw), 39px) clamp(24px, calc(24 / 1920 * 100vw), 34px);
	white-space: nowrap;
}

.mega-menu__link {
	display: block;
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	line-height: 1;
	color: var(--color-text);
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.mega-menu__link:hover {
	color: var(--color-btn-primary);
}