/* ==========================================================================
   fernandomier-child · HOME
   assets/css/fm-home.css

   S-CTA · "IMPOSIBLE DE OLVIDAR"
   Namespace: fm-ctaimp

   Sustituye al bloque que hoy está armado con widgets nativos de Elementor
   (contenedor .fm-cta-imposible, id 513a326). Ese contenedor tenía
   padding 160/24 y márgenes de 100/100/80 px: ninguna de esas medidas
   coincide con el Figma actual.

   ORIGEN DE LAS MEDIDAS
   Figma · nodo 2136-298 ("CTA"), dentro del marco HOME de 1440 px.
   Todo está tomado a escala 1:1, sin redondear.

     Marco CTA .................. 1286 × 826
     Info (columna) ............. ancho 998, separación 88
       · cada bloque de texto va dentro de un wrapper con 10 px de margen
         interior, así que la separación visible real es 88 + 10 + 10 = 108
     Botones .................... 992 × 37, separación 84, dos de 454 px

   La columna vertical, sumada, da los 826 px del marco:

     20  padding superior      (10 del marco + 10 del wrapper del eyebrow)
     53  eyebrow               (32 × 1.65)
    108  aire
    180  título                (70 × 1.28 × 2 líneas)
    108  aire
    109  párrafo               (22 × 1.65 × 3 líneas)
    172  aire
     37  botones
     40  padding inferior
   ----
    827  ≈ 826 del Figma (el px suelto es el redondeo de los interlineados)

   ESCALADO
   Todos los tamaños salen de clamp() referenciado a 1440 px: el valor máximo
   es el número exacto del Figma y el vw intermedio lo reproduce en cualquier
   ancho. Al llegar a 1440 el diseño queda idéntico al archivo.
   ========================================================================== */

/* ==========================================================================
   AIRE ENTRE SECCIONES
   --------------------------------------------------------------------------
   Medido en producción: los cinco contenedores de primer nivel del home
   estaban pegados — huecos de 0, 0, 0 y -1 px.

   La regla ataca `.e-con + .e-con` en vez de clases propias porque las
   secciones intermedias (dive-in, experiencias, video) no tienen clase fm
   y añadírselas obligaría a tocar Elementor en cuatro sitios. El selector
   de hermano adyacente deja fuera al hero, que es el primero y no debe
   llevar margen superior.

   `.elementor-43` acota al home: el 43 es el ID de la página. Si algún día
   se recrea la portada, ese número cambia.

   Para que una sección concreta quede pegada a la anterior, se le pone la
   clase fm-sin-aire en Elementor.
   ========================================================================== */

:root {
  --fm-aire-seccion: clamp(72px, 8vw, 140px);
}

.elementor-43 > .e-con + .e-con {
  margin-block-start: var(--fm-aire-seccion);
}

.elementor-43 > .e-con.fm-sin-aire {
  margin-block-start: 0;
}

/* El footer es una plantilla aparte de Elementor, fuera de .elementor-43,
   así que no lo alcanza el selector de hermano de arriba. El aire se lo da
   la última sección por abajo. */
.elementor-43 > .e-con:last-of-type {
  margin-block-end: var(--fm-aire-seccion);
}

@media (max-width: 767px) {
  :root { --fm-aire-seccion: 64px; }
}

/* --- Contenedor Elementor ------------------------------------------------
 * El contenedor que envuelve el widget HTML lleva la clase fm-ctaimp-con
 * (Avanzado › Clases CSS). El selector va a (0,2,0) para ganarle a
 * .e-con.e-flex sin recurrir a !important.
 *
 * Los tres pares de propiedades no son redundantes:
 *   · --padding-inline-*  neutraliza el gutter global de 128 px
 *   · padding-inline      neutraliza el shorthand que Elementor escribe aparte
 *   · margin-block        Elementor escribe margin-block-end a (0,3,0)
 */
.elementor .fm-ctaimp-con {
  --padding-inline-start: 0;
  --padding-inline-end: 0;
  padding-inline: 0;
  padding-block: 0;
  margin-block: 0;
  width: 100%;
  max-width: 100%;
  display: block;      /* el e-flex del contenedor no aporta nada aquí */
}

/* --- Sección ------------------------------------------------------------- */
.fm-ctaimp {
  /* Tokens del sistema. Cambiar aquí, no en las reglas de abajo. */
  --ctaimp-oro:        #9B8659;
  --ctaimp-gris:       #ADB3BC;

  /* Negro puro, NO el #01060C del sistema.
     El #01060C tiene una punta de azul que no se nota en abstracto, pero
     esta sección va justo debajo del bloque de video, cuyas barras de
     letterbox son #000000 de verdad. Puestos uno al lado del otro, el
     #01060C se lee como un parche azul. */
  --ctaimp-fondo:      #000000;

  /* Degradado del título.
     El Figma trae relleno sólido #9B8659 MÁS un degradado encima cuyo único
     stop legible desde el panel es #000000 al 20 %. No pude leer ni el ángulo
     ni la posición de los stops (el plan del archivo no expone el inspector
     completo), así que esto es una lectura razonable: el oro plano oscurecido
     un 20 % hacia abajo. Si Alejandro pasa el degradado real, se cambian
     estas tres variables y no se toca nada más. */
  --ctaimp-oro-ini:    #9B8659;
  --ctaimp-oro-fin:    #7C6B47;   /* = #9B8659 con 20 % de negro encima */
  --ctaimp-oro-ang:    180deg;

  /* Tipografías. Los nombres tienen que coincidir EXACTO con los de
     Elementor › Custom Fonts, mayúsculas y espacios incluidos. */
  --ctaimp-font:       "NORD", "Helvetica Neue", Arial, sans-serif;
  --ctaimp-font-disp:  "Kratch Revotch", var(--ctaimp-font);

  /* Ritmo vertical (ver el desglose del encabezado) */
  --ctaimp-aire-sup:   20px;
  --ctaimp-aire-inf:   40px;
  --ctaimp-aire-info:  108px;   /* eyebrow → título → párrafo */
  --ctaimp-aire-btn:   172px;   /* párrafo → botones          */

  /* Botones.
     El Figma los da en 454 × 37 con texto de 22.08px. En pantalla salían
     demasiado pesados: 454px son casi un tercio del ancho útil, y a 22px
     el interletrado del 16% los hace parecer una banda, no un botón.
     Bajados a 340 × 34 con texto de 17px, que mantiene la misma proporción
     entre alto y cuerpo tipográfico. Es una desviación consciente del
     archivo: pásasela a Alejandro antes de darla por buena.
     Solo afecta de 992px para arriba; por debajo mandan los bloques
     responsive del final. */
  --ctaimp-btn-ancho:  340px;
  --ctaimp-btn-alto:   34px;
  --ctaimp-btn-texto:  17px;
  --ctaimp-btn-borde:  1px;
  --ctaimp-btn-gap:    64px;

  position: relative;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--ctaimp-fondo);
  padding-block: var(--ctaimp-aire-sup) var(--ctaimp-aire-inf);
  padding-inline: 24px;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- Columna de texto ---------------------------------------------------- */
/* 998 px es el ancho de la caja "Info" del Figma y es lo que fuerza el corte
   del párrafo en tres líneas. El min() lo hace bajar en pantallas chicas sin
   necesidad de un breakpoint. */
.fm-ctaimp__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ctaimp-aire-info);
  width: min(998px, 100%);
}

/* --- Eyebrow ------------------------------------------------------------- */
/* 32px / 165% / 16% de tracking.
   El text-indent compensa el espacio que letter-spacing añade DESPUÉS del
   último carácter: sin él, un texto centrado queda desplazado media letra a
   la izquierda. Es el mismo truco que en el resto del sitio. */
.fm-ctaimp__eyebrow {
  margin: 0;
  font-family: var(--ctaimp-font);
  font-weight: 300;
  font-size: clamp(15px, 2.222vw, 32px);
  line-height: 1.65;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: var(--ctaimp-gris);
}

/* --- Título -------------------------------------------------------------- */
/* Kratch Revotch 300 · 70px / 128% / 37% de tracking · mayúsculas.
   Las dos líneas son spans en bloque y no un salto por ancho: con 0.37em de
   interletrado el punto de corte se mueve con cualquier cambio de fuente o
   de zoom, y el diseño depende de que diga "IMPOSIBLE / DE OLVIDAR". */
.fm-ctaimp__titulo {
  margin: 0;
  font-family: "Kratch Revotch";
  font-weight: 300;
  font-size: clamp(26px, 4.861vw, 70px);
  line-height: 1.28;
  letter-spacing: 0.37em;
  text-indent: 0.37em;
  text-transform: uppercase;
  color: var(--ctaimp-oro);
}

.fm-ctaimp__titulo span {
  display: block;
}

/* El degradado se aplica sobre el texto. Se aísla en @supports para que, si
   background-clip:text falla, quede el oro plano del color de arriba en vez
   de un título invisible. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .fm-ctaimp__titulo {
    background-image: linear-gradient(
      var(--ctaimp-oro-ang),
      var(--ctaimp-oro-ini) 0%,
      var(--ctaimp-oro-fin) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* --- Párrafo ------------------------------------------------------------- */
/* NORD 300 · 22px / 165% / 16%.
   text-transform explícito y a (0,2,0) porque hay una regla global en el
   tema que ya obligó a hacer lo mismo en /experiencias/. */
.fm-ctaimp .fm-ctaimp__texto {
  margin: 0;
  max-width: 978px;
  font-family: var(--ctaimp-font);
  font-weight: 300;
  font-size: clamp(14px, 1.528vw, 22px);
  line-height: 1.65;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: var(--ctaimp-gris);
}

/* --- Botones ------------------------------------------------------------- */
.fm-ctaimp__acciones {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ctaimp-btn-gap);
  margin-block-start: var(--ctaimp-aire-btn);
}

/* Los dos miden 454 px aunque el copy sea de distinto largo: así está en el
   Figma y es lo que mantiene el par ópticamente equilibrado.
   Si prefieres que crezcan con el texto, cambia width por min-width. */
.fm-ctaimp__btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(var(--ctaimp-btn-ancho), 24vw);
  height: clamp(28px, 2.36vw, var(--ctaimp-btn-alto));
  padding-inline: 12px;

  border: var(--ctaimp-btn-borde) solid var(--ctaimp-gris);
  border-radius: 0;
  background: transparent;

  font-family: var(--ctaimp-font);
  font-weight: 300;
  font-size: clamp(11px, 1.181vw, var(--ctaimp-btn-texto));
  line-height: 1;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  transition: border-color 0.3s ease;
}

/* El color se declara APARTE, con :link y :visited.
   Es la causa del tinte morado que se veía en los botones: son <a>, y la
   regla `a:visited` del tema tiene especificidad (0,1,1), mientras que
   `.fm-ctaimp__btn` solo llega a (0,1,0). Ganaba el tema.
   Enumerando los estados subimos a (0,2,0) y el gris queda fijo en los
   cinco: normal, visitado, hover, foco y activo. En el hover cambian el
   peso y el borde. El color, nunca. */
.fm-ctaimp__btn:link,
.fm-ctaimp__btn:visited,
.fm-ctaimp__btn:hover,
.fm-ctaimp__btn:focus,
.fm-ctaimp__btn:active {
  color: var(--ctaimp-gris);
}

/* Hover: sube el peso de 300 a 400 y el borde pasa a dorado.
   Sin cambio de fondo, sin radio: es la regla del sistema. */
.fm-ctaimp__btn:hover,
.fm-ctaimp__btn:focus-visible {
  font-weight: 400;
  border-color: var(--ctaimp-oro);
}

.fm-ctaimp__btn:focus-visible {
  outline: 2px solid var(--ctaimp-oro);
  outline-offset: 3px;
}

/* reset.css de Hello Elementor pone button:hover{background:#C36}.
   Aquí son <a>, pero la regla queda por si alguien convierte el botón. */
.fm-ctaimp__btn:hover,
.fm-ctaimp__btn:focus {
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   Los clamp() ya escalan solos hasta ~992 px. De ahí para abajo hay que
   recomponer, no solo encoger: los 172 px de aire y los 84 de separación
   entre botones dejan de tener sentido en vertical.
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .fm-ctaimp {
    --ctaimp-aire-info: clamp(56px, 9vw, 108px);
    --ctaimp-aire-btn:  clamp(80px, 14vw, 172px);
    --ctaimp-btn-gap:   clamp(32px, 6vw, 84px);
  }
}

@media (max-width: 991px) {
  .fm-ctaimp {
    padding-inline: 32px;
    --ctaimp-aire-sup: 72px;
    --ctaimp-aire-inf: 88px;
  }

  .fm-ctaimp__btn {
    /* Por debajo de 991 el 31.5vw deja los botones demasiado angostos para
       "CONSULTA DISPONIBILIDAD". Se liberan y comparten ancho por flex. */
    width: auto;
    flex: 0 1 auto;
    padding-inline: 20px;
  }
}

@media (max-width: 767px) {
  .fm-ctaimp {
    padding-inline: 24px;
    --ctaimp-aire-sup: 64px;
    --ctaimp-aire-inf: 72px;
    --ctaimp-aire-info: 48px;
    --ctaimp-aire-btn:  64px;
  }

  .fm-ctaimp__titulo {
    /* 0.37em a tamaño chico se come el ancho de la pantalla. */
    font-size: 36px;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
  }

  .fm-ctaimp__eyebrow {
    font-size: 14px;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
  }

  .fm-ctaimp .fm-ctaimp__texto {
    font-size: 15px;
    line-height: 1.75;
  }

  .fm-ctaimp__acciones {
    flex-direction: column;
    /* Ancho fijo compartido: los dos botones se ven iguales aunque el copy
       sea de distinto largo. Es el mismo valor que en /eventos/. */
    gap: 24px;
  }

  .fm-ctaimp__btn {
    width: min(100%, 250px);
    height: 40px;          /* 37 del Figma queda incómodo para el dedo */
    font-size: 11px;
    padding-inline: 12px;
  }
}

@media (max-width: 400px) {
  .fm-ctaimp {
    padding-inline: 20px;
    --ctaimp-aire-info: 40px;
    --ctaimp-aire-btn:  52px;
  }

  .fm-ctaimp__titulo {
    font-size: 36px;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }
}

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

/* ==========================================================================
   S1 · HERO con video en autoplay
   Namespace: fm-hero

   El máster del video es 2.40:1 con barras negras de 140 px arriba y abajo
   y los subtítulos QUEMADOS dentro de la barra inferior.

   El póster del hero usa solo el área activa (1920×800), pero el VIDEO trae
   sus barras dentro. Como la sección es 2.40:1 y el video 16:9, el
   object-fit: cover recorta arriba y abajo — que es justo lo que sobra: las
   barras. El efecto secundario es que los subtítulos quemados quedan fuera
   de cuadro en escritorio. Como el autoplay va sin sonido, eso deja el
   video sin locución NI subtítulos: puro apoyo visual. Está descrito en la
   respuesta; si hay que conservarlos, la sección tiene que pasar a 16:9.
   ========================================================================== */

.elementor .fm-hero-con {
  --padding-inline-start: 0;
  --padding-inline-end: 0;
  padding-inline: 0;
  padding-block: 0;
  margin-block: 0;
  width: 100%;
  max-width: 100%;
  display: block;
}

.fm-hero {
  position: relative;
  width: 100%;
  /* El .fm-nav es position:fixed, así que el hero tiene que bajar por su
     cuenta. Este margen venía del bloque viejo de custom.css; al borrarlo
     hay que recogerlo aquí o el hero se mete debajo del nav. */
  margin-top: var(--fm-hero-top, 70px);
  background-color: var(--fm-fondo, #01060C);
  /* clip y no hidden: hidden en un ancestro rompería cualquier
     position:sticky que baje por esta rama del árbol. */
  overflow-x: clip;
}

/* --- Capas del hero ------------------------------------------------------
 * El póster va debajo y define la altura de la sección. El video va encima,
 * en absoluto, y solo se destapa cuando emite `playing`.
 *
 * La proporción se declara aquí ADEMÁS de en los width/height del marcado.
 * Es el cinturón por si el navegador ignora los atributos del <source>:
 * sin esto, al entrar la fuente móvil de 3:4 la caja sigue reservada a
 * 2.40:1 y el hero pega un salto de varios cientos de píxeles.
 */
.fm-hero__poster,
.fm-hero__poster img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.fm-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain y no cover: el video TIENE que verse entero, barras incluidas,
     porque los subtítulos están quemados dentro de la barra inferior. Con
     cover, el navegador recortaría justo esa franja. La sección ya es 16:9
     igual que el máster, así que en la práctica no sobra nada; contain es
     el seguro por si el ratio se desvía un píxel. */
  object-fit: contain;
  display: block;
  background: #000;

  /* Arranca invisible. Sin esto se ve un rectángulo negro hasta que llega
     el primer fotograma, que con 8-45 MB por delante no es inmediato. */
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.fm-hero__video.is-listo {
  opacity: 1;
}

/* El lightbox se retiró: ya no hay modal ni botón, el video va en autoplay
   dentro de la propia sección. Los estilos .fm-lb* se borraron con él. */

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


/* Con movimiento reducido el módulo ni siquiera monta el video: la sección
   se queda en el póster. Esto solo apaga el fundido por si acaso. */
@media (prefers-reduced-motion: reduce) {
  .fm-hero__video { transition: none; }
}

/* ==========================================================================
   CONTROL DE SONIDO · compartido por el hero y el bloque de video
   --------------------------------------------------------------------------
   El autoplay obliga a `muted`: ningún navegador reproduce audio sin un
   gesto previo. Este botón ES ese gesto. Mientras esté silenciado no se ve
   la locución del video; al pulsarlo, el navegador ya tiene permiso.

   Vive en el marcado, no lo crea el JS, para que el CSS siga viviendo en
   archivos y no haya salto cuando el módulo arranca.
   ========================================================================== */

.fm-sonido {
  position: absolute;
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 3;

  /* Sigue midiendo 44px para que sea cómodo de tocar en móvil: es el
     mínimo que recomienda la WCAG. Lo que se quitó es la caja, no el área
     clicable. */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  color: var(--fm-gris, #ADB3BC);
  transition: color 0.3s ease;
}

.fm-sonido svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Sin borde ni fondo, el icono queda suelto sobre la imagen. La sombra
     lo despega si el video pasa por un fotograma claro. */
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.75));
}

/* Dos iconos en el mismo botón: se alternan por estado, así no hay que
   reconstruir SVG desde JS. */
.fm-sonido__on  { display: none; }
.fm-sonido[aria-pressed="true"] .fm-sonido__on  { display: block; }
.fm-sonido[aria-pressed="true"] .fm-sonido__off { display: none; }

.fm-sonido:hover,
.fm-sonido:focus-visible {
  color: var(--fm-oro, #9B8659);
}

/* reset.css de Hello Elementor pone button:hover{background-color:#C36}. */
.fm-sonido:hover,
.fm-sonido:focus {
  background-color: transparent;
}

.fm-sonido:focus-visible {
  outline: 2px solid var(--fm-oro, #9B8659);
  outline-offset: 3px;
}

/* Si el módulo no monta el video (movimiento reducido, ahorro de datos,
   red lenta), no hay nada que silenciar: el JS oculta el botón. */
.fm-sonido[hidden] { display: none; }


/* ==========================================================================
   S4 · BLOQUE DE VIDEO "Fragmentos del show en vivo"
   Namespace: fm-video

   Sustituye al bloque que traía <style> y <script> dentro del widget HTML.
   Aquello rompía la regla del proyecto y además dejaba fuera de control tres
   colores que no son del sistema: #0A0A0A de fondo, #F2F0EC de tinta y
   rgba(242,240,236,.62) en el pie. Aquí van los del sistema.

   Se fue también todo el aparato del modal, el botón de play, el velo, el
   grano y los hovers de escala: con el video en autoplay no hay nada que
   abrir ni sobre lo que pasar el cursor.
   ========================================================================== */

/* El contenedor de Elementor traía padding 0 128px, que es el gutter global.
   Con esto la sección va a sangre, de borde a borde. */
.elementor .fm-video-con {
  --padding-inline-start: 0;
  --padding-inline-end: 0;
  padding-inline: 0;
  padding-block: 0;
  margin-block: 0;
  width: 100%;
  max-width: 100%;
  display: block;
}

.fm-video {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  /* Mismo motivo que en el CTA: la franja del pie tiene que fundirse con
     las barras negras del video, que son #000000. */
  background: #000000;
}

/* 16:9 en TODOS los anchos. El máster trae las barras negras dentro y los
   subtítulos quemados en la de abajo: cualquier otra proporción los recorta.
   Por eso desaparecieron el 2.35/1 de escritorio y el 4/5 de móvil que traía
   el bloque anterior. */
.fm-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

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

.fm-video__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.fm-video__video.is-listo { opacity: 1; }

/* El botón de sonido sí recibe clics aunque el video no. */
.fm-video .fm-sonido { pointer-events: auto; }

.fm-video__caption {
  margin: 0;
  padding: clamp(20px, 3vw, 36px) 24px 0;
  max-width: min(100%, 46em);
  margin-inline: auto;
  text-align: center;
  font-family: "Red Hat Display", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--fm-gris, #ADB3BC);
}

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