.como-funciona {
    background-color: var(--color-primary-dark);
    color: var(--color-neutral-100);
}

.como-funciona .section__title {
    color: var(--color-neutral-100);
}

.como-funciona .section__subtitle {
    color: var(--color-secondary);
}

.como-funciona__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    counter-reset: step;
}

@media (min-width: 768px) {
    .como-funciona__steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.como-funciona__step {
    text-align: center;
    counter-increment: step;
    position: relative;
}

.como-funciona__step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background-color: var(--color-secondary);
    color: var(--color-neutral-100);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-2xl);
    margin: 0 auto var(--spacing-md);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 2;
}

.como-funciona__step-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-neutral-100);
    margin-bottom: var(--spacing-sm);
}

.como-funciona__step-text {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-300);
    line-height: var(--line-height-relaxed);
    max-width: 280px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .como-funciona__step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 32px;
        left: 50%;
        width: calc(100% + var(--spacing-xl));
        height: 2px;
        background-color: var(--color-secondary);
        opacity: 0.8;
        z-index: 1;
    }
}