/* ==========================================================================
   fernandomier-child · Bloque CTA de cierre de página
   [fm_cta variante="..."]

   Namespace propio (fm-cta) porque la sección es compartida: hoy la usa
   /experiencias/ y está pensada para heredarla el resto de páginas cambiando
   solo la variante del template part.

   OJO: el CTA de /eventos/ usaba este MISMO namespace con tokens y marcado
   distintos. Se ha renombrado a fm-evcta para que no puedan colisionar.

   La proporción del fondo viene del diseño:
     desktop  1440 × 349   (4.126 : 1)
     móvil     402 × 623   (1 : 1.55)

   REVISIÓN 2026-09:
     · El titular pasa al gris del sistema. El azul claro que llevaba está
       retirado y no puede volver a aparecer en ningún archivo.
     · Los botones dejan de declarar medida propia: consumen los tokens
       --fm-btn-* de custom.css. Ver la nota del bloque 06 de esa hoja.
   ========================================================================== */

/* --- Contenedor Elementor ------------------------------------------------ */
/* Dos cosas, no una:
 *
 *   1. Neutralizar el gutter global (padding y gap del contenedor).
 *   2. Forzar que el widget se estire.
 *
 * Lo segundo es lo que hacía que el fondo saliera como una tira en medio de
 * la pantalla en vez de a sangre. El contenedor venía con la alineación en
 * "centro" — herencia de cuando dentro había un heading y dos botones — y con
 * align-items:center el widget deja de estirarse y se encoge al ancho de su
 * contenido. La sección medía lo que medía el titular (~600px) y el
 * object-fit:cover recortaba la imagen a esa caja.
 *
 * Se arregla desde aquí y no solo desde la UI de Elementor para que no se
 * vuelva a romper si alguien toca la alineación del contenedor.
 */
.e-con.fm-cta-con,
.e-con.fm-cta-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;

  --align-items: stretch;
  --container-widget-width: 100%;
  align-items: stretch;
  max-width: none;
}

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

/* --- Sección ------------------------------------------------------------- */
.fm-cta {
  /* Única perilla de altura. 24.25vw reproduce la proporción del fondo de
     Figma: a 1440 da los 349px del prototipo. El clamp evita que en un
     monitor ancho la banda se coma media pantalla. */
  --fm-cta-alto: clamp(280px, 24.25vw, 420px);

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

/* --- Fondo a sangre ------------------------------------------------------ */
.fm-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

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

/* Funde el borde superior e inferior con el #01060C de la sección anterior y
   del footer. Sin esto se ve el corte recto del JPG. */
.fm-cta__capa {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, #01060C 0%, rgba(1, 6, 12, 0) 14%),
    linear-gradient(0deg,   #01060C 0%, rgba(1, 6, 12, 0) 14%),
    linear-gradient(180deg, rgba(1, 6, 12, 0.35) 0%, rgba(1, 6, 12, 0.35) 100%);
}

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

/* Especificidad (0,2,0): el theme y Elementor imponen estilos a los h2, y
   algo global mete uppercase + tracking. Con (0,1,0) no gana. */
.fm-cta .fm-cta__titulo {
  margin: 0;
  font-family: "NORD", sans-serif;
  font-weight: 100;
  font-size: clamp(1.05rem, 2.05vw, 1.85rem);
  line-height: 1.55;
  letter-spacing: 0.2em;
  /* Compensa el hueco que el tracking deja tras la última letra: sin esto el
     centrado se ve corrido a la izquierda. */
  text-indent: 0.2em;
  text-transform: uppercase;
  color: #ADB3BC;
}

/* --- Botones ------------------------------------------------------------- */
/* 65px a 1440 es la separación del auto-layout del frame de Figma. */
.fm-cta .fm-cta__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.6vw, 52px);
  margin-top: clamp(28px, 4.5vw, 65px);
}

/* MEDIDA DEL SISTEMA. Ancho, alto, cuerpo y tracking salen de los tokens
   --fm-btn-* de custom.css: aquí no se declara ninguno de los cuatro.

   inline-grid con el ::after superpuesto: ver el comentario del hover.

   El borde va macizo. Antes estaba en rgba(173,179,188,.55), que sobre el
   fondo resuelve a un gris que no es el del sistema. */
.fm-cta .fm-cta__boton {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: var(--fm-btn-ancho);
  min-height: var(--fm-btn-alto);
  padding-block: 0;
  padding-inline: var(--fm-btn-pad-x);
  border: 1px solid var(--fm-btn-borde);
  border-radius: 0;
  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-cta .fm-cta__boton > span {
  grid-area: 1 / 1;
}

/* Copia invisible de la etiqueta con el peso del hover. Ocupa la misma celda
   del grid, así que la caja siempre mide lo que medirá en hover y el par de
   botones no da un salto al pasar el cursor. */
.fm-cta .fm-cta__boton::after {
  content: attr(data-texto);
  grid-area: 1 / 1;
  font-weight: var(--fm-btn-peso-on);
  visibility: hidden;
  pointer-events: none;
}

/* Hover: fondo transparente. Cambian SOLO el color del borde y el peso de la
   tipografía — nada de relleno dorado.

   El `color` va declarado aunque no cambie: son <a>, y `a:visited` del tema
   está en (0,1,1). Sin esta línea el gris se pierde en el estado visitado. */
@media (hover: hover) and (pointer: fine) {
  .fm-cta .fm-cta__boton:hover {
    border-color: var(--fm-btn-oro);
    background-color: transparent;
    color: var(--fm-btn-tinta);
    font-weight: var(--fm-btn-peso-on);
  }
}

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

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

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

/* --- Tablet -------------------------------------------------------------- */
/* El botón ya no aparece aquí: su medida la resuelven los tokens. */
@media (max-width: 1024px) {
  .fm-cta {
    --fm-cta-alto: clamp(300px, 34vw, 380px);
  }

  .fm-cta .fm-cta__titulo {
    letter-spacing: 0.16em;
    text-indent: 0.16em;
  }
}

/* --- Móvil --------------------------------------------------------------- */
/* El fondo móvil es vertical (1:1.55). El min() acota la banda para que en un
   tablet estrecho o en apaisado no se convierta en una pantalla entera. */
@media (max-width: 767px) {
  .fm-cta {
    --fm-cta-alto: min(155vw, 720px);
  }

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

  .fm-cta__capa {
    background:
      linear-gradient(180deg, #01060C 0%, rgba(1, 6, 12, 0) 12%),
      linear-gradient(0deg,   #01060C 0%, rgba(1, 6, 12, 0) 12%),
      linear-gradient(180deg, rgba(1, 6, 12, 0.3) 0%, rgba(1, 6, 12, 0.3) 100%);
  }

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

  /* El salto de línea es del diseño desktop; en móvil el titular ocupa
     cuatro líneas y tiene que fluir solo.

     El template part imprime un espacio ANTES del <br> justamente para esto:
     al ocultarlo, ese espacio es lo único que separa las dos palabras. */
  .fm-cta .fm-cta__titulo br {
    display: none;
  }

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

  /* 13vw ≈ 53px a 402 de ancho: es la separación del prototipo. */
  .fm-cta .fm-cta__acciones {
    flex-direction: column;
    gap: 13vw;
    margin-top: 14vw;
  }

  /* Lo único que cambia del botón: pasa a ocupar el ancho de la columna
     (el token ya vale min(100%, 250px)) y deja envolver el texto. */
  .fm-cta .fm-cta__boton {
    width: var(--fm-btn-ancho);
    white-space: normal;
  }
}

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