.dswt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacer-arrow);
}

    /* ---------- cabeçalho ---------- */
    .dswt .dswt__text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 100%;
        max-width: 784px;
    }

    .dswt .dswt__tag {
        background: var(--bg-neutral-dark);
        color: var(--title-inverse);
    }

    .dswt .dswt__display {
        margin: 0;
        width: 100%;
        font-family: var(--font-sans);
        font-weight: var(--fw-extralight);
        font-size: var(--fs-80);
        line-height: var(--lh-80);
        letter-spacing: 0;
        text-align: center;
        background-image: linear-gradient(270deg, var(--grey-950) 0%, var(--lavender-500) 48.558%, var(--grey-950) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .dswt .dswt__actions {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .dswt .dswt__cta {
        text-decoration: none;
    }

    /* ---------- os 4 itens numerados (desktop: grid real) ---------- */
    .dswt .dswt__grid-wrap {
        width: 100%;
    }

    .dswt .dswt__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 540px));
        justify-content: center;
        gap: 80px;
        width: 100%;
    }

    .dswt .tpc__nav {
        display: none;
    }

    .dswt .dswt__item {
        display: flex;
        align-items: flex-start;
        gap: 24px;
        min-width: 0;
        width: 100%;
    }

    .dswt .dswt__num {
        flex: none;
        margin: 0;
        font-family: var(--font-sans);
        font-weight: var(--fw-extralight);
        white-space: nowrap;
    }

    .dswt .dswt__content {
        flex: 1 1 0;
        min-width: 0;
        max-width: 438px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding-top: 24px;
    }

    .dswt .dswt__title,
    .dswt .dswt__body {
        margin: 0;
        width: 100%;
        font-family: var(--font-sans);
        font-weight: var(--fw-extralight);
    }

@media (prefers-reduced-motion: reduce) {
    .dswt .dswt__grid {
        transition: none;
    }
}

/* ============================================================
   ≤1024 — a grade vira FAIXA paginada (carrossel de verdade)
   ============================================================ */
@media (max-width: 1024px) {
    .dswt .dswt__grid {
        display: flex;
        grid-template-columns: none;
        width: max-content; /* devolve o modelo do motor (o grid desktop forçava 100%) */
        justify-content: flex-start; /* o center do desktop deslocava tudo −metade do overflow */
    }

    .dswt .tpc__slide {
        flex: none;
        width: min(420px, calc(100vw - 120px)); /* vw, não %: contra track max-content, % é circular */
        max-width: none;
    }

    .dswt .tpc__nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .dswt .dswt__display {
        font-size: var(--fs-64);
        line-height: var(--lh-64);
    }

    .dswt .tp-carousel {
        --tpc-gap: 24px;
    }

    .dswt .dswt__content {
        padding-top: 8px;
    }
    .dswt .dswt__grid {
        gap: 24px;
    }
    /* direto no grid: o --tpc-gap não alcança (o gap:80 vence) */
}

/* ================================================== ≤680 — frame mobile ===========
   O item EMPILHA (número acima do texto) e cabe um por página. */
@media (max-width: 680px) {
    .dswt {
        padding: 40px 20px;
    }

        .dswt .dswt__text {
            align-items: flex-start;
        }

        .dswt .dswt__display {
            font-size: var(--fs-56);
            line-height: var(--lh-56);
            text-align: left;
        }

        .dswt .tpc__slide {
            width: 320px;
        }

        .dswt .dswt__item {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            min-height: 192px;
        }

        .dswt .dswt__content {
            flex: none;
            width: 100%;
            max-width: none;
            padding-top: 8px;
        }
        .dswt .tpc__slide {
            width: min(320px, calc(100vw - 80px));
        }
}