/*
 * Formulario con paleta de colores adicional v3 — Editable multi-step form
 */

.soc-form {
  --soc-navy-deep: #011526;
  --soc-navy: #022842;
  --soc-cream: #d9cba0;
  --soc-cream-bright: #e6dab8;
  --soc-dusty: #a7cbda;
  --soc-line: rgba(167, 203, 218, 0.18);
  --soc-line-soft: rgba(167, 203, 218, 0.08);
  --soc-text: #e8eef3;
  --soc-text-mute: #94a8b6;
  --soc-text-dim: #5e7585;
  --soc-error: #e98a7c;
  --soc-serif: "Helvetica Neue", Helvetica, "Manrope", Arial, system-ui, sans-serif;
  --soc-sans: "Helvetica Neue", Helvetica, "Manrope", Arial, system-ui, sans-serif;

  background: var(--soc-navy-deep);
  color: var(--soc-text);
  font-family: var(--soc-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* Full-width breakout — ocupa siempre todo el viewport */
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  box-sizing: border-box;
  display: block;
}

/* Eliminar márgenes/paddings de TODOS los ancestros de Elementor que contienen este widget.
   Usa :has() para alcanzar Section, Container, Column y Widget wrapper a cualquier nivel. */
.elementor-section:has(.elementor-widget-formulario_operaciones_form),
.elementor-container:has(.elementor-widget-formulario_operaciones_form),
.elementor-row:has(.elementor-widget-formulario_operaciones_form),
.elementor-column:has(.elementor-widget-formulario_operaciones_form),
.elementor-column-wrap:has(.elementor-widget-formulario_operaciones_form),
.elementor-widget-wrap:has(.elementor-widget-formulario_operaciones_form),
.e-con:has(.elementor-widget-formulario_operaciones_form),
.e-con-inner:has(.elementor-widget-formulario_operaciones_form),
.elementor-element:has(.elementor-widget-formulario_operaciones_form),
.elementor-widget-formulario_operaciones_form,
.elementor-widget-formulario_operaciones_form > .elementor-widget-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
  background: transparent !important;
}

.elementor-widget-formulario_operaciones_form .soc-form {
  line-height: 1.5; /* restablecer line-height del contenido del widget */
}

.soc-form::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(217, 203, 160, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 90%, rgba(167, 203, 218, 0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.soc-form__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 48px;
}

/* ─── HEADER ─── */
.soc-form__header { margin-bottom: 40px; }

.soc-form__intro {
  text-align: center;
  margin-bottom: 36px;
}

.soc-form__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--soc-dusty);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.soc-form__eyebrow-text {
  white-space: nowrap;
}

.soc-form__eyebrow-decor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--soc-dusty);
  opacity: 0.7;
  flex-shrink: 0;
}

/* Default: render as a line */
.soc-form__eyebrow--line .soc-form__eyebrow-decor {
  width: 26px;
  height: 1px;
  background: var(--soc-dusty);
  opacity: 0.4;
  font-size: 0;
}

/* Character-based decorations: keep them legible */
.soc-form__eyebrow--bar .soc-form__eyebrow-decor,
.soc-form__eyebrow--dot .soc-form__eyebrow-decor,
.soc-form__eyebrow--star .soc-form__eyebrow-decor,
.soc-form__eyebrow--arrow .soc-form__eyebrow-decor,
.soc-form__eyebrow--diamond .soc-form__eyebrow-decor,
.soc-form__eyebrow--slash .soc-form__eyebrow-decor,
.soc-form__eyebrow--custom .soc-form__eyebrow-decor {
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
}

.soc-form__eyebrow--bar .soc-form__eyebrow-decor {
  font-weight: 300;
}

.soc-form__title {
  font-family: var(--soc-sans);
  font-size: clamp(34px, 4.2vw, 50px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: var(--soc-text);
}

.soc-form__title em {
  font-style: normal;
  font-weight: 300;
  color: var(--soc-cream);
}

.soc-form__sub {
  font-size: 16px;
  color: var(--soc-text-mute);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
  font-weight: 400;
}

/* ─── STEPS ─── */
.soc-form__steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  max-width: 540px;
  margin: 0 auto;
}

.soc-form__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.4;
  transition: opacity 0.3s ease;
  flex: 0 0 auto;
  text-align: center;
  min-width: 0;
}

.soc-form__step.active,
.soc-form__step.completed { opacity: 1; }

.soc-form__step-num {
  font-family: var(--soc-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--soc-cream);
  letter-spacing: 0.08em;
  line-height: 1;
  height: 14px;
  display: flex;
  align-items: center;
}

.soc-form__step-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soc-text-mute);
  line-height: 1.2;
}

.soc-form__step.active .soc-form__step-label { color: var(--soc-text); }

/* Connector line — aligned exactly with the number row */
.soc-form__step-line {
  flex: 1;
  height: 1px;
  background: var(--soc-line);
  max-width: 80px;
  margin-top: 7px;
  transition: background 0.4s ease;
  flex-shrink: 1;
}

.soc-form__step-line.completed { background: var(--soc-cream); }

/* ─── FORM CARD ─── */
.soc-form__form {
  background: linear-gradient(180deg, rgba(10, 50, 82, 0.4) 0%, rgba(2, 40, 66, 0.25) 100%);
  border: 1px solid var(--soc-line);
  border-radius: 4px;
  padding: 44px;
  position: relative;
}

.soc-form__form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--soc-cream), transparent);
  opacity: 0.5;
}

/* ─── PAGES ─── */
.soc-form__page { display: none; }
.soc-form__page.active {
  display: block;
  animation: sa-fade-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes sa-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.soc-form__empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--soc-text-mute);
  font-size: 14px;
  font-style: italic;
}

/* ─── FIELDS ─── */
.soc-form__field { margin-bottom: 28px; }

.soc-form__field label {
  display: block;
  font-family: var(--soc-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--soc-text);
  margin-bottom: 8px;
  line-height: 1.4;
}

.soc-form__req {
  color: var(--soc-cream);
  margin-left: 3px;
}

.soc-form__opt {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--soc-text-dim);
}

.soc-form__help {
  font-size: 13px;
  color: var(--soc-text-mute);
  margin: 0 0 12px;
  font-weight: 400;
  line-height: 1.5;
}

.soc-form__field input[type="text"],
.soc-form__field input[type="email"],
.soc-form__field input[type="tel"],
.soc-form__field input[type="url"],
.soc-form__field select,
.soc-form__field textarea,
.soc-form__phone select,
.soc-form__phone input {
  width: 100%;
  background: rgba(1, 21, 38, 0.6);
  border: 1.5px solid var(--soc-line);
  border-radius: 3px;
  padding: 13px 16px;
  font-family: var(--soc-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--soc-text);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.soc-form__field input::placeholder,
.soc-form__field textarea::placeholder {
  color: var(--soc-text-dim);
  font-weight: 400;
}

.soc-form__field input:hover,
.soc-form__field select:hover,
.soc-form__field textarea:hover,
.soc-form__phone select:hover,
.soc-form__phone input:hover {
  border-color: var(--soc-dusty);
}

.soc-form__field input:focus,
.soc-form__field select:focus,
.soc-form__field textarea:focus,
.soc-form__phone select:focus,
.soc-form__phone input:focus {
  outline: none;
  border-color: var(--soc-cream);
  background: rgba(1, 21, 38, 0.85);
  box-shadow: 0 0 0 3px rgba(217, 203, 160, 0.08);
}

.soc-form__field input.soc-error,
.soc-form__field select.soc-error,
.soc-form__field textarea.soc-error,
.soc-form__phone input.soc-error {
  border-color: var(--soc-error);
}

.soc-form__field select,
.soc-form__phone select {
  appearance: none;
  -webkit-appearance: none;
  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='none' stroke='%23d9cba0' stroke-width='1.5' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-color: rgba(1, 21, 38, 0.6);
  padding-right: 36px;
  cursor: pointer;
}

.soc-form__field select option,
.soc-form__phone select option {
  background: var(--soc-navy-deep);
  color: var(--soc-text);
  padding: 8px;
}

.soc-form__field textarea {
  resize: vertical;
  min-height: 90px;
  font-family: var(--soc-sans);
  line-height: 1.5;
}

.soc-form__phone {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
}

/* ─── RADIO BUTTONS (vertical) — now <button> elements, no native radio */
.soc-form__radios {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.soc-form__radio {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  border: 1.5px solid var(--soc-line);
  border-radius: 4px;
  background: rgba(1, 21, 38, 0.4);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  color: inherit;
  outline: none;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.soc-form__radio:focus,
.soc-form__radio:focus-visible {
  outline: none;
}

.soc-form__radio-dot {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--soc-dusty);
  border-radius: 50%;
  background: rgba(1, 21, 38, 0.6);
  transition: all 0.2s ease;
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
}

.soc-form__radio-dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--soc-navy-deep);
  opacity: 0;
  transform: scale(0.4);
  transition: all 0.2s ease;
}

.soc-form__radio-text {
  font-size: 14.5px;
  color: var(--soc-text);
  line-height: 1.4;
  font-weight: 400;
  transition: color 0.2s ease;
}

.soc-form__radio::after {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3 3 7-8' stroke='%23011526' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
}

/* Hover */
.soc-form__radio:hover {
  border-color: var(--soc-dusty);
  background: rgba(167, 203, 218, 0.06);
}

/* SELECTED STATE */
.soc-form__radio.checked {
  border-color: var(--soc-cream);
  background: var(--soc-cream);
  box-shadow: 0 4px 18px rgba(217, 203, 160, 0.22);
}

.soc-form__radio.checked .soc-form__radio-text {
  color: var(--soc-navy-deep);
  font-weight: 600;
}

.soc-form__radio.checked .soc-form__radio-dot {
  border-color: var(--soc-navy-deep);
  background: var(--soc-navy-deep);
}

.soc-form__radio.checked .soc-form__radio-dot::after {
  background: var(--soc-cream);
  opacity: 1;
  transform: scale(1);
}

.soc-form__radio.checked::after {
  opacity: 1;
  transform: scale(1);
}

/* ─── ERROR ─── */
.soc-form__error {
  font-size: 12px;
  color: var(--soc-error);
  margin-top: 6px;
  display: none;
  letter-spacing: 0.01em;
}

.soc-form__error.show {
  display: block;
  animation: sa-shake 0.3s ease-in-out;
}

@keyframes sa-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* ─── RGPD ─── */
.soc-form__check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  cursor: pointer;
  margin-top: 12px;
  margin-bottom: 6px;
}

.soc-form__check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.soc-form__check-box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--soc-line);
  border-radius: 3px;
  background: rgba(1, 21, 38, 0.6);
  margin-top: 1px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.soc-form__check-box svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  color: var(--soc-navy-deep);
  transition: opacity 0.2s ease;
}

.soc-form__check:hover .soc-form__check-box { border-color: var(--soc-dusty); }
.soc-form__check input:checked ~ .soc-form__check-box {
  background: var(--soc-cream);
  border-color: var(--soc-cream);
}
.soc-form__check input:checked ~ .soc-form__check-box svg { opacity: 1; }

.soc-form__check-label {
  font-size: 13px;
  color: var(--soc-text-mute);
  line-height: 1.55;
  font-weight: 400;
}

.soc-form__check-label a {
  color: var(--soc-dusty);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── ACTIONS ─── */
.soc-form__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--soc-line-soft);
  gap: 12px;
}

.soc-form__btn {
  font-family: var(--soc-sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 13px 28px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.soc-form__btn--primary {
  background: var(--soc-cream);
  color: var(--soc-navy-deep);
  box-shadow: 0 4px 24px rgba(217, 203, 160, 0.12);
}

.soc-form__btn--primary:hover {
  background: var(--soc-cream-bright);
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(217, 203, 160, 0.24);
}

.soc-form__btn--primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.soc-form__btn--secondary {
  background: transparent;
  color: var(--soc-text-mute);
  padding: 13px 20px;
}

.soc-form__btn--secondary:hover { color: var(--soc-text); }

.soc-form__btn--submit { padding: 14px 36px; }

.soc-form__arrow {
  width: 16px;
  height: 14px;
  transition: transform 0.25s ease;
}

.soc-form__arrow--back { transform: rotate(180deg); }
.soc-form__btn--primary:hover .soc-form__arrow:not(.soc-form__arrow--back) { transform: translateX(4px); }
.soc-form__btn--secondary:hover .soc-form__arrow--back { transform: rotate(180deg) translateX(4px); }

/* ─── SUCCESS ─── */
.soc-form__page--success {
  text-align: center;
  padding: 16px 0 8px;
}

.soc-form__success-mark {
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: rgba(217, 203, 160, 0.1);
  border: 1px solid var(--soc-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--soc-cream);
  position: relative;
}

.soc-form__success-mark::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(217, 203, 160, 0.3);
  border-radius: 50%;
  animation: sa-pulse 2.5s ease-out infinite;
}

@keyframes sa-pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.soc-form__success-title {
  font-family: var(--soc-sans);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--soc-text);
}

.soc-form__success-title em {
  font-style: normal;
  font-weight: 700;
  color: var(--soc-cream);
}

.soc-form__success-msg {
  font-size: 15px;
  color: var(--soc-text-mute);
  max-width: 420px;
  margin: 0 auto 28px;
  line-height: 1.6;
  font-weight: 400;
}

.soc-form__success-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 28px 0;
  padding: 20px 0;
  border-top: 1px solid var(--soc-line-soft);
  border-bottom: 1px solid var(--soc-line-soft);
}

.soc-form__success-meta > div {
  text-align: center;
  padding: 4px 0;
  border-right: 1px solid var(--soc-line-soft);
}

.soc-form__success-meta > div:last-child { border-right: none; }

.soc-form__meta-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soc-text-dim);
  margin-bottom: 6px;
}

.soc-form__meta-value {
  font-family: var(--soc-sans);
  font-size: 15px;
  color: var(--soc-cream);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.soc-form__success-cta {
  margin-top: 28px;
  text-align: center;
}

.soc-form__success-urgent {
  font-family: var(--soc-sans);
  font-size: 13px;
  color: var(--soc-text-mute);
  margin: 0 0 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.soc-form__wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #ffffff !important;
  font-family: var(--soc-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 999px;
  border: none;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.32);
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
}

.soc-form__wa-btn:hover {
  background: #20bd5a;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.42);
  color: #ffffff !important;
}

.soc-form__wa-btn:active {
  transform: translateY(0);
}

.soc-form__wa-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .soc-form__inner {
    padding: 32px 14px;
    max-width: 100%;
    width: 100%;
    margin: 0;
  }
  .soc-form__form {
    padding: 24px 14px;
    border-radius: 3px;
  }

  /* Steps: mostrar TODAS las labels para que todos los items tengan la misma altura
     y las líneas queden bien alineadas con los números */
  .soc-form__steps { gap: 8px; }
  .soc-form__step { gap: 5px; }
  .soc-form__step-line { max-width: 36px; flex-shrink: 1; }
  .soc-form__step-num { font-size: 12px; height: 13px; }
  .soc-form__step-label { font-size: 9px; letter-spacing: 0.08em; }
  /* Crítico: NO ocultar labels de pasos no activos, así la altura es uniforme */
  .soc-form__step .soc-form__step-label { display: block; }

  /* Inputs: menos padding lateral */
  .soc-form__field input[type="text"],
  .soc-form__field input[type="email"],
  .soc-form__field input[type="tel"],
  .soc-form__field input[type="url"],
  .soc-form__field select,
  .soc-form__field textarea,
  .soc-form__phone select,
  .soc-form__phone input {
    padding: 12px 14px;
    font-size: 15px;
  }
  .soc-form__field label { font-size: 14px; line-height: 1.35; }

  /* Radio buttons: sin columna check derecha, padding reducido, texto con wrap */
  .soc-form__radio {
    grid-template-columns: 20px 1fr;
    gap: 12px;
    padding: 14px 14px;
  }
  .soc-form__radio::after { display: none; }
  .soc-form__radio-text {
    font-size: 14px;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }
  .soc-form__radio-dot { width: 18px; height: 18px; flex-shrink: 0; }

  /* Phone input */
  .soc-form__phone { grid-template-columns: 78px 1fr; gap: 10px; }

  /* Botones apilados a ancho completo */
  .soc-form__actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .soc-form__btn { width: 100%; justify-content: center; padding: 14px 24px; }

  /* Eyebrow compacto */
  .soc-form__eyebrow { font-size: 10px; letter-spacing: 0.14em; gap: 8px; }
  .soc-form__eyebrow--line .soc-form__eyebrow-decor { width: 18px; }

  /* Header */
  .soc-form__intro { margin-bottom: 28px; padding: 0 4px; }
  .soc-form__sub { font-size: 14px; }
  .soc-form__title { font-size: clamp(28px, 7vw, 38px); }

  /* Success meta */
  .soc-form__success-meta { grid-template-columns: 1fr; }
  .soc-form__success-meta > div {
    border-right: none;
    border-bottom: 1px solid var(--soc-line-soft);
    padding: 12px 0;
  }
  .soc-form__success-meta > div:last-child { border-bottom: none; }
}

@media (max-width: 480px) {
  .soc-form__inner { padding: 24px 10px; }
  .soc-form__form { padding: 20px 10px; }
  .soc-form__title { font-size: 26px; }

  /* Steps aún más compactos pero TODOS muestran label */
  .soc-form__steps { gap: 6px; }
  .soc-form__step-line { max-width: 22px; }
  .soc-form__step-num { font-size: 11px; }
  .soc-form__step-label { font-size: 8.5px; letter-spacing: 0.06em; }

  /* Radio aún más compacto */
  .soc-form__radio { padding: 12px 10px; gap: 10px; }
  .soc-form__radio-text { font-size: 13.5px; }

  /* RGPD más legible */
  .soc-form__check {
    padding: 14px;
    background: rgba(1, 21, 38, 0.4);
    border: 1px solid var(--soc-line);
    border-radius: 3px;
  }
}

@media (max-width: 360px) {
  /* iPhone SE y similares — pantallas muy estrechas */
  .soc-form__inner { padding: 20px 6px; }
  .soc-form__form { padding: 18px 8px; }
  .soc-form__step-line { max-width: 14px; }
  .soc-form__step-label { font-size: 8px; }
}/* ═══════════════════════════════════════════════════════════════════════════
   THEME: LIGHT (☀️ Claro corporativo)
   Sobrescribe las variables y propiedades hardcoded del tema oscuro base.
   Selector .soc-form.soc-form--theme-light gana por especificidad sobre .soc-form
   pero pierde frente al inline-style que inyecta Elementor desde los controles
   individuales de color, así que el usuario puede ajustar finamente encima.
   ═══════════════════════════════════════════════════════════════════════════ */
.soc-form.soc-form--theme-light,
.soc-form.soc-form--theme-operaciones {
  --soc-navy-deep:    #f4f7fa;             /* fondo de página claro */
  --soc-navy:         #ffffff;             /* fondo card */
  --soc-cream:        #0a2540;             /* acento primario → botón / radio activo / step activo */
  --soc-cream-bright: #061829;             /* hover del primario */
  --soc-dusty:        #1d4ed8;             /* secundario → asterisco requerido / links */
  --soc-line:         rgba(15, 35, 55, 0.12);
  --soc-line-soft:    rgba(15, 35, 55, 0.06);
  --soc-text:         #0a1929;             /* texto principal */
  --soc-text-mute:    #5a6b7a;             /* texto secundario */
  --soc-text-dim:     #93a2b0;             /* texto sutil / placeholder */
  --soc-error:        #dc2626;
}/* ─── Fondo y gradients sutiles ─── */
.soc-form.soc-form--theme-light::before,
.soc-form.soc-form--theme-operaciones::before {
  background:
    radial-gradient(ellipse at 15% 10%, rgba(29, 78, 216, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(10, 37, 64, 0.03) 0%, transparent 55%);
}/* ─── Card del formulario ─── */
.soc-form--theme-light .soc-form__form,
.soc-form--theme-operaciones .soc-form__form {
  background: #ffffff;
  border: 1px solid var(--soc-line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 35, 55, 0.04), 0 8px 32px rgba(15, 35, 55, 0.05);
}.soc-form--theme-light .soc-form__form::before,
.soc-form--theme-operaciones .soc-form__form::before {
  background: linear-gradient(90deg, transparent, var(--soc-line), transparent);
  opacity: 1;
}/* ─── Title cursiva (e.g. "de tu marca.") en gris claro azulado ─── */
.soc-form--theme-light .soc-form__title em,
.soc-form--theme-operaciones .soc-form__title em {
  color: var(--soc-text-mute);
}/* ─── Inputs / selects / textarea ─── */
.soc-form--theme-light .soc-form__field input[type="text"],
.soc-form--theme-light .soc-form__field input[type="email"],
.soc-form--theme-light .soc-form__field input[type="tel"],
.soc-form--theme-light .soc-form__field input[type="url"],
.soc-form--theme-light .soc-form__field select,
.soc-form--theme-light .soc-form__field textarea,
.soc-form--theme-light .soc-form__phone select,
.soc-form--theme-light .soc-form__phone input,
.soc-form--theme-operaciones .soc-form__field input[type="text"],
.soc-form--theme-operaciones .soc-form__field input[type="email"],
.soc-form--theme-operaciones .soc-form__field input[type="tel"],
.soc-form--theme-operaciones .soc-form__field input[type="url"],
.soc-form--theme-operaciones .soc-form__field select,
.soc-form--theme-operaciones .soc-form__field textarea,
.soc-form--theme-operaciones .soc-form__phone select,
.soc-form--theme-operaciones .soc-form__phone input {
  background-color: #ffffff;
  border: 1.5px solid var(--soc-line);
  border-radius: 6px;
}.soc-form--theme-light .soc-form__field input:hover,
.soc-form--theme-light .soc-form__field select:hover,
.soc-form--theme-light .soc-form__field textarea:hover,
.soc-form--theme-light .soc-form__phone select:hover,
.soc-form--theme-light .soc-form__phone input:hover,
.soc-form--theme-operaciones .soc-form__field input:hover,
.soc-form--theme-operaciones .soc-form__field select:hover,
.soc-form--theme-operaciones .soc-form__field textarea:hover,
.soc-form--theme-operaciones .soc-form__phone select:hover,
.soc-form--theme-operaciones .soc-form__phone input:hover {
  border-color: rgba(10, 37, 64, 0.4);
}.soc-form--theme-light .soc-form__field input:focus,
.soc-form--theme-light .soc-form__field select:focus,
.soc-form--theme-light .soc-form__field textarea:focus,
.soc-form--theme-light .soc-form__phone select:focus,
.soc-form--theme-light .soc-form__phone input:focus,
.soc-form--theme-operaciones .soc-form__field input:focus,
.soc-form--theme-operaciones .soc-form__field select:focus,
.soc-form--theme-operaciones .soc-form__field textarea:focus,
.soc-form--theme-operaciones .soc-form__phone select:focus,
.soc-form--theme-operaciones .soc-form__phone input:focus {
  background: #ffffff;
  border-color: var(--soc-cream);
  box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.08);
}/* SVG chevron del select adaptado (stroke gris claro) */
.soc-form--theme-light .soc-form__field select,
.soc-form--theme-light .soc-form__phone select,
.soc-form--theme-operaciones .soc-form__field select,
.soc-form--theme-operaciones .soc-form__phone 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='none' stroke='%2393a2b0' stroke-width='1.5' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-color: #ffffff;
}.soc-form--theme-light .soc-form__field select option,
.soc-form--theme-light .soc-form__phone select option,
.soc-form--theme-operaciones .soc-form__field select option,
.soc-form--theme-operaciones .soc-form__phone select option {
  background: #ffffff;
  color: var(--soc-text);
}/* ─── Radios (botones de opción) ─── */
.soc-form--theme-light .soc-form__radio,
.soc-form--theme-operaciones .soc-form__radio {
  background: #ffffff;
  border: 1.5px solid var(--soc-line);
  border-radius: 6px;
  /* Grid 2 col (sin checkmark a la derecha) */
  grid-template-columns: 22px 1fr;
}.soc-form--theme-light .soc-form__radio:hover,
.soc-form--theme-operaciones .soc-form__radio:hover {
  background: #f8fafc;
  border-color: rgba(10, 37, 64, 0.4);
}.soc-form--theme-light .soc-form__radio:hover .soc-form__radio-dot,
.soc-form--theme-operaciones .soc-form__radio:hover .soc-form__radio-dot {
  border-color: var(--soc-cream);
}.soc-form--theme-light .soc-form__radio-dot,
.soc-form--theme-operaciones .soc-form__radio-dot {
  background: #ffffff;
  border: 1.5px solid var(--soc-text-dim);
}.soc-form--theme-light .soc-form__radio-dot::after,
.soc-form--theme-operaciones .soc-form__radio-dot::after {
  background: #ffffff;
}/* SELECTED en tema claro: fondo blanco, borde navy 2px, dot navy con punto blanco */
.soc-form--theme-light .soc-form__radio.checked,
.soc-form--theme-operaciones .soc-form__radio.checked {
  background: rgba(10, 37, 64, 0.03);
  border-color: var(--soc-cream);
  border-width: 2px;
  padding: 15.5px 19.5px;      /* compensa border extra para evitar salto de layout */
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04), 0 6px 18px rgba(10, 37, 64, 0.06);
}.soc-form--theme-light .soc-form__radio.checked .soc-form__radio-text,
.soc-form--theme-operaciones .soc-form__radio.checked .soc-form__radio-text {
  color: var(--soc-text);
  font-weight: 600;
}.soc-form--theme-light .soc-form__radio.checked .soc-form__radio-dot,
.soc-form--theme-operaciones .soc-form__radio.checked .soc-form__radio-dot {
  background: var(--soc-cream);
  border-color: var(--soc-cream);
}.soc-form--theme-light .soc-form__radio.checked .soc-form__radio-dot::after,
.soc-form--theme-operaciones .soc-form__radio.checked .soc-form__radio-dot::after {
  background: #ffffff;
}/* Ocultar el check derecho del radio activo (en tema light el dot ya indica selección) */
.soc-form--theme-light .soc-form__radio::after,
.soc-form--theme-operaciones .soc-form__radio::after {
  display: none;
}/* ─── Checkbox RGPD ─── */
.soc-form--theme-light .soc-form__check-box,
.soc-form--theme-operaciones .soc-form__check-box {
  background: #ffffff;
  border: 1.5px solid var(--soc-line);
  border-radius: 4px;
}.soc-form--theme-light .soc-form__check:hover .soc-form__check-box,
.soc-form--theme-operaciones .soc-form__check:hover .soc-form__check-box {
  border-color: var(--soc-cream);
}.soc-form--theme-light .soc-form__check input:checked ~ .soc-form__check-box,
.soc-form--theme-operaciones .soc-form__check input:checked ~ .soc-form__check-box {
  background: var(--soc-cream);
  border-color: var(--soc-cream);
}.soc-form--theme-light .soc-form__check-box svg,
.soc-form--theme-operaciones .soc-form__check-box svg {
  color: #ffffff;
}/* ─── Botón primario (Siguiente / Enviar) en navy ─── */
.soc-form--theme-light .soc-form__btn--primary,
.soc-form--theme-operaciones .soc-form__btn--primary {
  background: var(--soc-cream);
  color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.18);
}.soc-form--theme-light .soc-form__btn--primary:hover,
.soc-form--theme-operaciones .soc-form__btn--primary:hover {
  background: var(--soc-cream-bright);
  box-shadow: 0 6px 20px rgba(10, 37, 64, 0.24);
}/* ─── Success ─── */
.soc-form--theme-light .soc-form__success-mark,
.soc-form--theme-operaciones .soc-form__success-mark {
  background: rgba(10, 37, 64, 0.06);
  border: 1px solid var(--soc-cream);
  color: var(--soc-cream);
}.soc-form--theme-light .soc-form__success-mark::before,
.soc-form--theme-operaciones .soc-form__success-mark::before {
  border: 1px solid rgba(10, 37, 64, 0.22);
}.soc-form--theme-light .soc-form__success-title em,
.soc-form--theme-operaciones .soc-form__success-title em {
  color: var(--soc-cream);
}.soc-form--theme-light .soc-form__meta-value,
.soc-form--theme-operaciones .soc-form__meta-value {
  color: var(--soc-cream);
}/* ─── Step lines completed (más visibles en fondo claro) ─── */
.soc-form--theme-light .soc-form__step-line.completed,
.soc-form--theme-operaciones .soc-form__step-line.completed {
  background: var(--soc-cream);
}

/* ─── Responsive: checkbox RGPD en mobile mantiene fondo sutil claro ─── */
@media (max-width: 480px) {
  .soc-form--theme-light .soc-form__check {
    background: #f8fafc;
    border: 1px solid var(--soc-line);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: SEGMENTAADS · CONSULTORÍA DE OPERACIONES
   Los mismos colores exactos de la landing de operaciones. Hereda todas las
   correcciones del tema claro (los selectores de arriba valen para los dos) y
   solo redefine las variables. Va DESPUÉS a propósito: misma especificidad
   que el tema claro, así que gana por orden.
   Ni un color fuera de la paleta oficial de la marca.
   ═══════════════════════════════════════════════════════════════════════════ */
.soc-form.soc-form--theme-operaciones {
  --soc-navy-deep:    #F8F8F8;                    /* casi blanco — fondo */
  --soc-navy:         #FFFFFF;                    /* blanco puro — tarjeta */
  --soc-cream:        #0453B9;                    /* azul principal — botón y activo */
  --soc-cream-bright: #03429A;                    /* azul oscuro — solo hover */
  --soc-dusty:        #0453B9;                    /* azul principal — enlaces y obligatorios */
  --soc-line:         #D8E5EF;                    /* gris azulado — líneas finas */
  --soc-line-soft:    #EAEEF2;                    /* gris pálido — separadores suaves */
  --soc-text:         #000E22;                    /* azul noche — texto principal */
  --soc-text-mute:    #4A5A6B;                    /* navy desaturado — texto secundario */
  --soc-text-dim:     #8FA5BA;                    /* sutil — marcadores de posición */
  /* Rojo de error, no el coral de la marca: el coral (#E8836F) es el color de
     dato negativo en gráficos y sobre blanco se queda en 2,7:1, por debajo del
     mínimo legible. Este es el mismo que ya usa el formulario de la web. */
  --soc-error:        #B3261E;
}

/* La marca no usa degradados: el fondo va liso. */
.soc-form.soc-form--theme-operaciones::before { background: none; }

/* Radio de esquina y borde de la marca, no los del tema claro */
.soc-form--theme-operaciones .soc-form__form {
  border-radius: 12px;
  border: 1px solid #D8E5EF;
  box-shadow: 0 1px 2px rgba(0, 14, 34, .04), 0 8px 30px rgba(0, 14, 34, .05);
}


/* ═══════════════════════════════════════════════════════════════════════════
   DENTRO DE UNA VENTANA EMERGENTE
   El formulario está pensado para una sección de página: se sale a ancho
   completo con `width:100vw` y márgenes negativos, y neutraliza los rellenos
   de sus contenedores. Eso, dentro de un popup, lo rompe:

   1. Se fuerza a 100vw dentro de una tarjeta de 640px, y el margen negativo
      lo desplaza hacia la izquierda. El resultado es que lo que se VE y donde
      está de verdad cada cosa no coinciden: el clic en «Siguiente» caía fuera
      del botón, en el fondo del popup, y en vez de avanzar se cerraba. Ese es
      el motivo real de que «no dejara pasar de página».
   2. La regla que quita rellenos a los ancestros alcanza también a los
      contenedores del propio popup, y les cambia el fondo y el interlineado.
   3. `overflow:hidden` en el formulario, sumado al del popup, impide
      desplazarse dentro cuando el contenido es más alto que la ventana: los
      últimos campos y el botón quedan inalcanzables.

   Aquí se desactivan las tres cosas SOLO dentro de un popup. En una sección
   normal de página todo sigue exactamente igual que antes.
   ═══════════════════════════════════════════════════════════════════════════ */

.elementor-popup-modal .soc-form,
.dialog-lightbox-widget .soc-form,
.dialog-widget-content .soc-form {
  /* Nada de salirse del ancho: dentro del popup manda la tarjeta */
  width: auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  /* Que el contenido pueda verse entero aunque sea más alto */
  overflow: visible;
}

/* Los contenedores del popup recuperan lo que la regla de ancestros les quita */
.elementor-popup-modal .dialog-widget-content,
.elementor-popup-modal .dialog-message,
.elementor-popup-modal .elementor-widget-container {
  line-height: normal !important;
}

/* Y el popup puede desplazarse si el formulario no cabe de alto. Sin esto, en
   pantallas bajas el botón «Siguiente» queda cortado y no hay forma de llegar
   a él: no es que no funcione, es que no se puede ni tocar. */
.elementor-popup-modal .dialog-message {
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FORMULARIO ENCAJADO (ventana emergente, columna estrecha, cualquier caja)
   La clase la pone el JavaScript midiendo el contenedor, no adivinando por el
   nombre de las clases del popup: hay demasiados plugins de ventanas
   emergentes y atarlo a los de uno solo fue lo que hizo que el intento
   anterior no sirviera de nada.
   Cuando el contenedor es más estrecho que la ventana, el formulario deja de
   salirse a ancho completo y se comporta como un bloque normal. Con
   `!important` porque tiene que ganarle a la regla del breakout.
   ═══════════════════════════════════════════════════════════════════════════ */
.soc-form.soc-form--encajado {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
}


/* La regla de ancestros con :has() de arriba hace en CSS lo mismo que la
   limpieza del JavaScript: quitar rellenos y fondos a los contenedores. Dentro
   de una ventana emergente también sobra, porque alcanza a los contenedores
   del propio popup. Se les devuelve lo suyo cuando el formulario va encajado. */
.elementor-element:has(.soc-form--encajado),
.e-con:has(.soc-form--encajado),
.e-con-inner:has(.soc-form--encajado),
.elementor-widget-formulario_operaciones_form:has(.soc-form--encajado),
.elementor-widget-formulario_operaciones_form:has(.soc-form--encajado) > .elementor-widget-container {
  line-height: normal !important;
  background: none !important;
}