#sim-simulador {
  /* Colores */
  --sim-naranja: #F96B06;
  /* primario sólido */
  --sim-grad: linear-gradient(90deg, #FF4156 0%, #F68C12 100%);
  /* gradiente */
  --sim-grad-1: #FF4156;
  --sim-grad-2: #F68C12;
  --sim-tinte: #FEEADC;
  /* tinte naranja claro (cajas) */
  --sim-oscuro: #000000;
  /* texto fuerte / bordes oscuros / outline */
  --sim-oscuro-2: #394049;
  /* bordes acordeón / checkbox */
  --sim-texto: #333333;
  /* texto general */
  --sim-gris-label: #505050;
  /* labels / notas secundarias */
  --sim-gris-borde: #CCCCCC;
  /* bordes claros (radios, divisores) */
  --sim-sep: #D1D5DB;
  /* separador interno */
  --sim-fondo: #F3F3F3;
  /* fondo del área */
  --sim-blanco: #FFFFFF;
  --sim-rojo: #FF0000;
  /* error / eliminar */
  --sim-placeholder: #8B8B8B;
}

#sim-simulador,
#sim-simulador *,
#sim-simulador *::before,
#sim-simulador *::after {
  box-sizing: border-box !important;
}

#sim-simulador {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: 'Nunito Sans', Arial, Helvetica, sans-serif !important;
}

/* Oculta header interno naranja del simulador (lo pone el tema WP) */
#sim-simulador .sim-header {
  display: none !important;
}

/* Fondo general del área */
#sim-simulador .sim-body {
  width: 100% !important;
  /* Antes: min-height: calc(100vh - 90px) -> forzaba casi toda la altura del
     viewport. Embebido en el tema (columna angosta + header/footer propios) el
     gris quedaba mucho mas alto que su contenido y se montaba sobre el footer
     ("Vuelve Arriba"). Ahora el gris solo cubre lo que ocupa el simulador. */
  min-height: auto !important;
  margin: 0 auto !important;
  padding: 56px 20px !important;

  background: var(--sim-fondo) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
}

/* Pasos */
#sim-simulador .sim-paso {
  display: none !important;
  width: 100% !important;
  background: transparent !important;
}

#sim-simulador .sim-paso.sim-paso--activo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  background: transparent !important;
}

/* CARD DESKTOP */
#sim-simulador .sim-card {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;

  padding: 32px 30px !important;

  background: var(--sim-blanco) !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
}

/* Intro */
#sim-simulador .sim-card--intro {
  min-height: 343px !important;
}

/* =====================================================
   PASO 1 (INTRO) Y PASO 2: LAYOUT 2 COLUMNAS + PANEL LATERAL
   (Figma nuevo, desktop). Base = 1 columna apilada; el layout de 2
   columnas se activa en la media query de escritorio (min-width:1024px).
===================================================== */

/* Títulos/párrafos alineados a la izquierda (columna de texto) */
#sim-simulador .sim-titulo--left,
#sim-simulador .sim-titulo-paso--left {
  text-align: left !important;
}

#sim-simulador .sim-parrafo--left {
  text-align: left !important;
}

/* Línea destacada naranja (bajo el párrafo de intro) */
#sim-simulador .sim-destacado {
  width: 100% !important;
  margin: 0 !important;
  color: var(--sim-naranja) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  text-align: left;
}


/* Gemelos de contenido de la intro: móvil/tablet (<1024px) vs desktop (>=1024px).
   El contenido difiere (texto, sin línea destacada y botón "Empezar" degradado en móvil).
   Usan display:contents para que los hijos participen del layout de .sim-intro-texto
   (mismo recurso que .sim-paso3-grid). El swap de desktop está en la media query 1024. */
#sim-simulador .sim-intro-movil {
  display: contents !important;
}

#sim-simulador .sim-intro-desktop {
  display: none !important;
}

/* En móvil el título va centrado, el párrafo alineado a la izquierda y el botón con
   algo de aire (Figma mobile). El párrafo lleva id+2 clases para ganarle al centrado base. */
#sim-simulador .sim-intro-movil-titulo {
  text-align: center !important;
}

#sim-simulador .sim-intro-movil .sim-parrafo {
  text-align: left !important;
}

#sim-simulador .sim-intro-movil .sim-btn {
  margin: 16px auto 0 !important;
}

/* Panel lateral peach ("Antes de comenzar" / "¿Por qué pedimos estos datos?") */
#sim-simulador .sim-aside {
  width: 100% !important;
  margin: 0 !important;
  padding: 24px !important;

  background: var(--sim-tinte) !important;
  border-radius: 18px !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  text-align: left !important;
}

#sim-simulador .sim-aside-titulo {
  margin: 0 !important;
  color: #263238 !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

#sim-simulador .sim-aside-texto,
#sim-simulador .sim-aside-nota {
  margin: 0 !important;
  color: var(--sim-gris-label) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

#sim-simulador .sim-aside-nota {
  margin-top: 4px !important;
}

#sim-simulador .sim-aside-lista {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#sim-simulador .sim-aside-lista li {
  position: relative !important;
  margin: 0 !important;
  padding-left: 26px !important;
  color: #263238 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

#sim-simulador .sim-aside-lista li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--sim-naranja) !important;
}

/* Barra de progreso (paso 2) */
#sim-simulador .sim-progreso {
  width: 240px !important;
  max-width: 70% !important;
  height: 6px !important;
  margin: 0 auto 6px !important;
  border-radius: 999px !important;
  background: #E5E7EB !important;
  overflow: hidden !important;
}

#sim-simulador .sim-progreso-fill {
  display: block !important;
  width: 50% !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: var(--sim-naranja) !important;
}

/* Fila de 2 campos (Fecha+Horizonte, Sexo+Estado civil) — apilada por defecto */
#sim-simulador .sim-campos-fila {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
}

/* Columna del formulario (paso 2) y botonera Volver/Simular */
#sim-simulador .sim-paso2-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
}

#sim-simulador .sim-paso2-botones {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Títulos */
#sim-simulador .sim-titulo,
#sim-simulador .sim-titulo-paso {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--sim-oscuro) !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-align: center !important;
  font-family: 'Sora', sans-serif;
}

/* Subtítulos (Grupo familiar / Dinos cómo te encuentras) */
#sim-simulador .sim-subtitulo {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  color: var(--sim-oscuro) !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-align: left !important;
}

/* "Ingresa tus datos": separarlo del primer campo (RUT), que quedaba muy pegado
   (en la grilla de contacto solo lo separaba el row-gap de 4px). */
#sim-simulador .sim-contacto-campos > .sim-subtitulo {
  margin-bottom: 12px !important;
}

/* Párrafos */
#sim-simulador .sim-parrafo {
  width: 100% !important;
  margin: 0 !important;
  color: var(--sim-oscuro) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
  text-align: center !important;
  font-family: 'Nunito Sans', sans-serif;
}

#sim-simulador .sim-parrafo--centro {
  text-align: center !important;
}

/* Campos */
#sim-simulador .sim-campo {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Label sobre borde (estilo notch del Figma) */
#sim-simulador .sim-label {
  display: table !important;
  position: relative !important;
  z-index: 2 !important;

  margin: 0 0 -11px 18px !important;
  padding: 0 8px !important;

  background: var(--sim-blanco) !important;
  color: var(--sim-oscuro) !important;

  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
}

/* Inputs normales */
#sim-simulador input[type="text"],
#sim-simulador input[type="email"],
#sim-simulador input[type="tel"],
#sim-simulador input[type="number"],
#sim-simulador select,
#sim-simulador textarea,
#sim-simulador .wpcf7-text,
#sim-simulador .wpcf7-email,
#sim-simulador .wpcf7-tel,
#sim-simulador .wpcf7-select {
  width: 100% !important;
  height: 52px !important;

  margin: 0 !important;
  padding: 0 18px !important;

  border: 2px solid var(--sim-oscuro) !important;
  border-radius: 14px !important;

  background-color: var(--sim-blanco) !important;
  color: var(--sim-texto) !important;

  font-size: 14px !important;
  line-height: 52px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;

  outline: none !important;
  box-shadow: none !important;
}

/* Select bloqueado (p. ej. "Parentesco" al editar un cónyuge: queda fijo en "Cónyuge",
   no se puede cambiar). Se ve deshabilitado pero el texto sigue legible. */
#sim-simulador select:disabled {
  background-color: var(--sim-fondo) !important;
  color: var(--sim-texto) !important;
  border-color: var(--sim-gris-borde) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

#sim-simulador input::placeholder,
#sim-simulador textarea::placeholder {
  color: var(--sim-placeholder) !important;
  opacity: 1 !important;
}

#sim-simulador input:focus,
#sim-simulador select:focus,
#sim-simulador textarea:focus {
  border-color: var(--sim-naranja) !important;
}

/* Grupo UF + monto */
#sim-simulador .sim-input-grupo {
  width: 100% !important;
  height: 52px !important;

  display: flex !important;
  align-items: center !important;

  border: 2px solid var(--sim-oscuro) !important;
  border-radius: 14px !important;

  background: var(--sim-blanco) !important;
  overflow: hidden !important;
}

#sim-simulador .sim-input-grupo:focus-within {
  border-color: var(--sim-naranja) !important;
}

/* Ancho FIJO del selector de moneda: dimensionado para "Pesos" (la opción más
   larga) + su padding de flecha, para que el cuadro y la barra separadora
   (.sim-sep) no cambien de posición al alternar UF/Pesos. Ya NO se ajusta por JS. */
#sim-simulador .sim-select-inline {
  width: 80px !important;
  min-width: 80px !important;
  height: 100% !important;

  display: flex !important;
  align-items: stretch !important;
}

/* CF7 envuelve el <select> de moneda en un <span.wpcf7-form-control-wrap>. Ese span
   tenía alto automático, así que el height:100% del select colapsaba: el cuadro
   quedaba corto y la flecha (chevron) se veía pegada arriba, con espacio sobrante.
   Se fuerza el wrapper a ocupar todo el alto del selector para centrar bien. */
#sim-simulador .sim-select-inline > .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sim-simulador .sim-select-inline select {
  display: block !important;
  width: 100% !important;
  height: 100% !important;

  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;

  /* Padding derecho amplio para que "Pesos" no choque con la flecha (chevron).
     Izquierda reducida (8px) para pegar el valor al borde del cuadro. */
  padding: 0 32px 0 8px !important;
  font-size: 14px !important;
  color: var(--sim-texto) !important;
}

/* Prefijo fijo de país (+56). El usuario escribe el número completo (9…, 2…). */
#sim-simulador .sim-prefijo-pais {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;

  padding: 0 16px !important;
  font-size: 14px !important;
  color: var(--sim-texto) !important;

  white-space: nowrap !important;
  user-select: none !important;
}

#sim-simulador .sim-sep {
  width: 1px !important;
  height: 55% !important;
  background: var(--sim-sep) !important;
  display: block !important;
}

/* "Saldo en AFP": el Figma NO lleva la barra divisoria interna entre el selector
   de moneda y el monto (solo "moneda + espacio + monto", p. ej. "UF ⌄  0,00").
   Se oculta el separador SOLO en este grupo; el de Teléfono (+56 | número) se
   mantiene. Regla por CSS para que aplique en producción sin re-pegar el CF7. */
#sim-simulador .sim-input-grupo[data-error-target="saldo-afp"] .sim-sep {
  display: none !important;
}

/* Sin la barra divisoria, el monto quedaba MUY separado de la flecha del selector.
   Se compacta SOLO el grupo del saldo (como en el Figma "UF ⌄  0,00"):
   - la flecha se pega al borde derecho del selector (background-position: right 4px),
     en vez del calc(100% - 16px) global que la dejaba 16px hacia adentro;
   - el ancho fijo se ajusta a lo justo para "Pesos" (la opción más larga) para que el
     monto no salte al alternar Pesos/UF y quede pegado a la flecha;
   - el input arranca casi pegado a la flecha (padding-left mínimo).
   El grupo de Teléfono no se toca. */
#sim-simulador .sim-input-grupo[data-error-target="saldo-afp"] .sim-select-inline {
  width: 70px !important;
  min-width: 70px !important;
}

#sim-simulador .sim-input-grupo[data-error-target="saldo-afp"] .sim-select-inline select {
  padding: 0 20px 0 8px !important;
  background-position: right 4px center !important;   /* flecha pegada al borde */
}

#sim-simulador .sim-input-grupo[data-error-target="saldo-afp"] input {
  padding-left: 2px !important;
}

#sim-simulador .sim-input-grupo input {
  flex: 1 !important;
  height: 100% !important;

  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;

  padding: 0 22px !important;
}

/* Select con flecha */
#sim-simulador select,
#sim-simulador .wpcf7-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  padding-right: 40px !important;

  /* Chevron limpio (V de dos trazos) en vez del triángulo relleno */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23343A40' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-position: calc(100% - 16px) 50% !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
}

/* Radios */
#sim-simulador .sim-radios {
  width: 100% !important;
  display: flex !important;
  gap: 16px !important;
}

/* CF7 envuelve los radios en:
   .wpcf7-form-control-wrap > .wpcf7-radio(.wpcf7-form-control) > .wpcf7-list-item
   Forzamos toda la cadena a ancho completo para tener 2 pills iguales. */
#sim-simulador .sim-radios .wpcf7-form-control-wrap {
  width: 100% !important;
  display: block !important;
}

#sim-simulador .sim-radios .wpcf7-form-control,
#sim-simulador .sim-radios .wpcf7-radio {
  width: 100% !important;
  display: flex !important;
  gap: 16px !important;
}

#sim-simulador .sim-radios .wpcf7-list-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* El label llena su celda flex (flex:1 1 0 con gap:16px ya reparten el ancho en 2
   pills iguales). Antes iba 111% y el segundo pill se desbordaba fuera de la card. */
#sim-simulador .sim-radios .wpcf7-list-item>label {
  width: 106% !important;
}

#sim-simulador .sim-radios label {
  width: 100% !important;
  flex: 1 1 0 !important;
  height: 47px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding: 0 18px !important;
  border: 2px solid var(--sim-gris-borde) !important;
  border-radius: 12px !important;
  background: var(--sim-blanco) !important;
  color: var(--sim-texto) !important;
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
}

/* Radio circular naranja (anillo siempre naranja; relleno al seleccionar) */
#sim-simulador .sim-radios input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  border: 2px solid var(--sim-naranja) !important;
  border-radius: 50% !important;
  background: var(--sim-blanco) !important;
  position: relative !important;
  cursor: pointer !important;
  position-area: left;
}

#sim-simulador .sim-radios input[type="radio"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: var(--sim-naranja) !important;
}

/* Radio seleccionado: borde naranja sólido (antes era un degradado rojo→naranja
   que se leía como error / "raro" en las tarjetas de etapa). */
#sim-simulador .sim-radios label:has(input[type="radio"]:checked) {
  border: 2px solid var(--sim-naranja) !important;
  font-weight: 700 !important;
}

/* La etiqueta de un grupo de radios va ARRIBA con una línea horizontal
   a la derecha (encabezado de sección, como en el Figma: "Sexo ———"). */
/* La etiqueta de un grupo de radios NO usa el notch (chip sobre el borde): sobre un
   par de pills queda montada encima del borde del primer pill y se ve rota. Va como
   un label normal ARRIBA de los pills. */
/* Contenedor del campo de radios: alineado a la IZQUIERDA. Sin esto, "Sexo" y
   "Casado" (y sus pills) heredan el text-align:center que el simulador aplica a
   títulos/párrafos y salen centrados en vez de pegados al borde izquierdo. */
#sim-simulador .sim-campo:has(.sim-radios) {
  text-align: left !important;
}

#sim-simulador .sim-campo:has(.sim-radios)>.sim-label {
  display: block !important;
  align-items: initial !important;
  gap: 0 !important;

  width: auto !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: auto !important;

  color: var(--sim-oscuro) !important;
  text-align: left !important;
  white-space: nowrap !important;
}

/* Antes el label de radios llevaba una línea de sección a la derecha; ahora usa el
   mismo notch (chip blanco sobre el borde) que el resto de los campos → se anula. */
#sim-simulador .sim-campo:has(.sim-radios)>.sim-label::after {
  display: none !important;
}

/* Radios en columna / tarjeta (paso 3: estado SCOMP) */
#sim-simulador .sim-radios--columna,
#sim-simulador .sim-radios--columna .wpcf7-form-control,
#sim-simulador .sim-radios--columna .wpcf7-radio {
  flex-direction: column !important;
}

/* En columna las tarjetas no deben estirarse en alto */
#sim-simulador .sim-radios--columna label {
  flex: 0 0 auto !important;
}

#sim-simulador .sim-radios--tarjeta label {
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 52px !important;
  padding: 12px 18px !important;
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;

}

/* Checkbox (modal: situación de discapacidad) */
#sim-simulador .sim-check {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;

  margin: 0 !important;
  padding: 18px 22px !important;

  border: 2px solid var(--sim-gris-borde) !important;
  border-radius: 12px !important;

  background: var(--sim-blanco) !important;
  color: var(--sim-texto) !important;
  font-size: 14px !important;
  line-height: 20px !important;

  cursor: pointer !important;
}

#sim-simulador .sim-check input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  border: 2px solid var(--sim-oscuro-2) !important;
  border-radius: 5px !important;
  accent-color: var(--sim-naranja) !important;
}

/* Botones */
#sim-simulador .sim-btn {
  width: 168px !important;
  height: 50px !important;
  min-width: 168px !important;
  min-height: 50px !important;

  margin: 0 auto !important;
  padding: 8px 24px !important;

  border-radius: 50px !important;
  border: 1px solid transparent !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 34px !important;
  letter-spacing: 0px !important;
  color: #ffffff !important;

  background: linear-gradient(90deg, #FF4156 0%, #F68C12 100%) !important;
  opacity: 1 !important;

  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* R4: un botón con [hidden] debe ocultarse pese al display:flex !important de .sim-btn.
   Mayor especificidad (1,2,0 > 1,1,0) para ganar siempre. Lo usa "Calcular monto final". */
#sim-simulador .sim-btn[hidden] {
  display: none !important;
}

/* Naranja sólido (Simular pensión, Calcular monto, Aceptar, Quiero que me contacten) */
#sim-simulador .sim-btn--naranja {
  background: var(--sim-naranja) !important;
  color: var(--sim-blanco) !important;
  border: 2px solid var(--sim-naranja) !important;
}

/* Gradiente (Empezar) */
#sim-simulador .sim-btn--gradiente {
  background: var(--sim-grad) !important;
  color: var(--sim-blanco) !important;
  border: 2px solid transparent !important;
}

/* Outline (Volver / Modificar datos) */
#sim-simulador .sim-btn--outline {
  background: var(--sim-blanco) !important;
  color: var(--sim-oscuro) !important;
  border: 3px solid var(--sim-oscuro) !important;
}

/* Tamano propio (Figma) solo para Simular pension / Calcular monto / Volver / Modificar Simulacion.
   Mismas dimensiones para los 4; el color lo sigue dando --naranja / --outline.
   width fluido (100% + max-width) para achicarse en pantallas angostas (desde ~300px)
   y llegar a 272px solo cuando el contenedor lo permite.
   white-space + font-size propios para que el texto nunca pase a 2 lineas. */
#sim-simulador .sim-btn--naranja[data-accion="simular"],
#sim-simulador .sim-btn[data-accion="calcular-final"],
#sim-simulador .sim-btn--outline[data-accion="ir-paso-1"],
#sim-simulador .sim-btn--outline[data-accion="ir-paso-2"] {
  width: 100% !important;
  max-width: 272px !important;
  min-width: 168px !important;
  height: 56px !important;
  padding: 16px 24px !important;
  border-width: 1px !important;
  font-size: 16px !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}

/* Clase propia del boton "Volver" del paso 2 (data-accion="ir-paso-1").
   Va despues de las reglas de outline y de tamano para ganar en cascada
   (misma especificidad que .sim-btn--outline[data-accion="ir-paso-1"]).
   Aqui se personaliza solo este boton sin afectar los demas outline. */
#sim-simulador .sim-btn.sim-btn--volver-paso2 {
  background: var(--sim-blanco) !important;
  color: var(--sim-oscuro) !important;
  border: 2px solid var(--sim-oscuro) !important;
  width: 10px !important;
  max-width: 10px !important;
  min-width: 131px !important;
  height: 56px !important;
  padding: 16px 24px !important;
  font-size: 16px !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}

#sim-simulador .sim-btn.sim-btn--volver-paso2:hover {
  background: var(--sim-oscuro) !important;
  color: var(--sim-blanco) !important;
}

#sim-simulador .sim-btn--full {
  width: 100% !important;
}

#sim-simulador .sim-flecha {
  font-size: 20px !important;
  line-height: 1 !important;
}

/* =====================================================
   PASO 3: CAJA DE RESULTADO
===================================================== */
#sim-simulador .sim-resultado {
  width: 100% !important;
  margin: 0 !important;
  padding: 20px 18px !important;

  background: var(--sim-tinte) !important;
  border-radius: 16px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  text-align: center !important;
}

#sim-simulador .sim-resultado-titulo {
  margin: 0 !important;
  color: var(--sim-oscuro) !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  font-family: 'Sora', sans-serif;

}

#sim-simulador .sim-resultado-detalle {
  color: var(--sim-gris-label) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
}

#sim-simulador .sim-resultado-uf {
  margin: 6px 0 0 !important;
  color: var(--sim-naranja) !important;
  font-size: 32px !important;
  line-height: 38px !important;
  font-weight: 800 !important;
}

#sim-simulador .sim-resultado-pesos {
  color: var(--sim-oscuro) !important;
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
}

#sim-simulador .sim-resultado-valoruf {
  margin-top: 2px !important;
  color: var(--sim-gris-label) !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
}

/* Enlace "Agregar beneficiarios" + círculo "+" */
#sim-simulador .sim-link-agregar {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: left !important;
  gap: 10px !important;
  background: transparent !important;
  border: none !important;
  color: var(--sim-oscuro) !important;
  font-size: 18px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
}

#sim-simulador .sim-circulo-mas {
  width: 24px !important;
  height: 24px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  background: var(--sim-naranja) !important;
  color: var(--sim-blanco) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

/* Grupo familiar (tarjetas) */
#sim-simulador .sim-grupo-familiar {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Línea de estado de la tarjeta "Beneficiarios" (naranja): "Sin beneficiarios
   agregados" / "Cónyuge cargado automáticamente" / "Beneficiarios agregados · N de 5". */
#sim-simulador .sim-benef-estado {
  display: block !important;
  width: 100% !important;
  margin: -4px 0 0 !important;
  color: var(--sim-naranja) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  text-align: left;
}

/* Texto descriptivo (solo en estados "sin beneficiarios" y "cónyuge automático") */
#sim-simulador .sim-benef-texto {
  width: 100% !important;
  margin: 0 !important;
  color: var(--sim-gris-label) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  text-align: left ;
}

#sim-simulador .sim-benef-estado:empty,
#sim-simulador .sim-benef-texto:empty {
  display: none !important;
}

#sim-simulador .sim-bcard {
  width: 100% !important;
  padding: 22px 28px !important;
  margin: 0 0 22px 0 !important;

  border: 1px solid #E5E7EB !important;
  border-radius: 20px !important;
  background: var(--sim-blanco, #fff) !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;

  box-sizing: border-box !important;
}

#sim-simulador .sim-bcard--auto,
#sim-simulador .sim-bcard:first-child {
  border-color: #FFB13B !important;
  background: #FFF8EC !important;
}

#sim-simulador .sim-bcard-titulo,
#sim-simulador .sim-fcard-titulo {
  font-size: 24px !important;
  line-height: 30px !important;
  font-weight: 800 !important;
  color: #2F3A45 !important;
  margin: 0 !important;
  text-align: left;

}

#sim-simulador .sim-bcard-datos {
  font-size: 22px !important;
  line-height: 32px !important;
  font-weight: 400 !important;
  color: #6B7680 !important;
  margin: 0 !important;
  text-align: left;
}

#sim-simulador .sim-bcard-acciones {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

#sim-simulador .sim-bcard-editar,
#sim-simulador .sim-bcard-eliminar {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;

  font-size: 22px !important;
  line-height: 28px !important;
  font-weight: 800 !important;
  color: #F45B00 !important;
  cursor: pointer !important;
}

#sim-simulador .sim-bcard-sep {
  color: #F45B00 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

#sim-simulador .sim-bcard-editar {
  color: var(--sim-naranja) !important;
}

#sim-simulador .sim-bcard-eliminar {
  color: var(--sim-rojo) !important;
}

#sim-simulador .sim-bcard-sep {
  color: var(--sim-gris-borde) !important;
}

/* Tarjeta desplegable (causante / beneficiario) */
#sim-simulador .sim-fcard {
  width: 100% !important;
  border: 2px solid var(--sim-oscuro) !important;
  border-radius: 14px !important;
  background: var(--sim-blanco) !important;
  overflow: hidden !important;
}

#sim-simulador .sim-fcard-head {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  margin: 0 !important;
  padding: 16px 18px !important;

  background: transparent !important;
  border: none !important;
  cursor: pointer !important;

  color: var(--sim-oscuro) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: left !important;
}

#sim-simulador .sim-fcard-chevron {
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 0 !important;

  /* Mismo chevron SVG que los select */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23343A40' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
  transition: transform 0.2s ease !important;
}

#sim-simulador .sim-fcard--abierto .sim-fcard-chevron {
  transform: rotate(180deg) !important;
}

#sim-simulador .sim-fcard-body {
  display: none !important;
  padding: 0 18px 10px !important;
}

#sim-simulador .sim-fcard--abierto .sim-fcard-body {
  display: block !important;
}

#sim-simulador .sim-fcard-fila {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  padding: 11px 0 !important;
  border-top: 1px solid #ECECEC !important;
  font-size: 14px !important;
}

#sim-simulador .sim-fcard-fila>span {
  color: var(--sim-gris-label) !important;
  font-weight: 400 !important;
}

#sim-simulador .sim-fcard-fila>strong {
  color: var(--sim-oscuro) !important;
  font-weight: 700 !important;
  text-align: right !important;
}

#sim-simulador .sim-beneficiario-eliminar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  width: 100% !important;
  margin: 6px 0 2px !important;
  padding: 6px !important;

  background: transparent !important;
  border: none !important;
  color: var(--sim-rojo) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

#sim-simulador .sim-elim-x {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 18px !important;
  height: 18px !important;

  border-radius: 50% !important;
  background: var(--sim-rojo) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* =====================================================
   PASO 3: TARJETA DE CONTACTO
===================================================== */
#sim-simulador .sim-divisor {
  width: 100% !important;
  height: 1px !important;
  margin: 0 !important;
  background: var(--sim-gris-borde) !important;
  border: none !important;
}

#sim-simulador .sim-nota {
  width: 100% !important;
  margin: 0 !important;
  color: var(--sim-gris-label) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  text-align: center !important;
}

/* Caja "¡Guarda nuestro contacto!" */
#sim-simulador .sim-guarda {
  width: 100% !important;
  margin: 14px 0 0 !important;
  padding: 18px !important;

  background: var(--sim-tinte) !important;
  border-radius: 16px !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  text-align: center !important;
}

#sim-simulador .sim-guarda-titulo {
  color: var(--sim-oscuro) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

#sim-simulador .sim-guarda p {
  margin: 0 !important;
  color: var(--sim-texto) !important;
  font-size: 13px !important;
  line-height: 19px !important;
}

#sim-simulador .sim-guarda-tel {
  color: var(--sim-naranja) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* Legal */
#sim-simulador .sim-legal {
  width: 100% !important;
  /* Aire entre el CTA "Solicitar orientación gratuita" y el texto legal (y entre los
     dos párrafos legales), consistente con el espaciado de 16px del componente. Antes
     era margin:0, por lo que el botón quedaba casi pegado al párrafo legal. */
  margin: 16px 0 0 !important;

  color: var(--sim-gris-label) !important;

  font-size: 13px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* Campo inválido (lo marca el JS de validación) */
#sim-simulador .sim-invalido,
#sim-simulador input.sim-invalido,
#sim-simulador select.sim-invalido,
#sim-simulador .sim-input-grupo.sim-invalido {
  border-color: var(--sim-rojo) !important;
}

/* Errores */
/* ANTI-SALTO (CLS): el hueco del mensaje se reserva SIEMPRE para 2 líneas, aunque
   el span esté vacío. Antes reservaba solo 1 línea (min-height:14px), por lo que un
   mensaje que envolvía a 2 líneas (ej. "Correo no válido (ej: nombre@mail.cl)." en la
   columna de mitad de ancho de desktop) crecía y empujaba los campos de abajo, haciendo
   que los clics/tecleo cayeran en el campo equivocado. 2 líneas × line-height 16px = 32px.
   NO reducir a 1 línea sin acortar antes los mensajes largos. */
#sim-simulador .sim-msg-error {
  display: block !important;
  width: 100% !important;
  min-height: 32px !important;
  /* Aire entre el campo y su mensaje de validación (antes 4px: quedaba pegado). */
  margin-top: 8px !important;
  color: var(--sim-rojo) !important;
  font-size: 14px !important;
  line-height: 16px !important;
  text-align: left !important;
}

/* El mensaje de error del RUT debe quedar alineado a la izquierda (una regla
   del tema/CF7 lo centraba). Selector con atributo => gana en especificidad. */
#sim-simulador .sim-msg-error[data-error-for="rut"] {
  text-align: left !important;
}

/* CF7 inyecta su propio "tip" de validación (.wpcf7-not-valid-tip) DEBAJO del
   input al fallar. Es MUY notorio en el RUT porque suele haber un validador de
   RUT de CF7 (lado servidor) que dispara ese tip. Ese tip se agrega dinámicamente
   —sin reservar alto— por lo que EMPUJA hacia abajo los campos siguientes.
   Nuestra propia validación (.sim-msg-error) ya cubre todos los campos con espacio
   reservado (anti-salto) y alineado a la izquierda, así que se NEUTRALIZA el tip
   nativo para dejar SOLO nuestro mensaje.
   Se usa display:none Y, como cinturón-y-tirantes (por si el tema/CF7 lo re-muestra
   con una regla !important), se lo saca del flujo (position:absolute + alto 0) para
   que NUNCA pueda empujar el layout. */
#sim-simulador .wpcf7-not-valid-tip,
#sim-simulador span.wpcf7-not-valid-tip {
  display: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ocultar FAQ (decisión del proyecto: "Preguntas frecuentes" no es del simulador) */
#sim-simulador .sim-faq {
  display: none !important;
}

/* =====================================================
   MODAL: AGREGAR BENEFICIARIO
===================================================== */
#sim-simulador .sim-modal {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;

  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

#sim-simulador .sim-modal.sim-modal--activo {
  display: flex !important;
}

/* Los modales de aviso "Ya eres cliente RRVV" y "Ya tienes un caso" pueden abrirse
   SOBRE el modal de saldo (que en modo saldo contiene el formulario de contacto).
   Como todos los .sim-modal comparten z-index (9999) y #sim-modal-saldo va DESPUÉS
   en el DOM, el modal de saldo tapaba al de cliente/caso (solo se veía al cerrar el
   de datos). Se elevan para que queden por encima. */
#sim-simulador #sim-modal-cliente.sim-modal--activo,
#sim-simulador #sim-modal-caso.sim-modal--activo {
  z-index: 10001 !important;
}

#sim-simulador .sim-modal-fondo {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(16, 18, 23, 0.55) !important;
}

#sim-simulador .sim-modal-caja {
  position: relative !important;
  z-index: 1 !important;

  width: 100% !important;
  max-width: 460px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;

  padding: 28px !important;

  background: var(--sim-blanco) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

#sim-simulador .sim-modal-titulo {
  margin: 0 !important;
  color: var(--sim-oscuro) !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-align: center !important;
}

/* "X" para cerrar el modal de beneficiario (esquina superior derecha). */
#sim-simulador .sim-modal-x {
  position: absolute !important;
  right: 14px !important;
  top: 10px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 28px !important;
  line-height: 1 !important;
  color: #6A7079 !important;
  cursor: pointer !important;
}

#sim-simulador .sim-modal-caja .sim-btn {
  align-self: center !important;
  width: auto !important;
  min-width: 200px !important;
  padding: 0 40px !important;
}

/* =====================================================
   MODALES: YA ERES CLIENTE PENTAVIDA / YA TIENES UN CASO
   Réplica visual del modal del formulario ARCO: ícono circular,
   texto centrado con destacados naranjos y botón pill naranjo.
   Clases .sim-cli-* compartidas por #sim-modal-cliente y #sim-modal-caso.
   Usa .sim-modal / .sim-modal--activo para mostrar/centrar (flex).
===================================================== */
#sim-simulador #sim-modal-cliente .sim-modal-fondo,
#sim-simulador #sim-modal-caso .sim-modal-fondo,
#sim-simulador #sim-modal-saldo .sim-modal-fondo {
  background: rgba(0, 0, 0, 0.45) !important;
}

#sim-simulador .sim-cli-dialog {
  position: relative !important;
  z-index: 1 !important;
  width: min(420px, calc(100vw - 36px)) !important;
  background: #fff !important;
  border-radius: 24px !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22) !important;
  padding: 24px 20px 18px !important;
  text-align: center !important;
  color: #4B4F54 !important;
}

#sim-simulador .sim-cli-x {
  position: absolute !important;
  right: 14px !important;
  top: 10px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 28px !important;
  line-height: 1 !important;
  color: #6A7079 !important;
  cursor: pointer !important;
}

#sim-simulador .sim-cli-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 999px !important;
  margin: 6px auto 12px !important;
  background: #28a745 !important;
  position: relative !important;
}

#sim-simulador .sim-cli-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 16px !important;
  height: 9px !important;
  transform: translate(-50%, -55%) rotate(-45deg) !important;
  border-left: 4px solid #ffffff !important;
  border-bottom: 4px solid #ffffff !important;
  border-radius: 2px !important;
}

/* Variante "caso"/"saldo": ícono naranjo con signo de exclamación (informativo). */
#sim-simulador #sim-modal-caso .sim-cli-icon,
#sim-simulador #sim-modal-saldo .sim-cli-icon {
  background: #f96b07 !important;
}

#sim-simulador #sim-modal-caso .sim-cli-icon::before,
#sim-simulador #sim-modal-saldo .sim-cli-icon::before {
  content: "!" !important;
  width: auto !important;
  height: auto !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#sim-simulador .sim-cli-txt {
  margin: 0 0 16px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

#sim-simulador .sim-cli-txt b {
  color: #f96b07 !important;
  font-weight: 700 !important;
}

#sim-simulador .sim-cli-btn {
  display: block !important;
  width: min(340px, 100%) !important;
  margin: 0 auto !important;
  padding: 12px 16px !important;
  background: #f96b07 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  border: 0 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
}

#sim-simulador .sim-cli-btn:hover {
  filter: brightness(0.97) !important;
}

/* Botonera del modal "pensión bajo el mínimo": "Volver a simular" (secundario,
   contorno) + "Quiero que me contacten" (primario, naranjo). Apiladas. */
#sim-simulador .sim-cli-btns {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: center !important;
}

#sim-simulador .sim-cli-btn--sec {
  background: #ffffff !important;
  color: #f96b07 !important;
  border: 2px solid #f96b07 !important;
}

#sim-simulador .sim-cli-btn--sec:hover {
  background: #fff5ee !important;
  filter: none !important;
}

/* =====================================================
   MODAL "PENSIÓN BAJO EL MÍNIMO" EN MODO FORMULARIO
   Al pulsar "Quiero que me contacten", simulador.js mueve el formulario de contacto
   (#sim-contacto-campos) DENTRO del diálogo del modal y le pone la clase
   .sim-modal-saldo--form. El diálogo se ensancha, se hace scrollable y alinea el
   contenido a la izquierda; se ocultan los dos botones iniciales (el submit vive
   dentro del formulario). La campaña queda fija en Consultantes RSE (17507); el
   selector de etapa (SCOMP/investigando) no aplica en este flujo.
===================================================== */
#sim-simulador #sim-modal-saldo.sim-modal-saldo--form .sim-cli-dialog {
  width: min(560px, calc(100vw - 36px)) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  text-align: left !important;
}

/* En modo formulario se ocultan los 2 botones iniciales del modal. */
#sim-simulador #sim-modal-saldo.sim-modal-saldo--form .sim-cli-btns {
  display: none !important;
}

/* En modo formulario se ocultan el mensaje de saldo y el ícono "!": la tarjeta
   arranca directo con "Ingresa tus datos" (título que trae el propio formulario).
   El mensaje sigue visible en el estado inicial del modal (con los 2 botones). */
#sim-simulador #sim-modal-saldo.sim-modal-saldo--form .sim-cli-txt,
#sim-simulador #sim-modal-saldo.sim-modal-saldo--form .sim-cli-icon {
  display: none !important;
}

/* Formulario en una sola columna dentro del modal (más legible que la grilla 2-col). */
#sim-simulador #sim-modal-saldo.sim-modal-saldo--form .sim-contacto-campos {
  display: block !important;
}

/* El submit del formulario ocupa el ancho del modal. */
#sim-simulador #sim-modal-saldo.sim-modal-saldo--form .sim-contacto-campos > .sim-btn-submit-mobile {
  width: 100% !important;
  max-width: none !important;
}

/* =====================================================
   LOADER: VALIDACIÓN CLIENTE PENTAVIDA
   Overlay que bloquea la interacción (no se puede escribir/clickear)
   mientras se consulta el servicio. Puntos naranjos animados.
===================================================== */
#sim-simulador .sim-loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.6) !important;
  cursor: wait !important;
}

#sim-simulador .sim-loader.sim-loader--activo {
  display: flex !important;
}

/* Spinner nativo de CF7: se oculta para no mostrarlo junto al botón durante el
   envío. El feedback de carga lo da nuestro overlay #sim-loader (que se muestra
   ya en wpcf7beforesubmit). */
body:has(#sim-simulador) .wpcf7-spinner {
  display: none !important;
}

#sim-simulador .sim-loader-dots {
  display: flex !important;
  gap: 12px !important;
}

#sim-simulador .sim-loader-dots span {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #f96b07 !important;
  animation: simDotPulse 1.4s infinite ease-in-out !important;
}

#sim-simulador .sim-loader-dots span:nth-child(2) {
  animation-delay: 0.2s !important;
}

#sim-simulador .sim-loader-dots span:nth-child(3) {
  animation-delay: 0.4s !important;
}

@keyframes simDotPulse {

  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: scale(0.8);
  }

  40% {
    opacity: 1;
    transform: scale(1.3);
  }
}

/* =====================================================
   UNA SOLA SUPERFICIE: quitar cajas/fondos del tema
   (el fondo gris full-bleed del simulador es el único fondo)
===================================================== */

/* El fondo de toda la página pasa a ser gris: así, al volver transparentes
   los contenedores del tema, queda una sola superficie gris. */
html:has(#sim-simulador),
body:has(#sim-simulador) {
  background: #F3F3F3 !important;
  overflow-x: hidden !important;
}

/* === CATCH-ALL a prueba de temas (SOLO visual) ===
   Neutraliza el fondo/sombra/borde de TODOS los ancestros del simulador,
   sin importar su clase, PERO sin tocar su tamaño ni su espaciado
   (no se toca padding/margin/max-width para no romper el layout del tema).
   *:has(#sim-simulador) sólo coincide con elementos que CONTIENEN al
   simulador (sus ancestros) -> no afecta header/footer/sidebar. */
body:has(#sim-simulador) *:has(#sim-simulador) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* FIX footer solapado: la section del tema que envuelve al simulador
   (section.section--container) trae margin-bottom:-50px para solapar secciones.
   Ese margen negativo SUBE el footer ~50px y lo monta sobre el simulador
   (footer top=554 vs contenido bottom=604). Se anula el margen inferior SOLO en
   los ancestros del simulador (elementos que lo CONTIENEN) -> no toca footer,
   header ni otras secciones de la pagina. */
body:has(#sim-simulador) *:has(#sim-simulador) {
  margin-bottom: 0 !important;
}

/* Hermanos directos del simulador (cajas/espaciadores vacíos que el
   editor de la página pudo dejar antes o después). */
body:has(#sim-simulador) *:has(> #sim-simulador)>*:not(#sim-simulador) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Contenedores de contenido más comunes (WP core, Astra, GeneratePress,
   OceanWP, Blocksy, Kadence, Divi, Elementor, CF7). Si tras subir el CSS
   sigue apareciendo una caja, inspecciona (F12) su clase y agrégala aquí. */
body:has(#sim-simulador) .entry-content,
body:has(#sim-simulador) .entry-content>*,
body:has(#sim-simulador) .page-content,
body:has(#sim-simulador) .site-content,
body:has(#sim-simulador) .content-area,
body:has(#sim-simulador) .site-main,
body:has(#sim-simulador) #content,
body:has(#sim-simulador) #primary,
body:has(#sim-simulador) #main,
body:has(#sim-simulador) .page,
body:has(#sim-simulador) .page article,
body:has(#sim-simulador) .hentry,
body:has(#sim-simulador) .wp-site-blocks,
body:has(#sim-simulador) .wp-block-post-content,
body:has(#sim-simulador) .is-layout-constrained,
body:has(#sim-simulador) .ast-container,
body:has(#sim-simulador) .ast-article-single,
body:has(#sim-simulador) .inside-article,
body:has(#sim-simulador) .entry-content-wrap,
body:has(#sim-simulador) .content-wrap,
body:has(#sim-simulador) .container,
body:has(#sim-simulador) .et_pb_section,
body:has(#sim-simulador) .elementor,
body:has(#sim-simulador) .elementor-section,
body:has(#sim-simulador) .elementor-container,
body:has(#sim-simulador) .elementor-column-wrap,
body:has(#sim-simulador) .elementor-widget-wrap,
body:has(#sim-simulador) .elementor-widget-container,
body:has(#sim-simulador) .e-con,
body:has(#sim-simulador) .e-con-inner,
body:has(#sim-simulador) main,
body:has(#sim-simulador) main>*,
body:has(#sim-simulador) article,
body:has(#sim-simulador) .entry-header,
body:has(#sim-simulador) .page-header,
body:has(#sim-simulador) .wp-block-group__inner-container,
body:has(#sim-simulador) .wp-block-columns,
body:has(#sim-simulador) .wp-block-column,
body:has(#sim-simulador) .wpcf7,
body:has(#sim-simulador) .wpcf7-form {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* =====================================================
   ENVÍO: estado de carga, mensaje de error/reintento, confirmación final
===================================================== */
#sim-simulador .sim-card--contacto[hidden],
#sim-simulador .sim-contacto-campos[hidden],
#sim-simulador .sim-confirmacion[hidden],
#sim-simulador .sim-msg-envio[hidden] {
  display: none !important;
}

/* Botón deshabilitado / en envío */
#sim-simulador .sim-btn:disabled,
#sim-simulador .sim-btn[disabled],
#sim-simulador .sim-btn--cargando {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Mensaje de envío (error + reintento) */
#sim-simulador .sim-msg-envio {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: var(--sim-tinte) !important;
  color: var(--sim-texto) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  text-align: center !important;
}

#sim-simulador .sim-msg-envio--error {
  background: #FFECEC !important;
  color: var(--sim-rojo) !important;
}

/* Confirmación final */
#sim-simulador .sim-confirmacion {
  align-items: center !important;
  text-align: center !important;
  gap: 10px !important;
}

#sim-simulador .sim-confirmacion-icono {
  width: 56px !important;
  height: 56px !important;
  margin: 4px auto 6px !important;
  border-radius: 50% !important;
  background: var(--sim-naranja) !important;
  color: var(--sim-blanco) !important;
  font-size: 30px !important;
  line-height: 56px !important;
  text-align: center !important;
}

/* =====================================================
   PASO 3: LAYOUT DESKTOP (grid 2 columnas, Figma actualizado)
   Algunos botones no pueden pertenecer a la vez a la tarjeta de
   mobile y a la de desktop (cajas/bordes/sombras distintas), por
   eso existen como gemelos (.sim-btn-submit-mobile / --desktop,
   .sim-card--pension-mobile / --beneficiarios-mobile en mobile y
   .sim-card--pension-desktop / --beneficiarios-desktop en desktop)
   que se muestran/ocultan según el ancho.
===================================================== */
#sim-simulador .sim-paso3-grid {
  display: contents;
}

#sim-simulador .sim-card--beneficiarios-desktop,
#sim-simulador .sim-card--pension-desktop {
  display: none !important;
}

#sim-simulador .sim-texto-secundario {
  width: 100% !important;
  margin: 0 !important;
  color: var(--sim-gris-label) !important;
  font-size: 13px !important;
  line-height: 19px !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* Tabla de beneficiarios (desktop): se regenera desde las mismas
   .sim-fcard--beneficiario del grupo familiar (ver simulador.js).
   Va dentro de una tarjeta redondeada con encabezado gris (ver Figma). */
#sim-simulador .sim-tabla-beneficiarios-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid #E9ECEF !important;
  border-radius: 16px !important;
}

#sim-simulador .sim-tabla-beneficiarios {
  width: 100% !important;
  border-collapse: collapse !important;
}

#sim-simulador .sim-tabla-beneficiarios th {
  padding: 16px 14px !important;
  background: #F7F8FA !important;
  border-bottom: 1px solid #E9ECEF !important;
  color: var(--sim-gris-label) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#sim-simulador .sim-tabla-beneficiarios th:first-child,
#sim-simulador .sim-tabla-beneficiarios td:first-child {
  padding-left: 22px !important;
}

#sim-simulador .sim-tabla-beneficiarios th:last-child,
#sim-simulador .sim-tabla-beneficiarios td:last-child {
  padding-right: 22px !important;
}

#sim-simulador .sim-tabla-beneficiarios th:first-child {
  text-align: left !important;
}

#sim-simulador .sim-tabla-beneficiarios td {
  padding: 16px 14px !important;
  border-bottom: 1px solid #F1F3F5 !important;
  color: var(--sim-texto) !important;
  font-size: 15px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Primera columna ("Persona"): nombre en negrita alineado a la izquierda */
#sim-simulador .sim-tabla-beneficiarios td:first-child {
  color: var(--sim-oscuro) !important;
  font-weight: 700 !important;
  text-align: left !important;
}

/* Última fila sin línea inferior (el borde de la tarjeta la cierra) */
#sim-simulador .sim-tabla-beneficiarios tbody tr:last-child td {
  border-bottom: none !important;
}

#sim-simulador .sim-tabla-acciones {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#sim-simulador .sim-tabla-editar,
#sim-simulador .sim-tabla-eliminar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--sim-tinte) !important;
  color: var(--sim-naranja) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

#sim-simulador .sim-tabla-editar:hover,
#sim-simulador .sim-tabla-eliminar:hover {
  background: #FCDBC4 !important;
}

#sim-simulador .sim-tabla-editar svg,
#sim-simulador .sim-tabla-eliminar svg {
  display: block !important;
}

@media (min-width: 1200px) {

  /* Figma "07 desktop": el paso 3 va en UNA SOLA COLUMNA apilada y centrada,
     en el orden Pensión estimada → Beneficiarios → Contacto (+ Guarda).
     (Antes era un grid de 2 columnas "contacto | pensión".) */
  #sim-simulador .sim-paso3-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    gap: 24px !important;
    align-items: stretch !important;
  }

  /* Las tarjetas mobile (pensión + beneficiarios) no se usan en desktop. */
  #sim-simulador .sim-card--pension-mobile,
  #sim-simulador .sim-card--beneficiarios-mobile {
    display: none !important;
  }

  /* Orden vertical según el 07 desktop. */
  #sim-simulador .sim-card--pension-desktop {
    order: 1 !important;
  }

  #sim-simulador .sim-card--beneficiarios-desktop {
    order: 2 !important;
  }

  /* Título de sección fuera de la card, justo encima del bloque de contacto. */
  #sim-simulador .sim-paso3-grid>.sim-titulo-paso {
    order: 3 !important;
  }

  #sim-simulador .sim-card--contacto {
    order: 3 !important;
  }

  #sim-simulador .sim-guarda {
    order: 4 !important;
  }

  #sim-simulador .sim-confirmacion {
    order: 5 !important;
  }

  /* Tarjetas de pensión y beneficiarios: ocultas en mobile, se muestran aquí
     ocupando el ancho completo del contenedor (ya no media columna). */
  #sim-simulador .sim-card--beneficiarios-desktop,
  #sim-simulador .sim-card--pension-desktop {
    display: flex !important;
    max-width: none !important;
    width: 100% !important;
  }

  #sim-simulador .sim-card--contacto,
  #sim-simulador .sim-confirmacion {
    max-width: none !important;
    width: 100% !important;
  }

  /* "Actualizar mi estimación" (outline), centrado. */
  #sim-simulador .sim-card--beneficiarios-desktop .sim-btn[data-accion="calcular-final"] {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  /* En el 07 el botón de envío vive al final del formulario de contacto:
     se MUESTRA el gemelo "mobile" (dentro de la tarjeta de contacto) y se
     OCULTA el de la tarjeta de pensión, que queda solo con "Modificar datos". */
  #sim-simulador .sim-btn.sim-btn-submit-desktop {
    display: none !important;
  }

  #sim-simulador .sim-btn.sim-btn-submit-mobile {
    display: flex !important;
  }

  /* Caja "Guarda nuestro contacto": angosta y centrada bajo el texto legal. */
  #sim-simulador .sim-contacto-campos>.sim-guarda,
  #sim-simulador .sim-paso3-grid>.sim-guarda {
    max-width: 460px !important;
    margin: 12px auto 0 !important;
  }

  /* Campos de contacto en 2 columnas (RUT/Nombres, apellidos, Teléfono/Correo) */
  #sim-simulador .sim-contacto-campos {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 20px !important;
    /* Antes 4px: dejaba el mensaje/campo pegado al label de la fila de abajo.
       Se sube para dar aire vertical entre filas. */
    row-gap: 14px !important;
  }

  #sim-simulador .sim-contacto-campos>.sim-divisor,
  #sim-simulador .sim-contacto-campos>.sim-subtitulo,
  #sim-simulador .sim-contacto-campos>.sim-btn-submit-mobile,
  #sim-simulador .sim-contacto-campos>.wpcf7-submit,
  #sim-simulador .sim-contacto-campos>.sim-msg-envio,
  #sim-simulador .sim-contacto-campos>.sim-legal,
  #sim-simulador .sim-contacto-campos>.sim-guarda,
  #sim-simulador .sim-contacto-campos>.sim-nota {
    grid-column: 1 / -1 !important;
  }

  /* El submit real, centrado y sin ocupar todo el ancho del formulario. */
  #sim-simulador .sim-contacto-campos>.sim-btn-submit-mobile {
    width: 100% !important;
    max-width: 360px !important;
    margin: 8px auto 0 !important;
  }

  /* ---- PASO 1 (intro): 2 columnas (texto | panel "Antes de comenzar") ---- */
  #sim-simulador .sim-card--intro {
    max-width: 1040px !important;
    min-height: 0 !important;
    padding: 56px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 48px !important;
    align-items: center !important;
  }

  /* En desktop se muestra el contenido desktop (2 columnas) y se oculta el móvil. */
  #sim-simulador .sim-intro-movil {
    display: none !important;
  }

  #sim-simulador .sim-intro-desktop {
    display: contents !important;
  }

  #sim-simulador .sim-card--intro .sim-titulo {
    font-size: 34px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  #sim-simulador .sim-card--intro .sim-parrafo {
    text-align: left !important;
  }

  #sim-simulador .sim-card--intro .sim-btn {
    width: auto !important;
    min-width: 260px !important;
    max-width: none !important;
    margin: 8px auto 0 0 !important;
    /* alineado a la izquierda */
  }

  /* La columna de texto apila su contenido con separación uniforme */
  #sim-simulador .sim-intro-texto {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  /* ---- PASO 2: card ancha con formulario (2 col) + panel lateral ---- */
  #sim-simulador .sim-card--paso2 {
    max-width: 1040px !important;
    padding: 48px 56px !important;
  }

  #sim-simulador .sim-card--paso2 .sim-titulo-paso {
    font-size: 30px !important;
    text-align: left !important;
  }

  #sim-simulador .sim-card--paso2 .sim-parrafo {
    text-align: left !important;
  }

  #sim-simulador .sim-paso2-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 40px !important;
    align-items: start !important;
    width: 100% !important;
  }

  /* La columna del formulario debe poder encogerse (si no, el ancho intrínseco
     de los inputs/radios empuja y aplasta el panel lateral). */
  #sim-simulador .sim-paso2-form {
    min-width: 0 !important;
  }

  /* Fila de 2 campos lado a lado (Fecha+Horizonte, Sexo+Estado civil) */
  #sim-simulador .sim-campos-fila {
    flex-direction: row !important;
    gap: 20px !important;
  }

  #sim-simulador .sim-campos-fila>.sim-campo {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* Botonera: en desktop, Volver (izq) | Simular pensión (der). El HTML está en
     orden Simular→Volver (para que en mobile Simular quede arriba), así que aquí
     se invierte con row-reverse. */
  #sim-simulador .sim-paso2-botones {
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
  }

  #sim-simulador .sim-paso2-botones .sim-btn {
    margin: 0 !important;
  }
}

/* =====================================================
   MOBILE: vuelve al diseño tipo celular 296px
===================================================== */

@media (max-width: 1199px) {
  /* PASO 2 (mobile/tablet): los campos ya se separan con el gap flex de
     .sim-paso2-form / .sim-campos-fila (16px), así que el hueco RESERVADO del mensaje
     (min-height 32px + margen) SOBRABA y los dejaba demasiado separados. Se quita la
     reserva aquí (no se depende de :empty para el min-height, por robustez); el mensaje
     aparece con su espacio solo cuando hay error, y :empty le quita el margen al colapsar.
     El anti-salto reservado se mantiene en el paso 3 y en desktop. */
  #sim-simulador .sim-paso2-form .sim-msg-error {
    min-height: 0 !important;
    margin-top: 6px !important;
  }
  #sim-simulador .sim-paso2-form .sim-msg-error:empty {
    margin-top: 0 !important;
  }

  #sim-simulador .sim-body {
    min-height: auto !important;
    padding: 20px 8px !important;
    gap: 14px !important;
    background: var(--sim-fondo) !important;
  }

  #sim-simulador .sim-paso.sim-paso--activo {
    gap: 14px !important;
  }

  #sim-simulador .sim-card {
    width: 117% !important;
    max-width: 368px !important;
    min-height: auto !important;
    padding: 23px 12px 0 -14px!important;
    border-radius: 16px !important;
    gap: 16px !important;
    transform: translateX(-21px);
  }

  #sim-simulador .sim-titulo,
  #sim-simulador .sim-titulo-paso {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  #sim-simulador .sim-subtitulo {
    font-size: 16px !important;
    line-height: 21px !important;
  }

  #sim-simulador .sim-parrafo {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  #sim-simulador .sim-label {
    margin: 0 0 -10px 14px !important;
    padding: 0 7px !important;
    font-size: 13px !important;
    line-height: 17px !important;
  }

  #sim-simulador input[type="text"],
  #sim-simulador input[type="email"],
  #sim-simulador input[type="tel"],
  #sim-simulador input[type="number"],
  #sim-simulador select,
  #sim-simulador textarea,
  #sim-simulador .wpcf7-text,
  #sim-simulador .wpcf7-email,
  #sim-simulador .wpcf7-tel,
  #sim-simulador .wpcf7-select {
    height: 46px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    border-width: 1.6px !important;
    font-size: 13px !important;
    line-height: 46px !important;
  }

  #sim-simulador .sim-input-grupo {
    height: 45px !important;
    border-radius: 10px !important;
    border-width: 1.4px !important;
  }

  #sim-simulador .sim-select-inline {
    width: 64px !important;
    min-width: 64px !important;
  }

  #sim-simulador .sim-select-inline select {
    padding: 0 18px 0 8px !important;
    font-size: 12px !important;
    background-position: right 4px center !important;   /* flecha pegada al borde */
  }

  #sim-simulador .sim-prefijo-pais {
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  #sim-simulador .sim-input-grupo input {
    padding: 0 12px !important;
  }

  #sim-simulador .sim-radios,
  #sim-simulador .sim-radios .wpcf7-form-control {
    gap: 14px !important;
  }

  #sim-simulador .sim-radios label {
    height: 50px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    border-width: 1px !important;
    gap: 10px !important;
    font-size: 14px !important;
    line-height: 18px !important;
  }

  #sim-simulador .sim-radios input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    border-width: 1.5px !important;
  }

  #sim-simulador .sim-radios input[type="radio"]:checked::after {
    width: 9px !important;
    height: 9px !important;
  }

  #sim-simulador .sim-campo:has(.sim-radios)>.sim-label {
    gap: 0 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
  }

  #sim-simulador .sim-radios--tarjeta label {
    min-height: 50px !important;
    padding: 10px 14px !important;
  }

  /* Etapa (SCOMP / Investigando): lado a lado en desktop, pero en mobile el texto
     es largo -> se re-apilan en una columna para que no queden apretadas. */
  #sim-simulador .sim-radios--tarjeta,
  #sim-simulador .sim-radios--tarjeta .wpcf7-form-control,
  #sim-simulador .sim-radios--tarjeta .wpcf7-radio {
    flex-direction: column !important;
  }

  #sim-simulador .sim-radios--tarjeta label {
    flex: 0 0 auto !important;
  }

  #sim-simulador .sim-check {
    padding: 12px 14px !important;
    border-radius: 8px !important;
    border-width: 1px !important;
    font-size: 13px !important;
  }

  #sim-simulador .sim-check input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
  }

  #sim-simulador .sim-btn {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    line-height: 18px !important;
  }

  /* Submit "Solicitar orientación gratuita →": es un <input type="submit"> de CF7,
     que NO envuelve el texto (lo recorta). Con el ancho de la card de 296px la
     etiqueta se cortaba ("...orientación gra"). Se baja font/padding/letter-spacing
     para que entre completa en una línea. El alto se sube un poco para que no quede
     apretada. Aplica a ambos gemelos (mobile/desktop). */
  #sim-simulador .sim-btn.sim-btn-submit-mobile,
  #sim-simulador .sim-btn.sim-btn-submit-desktop {
    height: auto !important;
    min-height: 46px !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
    line-height: 18px !important;
    letter-spacing: -0.3px !important;
  }

  /* Botones de acción (Volver / Simular / Calcular / Modificar / Comenzar):
     en mobile van tipo pill 180×50, radio 25, borde 1px (spec Figma). El ancho
     es auto con min 180 para que "Volver" quede en 180 y las etiquetas largas
     (p. ej. "Comenzar simulación") crezcan lo necesario sin cortarse. */
  #sim-simulador .sim-btn--naranja[data-accion="simular"],
  #sim-simulador .sim-btn[data-accion="calcular-final"],
  #sim-simulador .sim-btn--outline[data-accion="ir-paso-1"],
  #sim-simulador .sim-btn--outline[data-accion="ir-paso-2"],
  #sim-simulador .sim-card--intro .sim-btn {
    width: auto !important;
    min-width: 180px !important;
    max-width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 22px !important;
    border-radius: 25px !important;
    border-width: 1px !important;
    white-space: nowrap !important;
    font-size: 15px !important;
  }

  /* "Actualizar mi estimación": etiqueta larga que en la card de 296px no cabe en
     una línea con nowrap y se salía del borde del pill. Es un <button>, así que se
     deja que el texto envuelva y el pill crece en alto (border-radius sigue OK);
     el radio se baja para que a 2 líneas no quede forma de cápsula rara. */
  #sim-simulador .sim-btn[data-accion="calcular-final"] {
    white-space: normal !important;
    height: auto !important;
    min-height: 50px !important;
    padding: 8px 16px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    line-height: 18px !important;
    text-align: center !important;
  }

  #sim-simulador .sim-flecha {
    font-size: 18px !important;
  }

  /* La tarjeta de intro en mobile no necesita el alto mínimo grande (dejaba
     mucho espacio vacío al colapsar a 1 columna). */
  #sim-simulador .sim-card--intro {
    min-height: auto !important;
  }

  /* Resultado */
  #sim-simulador .sim-resultado {
    padding: 18px 14px !important;
    border-radius: 14px !important;
  }

  #sim-simulador .sim-resultado-titulo {
    font-size: 15px !important;
    line-height: 20px !important;
  }

  #sim-simulador .sim-resultado-detalle {
    font-size: 11px !important;
  }

  #sim-simulador .sim-resultado-uf {
    font-size: 26px !important;
    line-height: 32px !important;
  }

  #sim-simulador .sim-resultado-pesos {
    font-size: 12px !important;
  }

  #sim-simulador .sim-link-agregar {
    font-size: 13px !important;
  }

  #sim-simulador .sim-circulo-mas {
    width: 20px !important;
    height: 20px !important;
    font-size: 16px !important;
  }

  /* Grupo familiar */
  #sim-simulador .sim-grupo-familiar {
    gap: 10px !important;
  }

  #sim-simulador .sim-beneficiario-card {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border-width: 1.4px !important;
  }

  #sim-simulador .sim-beneficiario-card strong {
    font-size: 13px !important;
  }

  #sim-simulador .sim-beneficiario-card p {
    font-size: 11px !important;
  }

  #sim-simulador .sim-beneficiario-card small,
  #sim-simulador .sim-beneficiario-eliminar {
    font-size: 11px !important;
  }

  /* Contacto */
  #sim-simulador .sim-nota {
    font-size: 10.5px !important;
    line-height: 15px !important;
  }

  #sim-simulador .sim-guarda {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  #sim-simulador .sim-guarda-titulo {
    font-size: 13px !important;
  }

  #sim-simulador .sim-guarda p {
    font-size: 11px !important;
    line-height: 16px !important;
  }

  #sim-simulador .sim-guarda-tel {
    font-size: 14px !important;
  }

  #sim-simulador .sim-legal {
    font-size: 10.5px !important;
    line-height: 15px !important;
    margin-top: 16px !important;
  }

  /* Modal */
  #sim-simulador .sim-modal {
    padding: 12px !important;
  }

  #sim-simulador .sim-modal-caja {
    max-width: 320px !important;
    padding: 23px 16px !important;
    border-radius: 16px !important;
    gap: 16px !important;
  }

  #sim-simulador .sim-modal-titulo {
    font-size: 17px !important;
    line-height: 22px !important;
  }

  #sim-simulador .sim-modal-caja .sim-btn {
    min-width: 160px !important;
    padding: 0 24px !important;
  }

  /* En teléfono, intro y paso 2 quedan como el diseño mobile clásico:
     sin panel lateral peach ni barra de progreso (solo aplican en desktop). */
  #sim-simulador .sim-aside,
  #sim-simulador .sim-progreso {
    display: none !important;
  }

  #sim-simulador .sim-destacado {
    font-size: 14px !important;
  }

  /* Tarjeta compacta de beneficiario (mobile) */
  #sim-simulador .sim-bcard {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  #sim-simulador .sim-bcard-titulo {
    font-size: 14px !important;
  }

  #sim-simulador .sim-bcard-datos {
    font-size: 12px !important;
  }

  #sim-simulador .sim-bcard-editar,
  #sim-simulador .sim-bcard-eliminar {
    font-size: 13px !important;
  }
}

@media (max-width: 500px){
	.tab-menu-item li {
		font-weight: bold !important;
	}
	
.m-0.pr-lg-100.pl-lg-100.w-100:last-child {
    background-color: rgb(255, 255, 255);
    padding: 40px 30px !important;
    border-radius: 2rem;
}}