/* ============================================================
   FERNANDO MIER — Navegación de escritorio + logotipo
   ------------------------------------------------------------
   Reproduce los valores que tenían los cinco widgets Heading en
   la UI de Elementor, para que al cambiarlos por el shortcode no
   se mueva un pixel:

     NORD · 12px · peso 300 · letter-spacing 1.65px ·
     word-spacing 5.1px · mayúsculas

   EL GRIS
   -------
   En Elementor los Heading estaban en #797D84. Aquí van en
   #ADB3BC, que es el único gris del sistema y el que ya usan el
   menú móvil y los botones. Se lee un punto más claro sobre el
   fondo. Si Alejandro quiere conservar el tono anterior, se toca
   SOLO la línea de --fm-nav-tinta.

   EL DORADO
   ---------
   #9B8659 en hover, en foco y en la página actual. Los Heading no
   podían marcar la página actual; el shortcode sí, con
   aria-current.

   ANCHOS
   ------
   Los 60px de separación son los que hay hoy entre los Heading,
   medidos sobre el header en vivo. Van en clamp para que a 1200px
   el menú no empiece a empujar al logotipo.
   ============================================================ */

.fm-navdesk{
	--fm-nav-tinta:  #ADB3BC;
	--fm-nav-oro:    #9B8659;
	--fm-nav-gap:    clamp(24px, 3.9vw, 60px);
	--fm-nav-tam:    12px;
	--fm-nav-track:  1.65px;
	--fm-nav-word:   5.1px;
}

.fm-navdesk__lista{
	display: flex;
	align-items: center;
	gap: var(--fm-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fm-navdesk__item{
	margin: 0;
	padding: 0;
}

.fm-navdesk__enlace{
	display: block;
	font-family: "NORD", sans-serif;
	font-weight: 300;
	font-size: var(--fm-nav-tam);
	line-height: 1;
	letter-spacing: var(--fm-nav-track);
	word-spacing: var(--fm-nav-word);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--fm-nav-tinta);

	/* "ACERCA DE" partía en dos líneas dentro de la caja estrecha
	   del Heading. Con nowrap se queda en una, que es como está en
	   el Figma. */
	white-space: nowrap;

	transition: color .3s cubic-bezier(.22, .61, .36, 1);
}

@media (hover: hover) and (pointer: fine){
	.fm-navdesk__enlace:hover{ color: var(--fm-nav-oro); }
}

.fm-navdesk__enlace[aria-current="page"]{ color: var(--fm-nav-oro); }

.fm-navdesk__enlace:focus-visible{
	outline: 2px solid var(--fm-nav-oro);
	outline-offset: 4px;
}

/* Hello Elementor pinta a:hover en algunos contextos. Se neutraliza
   encadenando body, sin !important. */
body .fm-navdesk__enlace:hover,
body .fm-navdesk__enlace:focus{
	background-color: transparent;
}

/* A partir de 1200px hacia abajo el tracking abierto empieza a
   costar demasiado ancho. El cuerpo se mantiene: bajarlo haría el
   menú ilegible antes de que aparezca la versión móvil. */
@media (max-width: 1199px){
	.fm-navdesk{
		--fm-nav-gap:   clamp(18px, 2.6vw, 34px);
		--fm-nav-track: 1.2px;
		--fm-nav-word:  3.4px;
	}
}

/* El header de escritorio desaparece en el mismo punto en que
   entra el header móvil, para que no convivan los dos. */
@media (max-width: 1024px){
	.fm-navdesk{ display: none; }
}


/* ---------- FONDO DE LA BARRA ------------------------------------------
   La textura del nav es nav_bar.webp.

   SIN CAPA OSCURA ENCIMA. La regla .fm-nav que hay hoy en custom.css
   monta un linear-gradient(rgba(0,0,0,.88)) sobre concreto.png; esta
   imagen ya trae su tratamiento aplicado, así que superponerle un
   degradado la apagaría dos veces.

   OJO CON EL SELECTOR: esto ataca .fm-header, que es la clase que ya
   usa custom.css para el min-height del header. Si el contenedor del
   Theme Builder lleva .fm-nav en su lugar, cambia el selector aquí y
   quita el background de la regla .fm-nav de custom.css, o convivirán
   dos fondos y ganará el que cargue después.

   background-color debajo por si la webp tarda o falla: el header se
   funde con el fondo del sitio en vez de quedar en blanco.
   -------------------------------------------------------------------- */
.fm-header{
	background-color: #01060C;
	background-image: url("https://fernandomier.mx/wp-content/uploads/2026/08/nav_bar.webp");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Gancho para la clase que pone assets/js/fm-header.js al pasar de 40px
   de scroll. Hoy no cambia nada a propósito: el comportamiento al hacer
   scroll no está definido en el Figma. Cuando Alejandro lo defina, va
   aquí y no en el JS.

.fm-header.is-scrolled{ }
*/


/* ---------- LOGOTIPO --------------------------------------------------- */

.fm-logohome{
	--fm-logo-alto: 58px;

	display: block;
	line-height: 0;
}

.fm-logohome img{
	display: block;
	height: var(--fm-logo-alto);
	width: auto;
}

@media (max-width: 1199px){
	.fm-logohome{ --fm-logo-alto: 50px; }
}

@media (max-width: 1024px){
	.fm-logohome{ display: none; }
}