/* ============================================================
   FERNANDO MIER — Header móvil + drawer lateral
   ------------------------------------------------------------
   Sale del <style> que vivía dentro del widget HTML de Elementor.
   Ahora se encola desde functions.php con fm_asset_version(), como
   el resto del proyecto.

   CAMBIO DE COLOR EN ESTA VERSIÓN
   --------------------------------
   --fm-mh-titulo pasa al gris del sistema #ADB3BC. El azul claro
   anterior queda retirado y no debe volver a aparecer en ningún
   archivo. Afecta a las 3 líneas del burger y al icono ✕ del
   drawer, que ahora leen un punto más apagados y alineados con el
   resto de la navegación.

   El drawer incorpora el selector de idioma en el pie, sobre el
   divisor dorado que ya existía.

   OJO CON custom.css
   ------------------
   custom.css ya trae un bloque para .fm-mheader (el fix del resaltado
   rosa al tocar y el espaciado logo/hamburguesa) con algunas reglas en
   !important. No se toca: esta hoja depende de 'fm-custom' y entra
   después, así que conviven. Si en algún momento el burger deja de
   quedar pegado a la derecha, el culpable es el margin-left:auto de
   custom.css, no este archivo.
   ============================================================ */


/* ---------- TOKENS DEL SISTEMA --------------------------------------- */
.fm-mheader,
.fm-drawer{
	--fm-mh-fondo:     #01060C;                /* fondo del sitio          */
	--fm-mh-titulo:    #ADB3BC;                /* títulos y navegación     */
	--fm-mh-texto:     #ADB3BC;                /* grises de apoyo          */
	--fm-mh-oro:       #9B8659;                /* dorado del brand         */
	--fm-mh-linea:     rgba(155, 134, 89, .9); /* divisor dorado           */
	--fm-mh-borde:     rgba(173, 179, 188, .55);
	--fm-mh-ancho:     min(86vw, 420px);
	--fm-mh-ease:      cubic-bezier(.22, .61, .36, 1);
	--fm-mh-alto:      76px;
}

/* ---------- BARRA ------------------------------------------------------
   Transparente: la barra no debe verse como un bloque sobre el hero.
   -------------------------------------------------------------------- */
.fm-mheader{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--fm-mh-alto);
	padding: 0 20px;
	background: transparent;
}

.fm-mheader__logo{
	display: block;
	line-height: 0;
}

.fm-mheader__logo img{
	display: block;
	height: 42px;
	width: auto;
}

/* ---------- BOTÓN SÁNDWICH (3 líneas) --------------------------------- */
.fm-burger{
	--w: 34px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 8px;
	width: 48px;
	height: 48px;
	padding: 0;
	margin-right: -10px;
	border: 0;
	background: transparent;
	background-color: transparent;
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.fm-burger__line{
	display: block;
	width: var(--w);
	height: 2px;
	background: var(--fm-mh-titulo);
	transition: width .35s var(--fm-mh-ease);
}

/* reset.css de Hello Elementor pinta button:hover / :focus de #C36.
   Sin esto reaparece el rectángulo al tocar el botón. */
body .fm-burger,
body .fm-burger:hover,
body .fm-burger:focus,
body .fm-burger:active,
body .fm-drawer__close,
body .fm-drawer__close:hover,
body .fm-drawer__close:focus,
body .fm-drawer__close:active{
	background-color: transparent;
	box-shadow: none;
}

/* ---------- DRAWER ----------------------------------------------------- */
.fm-drawer{
	position: fixed;
	inset: 0;
	z-index: 99999;
}

.fm-drawer[hidden]{ display: none; }

.fm-drawer__scrim{
	position: absolute;
	inset: 0;
	background: rgba(1, 6, 12, .72);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .45s var(--fm-mh-ease);
}

.fm-drawer__panel{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: var(--fm-mh-ancho);
	padding: 20px 28px 36px;
	background: var(--fm-mh-fondo);
	border-right: 1px solid rgba(173, 179, 188, .12);
	transform: translateX(-100%);
	transition: transform .5s var(--fm-mh-ease);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.fm-drawer.is-open .fm-drawer__scrim{ opacity: 1; }
.fm-drawer.is-open .fm-drawer__panel{ transform: translateX(0); }

.fm-drawer__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 56px;
}

.fm-drawer__logo{
	display: block;
	height: 42px;
	width: auto;
}

.fm-drawer__close{
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fm-mh-titulo);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
}

/* ---------- NAVEGACIÓN (NORD, entrada escalonada) ---------------------- */
.fm-drawer__nav{
	flex: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fm-drawer__nav li{ margin-bottom: 6px; }

.fm-drawer__nav a{
	display: block;
	padding: 11px 0;
	font-family: "NORD", sans-serif;
	font-weight: 300;
	font-size: clamp(1.5rem, 6.4vw, 2rem);
	line-height: 1.18;
	letter-spacing: .06em;
	text-indent: .06em;                        /* compensa el tracking final */
	text-transform: uppercase;
	text-decoration: none;
	color: #ADB3BC;
	opacity: 0;
	transform: translateX(-14px);
	transition: opacity .5s var(--fm-mh-ease),
	            transform .5s var(--fm-mh-ease),
	            color .25s ease;
}

.fm-drawer__nav a:hover,
.fm-drawer__nav a:focus-visible,
.fm-drawer__nav a[aria-current="page"]{ color: var(--fm-mh-oro); }

.fm-drawer.is-open .fm-drawer__nav a{ opacity: 1; transform: none; }
.fm-drawer.is-open .fm-drawer__nav li:nth-child(1) a{ transition-delay: .16s; }
.fm-drawer.is-open .fm-drawer__nav li:nth-child(2) a{ transition-delay: .22s; }
.fm-drawer.is-open .fm-drawer__nav li:nth-child(3) a{ transition-delay: .28s; }
.fm-drawer.is-open .fm-drawer__nav li:nth-child(4) a{ transition-delay: .34s; }
.fm-drawer.is-open .fm-drawer__nav li:nth-child(5) a{ transition-delay: .40s; }
.fm-drawer.is-open .fm-drawer__nav li:nth-child(6) a{ transition-delay: .46s; }

/* ---------- PIE: SELECTOR DE IDIOMA ------------------------------------
   Reaprovecha el divisor dorado que ya estaba definido para el pie.
   Entra después del último enlace de la navegación.
   -------------------------------------------------------------------- */
.fm-drawer__foot{
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid var(--fm-mh-linea);
	opacity: 0;
	transform: translateX(-14px);
	transition: opacity .5s var(--fm-mh-ease),
	            transform .5s var(--fm-mh-ease);
}

.fm-drawer.is-open .fm-drawer__foot{
	opacity: 1;
	transform: none;
	transition-delay: .52s;
}

/* ---------- BOTÓN DEL PIE ----------------------------------------------
   Reservado: hoy el pie sólo lleva el selector de idioma. Los estilos se
   mantienen por si vuelve el CTA de contratación, con el mismo patrón del
   resto de botones del sitio: sin fondo, gris de base, y en hover sólo
   cambian el borde a dorado y el peso de 300 a 400. El ::after con
   data-texto reserva el ancho del peso 400 para que la caja no dé el
   tirón al entrar en hover.
   -------------------------------------------------------------------- */
.fm-drawer__cta{
	box-sizing: border-box;
	display: inline-grid;
	place-items: center;
	width: min(100%, 250px);
	padding: .95em 1.5em;
	border: 1px solid var(--fm-mh-borde);
	background-color: transparent;
	font-family: "NORD", sans-serif;
	font-weight: 300;
	font-size: .6875rem;
	line-height: 1;
	letter-spacing: .22em;
	text-indent: .22em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--fm-mh-texto);
	transition: border-color .35s ease;
}

.fm-drawer__cta > span{ grid-area: 1 / 1; }

.fm-drawer__cta::after{
	content: attr(data-texto);
	grid-area: 1 / 1;
	font-weight: 400;
	visibility: hidden;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine){
	.fm-drawer__cta:hover{
		border-color: var(--fm-mh-oro);
		background-color: transparent;
		font-weight: 400;
	}
}

.fm-drawer__cta:focus-visible{
	border-color: var(--fm-mh-oro);
	outline: 1px solid var(--fm-mh-oro);
	outline-offset: 4px;
	font-weight: 400;
}

body .fm-drawer__cta:hover,
body .fm-drawer__cta:focus{
	background-color: transparent;
	color: var(--fm-mh-texto);
}

/* ---------- BLOQUEO DE SCROLL ----------------------------------------- */
body.fm-locked{ position: fixed; width: 100%; overflow: hidden; }

/* ---------- SOLO MÓVIL / TABLET --------------------------------------- */
@media (min-width: 1025px){
	.fm-mheader,
	.fm-drawer{ display: none !important; }
}

/* ---------- ACCESIBILIDAD --------------------------------------------- */
.fm-burger:focus-visible,
.fm-drawer__close:focus-visible,
.fm-drawer__nav a:focus-visible{
	outline: 2px solid var(--fm-mh-oro);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce){
	.fm-drawer__panel,
	.fm-drawer__scrim,
	.fm-drawer__foot,
	.fm-drawer__nav a{ transition-duration: .01ms !important; }
	.fm-drawer__nav a,
	.fm-drawer__foot{ transition-delay: 0ms !important; }
}