/**
 * GSS Gravity Forms — Estilos reutilizables
 * ─────────────────────────────────────────────────────────────
 * Cómo aplicarlo:
 *   1. En el admin de Gravity Forms, edita el formulario que quieras estilar.
 *   2. Ve a "Configuración del formulario" (Form Settings).
 *   3. En el campo "CSS Class Name" añade: gss-gform
 *      (Si el formulario ya tiene otras clases, sepáralas con espacios.)
 *   4. Guarda. Gravity Forms aplicará la clase al .gform_wrapper.
 *
 * Layout:
 *   - 2 columnas en desktop para campos cortos (Nombre, Email, etc.)
 *   - 1 columna automática para textarea, radios, checkboxes, consent
 *   - 1 columna en móvil (<= 720px)
 *   - Para forzar un campo a 1 columna entera, añade gss-gform__full
 *     a la "CSS Class Name" del campo en concreto.
 *
 * Reglas internas:
 *   - Todo está namespaced bajo .gss-gform (no contamina otros forms).
 *   - !important se usa donde Gravity Forms aplica selectores con
 *     especificidad muy alta (inputs, selects, botón submit, grid).
 *   - Soporta tanto markup legacy (<li class="gfield">) como moderno
 *     (<div class="gfield">) — ambos usan las mismas clases base.
 * ─────────────────────────────────────────────────────────────
 */

/* =============================================================
   ROOT — Variables locales y reset
   ============================================================= */
.gss-gform {
  /* Marca */
  --gss-neon: #5078FF;
  --gss-dark: #041438;
  --gss-aqua: #00FFD7;
  --gss-sky:  #50DCFF;
  --gss-silver: #D2DCDC;
  --gss-gray: #787882;
  --gss-white: #FFFFFF;

  /* Sistema de campo unificado — TODOS los inputs comparten estos valores */
  --gf-field-height: 48px;
  --gf-field-radius: 10px;
  --gf-field-border: 1px solid #E2E6EF;
  --gf-field-border-hover: 1px solid #C7CFE0;
  --gf-field-border-focus: 1px solid var(--gss-neon);
  --gf-field-bg: var(--gss-white);
  --gf-field-padding-x: 16px;
  --gf-field-padding-y: 12px;
  --gf-field-font-size: 15px;
  --gf-field-color: var(--gss-dark);
  --gf-placeholder-color: #9AA0AE;
  --gf-focus-ring: 0 0 0 3px rgba(80, 120, 255, 0.16);
  --gf-error: #E5484D;
  --gf-error-ring: 0 0 0 3px rgba(229, 72, 77, 0.15);

  /* Espaciado vertical entre campos */
  --gf-field-gap: 16px;

  font-family: 'Poppins', sans-serif;
  color: var(--gss-dark);
  box-sizing: border-box;
}

.gss-gform *,
.gss-gform *::before,
.gss-gform *::after {
  box-sizing: border-box;
}

/* =============================================================
   LAYOUT — Grid de 2 columnas, full-width automático para campos largos
   ============================================================= */
.gss-gform .gform_fields,
.gss-gform ul.gform_fields {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--gf-field-gap) 16px !important;
  width: 100% !important;
}

/* Por defecto cada campo ocupa 1 columna */
.gss-gform .gfield {
  grid-column: span 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: 100% !important;
  width: auto !important;
}

/* Campos que SIEMPRE ocupan las 2 columnas (full-width) */
.gss-gform .gfield.gfield_html,
.gss-gform .gfield.gfield_consent,
.gss-gform .gfield.gss-gform__full,
.gss-gform .gfield:has(.ginput_container_radio),
.gss-gform .gfield:has(.ginput_container_checkbox),
.gss-gform .gfield:has(textarea),
.gss-gform .gfield:has(.gfield_consent_label),
.gss-gform .gfield:has(fieldset) {
  grid-column: 1 / -1 !important;
}

/* Mobile: todo a 1 columna */
@media (max-width: 720px) {
  .gss-gform .gform_fields,
  .gss-gform ul.gform_fields {
    grid-template-columns: 1fr !important;
  }
  .gss-gform .gfield {
    grid-column: 1 !important;
  }
}

/* =============================================================
   LABELS — Etiqueta de campo y asterisco de obligatorio
   ============================================================= */
.gss-gform .gfield_label,
.gss-gform legend.gfield_label {
  display: block;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--gss-dark) !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  letter-spacing: 0.1px;
  font-style: normal !important;
}

/* Asterisco de obligatorio en Neon Blue (gana a la regla por defecto roja) */
.gss-gform .gfield_required,
.gss-gform .gfield_required_text,
.gss-gform .gfield_required_asterisk,
.gss-gform .gfield_label .gfield_required {
  color: var(--gss-neon) !important;
  margin-left: 4px !important;
  font-weight: 600 !important;
  font-size: inherit !important;
}

/* Descripción opcional bajo la label */
.gss-gform .gfield_description {
  font-size: 12px !important;
  color: var(--gss-gray) !important;
  margin-top: 6px !important;
  line-height: 1.4;
  padding: 0 !important;
  font-style: normal !important;
}

/* =============================================================
   INPUTS — Todos los tipos comparten la misma caja
   ============================================================= */
.gss-gform input[type="text"],
.gss-gform input[type="email"],
.gss-gform input[type="tel"],
.gss-gform input[type="url"],
.gss-gform input[type="number"],
.gss-gform input[type="password"],
.gss-gform input[type="search"],
.gss-gform input[type="date"],
.gss-gform input[type="datetime-local"],
.gss-gform input[type="time"],
.gss-gform select,
.gss-gform textarea {
  width: 100% !important;
  height: var(--gf-field-height) !important;
  min-height: var(--gf-field-height) !important;
  max-width: 100% !important;
  padding: var(--gf-field-padding-y) var(--gf-field-padding-x) !important;
  margin: 0 !important;
  border: var(--gf-field-border) !important;
  border-radius: var(--gf-field-radius) !important;
  background: var(--gf-field-bg) !important;
  background-color: var(--gf-field-bg) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: var(--gf-field-font-size) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  color: var(--gf-field-color) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Textarea: altura libre */
.gss-gform textarea {
  height: auto !important;
  min-height: 80px !important;
  padding-top: 14px !important;
  resize: vertical;
}

/* Placeholders: gris suave, sin cursiva */
.gss-gform input::placeholder,
.gss-gform textarea::placeholder {
  color: var(--gf-placeholder-color) !important;
  opacity: 1 !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-family: 'Poppins', sans-serif !important;
}

.gss-gform input::-webkit-input-placeholder,
.gss-gform textarea::-webkit-input-placeholder {
  color: var(--gf-placeholder-color) !important;
  font-style: normal !important;
}

.gss-gform input::-moz-placeholder,
.gss-gform textarea::-moz-placeholder {
  color: var(--gf-placeholder-color) !important;
  font-style: normal !important;
  opacity: 1 !important;
}

/* Hover */
.gss-gform input[type="text"]:hover,
.gss-gform input[type="email"]:hover,
.gss-gform input[type="tel"]:hover,
.gss-gform input[type="url"]:hover,
.gss-gform input[type="number"]:hover,
.gss-gform input[type="password"]:hover,
.gss-gform input[type="search"]:hover,
.gss-gform select:hover,
.gss-gform textarea:hover {
  border: var(--gf-field-border-hover) !important;
}

/* Focus — anillo Neon Blue */
.gss-gform input[type="text"]:focus,
.gss-gform input[type="email"]:focus,
.gss-gform input[type="tel"]:focus,
.gss-gform input[type="url"]:focus,
.gss-gform input[type="number"]:focus,
.gss-gform input[type="password"]:focus,
.gss-gform input[type="search"]:focus,
.gss-gform input[type="date"]:focus,
.gss-gform select:focus,
.gss-gform textarea:focus {
  border: var(--gf-field-border-focus) !important;
  box-shadow: var(--gf-focus-ring) !important;
  background-color: var(--gss-white) !important;
}

/* Autofill (Chrome/Safari) */
.gss-gform input:-webkit-autofill,
.gss-gform input:-webkit-autofill:hover,
.gss-gform input:-webkit-autofill:focus,
.gss-gform textarea:-webkit-autofill,
.gss-gform select:-webkit-autofill {
  -webkit-text-fill-color: var(--gss-dark) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--gss-white) inset !important;
  caret-color: var(--gss-dark);
  font-family: 'Poppins', sans-serif !important;
}

/* =============================================================
   SELECT — Mismo aspecto que los inputs, flecha custom Neon Blue
   ============================================================= */
.gss-gform select {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%228%22%20viewBox%3D%220%200%2014%208%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1%201L7%207L13%201%22%20stroke%3D%22%235078FF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 14px 8px !important;
  padding-right: 44px !important;
  cursor: pointer;
  -ms-expand: none;
}

.gss-gform select::-ms-expand {
  display: none;
}

/* ──────────────────────────────────────────────────────────────────
   Matar la flecha duplicada del wrapper del select.
   ──────────────────────────────────────────────────────────────────
   Gravity Forms (tema Orbital, gravity-theme) y algunos plugins de
   accesibilidad añaden su propia flecha al contenedor del select
   mediante ::before o ::after sobre .ginput_container_select. Como
   nosotros ya pintamos nuestra propia flecha SVG en el background del
   select (Neon Blue, on-brand), ese pseudo elemento extra produce
   una flecha duplicada visible. Lo ocultamos.
   ────────────────────────────────────────────────────────────────── */
.gss-gform .ginput_container_select::before,
.gss-gform .ginput_container_select::after,
.gss-gform .gfield_select::before,
.gss-gform .gfield_select::after,
.gss-gform .gfield--type-select::before,
.gss-gform .gfield--type-select::after,
.gss-gform .gfield:has(select)::before,
.gss-gform .gfield:has(select)::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Placeholder state: opción vacía seleccionada → texto gris */
.gss-gform select:has(option[value=""]:checked),
.gss-gform select.gss-placeholder {
  color: var(--gf-placeholder-color) !important;
}

/* Estilos de <option> — fallback para el caso (improbable) de que el
   JS no se ejecute y el <select> nativo se quede visible. En condiciones
   normales, GssSelect (ver gss-gform.js) lo oculta y muestra un combo
   custom 100% branded en su lugar. Estas reglas son por si el JS falla. */
.gss-gform select option {
  padding: 8px 12px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--gss-dark) !important;
  background-color: var(--gss-white) !important;
  min-height: 32px;
}

.gss-gform select option[value=""] {
  color: var(--gf-placeholder-color) !important;
  font-style: normal !important;
}

.gss-gform select option:checked {
  background: var(--gss-neon) linear-gradient(0deg, var(--gss-neon), var(--gss-neon)) !important;
  background-color: var(--gss-neon) !important;
  color: var(--gss-white) !important;
  font-weight: 500 !important;
}

.gss-gform select option:disabled {
  color: var(--gf-placeholder-color) !important;
  background-color: #F4F6F8 !important;
}

.gss-gform select:hover {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%228%22%20viewBox%3D%220%200%2014%208%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1%201L7%207L13%201%22%20stroke%3D%22%23041438%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important;
}

/* =============================================================
   RADIO BUTTONS — Tarjetas clickables (sin círculo, estilo "card")
   3 cols desktop / 2 tablet / 1 mobile
   ============================================================= */
.gss-gform .gfield_radio,
.gss-gform ul.gfield_radio {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

@media (max-width: 900px) {
  .gss-gform .gfield_radio,
  .gss-gform ul.gfield_radio {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 520px) {
  .gss-gform .gfield_radio,
  .gss-gform ul.gfield_radio {
    grid-template-columns: 1fr !important;
  }
}

.gss-gform .gfield_radio .gchoice {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Ocultar input nativo */
.gss-gform .gfield_radio input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
}

/* Label = tarjeta clickable */
.gss-gform .gfield_radio label {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  min-height: 52px;
  padding: 12px 16px !important;
  border: 1px solid #E2E6EF !important;
  border-radius: var(--gf-field-radius) !important;
  background: var(--gss-white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--gss-dark) !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  text-align: left;
  margin: 0 !important;
  width: 100%;
}

.gss-gform .gfield_radio label:hover {
  border-color: var(--gss-neon) !important;
  background: #F7F9FF !important;
  transform: translateY(-1px);
}

.gss-gform .gfield_radio input[type="radio"]:checked + label {
  border-color: var(--gss-neon) !important;
  background: #EEF2FF !important;
  box-shadow: var(--gf-focus-ring) !important;
  color: var(--gss-dark) !important;
  font-weight: 600 !important;
}

.gss-gform .gfield_radio input[type="radio"]:focus-visible + label {
  outline: 3px solid var(--gss-neon);
  outline-offset: 2px;
}

/* =============================================================
   CHECKBOX — Consentimiento y checkboxes en general
   ============================================================= */
.gss-gform .gfield_consent,
.gss-gform .ginput_container_checkbox {
  margin-top: 4px;
}

.gss-gform .gfield_consent input[type="checkbox"],
.gss-gform .gfield_checkbox input[type="checkbox"],
.gss-gform .ginput_container_checkbox input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  margin: 2px 10px 0 0 !important;
  border: 2px solid #C7CFE0 !important;
  border-radius: 5px !important;
  background-color: var(--gss-white) !important;
  background-image: none !important;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: top;
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  padding: 0 !important;
  box-shadow: none !important;
  /* Suprimir cualquier content: "✓" que GF tema Orbital pueda inyectar */
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px;
}

/* Matar todo pseudoelemento que GF, Impreza o cualquier plugin pueda
   añadir al checkbox. Sin esto, salen checks duplicados (uno nuestro,
   uno del plugin). */
.gss-gform .gfield_consent input[type="checkbox"]::before,
.gss-gform .gfield_consent input[type="checkbox"]::after,
.gss-gform .gfield_checkbox input[type="checkbox"]::before,
.gss-gform .gfield_checkbox input[type="checkbox"]::after,
.gss-gform .ginput_container_checkbox input[type="checkbox"]::before,
.gss-gform .ginput_container_checkbox input[type="checkbox"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

.gss-gform .gfield_consent input[type="checkbox"]:hover,
.gss-gform .gfield_checkbox input[type="checkbox"]:hover,
.gss-gform .ginput_container_checkbox input[type="checkbox"]:hover {
  border-color: var(--gss-neon) !important;
}

/* Check blanco vía background-image SVG — funciona en TODOS los
   navegadores (a diferencia de ::after sobre <input>, que es flaky
   porque <input> es void element). El SVG es un path simple en stroke
   blanco que no puede ser pintado de otro color por CSS externo. */
.gss-gform .gfield_consent input[type="checkbox"]:checked,
.gss-gform .gfield_checkbox input[type="checkbox"]:checked,
.gss-gform .ginput_container_checkbox input[type="checkbox"]:checked {
  background-color: var(--gss-neon) !important;
  border-color: var(--gss-neon) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'><path d='M1 5L4.5 8.5L11 1' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 11px 9px !important;
}

.gss-gform .gfield_consent input[type="checkbox"]:focus-visible,
.gss-gform .gfield_checkbox input[type="checkbox"]:focus-visible,
.gss-gform .ginput_container_checkbox input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--gss-neon);
  outline-offset: 2px;
}

/* Label de consentimiento */
.gss-gform .gfield_consent_label,
.gss-gform .gfield_consent .gfield_label,
.gss-gform .ginput_container_consent label {
  display: inline-block;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.5 !important;
  color: var(--gss-gray) !important;
  cursor: pointer;
  margin: 0 !important;
}

.gss-gform .gfield_consent_label a,
.gss-gform .gfield_consent a,
.gss-gform .ginput_container_consent a {
  color: var(--gss-neon) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gss-gform .gfield_consent_label a:hover,
.gss-gform .gfield_consent a:hover,
.gss-gform .ginput_container_consent a:hover {
  color: var(--gss-dark) !important;
}

.gss-gform .ginput_container_consent {
  display: flex !important;
  align-items: flex-start;
  gap: 4px;
}

/* =============================================================
   SUBMIT BUTTON — CTA Neon Blue, pill, sombra suave
   ============================================================= */
.gss-gform .gform_footer,
.gss-gform .gform-footer {
  margin-top: 24px !important;
  padding: 0 !important;
  text-align: left !important;
  display: block !important;
}

.gss-gform .gform_button,
.gss-gform input[type="submit"].gform_button,
.gss-gform button.gform_button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 36px !important;
  background: var(--gss-neon) !important;
  background-color: var(--gss-neon) !important;
  background-image: none !important;
  color: var(--gss-white) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  text-align: center !important;
  border: none !important;
  border-radius: 100px !important;
  box-shadow: 0 4px 16px rgba(80, 120, 255, 0.25) !important;
  cursor: pointer !important;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  text-decoration: none !important;
  width: 100% !important;
  height: auto !important;
  line-height: 1 !important;
}

.gss-gform .gform_button:hover,
.gss-gform input[type="submit"].gform_button:hover,
.gss-gform button.gform_button:hover {
  background: #3D64E6 !important;
  background-color: #3D64E6 !important;
  box-shadow: 0 8px 24px rgba(80, 120, 255, 0.4), 0 0 0 1px rgba(0, 255, 215, 0.3) !important;
  transform: translateY(-1px);
}

.gss-gform .gform_button:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(80, 120, 255, 0.3) !important;
}

.gss-gform .gform_button:focus-visible {
  outline: 3px solid var(--gss-aqua);
  outline-offset: 3px;
}

.gss-gform .gform_button[disabled],
.gss-gform .gform_button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 520px) {
  /* (sin overrides — el submit ya es width:100% en cualquier viewport) */
}

/* AJAX spinner */
.gss-gform .gform_ajax_spinner {
  margin-left: 12px;
  vertical-align: middle;
}

/* =============================================================
   VALIDATION / ERRORS
   ============================================================= */
.gss-gform .gfield_error input[type="text"],
.gss-gform .gfield_error input[type="email"],
.gss-gform .gfield_error input[type="tel"],
.gss-gform .gfield_error input[type="number"],
.gss-gform .gfield_error input[type="url"],
.gss-gform .gfield_error select,
.gss-gform .gfield_error textarea {
  border-color: var(--gf-error) !important;
  box-shadow: var(--gf-error-ring) !important;
  background-color: #FFF5F5 !important;
}

.gss-gform .gfield_validation_message,
.gss-gform .validation_message,
.gss-gform .gfield_error .gfield_description.validation_message {
  display: block;
  margin-top: 8px !important;
  padding: 8px 12px !important;
  background: #FEE7E8 !important;
  border: 1px solid #FBC8CA !important;
  border-radius: 8px !important;
  color: var(--gf-error) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  font-style: normal !important;
}

.gss-gform .gform_validation_errors,
.gss-gform .validation_error {
  margin: 0 0 20px 0 !important;
  padding: 14px 18px !important;
  background: #FEE7E8 !important;
  border: 1px solid #FBC8CA !important;
  border-radius: var(--gf-field-radius) !important;
  color: var(--gf-error) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  grid-column: 1 / -1 !important;
}

.gss-gform .gform_validation_errors .gform_submission_error,
.gss-gform .gform_validation_errors h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gf-error) !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
}

/* =============================================================
   CONFIRMATION MESSAGE
   ============================================================= */
.gss-gform .gform_confirmation_message,
.gform_confirmation_wrapper.gss-gform .gform_confirmation_message {
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(80, 120, 255, 0.06) 0%, rgba(0, 255, 215, 0.06) 100%);
  border: 1px solid rgba(80, 120, 255, 0.2);
  border-radius: var(--gf-field-radius);
  color: var(--gss-dark);
  font-size: 15px;
  line-height: 1.5;
}

/* =============================================================
   HONEYPOT — Anti-spam ocultos
   ============================================================= */
.gss-gform .gform_validation_container,
.gss-gform .gfield_visibility_hidden {
  display: none !important;
  position: absolute !important;
  left: -9000px !important;
}

/* =============================================================
   FIELDSET reset
   ============================================================= */
.gss-gform fieldset {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  width: 100%;
}

.gss-gform legend {
  width: 100%;
  padding: 0;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 720px) {
  .gss-gform .gform_fields {
    gap: 14px 0 !important;
  }
  .gss-gform .gfield_label {
    font-size: 13px;
  }
}

/* =============================================================
   ACCESSIBILITY
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .gss-gform *,
  .gss-gform *::before,
  .gss-gform *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* =============================================================
   GSS SELECT — Combo box custom on-brand (sin dependencias)
   -------------------------------------------------------------
   Reemplaza el <select> nativo por un combo box construido desde
   cero en gss-gform.js (clase GssSelect). Sin librerías externas:
   cero riesgo de cadena de suministro, código nuestro de un par
   de cientos de líneas, mantenimiento bajo control.

   Estructura DOM generada por GssSelect:

     <div class="gss-select" role="combobox" aria-expanded="false">
       <button class="gss-select__trigger" type="button">
         <span class="gss-select__value">País</span>
         <span class="gss-select__arrow"><svg.../></span>
       </button>
       <div class="gss-select__dropdown" role="listbox" hidden>
         <input class="gss-select__search" placeholder="Buscar…">   (sólo si hay 10+ opciones)
         <ul class="gss-select__list">
           <li class="gss-select__option" data-value="ES">España</li>
           ...
         </ul>
         <div class="gss-select__empty" hidden>Sin resultados</div>
       </div>
     </div>

   El <select> original queda oculto en el DOM para que Gravity
   Forms lea su valor al hacer submit.
   ============================================================= */

/* Wrapper */
.gss-gform .gss-select {
  position: relative;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
}

/* Trigger (lo que se ve cuando el combo está cerrado, parece un input) */
.gss-gform .gss-select__trigger {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  border: 1px solid #E2E6EF !important;
  border-radius: 10px !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  color: var(--gss-dark) !important;
  cursor: pointer;
  text-align: left;
  text-transform: none !important;
  letter-spacing: 0 !important;
  outline: none;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gss-gform .gss-select__trigger:hover {
  border-color: #C7CFE0 !important;
}

.gss-gform .gss-select__trigger:focus-visible,
.gss-gform .gss-select.gss-select--open .gss-select__trigger {
  border-color: var(--gss-neon) !important;
  box-shadow: 0 0 0 3px rgba(80, 120, 255, 0.16) !important;
}

/* Texto del valor mostrado */
.gss-gform .gss-select__value {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gss-dark);
  font-weight: 400;
  font-style: normal;
}

.gss-gform .gss-select__value--placeholder {
  color: #9AA0AE;
}

/* Flecha SVG (Neon Blue por defecto, Dark Blue al hover) */
.gss-gform .gss-select__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gss-neon);
  pointer-events: none;
  transition: transform 0.2s ease, color 0.2s ease;
}

.gss-gform .gss-select__arrow svg {
  display: block;
  width: 14px;
  height: 8px;
}

.gss-gform .gss-select__trigger:hover .gss-select__arrow {
  color: var(--gss-dark);
}

.gss-gform .gss-select--open .gss-select__arrow {
  transform: rotate(180deg);
}

/* Dropdown (panel desplegable; siempre abre hacia abajo) */
.gss-gform .gss-select__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  max-height: 320px;
  background-color: #FFFFFF;
  border: 1px solid #E2E6EF;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(4, 20, 56, 0.12);
  overflow: hidden;
}

.gss-gform .gss-select__dropdown[hidden] {
  display: none !important;
}

/* Input de búsqueda (sólo aparece si hay 10+ opciones) */
.gss-gform .gss-select__search {
  width: calc(100% - 16px) !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 8px !important;
  padding: 0 12px !important;
  border: 1px solid #E2E6EF !important;
  border-radius: 8px !important;
  background-color: #F7F9FF !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--gss-dark) !important;
  box-shadow: none !important;
  outline: none !important;
  flex-shrink: 0;
}

.gss-gform .gss-select__search:focus {
  border-color: var(--gss-neon) !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(80, 120, 255, 0.12) !important;
}

.gss-gform .gss-select__search::placeholder {
  color: #9AA0AE;
  font-style: normal;
  font-weight: 400;
}

/* Lista scrolleable */
.gss-gform .gss-select__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  overflow-y: auto;
  flex: 1;
}

/* Scrollbar custom (WebKit) */
.gss-gform .gss-select__list::-webkit-scrollbar {
  width: 8px;
}
.gss-gform .gss-select__list::-webkit-scrollbar-track {
  background: transparent;
}
.gss-gform .gss-select__list::-webkit-scrollbar-thumb {
  background: #C7CFE0;
  border-radius: 4px;
}
.gss-gform .gss-select__list::-webkit-scrollbar-thumb:hover {
  background: var(--gss-neon);
}

/* Cada opción */
.gss-gform .gss-select__option {
  padding: 10px 16px !important;
  margin: 0 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  color: var(--gss-dark) !important;
  background-color: transparent !important;
  cursor: pointer;
  list-style: none !important;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.gss-gform .gss-select__option[hidden] {
  display: none !important;
}

.gss-gform .gss-select__option--placeholder {
  color: #9AA0AE !important;
}

/* Hover y navegación por teclado (↑↓) */
.gss-gform .gss-select__option--highlighted {
  background-color: #EEF2FF !important;
  color: var(--gss-dark) !important;
}

/* Opción seleccionada actualmente */
.gss-gform .gss-select__option--selected {
  background-color: var(--gss-neon) !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
}

.gss-gform .gss-select__option--selected.gss-select__option--highlighted {
  background-color: #3D64E6 !important;
  color: #FFFFFF !important;
}

/* "Sin resultados" en búsqueda */
.gss-gform .gss-select__empty {
  padding: 14px 16px;
  color: var(--gss-gray);
  font-size: 13px;
  font-style: normal;
  text-align: center;
}

.gss-gform .gss-select__empty[hidden] {
  display: none !important;
}

/* Mobile: el dropdown puede ocupar más alto */
@media (max-width: 720px) {
  .gss-gform .gss-select__dropdown {
    max-height: 50vh;
  }
}

/* Reduced motion: sin transiciones */
@media (prefers-reduced-motion: reduce) {
  .gss-gform .gss-select__trigger,
  .gss-gform .gss-select__arrow,
  .gss-gform .gss-select__option {
    transition: none !important;
  }
}

/* =============================================================
   GSS SELECT — Refuerzo nuclear de tamaño de fuente
   -------------------------------------------------------------
   El font-size de las opciones lo intentaba sobreescribir CSS de
   Impreza/Gravity Forms aunque las reglas anteriores estuvieran
   con !important. Solución bruta: aplicar 15px a TODOS los
   descendientes del combo box con selector universal.

   Excepciones explícitas:
   - .gss-select__empty (mensaje "sin resultados") → 13px
   - SVG dentro de la flecha: no se ve afectado (SVG no usa font-size)
   ============================================================= */
.gss-gform .gss-select,
.gss-gform .gss-select *,
.gss-gform .gss-select__trigger,
.gss-gform .gss-select__trigger *,
.gss-gform .gss-select__value,
.gss-gform .gss-select__dropdown,
.gss-gform .gss-select__dropdown *,
.gss-gform .gss-select__list,
.gss-gform .gss-select__list *,
.gss-gform .gss-select__list .gss-select__option,
.gss-gform .gss-select__search {
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* Excepción: el mensaje "sin resultados" se mantiene más pequeño */
.gss-gform .gss-select .gss-select__empty,
.gss-gform .gss-select__empty {
  font-size: 13px !important;
}