/* Working Process component styles */
.working-process {
    background: #f5f8f6;
    /* tono claro como la imagen */
    border-radius: 16px;
}

.working-process .wp-title {
    font-weight: 800;
    color: #12231e;
}

/* Steps */
.wp-step {
    position: relative;
    padding-bottom: 1rem;
    transition: transform .2s ease;
}

.wp-icon {
    width: 120px;
    height: 120px;
}

.wp-icon .wp-icon-circle {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    background: #e9f0ec;
    font-size: 36px;
    color: #2f6a55;
}

.wp-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-primary-600);
    color: #fff;
    font-weight: 800;
    border-radius: 999px;
    font-size: .8rem;
    padding: .35rem .5rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.wp-step-title {
    margin-bottom: .25rem;
}

.wp-step-text {
    color: #4e5e58;
    margin: 0 auto;
    max-width: 260px;
}

/* Arrows between steps (solo desktop) */
.wp-step .wp-arrow {
    position: absolute;
    right: -28px;
    top: 48px;
    color: #97a8a1;
    opacity: .7;
    font-size: 22px;
}

/* Intercalado (zig-zag) y flechas direccionadas - Desktop */
@media (min-width: 992px) {

    /* Bajar los pares para intercalar */
    .wp-steps>div:nth-child(2) .wp-step,
    .wp-steps>div:nth-child(4) .wp-step {
        margin-top: 38px;
    }

    /* Flecha del 1 al 2: ligera bajada */
    .wp-steps>div:nth-child(1) .wp-arrow {
        top: 56px;
        transform: rotate(15deg);
        display: inline-flex;
    }

    /* Flecha del 2 al 3: ligera subida */
    .wp-steps>div:nth-child(2) .wp-arrow {
        top: 18px;
        transform: rotate(-15deg);
        display: inline-flex;
    }

    /* Flecha del 3 al 4: ligera bajada */
    .wp-steps>div:nth-child(3) .wp-arrow {
        top: 56px;
        transform: rotate(15deg);
        display: inline-flex;
    }

    /* Último sin flecha */
    .wp-steps>div:last-child .wp-arrow {
        display: none !important;
    }
}

/* Responsivo */
@media (max-width: 991.98px) {
    .working-process {
        border-radius: 12px;
    }

    /* Apilar sin zig-zag en móvil; flecha opcional oculta */
    .wp-steps>div .wp-step {
        margin-top: 0;
    }

    .wp-step .wp-arrow {
        display: none !important;
    }
}