/* ==========================================================================
   Solucoes Diferenciais — Differentials section
   ========================================================================== */

.srv-diferenciais {
    padding: clamp(45px, 3.49vw, 67px) 0 0;
    background: #F8F9FC;
}

/* Header — two columns */
.srv-diferenciais__header {
    display: flex;
    gap: 80px;
    align-items: flex-start;
    margin-bottom: 48px;
}

.srv-diferenciais__header-left {
    flex: 1;
}

.srv-diferenciais__header-right {
    flex: 1;
    padding-top: 48px;
}

.srv-diferenciais__header-right p {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.7;
    color: #64748B;
}

/* Label with line */
.srv-diferenciais__label {
    font-family: var(--font-text);
    font-size: var(--fs-label);
    font-weight: 400;
    color: var(--color-dark);
    line-height: 1.7;
    letter-spacing: -0.18px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.srv-diferenciais__line {
    display: inline-block;
    width: 71px;
    height: 0;
    border-top: 1.5px solid var(--color-primary);
    flex-shrink: 0;
}

/* Title */
.srv-diferenciais__title {
    font-family: var(--font-heading);
    font-size: var(--fs-heading-2xl);
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.2;
}

/* Features card */
.srv-diferenciais__card {
    background: var(--color-white);
    border-radius: 24px;
    padding: 56px 32px;
    display: grid;
    /* 5 etapas numeradas em linha única no desktop. */
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(28px, 2vw, 40px) clamp(14px, 1vw, 18px);
    position: relative;
    z-index: 1;
    /* Overflow do card pra dentro da seção seguinte (#eff4ff).
       Negativo do token: o valor positivo mora em --diferenciais-card-overflow. */
    margin-bottom: calc(-1 * var(--diferenciais-card-overflow, 180px));
}

/* Compensa o overflow do card sobre a seção seguinte (mesmo token, direto) */
.srv-diferenciais + .srv-nrs,
.srv-diferenciais + .srv-outros {
    padding-top: calc(96px + var(--diferenciais-card-overflow, 180px));
}

/* Páginas de Condomínios (seção com CTA): desliga o "card flutuante" para a CTA
   ter o MESMO distanciamento padrão das outras seções, e zera a compensação da
   seção seguinte (o card não invade mais). Indústria não recebe a classe. */
.srv-diferenciais--has-cta .srv-diferenciais__card {
    margin-bottom: 0;
}

.srv-diferenciais--has-cta + .srv-nrs,
.srv-diferenciais--has-cta + .srv-outros {
    padding-top: 96px;
}

/* Feature item — ícone acima, depois badge numerado + título na mesma linha */
.srv-diferenciais__icon {
    width: clamp(58px, 3.5vw, 67px);
    height: clamp(58px, 3.5vw, 67px);
    border-radius: 12px;
    background: #F0F4FF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1F3A5F;
    flex-shrink: 0;
    margin-bottom: clamp(16px, 1.25vw, 24px);
}

.srv-diferenciais__icon svg {
    width: clamp(26px, 1.75vw, 34px);
    height: clamp(26px, 1.75vw, 34px);
}

.srv-diferenciais__feature-head {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 0.6vw, 10px);
}

/* Bolinha azul escuro com o número na cor do card (branco) */
.srv-diferenciais__number {
    flex-shrink: 0;
    width: clamp(21px, 1.34vw, 26px);
    height: clamp(21px, 1.34vw, 26px);
    border-radius: 50%;
    background: #1F3A5F;
    color: var(--color-white);
    display: grid;
    place-items: center;
    letter-spacing: normal;
    /* Inter (fonte do body): numerais uniformes, centralizam sem precisar de nudge */
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(12px, 0.83vw, 16px);
    line-height: 1;
}

.srv-diferenciais__feature-title {
    font-family: var(--font-heading);
    font-size: var(--fs-body-lg);
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.25;
}

.srv-diferenciais__feature-desc {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    line-height: 1.6;
    color: #64748B;
    margin-top: 12px;
}

/* Responsive — Tablet / Mobile */
@media (max-width: 1024px) {
    .srv-diferenciais__card {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .srv-diferenciais {
        padding: 56px 0;
    }

    .srv-diferenciais__header {
        flex-direction: column;
        gap: 24px;
    }

    .srv-diferenciais__header-right {
        padding-top: 0;
    }

    .srv-diferenciais__card {
        grid-template-columns: 1fr;
        padding: 32px;
        gap: 40px;
    }
}