.elementor-12928 .elementor-element.elementor-element-e7ad689:not(.elementor-motion-effects-element-type-background), .elementor-12928 .elementor-element.elementor-element-e7ad689 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0B282C;}.elementor-12928 .elementor-element.elementor-element-e7ad689{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:56px 0px 26px 0px;}.elementor-12928 .elementor-element.elementor-element-e7ad689 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-12928 .elementor-element.elementor-element-99f8cf0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 14px) 0px;}.elementor-12928 .elementor-element.elementor-element-99f8cf0 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:29px;font-weight:400;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-12928 .elementor-element.elementor-element-e8d3fe4{font-family:"Poppins", Sans-serif;font-size:16.8px;font-weight:300;color:#FFFFFF;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}body:not(.rtl) .elementor-12928 .elementor-element.elementor-element-dc95304{left:150px;}body.rtl .elementor-12928 .elementor-element.elementor-element-dc95304{right:150px;}.elementor-12928 .elementor-element.elementor-element-dc95304{bottom:-65px;z-index:2;}.elementor-12928 .elementor-element.elementor-element-dc95304 img{width:420px;}.elementor-12928 .elementor-element.elementor-element-628247e{width:auto;max-width:auto;bottom:20px;text-align:left;}body:not(.rtl) .elementor-12928 .elementor-element.elementor-element-628247e{left:0px;}body.rtl .elementor-12928 .elementor-element.elementor-element-628247e{right:0px;}.elementor-12928 .elementor-element.elementor-element-628247e img{width:190px;opacity:0.51;}.elementor-12928 .elementor-element.elementor-element-c74c2da{width:auto;max-width:auto;bottom:153px;text-align:right;}body:not(.rtl) .elementor-12928 .elementor-element.elementor-element-c74c2da{right:0px;}body.rtl .elementor-12928 .elementor-element.elementor-element-c74c2da{left:0px;}.elementor-12928 .elementor-element.elementor-element-c74c2da img{width:350px;opacity:0.51;}.elementor-12928 .elementor-element.elementor-element-d38bb16:not(.elementor-motion-effects-element-type-background), .elementor-12928 .elementor-element.elementor-element-d38bb16 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E7E7E7;}.elementor-12928 .elementor-element.elementor-element-d38bb16{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-21px;margin-bottom:0px;padding:30px 0px 70px 0px;}.elementor-12928 .elementor-element.elementor-element-d38bb16 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-button span{gap:10px;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-field-group{padding-right:calc( 20px/2 );padding-left:calc( 20px/2 );margin-bottom:20px;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-form-fields-wrapper{margin-left:calc( -20px/2 );margin-right:calc( -20px/2 );margin-bottom:-20px;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-field-group > label{font-family:"Poppins", Sans-serif;font-size:16.8px;font-weight:400;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-field-type-html{padding-bottom:0px;font-family:"Poppins", Sans-serif;font-weight:400;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-field-group .elementor-field{color:#447780;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-field-group .elementor-field, .elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-field-subgroup label{font-family:"Poppins", Sans-serif;font-size:16.8px;font-weight:300;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#FFFFFF00;border-color:#86999C;border-radius:7px 7px 7px 7px;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-field-group .elementor-select-wrapper select{background-color:#FFFFFF00;border-color:#86999C;border-radius:7px 7px 7px 7px;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-field-group .elementor-select-wrapper::before{color:#86999C;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-button{font-family:"Poppins", Sans-serif;font-weight:400;border-style:solid;border-width:1px 1px 1px 1px;border-radius:30px 30px 30px 30px;padding:15px 40px 15px 40px;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .e-form__buttons__wrapper__button-next{background-color:#D91A1B;color:#ffffff;border-color:#D91A1B;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-button[type="submit"]{background-color:#D91A1B;color:#ffffff;border-color:#D91A1B;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .e-form__buttons__wrapper__button-previous{background-color:#5D6E7100;color:#5D6E71;border-color:#5D6E71;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .e-form__buttons__wrapper__button-next:hover{background-color:#D91A1B;color:#ffffff;border-color:#D91A1B;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-button[type="submit"]:hover{background-color:#D91A1B;color:#ffffff;border-color:#D91A1B;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .e-form__buttons__wrapper__button-previous:hover{background-color:#02010100;color:#5D6E71;border-color:#5D6E71;}.elementor-12928 .elementor-element.elementor-element-984d8a9 .e-form__indicators__indicator, .elementor-12928 .elementor-element.elementor-element-984d8a9 .e-form__indicators__indicator__label{font-family:"Poppins", Sans-serif;font-weight:700;}.elementor-12928 .elementor-element.elementor-element-984d8a9{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-primary-color:#0B282C70;--e-form-steps-indicator-inactive-secondary-color:#FFFFFF;--e-form-steps-indicator-active-primary-color:#0B282C;--e-form-steps-indicator-active-secondary-color:#E7E7E700;--e-form-steps-indicator-completed-primary-color:#0B282C;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-12928 .elementor-element.elementor-element-b66b998{margin:30px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Poppins", Sans-serif;font-size:13px;font-weight:400;color:#86999C;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-12928 .elementor-element.elementor-element-34d6ecf{width:60%;}.elementor-12928 .elementor-element.elementor-element-8f5052f{width:39.332%;}}/* Start custom CSS for html, class: .elementor-element-7fb1871 */.custom-progress-bar {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 0;
  margin: 40px 0;
  padding: 0;
}

.progress-step {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 300;
  transition: all 0.3s ease;
}

/* Estado: Completado (lleno blanco) */
.progress-step.completed .step-circle {
  background-color: #fff;
  border: 1px solid #fff;
  color: #1a3a3a;
}

/* Estado: Activo (lleno blanco) */
.progress-step.active .step-circle {
  background-color: #fff;
  border: 1px solid #fff;
  color: #1a3a3a;
}

/* Estado: Inactivo (solo borde) */
.progress-step.inactive .step-circle {
  background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
}

/* Línea conectora */
.progress-line {
  width: 80px;
  height: 2px;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .progress-line {
    width: 40px;
  }
  .step-circle {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}
```

**JavaScript para sincronizar con los pasos del formulario:**

```javascript```
document.addEventListener("DOMContentLoaded", function () {
  const form = document.querySelector(".elementor-form");
  const customProgressBar = document.querySelector(".custom-progress-bar");
  const progressSteps = document.querySelectorAll(".progress-step");
  
  if (!form || !customProgressBar) return;

  function updateProgressBar() {
    // Detectar cuál es el paso activo en el formulario
    const activeStep = form.querySelector(".e-form__step:not(.elementor-hidden)");
    if (!activeStep) return;

    // Obtener el número del paso (1, 2, o 3)
    let currentStepNumber = 1;
    if (activeStep.classList.contains("step-2")) currentStepNumber = 2;
    if (activeStep.classList.contains("step-3")) currentStepNumber = 3;

    // Actualizar clases en los indicadores
    progressSteps.forEach((step) => {
      const stepNumber = parseInt(step.getAttribute("data-step"));
      
      step.classList.remove("completed", "active", "inactive");
      
      if (stepNumber < currentStepNumber) {
        step.classList.add("completed");
      } else if (stepNumber === currentStepNumber) {
        step.classList.add("active");
      } else {
        step.classList.add("inactive");
      }
    });
  }

  // Observar cambios en el formulario
  const observer = new MutationObserver(updateProgressBar);
  observer.observe(form, {
    attributes: true,
    subtree: true,
    attributeFilter: ["class"]
  });

  // Inicializar
  updateProgressBar();
});
```

**Pasos para implementarlo:**

1. En tu página de WordPress, ve al editor de Elementor
2. Busca el formulario multi-paso
3. Usa un widget **HTML personalizado** para insertar el HTML del progress bar
4. Añade el CSS en la pestaña **Estilo avanzado** o en tu archivo `custom.css`
5. Inserta el JavaScript en el **Footer** de tu sitio (o en un widget de código personalizado)

Este indicador funcionará perfectamente con Elementor porque monitorea los cambios de pasos y actualiza automáticamente el estado de los círculos numerados. ¿Te funciona así?/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-984d8a9 */.elementor-12928 .elementor-element.elementor-element-984d8a9 h2{
    color: #0a2629;
}

.pasos  {
    color: #0a2629;
    font-size: 16px;
    letter-spacing: 1.5px;
}

.elementor-12928 .elementor-element.elementor-element-984d8a9 h3{
    color: #0a2629;
    font-size: 20px;
  font-weight: normal;
  margin: 20px 0 0;
}

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea  {
   
    padding: 14px 21px !important;
}

/* Color del texto real dentro del campo */
.elementor-form input,
.elementor-form select,
.elementor-form textarea {
  color: #5D6E71 !important; /* tu color real */
  opacity: 1 !important;
}

/* Color del placeholder (texto guía) */
.elementor-form ::placeholder {
  color: #5D6E71 !important;
  opacity: 1 !important; /* sin transparencia */
}


select {
  position: relative;
  background: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000000' stroke-width='1.2'/%3E%3C/svg%3E") 
              no-repeat right 25px center;
  padding-right: 40px; /* espacio para la flecha */
  background-color: #fff; /* para evitar fondos raros */
  
  /* 🚫 Ocultar flecha original */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.elementor-select-wrapper .select-caret-down-wrapper {
    display: none !important;
}


.obligatorios  {
    color: #5d6e71 !important;
    font-size: 14px;
    font-weight: 300;
}


#form-field-field_747a821, #form-field-message, #form-field-field_363e5f8, #form-field-field_16a50f5, #form-field-field_4a530a8 {
    background-color: #d1d6d7;
}

.elementor-12928 .elementor-element.elementor-element-984d8a9 .elementor-field-subgroup label {
    font-family: "Poppins", Sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #5d6e71;
}


#libro a {
    color: #5d6e71 !important;
    text-decoration: underline !important;
}




.elementor-field-group-edad {
    display: none
}
.custom-age-question {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
  margin: 15px 0;
}

.age-question-label {
  font-size: 16px;
  color: #7a9fa3;
  font-weight: 500;
  white-space: nowrap;
  margin: 0;
}

.age-buttons-group {
  display: flex;
  gap: 10px;
}

.age-btn {
  padding: 10px 13px;
  border: 2px solid #7a9fa3;
  background: #fff;
  color: #7a9fa3;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.age-btn:hover {
  background: #f0f0f0;
  color: #318b3a; /* verde suave en hover */
}

/* Estado activo SÍ (verde) */
.age-btn-yes.active {
  background:#1a3a3a ;
  border-color: #1a3a3a;
  color: #fff;
}

.age-btn-yes.active:hover {
 
}

/* Estado activo NO (oscuro) */
.age-btn-no.active {
  background: #1a3a3a;
  border-color: #1a3a3a;
  color: #fff;
}

.age-btn-no.active:hover {
 
}

@media (max-width: 600px) {
  .custom-age-question {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .age-buttons-group {
    width: 100%;
  }
  
  .age-btn {
    flex: 1;
  }
}











.logo-hover img {
    min-width: 65px;
    max-width: 90px !important;
}

.reclamo-card-data {
    justify-content: flex-start !important;
}

.reclamo-card-logo img {
    min-width: auto !important;
     max-width: auto !important;
    height: 24px !important;
}

.logo-normal {
    padding: 10px 20px !important;
    border-radius: 200px !important;
}

.card-select-btn {
    font-size: 16.8px !important;
}


.barrio {
    font-size: 18px !important;
}

.calle {
    font-size: 14px!important;
    letter-spacing: 1.4px !important;
    font-weight: 600 !important;
}

.reclamo-card {
    box-shadow: none !important;
}

.age-question-label {
    font-size: 16.8px !important;
    color: #86999c !important;
    font-weight: 400 !important;
}

.custom-age-question {
    background: white !important;
    border-radius: 11px !important;
}


.age-btn {

    border: 1px solid #7a9fa3 !important;
    font-size: 16.8px !important;
    font-weight: 400 !important;
    width: 50px;
    
}

.custom-age-question {
    justify-content: center !important;
}/* End custom CSS */