/* =========================================================================
   SECCIÓN 1 — HERO   (namespace: fm-hero)
   -------------------------------------------------------------------------
   Sustituye al hero armado con contenedores de Elementor. Todos los valores
   están MEDIDOS sobre aquel, con la página en vivo, para que el desktop quede
   idéntico:

     sección   min-height 130vh · padding-inline 128 · fondo cover 50% 50%
     columna   max-width 760 · flex column · space-between · padding-bottom 40
     logo      300px de ancho
     título    NORD 300 · 22px / 1.9 · letter-spacing 0.123em · #ADB3BC
     bajada    Red Hat Display 300 · 16px / 1.8 · ls 0.05em · #ADB3BC

   Ese 130vh es exactamente lo que rompía el móvil: en un teléfono son casi
   dos pantallas de alto con el contenido flotando en medio. Bajo 768px pasa a
   100svh y el ritmo se rehace con padding, no con unidades de viewport.

   Interlineado (comentario de Alejandro, 15:42): título 1.6 → 1.9 y bajada
   1.5 → 1.8. Los dos bloques crecen de alto, así que el rango de tablet
   además baja un punto la escala tipográfica para que el texto no se suba a
   la cara de la foto.

   La clase `fm-hero-sec` va en el contenedor de Elementor que envuelve el
   shortcode.

   -------------------------------------------------------------------------
   REVISIÓN 2026-09
     · El azul claro retirado del sistema ya no aparece en esta hoja: el
       rótulo de la sección de naipes pasa a #ADB3BC.
     · El botón de la S5 deja de declarar medida propia: consume los tokens
       --fm-btn-* de custom.css. Como crece de 31 a 38px de alto, sube
       también la reserva --fm-txt de la pista horizontal.
   ========================================================================= */

.fm-hero-sec,
.fm-hero-sec > .e-con-inner{
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  padding-inline: 0;
}

.fm-hero-sec{ overflow-x: clip; }

.fm-hero{
  /* Las tres medidas verticales son variables porque el alto de la columna
     se calcula con ellas (ver .fm-hero__inner).

     --fm-hero-header es lo que ocupa la cabecera CUANDO va en el flujo.
     Medido en vivo: 76px por debajo de 1200px de ancho; por encima flota
     sobre el hero y no ocupa alto. Si la cabecera cambia de alto, este es
     el único número que hay que mover. */
  /* El logo arranca justo debajo de --fm-hero-pt. La cabecera de escritorio
     es `fixed` y mide 102px (medido en vivo), así que el suelo de 130px deja
     28px de aire por debajo de ella incluso en una ventana baja. Si se sube
     más, el logo se le mete debajo. */
  --fm-hero-pt: 90px;
  --fm-hero-pb: 40px;
  --fm-hero-header: 0px;

  position: relative;
  isolation: isolate;
  display: flex;

  /* align-items se queda en `stretch` (el valor por omisión) A PROPÓSITO: en
     escritorio la columna tiene que medir los 130vh completos para que el
     space-between deje el bloque de texto abajo del todo, como en el frame de
     Alejandro. El hero de escritorio ES más alto que la pantalla y el texto
     aparece al bajar. El modelo de "todo en una pantalla" solo entra por
     debajo de 1200px, donde la cabecera va en el flujo. */

  width: var(--fm-vw, 100vw);
  margin-inline: calc(50% - var(--fm-vw, 100vw) / 2);

  min-height: 130vh;                     /* medido del hero de Elementor */
  padding: var(--fm-hero-pt) clamp(24px, 9vw, 128px) var(--fm-hero-pb);
  background: #01060C;
  overflow: clip;
}

/* ---- Fondo -------------------------------------------------------------
   height: 100% + min-height: 100%. NO `inset: 0` con height auto.

   Un <img> es un elemento REEMPLAZADO: con `height: auto` la altura sale de
   su proporción intrínseca y el `bottom` se ignora, por muy absoluto que sea
   el elemento. Medido en vivo: la imagen quedaba en 703px dentro de una caja
   de 631. El min-height es la red por si algún plugin fuerza height:auto —
   pasarse de alto no importa (lo recorta el overflow), quedarse corto sí. */

.fm-hero__fondo{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #01060C;
}

.fm-hero__fondo picture{
  position: absolute;
  inset: 0;
  display: block;
}

/* SELECTOR ENCADENADO, OBLIGATORIO. Elementor declara
   `.elementor img { height: auto }` con especificidad (0,1,1) y le ganaba a
   `.fm-hero__fondo-img` (0,1,0): el `height: 100%` de aquí NUNCA se aplicaba.
   Medido en vivo a 1440x900: la imagen medía 2534px de alto dentro de una
   caja de 1170 y solo se veía su mitad superior. object-fit no llegaba a
   recortar nada, así que el encuadre cambiaba con cada proporción de
   ventana — el "se ve diferente en cada responsive".
   Con `.fm-hero .fm-hero__fondo-img` subimos a (0,2,0) y ganamos. */
.fm-hero .fm-hero__fondo-img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* ---- Columna ----------------------------------------------------------
   El título y la bajada van juntos en .fm-hero__pie para que el
   space-between separe DOS bloques (logo arriba, texto abajo) y no reparta
   los tres por igual. Así se reproducen las posiciones medidas.            */

.fm-hero__inner{
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.fm-hero__logo{
  display: block;
  flex: 0 0 auto;
  width: 300px;
  max-width: 100%;
}

.fm-hero__logo-img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1897 / 840;
  margin-left: 15px;/* proporción del archivo ya recortado */
}

.fm-hero__pie{
  flex: 0 0 auto;
  width: 100%;
}

.fm-hero__titulo{
  margin: 0;
  color: #ADB3BC;
  font-family: "NORD", sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.9;              /* Alejandro: más interlineado */
  letter-spacing: 0.123em;
  text-transform: uppercase;
  text-wrap: balance;
}

.fm-hero__bajada{
  margin: 24px 0 0;
  color: #ADB3BC;
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;              /* Alejandro: más interlineado */
  letter-spacing: 0.05em;
  text-wrap: pretty;
}

/* ---- Responsive del hero ---------------------------------------------- */

/* Aquí la cabecera ya va en el flujo y se lleva 76px de la pantalla.

   De 1200px para abajo el hero deja de ser una composición más alta que el
   viewport y pasa a ocupar EXACTAMENTE lo que queda de pantalla, con la
   columna midiendo lo mismo. Sin esto, la bajada caía fuera del pliegue y
   cada tamaño la cortaba por un sitio distinto: medido en vivo, 76px fuera
   en tablet 768, 74px en 1024 apaisado y 25px en móvil. */
@media (max-width: 1199px){
  .fm-hero{
    --fm-hero-header: 76px;
    --fm-hero-pt: clamp(104px, 14vh, 180px);
    align-items: flex-start;
    min-height: calc(100svh - var(--fm-hero-header));
  }
  .fm-hero__inner{
    flex: 0 0 auto;
    min-height: calc(100svh - var(--fm-hero-header) - var(--fm-hero-pt) - var(--fm-hero-pb));
    max-width: 640px;
  }
  .fm-hero__logo{ width: 270px; }
  .fm-hero__titulo{ font-size: 19px; }
}

/* Tablet vertical (el pantallazo del iPad). Con el interlineado nuevo el
   bloque de texto crece ~20%, así que aquí manda la escala tipográfica y no
   la altura de viewport: 100svh y el ritmo por padding.

   PENDIENTE DE DISEÑO: no hay frame de tablet en el Figma. Estos valores son
   una interpolación entre desktop y móvil; si Alejandro nos pasa el frame,
   se calzan exactos. */
@media (max-width: 991px){
  .fm-hero{
    --fm-hero-pt: clamp(88px, 11.5svh, 140px);
    --fm-hero-pb: clamp(48px, 7svh, 80px);
    padding-inline: clamp(32px, 7vw, 64px);
  }
  .fm-hero__inner{ max-width: 540px; gap: clamp(28px, 5svh, 52px); }
  .fm-hero__logo{ width: min(230px, 34vw); }
  .fm-hero__titulo{
    font-size: clamp(15px, 2.3vw, 18px);
    line-height: 1.95;
    letter-spacing: 0.11em;
  }
  .fm-hero__bajada{
    margin-top: 20px;
    font-size: 14.5px;
    line-height: 1.85;
  }
}

/* El <picture> del hero cambia al arte 9:16 a los 767px. Entre 768 y 1024 en
   vertical sigue entrando el archivo apaisado, y con object-fit: cover en una
   caja estrecha el recorte solo puede ser horizontal: la cara queda enorme y
   descentrada. Esto lo suaviza, pero el arreglo de verdad es mover el
   `media` del <source> de mov-900 a (max-width: 1024px) en el template part. */
@media (max-width: 1024px) and (orientation: portrait){
  .fm-hero__fondo-img{ object-position: center 40%; }
}

/* Móvil: se acaba el 130vh. Altura de una pantalla y ritmo por padding.

   El reencuadre lo hace la IMAGEN, no el CSS. Con object-fit: cover en una
   caja más estrecha que la imagen, el escalado lo manda la altura y el
   recorte solo ocurre en horizontal: `object-position` vertical NO hace
   nada. Por eso el texto caía sobre las manos hiciera lo que hiciera aquí.
   Los archivos mov-600 y mov-900 traen la composición ya resuelta: 9:16, con
   las manos al 47% del alto y el resto fundido a #01060C.                 */
@media (max-width: 767px){
  .fm-hero{
    /* El arte móvil trae el retrato en una posición fija, así que la altura
       del logo se ajusta aquí y no con object-position. Va en dos tandas:
       16svh -> 11svh despegó el logo de la frente, y 11 -> 7.5svh es la
       subida que pidió Alejandro. En un teléfono de 915px de alto el logo
       arranca en 69px por debajo de la cabecera, contra los 146 iniciales. */
    --fm-hero-pt: clamp(56px, 7.5svh, 100px);
    --fm-hero-pb: clamp(40px, 6svh, 64px);
    padding-inline: clamp(24px, 7vw, 40px);
  }

  .fm-hero__inner{
    max-width: 420px;
    gap: clamp(24px, 4svh, 44px);
  }

  .fm-hero__logo{ width: min(240px, 62vw); }

  .fm-hero__logo-img{
    margin-left: 10px;
  }

  .fm-hero__titulo{
    font-size: clamp(15px, 4.2vw, 19px);
    line-height: 1.95;
    letter-spacing: 0.11em;
  }

  .fm-hero__bajada{
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.9;
  }

  /* Anclado arriba para que el fundido a negro del pie de la imagen quede
     justo detrás del bloque de texto. */
  .fm-hero__fondo-img{ object-position: center top; }
}

@media (max-width: 400px){
  .fm-hero{ padding-inline: 24px; }
  .fm-hero__logo{ width: min(210px, 66vw); }
  .fm-hero__bajada{ font-size: 14px; }
}

/* Ventana apaisada y baja (laptop chico, teléfono acostado, ventana a media
   pantalla). VA AL FINAL DEL HERO A PROPÓSITO: en un teléfono acostado se
   cumplen a la vez este @media y el de 767px, tienen la misma especificidad
   y gana el último. Si lo subes de sitio, deja de aplicarse justo donde más
   falta hace. */
@media (max-height: 620px) and (orientation: landscape){
  .fm-hero{
    --fm-hero-pt: clamp(72px, 11svh, 110px);
    --fm-hero-pb: 24px;
    min-height: calc(100svh - var(--fm-hero-header));
  }
  .fm-hero__inner{ gap: 18px; max-width: 620px; }
  .fm-hero__logo{ width: min(170px, 22vw); }
  .fm-hero__titulo{ font-size: 15px; line-height: 1.8; letter-spacing: 0.1em; }
  .fm-hero__bajada{ margin-top: 14px; font-size: 13.5px; line-height: 1.7; }
}


/* =========================================================================
   SECCIÓN 2 — KEYWORDS ANIMADAS   (namespace: fm-kw)
   -------------------------------------------------------------------------
   El fondo YA TRAE overlay quemado en el archivo. No se le pone ninguna capa
   oscura encima: cualquier gradiente extra ensucia el degradado azul→dorado.

   Disposición: grid de 12 columnas en zigzag, copiada del frame del Figma,
   con el mismo ancho de contenido que el resto del sitio (1180).
   ========================================================================= */

.fm-kw-sec,
.fm-kw-sec > .e-con-inner{
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  padding-inline: 0;
}

.fm-kw-sec{ overflow-x: clip; }

.fm-kw{
  position: relative;
  isolation: isolate;

  width: var(--fm-vw, 100vw);
  margin-inline: calc(50% - var(--fm-vw, 100vw) / 2);

  min-height: 100svh;
}

/* ---- Fondo -------------------------------------------------------------
   height: 100% + min-height: 100%. NO `inset: 0` con height auto.

   Un <img> es un elemento REEMPLAZADO: con `height: auto` la altura sale de
   su proporción intrínseca y el `bottom` se ignora, por muy absoluto que sea
   el elemento. Medido en vivo aquí mismo: la imagen quedaba en 703px dentro
   de una caja de 631, y en móvil mucho más corta que la sección — que es
   justo lo que dejaba las últimas palabras sobre el negro plano.

   El min-height es la red por si algún plugin fuerza height:auto: pasarse de
   alto no importa (lo recorta el overflow de .fm-kw), quedarse corto sí.   */

.fm-kw__fondo{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #01060C;         /* colchón por si la imagen tarda */
}

.fm-kw__fondo picture{
  position: absolute;
  inset: 0;
  display: block;
}

/* Mismo caso que en el hero: `.elementor img { height: auto }` (0,1,1) le
   ganaba a (0,1,0) y la imagen se salía de la sección por abajo. */
.fm-kw .fm-kw__fondo-img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- Stage ------------------------------------------------------------
   El padding superior despeja la cabecera. Es sticky y mide ~102px, y como
   la sección se pinea con `start: 'top top'` esos 102px caen ENCIMA del
   primer renglón: por eso los dos bloques de arriba quedaban tan justos.  */

.fm-kw__stage{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: clamp(150px, 22svh, 230px) clamp(72px, 12svh, 140px);
  padding-inline: clamp(24px, 8vw, 128px);
}

/* El max-width es lo que centra la composición: los bloques dejan de pegarse
   a los extremos en monitores anchos. 1180 es el ancho de contenido del
   sitio, el mismo del canvas de 1440 con gutter de 128. */
.fm-kw__grid{
  list-style: none;
  margin-inline: auto;
  padding: 0;
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: clamp(40px, 7svh, 96px);
}

/* Zigzag del Figma. El ORDEN EN EL DOM manda también en la caída: el array
   ORDEN_CAIDA de fm-keywords.js va por índice, así que si reordenas estos
   bloques hay que reordenarlo allí. */
.fm-kw--b1{ grid-column: 1 / span 4;  grid-row: 1; }              /* Juegos mentales   */
.fm-kw--b2{ grid-column: 9 / span 4;  grid-row: 1; }              /* Interacción real  */
.fm-kw--b3{ grid-column: 5 / span 4;  grid-row: 2; justify-self: center; }  /* Humor */
.fm-kw--b4{ grid-column: 1 / span 4;  grid-row: 3; }              /* Presencia         */
.fm-kw--b5{ grid-column: 9 / span 4;  grid-row: 3; }              /* Asombro           */

.fm-kw__bloque{ min-width: 0; }

/* ---- Tipografía --------------------------------------------------------
   Título: NORD 300 en el gris de textos, NO en el claro de titulares.
   Cuerpo: Red Hat Display, justificado y SIN guiones.

   Probado en vivo: la justificación funciona aunque fm-keywords.js envuelva
   cada palabra en un <span> inline-block, porque el motor conserva los
   espacios como nodos de texto entre spans. Si algún día los quita y los
   sustituye por márgenes, la justificación deja de repartir y hay que
   volver a `start`.                                                        */

.fm-kw__titulo{
  margin: 0 0 clamp(16px, 2svh, 24px);
  max-width: 12em;
  color: #ADB3BC;
  font-family: "NORD", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fm-kw__texto{
  margin: 0;
  max-width: 30ch;
  color: #ADB3BC;
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.85;
  letter-spacing: 0.01em;
  text-align: justify;
  text-wrap: pretty;
  hyphens: none;
}

/* ---- Piezas que crea el JS ---------------------------------------------
   .fm-kw__w  = palabra    → unidad de caída del PÁRRAFO
   .fm-kw__c  = carácter   → cicla glifos y es la unidad de caída del TÍTULO

   El ancho de cada carácter del título se congela desde JS con el ancho del
   glifo real. Sin eso, al ciclar de "I" a "M" el renglón entero se
   relayoutea.                                                              */

.fm-kw__w,
.fm-kw__c{
  display: inline-block;
  backface-visibility: hidden;
}

.fm-kw__w{
  white-space: nowrap;
  transform-origin: 50% 0%;
}

.fm-kw__c{
  text-align: center;
  transform-origin: 50% 50%;
}

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

@media (max-width: 1199px){
  .fm-kw--b1{ grid-column: 1 / span 5; }
  .fm-kw--b2{ grid-column: 8 / span 5; }
  .fm-kw--b3{ grid-column: 4 / span 6; }
  .fm-kw--b4{ grid-column: 1 / span 5; }
  .fm-kw--b5{ grid-column: 8 / span 5; }
  .fm-kw__texto{ max-width: 28ch; }
}

/* De aquí para abajo la composición en zigzag no cabe: una sola columna,
   centrada, con márgenes generosos y SIN pin (lo decide el JS).

   Los anchos son la respuesta al comentario de las 16:20 ("pasar abajo
   textos… para que no se vea tan largo"): el párrafo corta ~40% antes.
   El texto sigue CENTRADO, no justificado, porque en una columna estrecha y
   centrada el justificado abre calles enormes.

   El padding inferior es muy superior al de arriba a propósito: el último
   bloque cae hacia abajo al salir. El JS además acorta la caída a la mitad
   en este rango.                                                           */
@media (max-width: 900px){
  .fm-kw,
  .fm-kw__stage{ min-height: 0; }

  .fm-kw__stage{
    padding-block: clamp(110px, 16svh, 160px) clamp(160px, 26svh, 260px);
    padding-inline: clamp(28px, 9vw, 56px);
  }

  .fm-kw__grid{
    grid-template-columns: 1fr;
    row-gap: clamp(56px, 9svh, 88px);
  }

  .fm-kw__bloque{
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch;
    max-width: 32ch;
    margin-inline: auto;
    text-align: center;
  }

  .fm-kw__titulo{
    max-width: none;
    font-size: clamp(16px, 4.2vw, 20px);
  }

  .fm-kw__texto{
    max-width: 26ch;          /* corta antes: ~7 palabras por renglón */
    margin-inline: auto;
    font-size: 15px;
    line-height: 1.9;
    text-align: center;       /* en columna estrecha, centrado gana */
  }

  .fm-kw__fondo-img{ object-position: center 55%; }
}

@media (max-width: 400px){
  .fm-kw__stage{ padding-inline: 24px; }
  .fm-kw__texto{ font-size: 14px; max-width: 24ch; }
}

/* ---- Accesibilidad ------------------------------------------------------ */

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

.fm-kw--static .fm-kw__w,
.fm-kw--static .fm-kw__c{
  transform: none !important;
  opacity: 1 !important;
}


/* =========================================================================
   SECCIÓN 3 — NAIPES
   -------------------------------------------------------------------------
   Proporción real del naipe: 372 x 535 (0.6953). El reverso trae el panel
   crema quemado en la imagen, así que el aspect-ratio tiene que ser exacto
   o el marco dorado se recorta disparejo.

   Separación de transforms (los tres viven en elementos/propiedades
   distintas y por eso no se pisan):
     .fm-naipes__item   -> `translate`  (--dy)  + GSAP escribe en `transform`
     .fm-naipe          -> `rotate`     (--rot) + `transform` para hover/scale
     .fm-naipe__inner   -> `transform: rotateY(180deg)` (la volteada 3D)
   ========================================================================= */

.fm-naipes-sec,
.fm-naipes-sec > .e-con-inner{
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  padding-inline: 0;
}

.fm-naipes-sec{
  background: #01060C;
  padding-block: clamp(72px, 12vh, 150px);
  padding-inline: clamp(20px, 3vw, 40px);
  overflow-x: clip;              /* los naipes rotados sobresalen de su caja */
}

/* El azul claro que llevaba este rótulo está retirado del sistema: el único
   gris permitido es #ADB3BC. */
.fm-naipes-sec .fm-naipes__head{
  margin: 0 auto clamp(28px, 4vh, 48px);
  max-width: 26ch;
  text-align: center;
  color: #ADB3BC;
  line-height: 1.9;
}

/* ---- Abanico ----------------------------------------------------------- */
.fm-naipes{
  position: relative;
  display: flex;
  flex-direction: column;
}

.fm-naipes__defs{
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

.fm-naipes__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(4px, .8vw, 16px);
}

.fm-naipes__item{
  flex: 0 0 auto;
  width: clamp(150px, 25vw, 460px);
  perspective: 1600px;          /* la perspectiva vive AQUÍ, no en el naipe */
  translate: 0 var(--dy, 0%);   /* propiedad independiente: GSAP no la pisa */
  z-index: var(--z, 1);
}

/* ---- El naipe ---------------------------------------------------------- */
.fm-naipe{
  all: unset;
  box-sizing: border-box;
  display: block;
  cursor: pointer;
  width: 100%;
  aspect-ratio: 372 / 535;
  -webkit-tap-highlight-color: transparent;
  rotate: calc(var(--rot, 0deg) * var(--rot-k, 1));
  transition: transform .45s cubic-bezier(.2,.7,.2,1),
              rotate    .45s cubic-bezier(.2,.7,.2,1);
}

/* Hello Elementor (reset.css) pinta los <button> con #C36 en :hover y :focus.
   `all: unset` no lo tapa: `button:hover` (0,1,1) le gana a `.fm-naipe` (0,1,0).
   Con clase + pseudoclase subimos a (0,2,0) y ganamos sin !important. */
.fm-naipe,
.fm-naipe:hover,
.fm-naipe:focus,
.fm-naipe:active{
  background-color: transparent;
  color: inherit;
}

@media (hover: hover){
  .fm-naipe:hover{ transform: translateY(-14px); }
}

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

.fm-naipe.is-flipped{ transform: scale(1.05); }   /* gana sobre el hover */

.fm-naipe__inner{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.2,.7,.2,1);
}

.fm-naipe.is-flipped .fm-naipe__inner{ transform: rotateY(180deg); }

/* ---- Caras ------------------------------------------------------------- */
.fm-naipe__face{
  position: absolute;
  inset: 0;
  display: flex;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 2.4% / 1.7%;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fm-naipe__face--frente{
  background-color: #EAEAEA;
  background-image: url('https://fernandomier.mx/wp-content/uploads/2026/08/fm-naipe-frente-1.webp');
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 6.7% 10.75%;         /* medido del asset: 36px / 40px sobre 372x535 */
}

.fm-naipe__face--reverso{
  transform: rotateY(180deg);
  background-color: #9B8659;
  background-image: url('https://fernandomier.mx/wp-content/uploads/2026/08/fm-naipe-reverso.webp');
  align-items: center;
  justify-content: center;
  padding: 7.48% 10.75%;        /* calza con el panel crema quemado (40px) */
}

/* ---- Esquinas ---------------------------------------------------------- */
.fm-naipe__mark{
  flex: 0 0 auto;
  display: block;
  width: 10.2%;
  height: auto;
  aspect-ratio: 37.92 / 70.41;
  fill: #01060C;
}

.fm-naipe__mark--br{
  align-self: flex-end;
  rotate: 180deg;               /* esto reemplaza a 7_inferior.svg */
}

/* ---- Título del frente ------------------------------------------------- */
.fm-naipe__titulo{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: 4%;
  color: #01060C;
  font-family: "NORD", sans-serif;
  font-weight: 300;
  font-size: clamp(13px, 1.8vw, 28px);
  line-height: 1.6;
  letter-spacing: .18em;
  text-transform: uppercase;
  rotate: var(--rot-t, 0deg);
}

/* ---- Copy del reverso --------------------------------------------------
   Centrado, no justificado: el bloque va centrado vertical y horizontalmente
   dentro del naipe y son tres o cuatro renglones cortos. Justificar aquí
   abriría calles enormes.
   ---------------------------------------------------------------------- */
.fm-naipe__copy{
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 7% 9%;
  text-align: center;
  text-wrap: pretty;
  hyphens: none;
  color: #2E3138;
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: clamp(12px, 1vw, 18px);
  line-height: 1.9;
  letter-spacing: .01em;
}

/* ---- Hint (se desvanece al abrir la primera) ---------------------------
   En el Figma el rótulo va DEBAJO DEL TÍTULO, no debajo del abanico. Se sube
   por orden de flex y no moviendo el nodo en el template part: así el HTML
   sigue leyéndose en el orden que tiene sentido para un lector de pantalla.
   --fm-hint-order deja la perilla a mano: -1 arriba, 1 abajo.              */
.fm-naipes .fm-naipes__hint{
  order: var(--fm-hint-order, -1);
  margin: 0 0 clamp(40px, 6vh, 76px);
  text-align: center;
  color: rgba(173, 179, 188, .7);
  font-family: "NORD", sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .28em;
  text-transform: uppercase;
  transition: opacity .5s ease;
}

.fm-naipes .fm-naipes__list{ order: 0; }
.fm-naipes .fm-naipes__defs{ order: -2; }

.fm-naipes.is-descubierto .fm-naipes__hint{ opacity: 0; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1199px){
  .fm-naipes__item{ --rot-k: .7; width: clamp(150px, 27vw, 330px); }
}

@media (max-width: 991px){
  .fm-naipes__item{ --rot-k: .45; width: clamp(140px, 29vw, 260px); }
  .fm-naipe__copy{ font-size: 10.5px; line-height: 1.7; padding: 6% 7%; }
}

@media (max-width: 767px){
  .fm-naipes-sec{ padding-block: clamp(56px, 9vh, 90px); }
  .fm-naipes__list{ flex-direction: column; align-items: center; gap: 26px; }
  .fm-naipes__item{
    width: min(80vw, 340px);
    translate: 0;
    --rot-k: 0;                 /* se acaba el abanico: todo derecho */
    z-index: auto;
  }
  .fm-naipe.is-flipped{ transform: none; }   /* sin scale, no hay espacio */
  .fm-naipe__titulo{ font-size: 17px; }
  .fm-naipe__copy{ font-size: 12.5px; line-height: 1.85; padding: 8% 9%; }
  .fm-naipes .fm-naipes__hint{
    margin-bottom: clamp(28px, 5vh, 44px);
    font-size: 12px;
    letter-spacing: .24em;
  }
  .fm-naipes-sec .fm-naipes__head{ line-height: 2; }
}

@media (prefers-reduced-motion: reduce){
  .fm-naipe,
  .fm-naipe__inner{ transition-duration: .01ms; }
}


/* =========================================================================
   SECCIÓN 4 — LA MENTE COMO ESCENARIO
   -------------------------------------------------------------------------
   El contenedor de Elementor que envuelve el shortcode lleva la clase
   `fm-mente-sec`.

   -------------------------------------------------------------------------
   MÓVIL Y TABLET: TÍTULO ARRIBA, LUEGO FOTO, LUEGO DESCRIPCIÓN

   El orden del DOM es foto → (título, intro, pilares), y bajo 991px el
   diseño pide título → foto → intro → pilares. El título vive DENTRO de
   .fm-mente__texto, así que `order` por sí solo no lo puede sacar de ahí:
   order solo reordena hermanos.

   La cura es `display: contents` en .fm-mente__texto bajo 991px: el
   contenedor deja de generar caja y sus tres hijos pasan a ser hijos de flex
   de .fm-mente__inner, donde ya sí se ordenan. Probado en vivo.

   EFECTO SECUNDARIO QUE HAY QUE RESPETAR: con display:contents desaparece
   también su `container-type: inline-size`, así que el `5cqi` del título se
   quedaría sin contenedor y resolvería contra el viewport. Por eso el bloque
   de 991px le reescribe el font-size en vw. Si tocas uno, toca el otro.

   Ese mismo container-type era el que colapsaba la columna a ~120px cuando
   .fm-mente__inner pasaba a column con align-items: flex-start. Con
   display:contents ese bug ya no puede volver.
   ========================================================================= */

.fm-mente-sec,
.fm-mente-sec > .e-con-inner{
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  padding-inline: 0;
}

.fm-mente-sec{ overflow-x: clip; }

.fm-mente{
  background: #01060C;
  padding-block: 120px;
  /* 9vw dejaba el contenido en 1034px a 1265 de ancho y la columna de texto
     se quedaba sin sitio (columnas de 134px). Con 5vw el interior llega a
     1137 y las columnas suben a 175. A 1440 el tope de 1180 no cambia. */
  padding-inline: clamp(20px, 5vw, 128px);
  overflow-x: clip;
}

/* Foto y hueco en PORCENTAJE, no en píxeles.

   Con la foto clavada en 505px, entre 1200 y 1439 el contenedor encogía y la
   foto no: toda la merma se la comía la columna de texto, y con ella las tres
   columnas de los pilares (134px a 1265 de ancho, siete renglones cada una
   con calles enormes por el justificado).

   42.8% y 5% son exactamente 505 y 60 sobre los 1180 del canvas de Figma, así
   que a 1440 el resultado es idéntico al diseño y por debajo la composición
   encoge entera en vez de desarmarse. */
.fm-mente__inner{
  --fm-mente-foto: 42.8%;
  --fm-mente-gap: 5%;

  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--fm-mente-gap);
}

/* ---- Foto ---------------------------------------------------------- */

.fm-mente__foto{
  flex: 0 0 var(--fm-mente-foto);
  width: var(--fm-mente-foto);
  max-width: var(--fm-mente-foto);
  margin: 23px 0 0;          /* la foto baja 23px respecto al título */
}

.fm-mente__img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 505 / 613;
  object-fit: cover;
  object-position: center 40%;
}

.fm-mente__img--vacia{ background: #2E3138; }

/* ---- Columna de texto ---------------------------------------------- */

/* container-type es lo que hace que el título quepa SIEMPRE en un renglón.
   Con vw el tamaño depende del viewport y no de la columna, y en el tramo en
   que la foto se lleva el 42% el título se salía. Con cqi depende del ancho
   real de esta columna: 23 caracteres a ~0.72em de avance necesitan como
   mucho 6cqi, así que 5cqi deja un 20% de colchón.

   Lee la nota del encabezado antes de tocar esta línea. */
.fm-mente__texto{
  flex: 1 1 0;
  min-width: 0;
  container-type: inline-size;
}

.fm-mente__titulo{
  margin: 0 0 60px;
  color: #ADB3BC;
  font-family: "NORD", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 5cqi, 30px);
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Justificado sin guiones, como el frame que mandó Alejandro. */
.fm-mente__intro{
  margin: 0;
  color: #ADB3BC;
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.95;
  letter-spacing: .01em;
  text-align: justify;
  text-wrap: pretty;
  hyphens: none;
}

/* ---- Pilares ------------------------------------------------------- */

.fm-mente__pilares{
  --icon-scale: 1;
  list-style: none;
  margin: 80px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;                 /* 46 -> 34: +8px de ancho por columna */
}

.fm-mente__pilar{ min-width: 0; }

/* Caja de alto fijo = el icono más alto (98px). Con flex-start los tres
   arrancan a la misma altura y los labels caen alineados, como en Figma.
   El dorado se queda SOLO en el icono. */
.fm-mente__icono{
  display: flex;
  align-items: flex-start;
  height: calc(98px * var(--icon-scale));
  margin-bottom: 50px;
  color: #9B8659;              /* los SVG lo heredan por currentColor */
}

.fm-mente__svg{
  display: block;
  height: auto;
  max-width: 100%;
}

.fm-mente__svg--mentalismo { width: calc(73px  * var(--icon-scale)); }
.fm-mente__svg--ilusionismo{ width: calc(115px * var(--icon-scale)); }
.fm-mente__svg--interaccion{ width: calc(160px * var(--icon-scale)); }

/* Mismo gris que el cuerpo de texto. */
.fm-mente__pilar-titulo{
  margin: 0 0 20px;
  color: #ADB3BC;
  font-family: "NORD", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* Red Hat Display, no NORD: en NORD sale todo en mayúsculas y el diseño
   lleva caja normal.
   Justificado sin guiones TAMBIÉN en desktop: es la referencia de Figma que
   mandó Alejandro con los tres pilares. */
.fm-mente__pilar-texto{
  margin: 0;
  color: #ADB3BC;
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: 13px;           /* el del Figma; en 15px el bloque medía 200px */
  line-height: 1.85;
  letter-spacing: .01em;
  text-transform: none;
  text-align: justify;
  text-wrap: pretty;
  hyphens: none;
}


/* =========================================================================
   BANDA DE ATRIBUTOS
   -------------------------------------------------------------------------
   El gris va de BORDE A BORDE de la pantalla, como en el Figma, y también en
   móvil. No depende de que el contenedor de Elementor sea full-width: la
   sección se escapa por su cuenta con el mismo truco de --fm-vw que usan
   keywords y la sección 5. Lo que se limita es el CONTENIDO, con el max-width
   de 1180 del resto del sitio.
   ========================================================================= */

.fm-atributos{
  --fm-atr-linea: 1px;
  --fm-atr-linea-color: #ADB3BC;
  --fm-atr-gutter: clamp(48px, 12vw, 182px);

  width: var(--fm-vw, 100vw);
  margin-inline: calc(50% - var(--fm-vw, 100vw) / 2);

  background: #2E3138;
  padding-block: clamp(58px, 6vw, 92px);
  padding-inline: clamp(24px, 9vw, 128px);
}

.fm-atributos__grid{
  list-style: none;
  margin-inline: auto;
  padding: 0;
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--fm-atr-gutter);
  align-items: stretch;
}

.fm-atributos__item{
  position: relative;
  min-width: 0;
}

/* El hueco lo hace el gap; la línea flota centrada dentro de él. Con
   border-left las tres columnas salían de anchos distintos. */
.fm-atributos__item + .fm-atributos__item::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--fm-atr-gutter) / -2);
  width: var(--fm-atr-linea);
  background: var(--fm-atr-linea-color);
  transform: translateX(-50%);
}

/* Mismo gris que el cuerpo de texto. El rótulo es de una palabra: alineado
   al inicio. Justificar un renglón único no hace nada, pero si algún día son
   dos, `justify` abriría la primera y quedaría raro. */
.fm-atributos__titulo{
  margin: 0 0 20px;
  color: #ADB3BC;
  font-family: "NORD", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: start;
}

.fm-atributos__texto{
  margin: 0;
  color: #ADB3BC;
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .01em;
  text-transform: none;
  text-wrap: pretty;
  text-align: justify;
  hyphens: none;
}


/* =========================================================================
   RESPONSIVE — SECCIÓN 4
   ========================================================================= */

@media (max-width: 1199px){
  .fm-mente__inner{ --fm-mente-gap: 4.5%; }
  .fm-mente__pilares{ margin-top: 60px; --icon-scale: .82; gap: 26px; }
  .fm-mente__icono{ margin-bottom: 38px; }
}

/* -------------------------------------------------------------------------
   TÍTULO → FOTO → DESCRIPCIÓN  (comentario de las 16:22)
   Lee la nota del encabezado de la sección: display:contents saca a los tres
   hijos de .fm-mente__texto al flex de .fm-mente__inner para poder
   ordenarlos, y por eso el título tiene que dejar de medirse en cqi.

   El ritmo va por márgenes y no por `gap`, porque cada salto es distinto.

   El 4.5vw del título sale de una medición: el renglón mide 18.21 x el
   font-size (NORD 300 a .12em de tracking). A 4.5vw entra de una línea desde
   320px de ancho, y se topa en los 26px antes de llegar a los 991.
   ------------------------------------------------------------------------- */

@media (max-width: 991px){
  .fm-mente{ padding-block: 90px; }

  .fm-mente__inner{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .fm-mente__texto{ display: contents; }

  .fm-mente__titulo{
    order: -1;
    margin: 0 0 clamp(24px, 4vw, 36px);
    font-size: clamp(14px, 4.5vw, 26px);
    line-height: 1.5;
  }

  .fm-mente__foto{
    order: 0;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin: 0 0 clamp(28px, 5vw, 44px);
  }

  .fm-mente__intro{ order: 1; margin: 0; }

  .fm-mente__pilares{
    order: 2;
    margin: 52px 0 0;
    --icon-scale: .7;
    gap: 28px;
  }

  .fm-mente__img{ aspect-ratio: 16 / 10; object-position: center 32%; }
  .fm-mente__icono{ margin-bottom: 30px; }
}

/* -------------------------------------------------------------------------
   PILARES EN MÓVIL — apilados y centrados, como en /experiencias/
   -------------------------------------------------------------------------
   Sin carrusel: icono centrado, rótulo centrado y párrafo justificado, uno
   debajo de otro.

   Sin `hyphens`: con la columna estrecha partía palabras a la mitad ("posi-
   bilidades") y quedaba fatal. Justificado sin guiones abre algún hueco pero
   se lee limpio, que es como está la referencia.
   ------------------------------------------------------------------------- */

@media (max-width: 767px){
  .fm-mente{ padding-block: 64px; padding-inline: clamp(24px, 7vw, 40px); }
  .fm-mente__img{ aspect-ratio: 4 / 5; object-position: center 35%; }
  .fm-mente__intro{ font-size: 15px; }

  .fm-mente__pilares{
    grid-template-columns: 1fr;
    gap: clamp(52px, 12vw, 76px);
    margin-top: 52px;
    --icon-scale: 1;
  }

  /* La referencia de Alejandro tiene el párrafo en una medida CORTA y
     centrada, no a todo el ancho de la pantalla. 30em daban 420px: en un
     teléfono de 390 eso es el ancho completo y los renglones salían largos.
     280px es la misma proporción que la referencia (~72% del ancho). */
  .fm-mente__pilar{
    max-width: min(100%, 280px);
    margin-inline: auto;
    text-align: center;
  }

  .fm-mente__icono{
    justify-content: center;
    height: auto;
    margin-bottom: 28px;
  }

  .fm-mente__pilar-titulo{ margin-bottom: 20px; }

  .fm-mente__pilar-texto{
    font-size: 14px;
    line-height: 1.9;
    text-align: justify;
    hyphens: none;
  }

  /* ---- Atributos: gris a todo lo largo, sin márgenes negros ---- */
  .fm-atributos{
    padding-block: 52px;
    padding-inline: clamp(24px, 7vw, 40px);
  }
  .fm-atributos__grid{ grid-template-columns: 1fr; column-gap: 0; }
  .fm-atributos__item{ padding-block: 32px; }
  .fm-atributos__item:first-child{ padding-top: 0; }
  .fm-atributos__item:last-child{ padding-bottom: 0; }

  /* El divisor gira a horizontal y conserva el mismo grosor */
  .fm-atributos__item + .fm-atributos__item::before{
    top: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: var(--fm-atr-linea);
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .fm-mente [data-fm-reveal]{ opacity: 1 !important; transform: none !important; }
}


/* =========================================================================
   SECCIÓN 5 — "UNA EXPERIENCIA DISEÑADA PARA CADA EVENTO"
   -------------------------------------------------------------------------
   POR QUÉ EL PANEL ES UN GRID DE CINCO FILAS

       minmax(0, var(--fm-foto-alto))   foto      ← misma altura en los tres
       auto                             título
       auto                             copy
       auto                             botón
       1fr                              sobrante  ← se lo come el fondo

   La versión anterior le daba `1fr` a la foto: cada panel repartía distinto
   porque el copy de "Experiencias privadas" tiene dos renglones más, y las
   fotos salían de 423 / 398 / 423 px. Los títulos arrancaban 26px más abajo
   en el panel de en medio — el comentario "medidas de títulos no están
   alineados en la parte superior".

   Ahora la fila de la foto tiene una altura DECLARADA, igual en los tres, y
   lo que sobra cae en la quinta fila. Medido después del cambio: los tres
   títulos arrancan en Y = 395.

   Y sigue sin poder cortar nada: `minmax(0, X)` es un techo, no un piso. Si
   algún día el copy crece tanto que no cabe, la fila de la foto se encoge
   sola por debajo de --fm-foto-alto. Se perdería la alineación, nunca el
   contenido.

   --fm-panel usa 100vw y NO --fm-vw a propósito: si --fm-vw llegara a
   publicarse con un valor sin unidad, toda la cadena de calc quedaría
   inválida en tiempo de cómputo, `flex: 0 0 var(--fm-panel)` caería a `unset`
   (= 0 1 auto) y el panel pasaría a medir lo que mida su foto. El fallback de
   var() no salva de eso: solo entra si la propiedad no está definida.

   Constantes del Figma (canvas 1440):
     panel 508, gap 168  ->  gap = 0.331 x panel
     2 paneles + 1 gap   ->  2.331 x panel
     foto 1515:1614      ->  alto = 1.0653 x ancho
   ========================================================================= */

.fm-expfer{
  --fm-expfer-titulo:       #ADB3BC;
  --fm-expfer-panel-titulo: #ADB3BC;
  --fm-expfer-cuerpo:       #ADB3BC;

  width: var(--fm-vw, 100vw);
  margin-inline: calc(50% - var(--fm-vw, 100vw) / 2);
  padding-top: clamp(72px, 10vh, 140px);      /* aire contra los atributos */
  padding-bottom: clamp(96px, 14vh, 180px);   /* aire contra el footer     */
  background: #01060C;
}

.fm-expfer-sec{ overflow-x: clip; }

.fm-expfer__intro{
  padding: clamp(80px, 12vh, 160px) clamp(20px, 5vw, 64px) clamp(48px, 7vh, 96px);
  text-align: center;
}

/* `ch` mide el glifo "0" y NO cuenta el letter-spacing. Con NORD a 0.18em de
   tracking, la primera línea del Figma ocupa 20em reales mientras que 22ch
   resolvía a 16em — de ahí el corte palabra a palabra. En em el tope escala
   solo con el font-size. */
.fm-expfer__intro-titulo{
  margin: 0 auto;
  max-width: min(100%, 21em);
  color: var(--fm-expfer-titulo, #ADB3BC);
  font-family: "NORD", sans-serif;
  font-weight: 300;
  font-size: clamp(19px, 2.2vw, 32px);
  line-height: 1.55;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Centrada, no justificada: son dos renglones centrados bajo el título. */
.fm-expfer__intro-bajada{
  margin: clamp(28px, 4.2vh, 56px) auto 0;
  max-width: min(100%, 640px);
  color: var(--fm-expfer-cuerpo, #ADB3BC);
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.9;
  letter-spacing: 0.01em;
  text-wrap: pretty;
  hyphens: none;
}

/* -------------------------------------------------------------------------
   Pista horizontal
   ---------------------------------------------------------------------- */

.fm-experiencia--fernando{
  /* Cuánto scroll dura el pin respecto al recorrido real de la pista.
     Lo lee experiencia-scroll.js; si no está definida, el motor usa 1 y
     nada cambia en la home.

     Medido en vivo: la pista solo tiene 616px de recorrido (son tres
     paneles y dos se ven enteros), así que a ritmo 1 la sección se pineaba
     0.98 pantallas — mientras que la de keywords, justo antes, dura 3.2.
     Ese contraste es lo que la hacía parecer un bug. Con 2.8 quedan ~2.7
     pantallas y el deslizamiento se lee como intencional. */
  --fm-ritmo: 2.8;

  --fm-pad:       clamp(20px, 8.9vw, 128px);
  --fm-stage-pad: clamp(24px, 4svh, 72px);

  /* Altura reservada para título + copy + botón + sus márgenes. NO puede
     cortar nada: solo decide cuánta altura le queda a la foto.

     SUBE DE 260 A 275: el botón pasa a la medida del sistema y crece de 31
     a 38px de alto. Esos 7px salen de la foto, no del texto.

     Medido en vivo (Red Hat Display 15px, el panel más largo de los tres):
       panel 560 -> 216    panel 400 -> 235    panel 320 -> 286
       panel 451 -> 235    panel 360 -> 261
     El modo horizontal solo corre arriba de 1025px, o sea panel >= 361.   */
  --fm-txt: 275px;

  --fm-alto-util:   calc(100svh - 2 * var(--fm-stage-pad));
  --fm-panel-ancho: calc((100vw - 2 * var(--fm-pad)) / 2.331);

  /* DOS paneles en pantalla y el tercero asomando, como en el Figma.

     Para eso el ancho tiene que salir SOLO del ancho disponible: en cuanto
     entraba el alto en la ecuación el panel se encogía y cabían tres. En el
     canvas de 1440 da (1440-256)/2.331 = 508, que es justo el panel del
     Figma. El suelo de 300 es para pantallas muy angostas.                */
  --fm-panel: max(300px, var(--fm-panel-ancho));
  --fm-gap:   calc(var(--fm-panel) * 0.331);

  /* Altura de la foto: su proporción natural, y si el viewport es bajo, lo
     que quede después de reservar el texto. Es la misma en los tres paneles,
     que es justo lo que alinea los títulos.                               */
  --fm-foto-alto: min(
    calc(var(--fm-panel) * 1.0653),
    calc(var(--fm-alto-util) - var(--fm-txt))
  );

  background: #01060C;
  color: #ADB3BC;
}

/* El base pone align-items:center y la pista nacía centrada, en x:-297.
   La altura la declara este bloque: si depende de la hoja base, el stage
   crece con el contenido y el pin deja de encuadrar. */
.fm-experiencia--fernando .fm-experiencia__stage{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  height: 100svh;
  max-height: 100svh;
  overflow: clip;                 /* clip, no hidden: hidden rompe el pin */
  gap: clamp(16px, 2.6svh, 40px);
  padding-block: var(--fm-stage-pad);
}

.fm-experiencia--fernando .fm-experiencia__pista{
  flex: 1 1 auto;
  align-self: start;   /* sin esto vuelve a centrarse */
  min-height: 0;       /* deja que el panel encoja de verdad */
  height: auto;        /* mata el height:100svh del base */
  display: flex;
  align-items: stretch;
  gap: var(--fm-gap);
  width: max-content;  /* hace que scrollWidth incluya el padding derecho */
  margin: 0;
  padding: 0 var(--fm-pad);
  list-style: none;
}

.fm-experiencia--fernando .fm-experiencia__panel{
  flex: 0 0 var(--fm-panel);
  width: var(--fm-panel);
  height: 100%;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, var(--fm-foto-alto)) auto auto auto 1fr;
  align-content: start;
  gap: 0;
  text-align: left;
}

/* -------------------------------------------------------------------------
   Foto — la altura la manda la fila del grid; el reencuadre lo hace cover
   ---------------------------------------------------------------------- */

.fm-experiencia--fernando .fm-expfer__foto{
  min-height: 0;
  width: 100%;
  max-height: none;      /* el techo ya vive en la fila del grid */
  margin: 0;
  overflow: hidden;
}

.fm-experiencia--fernando .fm-expfer__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.fm-experiencia--fernando .fm-expfer__img--vacia{
  background: #2E3138;
}

/* -------------------------------------------------------------------------
   Texto del panel
   ---------------------------------------------------------------------- */

.fm-experiencia--fernando .fm-expfer__titulo{
  margin: clamp(16px, 2.6svh, 40px) 0 0;
  max-width: 16ch;
  color: var(--fm-expfer-panel-titulo, #ADB3BC);
  font-family: "NORD", sans-serif;
  font-weight: 300;
  font-size: clamp(17px, min(2.2vw, 3.4svh), 30px);
  line-height: 1.45;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Justificado SIN guiones. `hyphens: auto` era lo que partía "empre-sariales"
   en el pantallazo de Alejandro. */
.fm-experiencia--fernando .fm-expfer__texto{
  margin: clamp(12px, 2svh, 28px) 0 0;
  color: var(--fm-expfer-cuerpo, #ADB3BC);
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.01em;
  text-align: justify;
  text-wrap: pretty;
  hyphens: none;
}

/* -------------------------------------------------------------------------
   Botón — MEDIDA DEL SISTEMA (tokens --fm-btn-* de custom.css).

   Antes escalaba con el panel: width min(204px, panel * 0.4) y alto
   proporcional. Eso lo dejaba en 204 x 31 a 1440 y bastante más chico en
   paneles estrechos — o sea, distinto del resto del sitio en TODOS los
   anchos. Ahora es fijo, como los demás.

   Con --fm-panel en su suelo de 300px, un botón de 250 ocupa el 83% del
   panel: entra, pero justo. Si en algún ancho se ve apretado, la salida es
   `min-width: min(var(--fm-btn-ancho), 100%)`.

   En hover: borde dorado y peso 300 → 400. El texto NO cambia de color, se
   queda en #ADB3BC, pero va declarado. El salto de peso no mueve nada
   porque el ancho ya está fijado por el min-width.
   ---------------------------------------------------------------------- */

.fm-experiencia--fernando .fm-expfer__cta{
  justify-self: start;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--fm-btn-ancho);
  min-height: var(--fm-btn-alto);
  max-width: 100%;
  padding-block: 0;
  padding-inline: var(--fm-btn-pad-x);
  margin-top: clamp(14px, 2.4svh, 36px);
  border: 1px solid var(--fm-btn-borde);
  border-radius: 0;
  color: var(--fm-btn-tinta);
  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;
  transition: border-color .35s ease, font-weight .35s ease;
}

.fm-experiencia--fernando .fm-expfer__cta:link,
.fm-experiencia--fernando .fm-expfer__cta:visited{
  color: var(--fm-btn-tinta);
}

.fm-experiencia--fernando .fm-expfer__cta:hover,
.fm-experiencia--fernando .fm-expfer__cta:focus-visible{
  border-color: var(--fm-btn-oro);
  color: var(--fm-btn-tinta);      /* el texto NO cambia de color */
  background-color: transparent;   /* el fondo tampoco            */
  font-weight: var(--fm-btn-peso-on);
}

.fm-experiencia--fernando .fm-expfer__cta:focus-visible{
  outline: 1px solid var(--fm-btn-oro);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Indicador SCROLL
   ---------------------------------------------------------------------- */

.fm-experiencia--fernando .fm-experiencia__hint{
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  color: rgba(173, 179, 188, 0.7);
  font-family: "NORD", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: opacity .3s ease;
}

/* -------------------------------------------------------------------------
   Viewports cortos o angostos. Ninguno de estos números puede cortar nada:
   solo mueven cuánta foto se ve.
   ---------------------------------------------------------------------- */

/* Ventanas bajas: se recorta el aire, NO el ancho del panel — tocarlo
   rompería la regla de los dos paneles en pantalla. */
@media (max-height: 820px){
  .fm-experiencia--fernando{ --fm-stage-pad: clamp(14px, 2svh, 28px); }
}

@media (max-height: 700px){
  /* Con ~630px de alto no cabe la composición a tamaño pleno: es física, no
     CSS. Se ajusta el interlineado antes que el cuerpo, que se nota menos. */
  .fm-experiencia--fernando .fm-expfer__texto{ line-height: 1.7; }
  .fm-experiencia--fernando .fm-expfer__titulo{ line-height: 1.3; }
}

/* Paneles chicos: el copy hace más renglones, así que sube la reserva.
   +15px por el botón más alto, igual que arriba. */
@media (max-width: 1200px){
  .fm-experiencia--fernando{ --fm-txt: 305px; }
}

/* -------------------------------------------------------------------------
   Versión apilada
   La separación entre paneles va DOBLE, por gap y por margen: el gap depende
   de que la pista siga siendo flex, y si la hoja base la devuelve a block el
   gap se pierde sin avisar. El margen entra en los dos casos.
   ---------------------------------------------------------------------- */

.fm-experiencia--fernando.is-estatica .fm-experiencia__stage{
  display: block;
  height: auto;
  max-height: none;
  overflow: visible;
  padding-block: 0;
}

.fm-experiencia--fernando.is-estatica .fm-experiencia__pista{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  height: auto;
  gap: clamp(64px, 12vw, 96px);
  padding-inline: clamp(24px, 6vw, 56px);
  padding-bottom: 0;
}

.fm-experiencia--fernando.is-estatica .fm-experiencia__panel{
  flex: 0 0 auto;
  width: min(100%, 520px);
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;   /* clave: la base lo repartía */
  gap: 0;
  text-align: left;
}

.fm-experiencia--fernando.is-estatica .fm-experiencia__panel + .fm-experiencia__panel{
  margin-top: clamp(64px, 12vw, 96px);
}

.fm-experiencia--fernando.is-estatica .fm-expfer__foto{
  flex: 0 0 auto;
  width: 100%;
  max-height: none;
  aspect-ratio: 1515 / 1614;
  margin: 0;
}

.fm-experiencia--fernando.is-estatica .fm-expfer__titulo{
  margin: 26px 0 0;
  max-width: none;
  font-size: clamp(21px, 3.4vw, 28px);
  line-height: 1.45;
}

/* Justificado también en móvil, sin guiones. */
.fm-experiencia--fernando.is-estatica .fm-expfer__texto{
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.95;
  text-align: justify;
  hyphens: none;
}

/* Del botón solo cambia el ancho y el margen: la medida son los tokens. */
.fm-experiencia--fernando.is-estatica .fm-expfer__cta{
  align-self: flex-start;
  justify-self: auto;
  width: var(--fm-btn-ancho);
  margin-top: 28px;
}

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

/* Intro en móvil: sigue centrado, solo cambia la escala tipográfica. */
@media (max-width: 1024px){

  .fm-expfer__intro-titulo{
    font-size: clamp(20px, 3.4vw, 28px);
  }

  .fm-expfer__intro-bajada{
    font-size: 15px;
  }
}