/* ==========================================================================
   fm-eventos.css — Página Eventos
   S1 · Hero "Eventos corporativos"
   S2 · Tipos de evento
   S3 · Beneficios
   S4 · Impactante / Marcas
   S5 · CTA                 ← RENOMBRADO: fm-cta → fm-evcta

   --------------------------------------------------------------------------
   ⚠ RENOMBRADO DE LA S5 — HAY QUE TOCAR TRES SITIOS MÁS

   El CTA de esta página se llamaba .fm-cta, igual que el CTA compartido de
   assets/css/fm-cta.css que usa /experiencias/ y /trayectoria/. Son dos
   componentes distintos: tokens distintos (--cta-* vs --fm-cta-alto), marcado
   distinto (.fm-cta__btn vs .fm-cta__boton) y alturas distintas. Hoy no
   chocaban solo porque las hojas se encolan en páginas distintas; el día que
   coincidieran, el min-height de uno pisaría al otro.

   Fuera de este archivo hay que cambiar:

     1. ELEMENTOR · el contenedor que envuelve el shortcode de la S5 lleva
        hoy la clase  fm-cta-con  → cámbiala a  fm-evcta-con
        (Avanzado → Clases CSS).

     2. template-parts/eventos-cta.php (o como se llame el partial de la S5):
        renombrar en el marcado
             fm-cta          → fm-evcta
             fm-cta__fondo   → fm-evcta__fondo
             fm-cta__inner   → fm-evcta__inner
             fm-cta__titulo  → fm-evcta__titulo
             fm-cta__texto   → fm-evcta__texto
             fm-cta__acciones→ fm-evcta__acciones
             fm-cta__btn     → fm-evcta__btn

     3. El JS de entrada de esta página (el que añade .is-anim y lee
        [data-fm-rev] en el CTA): cambiar el selector '.fm-cta' por
        '.fm-evcta'.

   Si subes esta hoja sin hacer 1 y 2, la S5 se queda sin estilos.
   --------------------------------------------------------------------------

   REVISIÓN 2026-09 · botones
   Ni el hero ni el CTA declaran ya medida propia: consumen los tokens
   --fm-btn-* de custom.css. Ver el bloque 06 de esa hoja.
   ========================================================================== */

/* La ruta es relativa a este archivo: /assets/css/ → /assets/fonts/ */
@font-face {
  font-family: "Detacher";
  src: url("../fonts/Detacher-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.fm-evhero {
  --evh-negro:  #01060C;
  --evh-dorado: #9B8659;
  --evh-claro:  #ADB3BC;
  --evh-gris:   #ADB3BC;

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;

  width: var(--fm-vw, 100vw);
  margin-inline: calc(50% - var(--fm-vw, 100vw) / 2);
  min-height: min(calc(var(--fm-vw, 100vw) * 0.4583), 760px);

  overflow-x: clip;
  background-color: var(--evh-negro);
}

/* Imagen de fondo ------------------------------------------------------- */
.fm-evhero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  display: block;
}

/* Overlay: vertical arriba para el header, horizontal para la legibilidad */
.fm-evhero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(1, 6, 12, 0.70) 0%,
      rgba(1, 6, 12, 0)    34%),
    linear-gradient(to right,
      rgba(1, 6, 12, 0.94) 0%,
      rgba(1, 6, 12, 0.80) 34%,
      rgba(1, 6, 12, 0.42) 66%,
      rgba(1, 6, 12, 0.18) 100%);
}

/* Contenido ------------------------------------------------------------- */
.fm-evhero__inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-block: clamp(56px, 8.9vw, 128px);
  padding-inline: clamp(24px, 8.9vw, 128px);
}

.fm-evhero__titulo {
  margin: 0;
  font-family: "Kratch Revotch", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 5.3vw, 76px);
  line-height: 1.18;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--evh-gris);
}

.fm-evhero__titulo span { display: block; }

.fm-evhero__texto {
  margin: clamp(28px, 3.3vw, 48px) 0 0;
  font-family: "Red Hat Display", sans-serif;
  font-size: clamp(14px, 1.11vw, 20px);
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--evh-gris);
  max-width: min(100%, 44em);
}

/* MEDIDA DEL SISTEMA. Ancho, alto, cuerpo y tracking salen de los tokens
   --fm-btn-* de custom.css. Este botón medía antes 14px de padding vertical
   y crecía con el contenido, así que en escritorio salía más alto y más
   estrecho que el del CTA de la misma página. */
.fm-evhero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--fm-btn-ancho);
  min-height: var(--fm-btn-alto);
  margin-top: clamp(28px, 2.8vw, 40px);
  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-size: var(--fm-btn-tam);
  font-weight: var(--fm-btn-peso);
  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;
  color: var(--fm-btn-tinta);
  transition: border-color 0.35s ease;
}

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

/* Hover: borde a dorado y peso 300 → 400. El texto se queda en #ADB3BC,
   declarado explícitamente para que no lo pise a:visited del tema. */
.fm-evhero__cta:hover,
.fm-evhero__cta:focus-visible {
  font-weight: var(--fm-btn-peso-on);
  border-color: var(--fm-btn-oro);
  color: var(--fm-btn-tinta);
  text-decoration: none;
}

/* Entrada suave (solo CSS, sin GSAP) ------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .fm-evhero__titulo,
  .fm-evhero__texto,
  .fm-evhero__cta {
    animation: fm-evhero-entra 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .fm-evhero__texto { animation-delay: 0.12s; }
  .fm-evhero__cta   { animation-delay: 0.22s; }
}

@keyframes fm-evhero-entra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive S1
   ========================================================================== */

/* Tablet ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .fm-evhero {
    min-height: calc(var(--fm-vw, 100vw) * 0.66);
  }
  .fm-evhero__titulo {
    font-size: clamp(34px, 6.6vw, 58px);
  }
  .fm-evhero__texto {
    font-size: 15px;
    line-height: 1.8;
    max-width: min(100%, 38em);
  }
  .fm-evhero::before {
    background:
      linear-gradient(to bottom,
        rgba(1, 6, 12, 0.70) 0%,
        rgba(1, 6, 12, 0)    30%),
      linear-gradient(to right,
        rgba(1, 6, 12, 0.94) 0%,
        rgba(1, 6, 12, 0.84) 46%,
        rgba(1, 6, 12, 0.50) 78%,
        rgba(1, 6, 12, 0.28) 100%);
  }
}

/* Móvil ----------------------------------------------------------------- */
@media (max-width: 767px) {
  .fm-evhero {
    /* la imagen móvil es 900×1125 (4:5), la altura la iguala exacto */
    min-height: calc(var(--fm-vw, 100vw) * 1.25);
    align-items: flex-end;
  }

  .fm-evhero__media {
    object-position: center center;
  }

  /* En móvil el texto va encima de la foto: degradado vertical, no lateral */
  .fm-evhero::before {
    background: linear-gradient(to bottom,
      rgba(1, 6, 12, 0.82) 0%,
      rgba(1, 6, 12, 0.40) 30%,
      rgba(1, 6, 12, 0.74) 62%,
      rgba(1, 6, 12, 0.96) 100%);
  }

  .fm-evhero__inner {
    padding-block: 48px 56px;
    padding-inline: 24px;
  }

  /* El título refluye solo, sin salto forzado */
  .fm-evhero__titulo span { display: inline; }

  .fm-evhero__titulo {
    font-size: clamp(28px, 8.4vw, 40px);
    line-height: 1.3;
    letter-spacing: 0.14em;
  }

  .fm-evhero__texto {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.75;
    max-width: none;
  }

  /* Del botón solo se toca el margen: la medida la resuelven los tokens. */
  .fm-evhero__cta {
    margin-top: 28px;
    width: var(--fm-btn-ancho);
  }
}

/* Pantallas muy bajas (laptops 13") -------------------------------------- */
@media (min-width: 768px) and (max-height: 720px) {
  .fm-evhero {
    min-height: 0;
  }
  .fm-evhero__inner {
    padding-block: clamp(48px, 7vw, 88px);
  }
}

/* =======================================================================
 * S2 — TIPOS DE EVENTO
 * Grid de 6 tarjetas informativas (no son enlaces).
 * ==================================================================== */

/* Neutraliza el padding del container de Elementor.
   Especificidad 0,2,0 con > encadenado, como en el resto del proyecto. */
.fm-tipos-con,
.fm-tipos-con > .e-con-inner {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --content-width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────
 * ESTA REGLA ES LA QUE ARREGLA EL CORTE DE LAS ÚLTIMAS TARJETAS. NO LA
 * QUITES.
 *
 * Elementor pone `flex-wrap: wrap` en todo container (.e-con.e-flex) y su
 * dirección por defecto es `column`. Un flexbox en columna que envuelve
 * necesita un alto definido para saber dónde cortar la línea; con alto
 * automático mide el ítem por su tamaño intrínseco, y ahí NO cuentan ni el
 * `aspect-ratio` de las tarjetas ni el padding porcentual. Como el alto de
 * esta sección sale entero del aspect-ratio, el container la medía 157px
 * más corta de lo que es:
 *
 *     .fm-tipos-sec ....... 988px   (lo que ocupa de verdad)
 *     su container ........ 831px   (lo que Elementor creía)
 *
 * La sección desbordaba esos 157px, y como el container de la S3 arrancaba
 * donde terminaba el de la S2 —en 1453 y no en 1610—, el fondo negro de
 * Beneficios pintaba encima de los últimos 93px de la fila inferior. No era
 * la foto, ni el aspect-ratio, ni el CDN: era la sección de abajo tapando a
 * la de arriba.
 *
 * `nowrap` hace que el container mida a su hijo y ya. Comprobado: pasa de
 * 831 a 988, el desborde queda en 0 y la S3 arranca en 1610.
 *
 * Especificidad 0,3,0 para ganarle a `.e-con.e-flex` (0,2,0) sin !important
 * y sin depender del orden de carga de las hojas.
 *
 * Cualquier sección futura cuyo alto dependa de `aspect-ratio` va a repetir
 * esto. La señal es container.scrollHeight > container.clientHeight.
 * ───────────────────────────────────────────────────────────────────────── */
.elementor .fm-tipos-con.e-flex {
  flex-wrap: nowrap;
}

.fm-tipos-sec {
  background: #01060C;
  padding-block: clamp(72px, 9vw, 128px);
  padding-inline: clamp(24px, 5vw, 64px);
}

.fm-tipos-sec__titulo {
  margin: 0 0 clamp(40px, 5vw, 72px);
  font-family: "NORD", sans-serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  color: #ADB3BC;
}

/* Grid ------------------------------------------------------------------ */

.fm-tipos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1184px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.fm-tipo {
  position: relative;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2E3138; /* se ve mientras carga la imagen */
}

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

.fm-tipo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Velo de legibilidad. Pseudo-elemento aparte para animarlo sin tocar la img. */
/*.fm-tipo::after {*/
/*  content: "";*/
/*  position: absolute;*/
/*  inset: 0;*/
/*  background:*/
/*    linear-gradient(to bottom,*/
/*      rgba(1, 6, 12, 0.30) 0%,*/
/*      rgba(1, 6, 12, 0.62) 46%,*/
/*      rgba(1, 6, 12, 0.72) 100%);*/
/*  transition: opacity 600ms ease;*/
/*}*/

.fm-tipo__titulo {
  position: relative; /* por encima del ::after */
  z-index: 1;
  margin: 0;
  padding-inline: 12px;
  font-family: "NORD", sans-serif;
  font-weight: 300;
  font-size: clamp(13px, 1.15vw, 26px);
  line-height: 1.55;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: #ADB3BC;
  text-wrap: balance;
}

/* Cada span es una línea del diseño de Alejandro */
.fm-tipo__titulo span { display: block; }

/* Encuadre por tarjeta.
   Si el snippet de diagnóstico reporta que alguna foto NO viene en 5:7,
   object-fit: cover recorta por donde le toca y puede partir una cara. El
   arreglo bueno es reexportar la foto en proporción; el arreglo rápido es
   mover el encuadre desde aquí. Añade la clase modificadora al <li>.

.fm-tipo--cierres      .fm-tipo__img { object-position: 50% 30%; }
.fm-tipo--experiencias .fm-tipo__img { object-position: 50% 40%; }
*/

/* Hover: solo en dispositivos con puntero real.
   Las tarjetas no son clicables, así que el realce es sutil a propósito. */
@media (hover: hover) and (pointer: fine) {
  .fm-tipo:hover .fm-tipo__img { transform: scale(1.05); }
  .fm-tipo:hover::after { opacity: 0.82; }
}

@media (prefers-reduced-motion: reduce) {
  .fm-tipo__img,
  .fm-tipo::after { transition: none; }
  .fm-tipo:hover .fm-tipo__img { transform: none; }
}

/* Tablet y móvil: 2 columnas ------------------------------------------- */
@media (max-width: 1024px) {
  .fm-tipos {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .fm-tipos-sec {
    padding-block: 64px;
    padding-inline: 20px;
  }
  .fm-tipos-sec__titulo {
    font-size: 20px;
    letter-spacing: 0.26em;
    margin-bottom: 36px;
  }
  .fm-tipos { gap: 10px; }
  .fm-tipo__titulo {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.14em;
    padding-inline: 8px;
  }
}

/* Teléfonos angostos: el letter-spacing rompe palabras largas
   como "EMPRESARIALES" si no se afloja más. */
@media (max-width: 400px) {
  .fm-tipo__titulo {
    font-size: 10px;
    letter-spacing: 0.1em;
    padding-inline: 6px;
  }
}

/* =======================================================================
 * S3 — BENEFICIOS  ·  FM_EVENTOS_S3
 *
 * Escritorio: dos columnas, una sola línea dorada partiendo el bloque
 * derecho por la mitad (la <hr> del marcado).
 *
 * Móvil: el Figma Mobile pide una línea dorada entre TODOS los bloques,
 * incluido el corte entre el párrafo de intro y "A LA MEDIDA". Eso no lo
 * puede dar la <hr>: vive dentro de .fm-ben__bloque, así que el intro
 * queda fuera de su alcance, y al ocultarla con display:none sigue
 * contando como hermano y rompe la cadena de `.fm-ben__item + .fm-ben__item`
 * justo antes del primer 100%. Por eso en vertical la <hr> desaparece y
 * la separación pasa a un border-top en cada ítem más uno en el bloque.
 *
 * Todos los valores editables están en los dos bloques de tokens:
 * .fm-ben para escritorio, y el @media de 767 para móvil.
 * ==================================================================== */

.fm-ben-con,
.fm-ben-con > .e-con-inner {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --content-width: 100%;
}

.fm-ben {
  /* --- Tokens de la sección ------------------------------------------- */
  --ben-negro:  #01060C;
  --ben-claro:  #ADB3BC;
  --ben-gris:   #ADB3BC;
  --ben-dorado: #9B8659;

  /* Display (mayúsculas, tracking ancho) vs. texto corrido. */
  --ben-display: "NORD", sans-serif;
  --ben-cuerpo:  "Red Hat Display", "Helvetica Neue", Arial, sans-serif;

  /* NORD trae 100 / 300 / 400. El diseño está en el trazo fino. */
  --ben-peso-display: 300;
  --ben-peso-cuerpo:  300;

  --ben-linea: rgba(155, 134, 89, 0.9);

  /* Ritmo vertical — las tres marcas rojas del Figma. */
  --ben-aire-titulo: clamp(32px, 3.6vw, 56px);  /* título → párrafo      */
  --ben-aire-item:   clamp(28px, 3.6vw, 52px);  /* alrededor de la línea */
  --ben-aire-cierre: clamp(36px, 4.4vw, 68px);  /* fondo del bloque      */

  position: relative;
  isolation: isolate;   /* encierra los z-index negativos de abajo */
  overflow: hidden;
  background: var(--ben-negro);  /* se ve mientras carga la imagen */
}

/* Fondo ------------------------------------------------------------------ */

.fm-ben__fondo,
.fm-ben__fondo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}

/* Velo de legibilidad.
   La imagen nueva ya viene oscura por la izquierda, así que el velo solo
   tiene que rematar la zona del texto y se apaga por completo antes del
   tercio derecho, que es donde vive el reflejo dorado. */
.fm-ben::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right,
      rgba(1, 6, 12, 0.80) 0%,
      rgba(1, 6, 12, 0.58) 28%,
      rgba(1, 6, 12, 0.20) 58%,
      rgba(1, 6, 12, 0)    82%),
    linear-gradient(to bottom,
      rgba(1, 6, 12, 0.42) 0%,
      rgba(1, 6, 12, 0)    18%,
      rgba(1, 6, 12, 0)    82%,
      rgba(1, 6, 12, 0.42) 100%);
}

/* Rejilla ---------------------------------------------------------------- */

.fm-ben__inner {
  position: relative;
  max-width: 1184px;
  margin-inline: auto;
  padding-block: clamp(96px, 11vw, 176px);
  padding-inline: clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(56px, 8vw, 128px);
  align-items: center;
}

/* Columna izquierda ------------------------------------------------------ */

.fm-ben__titulo {
  margin: 0;
  font-family: var(--ben-display);
  font-weight: var(--ben-peso-display);
  font-size: clamp(24px, 1.95vw, 32px);
  line-height: 1.3;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ben-claro);
}

.fm-ben__texto {
  margin: var(--ben-aire-titulo) 0 0;
  margin-inline-end: 60px;
  font-family: var(--ben-cuerpo);
  font-weight: var(--ben-peso-cuerpo);
  font-size: clamp(14px, 1.11vw, 18px);
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--ben-gris);
  text-align: justify;
  hyphens: auto;
}

/* Bloque derecho --------------------------------------------------------- */

.fm-ben__bloque {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: 0;
}

.fm-ben__item {
  padding-block: var(--ben-aire-item);
}

/* La primera fila no necesita aire arriba: ya lo pone el padding del inner. */
.fm-ben__bloque > .fm-ben__item:nth-child(-n + 2) {
  padding-block-start: 0;
}

.fm-ben__item--dato {
  padding-block-end: var(--ben-aire-cierre);
}

.fm-ben__linea {
  grid-column: 1 / -1;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--ben-linea);
  opacity: 1;
}

.fm-ben__rotulo {
  margin: 0;
  font-family: var(--ben-display);
  font-weight: var(--ben-peso-display);
  font-size: clamp(13px, 0.95vw, 18.5px);
  line-height: 1.6;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ben-claro);
}

.fm-ben__desc {
  margin: clamp(18px, 1.8vw, 26px) 0 0;
  font-family: var(--ben-cuerpo);
  font-weight: var(--ben-peso-cuerpo);
  font-size: clamp(13px, 0.97vw, 14px);
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--ben-gris);
  text-align: justify;
  /*hyphens: auto;*/
}

/* En dos columnas, "A LA MEDIDA" ocupa una línea y "EJECUCIÓN PROFESIONAL"
   dos, así que las descripciones arrancaban desalineadas. Reservar dos
   líneas de alto en los rótulos de la primera fila las cuadra sin meter
   un <br> en el marcado — que es lo que rompía el móvil. */
@media (min-width: 768px) {
  .fm-ben__bloque > .fm-ben__item:nth-child(-n + 2) .fm-ben__rotulo {
    min-block-size: calc(1.6em * 2);
  }
}

/* Cifras ----------------------------------------------------------------- */

.fm-ben__cifra {
  margin: 0 0 clamp(16px, 1.8vw, 26px);
  font-family: var(--ben-display);
  font-weight: var(--ben-peso-display);
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--ben-claro);
  white-space: nowrap;
}

/* min-width reserva el ancho de los 3 dígitos para que el % no se mueva
   mientras cuenta. En em, no en ch: ch mide el glifo "0" e IGNORA el
   letter-spacing, así que con tracking ancho se queda corto y el símbolo
   pega un brinco al llegar a 100. */
.fm-ben__num {
  display: inline-block;
  min-width: 2.25em;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* Entrada progresiva ------------------------------------------------------
   Contrato idéntico al de .fm-traycifras: el JS añade .is-anim solo cuando
   ya comprobó que puede volver a mostrar (GSAP presente y sin
   prefers-reduced-motion). Sin JS la clase nunca entra y todo queda
   visible, con las cifras en su valor final. */
.fm-ben.is-anim [data-fm-rev] {
  opacity: 0;
  will-change: transform, opacity;
}

.fm-ben.is-anim [data-fm-rev="linea"] {
  transform: scaleX(0);
  transform-origin: left center;
}

/* Tablet ----------------------------------------------------------------- */
@media (max-width: 1024px) {
  .fm-ben__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(48px, 7vw, 72px);
    align-items: start;
  }
  .fm-ben__texto {
    margin-inline-end: 0;
    max-width: min(100%, 46em);
  }
  /* A una columna el degradado lateral deja el texto sobre la parte clara
     de la seda: se cambia a vertical, pero sin taparla del todo. */
  .fm-ben::before {
    background:
      linear-gradient(to bottom,
        rgba(1, 6, 12, 0.78) 0%,
        rgba(1, 6, 12, 0.50) 42%,
        rgba(1, 6, 12, 0.70) 100%);
  }
}

/* Móvil ------------------------------------------------------------------
   Medidas tomadas del Figma Mobile. Todo lo tipográfico y el ritmo salen
   de estos cinco tokens: si Alejandro pide ajustes, se tocan aquí.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {

  .fm-ben {
    --ben-mov-titulo: 26px;
    --ben-mov-rotulo: 15px;
    --ben-mov-cuerpo: 16px;
    --ben-mov-cifra:  46px;
    --ben-mov-aire:   34px;   /* separación a cada lado de cada línea */
  }

  .fm-ben__inner {
    padding-block: 80px;
    padding-inline: 24px;
    /* El ritmo lo llevan los paddings de los ítems, no el gap del grid:
       si se reparte entre los dos, las líneas quedan descentradas. */
    gap: 0;
  }

  .fm-ben__texto {
    margin-inline-end: 0;
  }

  /* En vertical la <hr> sobra: la separación tiene que ir también entre el
     intro y el primer bloque, y eso queda fuera de .fm-ben__bloque. */
  .fm-ben__linea {
    display: none;
  }

  .fm-ben__bloque {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  /* Una línea dorada por bloque. Se repite el selector con :nth-child para
     ganarle en especificidad a la regla de escritorio (0,3,0), que si no
     seguiría poniendo padding-block-start: 0 en los dos primeros. */
  .fm-ben__bloque > .fm-ben__item,
  .fm-ben__bloque > .fm-ben__item:nth-child(-n + 2) {
    padding-block: var(--ben-mov-aire);
    border-top: 1px solid var(--ben-linea);
  }

  /* La primera línea, la que separa el párrafo de intro de "A LA MEDIDA". */
  .fm-ben__intro {
    padding-block-end: var(--ben-mov-aire);
  }

  /* Sin línea ni aire de más al cerrar: ya lo pone el padding del inner. */
  .fm-ben__bloque > .fm-ben__item:last-child {
    padding-block-end: 0;
  }

  .fm-ben__titulo {
    font-size: var(--ben-mov-titulo);
    letter-spacing: 0.24em;
  }

  .fm-ben__rotulo {
    font-size: var(--ben-mov-rotulo);
    letter-spacing: 0.24em;
  }

  /* El Figma Mobile mantiene el justificado. Con hyphens: auto y una
     columna de ~340px no abre ríos; sin los guiones sí lo haría. */
  .fm-ben__texto,
  .fm-ben__desc {
    font-size: var(--ben-mov-cuerpo);
    line-height: 1.8;
    text-align: justify;
    /*hyphens: auto;*/
  }

  .fm-ben__desc {
    margin-top: 22px;
  }

  .fm-ben__cifra {
    font-size: var(--ben-mov-cifra);
    margin-bottom: 14px;
  }

  /* Algo más denso que en tablet: en la captura el tercio inferior de la
     seda se comía el contraste de "MEMORABLE". */
  /*.fm-ben::before {*/
  /*  background:*/
  /*    linear-gradient(to bottom,*/
  /*      rgba(1, 6, 12, 0.86) 0%,*/
  /*      rgba(1, 6, 12, 0.62) 40%,*/
  /*      rgba(1, 6, 12, 0.82) 100%);*/
  /*}*/

  /* El archivo -mov-900 ya viene recortado sobre el reflejo dorado, así que
     el encuadre correcto es el centro. Ojo si algún día se sustituye por la
     imagen apaisada: ahí sí haría falta desplazarlo a ~72%. */
  .fm-ben__fondo img {
    object-position: center center;
  }
}

/* Teléfonos angostos ----------------------------------------------------- */
@media (max-width: 400px) {
  .fm-ben {
    --ben-mov-titulo: 22px;
    --ben-mov-rotulo: 13px;
    --ben-mov-cuerpo: 15px;
    --ben-mov-cifra:  40px;
    --ben-mov-aire:   28px;
  }

  .fm-ben__inner {
    padding-inline: 20px;
  }

  /* A 320px de ancho el justificado sí abre huecos. */
  .fm-ben__texto,
  .fm-ben__desc {
    text-align: left;
  }
}

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

/* =======================================================================
 * S4 — IMPACTANTE / MARCAS  ·  FM_EVENTOS_S4
 * Carrusel automático. El markup vive en template-parts/eventos-marcas.php
 * y el motor en assets/js/fm-eventos-marcas.js.
 *
 * --fm-slots  = cuántos slots caben en el ancho visible (admite decimales).
 *               El JS lo lee de aquí; los breakpoints viven solo en el CSS.
 * --fm-act    = escala del slot centrado.
 * --fm-lado   = escala de los slots laterales.
 * ==================================================================== */

.fm-marcas-con,
.fm-marcas-con > .e-con-inner {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --content-width: 100%;
}

.fm-marcas {
  background: #01060C;
  overflow-x: clip;   /* no 'hidden': rompería cualquier sticky vecino */
}

.fm-marcas__inner {
  max-width: 1184px;
  margin-inline: auto;
  padding-block: clamp(72px, 9vw, 144px);
  padding-inline: clamp(24px, 5vw, 64px);
}

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

/* Encabezado ------------------------------------------------------------- */

.fm-marcas__head { text-align: center; }

/* Detacher solo trae ASCII: sin acentos ni ñ. Si el copy los necesita, el
   carácter suelto cae a NORD y se nota. NORD queda como respaldo a propósito. */
.fm-marcas__titulo {
  margin: 0;
  font-family: "Detacher", "NORD", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 4.4vw, 62px);
  line-height: 1.15;
  letter-spacing: 0.22em;
  text-indent: 0.22em;   /* compensa el hueco del tracking al centrar */
  text-transform: uppercase;
  color: #ADB3BC;
}

.fm-marcas__texto {
  margin: clamp(22px, 2.6vw, 40px) auto 0;
  max-width: min(100%, 46em);
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: #ADB3BC;
  text-wrap: pretty;
}

.fm-marcas__marca {
  margin: clamp(26px, 3.2vw, 52px) 0 0;
  min-height: 1em;   /* reserva la línea: el texto cambia con el carrusel */
  font-family: "NORD", sans-serif;
  font-weight: 300;
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: #ADB3BC;
}

/* Carrusel: estructura común -------------------------------------------- */

/* overflow-y visible para que el slot centrado, que escala por encima de 1,
   no se recorte arriba y abajo. */
.fm-marcas__viewport {
  overflow-x: clip;
  overflow-y: visible;
}

.fm-marcas__pista {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  will-change: transform;

  /* Reposo. Misma fórmula que reposo() en el JS: si cambias una, cambia la
     otra. Sin JS la sección se ve igual, solo que quieta. */
  transform: translateX(calc(50% - (100% / var(--fm-slots)) * 1.5));
}

.fm-marcas__slot {
  flex: 0 0 calc(100% / var(--fm-slots));
  min-width: 0;
  display: flex;
  justify-content: center;
  scale: var(--fm-lado);
  opacity: 0.55;
  transition: scale .9s cubic-bezier(.45,.05,.25,1),
              opacity .9s ease,
              color .9s ease;
}

.fm-marcas__slot.es-activo {
  scale: var(--fm-act);
  opacity: 1;
}

/* Fila de logos ---------------------------------------------------------- */

/* --fm-slots tiene que ser un ENTERO IMPAR (1, 3, 5...).
   Con la pista centrada en el hijo 1, cualquier valor fraccionario deja
   medio slot asomando en cada borde y eso es exactamente el "que no se vean
   los cortes de logos e imágenes" de Alejandro. Con 3 se ven tres piezas
   completas, como en el Figma; con 1, solo la central. */
.fm-marcas__viewport--logos {
  --fm-slots: 3;
  --fm-act: 1.12;
  --fm-lado: 0.72;
  margin-top: clamp(44px, 6vw, 88px);
}

/* El logo activo y los laterales comparten color: la distinción la hacen la
   opacidad (0.55 vs 1) y la escala. El gris del proyecto es #ADB3BC y no hay
   ningún otro. */
.fm-marcas__slot--logo,
.fm-marcas__slot--logo.es-activo { color: #ADB3BC; }

/* Caja común: los ratios van de 6.93 (Nickelodeon) a 1.46 (Villa del Palmar).
   Con preserveAspectRatio los apaisados topan por ancho y los altos por alto,
   que es lo que empareja el peso visual.

   "Logos más pequeños y más espacio entre ellos": las dos cosas salen del
   mismo número. El slot no cambia de ancho — lo fija --fm-slots — así que
   reducir el ancho del logo dentro de él lo encoge Y abre hueco con el
   vecino a la vez. 80% → 58%. */
.fm-marcas__logo {
  display: block;
  width: 58%;
  aspect-ratio: 3.2 / 1;
  scale: var(--fm-esc, 1);
}

.fm-marcas__logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Calibración óptica: √(ancho × alto) de lo dibujado, igualado a la mediana.
   Punto de partida, no verdad revelada — compara contra el Figma y muévelos. */
.fm-marcas__logo--nickelodeon    { --fm-esc: 1.22; }
.fm-marcas__logo--excellence     { --fm-esc: 1.00; }
.fm-marcas__logo--hyatt          { --fm-esc: 0.95; }
.fm-marcas__logo--moonpalace     { --fm-esc: 0.86; }
.fm-marcas__logo--marriott       { --fm-esc: 0.84; }
.fm-marcas__logo--garzablanca    { --fm-esc: 0.88; }
.fm-marcas__logo--finest         { --fm-esc: 1.02; }
.fm-marcas__logo--hardrock       { --fm-esc: 1.15; }
.fm-marcas__logo--villadelpalmar { --fm-esc: 1.23; }

/* Fila de medios --------------------------------------------------------- */

/* Tres cajas completas. act 1.12 + lado 0.68 mantienen la jerarquía del
   Figma (la central ~1.65× las laterales) sin que se toquen: la suma de
   semianchos es 0.90 de slot, por debajo del 1 que las separa. */
.fm-marcas__viewport--medios {
  --fm-slots: 3;
  --fm-act: 1.12;
  --fm-lado: 0.68;
  /* "+ Espacio entre logos e img" */
  margin-top: clamp(56px, 8vw, 120px);
}

.fm-marcas__caja {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: #2E3138;   /* se ve mientras carga la foto */
}

/* El <picture> es un elemento en línea: sin esto mide por el line-height y
   deja una franja del gris de la caja bajo la foto. */
.fm-marcas__caja picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

/* Encuadre por marca. Las fotos ya salen recortadas en 5:3 desde origen, así
   que object-fit no debería tener que recortar nada. Esto queda por si algún
   día se sustituye una por un archivo con otra proporción:

.fm-marcas__slot--medio-hyatt img { object-position: 50% 35%; }
*/

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

@media (max-width: 1024px) {
  /* Sigue en 3: bajar a 2 dejaría medio slot a cada lado. Lo que se ajusta
     es el tamaño de la pieza dentro del slot, no cuántos slots hay. */
  .fm-marcas__logo             { width: 66%; }
  .fm-marcas__viewport--logos  { --fm-act: 1.10; --fm-lado: 0.74; }
  .fm-marcas__viewport--medios { --fm-act: 1.10; --fm-lado: 0.72; }
}

/* Móvil: un solo slot. Es la única forma de que no asome nada por los
   bordes. --fm-act se queda en 1 en los medios porque la caja ocupa el
   100% del slot: cualquier escala por encima de 1 la recortaría el clip. */
@media (max-width: 767px) {
  .fm-marcas__logo             { width: 62%; }
  .fm-marcas__viewport--logos  { --fm-slots: 1; --fm-act: 1.00; --fm-lado: 1; }
  .fm-marcas__viewport--medios { --fm-slots: 1; --fm-act: 1.00; --fm-lado: 1; }

  /* Con una sola pieza a la vista, la atenuación de los laterales sobra:
     el que sale y el que entra se cruzan y verías el fundido a mitad de
     recorrido. */
  .fm-marcas__slot { opacity: 1; }
}

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

/* =======================================================================
 * S5 — CTA "¿LISTO PARA ELEVAR TU EVENTO?"  ·  FM_EVENTOS_S5
 *
 * ⚠ NAMESPACE: fm-evcta. Antes era fm-cta y chocaba con el CTA compartido
 * de assets/css/fm-cta.css. Lee la nota del encabezado de este archivo:
 * hay que cambiar la clase en Elementor, en el template part y en el JS.
 *
 * Dos composiciones distintas, no una adaptada:
 *
 *   Escritorio — banda ancha y baja (≈4.2:1 en el Figma), título en una
 *                sola línea y los dos botones en fila.
 *   Móvil      — bloque vertical de 1 : 1.905 medido sobre el marco del
 *                Figma, título en tres líneas y los botones apilados.
 *
 * Cada una tiene su propia imagen de fondo: CTA.jpg (4320×981) en
 * horizontal y fondo-cta (1206×2298) en vertical. No son recortes de la
 * misma foto, así que el <picture> cambia de archivo en 767px, no solo de
 * encuadre.
 *
 * El ritmo vertical sale de medir el Figma y está en tokens.
 *
 * El hover hace SOLO dos cosas: el borde pasa a dorado y el texto engorda.
 * El color del texto NO cambia — se queda en #ADB3BC — pero va declarado
 * explícitamente para que no lo pise a:visited del tema.
 *
 * Aviso sobre el "bold": NORD solo trae 100 / 300 / 400. No hay 700 real,
 * así que --fm-btn-peso-on está en 400 y el salto es de 300 a 400. Si se
 * sube a 700, el navegador sintetiza la negrita por software y en una
 * geométrica de trazo fino como NORD se nota, y no para bien.
 *
 * El cambio de peso ensancha el texto y movería el botón. Por eso cada
 * enlace lleva data-texto con su propia etiqueta: el ::after la imprime en
 * el peso de hover, con altura 0 y overflow oculto, así reserva el ancho
 * final desde el principio y el botón no se mueve nunca.
 *
 * MEDIDA: los botones ya no declaran ancho, alto, cuerpo ni tracking. Todo
 * sale de los tokens --fm-btn-* de custom.css. Era el único CTA del sitio
 * con los 250px correctos; ahora los tienen todos.
 * ==================================================================== */

.fm-evcta-con,
.fm-evcta-con > .e-con-inner {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --content-width: 100%;
}

.fm-evcta {
  --evcta-negro:  #01060C;
  --evcta-gris:   #ADB3BC;
  --evcta-dorado: #9B8659;

  --evcta-display: "NORD", sans-serif;
  --evcta-cuerpo:  "Red Hat Display", "Helvetica Neue", Arial, sans-serif;

  /* Ritmo medido sobre el Figma Desktop (banda de ≈345px a 1440). */
  --evcta-aire-bloque: clamp(64px, 6.3vw, 92px);   /* arriba y abajo   */
  --evcta-aire-texto:  clamp(16px, 1.5vw, 22px);   /* título → párrafo */
  --evcta-aire-btn:    clamp(38px, 3.8vw, 56px);   /* párrafo → botones */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(calc(var(--fm-vw, 100vw) * 0.24), 380px);
  background: var(--evcta-negro);
}

/* Fondo ------------------------------------------------------------------ */

.fm-evcta__fondo,
.fm-evcta__fondo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: -2;
}

/* La foto horizontal ya es casi negra en el centro, que es donde va el
   texto. El velo solo asegura el contraste si la sección se estira más
   alta de la cuenta y las vetas azules suben al medio. */
.fm-evcta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(78% 120% at 50% 50%,
      rgba(1, 6, 12, 0.55) 0%,
      rgba(1, 6, 12, 0.28) 58%,
      rgba(1, 6, 12, 0)    100%);
}

/* Contenido -------------------------------------------------------------- */

.fm-evcta__inner {
  position: relative;
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  padding-block: var(--evcta-aire-bloque);
  padding-inline: clamp(24px, 5vw, 64px);
  text-align: center;
}

.fm-evcta__titulo {
  margin: 0 auto;
  font-family: var(--evcta-display);
  font-weight: 300;
  font-size: clamp(20px, 2.1vw, 32px);
  line-height: 1.4;
  letter-spacing: 0.22em;
  /* Compensa el hueco que el tracking deja tras el último carácter: sin
     esto el bloque centrado se ve corrido a la izquierda. */
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--evcta-gris);
  text-wrap: balance;
}

.fm-evcta__texto {
  margin: var(--evcta-aire-texto) auto 0;
  max-width: min(100%, 52em);
  font-family: var(--evcta-cuerpo);
  font-weight: 300;
  font-size: clamp(13px, 1.12vw, 16px);
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--evcta-gris);
  text-wrap: pretty;
}

/* Botones ---------------------------------------------------------------- */

.fm-evcta__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 2.2vw, 32px);
  margin-top: var(--evcta-aire-btn);
}

/* MEDIDA DEL SISTEMA (tokens --fm-btn-* de custom.css).

   inline-flex EN COLUMNA y no en fila: el ::after de reserva es un bloque
   de altura 0, y en un flex-column el ancho de la caja lo marca el ítem
   más ancho, así que la reserva sigue funcionando. En flex-row se sentaría
   al lado del texto y ensancharía el botón de verdad. */
.fm-evcta__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: 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: transparent;
  font-family: var(--evcta-display);
  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-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--fm-btn-tinta);
  transition: border-color 0.35s ease;
}

/* Reserva de ancho: imprime la misma etiqueta en el peso de hover, con
   altura 0, así el botón ya nace con el ancho que tendrá al engordar. */
.fm-evcta__btn::after {
  content: attr(data-texto);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: var(--fm-btn-peso-on);
  pointer-events: none;
}

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

.fm-evcta__btn:hover,
.fm-evcta__btn:focus-visible {
  border-color: var(--fm-btn-oro);
  font-weight: var(--fm-btn-peso-on);
  color: var(--fm-btn-tinta);
  text-decoration: none;
}

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

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

/* Entrada progresiva ----------------------------------------------------- */

.fm-evcta.is-anim [data-fm-rev] {
  opacity: 0;
  will-change: transform, opacity;
}

/* Tablet ----------------------------------------------------------------- */
@media (max-width: 1024px) {
  .fm-evcta {
    min-height: calc(var(--fm-vw, 100vw) * 0.34);
  }
}

/* Móvil ------------------------------------------------------------------
   Composición vertical del Figma Mobile. El marco del mock mide 1 : 1.905,
   y sobre un ancho de referencia de 390px eso son 743px de alto. Todas las
   medidas de abajo salen de leer ese archivo pixel a pixel y de medir los
   textos con las fuentes reales ya cargadas en el sitio, no a ojo:

     título ......... 27px   (ancho del renglón "¿LISTO PARA" = 260px)
     interlínea ..... 1.9    (33px de separación entre bases de renglón)
     párrafo ........ 18px   (renglón más ancho = 263px)
     tope ........... 104px  ·  fondo ....... 136px

   EL ERROR QUE ARREGLA ESTE BLOQUE:

   El título salía en CUATRO renglones. max-width valía 9.5em = 266px a
   28px, y "¿LISTO PARA" mide 270px contando el text-indent. Se pasaba por
   cuatro píxeles, así que "PARA" bajaba de renglón. El corte no lo puede
   decidir un <br> (el copy cambia y se rompe), lo decide el max-width, y
   para tres renglones tiene que caer entre:

      "¿LISTO PARA" ......... 270px   (mínimo: si no cabe, son cuatro)
      "¿LISTO PARA ELEVAR" .. 454px   (máximo: si cabe, son dos)

   13em a 27px son 351px, justo en medio de la ventana.

   El segundo error de la versión anterior — el texto del botón en dos
   renglones — ya no puede volver: el cuerpo del botón lo fija el token
   --fm-btn-tam en 11px, que sobre 250px de ancho con 18px de padding a
   cada lado deja 214px libres para una etiqueta de 189px.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {

  .fm-evcta {
    /* El diseño es 1:1.905. Se deja como mínimo, no como alto fijo: si el
       copy crece, la sección crece con él en vez de desbordar. */
    min-height: calc(var(--fm-vw, 100vw) * 1.9);

    --evcta-aire-texto: 68px;   /* título → párrafo  */
    --evcta-aire-btn:   68px;   /* párrafo → botones */
  }

  .fm-evcta__inner {
    /* Asimétrico a propósito: en el Figma el bloque no está centrado, se
       apoya un poco por encima del medio. */
    padding-block: 104px 136px;
    padding-inline: 28px;
  }

  .fm-evcta__titulo {
    /* Tres líneas: "¿LISTO PARA / ELEVAR TU / EVENTO?".
       Ver la ventana de valores en el comentario de arriba antes de tocar
       este max-width: es el que decide dónde parte el título. */
    max-width: 13em;
    font-size: 27px;
    line-height: 1.9;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
  }

  .fm-evcta__texto {
    /* Tres líneas, cortando como el mock:
         "Mentalismo e ilusionismo para"
         "sorprender a tu audiencia y crear"
         "un momento memorable."
       El segundo renglón mide 254px y con el "un" se iría a 277px: los
       264px de 14.7em dejan pasar el primero y no el segundo. */
    max-width: 14.7em;
    font-size: 18px;
    line-height: 1.78;
  }

  .fm-evcta__acciones {
    flex-direction: column;
    align-items: center;
    /* El hueco entre los dos botones es tan grande como el que los separa
       del párrafo: no es un error de medición, el Figma lo dibuja así. */
    gap: 44px;
  }

  .fm-evcta__btn {
    width: var(--fm-btn-ancho);
  }
}

@media (max-width: 400px) {
  .fm-evcta {
    --evcta-aire-texto: 56px;
    --evcta-aire-btn:   56px;
  }
  .fm-evcta__inner  { padding-block: 88px 112px; padding-inline: 22px; }
  /* A 320px de ancho la caja útil son 276px. "¿LISTO PARA" a 25px mide
     257px y sigue entrando; el párrafo a 17px corta igual que en el mock
     porque el max-width en em encoge con la fuente. */
  .fm-evcta__titulo { font-size: 25px; }
  .fm-evcta__texto  { font-size: 17px; }
  .fm-evcta__acciones { gap: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .fm-evcta.is-anim [data-fm-rev] {
    opacity: 1;
    transform: none;
  }
  .fm-evcta__btn { transition: none; }
}