/* ↓↓↓ PEGA AQUÍ TODO EL CONTENIDO DE aunoa-hs-form.css ↓↓↓ */
/* ============================================================
   ============================================================
   FORMULARIO HUBSPOT AUNOA (.aunoa-hs-form)
   Estilos globales del formulario HubSpot embebido

   NOTAS DE ESTA VERSIÓN:
   - Eliminado el @import de Google Fonts (Inter se carga ahora
     con wp_enqueue_style desde Code Snippets).
   - Eliminadas las etiquetas <style> (este es un archivo .css).
   - Los SVG en data URI están URL-encoded para sobrevivir a la
     minificación de WP Rocket.
   ============================================================
   ============================================================ */


/* ============================================================
   SETUP — Contenedor, tipografía y reset base
   ============================================================ */
.aunoa-hs-form {
  border-radius: 16px;
  padding: 0;
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
  color: #1b1f3a;
  box-sizing: border-box;
}
.aunoa-hs-form,
.aunoa-hs-form *,
.aunoa-hs-form *::before,
.aunoa-hs-form *::after {
  box-sizing: border-box;
  font-family: 'Inter', sans-serif !important;
}

/* Ocultar el título "Rellena este formulario..." del propio HubSpot */
.aunoa-hs-form .hs-richtext:first-child,
.aunoa-hs-form .hs_cos_wrapper_type_rich_text:first-child { display: none !important; }

/* Ocultar fieldsets vacíos (refuerzo CSS además del JS) */
.aunoa-hs-form fieldset:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* ============================================================
   BASE — Fieldsets (rejilla de cada fila)
   ============================================================ */
.aunoa-hs-form fieldset {
  max-width: 100% !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
  display: flex !important;
  gap: 12px !important;
}
.aunoa-hs-form fieldset .hs-form-field {
  flex: 1 1 0;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin-bottom: 0;
}
.aunoa-hs-form fieldset .input { margin-right: 0 !important; }

/* ============================================================
   BASE — Labels y descripciones
   ============================================================ */
.aunoa-hs-form .hs-form-field > label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #14163a;
  margin-bottom: 6px;
}
.aunoa-hs-form .hs-form-required { color: #e25c5c; margin-left: 2px; }

.aunoa-hs-form .hs-field-desc {
  font-size: 10px;
  font-weight: 400;
  color: #6b7089;
  line-height: 1.4;
  margin: 2px 0 8px;
  font-style: normal;
}

/* ============================================================
   BASE — Inputs, selects y textareas
   ============================================================ */
.aunoa-hs-form input[type="text"],
.aunoa-hs-form input[type="email"],
.aunoa-hs-form input[type="tel"],
.aunoa-hs-form input[type="number"],
.aunoa-hs-form input[type="password"],
.aunoa-hs-form textarea,
.aunoa-hs-form select {
  width: 100% !important;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  color: #14163a;
  background: #ffffff;
  border: 1px solid #e3e6f0;
  border-radius: 10px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
  -webkit-appearance: none;
}
.aunoa-hs-form textarea {
  height: auto;
  min-height: 100px;
  padding: 12px 14px;
  resize: vertical;
}
.aunoa-hs-form input::placeholder,
.aunoa-hs-form textarea::placeholder {
  color: #9aa0b4;
  opacity: 1;
  font-size: 14px;
}
.aunoa-hs-form input:focus,
.aunoa-hs-form textarea:focus,
.aunoa-hs-form select:focus {
  border-color: #7c6df0;
  box-shadow: 0 0 0 3px rgba(124, 109, 240, 0.15);
}

/* Flecha personalizada de los selects — SVG URL-encoded */
.aunoa-hs-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2314163a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  padding-right: 36px;
}

/* Placeholder del select en gris.
   Doble vía: clase .is-placeholder (añadida por JS, fiable en todos
   los navegadores y a prueba de minificación) y :has() como refuerzo. */
.aunoa-hs-form select.is-placeholder { color: #9aa0b4; }
.aunoa-hs-form select:has(option:first-child:checked) { color: #9aa0b4; }

/* ============================================================
   BASE — Mensajes de error
   ============================================================ */
.aunoa-hs-form .hs-error-msgs { list-style: none; padding: 0; margin: 4px 0 0; }
.aunoa-hs-form .hs-error-msg { color: #e25c5c; font-size: 12px; line-height: 140%; }
.aunoa-hs-form input.invalid.error,
.aunoa-hs-form select.invalid.error,
.aunoa-hs-form textarea.invalid.error { border-color: #e25c5c; }


/* ============================================================
   FILA 1 — Nombre (25%) + Apellidos (75%)
   ============================================================ */
.aunoa-hs-form .hs_firstname { flex: 0 0 25% !important; }
.aunoa-hs-form .hs_lastname  { flex: 0 0 calc(75% - 12px) !important; }

.aunoa-hs-form .hs_firstname > label,
.aunoa-hs-form .hs_lastname > label { display: none; }


/* ============================================================
   FILA 2 — Departamento (50%) + Cargo (50%)
   ============================================================ */
.aunoa-hs-form .hs_department > label,
.aunoa-hs-form .hs_departamento > label,
.aunoa-hs-form .hs_jobtitle > label,
.aunoa-hs-form .hs_cargo > label { display: none; }


/* ============================================================
   FILA 3 — Correo corporativo (50%) + Nombre empresa (50%)
   ============================================================ */
.aunoa-hs-form .hs_email > label,
.aunoa-hs-form .hs_company > label { display: none; }


/* ============================================================
   FILA 4 — País (40%) + Teléfono (60%) — campo intl-phone
   ============================================================ */

/* Ocultar label del teléfono (placeholder hace de label) */
.aunoa-hs-form .hs_phone > label { display: none; }

/* Forzar que el campo ocupe el ancho completo del fieldset */
.aunoa-hs-form .hs_phone {
  flex: 1 1 100% !important;
  width: 100% !important;
}

/* Contenedor flex del país + teléfono */
.aunoa-hs-form .hs_phone .hs-fieldtype-intl-phone {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 12px;
  width: 100% !important;
  /* Anular estilos heredados de .hs-input */
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
}

/* Select del país — 40% del ancho total menos la mitad del gap */
.aunoa-hs-form .hs_phone .hs-fieldtype-intl-phone > select {
  flex: 0 0 calc(40% - 6px) !important;
  width: calc(40% - 6px) !important;
  max-width: calc(40% - 6px) !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Input del número — 60% del ancho total menos la mitad del gap */
.aunoa-hs-form .hs_phone .hs-fieldtype-intl-phone > input[type="tel"] {
  flex: 0 0 calc(60% - 6px) !important;
  width: calc(60% - 6px) !important;
  max-width: calc(60% - 6px) !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Asegurar que el input hidden no afecta al layout */
.aunoa-hs-form .hs_phone .hs-fieldtype-intl-phone > input[type="hidden"] {
  display: none !important;
}


/* ============================================================
   FILA 5 — Núm. trabajadores ATC (select) + Volumen consultas (number)
   ============================================================ */

/* Labels de los campos select y number */
.aunoa-hs-form .hs-fieldtype-select > label,
.aunoa-hs-form .hs-fieldtype-number > label {
  font-size: 14px;
  font-weight: 400;
  color: #14163a;
  margin-bottom: 8px;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

/* Forzar 50/50 en todos los fieldsets de 2 columnas */
.aunoa-hs-form fieldset.form-columns-2 > .hs-form-field {
  flex: 1 1 50% !important;
  width: 50% !important;
  min-width: 0 !important;
  max-width: 50% !important;
}

/* Campo de volumen (input type="number") — 100% del wrapper */
.aunoa-hs-form .hs_volumen_mensual_de_consultas_o_tickets,
.aunoa-hs-form .hs-fieldtype-number {
  flex: 1 1 50% !important;
  min-width: 0 !important;
}

.aunoa-hs-form .hs_volumen_mensual_de_consultas_o_tickets .input,
.aunoa-hs-form .hs-fieldtype-number .input {
  width: 100% !important;
}

.aunoa-hs-form input[type="number"],
.aunoa-hs-form .hs-fieldtype-number input.hs-input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Descripción — separación clara del input de abajo */
.aunoa-hs-form .hs-field-desc {
  margin: 4px 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  text-decoration: none !important;
}


/* ============================================================
   FILA 6 — Selecciona las funcionalidades (checkboxes)
   ============================================================ */
.aunoa-hs-form fieldset.form-columns-0,
.aunoa-hs-form fieldset:has(.hs-fieldtype-checkbox) {
  display: block !important;
  margin-bottom: 16px !important;
}

.aunoa-hs-form .hs-fieldtype-checkbox,
.aunoa-hs-form .hs-fieldtype-checkbox .input,
.aunoa-hs-form .hs-fieldtype-checkbox ul.inputs-list {
  margin: 0 !important;
  padding: 0 !important;
}

.aunoa-hs-form .hs-fieldtype-checkbox > label,
.aunoa-hs-form .hs-fieldtype-radio > label {
  font-size: 12px;
  font-weight: 300;
  color: #14163a;
  margin-bottom: 8px !important;
  display: block;
}

.aunoa-hs-form .hs-form-radio,
.aunoa-hs-form .hs-form-checkbox {
  display: block;
  margin: 4px 0 !important;
  list-style: none;
}
.aunoa-hs-form ul.inputs-list { list-style: none; padding: 0; margin: 0; }

.aunoa-hs-form .hs-form-radio-display,
.aunoa-hs-form .hs-form-checkbox-display {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 300;
  color: #14163a;
  cursor: pointer;
  gap: 8px;
}

/* Checkbox y radio — versión custom (a prueba de temas externos) */
.aunoa-hs-form input[type="checkbox"],
.aunoa-hs-form input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid #c8ccdb !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background-color .15s ease, border-color .15s ease;
}

/* Checkbox — cuadrado con esquinas ligeramente redondeadas */
.aunoa-hs-form input[type="checkbox"] {
  border-radius: 4px !important;
}

/* Radio — círculo */
.aunoa-hs-form input[type="radio"] {
  border-radius: 50% !important;
}

/* Estado marcado — fondo morado y borde morado */
.aunoa-hs-form input[type="checkbox"]:checked,
.aunoa-hs-form input[type="radio"]:checked {
  background-color: #7c6df0 !important;
  border-color: #7c6df0 !important;
}

/* Check del checkbox — SVG blanco centrado, URL-encoded */
.aunoa-hs-form input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 12px !important;
}

/* Dot del radio — punto blanco centrado */
.aunoa-hs-form input[type="radio"]:checked {
  background-image: radial-gradient(circle, #ffffff 40%, transparent 45%) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
}

/* Focus */
.aunoa-hs-form input[type="checkbox"]:focus,
.aunoa-hs-form input[type="radio"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(124, 109, 240, 0.2) !important;
}


/* ============================================================
   FILA 7 — Términos y condiciones + Botón Enviar
   ============================================================ */
/* Tamaño del texto de términos y condiciones */
.aunoa-hs-form .hs-fieldtype-booleancheckbox label,
.aunoa-hs-form .hs-fieldtype-booleancheckbox label span,
.aunoa-hs-form .legal-consent-container,
.aunoa-hs-form .legal-consent-container p,
.aunoa-hs-form .legal-consent-container span {
  font-size: 14px !important;
  line-height: 1.4;
  font-weight: 400;
}

/* Links de términos y política en morado */
.aunoa-hs-form .hs-fieldtype-booleancheckbox a,
.aunoa-hs-form .legal-consent-container a {
  color: #7c6df0 !important;
  text-decoration: none;
}
.aunoa-hs-form .hs-fieldtype-booleancheckbox a:hover,
.aunoa-hs-form .legal-consent-container a:hover {
  color: #6a5be8 !important;
}

.aunoa-hs-form .hs-button,
.aunoa-hs-form input[type="submit"].hs-button {
  background: #7c6df0;
  color: #ffffff;
  border: 0;
  border-radius: 80px;
  padding: 12px 54px;
  font-size: 16px;
  text-transform: none;
  font-weight: 300;
  cursor: pointer;
  margin-top: 12px;
  box-shadow: 0 4px 14px rgba(124, 109, 240, 0.35);
  transition: background .15s ease, transform .05s ease;
}
.aunoa-hs-form .hs-button:hover  { background: #6a5be8; }
.aunoa-hs-form .hs-button:active { transform: translateY(1px); }


/* ============================================================
   RESPONSIVE (móvil)
   ============================================================ */
@media (max-width: 600px) {
  .aunoa-hs-form { border-radius: 14px; }
  .aunoa-hs-form fieldset { flex-direction: column; gap: 10px; }
  .aunoa-hs-form fieldset .hs-form-field { flex: 1 1 100% !important; }

  /* Checkboxes/radios — anular estilos nativos iOS/Safari */
  .aunoa-hs-form input[type="checkbox"],
  .aunoa-hs-form input[type="radio"] {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    background-clip: padding-box !important;
  }

  /* Anular el 50/50 de form-columns-2 en móvil — todos al 100% */
  .aunoa-hs-form fieldset.form-columns-2 > .hs-form-field,
  .aunoa-hs-form .hs_firstname,
  .aunoa-hs-form .hs_lastname,
  .aunoa-hs-form .hs_phone {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

    /* País (arriba) + teléfono (abajo) — apilados en móvil, ambos al 100% */
  .aunoa-hs-form .hs_phone .hs-fieldtype-intl-phone {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .aunoa-hs-form .hs_phone .hs-fieldtype-intl-phone > select,
  .aunoa-hs-form .hs_phone .hs-fieldtype-intl-phone > input[type="tel"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
  }
  .aunoa-hs-form .hs_phone .hs-fieldtype-intl-phone > select {
    padding-right: 36px !important;
  }

  /* Botón — ancho completo en móvil */
  .aunoa-hs-form .hs-button,
  .aunoa-hs-form input[type="submit"].hs-button {
    width: 100%;
    display: block;
  }
}
/* ↑↑↑ FIN DEL CSS ↑↑↑ */