/* ============================================================
   dataservices-proven-results.css — "Proven results" (ISOLADO, .dspr / .dspr__*).
   Figma wj751PZmufds2NrCTA8fcV: 1920 378:10480 · 1440 378:8849 · 992 378:9046 ·
   768 378:9531 · mobile 378:10043.
   Tokens da host. Desktop-first (base fiel ao 1440). Breakpoints: 1024 · 768 · 680
   (mapeiam, na ordem, os frames 992 / 768 / mobile).

   ⚠️ BACKGROUND: preto #010101 (--bg-inverse).
   ⚠️ SEM padding-bottom (menos no mobile): no Figma esta section encosta na de baixo.
   ============================================================ */
.dspr {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    /*padding: 80px 40px 0;*/
    /*background: var(--bg-inverse);*/
}

    /* ---------- cabeçalho ---------- */
    .dspr .dspr__text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 100%;
        max-width: 1200px;
    }
    /* variante escura da .tag compartilhada (fundo cinza-escuro, texto branco) */
    .dspr .dspr__tag {
        background: var(--bg-neutral-dark);
        color: var(--title-inverse);
    }
    /* display com gradiente HORIZONTAL: branco → lavender (48.6%) → branco.
   269.8deg ≈ "to left", então o miolo roxo cai no centro do bloco de 2 linhas. */
    .dspr .dspr__display {
        margin: 0;
        width: 100%;
        font-family: var(--font-sans);
        font-weight: var(--fw-extralight);
        font-size: 96px;
        line-height: 96px;
        letter-spacing: 0;
        text-align: center;
        background-image: linear-gradient(269.814deg, #ffffff 0%, var(--lavender-500) 48.559%, #ffffff 99.94%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* ---------- os 3 números ---------- */
    .dspr .dspr__cards {
        display: flex;
        align-items: flex-start;
        gap: 40px;
        width: 100%;
        max-width: 1200px;
    }

    .dspr .numberCard__upperTitle {
        font-family: var(--font-tpSans-light);
        font-size: 18px;
        color: #3E4854;
        margin: 0;
    }

    /* ⚠️ SEM overflow:clip (o Figma tem, nós não): no frame 1440 o "100K+" termina EXATAMENTE
   na borda do card — os dígitos da nossa TP Sans saem ~6px mais largos, e com clip esses
   6px do "+" seriam cortados. Deixando visível eles caem no respiro de 40px da section
   (fundo preto, invisível) e a linha fica idêntica ao frame. Abaixo de 1400 o 3º card passa
   a ter largura natural (é o que o próprio Figma faz no 992) e nada mais transborda. */
    .dspr .dspr__card {
        flex: 1 0 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        height: 280px;
        padding: 24px;
    }

    .dspr .dspr__num-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    /* ⚠️ 3º card: número à esquerda (fiel ao Figma — ver comentário no HTML) */
    .dspr .dspr__card--start .dspr__num-wrap {
        align-items: flex-start;
    }

    .dspr .dspr__num {
        margin: 0;
        flex: none;
        font-family: var(--font-tpSans-thin);
        /*font-size: 144px;
        line-height: 144px;
        letter-spacing: 0;*/
        white-space: nowrap;
        color: var(--bg-primary-strong); /* #8051ff — title/primary-dark-mode */
    }

    .dspr .dspr__label {
        margin: 0;
        width: 100%;
        font-family: var(--font-sans);
        font-weight: var(--fw-extralight);
        /*font-size: var(--fs-40);
        line-height: var(--lh-40);
        letter-spacing: 0;*/
        text-align: center;
        color: var(--title-inverse);
    }

/* ============================================ ≤1400 — degrau 120px do frame 992 ====
   O frame 1440 divide a linha em 3 partes IGUAIS de 373px, e o "100K+" a 144px ocupa a
   largura inteira do card. Abaixo de 1440 o container encolhe e 144px deixa de caber, então
   o degrau de 120px do frame 992 entra já em 1400 (breakpoint que o projeto já usa) e o 3º
   card passa a ter largura natural — a mesma saída que o Figma adota no 992. */
@media (max-width: 1400px) {
    /*.dspr .dspr__num {
        font-size: 120px;
        line-height: 120px;
    }*/

    /*.dspr .dspr__card--start {
        flex: 0 0 auto;
    }*/
}

/* ================================================== ≤1024 — frame 992 ============= */
@media (max-width: 1024px) {
    .dspr .dspr__cards {
        gap: 24px;
    }
}

/* ============================================ ≤960 — frame 768 =====================
   ⚠️ Corte em 960 (e não em 768): com 120px os 3 números só cabem lado a lado até ~946px.
   Os frames continuam fiéis — 992 cai no bloco de cima, 768 neste. */
@media (max-width: 960px) {
    .dspr .dspr__display {
        font-size: 48px;
        line-height: 48px;
    }

    .dspr .dspr__card {
        height: auto;
        align-items: flex-start;
        justify-content: flex-start;
    }
    /* aqui o frame 768 volta a dividir a linha em 3 iguais (o 64px cabe em todos) */
    /*.dspr .dspr__card--start {
        flex: 1 0 0;
    }*/

    /*.dspr .dspr__num {
        font-size: 64px;
        line-height: 64px;
    }*/

    /*.dspr .dspr__num-wrap,
    .dspr .dspr__card--start .dspr__num-wrap {
        align-items: flex-start;
    }*/

    /*.dspr .dspr__label {
        font-size: var(--fs-32);
        line-height: var(--lh-32);
        text-align: left;
    }*/
}

/* ================================================== ≤680 — frame mobile =========== */
@media (max-width: 680px) {
    .dspr {
        /*padding: 40px 20px;*/ /* aqui o Figma FECHA a section embaixo */
        align-items: flex-start;
    }

        .dspr .dspr__text {
            align-items: flex-start;
        }

        .dspr .dspr__display {
            font-size: 40px;
            line-height: 40px;
            text-align: left;
        }

        .dspr .dspr__cards {
            flex-direction: column;
            gap: 40px;
        }

        .dspr .dspr__card {
            flex: none;
            width: 100%;
            padding: 0;
        }

    /*.dspr .dspr__num {
        font-size: 56px;
        line-height: 56px;
    }*/

    /*.dspr .dspr__label {
        font-size: var(--fs-24);
        line-height: var(--lh-24);
    }*/
}