/* ============================================================
   FERNANDO MIER — Selector de idioma (interruptor deslizante)
   ------------------------------------------------------------
   Dos variantes sobre el mismo markup:
     .fm-idioma--desktop  → header de escritorio, escala pequeña
     .fm-idioma--drawer   → pie del menú móvil, escala mayor

   CÓMO ESTÁ ARMADO
   ----------------
   El <a> es una rejilla de DOS COLUMNAS IGUALES (1fr 1fr). La
   perilla es un elemento de rejilla más, colocado en la columna 1
   y sin contenido, así que mide exactamente lo que mide media
   pastilla. Para llevarla a la derecha basta translateX(100%):
   100% de su propio ancho = una columna justa. Nada de calcular
   restas contra el padding, que es donde estas pastillas se
   descuadran por un pixel.

   Las dos columnas son 1fr aunque "ES" y "EN" midan distinto: si
   se dejara auto, la perilla saltaría de ancho al cambiar de lado.

   EL HOVER NO MUEVE NADA
   ----------------------
   La versión anterior deslizaba la perilla al pasar el cursor, a
   modo de anticipo. Se retiró: el control cambiaba de aspecto sin
   que el usuario hubiera hecho nada, y al salir el cursor volvía —
   parecía que se había cambiado el idioma y deshecho solo. En
   hover ahora solo se enciende el borde en dorado.

   QUIÉN MUEVE LA PERILLA
   ----------------------
   assets/js/fm-header.js, al hacer CLIC: invierte data-pos, espera
   a que termine esta transición y entonces navega. Aquí no hay
   ninguna regla de :active ni de hover que la mueva, a propósito:
   la posición depende de un solo atributo y de nada más.

   Y si el JS no llega —LiteSpeed lo aplaza, un error en otro
   script, lo que sea— el enlace sigue siendo un enlace: se navega
   sin animación y la página nueva pinta la perilla en su sitio.
   No hay forma de que el control quede muerto.

   POR QUÉ --fm-idi-x Y NO DOS REGLAS DE transform
   -----------------------------------------------
   La posición se declara UNA vez, en el contenedor, y la perilla
   la lee por herencia. Cambiar data-pos cambia el valor heredado,
   y como transform sí es animable, la transición arranca sola.

   COLOR
   -----
   Gris del sistema #ADB3BC en la cara inactiva, perilla en dorado
   #9B8659 y la cara que va encima en el fondo del sitio #01060C,
   que es el único par con contraste suficiente sobre el dorado.
   El gris sobre dorado no llegaba a AA.

   FORMA
   -----
   --fm-idi-radio en 999px da la pastilla del referente. El resto de
   botones del sitio son de esquina viva; si Alejandro prefiere que
   esto también lo sea, se pone 0 en esa línea y no hay que tocar
   nada más.

   --fm-idi-dur está declarada aquí y NO debe copiarse al JS: el JS
   espera el evento transitionend, así que cambiar la duración en
   esta línea basta para cambiar también cuánto tarda en navegar.

   Los tokens se declaran en el propio bloque porque en escritorio
   el selector vive fuera de .fm-mheader / .fm-drawer y no hereda
   los tokens del header móvil.
   ============================================================ */

.fm-idioma{
	--fm-idi-gris:  #ADB3BC;
	--fm-idi-oro:   #9B8659;
	--fm-idi-fondo: #01060C;
	--fm-idi-borde: rgba(173, 179, 188, .55);
	--fm-idi-radio: 999px;
	--fm-idi-dur:   .42s;
	--fm-idi-ease:  cubic-bezier(.22, .61, .36, 1);

	display: inline-flex;
	line-height: 1;
}

/* ---------- LA PASTILLA ------------------------------------------------ */
.fm-idioma__op{
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	padding: 3px;
	border: 1px solid var(--fm-idi-borde);
	border-radius: var(--fm-idi-radio);
	background-color: transparent;
	text-decoration: none;
	transition: border-color .35s var(--fm-idi-ease);
}

/* ---------- LA PERILLA --------------------------------------------------
   El JS escucha el transitionend de ESTA transición para saber cuándo
   navegar. Si algún día se le quita el transition, quítale también la
   espera al JS o la navegación se quedará colgada del temporizador de
   respaldo.
   -------------------------------------------------------------------- */
.fm-idioma__perilla{
	grid-area: 1 / 1;
	border-radius: var(--fm-idi-radio);
	background-color: var(--fm-idi-oro);
	transform: translateX(var(--fm-idi-x, 0));
	transition: transform var(--fm-idi-dur) var(--fm-idi-ease);
}

.fm-idioma[data-pos="1"]{ --fm-idi-x: 100%; }

/* ---------- LAS DOS CARAS ---------------------------------------------- */
.fm-idioma__cara{
	grid-row: 1;
	z-index: 1;
	display: grid;
	place-items: center;
	padding: .72em 1.05em;
	font-family: "NORD", sans-serif;
	font-weight: 300;
	font-size: .6875rem;
	line-height: 1;
	letter-spacing: .18em;
	text-indent: .18em;                  /* compensa el tracking final */
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--fm-idi-gris);
	transition: color var(--fm-idi-dur) var(--fm-idi-ease);
}

.fm-idioma__cara--a{ grid-column: 1; }
.fm-idioma__cara--b{ grid-column: 2; }

/* La cara que queda sobre la perilla pasa al color de fondo. Cambia sola
   al invertir data-pos, a la vez que se desliza la perilla. */
.fm-idioma[data-pos="0"] .fm-idioma__cara--a,
.fm-idioma[data-pos="1"] .fm-idioma__cara--b{
	color: var(--fm-idi-fondo);
}

/* ---------- HOVER Y FOCO: SOLO EL BORDE -------------------------------- */
@media (hover: hover) and (pointer: fine){
	.fm-idioma__op:hover{ border-color: var(--fm-idi-oro); }
}

.fm-idioma__op:focus-visible{
	border-color: var(--fm-idi-oro);
	outline: 1px solid var(--fm-idi-oro);
	outline-offset: 4px;
}

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

/* Mientras se desliza, el control ya no acepta más clics: el JS pone esta
   clase. Sin ella, dos clics seguidos dejan la perilla a medio camino y
   navegando al idioma equivocado. */
.fm-idioma.is-cambiando .fm-idioma__op{
	pointer-events: none;
	cursor: default;
}

/* ---------- VARIANTE ESCRITORIO ---------------------------------------
   Se queda a la derecha del nav, donde estaba. Un punto por debajo del
   tamaño de los enlaces del menú (12px NORD 300) para que el control no
   compita con la navegación.
   -------------------------------------------------------------------- */
.fm-idioma--desktop .fm-idioma__cara{
	padding: .68em 1em;
	font-size: clamp(.625rem, .52vw, .6875rem);
}

/* Por debajo de 1200px el nav ya aprieta el tracking; el selector hace
   lo mismo para no robarle ancho al menú. */
@media (max-width: 1199px){
	.fm-idioma--desktop .fm-idioma__cara{
		padding: .64em .82em;
		letter-spacing: .13em;
		text-indent: .13em;
	}
}

/* ---------- VARIANTE DRAWER -------------------------------------------
   En el pie del menú móvil ocupa el mismo ancho que ocupaba el CTA de
   contratación, para que el bloque no quede descolgado bajo el divisor
   dorado. Alto por encima de los 44px de área táctil.
   -------------------------------------------------------------------- */
.fm-idioma--drawer{
	display: block;
}

.fm-idioma--drawer .fm-idioma__op{
	width: min(100%, 250px);
}

.fm-idioma--drawer .fm-idioma__cara{
	padding: .95em 1.2em;
	font-size: .8125rem;
	letter-spacing: .2em;
	text-indent: .2em;
}

@media (max-width: 400px){
	.fm-idioma--drawer .fm-idioma__cara{ font-size: .75rem; }
}

/* ---------- MOVIMIENTO REDUCIDO ----------------------------------------
   Aquí no basta con acortar la transición: el JS también comprueba esta
   preferencia y, si está activa, navega de inmediato sin esperar a nada.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
	.fm-idioma__perilla,
	.fm-idioma__cara,
	.fm-idioma__op{ transition-duration: .01ms; }
}