/* ==========================================================================
   fm-contratacion.css
   Página /contratacion/ — sección única: fm-ctform
   Formulario: Fluent Forms (free) id=3

   REV 6 — el título y el párrafo se comportan distinto por breakpoint,
   siguiendo los dos frames del Figma (Diseño desktop node 2133-132 y
   Mobile node 3081-583):

     · Título desktop:  LLEVEMOS EL / ASOMBRO A TU / EVENTO
       Título mobile:   LLEVEMOS EL / ASOMBRO A / TU EVENTO
       Se resuelve con dos <br> conmutados por media query. El markup va en
       la nota del bloque 4 — el &nbsp; de la REV 5 no servía porque amarra
       "TU EVENTO" también en desktop.

     · Párrafo desktop: centrado.
       Párrafo mobile:  justificado.
       Un solo token, --fm-ct-intro-align, cambia en el breakpoint.

   REV 5 — comentarios de Alejandro en Figma:
     · Color: el azul claro que estaba retirado del sistema desaparece del
       archivo. Todas sus apariciones (tokens, hovers, bordes, scrollbar,
       filo del panel) pasan al gris del sistema, #ADB3BC = rgb(173,179,188).
     · Botón de envío a border-radius: 0, como el resto de los botones del
       sistema.

   REV 4:
     · Cuerpo del formulario en Red Hat Display, caja baja. El @font-face vive
       en custom.css para que la fuente quede disponible en todo el sitio.
     · Párrafo a los 20px del Figma.
     · Panel del dropdown en cristal: translúcido con backdrop-filter.

   Nota de especificidad: el layout usa >= 0,2,0 para ganarle a .e-con.e-flex
   de Elementor y a los estilos base de Fluent Forms, sin usar !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de sección
   -------------------------------------------------------------------------- */

.fm-ctform{
  --fm-ct-fondo:        #01060C;
  --fm-ct-titulo:       #ADB3BC;
  --fm-ct-cuerpo:       #ADB3BC;
  --fm-ct-oro:          #9B8659;

  /* Canales RGB de #ADB3BC. Todo lo translúcido de la sección sale de aquí,
     así que si algún día cambia el gris se toca un solo renglón. */
  --fm-ct-gris-rgb:     173, 179, 188;

  --fm-ct-borde:        rgba(173, 179, 188, .24);
  --fm-ct-borde-act:    var(--fm-ct-oro);
  --fm-ct-relleno:      rgba(1, 6, 12, .45);
  --fm-ct-relleno-act:  rgba(155, 134, 89, .06);
  --fm-ct-error:        #C4574F;
  --fm-ct-error-txt:    #D98079;

  /* Cuerpo del formulario: etiquetas, campos, opciones y párrafo.
     Red Hat Display es de caja baja, así que ya no hay que forzar nada.
     El @font-face está en custom.css. */
  --fm-ct-fuente-cuerpo: "Red Hat Display", system-ui, sans-serif;

  /* Display. Explícitas a propósito: <button> no hereda font-family de forma
     fiable entre navegadores. */
  --fm-ct-fuente-titulo:  NORD;
  --fm-ct-fuente-display: "Kratch Revotch", NORD, sans-serif;

  /* 20px es el valor del Figma (Body/L/Light 20/165). */
  --fm-ct-intro-tam:    clamp(15px, 1.39vw, 20px);

  /* Medida del párrafo: ancho máximo de la caja de texto.
     En desktop manda el valor en px del Figma. En mobile se cambia a una
     medida en ch para amarrar los caracteres por línea, no los píxeles —
     ver el breakpoint de 767px. Como letter-spacing es 0 en este párrafo,
     ch es fiable aquí. */
  --fm-ct-intro-medida: 874px;

  /* Alineación del párrafo. Centrado en desktop, justificado en mobile.
     El valor de mobile se reasigna en el breakpoint de 767px, abajo. */
  --fm-ct-intro-align:  center;

  --fm-ct-radio:        2px;
  --fm-ct-fade:         clamp(70px, 9vw, 120px);
  --fm-ct-ancho:        880px;
  --fm-ct-gutter:       clamp(24px, 5vw, 64px);

  /* --- Dropdown ---------------------------------------------------------
     El panel es cristal: translúcido más desenfoque de lo que hay detrás.
     Sube --fm-ct-panel-vidrio hacia 1 para hacerlo más opaco.

     --fm-ct-sel-luz es el color de la barra de hover: el gris del sistema.
     Si lo quieren al revés — que la fila se hunda hacia el negro del fondo
     en vez de encenderse — cambia el token a rgba(1, 6, 12, .55) y listo;
     el resto del CSS no se toca. */
  --fm-ct-panel-vidrio: rgba(12, 22, 34, .05);
  --fm-ct-panel-borde:  rgba(173, 179, 188, .16);
  --fm-ct-panel-solido: #101B27;               /* respaldo sin backdrop-filter */
  --fm-ct-sel-luz:      var(--fm-ct-gris-rgb); /* canales RGB de #ADB3BC */
}

/* --------------------------------------------------------------------------
   2. Sección: full-bleed + neutralización del gutter de Elementor
   -------------------------------------------------------------------------- */

.elementor .fm-ctform{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;

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

  --padding-inline-start: 0;
  --padding-inline-end: 0;
  padding-inline: 0;
  padding-block: clamp(70px, 9vw, 130px) clamp(90px, 11vw, 165px);

  background-color: var(--fm-ct-fondo);
  overflow: hidden;
  isolation: isolate;
}

.elementor .fm-ctform > *{
  width: min(100% - var(--fm-ct-gutter), var(--fm-ct-ancho));
  max-width: none;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   3. Capa de fondo + corte inferior
   -------------------------------------------------------------------------- */

.fm-ctform::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(
      to bottom,
      transparent calc(100% - var(--fm-ct-fade)),
      var(--fm-ct-fondo) 100%
    ),
    image-set(
      url("../img/fm-contratacion-fondo-1440.webp") type("image/webp"),
      url("../img/fm-contratacion-fondo-1440.jpg")  type("image/jpeg")
    );
  background-size: 100% 100%, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}

.fm-ctform::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* --------------------------------------------------------------------------
   4. Encabezado
   --------------------------------------------------------------------------
   MARKUP DEL TÍTULO — importante:
   Los dos frames del Figma parten el título en lugares distintos, así que el
   quiebre no se puede dejar al flujo natural ni a un espacio duro. Van tres
   <br>: uno fijo y dos conmutados por media query. Ver el markup completo
   en el HTML que acompaña a este archivo.

   Ojo con el espacio antes de cada <br>: cuando el salto se apaga con
   display:none, ese espacio es lo único que evita que las palabras queden
   pegadas ("ASOMBRO ATU").
   -------------------------------------------------------------------------- */

.fm-ctform__cab{
  text-align: center;
  margin-bottom: clamp(38px, 5vw, 74px);
}

.fm-ctform__titulo{
  margin: 0 auto clamp(22px, 3vw, 42px);
  max-width: 15em;
  font-family: var(--fm-ct-fuente-display);
  font-weight: 300;
  font-size: 70px;
  line-height: 1.22;
  letter-spacing: .30em;
  text-indent: .30em;              /* compensa el tracking del último glifo */
  text-transform: uppercase;
  text-align: center;
  color: var(--fm-ct-titulo);
}

/* Saltos conmutados. Por defecto manda el corte de desktop:
   LLEVEMOS EL / ASOMBRO A TU / EVENTO
   En el breakpoint de 767px se invierten y queda el de mobile:
   LLEVEMOS EL / ASOMBRO A / TU EVENTO */
.fm-ctform__titulo .fm-ctform__salto--mov{
  display: none;
}

.fm-ctform__titulo .fm-ctform__salto--desk{
  display: inline;
}

/* 874px y 20px/165% son los valores exactos del Figma.
   Alineación: centrada en desktop, justificada en mobile (ver breakpoint
   de 767px). text-align-last se queda en auto para que la última línea
   justificada — "personalizada." — caiga a la izquierda y no se estire. */
.fm-ctform__intro{
  margin: 120px auto;
  max-width: var(--fm-ct-intro-medida);
  font-family: var(--fm-ct-fuente-cuerpo);
  font-size: var(--fm-ct-intro-tam);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--fm-ct-cuerpo);
  text-transform: none;
  text-align: var(--fm-ct-intro-align);
  text-align-last: auto;
  text-wrap: pretty;
  hyphens: none;
}

/* --------------------------------------------------------------------------
   5. Rejilla del formulario
   -------------------------------------------------------------------------- */

.fm-ctform .frm-fluent-form{
  color-scheme: dark;
}

.fm-ctform .frm-fluent-form:has(> .ff-el-group),
.fm-ctform .frm-fluent-form :where(div, fieldset, section):has(> .ff-el-group){
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 2.4vw, 34px);
  row-gap: clamp(18px, 2.2vw, 28px);
  align-items: start;
}

.fm-ctform .ff-el-group,
.fm-ctform .ff-errors-in-stack,
.fm-ctform .ff-message-success{
  grid-column: 1 / -1;
  min-width: 0;
  margin-bottom: 0;
}

.fm-ctform .ff-el-group.fm-ct-mitad,
.fm-ctform .ff-el-group:has(.fm-ct-mitad){
  grid-column: span 6;
}

.fm-ctform .ff-el-group.fm-ct-full,
.fm-ctform .ff-el-group:has(.fm-ct-full){
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   6. Etiquetas
   -------------------------------------------------------------------------- */

.fm-ctform .ff-el-input--label{
  margin: 0 0 9px;
  padding: 0;
}

.fm-ctform .ff-el-input--label label{
  display: block;
  margin: 0;
  font-family: var(--fm-ct-fuente-cuerpo);
  font-size: clamp(12.5px, 1.04vw, 15px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fm-ct-cuerpo);
}

.fm-ctform .ff-el-input--label .ff-el-is-required,
.fm-ctform .ff-el-input--label label .ff-el-is-required{
  margin-left: 3px;
  padding: 0;
  color: var(--fm-ct-oro);
}

/* --------------------------------------------------------------------------
   7. Controles
   -------------------------------------------------------------------------- */

.fm-ctform .ff-el-form-control{
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  margin: 0;

  font-family: var(--fm-ct-fuente-cuerpo);
  font-size: clamp(13.5px, 1.11vw, 16px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fm-ct-titulo);

  background-color: var(--fm-ct-relleno);
  border: 1px solid var(--fm-ct-borde);
  border-radius: var(--fm-ct-radio);
  padding: clamp(10px, 1vw, 13px) clamp(12px, 1.15vw, 16px);
  box-shadow: none;
  transition: border-color .28s ease, background-color .28s ease;
}

.fm-ctform .ff-el-form-control::placeholder{
  color: rgba(173, 179, 188, .5);
  opacity: 1;
}

.fm-ctform .ff-el-form-control:hover{
  border-color: rgba(173, 179, 188, .38);
}

/* Un solo indicador de foco: el borde dorado. */
.fm-ctform .ff-el-form-control:focus,
.fm-ctform .ff-el-form-control:focus-visible{
  outline: none;
  border-color: var(--fm-ct-borde-act);
  background-color: var(--fm-ct-relleno-act);
  box-shadow: none;
}

.fm-ctform .ff-el-form-control:-webkit-autofill,
.fm-ctform .ff-el-form-control:-webkit-autofill:hover,
.fm-ctform .ff-el-form-control:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--fm-ct-titulo);
  -webkit-box-shadow: 0 0 0 1000px #060D16 inset;
  caret-color: var(--fm-ct-titulo);
  transition: background-color 9999s ease-out;
}

/* --- Select nativo (respaldo sin JS) ------------------------------------ */

.fm-ctform select.ff-el-form-control{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: clamp(36px, 3.4vw, 46px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%239B8659' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right clamp(13px, 1.25vw, 17px) center;
  background-size: 11px 7px;
}

.fm-ctform .ff-el-input--content:has(> select)::after,
.fm-ctform .ff-el-input--content:has(> select)::before{
  display: none;
}

.fm-ctform select.ff-el-form-control:has(option[value=""]:checked){
  color: rgba(173, 179, 188, .5);
}

.fm-ctform select.ff-el-form-control option{
  background-color: #0A121C;
  color: var(--fm-ct-titulo);
}

.fm-ctform select.fm-ctsel-nativo{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

/* --- Textarea ----------------------------------------------------------- */

.fm-ctform textarea.ff-el-form-control{
  resize: vertical;
  line-height: 1.7;
}

.fm-ctform .fm-ct-area-chica textarea.ff-el-form-control,
.fm-ctform textarea.fm-ct-area-chica{
  min-height: clamp(48px, 4.8vw, 58px);
}

.fm-ctform .fm-ct-area-grande textarea.ff-el-form-control,
.fm-ctform textarea.fm-ct-area-grande{
  min-height: clamp(112px, 11.5vw, 148px);
}

/* --------------------------------------------------------------------------
   7b. Dropdown propio, panel de cristal
   --------------------------------------------------------------------------
   La lista de un <select> nativo la dibuja el sistema operativo: no hay CSS
   que la alcance. fm-contratacion-select.js construye este componente junto
   al <select> real y lo esconde. Sin JS no se construye nada y el nativo
   queda visible y funcional.
   -------------------------------------------------------------------------- */

.fm-ctform .fm-ctsel{
  position: relative;
  width: 100%;
}

/* --- Disparador: mismo aspecto que un input ----------------------------- */

.fm-ctform .fm-ctsel__disp{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  text-align: left;
  cursor: pointer;

  font-family: var(--fm-ct-fuente-cuerpo);
  font-size: clamp(13.5px, 1.11vw, 16px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fm-ct-titulo);

  background-color: var(--fm-ct-relleno);
  border: 1px solid var(--fm-ct-borde);
  border-radius: var(--fm-ct-radio);
  padding: clamp(10px, 1vw, 13px) clamp(12px, 1.15vw, 16px);
  box-shadow: none;
  transition: border-color .28s ease, background-color .28s ease;
}

.fm-ctform .fm-ctsel--vacio .fm-ctsel__disp{
  color: rgba(173, 179, 188, .5);
}

@media (hover: hover){
  .fm-ctform .fm-ctsel__disp:hover{
    border-color: rgba(173, 179, 188, .38);
  }
}

.fm-ctform .fm-ctsel__disp:focus,
.fm-ctform .fm-ctsel__disp:focus-visible,
.fm-ctform .fm-ctsel--abierto .fm-ctsel__disp{
  outline: none;
  border-color: var(--fm-ct-borde-act);
  background-color: var(--fm-ct-relleno-act);
}

.fm-ctform .fm-ctsel__txt{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-ctform .fm-ctsel__flecha{
  flex: 0 0 11px;
  width: 11px;
  height: 7px;
  transition: transform .28s ease;
}

.fm-ctform .fm-ctsel__flecha path{
  stroke: var(--fm-ct-oro);
}

.fm-ctform .fm-ctsel--abierto .fm-ctsel__flecha{
  transform: rotate(180deg);
}

/* --- Panel: cristal ----------------------------------------------------- */

.fm-ctform .fm-ctsel__panel{
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  overflow: auto;
  overscroll-behavior: contain;
  max-height: min(320px, 44vh);
  padding: 6px;
  margin: 0;
  list-style: none;

  background-color: var(--fm-ct-panel-solido);
  border: 1px solid var(--fm-ct-panel-borde);
  border-radius: 0;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .62),
    0 2px 8px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(173, 179, 188, .12);   /* filo de luz superior */

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;

  scrollbar-width: thin;
  scrollbar-color: rgba(173, 179, 188, .2) transparent;
}

/* El cristal solo se activa donde el navegador sabe desenfocar el fondo.
   Donde no, queda el panel sólido de arriba, que se ve bien igual. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .fm-ctform .fm-ctsel__panel{
    background-color: var(--fm-ct-panel-vidrio);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
  }
}

.fm-ctform .fm-ctsel--arriba .fm-ctsel__panel{
  top: auto;
  bottom: calc(100% + 6px);
  transform: translateY(6px);
}

.fm-ctform .fm-ctsel--abierto .fm-ctsel__panel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

.fm-ctform .fm-ctsel__panel::-webkit-scrollbar{
  width: 8px;
}

.fm-ctform .fm-ctsel__panel::-webkit-scrollbar-thumb{
  background-color: rgba(173, 179, 188, .18);
  border-radius: 4px;
}

/* --- Opciones ----------------------------------------------------------- */

.fm-ctform .fm-ctsel__op{
  position: relative;
  display: block;
  padding: clamp(9px, .95vw, 12px) clamp(12px, 1.15vw, 16px);
  border-radius: 2px;
  cursor: pointer;

  font-family: var(--fm-ct-fuente-cuerpo);
  font-size: clamp(13px, 1.04vw, 15px);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fm-ct-cuerpo);

  background-image: linear-gradient(
    90deg,
    rgba(var(--fm-ct-sel-luz), 0) 0%,
    rgba(var(--fm-ct-sel-luz), 0) 45%,
    rgba(var(--fm-ct-sel-luz), 0) 100%
  );
  transition: color .2s ease, background-image .28s ease;
}

/* La barra se apaga hacia la derecha, igual que en la referencia:
   no es un bloque plano. */
.fm-ctform .fm-ctsel__op--activa,
.fm-ctform .fm-ctsel__op[aria-selected="true"]{
  color: var(--fm-ct-titulo);
  background-image: linear-gradient(
    90deg,
    rgba(var(--fm-ct-sel-luz), .20) 0%,
    rgba(var(--fm-ct-sel-luz), .07) 45%,
    rgba(var(--fm-ct-sel-luz), 0) 100%
  );
}

@media (hover: hover){
  .fm-ctform .fm-ctsel__op:hover{
    color: var(--fm-ct-titulo);
    background-image: linear-gradient(
      90deg,
      rgba(var(--fm-ct-sel-luz), .20) 0%,
      rgba(var(--fm-ct-sel-luz), .07) 45%,
      rgba(var(--fm-ct-sel-luz), 0) 100%
    );
  }
}

.fm-ctform .fm-ctsel__op[data-vacia="1"]{
  color: rgba(173, 179, 188, .45);
}

.fm-ctform .ff-el-is-error .fm-ctsel__disp{
  border-color: var(--fm-ct-error);
}

/* --------------------------------------------------------------------------
   8. Checkbox de aviso de privacidad
   -------------------------------------------------------------------------- */

.fm-ctform .ff-el-group.fm-ct-privacidad,
.fm-ctform .ff-el-group:has(.fm-ct-privacidad){
  margin-top: clamp(4px, .8vw, 12px);
}

.fm-ctform .fm-ct-privacidad > .ff-el-input--label:empty,
.fm-ctform .ff-el-group:has(.fm-ct-privacidad) > .ff-el-input--label:empty{
  display: none;
}

.fm-ctform .fm-ct-privacidad .ff-el-form-check,
.fm-ctform .ff-el-group:has(.fm-ct-privacidad) .ff-el-form-check{
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.fm-ctform .ff-el-form-check-label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  cursor: pointer;

  font-family: var(--fm-ct-fuente-cuerpo);
  font-size: clamp(12.5px, 1.04vw, 15px);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fm-ct-cuerpo);
}

.fm-ctform .ff-el-form-check-label a{
  color: var(--fm-ct-oro);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .25s ease;
}

@media (hover: hover){
  .fm-ctform .ff-el-form-check-label a:hover{
    color: var(--fm-ct-titulo);
  }
}

.fm-ctform input.ff-el-form-check-input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  padding: 0;
  cursor: pointer;

  background-color: var(--fm-ct-relleno);
  border: 1px solid var(--fm-ct-borde);
  border-radius: 2px;
  transition: background-color .22s ease, border-color .22s ease;
}

.fm-ctform input.ff-el-form-check-input[type="checkbox"]:hover{
  border-color: rgba(173, 179, 188, .4);
}

.fm-ctform input.ff-el-form-check-input[type="checkbox"]:checked{
  background-color: var(--fm-ct-oro);
  border-color: var(--fm-ct-oro);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.1l2.6 2.6L9 1.3' fill='none' stroke='%2301060C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 8px;
}

.fm-ctform input.ff-el-form-check-input[type="checkbox"]:focus-visible{
  outline: 1px solid var(--fm-ct-borde-act);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   9. Botón de envío
   --------------------------------------------------------------------------
   Colores muestreados del Figma: relleno #272A2D, texto #ADB3BC, 252 x 45.
   border-radius: 0, como todos los botones del sistema.
   La fuente sigue en NORD porque es un elemento de display con tracking
   ancho, no texto de cuerpo. Si Alejandro lo quiere en Red Hat Display,
   cambia --fm-ct-fuente-titulo y ya.
   -------------------------------------------------------------------------- */

.fm-ctform .ff-el-group.ff_submit_btn_wrapper,
.fm-ctform .ff-el-group.ff-el-group-btn{
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: clamp(12px, 2vw, 26px);
}

.fm-ctform .ff-btn-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: clamp(190px, 17.5vw, 252px);
  min-height: clamp(38px, 3.15vw, 45px);

  font-family: var(--fm-ct-fuente-titulo);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;

  color: var(--fm-ct-cuerpo);
  background-color: #272A2D;
  border: 1px solid #272A2D;
  border-radius: 0;
  padding: clamp(11px, 1.05vw, 14px) clamp(24px, 2.6vw, 38px);
  cursor: pointer;
  box-shadow: none;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

@media (hover: hover){
  .fm-ctform .ff-btn-submit:hover{
    background-color: #323639;
    border-color: rgba(173, 179, 188, .28);
    color: var(--fm-ct-titulo);
  }
}

/* Blinda contra reset.css de Hello Elementor: button:hover/:focus -> #C36 */
.fm-ctform .ff-btn-submit:focus{
  background-color: #323639;
  color: var(--fm-ct-titulo);
  outline: none;
}

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

.fm-ctform .ff-btn-submit:disabled,
.fm-ctform .frm-fluent-form.ff-form-loading .ff-btn-submit{
  opacity: .55;
  cursor: wait;
}

/* --------------------------------------------------------------------------
   10. Mensajes de éxito y de error
   -------------------------------------------------------------------------- */

.fm-ctform .ff-message-success{
  margin: 0;
  padding: clamp(24px, 3vw, 38px) clamp(20px, 2.6vw, 34px);
  text-align: center;

  font-family: var(--fm-ct-fuente-cuerpo);
  font-size: clamp(14px, 1.18vw, 17px);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fm-ct-titulo);

  background-color: rgba(155, 134, 89, .07);
  border: 1px solid var(--fm-ct-oro);
  border-radius: var(--fm-ct-radio);
}

.fm-ctform .ff-el-is-error .ff-el-form-control,
.fm-ctform .ff-el-form-control.ff-el-is-error{
  border-color: var(--fm-ct-error);
}

.fm-ctform .error,
.fm-ctform .text-danger,
.fm-ctform .ff-el-form-check-error{
  display: block;
  margin-top: 7px;
  font-family: var(--fm-ct-fuente-cuerpo);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fm-ct-error-txt);
}

.fm-ctform .ff-errors-in-stack{
  margin: 0;
  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--fm-ct-error);
  border-radius: var(--fm-ct-radio);
  background-color: rgba(196, 87, 79, .08);
}

/* --------------------------------------------------------------------------
   11. Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1199px){
  .fm-ctform::before{
    background-image:
      linear-gradient(
        to bottom,
        transparent calc(100% - var(--fm-ct-fade)),
        var(--fm-ct-fondo) 100%
      ),
      image-set(
        url("../img/fm-contratacion-fondo-1200.webp") type("image/webp"),
        url("../img/fm-contratacion-fondo-1200.jpg")  type("image/jpeg")
      );
  }
}

@media (max-width: 991px){
  .fm-ctform{
    --fm-ct-ancho: 720px;
  }

  .fm-ctform::before{
    background-image:
      linear-gradient(
        to bottom,
        transparent calc(100% - var(--fm-ct-fade)),
        var(--fm-ct-fondo) 100%
      ),
      image-set(
        url("../img/fm-contratacion-fondo-992.webp") type("image/webp"),
        url("../img/fm-contratacion-fondo-992.jpg")  type("image/jpeg")
      );
  }
}

@media (max-width: 767px){
  .fm-ctform{
    --fm-ct-ancho: 520px;

    /* Mobile: el párrafo se justifica, como el frame del Figma. */
    --fm-ct-intro-align: justify;

    /* El clamp de desktop tocaba fondo en 15px, y con la caja completa
       salían líneas de más de 50 caracteres. Se sube el piso y la medida
       pasa a 34ch, que es lo que mide la línea en el frame de mobile. */
    --fm-ct-intro-tam:    clamp(15px, 4.1vw, 17px);
    --fm-ct-intro-medida: 34ch;
  }

  /* Mobile: TU baja con EVENTO a la tercera línea. */
  .fm-ctform__titulo .fm-ctform__salto--mov{
    display: inline;
  }

  .fm-ctform__titulo .fm-ctform__salto--desk{
    display: none;
  }
  
  .fm-ctform__titulo{
    font-size: 30px;
  }

  .elementor .fm-ctform{
    padding-block: clamp(56px, 13vw, 82px) clamp(70px, 15vw, 100px);
  }

  .fm-ctform::before{
    background-image:
      linear-gradient(
        to bottom,
        transparent calc(100% - var(--fm-ct-fade)),
        var(--fm-ct-fondo) 100%
      ),
      image-set(
        url("../img/fm-contratacion-fondo-mov-768.webp") type("image/webp"),
        url("../img/fm-contratacion-fondo-mov-768.jpg")  type("image/jpeg")
      );
  }

  .fm-ctform .ff-el-group.fm-ct-mitad,
  .fm-ctform .ff-el-group:has(.fm-ct-mitad){
    grid-column: 1 / -1;
  }

  .fm-ctform__cab{
    margin-bottom: clamp(32px, 8vw, 48px);
  }

  /* Los 120px fijos de desktop dejaban un vacío enorme entre el párrafo y
     el primer campo. Bórralo si prefieres conservar el valor de desktop. */
  .fm-ctform__intro{
    margin-block: clamp(38px, 9vw, 64px);
  }
}

/* En pantallas estrechas el tracking de .30em empuja las líneas del título
   fuera del contenedor. Se afloja de forma escalonada. */
@media (max-width: 560px){
  .fm-ctform__titulo{
    letter-spacing: .22em;
    text-indent: .22em;
    line-height: 1.3;
  }

  .fm-ctform::before{
    background-image:
      linear-gradient(
        to bottom,
        transparent calc(100% - var(--fm-ct-fade)),
        var(--fm-ct-fondo) 100%
      ),
      image-set(
        url("../img/fm-contratacion-fondo-mov-560.webp") type("image/webp"),
        url("../img/fm-contratacion-fondo-mov-560.jpg")  type("image/jpeg")
      );
  }

  .fm-ctform .ff-btn-submit{
    letter-spacing: .28em;
    text-indent: .28em;
    min-width: min(100%, 240px);
  }
}

@media (max-width: 400px){
  .fm-ctform{
    --fm-ct-gutter: 32px;
  }

  .fm-ctform__titulo{
    letter-spacing: .16em;
    text-indent: .16em;
    font-size: clamp(24px, 7.2vw, 30px);
  }

  .fm-ctform::before{
    background-image:
      linear-gradient(
        to bottom,
        transparent calc(100% - var(--fm-ct-fade)),
        var(--fm-ct-fondo) 100%
      ),
      image-set(
        url("../img/fm-contratacion-fondo-mov-400.webp") type("image/webp"),
        url("../img/fm-contratacion-fondo-mov-400.jpg")  type("image/jpeg")
      );
  }
}

/* --------------------------------------------------------------------------
   12. Movimiento reducido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .fm-ctform *,
  .fm-ctform *::before,
  .fm-ctform *::after{
    transition-duration: .01ms;
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }
}