/* ==========================================================================
   FM · TRAYECTORIA
   Hoja de estilos de la página /trayectoria/
   Se encola condicionalmente desde functions.php → fm_encolar_trayectoria()

   Bloques:
     S1 · Hero "TRAYECTORIA EN ESCENA"        ← implementado
     S2 · Cifras                               ← implementado
     S3 · Paneles                              ← implementado
     S4 · Prensa                               ← implementado
     S5 · Momentos                             ← implementado
     S6 · Empresas                             ← implementado
     S7 · CTA                                  ← implementado

   --------------------------------------------------------------------------
   REVISIÓN 2026-09 · qué cambia respecto a la versión anterior

     1. COLOR · El azul claro retirado del sistema ya no aparece en esta
        hoja. Las nueve apariciones (paneles, prensa, puntos de momentos y
        titular del CTA) pasan a #ADB3BC. No queda ninguna referencia, ni
        en código ni en comentarios.

        #797D84 SÍ está permitido y se queda donde está: rótulo de paneles,
        eyebrow y textos de prensa, y meta/título/cuerpo de momentos.

     2. S1 HERO · Se elimina el velo .fm-trayhero::after (y su versión de
        móvil). La foto ya trae el velado incorporado desde origen.

     3. S1 HERO · El titular ya no usa text-indent para compensar el
        tracking. text-indent solo afecta a la PRIMERA línea, y por eso
        "TRAYECTORIA" y "EN ESCENA" quedaban desalineadas entre sí. Ahora
        la compensación va con padding-inline-start, que corrige todas las
        líneas por igual.

     4. S2 CIFRAS · El título va a tres renglones en móvil, como el Figma.

     5. S7 CTA · Los botones dejan de declarar medida propia: consumen los
        tokens --fm-btn-* de custom.css. Ver el bloque 06 de esa hoja.

   REVISIÓN 2026-09-21

     6. S4 y S6 · 19 marcas nuevas. Su calibración óptica va en el bloque F,
        al final de la hoja. No se toca ninguna regla anterior.

     7. S6 · Los logos con --fm-esc > 1 salían cortados arriba y abajo: la
        máscara del desvanecido recorta a la caja de la cinta. Bloque G.
   ========================================================================== */


/* ==========================================================================
   FM_TRAYECTORIA_S1 · HERO
   ========================================================================== */

/* --- Contenedor de Elementor --------------------------------------------
   Especificidad (0,2,0) para ganarle a .e-con.e-flex.
   Sin !important, según la convención del proyecto.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Detacher";
  src: url("../fonts/Detacher-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.fm-trayhero-con.e-con {
  --padding-inline-start: 0;
  --padding-inline-end: 0;
  --padding-block-start: 0;
  --padding-block-end: 0;
  padding-inline: 0;
  padding-block: 0;
  max-width: 100%;
}

.fm-trayhero-con > .e-con-inner {
  max-width: 100%;
  padding-inline: 0;
  padding-block: 0;
}

/* --- Sección ------------------------------------------------------------- */
.fm-trayhero {
  /* Único punto de control del alto: proporción del Figma (1440 × 518).
     --fm-trayhero-offset empuja el texto hacia abajo si el header flota
     encima de la imagen. Ver nota al final del bloque. */
  --fm-trayhero-offset: 0px;

  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1440 / 518;
  min-height: 420px;
  overflow: hidden;
  background-color: #01060C;
}

/* --- Imagen -------------------------------------------------------------- */
.fm-trayhero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.fm-trayhero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* --- Velado sobre la foto ------------------------------------------------
   ELIMINADO. La imagen del hero ya viene con el velado aplicado desde
   origen: cualquier capa que se añada aquí lo duplica y apaga el retrato.
   No volver a introducir .fm-trayhero::after.
   ------------------------------------------------------------------------ */

/* --- Contenido ----------------------------------------------------------- */
.fm-trayhero__contenido {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: clamp(20px, 6vw, 128px);
  padding-block-start: var(--fm-trayhero-offset);
  text-align: center;
}

/* Especificidad (0,2,0): hay una regla global que fuerza mayúsculas y
   tracking en párrafos y títulos; esto la neutraliza sin !important. */
.fm-trayhero .fm-trayhero__titulo {
  /* Una sola variable para el tracking: la usan a la vez letter-spacing y
     la compensación óptica. En los breakpoints solo hay que cambiarla a
     ella; el resto se recalcula solo. */
  --fm-trayhero-track: 0.55em;

  margin: 0;

  /* Compensación óptica del tracking.
     letter-spacing añade el hueco TAMBIÉN después de la última letra, así
     que cada línea centrada queda corrida media pista a la izquierda.
     text-indent NO sirve aquí: solo afecta a la primera línea, y por eso
     "TRAYECTORIA" y "EN ESCENA" no quedaban alineadas entre sí. Un padding
     de una pista completa a la izquierda desplaza el centro de la caja
     media pista a la derecha y corrige TODAS las líneas por igual. */
  padding-inline-start: var(--fm-trayhero-track);

  font-family: "Kratch Revotch", sans-serif;
  font-weight: 300;
  font-size: clamp(1.375rem, 3.5vw, 70px);
  line-height: 1.55;
  letter-spacing: var(--fm-trayhero-track);
  text-indent: 0;
  text-transform: uppercase;
  color: #ADB3BC;
  text-wrap: balance;
}

/* --- Entrada al cargar --------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .fm-trayhero__media img {
    animation: fm-trayhero-foto 1200ms ease-out both;
  }

  .fm-trayhero__titulo {
    animation: fm-trayhero-texto 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 180ms both;
  }
}

@keyframes fm-trayhero-foto {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fm-trayhero-texto {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- Responsive ---------------------------------------------------------- */

/* Tablet ancha: la proporción del Figma dejaría una banda demasiado baja. */
@media (max-width: 1199px) {
  .fm-trayhero {
    aspect-ratio: 16 / 7;
    min-height: 380px;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .fm-trayhero {
    aspect-ratio: 2 / 1;
    min-height: 360px;
  }

  .fm-trayhero .fm-trayhero__titulo {
    --fm-trayhero-track: 0.48em;
    font-size: clamp(1.25rem, 4.2vw, 2.25rem);
  }
}

/* Móvil: entra el recorte vertical (900 × 1199) */
@media (max-width: 767px) {
  .fm-trayhero {
    aspect-ratio: 3 / 4;
    min-height: 0;
    max-height: min(78svh, 620px);
  }

  .fm-trayhero__media img {
    object-position: 50% 50%;
  }

  /* Nada de velo extra en móvil: la foto ya lo trae. */

  /* Cuerpo del Figma móvil: el titular ocupa ~70% del ancho del marco,
     no el 55% que daba el 5.4vw anterior. */
  .fm-trayhero .fm-trayhero__titulo {
    --fm-trayhero-track: 0.42em;
    font-size: clamp(1.25rem, 6.4vw, 2rem);
    line-height: 1.62;
  }
}

/* Móvil pequeño */
@media (max-width: 400px) {
  .fm-trayhero .fm-trayhero__titulo {
    --fm-trayhero-track: 0.36em;
    font-size: clamp(1.125rem, 6.4vw, 1.5rem);
  }
}

/* --- Nota sobre el header ------------------------------------------------
   Si el header va FIJO y TRANSPARENTE encima de la imagen (como en el resto
   de las páginas), el título de dos líneas queda demasiado alto. Se corrige
   con una sola línea, sustituyendo el valor de arriba:

     .fm-trayhero { --fm-trayhero-offset: clamp(48px, 8vw, 120px); }

   Si en cambio el hero arranca por debajo de una banda negra sólida (que es
   lo que parece en la captura de Figma), se deja en 0px y basta con que el
   header no sea `position: fixed` en esta página.
   ------------------------------------------------------------------------ */

/* ==========================================================================
   FM_TRAYECTORIA_S2 · CIFRAS
   "EXPERIENCIA CONSTRUIDA EN ESCENA"

   Medidas derivadas del Figma (lienzo 1440):
     · Ancho de contenido ........ 1184px
     · Padding vertical .......... 104px
     · Título .................... 30px / tracking 0.16em / UNA línea
     · Párrafo ................... 16px / interlínea 1.95 / ancho 880px
     · Separación intro → cuerpo . 130px
     · Columnas cuerpo ........... 1.3fr (lista) / 1fr (cifras)
     · Separación entre ítems .... 88px
     · Cifras .................... 50px / tracking 0.16em
     · Separación entre filas .... 112px

   Animación: assets/js/fm-tray-cifras.js (GSAP + ScrollTrigger).
   Sin JS la sección se ve completa y los números muestran su valor real.
   ========================================================================== */


/* --- Contenedor de Elementor --------------------------------------------
   Especificidad (0,2,0) para ganarle a .e-con.e-flex. Sin !important.
   ------------------------------------------------------------------------ */
.elementor .fm-traycifras-con {
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	--padding-block-start: 0;
	--padding-block-end: 0;
	display: block;
	width: 100%;
	max-width: 100%;
	padding-inline: 0;
	padding-block: 0;
}


/* --- Sección ------------------------------------------------------------- */
.fm-traycifras {
	--fm-traycifras-pad-x: clamp(20px, 8vw, 128px);
	--fm-traycifras-max: 1184px;

	/* Tipografía del párrafo introductorio.
	   En el Figma el cuerpo de texto va en caja baja; NORD es una tipografía
	   de solo mayúsculas, así que aquí NO se declara y el párrafo hereda la
	   fuente global del sitio. Si Alejandro confirma otra familia, se cambia
	   únicamente este valor. */
	--fm-traycifras-cuerpo: inherit;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	padding-block: clamp(64px, 8vw, 104px);
	padding-inline: var(--fm-traycifras-pad-x);
	background-color: #01060C;
	color: #ADB3BC;
}

/* Textura de seda de fondo */
.fm-traycifras__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
}

.fm-traycifras__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Velo de legibilidad: retirado, la imagen ya viene velada desde origen. */


.fm-traycifras__interior {
	max-width: var(--fm-traycifras-max);
	margin-inline: auto;
}


/* --- Intro: título + párrafo ---------------------------------------------
   El título ocupa todo el ancho disponible: con 30px y 0.16em de tracking
   entra en una sola línea hasta ~700px de ancho de columna. El límite de
   medida se aplica SOLO al párrafo, no al bloque completo.
   ------------------------------------------------------------------------ */
.fm-traycifras__titulo {
	margin: 0;
	max-width: 100%;
	font-family: "NORD", sans-serif;
	font-weight: 300;
	font-size: 32px;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-wrap: balance;
	color: #ADB3BC;
}

.fm-traycifras__texto {
	margin: clamp(22px, 2.6vw, 34px) 0 0;
	max-width: 880px;
	font-family: "Red Hat Display";
	font-weight: 300;
	font-size: 18px;
	line-height: 1.95;
	letter-spacing: 0.02em;
	text-align: justify;
	text-wrap: pretty;
	color: #ADB3BC;
}


/* --- Cuerpo: lista + cifras ---------------------------------------------- */
.fm-traycifras__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(40px, 5vw, 80px);
	align-items: start;
	margin-top: clamp(56px, 9vw, 130px);
}


/* Lista izquierda */
.fm-traycifras__lista {
	display: grid;
	gap: clamp(26px, 5vw, 88px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fm-traycifras__item {
	position: relative;
	padding-inline-start: clamp(28px, 2.9vw, 42px);
	font-family: "NORD", sans-serif;
	font-weight: 300;
	font-size: 18.5px;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #ADB3BC;
}

/* El "+" decorativo. Alineado a la primera línea, no al centro del bloque,
   para que no se descoloque cuando el texto envuelve en móvil. */
.fm-traycifras__item::before {
	content: "+";
	position: absolute;
	inset-inline-start: 0;
	top: 0.05em;
	font-weight: 100;
	font-size: 1.5em;
	line-height: 1;
	letter-spacing: 0;
	color: #ADB3BC;
}


/* Cifras derecha */
.fm-traycifras__cifras {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(24px, 4.5vw, 72px);
	row-gap: clamp(40px, 7vw, 112px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fm-traycifras__numero {
	margin: 0;
	font-family: "NORD", sans-serif;
	font-weight: 300;
	font-size: clamp(2rem, 3.5vw, 3.125rem);
	line-height: 1;
	letter-spacing: 0.16em;
	color: #ADB3BC;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.fm-traycifras__signo {
	letter-spacing: 0.06em;
}

.fm-traycifras__etiqueta {
	margin: clamp(16px, 1.7vw, 24px) 0 0;
	font-family: "NORD", sans-serif;
	font-weight: 300;
	font-size: clamp(0.75rem, 0.9vw, 18.5px);
	line-height: 1.65;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #ADB3BC;
}


/* --- Estado inicial de la animación --------------------------------------
   La clase .is-anim la pone el JS. Si GSAP no carga o el usuario pidió
   menos movimiento, la clase nunca se añade y todo queda visible.
   ------------------------------------------------------------------------ */
.fm-traycifras.is-anim [data-fm-rev] {
	opacity: 0;
	will-change: transform, opacity;
}


/* --- Responsive ---------------------------------------------------------- */

/* Tablet ancha — el título ya no cabe holgado en una línea */
@media (max-width: 1199px) {
	.fm-traycifras__titulo {
		letter-spacing: 0.13em;
	}

	.fm-traycifras__item {
		letter-spacing: 0.16em;
	}

	.fm-traycifras__cuerpo {
		gap: clamp(36px, 4.5vw, 56px);
	}
}

/* Una sola columna: lista arriba, cifras abajo */
@media (max-width: 991px) {
	.fm-traycifras__texto {
		max-width: 100%;
	}

	.fm-traycifras__cuerpo {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(44px, 7vw, 72px);
		margin-top: clamp(48px, 8vw, 88px);
	}

	.fm-traycifras__lista {
		gap: clamp(24px, 4vw, 40px);
	}

	.fm-traycifras__cifras {
		row-gap: clamp(36px, 6vw, 56px);
	}
}

/* Móvil — las cifras se mantienen en 2×2 */
@media (max-width: 767px) {
	.fm-traycifras {
		padding-block: clamp(56px, 12vw, 84px);
	}

	.fm-traycifras__titulo {
		letter-spacing: 0.1em;
	}

	.fm-traycifras__texto {
		line-height: 1.8;
		font-size: 18px;
	}

	.fm-traycifras__lista {
		gap: 24px;
	}

	.fm-traycifras__cifras {
		column-gap: 20px;
		row-gap: 36px;
	}

	.fm-traycifras__numero {
		letter-spacing: 0.1em;
	}

	.fm-traycifras__etiqueta br {
		display: none;
	}
}

/* Móvil pequeño — una cifra por fila */
@media (max-width: 400px) {
	.fm-traycifras__cifras {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 30px;
	}

	.fm-traycifras__item {
		letter-spacing: 0.12em;
	}
}

/* Accesibilidad de movimiento: red de seguridad además del guard en JS */
@media (prefers-reduced-motion: reduce) {
	.fm-traycifras.is-anim [data-fm-rev] {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   FM_TRAYECTORIA_S3 · PANELES
   Escenarios / Colaboraciones / Testimonios

   Medidas derivadas del Figma (lienzo 1440):
     · Franja a sangre completa, tres columnas iguales, SIN separación
     · Cada panel .......... 480 x 836 px  (proporción nativa 900/1568)
     · Rótulo .............. ~28px / tracking 0.30em / NORD 300
     · Rótulo centrado en el panel

   Animación: ninguna con JS. El zoom del hover es CSS puro
   (transform sobre la imagen, el panel mantiene overflow: hidden).
   ========================================================================== */


/* --- Contenedor de Elementor --------------------------------------------
   Especificidad (0,2,0) para ganarle a .e-con.e-flex. Sin !important.
   ------------------------------------------------------------------------ */
.elementor .fm-traypaneles-con {
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	--padding-block-start: 0;
	--padding-block-end: 0;
	display: block;
	width: 100%;
	max-width: 100%;
	padding-inline: 0;
	padding-block: 0;
}


/* --- Sección ------------------------------------------------------------- */
.fm-traypaneles {
	/* Único punto de control del zoom y de su curva */
	--fm-traypaneles-zoom: 1.06;
	--fm-traypaneles-dur: 720ms;
	--fm-traypaneles-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Alto del panel. La proporción nativa manda, pero se recorta por
	   arriba para que en pantallas anchas no ocupe más que el viewport. */
	--fm-traypaneles-alto-max: min(86vh, 880px);

	position: relative;
	width: 100%;
	background-color: #01060C;
}

.fm-traypaneles__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fm-traypaneles__item {
	display: block;
	min-width: 0;
}


/* --- Panel ---------------------------------------------------------------
   El <a> es la caja que recorta. La imagen escala dentro de él.
   ------------------------------------------------------------------------ */
.fm-traypaneles__panel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 900 / 1568;
	max-height: var(--fm-traypaneles-alto-max);
	text-decoration: none;
	color: #ADB3BC;
	isolation: isolate;
}


/* --- Imagen -------------------------------------------------------------- */
.fm-traypaneles__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	transform: scale(1);
	transform-origin: center center;
	transition: transform var(--fm-traypaneles-dur) var(--fm-traypaneles-ease);
	will-change: transform;
}

.fm-traypaneles__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}


/* --- Velo de legibilidad -------------------------------------------------
   ⚠ REVISAR CON RAYMOND: esta capa oscurece la foto del panel. Si las tres
   imágenes ya vienen veladas desde origen, este bloque y la regla de hover
   que lo aclara se borran enteros (igual que se hizo en el hero).
   ------------------------------------------------------------------------ */
/*.fm-traypaneles__velo {*/
/*	position: absolute;*/
/*	inset: 0;*/
/*	z-index: -1;*/
/*	display: block;*/
/*	background:*/
/*		linear-gradient(180deg,*/
/*			rgba(1, 6, 12, 0.42) 0%,*/
/*			rgba(1, 6, 12, 0.14) 42%,*/
/*			rgba(1, 6, 12, 0.68) 100%);*/
/*	transition: opacity var(--fm-traypaneles-dur) var(--fm-traypaneles-ease);*/
/*	pointer-events: none;*/
/*}*/


/* --- Rótulo -------------------------------------------------------------- */
.fm-traypaneles__rotulo {
	position: relative;
	max-width: calc(100% - clamp(16px, 3vw, 40px) * 2);
	font-family: "NORD", sans-serif;
	font-weight: 300;
	font-size: clamp(0.8125rem, 1.9vw, 1.75rem);
	line-height: 1.35;
	letter-spacing: 0.3em;

	/* Compensa el espacio sobrante que el tracking añade tras la última
	   letra, para que el texto quede ópticamente centrado. */
	text-indent: 0.3em;
	text-align: center;
	text-transform: uppercase;
	color: #797D84;
	text-shadow: 0 1px 24px rgba(1, 6, 12, 0.55);
}


/* --- Interacción ---------------------------------------------------------
   Solo en dispositivos con puntero real. En táctil no hay estado hover
   posible y el primer toque no debe disparar una animación fantasma.
   ------------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
	.fm-traypaneles__panel:hover .fm-traypaneles__media,
	.fm-traypaneles__panel:focus-visible .fm-traypaneles__media {
		transform: scale(var(--fm-traypaneles-zoom));
	}

	.fm-traypaneles__panel:hover .fm-traypaneles__velo,
	.fm-traypaneles__panel:focus-visible .fm-traypaneles__velo {
		opacity: 0.55;
	}

	.fm-traypaneles__panel:hover .fm-traypaneles__rotulo,
	.fm-traypaneles__panel:focus-visible .fm-traypaneles__rotulo {
		font-weight: 400;
	}
}

/* Foco de teclado visible sobre foto oscura */
.fm-traypaneles__panel:focus-visible {
	outline: 2px solid #9B8659;
	outline-offset: -6px;
}

/* Hello Elementor pinta los estados interactivos con su rosa #C36.
   Se neutraliza igual que en el resto del sitio. */
body .fm-traypaneles__panel:hover,
body .fm-traypaneles__panel:focus {
	background-color: transparent;
	color: #ADB3BC;
}


/* --- Responsive ----------------------------------------------------------- */

/* Tablet ancha: se mantienen las tres columnas, se recorta el alto para que
   la franja no se coma la pantalla y baja el tracking del rótulo, que a
   esta anchura de columna ya empieza a partirse en dos líneas. */
@media (max-width: 1199px) {
	.fm-traypaneles {
		--fm-traypaneles-alto-max: min(76vh, 680px);
	}

	.fm-traypaneles__rotulo {
		letter-spacing: 0.22em;
		text-indent: 0.22em;
	}
}

/* A una sola columna: con la proporción nativa (1.74 veces el ancho) cada
   panel mediría más de un viewport. Se pasa a banda apaisada de alto fijo
   y el object-fit decide el encuadre. */
@media (max-width: 991px) {
	.fm-traypaneles__lista {
		grid-template-columns: minmax(0, 1fr);
	}

	.fm-traypaneles__panel {
		aspect-ratio: auto;
		height: min(52vh, 420px);
		max-height: none;
	}

	.fm-traypaneles__media img {
		object-position: center 32%;
	}

	.fm-traypaneles__rotulo {
		font-size: clamp(1rem, 3.4vw, 1.5rem);
		letter-spacing: 0.28em;
		text-indent: 0.28em;
	}
}

@media (max-width: 767px) {
	.fm-traypaneles__panel {
		height: min(46vh, 340px);
	}

	.fm-traypaneles__rotulo {
		font-size: clamp(0.875rem, 4.2vw, 1.25rem);
	}
}

@media (max-width: 400px) {
	.fm-traypaneles__panel {
		height: 280px;
	}

	.fm-traypaneles__rotulo {
		letter-spacing: 0.2em;
		text-indent: 0.2em;
	}
}


/* --- Accesibilidad -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.fm-traypaneles__media,
	.fm-traypaneles__velo {
		transition: none;
	}

	.fm-traypaneles__panel:hover .fm-traypaneles__media,
	.fm-traypaneles__panel:focus-visible .fm-traypaneles__media {
		transform: none;
	}
}

/* ==========================================================================
   FM_TRAYECTORIA_S4 · PRENSA
   "PRENSA / IMPACTANTE" + carrusel de logos

   Marcado: template-parts/trayectoria-prensa.php  →  [fm_trayectoria_prensa]
   Animación: assets/js/fm-tray-prensa.js (GSAP).

   Notas de la revisión anterior:
     1. La pista heredaba justify-content: center de la rejilla estática.
        Con nowrap y 9 slots en un contenedor de 5, el navegador centraba
        el desbordamiento y corría la pista dos slots a la izquierda.
     2. El escalado pasa del <li> a .fm-trayprensa__caja: en este contexto
        el <li> ignora transform, mientras que el <span> interior no.
     3. El recorte pasa a .fm-trayprensa__carrusel, que mide lo mismo que
        la pista; antes el clip estaba en la sección y salía asimétrico.

   Degradación: sin JS / sin GSAP / prefers-reduced-motion el JS no añade
   .is-carrusel y la pista se muestra como rejilla estática con todos los
   logos visibles y sin movimiento.
   ========================================================================== */


/* --- Contenedor de Elementor --------------------------------------------
   Especificidad (0,2,0) para ganarle a .e-con.e-flex. Sin !important.
   ------------------------------------------------------------------------ */
.e-con.fm-trayprensa-con {
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	--padding-block-start: 0;
	--padding-block-end: 0;

	padding-inline: 0;
	padding-block: 0;
	background-color: #01060C;
}

.e-con.fm-trayprensa-con > .e-con-inner {
	max-width: 100%;
	padding-inline: 0;
	padding-block: 0;
}


/* --- Sección -------------------------------------------------------------
   --fm-slots es la ÚNICA pieza que cambia por breakpoint: el CSS reparte
   el ancho de los slots y el JS lee la misma variable para saber cuál es
   el centro. Toda la lógica responsive vive aquí, no en el JS.
   ------------------------------------------------------------------------ */
.fm-trayprensa {
	--fm-slots: 5;
	--fm-caja-ancho: clamp(140px, 14.5vw, 224px);
	--fm-caja-ratio: 3.2 / 1;
	--fm-slot-dormido: 0.74;

	box-sizing: border-box;
	width: 100%;
	padding-block: clamp(72px, 9.5vw, 132px);
	background-color: #01060C;
}

.fm-trayprensa *,
.fm-trayprensa *::before,
.fm-trayprensa *::after {
	box-sizing: border-box;
}


/* --- Bloque de texto ----------------------------------------------------- */
.fm-trayprensa__interior {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(24px, 6vw, 80px);
	text-align: center;
}

.fm-trayprensa__eyebrow {
	margin: 0;
	font-family: 'NORD', sans-serif;
	font-weight: 300;
	font-size: 32px;
	line-height: 1.4;
	letter-spacing: 0.42em;
	/* compensa el tracking del último carácter para que quede centrado */
	text-indent: 0.42em;
	text-transform: uppercase;
	color: #797D84;
}

.fm-trayprensa__titulo {
	margin: clamp(16px, 2.2vw, 28px) 0 0;
	font-family: 'Detacher', sans-serif;
	font-weight: 400;
	font-size: clamp(32px, 6.4vw, 88px);
	line-height: 1.06;
	letter-spacing: 0.16em;
	text-indent: 0.16em;
	text-transform: uppercase;
	color: #797D84;
}

.fm-trayprensa__texto {
	max-width: min(100%, 58em);
	margin: clamp(18px, 2.4vw, 30px) auto 0;
	font-family: 'Red Hat Display', sans-serif;
	font-weight: 300;
	font-size: clamp(13px, 1.1vw, 20px);
	line-height: 1.9;
	letter-spacing: 0.04em;
	color: #797D84;
}


/* --- Carrusel ------------------------------------------------------------ */
.fm-trayprensa__carrusel {
	width: 100%;
	margin-top: clamp(40px, 5.5vw, 76px);
}

/*
 * El recorte va aquí y no en la sección: la caja de recorte tiene que medir
 * exactamente lo mismo que la pista para que queden el mismo número de slots
 * ocultos a cada lado. clip y no hidden, para no romper position: sticky.
 */
.fm-trayprensa__carrusel.is-carrusel {
	overflow-x: clip;
}

/* Rótulo de la marca activa. Solo tiene sentido con el carrusel vivo. */
.fm-trayprensa__rotulo {
	margin: 0 0 clamp(26px, 3.4vw, 48px);
	min-height: 1.4em;
	text-align: center;
	font-family: 'NORD', sans-serif;
	font-weight: 300;
	font-size: clamp(11px, 1.05vw, 22px);
	line-height: 1.4;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	text-transform: uppercase;
	color: #797D84;
}

.fm-trayprensa__carrusel:not(.is-carrusel) .fm-trayprensa__rotulo {
	display: none;
}


/* --- Pista: estado base = rejilla estática (degradación) ----------------- */
.fm-trayprensa__pista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(28px, 4vw, 60px);
	margin: 0;
	padding: 0 clamp(24px, 6vw, 80px);
	list-style: none;
}

.fm-trayprensa__slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #ADB3BC;
}


/* --- Pista: estado carrusel (lo activa el JS) ----------------------------
   flex-start es obligatorio: con nowrap y la pista más ancha que su caja,
   center reparte el desbordamiento a los dos lados y desalinea los slots
   respecto al índice que calcula el JS.
   ------------------------------------------------------------------------ */
.is-carrusel .fm-trayprensa__pista {
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	padding-inline: 0;
	will-change: transform;
}

.is-carrusel .fm-trayprensa__slot {
	flex: 0 0 calc(100% / var(--fm-slots));
	max-width: calc(100% / var(--fm-slots));
	color: rgba(173, 179, 188, 0.42);
	transition: color 780ms ease;
}

.is-carrusel .fm-trayprensa__slot.is-activa {
	color: #ADB3BC;
}

/*
 * El escalado va en la caja, no en el <li>: ahí el transform sí se aplica.
 * Además así el slot mantiene su ancho de layout intacto y el JS puede
 * medirlo sin que el transform le mienta.
 */
.is-carrusel .fm-trayprensa__caja {
	transform: scale(var(--fm-slot-dormido));
	transition: transform 780ms ease;
}

.is-carrusel .fm-trayprensa__slot.is-activa .fm-trayprensa__caja {
	transform: scale(1);
}


/* --- Caja del logo -------------------------------------------------------
   Caja fija con proporción común: el SVG se ajusta solo por
   preserveAspectRatio y --fm-esc corrige el peso óptico marca por marca.
   ------------------------------------------------------------------------ */
.fm-trayprensa__caja {
	display: grid;
	place-items: center;
	width: var(--fm-caja-ancho);
	max-width: 100%;
	aspect-ratio: var(--fm-caja-ratio);
}

.fm-trayprensa__caja svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: scale(var(--fm-esc, 1));
}

/* Nombre de la marca para lectores de pantalla */
.fm-trayprensa__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}


/* --- Calibración óptica por marca ---------------------------------------
   Los valores definitivos están en el bloque C.3 (y F.1 para las marcas
   nuevas), al final de la hoja.
   ------------------------------------------------------------------------ */
.fm-trayprensa__slot[data-marca="hardrock"]       { --fm-esc: 1; }
.fm-trayprensa__slot[data-marca="hyatt"]          { --fm-esc: 1; }
.fm-trayprensa__slot[data-marca="nickelodeon"]    { --fm-esc: 1; }
.fm-trayprensa__slot[data-marca="marriott"]       { --fm-esc: 1; }
.fm-trayprensa__slot[data-marca="moonpalace"]     { --fm-esc: 1; }
.fm-trayprensa__slot[data-marca="excellence"]     { --fm-esc: 1; }
.fm-trayprensa__slot[data-marca="finest"]         { --fm-esc: 1; }
.fm-trayprensa__slot[data-marca="garzablanca"]    { --fm-esc: 1; }
.fm-trayprensa__slot[data-marca="villadelpalmar"] { --fm-esc: 1; }


/* --- Responsive ---------------------------------------------------------- */

/* Tablet ancha — de 5 a 3 slots */
@media (max-width: 1199px) {
	.fm-trayprensa {
		--fm-slots: 3;
		--fm-caja-ancho: clamp(140px, 19vw, 210px);
	}

	.fm-trayprensa__titulo {
		letter-spacing: 0.13em;
		text-indent: 0.13em;
	}
}

/* Una columna de texto más estrecha */
@media (max-width: 991px) {
	.fm-trayprensa {
		--fm-slot-dormido: 0.68;
	}

	.fm-trayprensa__texto {
		max-width: min(100%, 46em);
	}
}

/* Móvil — siguen siendo 3 slots, así que la caja tiene que caber en 1/3 */
@media (max-width: 767px) {
	.fm-trayprensa {
		padding-block: clamp(56px, 12vw, 84px);
		--fm-caja-ancho: min(27vw, 170px);
	}

	.fm-trayprensa__eyebrow,
	.fm-trayprensa__rotulo {
		letter-spacing: 0.3em;
		text-indent: 0.3em;
	}

	.fm-trayprensa__titulo {
		letter-spacing: 0.1em;
		text-indent: 0.1em;
	}

	.fm-trayprensa__texto {
		line-height: 1.8;
	}

	.fm-trayprensa__pista {
		gap: clamp(24px, 7vw, 40px);
	}
}

/* Móvil pequeño — un solo logo a la vez, sin apagado lateral */
@media (max-width: 560px) {
	.fm-trayprensa {
		--fm-slots: 1;
		--fm-slot-dormido: 1;
		/* con un solo slot la caja ya puede ocupar el ancho útil */
		--fm-caja-ancho: min(64vw, 240px);
	}

	.is-carrusel .fm-trayprensa__slot {
		color: #ADB3BC;
	}
}

/* Accesibilidad de movimiento: red de seguridad además del guard del JS */
@media (prefers-reduced-motion: reduce) {
	.is-carrusel .fm-trayprensa__slot,
	.is-carrusel .fm-trayprensa__caja {
		transition: none;
	}
}

/* ==========================================================================
   FM_TRAYECTORIA_S5 · MOMENTOS
   Carrusel de ancho completo con la diapositiva activa centrada y las
   vecinas asomando recortadas por el borde del viewport.

   Cada momento lleva SU PROPIO bloque de texto: dos rótulos de contexto
   (izquierda y derecha, alineados a los bordes de la lámina), título y
   párrafo. Al cambiar de imagen cambia todo el bloque con un fundido.

   Marcado:   template-parts/trayectoria-momentos.php → [fm_trayectoria_momentos]
   Animación: assets/js/fm-tray-momentos.js

   Degradación (sin JS / sin GSAP):
     · La escena queda como galería con scroll horizontal y scroll-snap.
     · El texto del momento 01 (marcado .is-activa desde PHP) se ve completo.
     · Con prefers-reduced-motion no hay autoplay ni desplazamiento animado:
       los cambios son instantáneos, pero el carrusel sigue siendo usable.

   Medidas derivadas del Figma (lienzo 1440):
     · Ancho de la lámina .......... ~1008px  (72% del viewport)
     · Separación entre láminas .... ~79px    (5.5% del viewport)
     · Proporción de la imagen ..... 3 / 2
     · Rótulos ..................... 12px / tracking 0.2em, en los bordes
                                     de la lámina, a la altura del título
     · Título ...................... 36px / tracking 0.22em / dos líneas
     · Párrafo ..................... 16px / interlínea 1.95 / ~530px
   ========================================================================== */


/* --- Contenedor de Elementor --------------------------------------------
   Especificidad (0,2,0) para ganarle a .e-con.e-flex. Sin !important.
   ------------------------------------------------------------------------ */
.elementor .fm-traymomentos-con {
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	--padding-block-start: 0;
	--padding-block-end: 0;
	display: block;
	width: 100%;
	max-width: 100%;
	padding-inline: 0;
	padding-block: 0;
}


/* --- Sección ------------------------------------------------------------- */
.fm-traymomentos {
	/* Ancho real del contenido. El JS lo sustituye por escena.clientWidth,
	   que es el único valor fiable: 100vw incluye la barra de scroll y
	   descuadra el centrado. Sin JS este respaldo es suficiente. */
	--fm-tm-vw: 100vw;

	/* Geometría de la lámina. Tope de 1400px = ancho nativo del WebP:
	   por encima de eso la imagen se escalaría hacia arriba.
	   El pie usa esta MISMA variable, y por eso los rótulos caen siempre
	   sobre los bordes de la imagen activa en cualquier breakpoint. */
	--fm-tm-w: min(calc(var(--fm-tm-vw) * 0.72), 1400px);
	--fm-tm-gap: calc(var(--fm-tm-vw) * 0.055);
	--fm-tm-ratio: 3 / 2;

	/* Opacidad de las láminas que no están centradas.
	   Si Alejandro las quiere a plena luz, sube esto a 1. */
	--fm-tm-apagada: 0.55;

	--fm-tm-pad-x: clamp(20px, 8vw, 128px);
	--fm-tm-dur: 0.85s;

	/* Misma nota que en la S2: NORD es de solo mayúsculas. Si Alejandro
	   confirma la familia del cuerpo de texto, se cambia solo esta línea. */
	--fm-tm-cuerpo: inherit;

	position: relative;
	width: 100%;
	padding-block: clamp(64px, 8vw, 104px);
	background-color: #01060C;
	color: #ADB3BC;
}


/* ==========================================================================
   ESCENA Y PISTA
   ========================================================================== */

/* Sin JS: galería con scroll horizontal. El padding lateral permite que la
   primera y la última lámina lleguen al centro. */
.fm-traymomentos__escena {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	padding-inline: calc((100% - var(--fm-tm-w)) / 2);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.fm-traymomentos__escena::-webkit-scrollbar {
	display: none;
}

/* Con JS: la pista se mueve por transform y la escena solo recorta.
   'clip' y no 'hidden' para no romper posicionados sticky de la página. */
.fm-traymomentos.is-carrusel .fm-traymomentos__escena {
	overflow-x: clip;
	overflow-y: visible;
	scroll-snap-type: none;
	padding-inline: 0;
	cursor: grab;
	touch-action: pan-y;
}

.fm-traymomentos.is-carrusel.is-arrastrando .fm-traymomentos__escena {
	cursor: grabbing;
}

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

.fm-traymomentos.is-carrusel .fm-traymomentos__pista {
	will-change: transform;
}

/* Respaldo de la animación cuando GSAP no está disponible. El JS añade
   esta clase solo si va a mover la pista con transición CSS. */
.fm-traymomentos__pista.usa-css {
	transition: transform var(--fm-tm-dur) cubic-bezier(0.65, 0.05, 0.36, 1);
}

.fm-traymomentos__pista.usa-css.sin-transicion {
	transition: none;
}


/* --- Lámina --------------------------------------------------------------
   flex-basis fijo: el JS mide con offsetWidth, que no lo distorsionan los
   transforms de la pista, a diferencia de getBoundingClientRect().
   ------------------------------------------------------------------------ */
.fm-traymomentos__slide {
	flex: 0 0 var(--fm-tm-w);
	width: var(--fm-tm-w);
	margin: 0;
	scroll-snap-align: center;
}

.fm-traymomentos__figura {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	aspect-ratio: var(--fm-tm-ratio);
	background-color: #070d16;
}

.fm-traymomentos__figura img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Apagado de las láminas laterales.
   NO es un velo de legibilidad: es el estado "inactivo" del carrusel, y
   desaparece por completo (opacity: 0) en la lámina centrada. Si Alejandro
   prefiere todas a plena luz, basta con poner --fm-tm-apagada: 1. */
.fm-traymomentos__figura::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #01060C;
	opacity: calc(1 - var(--fm-tm-apagada));
	transition: opacity var(--fm-tm-dur) ease;
	pointer-events: none;
}

.fm-traymomentos__slide.is-activa .fm-traymomentos__figura::after {
	opacity: 0;
}

/* Sin JS no hay .is-activa más que en la primera: mejor mostrarlas todas a
   plena luz que dejar la galería en penumbra. */
.fm-traymomentos:not(.is-carrusel) .fm-traymomentos__figura::after {
	opacity: 0;
}


/* ==========================================================================
   PIE: puntos + bloque de texto del momento
   ========================================================================== */

/* El pie mide exactamente lo mismo que la lámina, para que los rótulos
   laterales caigan sobre los bordes de la imagen activa. */
.fm-traymomentos__pie {
	width: var(--fm-tm-w);
	max-width: calc(100% - var(--fm-tm-pad-x) * 2);
	margin-inline: auto;
	padding-block-start: clamp(28px, 3.5vw, 44px);
	text-align: center;
}


/* --- Puntos de paginación ------------------------------------------------ */
.fm-traymomentos__puntos {
	display: flex;
	justify-content: center;
	gap: 18px;
	margin: 0 0 clamp(32px, 4vw, 56px);
	padding: 0;
	list-style: none;
}

.fm-traymomentos__punto {
	position: relative;
	width: 6px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #ADB3BC;
	opacity: 0.35;
	cursor: pointer;
	transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

/* Área táctil de 24px sin alterar el tamaño visual */
.fm-traymomentos__punto::before {
	content: "";
	position: absolute;
	inset: -9px;
}

/* El punto activo se distingue por opacidad y tamaño, no por color:
   el gris del sistema es uno solo. */
.fm-traymomentos__punto.is-activa {
	background-color: #ADB3BC;
	opacity: 1;
	transform: scale(1.2);
}

/* reset.css del tema padre pinta los botones de #C36 en hover/focus.
   Se neutraliza con un selector de mayor especificidad. */
body .fm-traymomentos__punto:hover,
body .fm-traymomentos__punto:focus,
body .fm-traymomentos__punto:focus-visible {
	background-color: #ADB3BC;
	opacity: 1;
}

.fm-traymomentos__punto:focus-visible {
	outline: 2px solid #9B8659;
	outline-offset: 8px;
}


/* --- Bloque de texto por momento ----------------------------------------
   Todos los textos ocupan la MISMA celda del grid: la altura la marca el
   más alto y no hay salto de layout al cambiar de diapositiva.
   ------------------------------------------------------------------------ */
.fm-traymomentos__textos {
	display: grid;
	grid-template-columns: 1fr;
}

.fm-traymomentos__texto {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition:
		opacity 0.55s ease,
		transform 0.55s ease,
		visibility 0s linear 0.55s;
}

.fm-traymomentos__texto.is-activa {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 0.55s ease 0.12s,
		transform 0.55s ease 0.12s,
		visibility 0s;
}


/* --- Fila del título: rótulos a los bordes, título al centro -------------
   Los rótulos van absolutos para que NO empujen al título: así el título
   queda centrado en la lámina aunque los rótulos midan distinto.
   ------------------------------------------------------------------------ */
.fm-traymomentos__fila {
	position: relative;
	margin-block-end: clamp(24px, 3vw, 40px);
}

.fm-traymomentos__meta {
	position: absolute;
	font-family: NORD;
	top: 50%;
	max-width: 22%;
	color: #797D84;
	font-size: 0.75rem;
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transform: translateY(-50%);
}

.fm-traymomentos__meta--izq {
	left: 0;
	text-align: left;
}

.fm-traymomentos__meta--der {
	right: 0;
	text-align: right;
}

.fm-traymomentos__titulo {
	max-width: min(100%, 640px);
	margin: 0 auto;
	color: #797D84;
	font-family: NORD;
	font-size: clamp(1.375rem, 2.5vw, 2.25rem);
	font-weight: 300;
	line-height: 1.45;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-wrap: balance;
}

.fm-traymomentos__cuerpo {
	max-width: min(100%, 33em);
	margin: 0 auto;
	color: #797D84;
	font-family: "Red Hat Display";
	font-size: 18px;
	line-height: 1.95;
	letter-spacing: 0.02em;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Portátiles pequeños ------------------------------------------------- */
@media (max-width: 1199px) {

	.fm-traymomentos {
		--fm-tm-w: calc(var(--fm-tm-vw) * 0.76);
		--fm-tm-gap: calc(var(--fm-tm-vw) * 0.05);
	}

	.fm-traymomentos__titulo {
		letter-spacing: 0.18em;
	}

	.fm-traymomentos__meta {
		max-width: 20%;
	}
}


/* --- Tablet: los rótulos se apilan encima del título ---------------------
   A este ancho ya no cabe nada a los lados sin partir palabras, así que
   pasan a flujo normal, en una línea sobre el título y separados por un
   punto medio. El punto solo aparece si hay un rótulo antes.
   ------------------------------------------------------------------------ */
@media (max-width: 991px) {

	.fm-traymomentos {
		--fm-tm-w: calc(var(--fm-tm-vw) * 0.82);
		--fm-tm-gap: calc(var(--fm-tm-vw) * 0.04);
	}

	.fm-traymomentos__fila {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: center;
		column-gap: 10px;
	}

	.fm-traymomentos__meta {
		position: static;
		max-width: none;
		text-align: center;
		transform: none;
	}

	.fm-traymomentos__meta--izq {
		order: 1;
	}

	.fm-traymomentos__meta--der {
		order: 2;
	}

	.fm-traymomentos__meta--izq ~ .fm-traymomentos__meta--der::before {
		content: "·";
		margin-inline-end: 10px;
	}

	.fm-traymomentos__titulo {
		flex: 0 0 100%;
		order: 3;
		margin-block-start: clamp(16px, 2.5vw, 24px);
	}
}


/* --- Móvil --------------------------------------------------------------- */
@media (max-width: 767px) {

	.fm-traymomentos {
		--fm-tm-w: calc(var(--fm-tm-vw) * 0.86);
		--fm-tm-gap: calc(var(--fm-tm-vw) * 0.04);
		--fm-tm-ratio: 4 / 3;
		--fm-tm-apagada: 0.7;
	}

	.fm-traymomentos__pie {
		max-width: calc(100% - 40px);
	}

	.fm-traymomentos__puntos {
		gap: 14px;
		margin-bottom: 32px;
	}

	.fm-traymomentos__meta {
		font-size: 0.6875rem;
		letter-spacing: 0.16em;
	}

	.fm-traymomentos__titulo {
		letter-spacing: 0.14em;
		line-height: 1.6;
	}

	.fm-traymomentos__cuerpo {
		font-size: 0.9375rem;
		line-height: 1.85;
	}
}


/* --- Móvil pequeño ------------------------------------------------------- */
@media (max-width: 400px) {

	.fm-traymomentos {
		--fm-tm-w: calc(var(--fm-tm-vw) * 0.9);
		--fm-tm-gap: calc(var(--fm-tm-vw) * 0.035);
		--fm-tm-ratio: 1 / 1;
	}

	.fm-traymomentos__puntos {
		gap: 12px;
	}
}


/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */

/* En táctil no hay hover: las láminas laterales se apagan menos para que se
   lean como parte de la galería y no como un error de carga. */
@media (hover: none) {

	.fm-traymomentos {
		--fm-tm-apagada: 0.72;
	}
}

@media (prefers-reduced-motion: reduce) {

	.fm-traymomentos__pista.usa-css,
	.fm-traymomentos__texto,
	.fm-traymomentos__figura::after,
	.fm-traymomentos__punto {
		transition: none;
	}

	.fm-traymomentos__texto {
		transform: none;
	}
}

/* ==========================================================================
   FM_TRAYECTORIA_S6 · EMPRESAS QUE HAN CONFIADO
   Banda dorada + marquee continuo de logos

   Marcado:   template-parts/trayectoria-confianza.php  →  [fm_trayectoria_confianza]
   Animación: assets/js/fm-tray-marquee.js (GSAP) — motor genérico,
              inicializa TODAS las instancias de [data-fm-marquee] de la página.

   Diferencia con la S4: aquí NO hay pasos ni logo activo. Es una cinta
   continua, velocidad constante, sin pausas ni saltos.

   Degradación:
     · Sin JS / sin GSAP / prefers-reduced-motion → la pista se queda
       quieta en su posición inicial y se ven los primeros logos. La banda
       sigue completa y legible.

   Los SVG son los MISMOS de /eventos/ y de la S4, inyectados por
   fm_logo_marca() con namespace propio (tca / tcb) para no chocar de ids
   de clipPath con la S4 (que usa tp).
   ========================================================================== */


/* --- Contenedor de Elementor --------------------------------------------
   Especificidad (0,2,0) para ganarle a .e-con.e-flex. Sin !important.
   ------------------------------------------------------------------------ */
.elementor .fm-trayconfianza-con {
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	--padding-block-start: 0;
	--padding-block-end: 0;
	padding-inline: 0;
	padding-block: 0;
	max-width: 100%;
	width: 100%;
}


/* --- Sección -------------------------------------------------------------
   Todos los mandos de la banda viven aquí. Cambiando estas variables se
   ajusta densidad, velocidad y tamaño sin tocar ninguna otra regla.
   ------------------------------------------------------------------------ */
.fm-trayconfianza {
	/* Paleta */
	--fm-tc-fondo: #9B8659;
	--fm-tc-tinta: #ADB3BC;

	/* Ancho de cada hueco de logo. Manda la densidad de la cinta:
	   a 1440px → 360px = 4 logos a la vista, como en el Figma. */
	--fm-tc-slot: clamp(160px, 25vw, 360px);

	/* Caja óptica común de todos los logos (misma que en eventos y S4). */
	--fm-tc-caja: 3.2 / 1;
	--fm-tc-ancho-logo: 62%;

	/* Desvanecido de los bordes de la cinta. 0% lo desactiva. */
	--fm-tc-fade: 7%;

	position: relative;
	background-color: #9B8659;
	color: #ADB3BC;
	padding-block: clamp(48px, 6.5vw, 92px);
	overflow-x: clip;
}


/* --- Título --------------------------------------------------------------
   text-indent compensa el letter-spacing sobrante de la última letra:
   sin él el texto centrado queda desplazado media pista a la izquierda.
   ------------------------------------------------------------------------ */
.fm-trayconfianza__titulo {
	margin: 0 auto;
	/*max-width: min(100%, 24em);*/
	padding-inline: clamp(20px, 5vw, 64px);
	font-family: "NORD", sans-serif;
	font-weight: 300;
	font-size: clamp(28px, 1.25vw, 32px);
	line-height: 1.45;
	letter-spacing: 0.14em;
	text-indent: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: #ADB3BC;
}


/* --- Cinta ---------------------------------------------------------------
   overflow-x: clip (no hidden) para no romper ningún sticky de la página.
   La máscara desvanece los logos que entran y salen contra el dorado.
   ------------------------------------------------------------------------ */
.fm-trayconfianza__marquee {
	margin-top: clamp(38px, 5vw, 76px);
	overflow-x: clip;
	overflow-y: visible;

	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--fm-tc-fade),
		#000 calc(100% - var(--fm-tc-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--fm-tc-fade),
		#000 calc(100% - var(--fm-tc-fade)),
		transparent 100%
	);
}

/* Velocidad de la cinta en píxeles por segundo. La lee el JS en tiempo de
   ejecución, así que toda la lógica responsive vive aquí, en el CSS.
   Sube el número = va más rápido. */
.fm-trayconfianza__marquee[data-fm-marquee] {
	--fm-marquee-vel: 55;
}

.fm-trayconfianza__pista {
	display: flex;
	width: max-content;
	will-change: transform;
}

.fm-trayconfianza__grupo {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fm-trayconfianza__slot {
	flex: 0 0 var(--fm-tc-slot);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}


/* --- Logo ----------------------------------------------------------------
   Caja fija + preserveAspectRatio: los apaisados topan por ancho y los
   altos por alto, que es lo que empareja el peso visual. --fm-esc es el
   ajuste fino por marca (mismos valores calibrados en /eventos/).
   ------------------------------------------------------------------------ */
.fm-trayconfianza__caja {
	display: block;
	width: var(--fm-tc-ancho-logo);
	aspect-ratio: var(--fm-tc-caja);
	scale: var(--fm-esc, 1);
	color: #ADB3BC;
}

.fm-trayconfianza__caja svg {
	display: block;
	width: 100%;
	height: 100%;
	color: #ADB3BC;
}

.fm-trayconfianza__slot--nickelodeon    { --fm-esc: 1.22; }
.fm-trayconfianza__slot--excellence     { --fm-esc: 1.00; }
.fm-trayconfianza__slot--hyatt          { --fm-esc: 0.95; }
.fm-trayconfianza__slot--moonpalace     { --fm-esc: 0.86; }
.fm-trayconfianza__slot--marriott       { --fm-esc: 0.84; }
.fm-trayconfianza__slot--garzablanca    { --fm-esc: 0.88; }
.fm-trayconfianza__slot--finest         { --fm-esc: 1.02; }
.fm-trayconfianza__slot--hardrock       { --fm-esc: 1.15; }
.fm-trayconfianza__slot--villadelpalmar { --fm-esc: 1.23; }


/* --- Texto solo para lectores de pantalla -------------------------------- */
.fm-trayconfianza__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   RESPONSIVE
   Solo se toca la densidad y el respiro. La velocidad baja un poco en
   pantallas pequeñas para que no se sienta acelerada.
   ========================================================================== */

@media (max-width: 1199px) {
	.fm-trayconfianza {
		--fm-tc-slot: clamp(160px, 30vw, 300px);
	}
}

@media (max-width: 991px) {
	.fm-trayconfianza {
		--fm-tc-slot: clamp(150px, 32vw, 260px);
		--fm-tc-ancho-logo: 66%;
		padding-block: clamp(44px, 8vw, 72px);
	}

	.fm-trayconfianza__marquee[data-fm-marquee] {
		--fm-marquee-vel: 46;
	}
}

@media (max-width: 767px) {
	.fm-trayconfianza {
		--fm-tc-slot: clamp(140px, 42vw, 200px);
		--fm-tc-fade: 10%;
	}

	.fm-trayconfianza__titulo {
		font-size: 12px;
		letter-spacing: 0.28em;
		text-indent: 0.28em;
	}

	.fm-trayconfianza__marquee {
		margin-top: 34px;
	}
}

@media (max-width: 400px) {
	.fm-trayconfianza {
		--fm-tc-slot: 140px;
		--fm-tc-ancho-logo: 70%;
		padding-block: 40px;
	}

	.fm-trayconfianza__marquee[data-fm-marquee] {
		--fm-marquee-vel: 38;
	}
}


/* --- Movimiento reducido -------------------------------------------------
   El JS ya se abstiene de animar; esto es el cinturón de seguridad por si
   la cinta quedara a medio recorrido cuando el usuario cambia el ajuste.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.fm-trayconfianza__pista {
		will-change: auto;
	}
}

/* ==========================================================================
   FM · TRAYECTORIA — TANDA DE CAMBIOS · v2 (2026-09)

   Sigue siendo aditivo — va al FINAL de la hoja — para no tocar nada de lo
   que ya está escrito y probado.

   Bloques:
     A · S1 Hero — proporción móvil
     B · S2 Cifras — fondo, cifras rotativas y maquetación móvil del Figma
     C · S4 Prensa — 3 logos a la vista y respiros en móvil
     D · S5 Momentos — fuera los rótulos laterales en móvil
     E · S7 CTA — sección completa
     F · S4 + S6 — calibración de las 19 marcas nuevas (2026-09-21)
     G · S6 — la máscara de la cinta ya no recorta los logos (2026-09-21)

   ⚠ EN ELEMENTOR: el contenedor que envuelve el widget de shortcode del CTA
   necesita la clase CSS  fm-traycta-con  (Avanzado → Clases CSS). Sin ella
   el bloque E.1 no engancha y la sección se queda a 1239px en vez de llegar
   a los bordes.
   ========================================================================== */


/* ==========================================================================
   A · S1 HERO — proporción móvil
   --------------------------------------------------------------------------
   En la captura de Alejandro la lámina es prácticamente cuadrada, no 3/4:
   con 3/4 el retrato se estira hacia abajo y el título queda flotando en
   mitad de una banda vacía.

   Sustituye a:  @media (max-width: 767px) → .fm-trayhero { aspect-ratio: 3/4 }
   ========================================================================== */

@media (max-width: 767px) {

	.fm-trayhero {
		aspect-ratio: 1 / 1;
		max-height: min(70svh, 560px);
	}

	/* El rostro vive en el tercio superior del recorte vertical. Centrarlo
	   al 50% lo deja tapado por el título. */
	.fm-trayhero__media img {
		object-position: 50% 38%;
	}
}


/* ==========================================================================
   B · S2 CIFRAS
   ========================================================================== */

/* --- B.1 · Fondo móvil ---------------------------------------------------
   Es la MISMA imagen del CTA girada 90° en sentido horario: el negro cae
   arriba (título y párrafo), el azul a media altura y el dorado abajo,
   igual que en la maqueta.

   background-size: 100% 100% y no cover A PROPÓSITO. La sección es mucho
   más alta que ancha y su altura cambia según la longitud del párrafo; con
   cover la imagen se escala por el ancho, se sale por abajo y solo se ve el
   tercio negro de arriba. Estirándola, la secuencia negro → azul → dorado
   entra siempre entera. Es un degradado desenfocado: la deformación es
   invisible.
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {

	.fm-traycifras {
		background-image:
			image-set(
				url("/wp-content/uploads/2026/09/fm-trayectoria-cifras-mov-900.webp") type("image/webp"),
				url("/wp-content/uploads/2026/09/fm-trayectoria-cifras-mov-900.jpg")  type("image/jpeg")
			);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
	}

	.fm-traycifras__media {
		display: none;
	}
}

@media (max-width: 400px) {

	.fm-traycifras {
		background-image:
			image-set(
				url("/wp-content/uploads/2026/09/fm-trayectoria-cifras-mov-600.webp") type("image/webp"),
				url("/wp-content/uploads/2026/09/fm-trayectoria-cifras-mov-900.jpg")  type("image/jpeg")
			);
	}
}


/* --- B.2 · Maquetación móvil según el Figma ------------------------------
   En el marco móvil (402px) todo el bloque va CENTRADO y con bastante más
   aire del que tiene ahora: márgenes laterales de ~48px, párrafo justificado
   y la lista centrada como bloque, con los ítems alineados a la izquierda
   entre ellos.
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {

	.fm-traycifras {
		padding-inline: clamp(28px, 11vw, 56px);
		padding-block: clamp(72px, 18vw, 96px);
	}

	/*
	 * TÍTULO A TRES RENGLONES (Figma móvil):
	 *   EXPERIENCIA / CONSTRUIDA / EN ESCENA
	 *
	 * No hace falta tocar el marcado. Con un ancho máximo de 12em el título
	 * ya no cabe en dos líneas, así que el navegador se ve obligado a usar
	 * tres; y como la regla base lleva text-wrap: balance, de las dos
	 * repartos posibles en tres líneas elige el que iguala mejor las
	 * anchuras, que es justo el del Figma (la alternativa,
	 * "CONSTRUIDA EN / ESCENA", deja una línea mucho más larga).
	 *
	 * Si algún navegador sin soporte de balance lo partiera mal, la solución
	 * definitiva es meter dos <br> en el marcado y ocultarlos en escritorio.
	 */
	.fm-traycifras__titulo {
		max-width: 12em;
		margin-inline: auto;
		text-align: center;
		line-height: 1.6;
	}

	.fm-traycifras__texto {
		margin-inline: auto;
		text-align: justify;
	}

	.fm-traycifras__cuerpo {
		margin-top: clamp(56px, 16vw, 72px);
		gap: clamp(48px, 14vw, 64px);
	}

	/* Bloque centrado, ítems alineados a la izquierda entre sí. El max-width
	   en em (no en ch) porque con 0.2em de tracking el "0" de referencia de
	   la unidad ch se queda corto. */
	.fm-traycifras__lista {
		max-width: 16em;
		margin-inline: auto;
		gap: clamp(38px, 11vw, 52px);
	}
}


/* --- B.3 · Cifras rotativas en móvil -------------------------------------
   Petición de Alejandro: que las cuatro cifras se animen A LA MISMA ALTURA
   y vayan cambiando, en vez de apilarse y estirar la sección.

   Las cuatro comparten UNA celda de la rejilla, así que la altura la marca
   la más alta y no hay salto de layout al cambiar.

   La clase .is-rotativa la pone assets/js/fm-tray-cifras.js y SOLO en móvil.
   Sin JS, sin GSAP o con movimiento reducido la clase no aparece y las
   cuatro cifras se ven apiladas como hasta ahora.

   ⚠ PENDIENTE (comentario de Alejandro: "va muy rápido y no se lee"):
   el tiempo que cada cifra permanece en pantalla y la duración del conteo
   viven en fm-tray-cifras.js, no aquí.
   ------------------------------------------------------------------------ */

.fm-traycifras.is-rotativa .fm-traycifras__cifras {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 0;
	row-gap: 0;
	justify-items: center;
	text-align: center;
}

.fm-traycifras.is-rotativa .fm-traycifras__cifra {
	grid-area: 1 / 1;
	width: 100%;
}

.fm-traycifras.is-rotativa .fm-traycifras__numero {
	font-size: clamp(2.5rem, 13vw, 3.5rem);
	letter-spacing: 0.12em;
	text-indent: 0.12em;
}

.fm-traycifras.is-rotativa .fm-traycifras__etiqueta {
	margin-top: clamp(20px, 5vw, 28px);
}

/*
 * El <br> de la etiqueta vuelve. La regla de móvil lo apaga con display:none
 * y, como en el marcado no hay espacio a los lados, las dos palabras quedan
 * pegadas: "AÑOS DETRAYECTORIA". Con una sola cifra en pantalla caben de
 * sobra las dos líneas, que además es como está en el Figma.
 */
.fm-traycifras.is-rotativa .fm-traycifras__etiqueta br {
	display: inline;
}


/* ==========================================================================
   C · S4 PRENSA
   ========================================================================== */

/* --- C.1 · Tres logos a la vista -----------------------------------------
   Comentario de Alejandro: "Logos con más separación, deben verse 3".

   Solo se cambia --fm-slots. El ancho del hueco lo reparte el CSS
   (100% / slots) y el JS lee esa misma variable para saber cuál es el
   centro, así que no hay que tocar una línea de fm-tray-prensa.js.

   Va dentro de un min-width y no suelta A PROPÓSITO: este bloque está al
   FINAL de la hoja, después de los @media de la S4. Una regla sin condición
   aquí tiene la misma especificidad que las de dentro de los @media pero
   llega más tarde, así que se las comería todas y el móvil heredaría los
   valores de escritorio.

   Sustituye a:  .fm-trayprensa { --fm-slots: 5 }
   ------------------------------------------------------------------------ */

@media (min-width: 1200px) {

	.fm-trayprensa {
		--fm-slots: 3;
		--fm-caja-ancho: clamp(150px, 15.5vw, 240px);
	}
}


/* --- C.2 · Respiros en móvil ---------------------------------------------
   Comentario de Alejandro: "Mejorar los espacios entre bloques y márgenes".

   Además el carrusel pasa a UN logo desde 767px en vez de desde 560px: con
   tres huecos en 390px de ancho las marcas se solapan visualmente.
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {

	.fm-trayprensa {
		--fm-slots: 1;
		--fm-slot-dormido: 1;
		--fm-caja-ancho: min(62vw, 240px);

		padding-block: clamp(72px, 16vw, 96px);
	}

	/* Sin huecos laterales apagados, todas las marcas van a plena luz. */
	.is-carrusel .fm-trayprensa__slot {
		color: #ADB3BC;
	}

	.fm-trayprensa__interior {
		padding-inline: 28px;
	}

	.fm-trayprensa__titulo {
		margin-block-start: clamp(20px, 5vw, 26px);
	}

	.fm-trayprensa__texto {
		max-width: 34em;
		margin-block-start: clamp(24px, 6vw, 32px);
	}

	.fm-trayprensa__carrusel {
		margin-top: clamp(52px, 12vw, 68px);
	}

	.fm-trayprensa__rotulo {
		margin-block-end: clamp(30px, 7vw, 40px);
	}
}


/* --- C.3 · Calibración óptica --------------------------------------------
   Son los valores ya calibrados en /eventos/ y en la S6.

   Sustituye al bloque ".fm-trayprensa__slot[data-marca=...] { --fm-esc: 1 }".
   ------------------------------------------------------------------------ */

.fm-trayprensa__slot[data-marca="hardrock"]       { --fm-esc: 1.15; }
.fm-trayprensa__slot[data-marca="hyatt"]          { --fm-esc: 0.95; }
.fm-trayprensa__slot[data-marca="nickelodeon"]    { --fm-esc: 1.22; }
.fm-trayprensa__slot[data-marca="marriott"]       { --fm-esc: 0.84; }
.fm-trayprensa__slot[data-marca="moonpalace"]     { --fm-esc: 0.86; }
.fm-trayprensa__slot[data-marca="excellence"]     { --fm-esc: 1.00; }
.fm-trayprensa__slot[data-marca="finest"]         { --fm-esc: 1.02; }
.fm-trayprensa__slot[data-marca="garzablanca"]    { --fm-esc: 0.88; }
.fm-trayprensa__slot[data-marca="villadelpalmar"] { --fm-esc: 1.23; }


/* ==========================================================================
   D · S5 MOMENTOS — sin rótulos laterales en móvil
   --------------------------------------------------------------------------
   Comentario de Alejandro: "Aquí que ya no aparezcan los títulos laterales,
   causan mucho ruido visual".

   Se ocultan de verdad (display: none), no solo visualmente: dejarlos en el
   flujo con visibility haría que el separador "·" siguiera reservando sitio.
   ========================================================================== */

@media (max-width: 767px) {

	.fm-traymomentos__meta {
		display: none;
	}

	.fm-traymomentos__titulo {
		margin-block-start: 0;
	}
}


/* ==========================================================================
   E · S7 CTA — "¿Quieres que tu evento sea el siguiente?"
   --------------------------------------------------------------------------
   Marcado: template-parts/trayectoria-cta.php → [fm_trayectoria_cta]
   Sin JS.

   Este bloque es un ESPEJO de assets/css/fm-cta.css (el CTA de /experiencias/)
   con dos únicas diferencias:

     1. No hay .fm-traycta__capa. Alejandro pidió la imagen limpia, sin nada
        de negro encima — ni velo plano ni degradados de borde.
     2. El namespace es fm-traycta en vez de fm-cta.

   MEDIDA DE LOS BOTONES: sale de los tokens --fm-btn-* de custom.css, igual
   que en todo el sitio. Esta hoja ya no declara ancho, alto, cuerpo ni
   tracking de botón en ningún breakpoint.
   ========================================================================== */


/* --- E.1 · Ancho completo -------------------------------------------------
   No basta con neutralizar el gutter del contenedor: el WIDGET de shortcode
   de Elementor no se estira, así que la sección medía 1239px dentro de un
   contenedor de 1686px.

   Son tres piezas y hacen falta las tres: el widget, su
   .elementor-widget-container y la propia sección.

   ⚠ El contenedor de Elementor tiene que llevar la clase fm-traycta-con.
   ------------------------------------------------------------------------ */

.e-con.fm-traycta-con,
.e-con.fm-traycta-con > .e-con-inner {
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	--padding-block-start: 0;
	--padding-block-end: 0;
	--gap: 0px;
	--align-items: stretch;
	--container-widget-width: 100%;

	align-items: stretch;
	max-width: none;
	padding-inline: 0;
	padding-block: 0;
}

.fm-traycta-con .elementor-widget-shortcode,
.fm-traycta-con .elementor-widget-shortcode > .elementor-widget-container,
.fm-traycta-con .elementor-widget-shortcode .fm-traycta {
	width: 100%;
	max-width: none;
	align-self: stretch;
}


/* --- E.2 · Sección --------------------------------------------------------
   El alto lo manda --fm-traycta-alto, no la proporción de la imagen: así la
   banda se comporta igual que la de /experiencias/ y no depende del archivo
   que se ponga de fondo.
   ------------------------------------------------------------------------ */
.fm-traycta {
	--fm-traycta-alto: clamp(280px, 24.25vw, 420px);

	/* Paleta. Cambiando estas tres líneas se recolorea entera. */
	--fm-traycta-titulo: #ADB3BC;
	--fm-traycta-tinta: #ADB3BC;
	--fm-traycta-oro: #9B8659;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--fm-traycta-alto);
	overflow-x: clip;
	background-color: #01060C;
}


/* --- E.3 · Imagen ---------------------------------------------------------
   Va LIMPIA: sin velo, sin degradado y sin ninguna capa oscura encima.
   Lo único que se apoya sobre ella es el text-shadow del titular, que no
   altera el color del fondo pero sostiene el texto sobre las zonas doradas.

   max-width: none en la imagen es obligatorio: hay una regla global de
   img { max-width: 100% } que, con la imagen a width: 100% de un padre
   absoluto, en algunos navegadores deja la foto corta por la derecha.
   ------------------------------------------------------------------------ */
.fm-traycta__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.fm-traycta__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}


/* --- E.4 · Contenido ------------------------------------------------------ */
.fm-traycta__contenido {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-inline: clamp(24px, 6vw, 40px);
	padding-block: clamp(56px, 6vw, 86px);
	text-align: center;
}

/* Especificidad (0,2,0): hay reglas globales de tipografía sobre h2. */
.fm-traycta .fm-traycta__titulo {
	margin: 0;
	font-family: "NORD", sans-serif;
	font-weight: 100;
	font-size: clamp(1.05rem, 2.05vw, 1.85rem);
	line-height: 1.55;
	letter-spacing: 0.2em;
	/* Compensa el espacio que el tracking añade tras la última letra: sin
	   esto el bloque centrado se ve corrido hacia la izquierda. */
	text-indent: 0.2em;
	text-transform: uppercase;
	color: var(--fm-traycta-titulo);
	text-shadow: 0 1px 28px rgba(1, 6, 12, 0.55);
}


/* --- E.5 · Botones --------------------------------------------------------
   MEDIDA DEL SISTEMA (tokens --fm-btn-* de custom.css).

   Gris, sin fondo. En hover cambia SOLO el color del borde a dorado y el
   peso de 300 a 400; el texto se queda en #ADB3BC y va declarado
   explícitamente en cada estado, porque son <a> y a:visited del tema está
   en (0,1,1).

   El borde pasa a macizo: estaba en rgba(173,179,188,.55), que sobre la foto
   resuelve a un gris que no es el del sistema.

   La reserva de ancho va con inline-grid: el <span> visible y el ::after con
   el mismo texto en peso 400 comparten la celda 1/1, así que la caja mide
   siempre lo del texto en negrita y no da el tirón al entrar en hover.
   ------------------------------------------------------------------------ */
.fm-traycta .fm-traycta__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 3.6vw, 52px);
	margin-top: clamp(28px, 4.5vw, 65px);
}

.fm-traycta .fm-traycta__boton {
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	min-width: var(--fm-btn-ancho);
	min-height: var(--fm-btn-alto);
	padding-block: 0;
	padding-inline: var(--fm-btn-pad-x);
	border: 1px solid var(--fm-btn-borde);
	border-radius: 0;
	background-color: transparent;
	font-family: "NORD", sans-serif;
	font-weight: var(--fm-btn-peso);
	font-size: var(--fm-btn-tam);
	line-height: 1.2;
	letter-spacing: var(--fm-btn-track);
	text-indent: var(--fm-btn-track);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--fm-btn-tinta);
	transition: border-color 0.35s ease;
}

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

.fm-traycta .fm-traycta__boton::after {
	content: attr(data-texto);
	grid-area: 1 / 1;
	font-weight: var(--fm-btn-peso-on);
	visibility: hidden;
	pointer-events: none;
}

.fm-traycta .fm-traycta__boton:link,
.fm-traycta .fm-traycta__boton:visited {
	color: var(--fm-btn-tinta);
}

@media (hover: hover) and (pointer: fine) {

	.fm-traycta .fm-traycta__boton:hover {
		border-color: var(--fm-btn-oro);
		background-color: transparent;
		color: var(--fm-btn-tinta);
		font-weight: var(--fm-btn-peso-on);
	}
}

.fm-traycta .fm-traycta__boton:focus-visible {
	outline: 1px solid var(--fm-btn-oro);
	outline-offset: 4px;
	color: var(--fm-btn-tinta);
	font-weight: var(--fm-btn-peso-on);
}

/* reset.css de Hello Elementor pinta los estados interactivos de #C36. */
body .fm-traycta__boton:hover,
body .fm-traycta__boton:focus {
	background-color: transparent;
	color: var(--fm-btn-tinta);
}


/* --- E.6 · Responsive ------------------------------------------------------
   Mismos cortes y mismos valores que fm-cta.css. En móvil los botones van
   en columna con 13vw de separación y 14vw de aire por arriba: son los
   espacios de la captura de /experiencias/ que dio por buenos Alejandro.

   El botón ya no aparece en 1024 ni en 400: su medida la resuelven los
   tokens.
   ------------------------------------------------------------------------ */

@media (max-width: 1024px) {

	.fm-traycta {
		--fm-traycta-alto: clamp(300px, 34vw, 380px);
	}

	.fm-traycta .fm-traycta__titulo {
		letter-spacing: 0.16em;
		text-indent: 0.16em;
	}
}

@media (max-width: 767px) {

	.fm-traycta {
		--fm-traycta-alto: min(155vw, 720px);
	}

	.fm-traycta__media img {
		object-position: 50% 50%;
	}

	.fm-traycta__contenido {
		padding-inline: 24px;
		padding-block: 14vw;
	}

	.fm-traycta .fm-traycta__titulo {
		font-size: clamp(1.05rem, 6.6vw, 1.75rem);
		line-height: 1.75;
		letter-spacing: 0.14em;
		text-indent: 0.14em;
	}

	/* El corte de línea del diseño de escritorio estorba en móvil: el
	   titular ya envuelve solo. */
	.fm-traycta .fm-traycta__titulo br {
		display: none;
	}

	.fm-traycta .fm-traycta__acciones {
		flex-direction: column;
		gap: 13vw;
		margin-top: 14vw;
	}

	.fm-traycta .fm-traycta__boton {
		width: var(--fm-btn-ancho);
		white-space: normal;
	}
}


/* --- E.7 · Accesibilidad --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.fm-traycta .fm-traycta__boton {
		transition: none;
	}
}


/* ==========================================================================
   F · MARCAS NUEVAS (2026-09-21) — S4 Prensa y S6 Confianza
   --------------------------------------------------------------------------
   19 marcas vectorizadas desde PNG con el mismo tratamiento que las nueve
   originales: una sola tinta (currentColor), sin width/height, sin cajas
   de fondo y sin clipPath (por eso no tienen ids que colisionar).

   Cómo se calcularon los --fm-esc: igualando √(ancho × alto) de lo que
   cada logo ocupa DENTRO de la caja 3.2/1 contra Excellence (= 1.00), y
   corrigiendo después a ojo por densidad de tinta:
     · Los compactos (Coparmex, NH, Riu, Televisa) suben porque en una caja
       tan apaisada topan por alto y se quedarían diminutos.
     · Los muy apaisados y pesados (Barceló, Puebla) bajan.
     · Chevrolet baja un punto: la pajarita maciza pesa más que su área.

   Mismos valores en la S4 y en la S6, igual que con las nueve de siempre.
   ========================================================================== */

/* --- F.1 · S4 Prensa ------------------------------------------------------ */
.fm-trayprensa__slot[data-marca="televisa"]       { --fm-esc: 1.20; }
.fm-trayprensa__slot[data-marca="riu"]            { --fm-esc: 1.26; }
.fm-trayprensa__slot[data-marca="barcelo"]        { --fm-esc: 0.84; }
.fm-trayprensa__slot[data-marca="chevrolet"]      { --fm-esc: 0.96; }
.fm-trayprensa__slot[data-marca="royalton"]       { --fm-esc: 1.00; }
.fm-trayprensa__slot[data-marca="estrellatv"]     { --fm-esc: 1.12; }
.fm-trayprensa__slot[data-marca="paradisus"]      { --fm-esc: 1.14; }
.fm-trayprensa__slot[data-marca="coparmex"]       { --fm-esc: 1.30; }
.fm-trayprensa__slot[data-marca="dreams"]         { --fm-esc: 1.09; }
.fm-trayprensa__slot[data-marca="casasgeo"]       { --fm-esc: 1.20; }
.fm-trayprensa__slot[data-marca="eldorado"]       { --fm-esc: 1.07; }
.fm-trayprensa__slot[data-marca="nh"]             { --fm-esc: 1.25; }
.fm-trayprensa__slot[data-marca="enerplex"]       { --fm-esc: 1.15; }
.fm-trayprensa__slot[data-marca="azulbeach"]      { --fm-esc: 1.17; }
.fm-trayprensa__slot[data-marca="puebla"]         { --fm-esc: 0.86; }
.fm-trayprensa__slot[data-marca="oasis"]          { --fm-esc: 1.18; }
.fm-trayprensa__slot[data-marca="centrocultural"] { --fm-esc: 1.06; }
.fm-trayprensa__slot[data-marca="lasbodegas"]     { --fm-esc: 1.20; }
.fm-trayprensa__slot[data-marca="lavista"]        { --fm-esc: 1.16; }

/* --- F.2 · S6 Confianza --------------------------------------------------- */
.fm-trayconfianza__slot--televisa       { --fm-esc: 1.20; }
.fm-trayconfianza__slot--riu            { --fm-esc: 1.26; }
.fm-trayconfianza__slot--barcelo        { --fm-esc: 0.84; }
.fm-trayconfianza__slot--chevrolet      { --fm-esc: 0.96; }
.fm-trayconfianza__slot--royalton       { --fm-esc: 1.00; }
.fm-trayconfianza__slot--estrellatv     { --fm-esc: 1.12; }
.fm-trayconfianza__slot--paradisus      { --fm-esc: 1.14; }
.fm-trayconfianza__slot--coparmex       { --fm-esc: 1.30; }
.fm-trayconfianza__slot--dreams         { --fm-esc: 1.09; }
.fm-trayconfianza__slot--casasgeo       { --fm-esc: 1.20; }
.fm-trayconfianza__slot--eldorado       { --fm-esc: 1.07; }
.fm-trayconfianza__slot--nh             { --fm-esc: 1.25; }
.fm-trayconfianza__slot--enerplex       { --fm-esc: 1.15; }
.fm-trayconfianza__slot--azulbeach      { --fm-esc: 1.17; }
.fm-trayconfianza__slot--puebla         { --fm-esc: 0.86; }
.fm-trayconfianza__slot--oasis          { --fm-esc: 1.18; }
.fm-trayconfianza__slot--centrocultural { --fm-esc: 1.06; }
.fm-trayconfianza__slot--lasbodegas     { --fm-esc: 1.20; }
.fm-trayconfianza__slot--lavista        { --fm-esc: 1.16; }


/* ==========================================================================
   G · S6 — LA MÁSCARA YA NO RECORTA LOS LOGOS (2026-09-21)
   --------------------------------------------------------------------------
   El problema: mask-image pinta sobre la caja de .fm-trayconfianza__marquee
   y todo lo que queda FUERA de esa caja se vuelve invisible, aunque
   overflow-y sea visible. La cinta medía exactamente lo que la caja del
   logo (62px a 1280), así que cualquier marca con --fm-esc > 1 perdía
   entre 1 y 9px por arriba y por abajo: Coparmex, Riu, NH, Nickelodeon,
   Televisa…

   La solución: la cinta gana un respiro vertical por dentro (padding) para
   que la máscara cubra también lo que sobresale, y lo devuelve por fuera
   con márgenes negativos. El alto de la sección no cambia ni un píxel.

   El respiro cubre hasta --fm-esc: 1.5 con holgura; si algún día se calibra
   una marca por encima de eso, basta con subir --fm-tc-respiro.
   ========================================================================== */

.fm-trayconfianza {
	--fm-tc-respiro: clamp(20px, 2.5vw, 36px);
}

.fm-trayconfianza__marquee {
	padding-block: var(--fm-tc-respiro);
	margin-top: calc(clamp(38px, 5vw, 76px) - var(--fm-tc-respiro));
	margin-bottom: calc(var(--fm-tc-respiro) * -1);
}

/* En móvil el margen de arriba era fijo (34px): se respeta el mismo valor. */
@media (max-width: 767px) {

	.fm-trayconfianza__marquee {
		margin-top: calc(34px - var(--fm-tc-respiro));
	}
}