/* ==========================================================
   COMPONENTE C-STEPS
   Timeline de pasos numerados con línea conectora.
   Genérico: sirve para cualquier "proceso en N pasos"
   (activación, onboarding, cómo funciona, etc).
   Los textos de cada paso reutilizan c-card__title / c-card__text.
========================================================== */

.c-steps{
    position:relative;
    margin-top:var(--space-xl);
}

/* Línea conectora entre los íconos (solo desktop, 4 columnas) */
.c-steps::before{
    content:"";
    position:absolute;
    top:88px;
    left:12.5%;
    right:12.5%;
    height:1px;
    background:var(--color-border);
    z-index:0;
}

.c-steps__step{
    position:relative;
    padding-top:56px;
}

/* Número grande de fondo */
.c-steps__number{
    position:absolute;
    top:0;
    left:0;
    right:0;
    font-family:var(--font-title-family);
    font-size:3.5rem;
    font-weight:var(--font-weight-extrabold);
    line-height:1;
    color:var(--color-primary-blue);
    z-index:0;
    margin-top: -2rem;
}

/* Ícono */
.c-steps__icon{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center;
    align-items:center;
    width:var(--icon-size-md);
    height:var(--icon-size-md);
    margin:-20px auto var(--space-sm);
    background:var(--color-white);
    border:2px solid var(--color-border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    color:var(--color-primary-blue);
    font-size:1.4rem;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:991.98px){

    .c-steps::before{
        display:none;
        }
 .c-steps__step {
    margin-top: 3rem;
}   
}