/* =========================================================================
   Fernando Mier — CSS del proyecto
   =========================================================================

   Cómo trabajar aquí:

   1. En Elementor, a cada sección o widget que necesites estilar le pones una
      clase en la pestaña Avanzado → Clases CSS. Por convención: fm-nombre.
   2. La atacas desde este archivo.
   3. Nunca inyectas markup con un widget HTML para lograr algo que se
      resuelve con una clase.

   Orden del archivo:
   01. Base y accesibilidad
   02. Tipografía
   03. Header
   04. Experiencia de scroll horizontal
   05. Utilidades
   06. Botón del sistema          ← NUEVO
   ========================================================================= */


/* 01. Base y accesibilidad
   ------------------------------------------------------------------------ */

/* Foco visible. No lo quites: es requisito de accesibilidad y el diseño
   oscuro lo hace fácil de integrar con el dorado. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--fm-oro);
  outline-offset: 3px;
}

/* Respeta a quien pidió menos movimiento a nivel sistema operativo.
   El JS también lo respeta, pero esto cubre las transiciones de CSS. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Red de seguridad para las secciones a sangre.
   -------------------------------------------------------------------------
   Cada sección full-bleed ya calcula su ancho con --fm-vw, que excluye la
   barra de scroll. Esto absorbe el pixel residual que se escapa por
   redondeos de calc() en pantallas con zoom no entero.

   clip y NUNCA hidden: overflow-x: hidden en html o body crea un contenedor
   de scroll y rompe position: sticky en TODA la página — con ella los pins
   de ScrollTrigger del home y de /fernando/. clip recorta igual sin crear
   contexto de desplazamiento.

   Va en body y no en html: en html interfiere con el scroll-behavior y con
   el cálculo de posición de ScrollTrigger en Safari. */
body {
  overflow-x: clip;
}

/* 02. Tipografía
   ------------------------------------------------------------------------ */

/* El diseño usa mayúsculas con tracking muy abierto. Ojo: el tracking abierto
   en mayúsculas necesita más interlineado del que parece, y hay que bajarlo
   en móvil o los títulos se parten feo. */

.fm-titulo-tracking {
  text-transform: uppercase;
  letter-spacing: var(--fm-tracking-amplio);
  line-height: 1.5;
}

@media (max-width: 767px) {
  .fm-titulo-tracking {
    letter-spacing: var(--fm-tracking-medio);
  }
}

/* ==========================================================================
   Red Hat Display — fuente de cuerpo
   Archivos en assets/fonts/
   --------------------------------------------------------------------------
   Es una fuente VARIABLE con un solo eje (wght, de 300 a 900). Un archivo
   cubre todos los pesos: no hay que declarar un @font-face por peso ni subir
   Light, Regular, Medium y Bold por separado. El rango va en font-weight y
   el navegador interpola.

   font-display: swap — el texto se pinta de inmediato con la fuente de
   respaldo y cambia cuando llega la real. Evita el bloque en blanco.
   ========================================================================== */

@font-face{
  font-family: "Red Hat Display";
  src: url("../fonts/RedHatDisplay-Variable.woff2") format("woff2"),
       url("../fonts/RedHatDisplay-Variable.woff")  format("woff");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* 03. Header
   ------------------------------------------------------------------------ */

/* Si el header va sticky, hazlo aquí y NO con el sticky nativo de Elementor:
   el sticky de Elementor y el pin de ScrollTrigger se estorban entre sí. */

.fm-header {
  min-height: var(--fm-header-alto);
}


/* 05. Utilidades
   ------------------------------------------------------------------------ */

.fm-oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- HOME · Nav + Hero ---- */
:root{
  --fm-nav-h:    163px;
  --fm-hero-top: 70px;
  --fm-container: 1184px;
}

.fm-nav{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--fm-nav-h);
  background:
    linear-gradient(rgba(0,0,0,.88), rgba(0,0,0,.88)),
    url('../img/concreto.png') center/cover no-repeat;
}


/* =========================================================================
   06. BOTÓN DEL SISTEMA — medida única para todo el sitio
   =========================================================================

   Antes había NUEVE medidas distintas para el mismo elemento: cada página
   declaraba su propio ancho, alto, cuerpo y tracking. Estos tokens son la
   única fuente de verdad; ninguna hoja de sección vuelve a escribir esas
   cuatro propiedades.

   DE DÓNDE SALEN LOS NÚMEROS

     ancho 250px   Es el ancho del botón de /contratacion/ (252 en el Figma)
                   y también el del CTA de /eventos/, que es el que Alejandro
                   dio por bueno en la captura de referencia.

     alto 38px     La proporción de la captura es ~6.7:1. Eso es lo que hace
                   que el botón se lea FINO. Con los 45px de contratación la
                   proporción baja a 5.6:1 y el botón se ve pesado.

                   /contratacion/ se queda en 45 por indicación expresa: es
                   la única excepción declarada del sistema.

     cuerpo 11px   A 12px la etiqueta más larga del sitio ("CONSULTA
                   DISPONIBILIDAD", 23 caracteres) mide 207px de tinta con
                   .22em de tracking; sumado al padding se sale de los 250.
                   A 11px baja a 189 y entra con margen.

     tracking      .22em, el del CTA compartido. Los .34em de contratación
                   solo funcionan porque ahí la etiqueta es "ENVIAR".

   EL BORDE VA MACIZO. Varias hojas lo tenían en rgba(173,179,188,.55), que
   sobre el fondo del sitio resuelve a un gris distinto de #ADB3BC. El
   sistema tiene un solo gris.

   HOVER: cambia el color del BORDE a dorado y el peso de 300 a 400. El
   color del texto NO cambia — se queda en #ADB3BC — pero hay que declararlo
   igualmente en cada regla, porque `a:visited` del tema y `button:hover` de
   reset.css lo pisan si se deja implícito.
   ========================================================================= */

:root{
  --fm-btn-ancho:   clamp(200px, 17.5vw, 250px);   /* min-width  */
  --fm-btn-alto:    clamp(34px, 2.6vw, 38px);      /* min-height */
  --fm-btn-tam:     clamp(10px, 0.85vw, 11px);
  --fm-btn-track:   .22em;
  --fm-btn-pad-x:   clamp(16px, 1.8vw, 24px);

  --fm-btn-borde:   #ADB3BC;
  --fm-btn-tinta:   #ADB3BC;
  --fm-btn-oro:     #9B8659;
  --fm-btn-peso:    300;
  --fm-btn-peso-on: 400;
}

/* Móvil: 42px es un objetivo táctil razonable (WCAG pide 44) sin que el
   botón deje de verse fino a 250 de ancho — la proporción queda en 6:1.
   El tracking se afloja porque en columna las etiquetas largas envuelven. */
@media (max-width: 767px){
  :root{
    --fm-btn-ancho: min(100%, 250px);
    --fm-btn-alto:  42px;
    --fm-btn-tam:   11px;
    --fm-btn-track: .18em;
    --fm-btn-pad-x: 18px;
  }
}


/* =========================================================================
   Fernando Mier — Experiencias (scroll horizontal)
   =========================================================================

   Por qué --fm-vw y no 100vw

   100vw incluye la barra de scroll vertical; el área donde de verdad se ve
   el contenido, no. En Windows son unos 15-21 px de diferencia, suficientes
   para que ningún panel quede a ras y para que aparezca una barra de scroll
   horizontal en toda la página.

   El motor publica el ancho real en --fm-vw y lo mantiene al día en cada
   resize. El fallback var(--fm-vw, 100vw) sostiene la maqueta si el JS no
   llega a correr.
   ========================================================================= */

.fm-experiencia {
	--fm-neg:        #000000;              /* fondo */
	--fm-tinta:      #ADB3BC;              /* títulos */
	--fm-tinta-2:    #ADB3BC;              /* párrafos */
	--fm-tinta-3:    #ADB3BC;              /* indicador scroll */
	--fm-margen:     clamp(24px, 8vw, 150px);
	--fm-ratio:      774 / 422;            /* proporción exacta de las fotos */

	/* Punto único para el aire entre el título y la imagen.
	   El diseño de Figma mide ~8.6vh; esto es más, según la nota de Alejandro.
	   Si quedó mucho o poco, se toca SOLO esta línea. */
	--fm-gap-titulo: clamp(40px, 12vh, 110px);

	position: relative;
	background: var(--fm-neg);
	color: var(--fm-tinta);
	overflow: visible;
}

/* Full bleed dentro de un contenedor de Elementor. */
.fm-experiencia {
	width: var(--fm-vw, 100vw);
	margin-inline: calc(50% - var(--fm-vw, 100vw) / 2);
}

/* --- Escenario fijo ------------------------------------------------------ */

.fm-experiencia__stage {
	position: relative;
	height: 100vh;
	height: 100svh;
	overflow: hidden;          /* evita la barra horizontal al desplazar la pista */
	display: flex;
	align-items: center;
}

.fm-experiencia__eyebrow {
	position: absolute;
	top: clamp(20px, 5vh, 48px);
	left: var(--fm-margen);
	z-index: 2;
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--fm-tinta-3);
}

/* --- Pista y paneles ----------------------------------------------------- */

.fm-experiencia__pista {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	height: auto;
	will-change: transform;
}

.fm-experiencia__panel {
	flex: 0 0 var(--fm-vw, 100vw);
	width: var(--fm-vw, 100vw);
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: var(--fm-gap-titulo);
	padding: clamp(80px, 13vh, 150px) var(--fm-margen) clamp(70px, 11vh, 120px);
	box-sizing: border-box;
}

/* El título arranca en el mismo eje vertical que el borde izquierdo de la
   imagen. align-self explícito para no depender del align-items del padre. */
.fm-experiencia__titulo {
	margin: 0;
	align-self: flex-start;
	text-align: left;
	font-family: 'NORD';
	font-size: clamp(20px, 2.2vw, 38px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fm-tinta);
}

.fm-experiencia__cuerpo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(28px, 4vw, 72px);
}

/* --- Imagen -------------------------------------------------------------- */

/* Marco de proporción fija: las tres imágenes ocupan exactamente el mismo
   espacio, así los títulos y los textos quedan alineados de panel a panel.
   El min() con vh evita que la imagen se salga en pantallas bajas o 4:3. */
.fm-experiencia__media {
	margin: 0;
	flex: 0 0 auto;
	width: min(52vw, 94vh);
	aspect-ratio: var(--fm-ratio);
	overflow: hidden;
	background: var(--fm-neg);   /* si algún día sobra 1px, que sea negro, no gris */
}

.fm-experiencia__img,
.fm-experiencia__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fm-experiencia__placeholder {
	background: linear-gradient(120deg, #141414 0%, #1e1e1e 50%, #141414 100%);
}

/* --- Texto --------------------------------------------------------------- */

.fm-experiencia__texto {
	flex: 0 1 auto;
	width: clamp(240px, 24vw, 420px);
}

.fm-experiencia__texto p {
	margin: 0;
	font-family: 'Red Hat Display';
	font-size: clamp(13px, 0.95vw, 16px);
	font-weight: 300;
	line-height: 2;
	letter-spacing: 0.02em;
	text-align: justify;
	text-wrap: pretty;
	color: var(--fm-tinta-2);
}

/* --- Indicador de scroll ------------------------------------------------- */

.fm-experiencia__hint {
	position: absolute;
	left: 50%;
	bottom: clamp(24px, 6vh, 56px);
	transform: translateX(-50%);
	z-index: 2;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	text-transform: uppercase;
	font-family: 'Red Hat Display';
	color: var(--fm-tinta-3);
	transition: opacity 0.4s ease;
}

.fm-experiencia__hint svg {
	display: block;
}

/* =========================================================================
   Estado estático: móvil, sin GSAP, editor de Elementor o reduced motion
   ========================================================================= */

.fm-experiencia.is-estatica .fm-experiencia__stage {
	height: auto;
	overflow: visible;
	display: block;
}

.fm-experiencia.is-estatica .fm-experiencia__eyebrow,
.fm-experiencia.is-estatica .fm-experiencia__hint {
	display: none;
}

.fm-experiencia.is-estatica .fm-experiencia__pista {
	display: block;
	width: 100%;
	transform: none !important;
}

.fm-experiencia.is-estatica .fm-experiencia__panel {
	flex: none;
	width: 100%;
	min-height: 0;
	padding-block: clamp(56px, 9vh, 96px);
}

.fm-experiencia.is-estatica .fm-experiencia__cuerpo {
	flex-direction: column;
	align-items: stretch;
	gap: 28px;
}

.fm-experiencia.is-estatica .fm-experiencia__media {
	width: 100%;
}

.fm-experiencia.is-estatica .fm-experiencia__texto {
	width: 100%;
}

.fm-experiencia.is-estatica .fm-experiencia__texto p {
	text-align: left;
	line-height: 1.85;
}

@media (max-width: 1024px) {
	.fm-experiencia__titulo {
		font-size: clamp(17px, 4.6vw, 26px);
		letter-spacing: 0.2em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fm-experiencia__hint {
		transition: none;
	}
}

/* ============================================================
   FERNANDO MIER — Fix: resaltado rosa al tocar + espaciado header
   ============================================================ */

/* ---------- 1. MATAR EL RESALTADO ROSA AL TOCAR ---------- */

/* Android/iOS pintan un rectángulo sobre cualquier elemento tocable.
   El color viene de esta propiedad; si el kit la definió, sale rosa. */
a,
button,
[role="button"],
input,
textarea,
select,
label,
.elementor-menu-toggle,
.fm-burger,
.fm-drawer__close {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Estados :focus y :active que Elementor o el navegador rellenan */
.elementor-menu-toggle:focus,
.elementor-menu-toggle:active,
.elementor-menu-toggle.elementor-active,
.fm-burger:focus,
.fm-burger:active,
.fm-drawer__close:focus,
.fm-drawer__close:active {
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}

/* Pero conservamos foco visible para teclado (accesibilidad).
   El fallback pasa a #9B8659, el dorado del sistema: el valor anterior no
   pertenecía a la paleta. */
.elementor-menu-toggle:focus-visible,
.fm-burger:focus-visible,
.fm-drawer__close:focus-visible {
  outline: 2px solid var(--fm-accent, #9B8659);
  outline-offset: 4px;
}

/* Si el rosa aparece también en enlaces del menú */
.fm-drawer__nav a:active,
.elementor-nav-menu a:active {
  background-color: transparent !important;
}


/* ---------- 2. SEPARAR LOGO Y HAMBURGUESA ---------- */

/* El contenedor del header debe ocupar todo el ancho para que
   space-between empuje los elementos a los extremos. */
.fm-mheader {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: 20px;
}

/* Evita que el logo se estire y empuje al botón */
.fm-mheader__logo {
  flex: 0 0 auto;
}
.fm-burger {
  flex: 0 0 auto;
  margin-left: auto;   /* lo clava a la derecha pase lo que pase */
}

/* ── Sección Keywords animadas ───────────────────── */
.fm-keywords {
  position: relative;          /* Elementor no lo ofrece en el dropdown */
  overflow: hidden;
  isolation: isolate;
}

.fm-keywords > .e-con-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.fm-keywords__item {
  opacity: 0;
  will-change: opacity, transform, filter;
}

/* Los hijos absolutos no heredan el padding de contenedor del sitio.
   Los 280px van al contenedor, no al .e-con-inner de Elementor. */
.fm-keywords__item {
  width: 280px;
  max-width: 280px;
  padding: 0 !important;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
}

.fm-keywords__item > .e-con-inner {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding: 0 !important;
}

/* Los dos de la derecha se anclan desde la derecha:
   así no se desbordan en viewports menores a 1440. */
.fm-keywords .fm-k--interaccion { left: auto !important; right: 8.5%; }
.fm-keywords .fm-k--asombro     { left: auto !important; right: 3.2%; }

/* Fallback: si GSAP no carga, el texto se ve igual */
.fm-keywords--static .fm-keywords__item {
  opacity: 1;
  filter: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fm-keywords__item {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* ── Móvil: una frase a la vez, centrada ──────────
   Va AL FINAL a propósito. Los selectores repiten .fm-k--* porque
   esas reglas usan !important y ganarían por especificidad. */
@media (max-width: 767px) {
  .fm-keywords .fm-keywords__item,
  .fm-keywords .fm-k--interaccion,
  .fm-keywords .fm-k--asombro {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: min(86%, 340px) !important;
    max-width: none !important;
  }

  /* Elementor pone la alineación en el widget, no en el contenedor. */
  .fm-keywords .fm-keywords__item,
  .fm-keywords .fm-keywords__item .elementor-widget-container,
  .fm-keywords .fm-keywords__item :is(h1, h2, h3, h4, h5, h6, p) {
    text-align: center !important;
  }
}

/* ============================================================
   Neutraliza el botón rosa por defecto de Hello Elementor.
   Origen: reset.css del tema padre -> button:hover/:focus { background:#C36 }
   Con el prefijo `body` subimos a (0,1,2) y ganamos sin depender
   del orden de carga de las hojas.
   ============================================================ */
body button:hover,
body button:focus,
body [type="button"]:hover,
body [type="button"]:focus,
body [type="submit"]:hover,
body [type="submit"]:focus{
  background-color: transparent;
}