.stepper-wrap{width:100%;background-color:var(--color50);border-bottom:1px solid var(--color400);padding:.4rem 1rem}
.stepper{display:flex;align-items:center;justify-content:center;max-width:600px;margin:0 auto}
.step-item{display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:54px}
.step-circle{width:1.6rem;height:1.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;border:2px solid;transition:all .3s;font-family:var(--fuente-2)}
.step-label{font-family:var(--fuente-2);font-size:.65rem;text-align:center;white-space:nowrap}
.step-connector{flex:1;height:2px;min-width:20px;margin-bottom:1.1rem;transition:background-color .3s}

.step-item.completed .step-circle{background-color:var(--color800);border-color:var(--color800);color:var(--color50)}
.step-item.completed .step-label{color:var(--color800)}
.step-connector.done{background-color:var(--color800)}

.step-item.active .step-circle{background-color:var(--color600);border-color:var(--color600);color:var(--color50);box-shadow:0 0 0 3px rgba(83,150,205,.25)}
.step-item.active .step-label{color:var(--color600);font-weight:700}

.step-item.pending .step-circle{background-color:transparent;border-color:var(--color400);color:var(--color400)}
.step-item.pending .step-label{color:var(--color400)}
.step-connector{background-color:var(--color400)}

@media(max-width:640px){.step-label{display:none}.step-connector{min-width:16px}}