/* =========================================================
   TREZE — HEADER (FINAL · CLEAN RESPONSIVE)
========================================================= */

html.menu-open{
	overflow: hidden;
}

/* =========================================
   TYPOGRAPHY FOOTER (REAL)
========================================= */

.site-header *{
  font-family: inherit;
}

/* =========================================================
   FIX — THEME CONSTRAINTS
========================================================= */

.site-header .header-inner,
.site-header:not(.dynamic-header){
	
	margin-inline: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	padding-inline-start:0 !important;
}


.site-header__menu-item--cta{
	display: none;
}

/* =========================================================
   ROOT
========================================================= */

.site-header{
	font-family: "Lexend Deca", sans-serif;

	position: fixed;
	inset: 0 0 auto 0;
	z-index: 9999;

	pointer-events: none;

	/* 🔥 evita conflictos de capas */
	isolation: isolate;

	/* layout */

	--header-max: 1720px;

	--header-top: 14px;
	--header-side: 24px;

	--header-height: 96px;
	--header-height-scrolled: 74px;

	--pad-x: 34px;
	--pad-x-scrolled: 28px;

	--bg-top: rgba(10,5,45,.14);
	--bg-scroll: rgba(255,255,255,.84);

	--border-top: rgba(255,255,255,.08);
	--border-scroll: rgba(41,37,70,.08);

	--shadow-scroll:
	0 10px 30px rgba(0,0,0,.10),
	0 2px 10px rgba(0,0,0,.05);
}


/* =========================================================
   CONTENEDOR
========================================================= */

.site-header__inner{

	pointer-events: auto;

	width: 100%;
	display: flex;
	justify-content: center;
}


/* =========================================================
   WRAP — DEFAULT
========================================================= */

.site-header__wrap{

	width: 100%;
	max-width: 100%;

	min-height: var(--header-height);

	display: flex;
	align-items: center;
	justify-content: space-between;

	padding-inline: var(--pad-x);

	background: var(--bg-top);
	border-bottom: 1px solid var(--border-top);

	backdrop-filter: blur(8px);

	transition: all .35s var(--ease-standard);
}


/* =========================================================
   SCROLLED
========================================================= */

[data-header-inner][data-header-state="scrolled"] .site-header__wrap{

	max-width: 1280px;
	margin: 18px auto 0;

	min-height: 68px;
	padding-inline: 24px;

	background: var(--bg-scroll);
	border: 1px solid var(--border-scroll);

	border-radius: 20px;

	box-shadow:
	0 18px 50px rgba(0,0,0,.14),
	0 4px 14px rgba(0,0,0,.08);

	backdrop-filter: blur(20px);
}


/* =========================================================
   BRANDING
========================================================= */

.site-header__branding{

	flex: 0 0 auto;
	min-width: 120px;

	display: flex;
	align-items: center;
}

.site-header__branding img,
.site-header__branding .custom-logo{

	display: block;
	height: 44px;
	width: auto;

	transition: height .35s var(--ease-standard),
				filter .35s var(--ease-standard);
}

/* logo blanco */

.site-header__branding img{
	filter: brightness(0) invert(1);
}

/* logo scrolled */

[data-header-inner][data-header-state="scrolled"]
.site-header__branding img{

	filter: brightness(0) saturate(100%)
			invert(56%) sepia(33%) saturate(1152%)
			hue-rotate(357deg) brightness(93%) contrast(92%);

	height: 38px;
}


/* =========================================================
   NAV (DESKTOP)
========================================================= */

.site-header__nav{

	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.site-header__menu{

	display: flex;
	align-items: center;
	justify-content: center;

	gap: 52px;

	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__menu > li > a{

	display: inline-flex;
	align-items: center;

	color: white;
	text-decoration: none;

	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 500;

	transition: .25s;
}

.site-header__menu > li > a::before{
	content: "/";
	margin-right: 4px;
	opacity: .9;
}

.site-header__menu > li > a:hover{
	opacity: .72;
	transform: translateY(-1px);
}

[data-header-inner][data-header-state="scrolled"]
.site-header__menu > li > a{
	color: var(--color-primary-900);
}


/* =========================================================
   CTA (ÚNICO)
========================================================= */

.site-header__cta-wrap{

	flex: 0 0 auto;
	min-width: 275px;

	display: flex;
	justify-content: flex-end;
}

.site-header__cta{

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 275px;
	height: 41px;

	border-radius: 6px;
	text-decoration: none;

	background: linear-gradient(
	90deg,
	var(--color-primary-900),
	var(--color-primary-700)
	);

	color: white;
	font-weight: 600;

	transition: .25s;
}

.site-header__cta:hover{
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0,0,0,.22);
}


/* =========================================================
   TOGGLE
========================================================= */

.site-header__toggle{

	display: none;

	width: 42px;
	height: 42px;

	border: none;
	background: transparent;

	flex-direction: column;
	justify-content: center;
	gap: 6px;

	cursor: pointer;
}

.site-header__toggle-line{

	display: block;
	width: 100%;
	height: 2px;

	background: white;
	transition: .3s;
}

[data-header-inner][data-header-state="scrolled"]
.site-header__toggle-line{
	background: var(--color-primary-900);
}


/* =========================================================
   MOBILE (HEADER + FULLSCREEN MENU)
   ---------------------------------------------------------
   Solo móvil.
   Desktop queda intacto.
========================================================= */

@media (max-width: 1024px){

	/* =====================================================
	   ESTADO GLOBAL
	===================================================== */

	.site-header[data-menu-state="open"]{
		pointer-events: auto;
	}

	.site-header__inner{
		position: relative;
		width: 100%;
	}

	/* =====================================================
	   WRAP VISIBLE DEL HEADER
	   -----------------------------------------------------
	   Sigue arriba con logo a la izquierda y toggle a la derecha.
	===================================================== */

	.site-header__wrap{
		position: relative;
		z-index: 30;

		width: 100%;
		max-width: 100%;

		min-height: 82px;
		padding-inline: 20px;

		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		column-gap: 12px;
	}

	[data-header-inner][data-header-state="scrolled"] .site-header__wrap{
		max-width: calc(100% - 20px);
		margin: 10px auto 0;
		min-height: 72px;
		padding-inline: 18px;
		border-radius: 18px;
	}

	/* =====================================================
	   BRANDING
	===================================================== */

	.site-header__branding{
		min-width: 0;
		position: relative;
		z-index: 40;
	}

	.site-header__branding img,
	.site-header__branding .custom-logo{
		height: 34px;
		width: auto;
	}

	[data-header-inner][data-header-state="scrolled"] .site-header__branding img{
		height: 32px;
	}

	/* =====================================================
	   TOGGLE
	   -----------------------------------------------------
	   Siempre arriba a la derecha en mobile.
	===================================================== */

	.site-header__toggle{
		display: inline-flex;
		position: relative;
		z-index: 40;

		width: 42px;
		height: 42px;
		padding: 0;
		margin: 0;

		align-items: center;
		justify-content: center;
		justify-self: end;
		align-self: center;
	}

	.site-header__toggle-line{
		width: 28px;
		transform-origin: center;
	}

	/* en menú abierto, líneas blancas sí o sí */
	.site-header[data-menu-state="open"] .site-header__toggle-line{
		background: white;
	}

	/* =====================================================
	   NAV OVERLAY REAL
	   -----------------------------------------------------
	   Fullscreen limpio.
	===================================================== */

	/* =====================================================
	   NAV OVERLAY REAL (FIX DEFINITIVO)
	===================================================== */
	
	.site-header__nav{
		position: fixed;
		inset: 0;
		z-index: 10;
	
		display: none; /* 🔥 CLAVE */
	
		flex-direction: column;
		align-items: center;
		justify-content: center;
	
		width: 100%;
		height: 100dvh;
	
		padding:
			calc(env(safe-area-inset-top, 0px) + 110px)
			24px
			calc(env(safe-area-inset-bottom, 0px) + 140px);
	
		background: rgba(10,5,45,.98);
		backdrop-filter: blur(18px);
	
		box-sizing: border-box;
	}
	
	/* estado abierto */
	.site-header[data-menu-state="open"] .site-header__nav{
		display: flex;
	}
	
	/* =====================================================
	   MENÚ MOBILE
	===================================================== */

	.site-header__menu{
		width: 100%;
		max-width: 420px;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		gap: 24px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-header__menu > li{
		width: 100%;
		text-align: center;
	}

	.site-header__menu > li > a{
		display: inline-flex;
		align-items: center;
		justify-content: center;

		font-size: clamp(1rem, 7vw, 2.5rem);
		font-weight: 600;
		line-height: 1.05;
		letter-spacing: -.02em;

		color: white;
		text-decoration: none;
	}

	.site-header__menu > li > a::before{
		display: none;
	}

	/* 🔥 override total del estado scrolled en mobile abierto */
	.site-header[data-menu-state="open"] .site-header__menu > li > a,
	[data-header-inner][data-header-state="scrolled"] .site-header[data-menu-state="open"] .site-header__menu > li > a,
	.site-header[data-menu-state="open"] [data-header-inner][data-header-state="scrolled"] .site-header__menu > li > a{
		color: white !important;
	}

	/* =====================================================
	   CTA MOBILE
	   -----------------------------------------------------
	   Fijo abajo y centrado dentro de la experiencia fullscreen.
	===================================================== */
	
	.site-header__cta-wrap{
	
		display: none;
	}
	
	.site-header__menu-item--cta{
		display: block;
		margin-top: 32px;
		text-align: center;
	}
	
	.site-header__menu-item--cta a{
	
		display: inline-flex;
		align-items: center;
		justify-content: center;
	
		height: 50px;
		padding-inline: 28px;
	
		border-radius: 6px;
		text-decoration: none;
		text-transform: uppercase;
	
		background: linear-gradient(
			90deg,
			var(--color-primary-900),
			var(--color-primary-700)
		);
	
		color: white;
		font-weight: 600;
	}

	/* =====================================================
	   AL ABRIR MENÚ
	   -----------------------------------------------------
	   Quitamos la caja visual del header, pero dejamos
	   logo y toggle por encima del overlay.
	===================================================== */

	.site-header[data-menu-state="open"] .site-header__wrap{
		background: transparent;
		border-color: transparent;
		box-shadow: none;
		backdrop-filter: none;
	}

	.site-header[data-menu-state="open"] .site-header__branding,
	.site-header[data-menu-state="open"] .site-header__toggle{
		position: relative;
		z-index: 40;
	}
}


/* =========================================================
   TOGGLE ANIMATION
========================================================= */

.site-header[data-menu-state="open"] .site-header__toggle-line:nth-child(1){
	transform: translateY(8px) rotate(45deg);
}

.site-header[data-menu-state="open"] .site-header__toggle-line:nth-child(2){
	opacity: 0;
}

.site-header[data-menu-state="open"] .site-header__toggle-line:nth-child(3){
	transform: translateY(-8px) rotate(-45deg);
}