/* ============================================================
   Gravity Forms — capa de marca "Arma tu jugada"
   Hace que el formulario de Gravity Forms se vea idéntico al
   formulario estático de Activa (.quote-form).

   En la página del shell desactivamos el CSS del tema de GF
   (filtro gform_disable_form_theme_css → ver enqueue_assets en el
   plugin), así que el tema "Orbital" NO aporta layout ni colores:
   aquí reconstruimos toda la maqueta (grid de 2 columnas, inputs,
   selects, botón, validación) usando los tokens de :root de
   styles.css, que se encola antes que este archivo.

   Ámbito: dentro de la tarjeta del formulario (.section--form).
   El bloque de variables --gf-* y los !important son una red de
   seguridad por si el tema de GF llegara a cargarse igualmente.
   ============================================================ */

/* ---- Red de seguridad: si el tema Orbital se cargara, redirige sus
   variables a la paleta de marca. Inofensivo cuando el tema está off. ---- */
.section--form .gform-theme--orbital,
.section--form .gform_wrapper {
  --gf-color-primary: var(--primary);
  --gf-color-primary-rgb: 222, 0, 58;
  --gf-color-primary-contrast: var(--text);
  --gf-color-primary-darker: #c1002f;
  --gf-color-primary-darkest: #c1002f;
  --gf-color-ctrl: var(--text);
  --gf-color-ctrl-bg: var(--card-bg);
  --gf-color-ctrl-border: var(--input-border);
  --gf-color-ctrl-label: var(--text);
  --gf-radius: var(--radius);
}

/* ---- Reset del wrapper y tipografía base ---- */
.section--form .jgsps-gf,
.section--form .gform_wrapper {
  margin: 0;
}
.section--form .gform_wrapper,
.section--form .gform_wrapper * {
  font-family: var(--font-body);
  box-sizing: border-box;
}
.section--form .gform_wrapper form,
.section--form .gform_wrapper .gform-body,
.section--form .gform_wrapper .gform_body {
  margin: 0;
  padding: 0;
}

/* GF añade una leyenda y un encabezado: la tarjeta ya tiene su propio
   título/subtítulo, así que los ocultamos. También el honeypot/anti-spam,
   que sin el CSS del tema quedaría visible. */
.section--form .gform_wrapper .gform_required_legend,
.section--form .gform_wrapper .gform_heading,
.section--form .gform_wrapper .gform_validation_container,
.section--form .gform_wrapper .gfield--type-honeypot,
.section--form .gform_wrapper .gfield_visibility_hidden {
  display: none !important;
}

/* Indicador de requerido → UN solo asterisco de marca.
   DOM real de GF (verificado):
     <label class="gfield_label"> Texto
       <span class="gfield_required">
         <span class="gfield_required gfield_required_text">(Required)</span>
       </span>
     </label>
   Hay DOS elementos con clase .gfield_required (el externo y el interno
   .gfield_required_text). Antes salía doble porque nuestro ::after se disparaba
   en AMBOS. Solución: (1) ocultar el texto interno "(Required)" de GF, y
   (2) pintar el "*" SOLO en el .gfield_required externo, que es el único hijo
   directo del <label> (combinador ">"); el interno es nieto, así que no lo
   toca. El texto "(Required)" queda en el DOM (display:none) — el lector de
   pantalla ya anuncia el campo por aria-required="true" del input. */
.section--form .gform_wrapper .gfield_required_text {
  display: none !important;
}
.section--form .gform_wrapper .gfield_label > .gfield_required::after,
.section--form .gform_wrapper legend.gfield_label > .gfield_required::after {
  content: "*";
  margin-left: 4px;
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
}

/* ============================================================
   Grid de campos — replica el .row (g-3 → 30px/28px) del estático.
   Con el tema de GF desactivado no hay grid propio, así que lo
   construimos: 2 columnas; las medias (.gfield--width-half) ocupan
   una, las completas (.gfield--width-full) ocupan ambas.
   ============================================================ */
.section--form .gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section--form .gform_wrapper .gfield {
  grid-column: 1 / -1; /* por defecto, ancho completo */
  min-width: 0;        /* permite encoger dentro del grid */
  margin: 0;
  padding: 0;
}
.section--form .gform_wrapper .gfield--width-half {
  grid-column: span 1;
}
.section--form .gform_wrapper .gfield--width-full {
  grid-column: 1 / -1;
}
.section--form .gform_wrapper .ginput_container {
  margin: 0;
}

/* En móvil, una sola columna (igual que col-12 bajo el breakpoint sm). */
@media (max-width: 575.98px) {
  .section--form .gform_wrapper .gform_fields {
    grid-template-columns: 1fr;
  }
  .section--form .gform_wrapper .gfield--width-half,
  .section--form .gform_wrapper .gfield--width-full {
    grid-column: 1 / -1;
  }
}

/* ---- Etiquetas → como .quote-form .form-label ---- */
.section--form .gform_wrapper .gfield_label,
.section--form .gform_wrapper .gform-field-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 13px;
}

/* ---- Inputs, selects y textarea → como .form-control / .form-select ----
   NOTA (raíz de las desalineaciones): aunque desactivamos el tema Orbital de
   GF, GF sigue encolando su CSS "basic" (estructural), que carga DESPUÉS de
   este archivo y pisaba nuestras medidas (alto/padding/ancho del botón y la
   alineación vertical del texto de los selects). Por eso la geometría y la
   tipografía van con !important: así ganamos siempre, sin importar el orden de
   carga. line-height: 1.5 replica el de Bootstrap (.form-control/.form-select)
   para que el texto del select quede a la misma altura que el de los inputs. */
.section--form .gform_wrapper input[type="text"],
.section--form .gform_wrapper input[type="email"],
.section--form .gform_wrapper input[type="tel"],
.section--form .gform_wrapper input[type="number"],
.section--form .gform_wrapper input[type="password"],
.section--form .gform_wrapper select,
.section--form .gform_wrapper .gfield_select,
.section--form .gform_wrapper textarea {
  display: block !important;
  width: 100% !important;
  min-height: 53px !important;
  padding: 0 16px !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}
.section--form .gform_wrapper textarea {
  min-height: 120px !important;
  padding: 14px 16px !important;
}
.section--form .gform_wrapper input::placeholder,
.section--form .gform_wrapper textarea::placeholder {
  color: rgba(254, 254, 254, 0.45);
  opacity: 1;
}

/* ---- Select: sin apariencia nativa; el chevron se dibuja igual que en el
   formulario estático (mismo asset chevron.svg, rotado 180°, 13×9, a 20px de
   la derecha) con un ::after en el contenedor del select. ---- */
.section--form .gform_wrapper select,
.section--form .gform_wrapper .gfield_select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  height: auto !important;        /* sobreescribe el alto fijo del basic.css de GF;
                                     el alto lo marca min-height:53px (regla base),
                                     igual que el select estático. */
  padding-top: 12px !important;   /* Chrome alinea ARRIBA el texto del <select> con
                                     appearance:none; estos 12px lo bajan al centro
                                     vertical, igualando el formulario estático.
                                     (left:16px y bottom:0 vienen de la regla base; el
                                     derecho lo fija padding-right para el chevron.) */
  padding-right: 46px !important;
  background-image: none !important;
  color: var(--text) !important;
  font-weight: 400 !important;
  text-indent: 0 !important;
  vertical-align: middle !important;
}
/* Texto tenue con el placeholder, sólido al elegir (replica el .has-value
   del estático, sin depender de JS). */
.section--form .gform_wrapper select:has(option[value=""]:checked),
.section--form .gform_wrapper .gfield_select:has(option[value=""]:checked) {
  color: rgba(254, 254, 254, 0.64) !important;
  font-weight: 500 !important;
}
.section--form .gform_wrapper select option {
  color: #14091f;
}
.section--form .gform_wrapper .gfield--type-select .ginput_container,
.section--form .gform_wrapper .ginput_container_select {
  position: relative;
}
.section--form .gform_wrapper .gfield--type-select .ginput_container::after,
.section--form .gform_wrapper .ginput_container_select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 13px;
  height: 9px;
  transform: translateY(-50%) rotate(180deg);
  background-image: url("../assets/chevron.svg");
  background-repeat: no-repeat;
  background-size: 13px 9px;
  pointer-events: none;
}

/* ---- Foco → mismo halo lila que .form-control:focus ---- */
.section--form .gform_wrapper input:focus,
.section--form .gform_wrapper select:focus,
.section--form .gform_wrapper .gfield_select:focus,
.section--form .gform_wrapper textarea:focus {
  outline: none;
  background: var(--card-bg) !important;
  border-color: var(--eyebrow) !important;
  box-shadow: 0 0 0 2px rgba(124, 54, 194, 0.25) !important;
  color: var(--text) !important;
}

/* ---- Consentimiento / Política de Privacidad (campo Checkbox de GF) ----
   Replica el .form-consent del formulario estático: casilla crimson
   obligatoria + etiqueta y enlace de privacidad. labelPlacement=hidden_label
   oculta el título del campo; se usa solo la etiqueta del choice. El enlace
   va en la descripción (el texto del choice se escapa). */
.section--form .gform_wrapper .gfield--type-checkbox {
  margin: 0 !important;
}
.section--form .gform_wrapper .gfield--type-checkbox > .gfield_label {
  display: none !important;
}
.section--form .gform_wrapper .gfield--type-checkbox .gfield_checkbox,
.section--form .gform_wrapper .gfield--type-checkbox .gchoice {
  margin: 0 !important;
  padding: 0 !important;
}
.section--form .gform_wrapper .gfield--type-checkbox .gchoice {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}
.section--form .gform_wrapper .gfield--type-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 !important;
  accent-color: var(--primary);
  cursor: pointer;
}
.section--form .gform_wrapper .gfield--type-checkbox .gchoice label {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--text) !important;
  cursor: pointer;
}
.section--form .gform_wrapper .gfield--type-checkbox .gfield_description {
  padding: 0 !important;
  margin: 6px 0 0 !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--text) !important;
}
.section--form .gform_wrapper .gfield--type-checkbox .gfield_description a {
  color: var(--text) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.18s ease;
}
.section--form .gform_wrapper .gfield--type-checkbox .gfield_description a:hover,
.section--form .gform_wrapper .gfield--type-checkbox .gfield_description a:focus-visible {
  color: var(--primary) !important;
}

/* ============================================================
   Botón de envío → como .btn .btn-crimson .form-submit
   El plugin convierte el <input> de GF en un <button> con la flecha de
   marca dentro (ver customize_gf_submit_button), así que texto y flecha
   se centran juntos como grupo, con 10px de separación. Se incluyen los
   selectores de <input> como respaldo por si el filtro no actuara.
   ============================================================ */
.section--form .gform_wrapper .gform-footer,
.section--form .gform_wrapper .gform_footer {
  margin: 24px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.section--form .gform_wrapper .gform_button,
.section--form .gform_wrapper .gform-footer button[type="submit"],
.section--form .gform_wrapper .gform_footer button[type="submit"],
.section--form .gform_wrapper .gform-footer input[type="submit"],
.section--form .gform_wrapper .gform_footer input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 57px !important;
  height: auto !important;
  padding: 0 26px !important;
  margin: 0 !important;
  border: 0.5px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: var(--radius) !important;
  background: var(--primary) !important;
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.section--form .gform_wrapper .gform_button:hover,
.section--form .gform_wrapper .gform-footer button[type="submit"]:hover,
.section--form .gform_wrapper .gform_footer button[type="submit"]:hover,
.section--form .gform_wrapper .gform-footer input[type="submit"]:hover,
.section--form .gform_wrapper .gform_footer input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px -8px var(--primary-glow) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
}
.section--form .gform_wrapper .gform_button .btn-arrow__icon {
  width: 20px;
  height: 13px;
  display: block;
  flex: 0 0 auto;
  transition: transform 0.18s ease !important;
}
.section--form .gform_wrapper .gform_button:hover .btn-arrow__icon,
.section--form .gform_wrapper .gform_button:focus-visible .btn-arrow__icon {
  transform: translateX(4px) !important;
}
.section--form .gform_wrapper .gform_button:focus-visible,
.section--form .gform_wrapper .gform_footer button[type="submit"]:focus-visible,
.section--form .gform_wrapper .gform_footer input[type="submit"]:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px -8px var(--primary-glow) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  outline: 2px solid var(--accent-lilac);
  outline-offset: 2px;
}

/* Spinner AJAX de GF: centrado junto al botón, sin romper el layout. */
.section--form .gform_wrapper .gform_ajax_spinner {
  margin: 0 0 0 12px;
  vertical-align: middle;
}

/* ============================================================
   Validación y confirmación
   ============================================================ */
/* Mensajes por campo */
.section--form .gform_wrapper .gfield_description.validation_message,
.section--form .gform_wrapper .gfield_validation_message {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 14px;
}
.section--form .gform_wrapper .gfield_error input,
.section--form .gform_wrapper .gfield_error select,
.section--form .gform_wrapper .gfield_error .gfield_select,
.section--form .gform_wrapper .gfield_error textarea {
  border-color: var(--primary) !important;
}
.section--form .gform_wrapper .gfield_error .gfield_label {
  color: var(--text);
}

/* Resumen de errores arriba del formulario */
.section--form .gform_wrapper .gform_validation_errors {
  margin: 0 0 24px;
  padding: 16px 20px;
  border: 1px solid rgba(222, 0, 58, 0.4);
  border-radius: var(--radius);
  background: rgba(222, 0, 58, 0.08);
  box-shadow: none;
  color: var(--text);
}
.section--form .gform_wrapper .gform_validation_errors h2,
.section--form .gform_wrapper .gform_validation_errors .gform_submission_error {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
}
.section--form .gform_wrapper .gform_validation_errors a {
  color: var(--accent-lilac);
}

/* Mensaje de confirmación tras enviar (también dispara el confetti) */
.section--form .gform_confirmation_wrapper,
.section--form .gform_confirmation_message {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}