/* ==========================================================================
   Utilidades de salto de línea

   REGLA DEL PROYECTO: deja SIEMPRE un espacio antes de cada <br> en el
   marcado.

       Diseñada alrededor <br>de tu evento     ✓
       Diseñada alrededor<br>de tu evento      ✗

   Cuando una media query oculta el <br> con display:none, ese espacio es lo
   único que queda separando la última palabra de una línea de la primera de
   la siguiente. Sin él salen las palabras pegadas — "ALREDEDORDE TU EVENTO",
   "UNAEXPERIENCIA" — que es el bug que aparece en varias secciones.

   Mejor todavía que ocultar saltos: poner un <br> por breakpoint. Así no se
   oculta ninguno y no hay nada que pueda pegarse.

       Diseñada <br class="fm-br-movil">alrededor <br>de tu evento

   Desktop → "Diseñada alrededor / de tu evento"   (dos líneas)
   Móvil   → "Diseñada / alrededor / de tu evento" (tres, como el prototipo)
   ========================================================================== */

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

@media (max-width: 767px) {
  .fm-br-movil {
    display: inline;
  }
}

/* ==========================================================================
   fernandomier-child · /experiencias/
   S1 · Hero "EXPERIENCIAS PERSONALIZADAS"

   Valores calibrados contra el prototipo de Figma (canvas 1440).

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

/* --- Contenedor Elementor: neutralizar gutter global -------------------- */
.e-con.fm-exphero-con,
.e-con.fm-exphero-con > .e-con-inner {
  --padding-inline-start: 0;
  --padding-inline-end: 0;
  --padding-block-start: 0;
  --padding-block-end: 0;
  padding-inline: 0;
  padding-block: 0;
  --gap: 0px;
}

/* --- Sección ------------------------------------------------------------ */
.fm-exphero {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
  background-color: #01060C;
}

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

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

/* --- Capa de gradiente -------------------------------------------------- */
.fm-exphero__capa {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      #01060C 0%,
      rgba(1, 6, 12, 0.94) 20%,
      rgba(1, 6, 12, 0.62) 52%,
      rgba(1, 6, 12, 0.18) 85%,
      rgba(1, 6, 12, 0.05) 100%
    ),
    linear-gradient(180deg, rgba(1, 6, 12, 0.8) 0%, rgba(1, 6, 12, 0) 26%),
    linear-gradient(0deg, rgba(1, 6, 12, 0.7) 0%, rgba(1, 6, 12, 0) 32%);
}

/* --- Contenido ---------------------------------------------------------- */
/* Sin max-width + margin auto: en Figma el bloque se alinea al 9% del
   viewport, no a una caja centrada de 1440. Con las dos cosas juntas el
   texto se metía ~130px de más hacia la derecha. */
.fm-exphero__contenido {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: clamp(24px, 9vw, 220px);
  padding-block-end: clamp(48px, 19vh, 220px);
}

.fm-exphero__titulo {
  margin: 0;
  font-family: "Kratch Revotch", sans-serif;
  font-weight: 300;
  font-size: clamp(2rem, 5.35vw, 7rem);
  line-height: 1.12;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ADB3BC;
}

/* Especificidad (0,2,0): algo global está imponiendo uppercase y tracking
   a los párrafos. Con (0,1,0) no ganaba. */
.fm-exphero .fm-exphero__texto {
  margin: clamp(12px, 7vw, 28px) 0 0;
  /* max-width en em, no en ch: el letter-spacing rompe el cálculo de ch */
  max-width: 43em;
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: clamp(0.9375rem, 1.11vw, 1.375rem);
  line-height: 2.05;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #ADB3BC;
}

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

   Este botón llevaba 0.5em de tracking, el más abierto del sitio. Con la
   etiqueta a 250px de ancho ese valor la desbordaba, así que baja al .22em
   del sistema. Es la desviación más visible del cambio: avísale a Alejandro
   si la nota. */
.fm-exphero .fm-exphero__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(24px, 4.3vw, 74px);
  padding-block: 0;
  padding-inline: var(--fm-btn-pad-x);
  border: 1px solid var(--fm-btn-borde);
  border-radius: 0;
  font-family: "NORD", sans-serif;
  font-weight: var(--fm-btn-peso);
  font-size: var(--fm-btn-tam);
  line-height: 1.2;
  letter-spacing: var(--fm-btn-track);
  text-indent: var(--fm-btn-track);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--fm-btn-tinta);
  background-color: transparent;
  transition: border-color 0.35s ease;
}

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

@media (hover: hover) and (pointer: fine) {
  .fm-exphero .fm-exphero__cta:hover {
    border-color: var(--fm-btn-oro);
    color: var(--fm-btn-tinta);
    font-weight: var(--fm-btn-peso-on);
  }
}

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

/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .fm-exphero__media img {
    object-position: 74% center;
  }

  .fm-exphero__titulo {
    font-size: clamp(1.75rem, 5.6vw, 3.25rem);
    letter-spacing: 0.16em;
  }

  .fm-exphero .fm-exphero__texto {
    max-width: 34em;
    font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
    line-height: 1.95;
  }
}

/* --- Móvil -------------------------------------------------------------- */
@media (max-width: 767px) {
  .fm-exphero {
    min-height: 155vw;
  }

  .fm-exphero__media img {
    object-position: center center;
  }

  .fm-exphero__capa {
    background: linear-gradient(
      180deg,
      rgba(1, 6, 12, 0.72) 0%,
      rgba(1, 6, 12, 0.2) 28%,
      rgba(1, 6, 12, 0.88) 68%,
      #01060C 100%
    );
  }

  .fm-exphero__contenido {
    padding-inline: 24px;
    padding-block-end: 12vw;
  }

  .fm-exphero__titulo {
    font-size: clamp(1.375rem, 6.6vw, 2rem);
    line-height: 1.25;
    letter-spacing: 0.1em;
  }

  .fm-exphero .fm-exphero__texto {
    margin-top: 8vw;
    max-width: none;
    font-size: 0.9375rem;
    line-height: 1.85;
  }

  /* Del botón solo se toca el margen y el ancho: la medida son los tokens. */
  .fm-exphero .fm-exphero__cta {
    margin-top: 9vw;
    width: var(--fm-btn-ancho);
  }
}

/* ==========================================================================
   S2 · Círculo "INEXPLICABLE"

   Geometría: la escena ES el anillo. Las cuatro palabras se posicionan por
   fuera con calc(100% + separación) y cada punto se ancla de vuelta al
   perímetro con el offset inverso.

   Todo escala desde --fm-circ-d: separación, tamaño de palabra y punto son
   porcentajes del diámetro (proporciones tomadas del prototipo de Figma).
   Los clamp() solo ponen piso y techo para que en móvil no se vuelva
   ilegible ni en 4K desproporcionado. Para recalibrar, mueve el diámetro.

   Dos capas de comportamiento:

     · SIN JS (o con movimiento reducido) queda todo lo que había: anillo de
       borde CSS y un punto por palabra que aparece en hover. Es la base y no
       se toca.
     · CON JS (clase .fm-circulo--js, la pone fm-experiencias.js) el borde se
       apaga, el anillo se dibuja en SVG y aparece un único punto que orbita
       y viaja hasta la palabra sobre la que estás.

   NOTA DE COLOR (2026-09): esta sección tenía dos grises que están retirados
   del sistema. El único gris permitido es #ADB3BC.
   ========================================================================== */

/* --- Fuente Glasset (solo esta sección) --------------------------------- */
@font-face {
  font-family: "Glasset";
  src: url("../fonts/glasset-regular.woff2") format("woff2"),
       url("../fonts/glasset-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Contenedor Elementor: neutralizar gutter global -------------------- */
.e-con.fm-circulo-con,
.e-con.fm-circulo-con > .e-con-inner {
  --padding-inline-start: 0;
  --padding-inline-end: 0;
  --padding-block-start: 0;
  --padding-block-end: 0;
  padding-inline: 0;
  padding-block: 0;
  --gap: 0px;
}

/* --- Sección ------------------------------------------------------------ */
.fm-circulo {
  /* Diámetro atado también a la altura para que las palabras nunca se
     salgan en pantallas bajas (laptop 1440x720). Es la única perilla:
     todo lo demás se recalcula solo. */
  --fm-circ-d: min(52vw, 68vh);

  /* Proporciones medidas en el prototipo (canvas 1440, diámetro ~743px) */
  --fm-circ-sep:   clamp(12px, calc(var(--fm-circ-d) * 0.075), 60px);
  --fm-circ-pal:   clamp(0.625rem, calc(var(--fm-circ-d) * 0.035), 1.75rem);
  --fm-circ-punto: clamp(5px, calc(var(--fm-circ-d) * 0.030), 26px);

  --fm-circ-hit: 10px;              /* padding invisible: agranda el área de hover */
  /* Subido de 0.28 a 0.5: en el prototipo el anillo se lee claramente, y con
     0.28 los tramos quedaban casi invisibles sobre el fondo.
     El rgba es #ADB3BC, el gris del sistema. */
  --fm-circ-borde: rgba(173, 179, 188, 0.5);
  --fm-circ-punto-color: #ADB3BC;
  --fm-circ-punto-grosor: 1px;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
  background-color: #01060C;
}

/* --- Fondo full-bleed --------------------------------------------------- */
.fm-circulo__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

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

/* Viñeta: funde los bordes con el #01060C de las secciones vecinas. */
.fm-circulo__capa {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, #01060C 0%, rgba(1, 6, 12, 0) 18%),
    linear-gradient(0deg,   #01060C 0%, rgba(1, 6, 12, 0) 18%),
    radial-gradient(62% 62% at 50% 50%,
      rgba(1, 6, 12, 0) 0%, rgba(1, 6, 12, 0.38) 100%);
}

/* --- Escena / anillo ---------------------------------------------------- */
.fm-circulo__escena {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fm-circ-d);
  height: var(--fm-circ-d);
  border: 1px solid var(--fm-circ-borde);
  border-radius: 50%;
}

/* --- INEXPLICABLE ------------------------------------------------------- */
/* Especificidad (0,2,0): el theme y Elementor imponen estilos a los h2. */
.fm-circulo .fm-circulo__centro {
  margin: 0;
  padding: 0;
  font-family: "Glasset", "NORD", sans-serif;
  font-weight: 400;
  font-size: calc(var(--fm-circ-d) * 0.065);
  line-height: 1;
  letter-spacing: 0.04em;
  text-indent: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ADB3BC;
}

/* --- Palabras cardinales ------------------------------------------------ */
.fm-circulo .fm-circulo__palabras {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fm-circulo .fm-circulo__item {
  position: absolute;
  margin: 0;
  padding: var(--fm-circ-hit);
  cursor: default;
}

/* El padding de hit se resta aquí para que el texto quede exactamente a
   --fm-circ-sep del anillo, no a sep + hit. */
.fm-circulo__item--norte {
  left: 50%;
  bottom: calc(100% + var(--fm-circ-sep) - var(--fm-circ-hit));
  transform: translateX(-50%);
}

.fm-circulo__item--sur {
  left: 50%;
  top: calc(100% + var(--fm-circ-sep) - var(--fm-circ-hit));
  transform: translateX(-50%);
}

.fm-circulo__item--oeste {
  top: 50%;
  right: calc(100% + var(--fm-circ-sep) - var(--fm-circ-hit));
  transform: translateY(-50%);
}

.fm-circulo__item--este {
  top: 50%;
  left: calc(100% + var(--fm-circ-sep) - var(--fm-circ-hit));
  transform: translateY(-50%);
}

/* inline-block + margen negativo: elimina el espacio sobrante que el
   letter-spacing deja tras el último carácter, para que el centrado
   sea óptico y no matemático.

   Ahora la palabra es un <button> porque se puede pulsar para cambiar el
   texto del centro. De ahí el reset: sin él hereda el borde, el relleno y
   la tipografía del navegador. El background:transparent explícito también
   neutraliza el hover rosa de reset.css de Hello Elementor. */
.fm-circulo .fm-circulo__palabra {
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  margin-inline-end: -0.18em;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "NORD", sans-serif;
  font-weight: 300;
  font-size: var(--fm-circ-pal);
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ADB3BC;
  transition: color 0.32s ease;
}

.fm-circulo .fm-circulo__palabra:hover,
.fm-circulo .fm-circulo__palabra:focus,
.fm-circulo .fm-circulo__palabra:focus-visible {
  background: transparent;
}

.fm-circulo .fm-circulo__palabra:focus-visible {
  outline: 1px solid #9B8659;
  outline-offset: 6px;
}

/* --- Punto sobre el perímetro (versión sin JS) -------------------------- */
/* Es un anillo, no un disco: centro transparente para que la línea del
   círculo grande se vea pasar por dentro, igual que en el prototipo. */
.fm-circulo .fm-circulo__punto {
  position: absolute;
  width: var(--fm-circ-punto);
  height: var(--fm-circ-punto);
  border: var(--fm-circ-punto-grosor) solid var(--fm-circ-punto-color);
  border-radius: 50%;
  background-color: transparent;
  opacity: 0;
  transition: opacity 0.28s ease;
}

/* Offset inverso: devuelve el punto desde la caja de la palabra
   hasta la línea del anillo, y el translate lo centra encima. */
.fm-circulo__item--norte .fm-circulo__punto {
  left: 50%;
  bottom: calc(var(--fm-circ-hit) - var(--fm-circ-sep));
  transform: translate(-50%, 50%);
}

.fm-circulo__item--sur .fm-circulo__punto {
  left: 50%;
  top: calc(var(--fm-circ-hit) - var(--fm-circ-sep));
  transform: translate(-50%, -50%);
}

.fm-circulo__item--oeste .fm-circulo__punto {
  top: 50%;
  right: calc(var(--fm-circ-hit) - var(--fm-circ-sep));
  transform: translate(50%, -50%);
}

.fm-circulo__item--este .fm-circulo__punto {
  top: 50%;
  left: calc(var(--fm-circ-hit) - var(--fm-circ-sep));
  transform: translate(-50%, -50%);
}

/* --- Hover -------------------------------------------------------------- */
/* El realce ya no puede ser un gris más claro: con #ADB3BC como único gris,
   lo que distingue la palabra encendida es el peso (300 → 400). */
@media (hover: hover) and (pointer: fine) {
  .fm-circulo .fm-circulo__item:hover .fm-circulo__palabra {
    font-weight: 400;
    color: #ADB3BC;
  }

  .fm-circulo .fm-circulo__item:hover .fm-circulo__punto {
    opacity: 1;
  }
}

/* Táctil: sin hover no hay forma de descubrir el efecto, así que los
   cuatro puntos quedan visibles y la composición se lee completa. */
@media (hover: none) {
  .fm-circulo .fm-circulo__punto {
    opacity: 1;
  }
}

/* ==========================================================================
   S2 · Capa interactiva (solo con JS)

   Todo lo de aquí abajo cuelga de .fm-circulo--js, que pone
   fm-experiencias.js después de inyectar el SVG. Si el JS no corre, este
   bloque entero no aplica y la sección se queda como el bloque anterior.

   El viewBox del SVG lo escribe el JS EN PÍXELES y lo mantiene sincronizado
   con el tamaño real de la escena. No es un capricho:

     La primera versión usaba un viewBox fijo de 0 0 100 100 con
     vector-effect:non-scaling-stroke. Con ese vector-effect el navegador
     calcula el stroke-dasharray en el espacio de PANTALLA, no en el del
     viewBox, así que el pathLength de 360 dejaba de valer y el patrón de
     rayas se repetía una docena de veces alrededor del anillo. Ese era el
     origen de los tramos con brillos distintos.

   Con el viewBox en píxeles, una unidad de usuario es un píxel: stroke-width
   1 mide 1px de verdad y el dasharray en grados vuelve a funcionar. El JS
   solo publica dos variables:

     --fm-circ-ang     posición angular del punto (0deg = norte, horario)
     --fm-circ-dibujo  cuánto anillo hay trazado, de 0 a 360

   El anillo es UNA sola línea de un solo color. No hay estela ni segundo
   trazo: lo que gira es el punto.
   ========================================================================== */

/* El anillo pasa a pintarlo el SVG. Si dejáramos el borde se verían dos
   líneas de un píxel desalineadas. */
.fm-circulo--js .fm-circulo__escena {
  border-color: transparent;
}

/* Los cuatro puntos estáticos sobran: ahora hay uno solo y se mueve. */
.fm-circulo--js .fm-circulo__punto {
  display: none;
}

.fm-circulo__anillo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.fm-circulo__anillo-base,
.fm-circulo__marcador {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

/* Trazado de entrada: el dasharray corta el anillo por donde va el dibujo.
   El rotate(-90deg) mueve el arranque del path (que en un <circle> está a
   las 3 en punto) hasta el norte, para que empiece donde arranca el punto.

   Nada de vector-effect aquí: con el viewBox en píxeles, stroke-width 1 ya
   es un píxel, y añadirlo rompería el dasharray. */
.fm-circulo__anillo-base {
  fill: none;
  stroke: var(--fm-circ-borde);
  stroke-width: 1;
  stroke-dasharray: var(--fm-circ-dibujo, 0) 360;
  transform: rotate(-90deg);
}

/* Terminado el trazado, el anillo deja de ser una circunferencia entera: se
   le quita un arco de 6 grados y ese hueco se coloca justo bajo la pelota,
   para que la línea no se vea cruzarla por dentro.

   354 + 6 = 360, que es el pathLength. El arranque del path de un <circle>
   está a las 3 en punto (90° en el sistema norte-horario), así que el rotate
   lo lleva a ang + 3 - 90: el arco visible empieza 3° después del punto y
   termina 3° antes, dejándolo centrado en el hueco.

   Se hace con el mismo dasharray que ya usa el trazado y no con una <mask>
   SVG: una máscara habría obligado a rotar un elemento dentro de <defs>, que
   es justo donde transform-box es menos de fiar entre navegadores. */
.fm-circulo--trazado .fm-circulo__anillo-base {
  stroke-dasharray: 354 6;
  transform: rotate(calc(var(--fm-circ-ang, 0deg) + 3deg - 90deg));
}

/* El punto va HUECO mientras anda suelto siguiendo al ratón, y se RELLENA
   cuando hay una palabra pulsada. Es lo que distingue "estoy paseando" de
   "esto está anclado aquí": el relleno es el estado, no una decoración.

   El radio lo calcula el JS: 1.75% del diámetro, la proporción medida sobre
   el prototipo. */
.fm-circulo__marcador {
  fill: transparent;
  stroke: var(--fm-circ-punto-color);
  stroke-width: 1;
  transform: rotate(var(--fm-circ-ang, 0deg));
  filter: drop-shadow(0 0 6px rgba(173, 179, 188, 0.28));
  transition: fill 0.35s ease;
  will-change: transform;
}

.fm-circulo--fijado .fm-circulo__marcador {
  fill: var(--fm-circ-punto-color);
}

/* Palabras encendidas por el JS. Dos casos, mismo tratamiento que el :hover
   de más arriba:

     .esta-cerca   la pelota ha LLEGADO a esa palabra (a 14° o menos). Hace
                   falta porque la pelota se mueve con el ángulo del ratón
                   respecto al centro, no con lo que hay literalmente debajo
                   del cursor: puedes tener la pelota clavada en MAGIA con el
                   cursor a media pantalla, sin llegar a pisar la palabra, y
                   el :hover del CSS nunca se dispararía.

     .esta-activa  la palabra pulsada, o la del ciclo automático en táctil. */
.fm-circulo--js .fm-circulo__item.esta-cerca .fm-circulo__palabra,
.fm-circulo--js .fm-circulo__item.esta-activa .fm-circulo__palabra {
  font-weight: 400;
  color: #ADB3BC;
}

/* --- Pulsos de proximidad ------------------------------------------------ */
/* Sustituyen al parpadeo de las palabras. En vez de tener las cuatro
   encendiéndose todo el rato, la pelota emite ondas cuando se ACERCA a una
   palabra y se apagan al alejarse.

   El reparto:

     · El JS publica --fm-circ-cerca, de 0 a 1, según lo cerca que esté la
       pelota de la palabra más próxima.
     · El grupo lleva la rotación (viaja con la pelota) y esa opacidad.
     · Dentro, cada onda corre su animación en bucle, siempre.

   La opacidad del grupo multiplica la de los hijos, así que con cerca = 0 no
   se ve nada aunque las animaciones sigan corriendo. */
.fm-circulo__pulsos {
  transform: rotate(var(--fm-circ-ang, 0deg));
  transform-box: view-box;
  transform-origin: 50% 50%;
  opacity: var(--fm-circ-cerca, 0);
}

.fm-circulo__pulso {
  fill: none;
  stroke: var(--fm-circ-punto-color);
  stroke-width: 1;
  /* Cada onda escala sobre SU centro, no sobre el del anillo. El origen lo
     escribe el JS en píxeles desde medir(), en vez de usar
     transform-box: fill-box: fill-box es reciente en Safari y si falla la
     onda escala desde la esquina del viewBox y se va a tomar el aire. */
  transform-box: view-box;
  opacity: 0;
}

@keyframes fm-circ-onda {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { opacity: 0.12; }
  100% { transform: scale(3.4); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {

  .fm-circulo__pulso {
    animation: fm-circ-onda 1.8s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
  }

  /* Tres ondas desfasadas un tercio del ciclo: se solapan y el efecto se lee
     como una emisión continua, no como un latido suelto. */
  .fm-circulo__pulso:nth-child(2) { animation-delay: 0.6s; }
  .fm-circulo__pulso:nth-child(3) { animation-delay: 1.2s; }
}

/* --- Texto del centro ---------------------------------------------------- */
/* Al pulsar una palabra, el centro deja de decir INEXPLICABLE y pasa a la
   frase de esa palabra. El cambio se hace a mitad de un fundido, así que la
   transición de opacidad es parte del mecanismo, no un adorno. */
.fm-circulo--js .fm-circulo__centro {
  transition: opacity 0.28s ease;
}

.fm-circulo--js .fm-circulo__centro.esta-cambiando {
  opacity: 0;
}

/* La frase no es Glasset ni va en una sola línea: es NORD, más pequeña y a
   dos renglones, igual que en el prototipo. */
.fm-circulo .fm-circulo__centro--frase {
  font-family: "NORD", sans-serif;
  font-weight: 300;
  font-size: calc(var(--fm-circ-d) * 0.034);
  line-height: 1.75;
  letter-spacing: 0.18em;
  /* Sin text-indent: en un bloque de varias líneas solo corregiría la
     primera y descuadraría el centrado de las demás. */
  text-indent: 0;
  white-space: normal;
  max-width: 76%;
  text-align: center;
  text-wrap: balance;
}

/* --- Tablet ------------------------------------------------------------- */
/* Solo el diámetro: separación, palabra y punto se recalculan solos. */
@media (max-width: 1024px) {
  .fm-circulo {
    --fm-circ-d: min(58vw, 60vh);
  }
}

/* --- Móvil -------------------------------------------------------------- */
/* 52vw deja ~90px por lado para MAGIA y HUMOR en una pantalla de 375. */
@media (max-width: 767px) {
  .fm-circulo {
    --fm-circ-d: min(52vw, 46vh);
    --fm-circ-hit: 8px;
  }

  /* A 375px de ancho el diámetro ronda los 195px y el 3.4% del desktop
     daría 6.6px: ilegible. Se sube la proporción y se pone un suelo en
     píxeles, y la frase pasa a ocupar más ancho del círculo. */
  .fm-circulo .fm-circulo__centro--frase {
    font-size: max(0.6875rem, calc(var(--fm-circ-d) * 0.055));
    line-height: 1.7;
    letter-spacing: 0.12em;
    max-width: 88%;
  }

  /* El corte de línea del prototipo es de escritorio. El JS deja un espacio
     antes de cada <br> justamente para poder ocultarlo aquí sin que las
     palabras se peguen. */
  .fm-circulo .fm-circulo__centro--frase br {
    display: none;
  }

  .fm-circulo .fm-circulo__palabra {
    letter-spacing: 0.14em;
    margin-inline-end: -0.14em;
  }
}

@media (max-width: 400px) {
  .fm-circulo {
    --fm-circ-d: min(48vw, 42vh);
  }
}

/* --- Movimiento reducido ------------------------------------------------ */
/* El módulo JS ni siquiera arranca en este caso, así que aquí solo queda
   apagar las transiciones de la versión CSS. */
@media (prefers-reduced-motion: reduce) {
  .fm-circulo .fm-circulo__palabra,
  .fm-circulo .fm-circulo__punto {
    transition: none;
  }
}

/* ==========================================================================
   S3 · "DISEÑADA ALREDEDOR DE TU EVENTO"
   Split: foto vertical + columna de texto con tres pilares
   ========================================================================== */

/* --- Contenedor Elementor: neutralizar gutter global --------------------- */
.fm-split-con {
  --padding-inline-start: 0;
  --padding-inline-end: 0;
  --padding-block-start: 0;
  --padding-block-end: 0;
  padding-inline: 0;
  padding-block: 0;
}

/* --- Sección ------------------------------------------------------------- */
.fm-split {
  --fm-split-gap: clamp(28px, 4.2vw, 60px);
  --fm-split-icono: clamp(48px, 5.6vw, 80px);
  --fm-split-pilar-gap: clamp(20px, 2.8vw, 40px);
  /* El padding lateral vive en una variable porque en móvil la foto tiene
     que salirse de él con un margen negativo idéntico. */
  --fm-split-pad: clamp(24px, 6vw, 40px);

  background-color: #01060C;
  padding-block: clamp(72px, 9.5vw, 140px);
  padding-inline: var(--fm-split-pad);
}

.fm-split .fm-split__inner {
  display: grid;
  grid-template-columns: 44fr 56fr;
  gap: var(--fm-split-gap);
  max-width: 1200px;
  margin-inline: auto;
}

/* --- Foto ---------------------------------------------------------------- */
/* ALINEACIÓN DE PIES (comentario de Alejandro: "que finalice al tamaño de la
   foto para que no se vea chueco").

   Antes la foto llevaba aspect-ratio 39/50 con width:100%, así que su alto
   INTRÍNSECO (ancho × 50/39) era mayor que el de la columna de texto. En un
   grid, la altura de la fila la fija el hijo más alto: mandaba la foto y el
   texto terminaba flotando, con un escalón de 100-150px entre los dos pies.

   La foto pasa a ser absoluta dentro de su celda. Al no aportar altura
   intrínseca, la fila la mide la columna de texto y el stretch por defecto
   estira la celda de la foto hasta ESE alto. Los dos pies coinciden
   exactamente y el object-fit:cover se encarga del recorte.

   height:100% + min-height:100% en vez de fiarse solo de inset:0: en un <img>
   (elemento reemplazado) el `bottom` se ignora si la altura queda en auto. */
.fm-split .fm-split__media {
  position: relative;
  min-width: 0;
  align-self: stretch;
}

.fm-split .fm-split__img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

/* --- Columna de texto ---------------------------------------------------- */
.fm-split .fm-split__texto {
  min-width: 0;
}

.fm-split .fm-split__titulo {
  margin: 0;
  font-family: "NORD", sans-serif;
  font-size: clamp(1.35rem, 2.45vw, 2.25rem);
  font-weight: 100;
  line-height: 1.32;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ADB3BC;
}

/* Reset explícito con (0,2,0): algo global le mete uppercase + tracking a los
   párrafos (mismo problema que en el hero). */
.fm-split .fm-split__intro,
.fm-split .fm-split__pilar-texto {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  text-transform: none;
  letter-spacing: normal;
  color: #ADB3BC;
}

.fm-split .fm-split__intro {
  margin: clamp(20px, 2.2vw, 32px) 0 0;
  font-size: clamp(0.9375rem, 1.11vw, 18px);
  line-height: 1.85;
  max-width: 38em;
}

/* --- Pilares ------------------------------------------------------------- */
.fm-split .fm-split__pilares {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fm-split-pilar-gap);
  margin: clamp(40px, 5vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}

.fm-split .fm-split__pilar {
  min-width: 0;
}

/* Altura fija + alineación abajo: los tres iconos tienen proporciones
   distintas, así los títulos quedan a la misma línea. */
.fm-split .fm-split__icono {
  display: flex;
  align-items: flex-end;
  height: var(--fm-split-icono);
  margin-bottom: clamp(16px, 1.8vw, 26px);
  color: #9B8659;
}

.fm-split .fm-split__icono svg {
  display: block;
  height: 100%;
  width: auto;
}

/* Son iconos de trazo, no de relleno. */
.fm-split .fm-split__icono svg path {
  fill: none;
  stroke: currentColor;
}

.fm-split .fm-split__pilar-titulo {
  margin: 0 0 clamp(10px, 1.1vw, 16px);
  margin-top: 60px;
  font-family: "NORD", sans-serif;
  font-size: clamp(0.75rem, 0.9vw, 0.8125rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ADB3BC;
}

.fm-split .fm-split__pilar-texto {
  margin: 0;
  font-size: clamp(0.75rem, 0.9vw, 14px);
  line-height: 1.8;
}

/* Justificado solo en anchos generosos: en columnas angostas genera ríos. */
@media (min-width: 1200px) {
  .fm-split .fm-split__intro,
  .fm-split .fm-split__pilar-texto {
    text-align: justify;
    text-wrap: pretty;
  }
}

/* --- Tablet ancha -------------------------------------------------------- */
@media (max-width: 1199px) {
  .fm-split .fm-split__inner {
    grid-template-columns: 42fr 58fr;
  }
}

/* --- Tablet: una columna ------------------------------------------------- */
/* Aquí ya no hay dos columnas que igualar, así que la foto recupera una
   proporción propia. Va en el .fm-split__media (el <img> sigue absoluto). */
@media (max-width: 991px) {
  .fm-split .fm-split__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 5vw, 56px);
  }

  .fm-split .fm-split__media {
    aspect-ratio: 16 / 10;
  }

  .fm-split .fm-split__img {
    object-position: 50% 26%;
  }

  .fm-split .fm-split__intro {
    max-width: none;
  }
}

/* ==========================================================================
   S3 · Móvil

   El prototipo móvil no es la versión estrecha del de escritorio: cambia el
   orden (el titular va ANTES de la foto), la foto se va a sangre completa y
   todo el bloque se centra.

   El reordenado se hace sin tocar el marcado. .fm-split__texto pasa a
   display:contents, con lo que sus hijos (titular, intro y pilares) se
   convierten en hijos directos del flex de .fm-split__inner y se pueden
   ordenar con `order` contra la foto, que está en otro contenedor.

   TAMAÑOS (comentario de Alejandro: "seguir referencia de figma para
   tamaños"). Segunda calibración, ya contra las capturas en alta resolución
   del frame Mobile. Todo medido como PORCENTAJE del ancho del frame, que es
   la única medida que no depende del zoom al que estuviera el Figma, y luego
   traducido a un viewport de 440 (iPhone 16 Pro Max):

                            Figma        estaba        queda
     caja de texto ....... ~71% ancho    78%           74%   (pad 13vw)
     icono del pilar ..... ~154px alto   ~140px        ~150px (34vw)
     título de pilar ..... ~18px         15px          18px  + tracking 0.26em
     texto de pilar ...... ~15px         ~13px         15px
     hueco icono→título .. ~60px         ~47px         14vw
     hueco título→texto .. ~46px         ~31px         10vw
     hueco entre pilares . ~100px        ~88px         23vw

   La primera pasada tiró todo hacia abajo por medir sobre una captura
   diminuta del prototipo. En Figma el bloque de pilares es MÁS grande que lo
   que había en producción, no más chico: cuerpo mayor y columna más angosta.
   Las dos cosas a la vez son las que producen el corte de línea del
   prototipo (tres renglones por pilar).
   ========================================================================== */
@media (max-width: 767px) {
  .fm-split {
    --fm-split-pad: clamp(24px, 13vw, 60px);
    --fm-split-icono: clamp(72px, 34vw, 160px);
  }

  .fm-split .fm-split__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .fm-split .fm-split__texto {
    display: contents;
  }

  /* Las tres líneas del prototipo salen del marcado, no de esconder nada:

         Diseñada <br class="fm-br-movil">alrededor <br>de tu evento

     Con el cuerpo a ~27px la caja se queda corta para "DISEÑADA ALREDEDOR"
     en una sola línea, así que aunque falte ese <br> extra el titular rompe
     igual. El <br> solo garantiza que rompa POR DONDE marca Figma. */
  .fm-split .fm-split__titulo {
    order: 1;
    margin: 0 0 9vw;
    text-align: center;
    font-size: clamp(1.25rem, 6.8vw, 1.75rem);
    line-height: 1.65;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    text-wrap: balance;
  }

  /* A sangre: se come el padding lateral de la sección por los dos lados. */
  .fm-split .fm-split__media {
    order: 2;
    margin-inline: calc(var(--fm-split-pad) * -1);
    /* 403 × 414 en el prototipo, prácticamente cuadrada. */
    aspect-ratio: 403 / 414;
  }

  .fm-split .fm-split__img {
    object-position: 50% 22%;
  }

  .fm-split .fm-split__intro {
    order: 3;
    margin: 11vw 0 0;
    max-width: none;
    font-size: clamp(1rem, 4.3vw, 1.125rem);
    line-height: 2.05;
    text-align: justify;
    text-wrap: pretty;
  }

  .fm-split .fm-split__pilares {
    order: 4;
    grid-template-columns: minmax(0, 1fr);
    gap: 23vw;
    margin: 18vw 0 0;
  }

  /* Icono centrado y más grande: en el prototipo es el ancla visual de cada
     pilar, no una viñeta al margen. */
  .fm-split .fm-split__icono {
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
  }

  .fm-split .fm-split__pilar-titulo {
    /* El margin-top de 60px es una corrección de escritorio y aquí estorba:
       hay que anularlo explícitamente porque va en su propia declaración. */
    margin: 14vw 0 10vw;
    text-align: center;
    font-size: clamp(0.9375rem, 4.1vw, 1.125rem);
    letter-spacing: 0.26em;
    text-indent: 0.26em;
  }

  /* Sin padding-inline extra: el ancho de línea ya lo fija --fm-split-pad,
     que es el mismo que usa la intro. */
  .fm-split .fm-split__pilar-texto {
    margin: 0;
    max-width: none;
    padding-inline: 0;
    font-size: clamp(0.8125rem, 3.4vw, 0.9375rem);
    line-height: 1.85;
    text-align: justify;
    text-wrap: pretty;
  }
}

/* ==========================================================================
   S4 · "EXPERIENCIAS PARA CADA EVENTO"
   Encabezado centrado + grid de 3 cards con botón outline
   ========================================================================== */

/* --- Contenedor Elementor: neutralizar gutter global --------------------- */
.fm-exptipos-con {
  --padding-inline-start: 0;
  --padding-inline-end: 0;
  --padding-block-start: 0;
  --padding-block-end: 0;
  padding-inline: 0;
  padding-block: 0;
}

/* --- Sección ------------------------------------------------------------- */
.fm-exptipos {
  --fm-expt-gap: clamp(24px, 2.9vw, 36px);
  --fm-expt-ratio: 69 / 100;

  /* MEDIDA DEL PÁRRAFO DE CADA CARD.

     Es LA perilla de esta sección (comentario de Alejandro: "ajustar textos
     con la proporción de las fotos"). Antes el párrafo ocupaba el 100% de la
     card (~23.5em a 16px) y las líneas salían mucho más largas que en Figma.

     Va en em, no en ch ni en %: en em el ancho de línea se mide en múltiplos
     del cuerpo, que es exactamente lo que define cuántos caracteres entran.
     Baja el valor para que rompa antes, súbelo para líneas más largas.
     21em ≈ 84% de la card a 1200px. */
  --fm-expt-medida: 21em;

  background-color: #01060C;
  padding-block: clamp(72px, 9.5vw, 140px);
  padding-inline: clamp(24px, 6vw, 40px);
}

.fm-exptipos .fm-exptipos__inner {
  max-width: 1200px;
  margin-inline: auto;
}

/* --- Encabezado ---------------------------------------------------------- */
.fm-exptipos .fm-exptipos__head {
  text-align: center;
}

.fm-exptipos .fm-exptipos__titulo {
  margin: 0;
  font-family: "NORD", sans-serif;
  font-size: clamp(1.25rem, 2.1vw, 1.875rem);
  font-weight: 100;
  line-height: 1.35;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ADB3BC;
  /* Con 0.22em de tracking sobra ese espacio después de la última letra y el
     centrado se ve corrido a la izquierda. Este indent lo compensa. */
  text-indent: 0.22em;
}

/* Reset explícito a (0,2,0): algo global mete uppercase + tracking a los
   párrafos (mismo problema del hero y de la S3). */
.fm-exptipos .fm-exptipos__intro {
  margin: clamp(28px, 4vw, 56px) auto 0;
  max-width: 48em;
  font-family: "Red Hat Display", sans-serif;
  font-size: clamp(0.9375rem, 1.15vw, 18px);
  font-weight: 300;
  line-height: 1.95;
  letter-spacing: normal;
  text-transform: none;
  color: #ADB3BC;
}

/* --- Grid ---------------------------------------------------------------- */
.fm-exptipos .fm-exptipos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fm-expt-gap);
  margin: clamp(56px, 9vw, 150px) 0 0;
  padding: 0;
  list-style: none;
}

/* Flex-column + margin-top:auto en el botón = los tres CTA alineados abajo
   aunque los párrafos midan distinto. */
.fm-exptipos .fm-exptipos__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fm-exptipos .fm-exptipos__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--fm-expt-ratio);
  object-fit: cover;
  object-position: 50% 50%;
}

.fm-exptipos .fm-exptipos__card-titulo {
  margin: clamp(24px, 4.2vw, 60px) 0 0;
  font-family: "NORD", sans-serif;
  font-size: clamp(1.0625rem, 1.75vw, 1.5625rem);
  font-weight: 100;
  line-height: 1.65;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ADB3BC;
}

.fm-exptipos .fm-exptipos__card-texto {
  margin: clamp(24px, 4.2vw, 60px) 0 clamp(28px, 5.5vw, 80px);
  max-width: var(--fm-expt-medida);
  font-family: "Red Hat Display", sans-serif;
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: #ADB3BC;
}

/* Justificado solo con columna ancha. Debajo de 1200 genera ríos feos. */
@media (min-width: 1200px) {
  .fm-exptipos .fm-exptipos__card-texto {
    text-align: justify;
    text-wrap: pretty;
  }
}

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

   ⚠ ESTE ES EL BOTÓN QUE MÁS CRECE DEL SITIO: pasa de medir lo que mida su
   texto (~150px) a un mínimo de 250. La card a 1200px de ancho de sección
   mide ~370px, así que entra con holgura; entre 1024 y 1199 la card baja a
   ~310 y sigue entrando. Revisa una captura de ese tramo antes de darlo por
   bueno.

   Si Alejandro lo quiere más corto en las cards, la salida limpia NO es
   volver al ancho por contenido: es declarar aquí
   `min-width: min(var(--fm-btn-ancho), 100%)`, que lo deja en 250 cuando cabe
   y lo encoge a la card cuando no.

   El hover es el del sistema: SOLO cambia el color del borde a oro y el peso
   de 300 a 400. El color del texto se queda en #ADB3BC. */
.fm-exptipos .fm-exptipos__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  align-self: flex-start;
  margin-block-start: auto;
  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;
  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;
  white-space: nowrap;
  color: var(--fm-btn-tinta);
  background-color: transparent;
  transition: color 0.35s ease, border-color 0.35s ease;
}

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

@media (hover: hover) and (pointer: fine) {
  .fm-exptipos .fm-exptipos__cta:hover {
    border-color: var(--fm-btn-oro);
    color: var(--fm-btn-tinta);
    font-weight: var(--fm-btn-peso-on);
  }
}

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

/* --- Tablet -------------------------------------------------------------- */
/* Se mantienen las 3 columnas: con 3 cards, bajar a 2 deja una huérfana.
   El botón no aparece aquí: su medida la resuelven los tokens. */
@media (max-width: 1024px) {
  .fm-exptipos {
    --fm-expt-gap: clamp(18px, 2.4vw, 26px);
    --fm-expt-medida: 22em;
  }

  .fm-exptipos .fm-exptipos__card-titulo {
    font-size: clamp(0.9375rem, 1.9vw, 1.15rem);
    letter-spacing: 0.14em;
  }

  .fm-exptipos .fm-exptipos__card-texto {
    font-size: 0.8125rem;
    line-height: 1.75;
  }

  .fm-exptipos .fm-exptipos__intro {
    line-height: 1.8;
  }
}

/* --- Móvil --------------------------------------------------------------- */
/* Una columna. A 100vw de ancho la proporción 0.69 daría ~145vw de alto por
   card: paso a 4/5 y tope de 460px para que el scroll no se vuelva eterno.
   Con una sola columna el párrafo puede usar todo el ancho de la card. */
@media (max-width: 767px) {
  .fm-exptipos {
    --fm-expt-ratio: 4 / 5;
    --fm-expt-medida: none;
  }

  .fm-exptipos .fm-exptipos__titulo {
    letter-spacing: 0.16em;
    text-indent: 0.16em;
  }

  .fm-exptipos .fm-exptipos__intro {
    font-size: 0.875rem;
    line-height: 1.8;
  }

  .fm-exptipos .fm-exptipos__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(48px, 12vw, 72px);
    margin-block-start: clamp(40px, 12vw, 64px);
  }

  .fm-exptipos .fm-exptipos__card {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
  }

  /* Mismo criterio que en la S3: el <br> se queda. "EVENTOS / CORPORATIVOS"
     en dos líneas se lee bien a ancho completo, y ocultarlo dejaba
     "EVENTOSCORPORATIVOS". Si algún título necesita otro reparto en móvil,
     usa un <br class="fm-br-movil"> extra en lugar de esconder este. */

  .fm-exptipos .fm-exptipos__card-titulo {
    margin-block-start: clamp(20px, 6vw, 28px);
    font-size: clamp(1rem, 5vw, 1.25rem);
  }

  .fm-exptipos .fm-exptipos__card-texto {
    margin-block: clamp(16px, 5vw, 24px) clamp(24px, 7vw, 32px);
    font-size: 0.875rem;
  }

  /* En columna el botón ocupa el ancho de la card, con el tope de 250 que
     ya trae el token. */
  .fm-exptipos .fm-exptipos__cta {
    align-self: flex-start;
    width: var(--fm-btn-ancho);
  }
}

/* --- Movimiento reducido ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fm-exptipos .fm-exptipos__cta {
    transition: none;
  }
}