/*
 * DoceLar — F16 · P1 · landing desktop (134835:8068, docs/18 §3).
 *
 * Carregada depois de dl-desktop (class-dl-front-assets.php). Mesmas regras de
 * dl-desktop: tudo em @layer dl-telas e dentro de @media — o mobile
 * (134834:3136) nunca avalia uma regra daqui acima de 1023.98px, e abaixo disso
 * só existe o display:none do markup que é exclusivo do desktop (dl-landing-*).
 *
 * Medidas a 1440 (Figma): hero 1440x715 de borda a borda; seções no miolo de
 * 1196 (--dl-largura-conteudo) separadas por 120; "Como funciona" em 978; CTA
 * 1440x541 de borda a borda, 160 abaixo de "Como funciona" e colado no rodapé.
 * O header pill e o rodapé estão em dl-desktop.css.
 *
 * [REVISÃO-DESKTOP:2026-10-01] slide 1 — o designer realinhou os banners no
 * Figma (134835:8068): hero e CTA deixaram de ser cartões de raio 32 com
 * respiro e passaram a sangrar até a borda da viewport, com o CTA encostado no
 * rodapé (que, na landing, também vai de borda a borda e perde o raio). A
 * imagem do CTA foi trocada pelo recorte novo do Figma (mais larga) e as ondas
 * (Vector 2/3 + Union) pelas versões de 1440. "Por que confiar" (134909:296)
 * ganhou 60 de respiro nos quatro lados, com a caixa abraçando o conteúdo.
 */

@layer dl-telas {

@media (min-width: 1024px) {
    /* ---------------------------------------------------------------- */
    /* Casca: o hero sobe por baixo do pill fixo e sangra até a borda      */
    /* ---------------------------------------------------------------- */
    body:has(.dl-f05-inicio) .dl-header {
        padding-top: 0;
    }

    body:has(.dl-f05-inicio) > main.dl-container {
        width: 100%;
        max-width: none;
        padding-inline: 0;
        padding-bottom: 0;
    }

    /* [REVISÃO-DESKTOP:2026-10-01] slide 1: o rodapé (134840:9530) começa onde o
       CTA termina e vai de borda a borda, sem raio. Só na landing: nas outras
       telas P1 não há banner acima dele e o cartão de dl-desktop.css segue. */
    body:has(.dl-f05-inicio) .dl-footer {
        margin: 0;
        border-radius: 0;
    }

    .dl-f05-inicio {
        gap: 120px;
        padding: 0;
    }

    /* Âncoras do header: a seção para abaixo do pill (24 + 64 + 24). */
    .dl-f05-inicio [data-dl-secao] {
        scroll-margin-top: 112px;
    }

    /* ---------------------------------------------------------------- */
    /* Hero — image 1 (134846:11305) + onda (Vector 2 + Union)           */
    /* ---------------------------------------------------------------- */
    /* Rectangle 11 (134836:8903): 1440x715 visíveis, sem raio. A chamada fica
       em x=122 (miolo de 1196) e a 57 da base. */
    .dl-f05-inicio__hero {
        isolation: isolate;
        width: 100%;
        margin-inline: 0;
        height: 715px;
        justify-content: flex-end;
        padding: 0 calc((100% - var(--dl-largura-conteudo)) / 2) 57px;
        border-radius: 0;
        background: var(--dl-azul-claro);
    }

    /* A foto do Figma é espelhada (w -100%): o espelho é CSS, o arquivo é o original. */
    .dl-f05-inicio__foto img {
        left: 0;
        top: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        transform: scaleX(-1);
    }

    .dl-f05-inicio__hero::before,
    .dl-f05-inicio__hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% 100%;
        pointer-events: none;
    }

    /* Vector 2 (403,2/717,94) e Union (379,5/717,94). */
    .dl-f05-inicio__hero::before {
        height: 56.16%;
        background-image: url("../img/inicio/desktop-hero-onda.svg");
    }

    .dl-f05-inicio__hero::after {
        height: 52.86%;
        background-image: url("../img/inicio/desktop-hero-union.svg");
    }

    /* Sem o chip de cidade no desktop (não está em 134835:8068). */
    .dl-f05-inicio__cidade {
        display: none;
    }

    .dl-f05-inicio__chamada,
    .dl-f05-inicio__cta-hero {
        z-index: 2;
    }

    .dl-f05-inicio__chamada {
        max-width: 449px;
        gap: 20px;
        margin-top: 0;
    }

    .dl-f05-inicio__chamada h1 {
        font-size: 44px;
        font-weight: 600;
        line-height: 40px;
        letter-spacing: -1px;
    }

    .dl-f05-inicio__chamada p {
        font-size: 16px;
        line-height: 1.5;
    }

    .dl-f05-inicio__cta-hero {
        width: 335px;
        height: 48px;
        margin-top: 20px;
        padding-inline: 24px;
        font-size: 16px;
    }

    .dl-f05-inicio__cta-hero:hover {
        background: var(--dl-cinza-claro);
    }

    /* ---------------------------------------------------------------- */
    /* Seções no miolo de 1196; títulos Desktop/H1 44/40                 */
    /* ---------------------------------------------------------------- */
    .dl-f05-inicio__secao {
        width: var(--dl-largura-conteudo);
        max-width: 100%;
        margin-inline: auto;
    }

    .dl-f05-inicio__cabeca {
        gap: 20px;
    }

    .dl-f05-inicio__cabeca h2 {
        font-size: 44px;
        font-weight: 600;
        line-height: 40px;
        letter-spacing: -1px;
    }

    .dl-f05-inicio__cabeca p {
        font-size: 16px;
        line-height: 1.5;
    }

    /* ---------------------------------------------------------------- */
    /* "Escolha o tipo de limpeza" (134836:9096): foto 488x524 · 60 ·    */
    /* título + acordeão 648, alinhados ao topo da foto                  */
    /* ---------------------------------------------------------------- */
    .dl-f05-inicio__secao--tipos {
        display: grid;
        grid-template-columns: minmax(0, 488fr) minmax(0, 648fr);
        grid-template-rows: auto auto 1fr;
        column-gap: 60px;
        row-gap: 0;
    }

    .dl-landing-tipos__foto {
        grid-column: 1;
        grid-row: 1 / -1;
        align-self: start;
        display: block;
        height: 524px;
        overflow: hidden;
        border-radius: 24px;
    }

    /* Recorte do Figma: a foto a 161,4% da largura, deslocada -37,96%. */
    .dl-landing-tipos__foto img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 61.8% 50%;
    }

    .dl-f05-inicio__secao--tipos .dl-f05-inicio__cabeca {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 40px;
    }

    /* O apoio "Selecione a opção ideal para você ." e os cards-link são do mobile. */
    .dl-f05-inicio__secao--tipos .dl-f05-inicio__cabeca p,
    .dl-f05-inicio__pacotes {
        display: none;
    }

    .dl-landing-tipos {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* Card/Serviço (134836:8944): branco, borda cinza-10, raio 12. */
    /* [REVISÃO-DESKTOP:2026-10-01] slide 6: os cards do acordeão levam a sombra de card no lugar da borda,
       como o mesmo acordeão no tipo-de-limpeza. */
    .dl-landing-tipo {
        background: var(--dl-branco);
        border: 0;
        border-radius: var(--dl-radius-card);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-landing-tipo__cabeca {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 24px 12px 12px;
        border-radius: var(--dl-radius-card);
        list-style: none;
        cursor: pointer;
    }

    /* O aberto não fecha pelo cabeçalho (dl-inicio-desktop.js): sem mãozinha. */
    .dl-landing-tipo[open] .dl-landing-tipo__cabeca {
        cursor: default;
    }

    .dl-landing-tipo__cabeca::-webkit-details-marker {
        display: none;
    }

    /* Ícone 36 em caixa azul raio 4 — o SVG da Padrão é só o glifo. */
    .dl-landing-tipo__icone {
        display: grid;
        place-items: center;
        flex: none;
        width: 36px;
        height: 36px;
        overflow: hidden;
        border-radius: 4px;
        background: var(--dl-azul);
    }

    .dl-landing-tipo__titulo {
        flex: 1 1 auto;
        font-size: 24px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: -0.5px;
        color: var(--dl-azul-claro);
    }

    .dl-landing-tipo__seta {
        flex: none;
        transform: rotate(90deg);
        transition: transform var(--dl-dur-lenta) var(--dl-ease-troca);
    }

    .dl-landing-tipo[open] .dl-landing-tipo__seta {
        transform: rotate(-90deg);
    }

    .dl-landing-tipo__corpo {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 12px 24px 24px;
    }

    .dl-landing-tipo__corpo p {
        margin: 0;
        font-size: 16px;
        line-height: 1.5;
        color: var(--dl-cinza-50);
    }

    .dl-landing-tipo__itens {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .dl-landing-tipo__itens li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 16px;
        line-height: 1.5;
        color: var(--dl-cinza-50);
    }

    /* A Pesada tem 10 itens: duas colunas, lidas de cima para baixo. */
    .dl-landing-tipo--pesada .dl-landing-tipo__itens {
        display: block;
        columns: 2;
        column-gap: 24px;
    }

    .dl-landing-tipo--pesada .dl-landing-tipo__itens li {
        break-inside: avoid;
    }

    .dl-landing-tipo--pesada .dl-landing-tipo__itens li + li {
        margin-top: 12px;
    }

    /* O SVG do check (20x15) traz o respiro do traço: a caixa do Figma é 17x12. */
    .dl-landing-tipo__itens img {
        flex: none;
        margin: -1.5px;
    }

    /* ---------------------------------------------------------------- */
    /* "Por que confiar na DoceLar" (134840:9499 / 134840:9494)          */
    /* ---------------------------------------------------------------- */
    /* [REVISÃO-DESKTOP:2026-10-01] slide 1 (134909:296): 60 de respiro nos
       quatro lados e a caixa do tamanho do conteúdo (1229 a 1440), centrada.
       Slide 6: a sombra é a dos cards do desktop (--dl-d-sombra-card). */
    .dl-f05-inicio__secao--confiar {
        --dl-confiar-card: 360px;
        --dl-confiar-k: 1;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 120px;
        box-sizing: border-box;
        width: fit-content;
        padding: 60px;
        border-radius: 32px;
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-f05-inicio__secao--confiar .dl-f05-inicio__cabeca {
        flex: 0 1 323px;
    }

    /* O acordeão de details é do mobile. */
    .dl-f05-inicio__confiar {
        display: none;
    }

    /* Os três cards na mesma célula, deslocados como no Figma: Qualidade
       (0,0) · Preço (148,82) · Segurança (306,163). */
    .dl-landing-confiar {
        display: grid;
        flex: none;
    }

    .dl-landing-confiar__card {
        grid-area: 1 / 1;
        align-self: start;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        box-sizing: border-box;
        width: var(--dl-confiar-card);
        margin: 0;
        padding: 28px;
        border: 0;
        border-radius: var(--dl-radius-card);
        /* [FIGMA-NOTA:134836:9162] "os outros cards ficam com 50% de transparencia".
           O card é azul a 50% sobre o branco da seção, como cor sólida e não
           opacity: com opacity os dois cards de trás, sobrepostos, deixavam um
           o texto do outro vazar. Sobre o branco o resultado é o mesmo. */
        background: color-mix(in srgb, var(--dl-azul) 50%, var(--dl-branco));
        color: var(--dl-branco);
        font: inherit;
        text-align: left;
        cursor: pointer;
        z-index: 1;
        /* [FIGMA-NOTA:134836:9162] 50% ↔ 100% em 200ms. O z-index troca no
           meio do fade (atraso de metade da duração), não antes dele. */
        transition:
            background-color var(--dl-dur-base) var(--dl-ease-troca),
            z-index 0s linear calc(var(--dl-dur-base) / 2);
    }

    .dl-landing-confiar__card--preco {
        margin: calc(82px * var(--dl-confiar-k)) 0 0 calc(148px * var(--dl-confiar-k));
    }

    .dl-landing-confiar__card--seguranca {
        margin: calc(163px * var(--dl-confiar-k)) 0 0 calc(306px * var(--dl-confiar-k));
    }

    .dl-landing-confiar__card.is-selecionado {
        --dl-sombra-propria: var(--dl-d-sombra-card);
        background: var(--dl-azul);
        z-index: 2;
        box-shadow: var(--dl-sombra-propria);
    }

    /* Foco de teclado traz o card à frente para o anel não ficar escondido. */
    .dl-landing-confiar__card:focus-visible {
        z-index: 3;
        box-shadow: var(--dl-foco-anel), var(--dl-sombra-propria, 0 0 transparent);
    }

    .dl-landing-confiar__topo {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .dl-landing-confiar__topo img {
        flex: none;
    }

    /* O SVG do escudo (34x42) traz o respiro do traço: a caixa do Figma é 32x40. */
    .dl-landing-confiar__card--seguranca .dl-landing-confiar__topo img {
        margin: -1px;
    }

    .dl-landing-confiar__titulo {
        font-size: 24px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: -0.5px;
    }

    /* Larguras das caixas de título do Figma: a quebra de linha é a do desenho. */
    .dl-landing-confiar__card--preco .dl-landing-confiar__titulo {
        max-width: 170px;
    }

    .dl-landing-confiar__card--qualidade .dl-landing-confiar__titulo {
        max-width: 239px;
    }

    .dl-landing-confiar__card--seguranca .dl-landing-confiar__titulo {
        max-width: 204px;
    }

    .dl-landing-confiar__texto {
        font-size: 16px;
        line-height: 1.5;
        color: color-mix(in srgb, var(--dl-branco) 72%, transparent);
    }

    /* ---------------------------------------------------------------- */
    /* "Como funciona" (134840:9466): 978 de largura, 4 linhas           */
    /* ---------------------------------------------------------------- */
    .dl-f05-inicio__secao--passos {
        width: min(978px, var(--dl-largura-conteudo));
        align-items: center;
        gap: 80px;
    }

    .dl-f05-inicio__secao--passos .dl-f05-inicio__cabeca {
        max-width: 720px;
        align-items: center;
        text-align: center;
    }

    .dl-f05-passos,
    .dl-f05-passos__pontos {
        display: none;
    }

    .dl-landing-passos {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .dl-landing-passo {
        display: flex;
        align-items: stretch;
        gap: 12px;
    }

    .dl-landing-passo__foto {
        display: block;
        flex: 0 0 192px;
        height: 154px;
        overflow: hidden;
        border-radius: 10px;
        background: var(--dl-cinza-10);
    }

    .dl-landing-passo__foto img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* A faixa escurece de linha em linha: um degradê azul-claro → azul
       contínuo pelas quatro, como no Figma. */
    .dl-landing-passo__faixa {
        --dl-passo-de: 0%;
        --dl-passo-ate: 25%;
        --dl-passo-numero: 10%;
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        box-sizing: border-box;
        min-height: 154px;
        padding: 32px;
        border-radius: 10px;
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--dl-azul) var(--dl-passo-de), var(--dl-azul-claro)),
            color-mix(in srgb, var(--dl-azul) var(--dl-passo-ate), var(--dl-azul-claro))
        );
        color: var(--dl-branco);
    }

    .dl-landing-passo:nth-child(2) .dl-landing-passo__faixa {
        --dl-passo-de: 25%;
        --dl-passo-ate: 50%;
        --dl-passo-numero: 35%;
    }

    .dl-landing-passo:nth-child(3) .dl-landing-passo__faixa {
        --dl-passo-de: 50%;
        --dl-passo-ate: 75%;
        --dl-passo-numero: 62%;
    }

    .dl-landing-passo:nth-child(4) .dl-landing-passo__faixa {
        --dl-passo-de: 75%;
        --dl-passo-ate: 100%;
        --dl-passo-numero: 88%;
    }

    .dl-landing-passo__textos {
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-width: 580px;
    }

    .dl-landing-passo__textos h3 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: -0.5px;
        color: var(--dl-branco);
    }

    .dl-landing-passo__textos p {
        margin: 0;
        font-size: 16px;
        line-height: 1.5;
        color: var(--dl-branco);
    }

    .dl-landing-passo__numero {
        display: grid;
        place-items: center;
        flex: none;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: var(--dl-cinza-claro);
        font-size: 32px;
        font-weight: 600;
        line-height: 36px;
        letter-spacing: -1px;
        color: color-mix(in srgb, var(--dl-azul) var(--dl-passo-numero), var(--dl-azul-claro));
    }

    /* ---------------------------------------------------------------- */
    /* Banner CTA — Rectangle 43 (134840:9500) + onda espelhada          */
    /* ---------------------------------------------------------------- */
    /* [REVISÃO-DESKTOP:2026-10-01] slide 1: 1440x541 de borda a borda, sem raio,
       160 abaixo de "Como funciona" (120 do gap + 40) e colado no rodapé. Os
       botões ficam a 50 da borda direita do miolo de 1196 e a 48 da base. */
    .dl-f05-inicio__ctas {
        position: relative;
        isolation: isolate;
        box-sizing: border-box;
        width: 100%;
        height: 541px;
        margin: 40px 0 0;
        justify-content: flex-end;
        align-items: flex-end;
        padding: 0 calc((100% - var(--dl-largura-conteudo)) / 2 + 50px) 48px;
        overflow: hidden;
        border-radius: 0;
        background: var(--dl-azul-claro);
    }

    .dl-landing-cta__foto {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
    }

    .dl-landing-cta__foto img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    /* Vector 3 (1467x288 em x=0) e Union (1485,54x251,44 em x=−17,54),
       espelhadas no Figma e mais largas que o banner: o excesso é cortado. */
    .dl-f05-inicio__ctas::before,
    .dl-f05-inicio__ctas::after {
        content: "";
        position: absolute;
        bottom: 0;
        z-index: 1;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% 100%;
        transform: scaleX(-1);
        pointer-events: none;
    }

    .dl-f05-inicio__ctas::before {
        left: 0;
        width: calc(100% * 1467 / 1440);
        height: calc(100% * 288 / 541);
        background-image: url("../img/inicio/desktop-cta-onda.svg");
    }

    .dl-f05-inicio__ctas::after {
        left: calc(100% * -17.54 / 1440);
        width: calc(100% * 1485.54 / 1440);
        height: calc(100% * 251.44 / 541);
        background-image: url("../img/inicio/desktop-cta-union.svg");
    }

    .dl-f05-inicio__ctas .dl-botao {
        position: relative;
        z-index: 2;
        width: 335px;
        height: 48px;
        padding-inline: 24px;
        font-size: 16px;
    }

    /* No banner o segundo botão é branco com texto marinho (134840:9506). */
    .dl-f05-inicio__ctas .dl-f05-botao--claro {
        background: var(--dl-branco);
        color: var(--dl-azul-marinho);
    }

    .dl-f05-inicio__ctas .dl-f05-botao--claro:hover {
        background: var(--dl-cinza-claro);
    }
}

/* 1024–1279: o miolo encolhe para 922; os cards de "Por que confiar" e o vão
   entre título e cards encolhem na mesma proporção dos deslocamentos. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .dl-f05-inicio__secao--confiar {
        --dl-confiar-card: 300px;
        --dl-confiar-k: 0.78;
        gap: 48px;
    }

    .dl-f05-inicio__secao--confiar .dl-f05-inicio__cabeca {
        flex-basis: 240px;
    }
}

/* Rolagem suave pelas âncoras do header — só na landing e só sem motion reduzido. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    html:has(.dl-f05-inicio) {
        scroll-behavior: smooth;
    }
}

/* ---------------------------------------------------------------------- */
/* Motion da landing (docs/19 §5.2) [TELA-NOVA:2026-09-25] salvo onde diz. */
/* Entradas esperam o splash sair (html:not(.dl-splash-ativo)) e usam fill */
/* `backwards`, nunca `both`: nada de transform residual.                  */
/* ---------------------------------------------------------------------- */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    /* A foto do hero é espelhada (scaleX(-1)): assenta de 1,03 para 1. */
    @keyframes dl-inicio-foto {
        from {
            transform: scale(-1.03, 1.03);
        }
    }

    @keyframes dl-inicio-item {
        from {
            opacity: 0;
            transform: translateX(-8px);
        }
    }

    /* Hero: foto assenta em 600ms; título → texto → CTA em cascata. */
    html:not(.dl-splash-ativo) .dl-f05-inicio__foto img {
        animation: dl-inicio-foto 600ms var(--dl-ease-saida) backwards;
    }

    html:not(.dl-splash-ativo) .dl-f05-inicio__chamada > *,
    html:not(.dl-splash-ativo) .dl-f05-inicio__cta-hero {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
        animation-delay: 120ms;
    }

    html:not(.dl-splash-ativo) .dl-f05-inicio__chamada > :nth-child(2) {
        animation-delay: 200ms;
    }

    html:not(.dl-splash-ativo) .dl-f05-inicio__cta-hero {
        animation-delay: 280ms;
    }

    /* "Escolha o tipo": o corpo do details abre e fecha pela altura
       (::details-content + interpolate-size do :root). Sem suporte (Chrome
       < 131, Firefox), o seletor é inválido, a regra cai e o acordeão abre
       de uma vez, como antes. */
    .dl-landing-tipo::details-content {
        block-size: 0;
        overflow-y: clip;
        transition: block-size var(--dl-dur-lenta) var(--dl-ease-troca), content-visibility var(--dl-dur-lenta) allow-discrete;
    }

    .dl-landing-tipo[open]::details-content {
        block-size: auto;
    }

    /* Ao abrir, o texto e os itens do check entram em cascata de 30ms. */
    html:not(.dl-splash-ativo) .dl-landing-tipo[open] .dl-landing-tipo__corpo > p {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
        animation-delay: 60ms;
    }

    html:not(.dl-splash-ativo) .dl-landing-tipo[open] .dl-landing-tipo__itens li {
        animation: dl-inicio-item var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
        animation-delay: calc(100ms + var(--dl-item, 0) * 30ms);
    }

    .dl-landing-tipo__itens li:nth-child(2) { --dl-item: 1; }
    .dl-landing-tipo__itens li:nth-child(3) { --dl-item: 2; }
    .dl-landing-tipo__itens li:nth-child(4) { --dl-item: 3; }
    .dl-landing-tipo__itens li:nth-child(5) { --dl-item: 4; }
    .dl-landing-tipo__itens li:nth-child(6) { --dl-item: 5; }
    .dl-landing-tipo__itens li:nth-child(7) { --dl-item: 6; }
    .dl-landing-tipo__itens li:nth-child(8) { --dl-item: 7; }
    .dl-landing-tipo__itens li:nth-child(9) { --dl-item: 8; }
    .dl-landing-tipo__itens li:nth-child(n + 10) { --dl-item: 9; }

    /* "Por que confiar" [FIGMA-NOTA:134836:9162]: o selecionado sobe 4px
       com a sombra de destaque; os outros voltam ao lugar. */
    .dl-landing-confiar__card {
        transition:
            background-color var(--dl-dur-base) var(--dl-ease-troca),
            transform var(--dl-dur-lenta) var(--dl-ease-saida),
            box-shadow var(--dl-dur-lenta) var(--dl-ease-saida),
            z-index 0s linear calc(var(--dl-dur-base) / 2);
    }

    .dl-landing-confiar__card.is-selecionado {
        --dl-sombra-propria: var(--dl-d-sombra-destaque);
        transform: translateY(-4px);
    }

    .dl-landing-confiar__card:active:not(.is-selecionado) {
        transform: scale(0.99);
    }

    /* "Como funciona": a faixa entra ao rolar (DL.motion.revelar, em
       dl-inicio-desktop.js) e o número dá um pop com mola logo depois. */
    .dl-landing-passo.is-visivel .dl-landing-passo__numero {
        animation: dl-d-pop var(--dl-dur-lenta) var(--dl-ease-mola) backwards;
        animation-delay: 240ms;
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .dl-landing-tipo__seta {
        transition: none;
    }

    /* O selecionado continua destacado pela cor; só não anda. */
    .dl-landing-confiar__card {
        transition:
            background-color var(--dl-dur-rapida) linear,
            z-index 0s linear calc(var(--dl-dur-rapida) / 2);
    }
}

/* Markup exclusivo do desktop: sai no HTML em toda largura e some abaixo de
   1024 — o mobile continua idêntico a 134834:3136. */
@media (max-width: 1023.98px) {
    .dl-landing-tipos__foto,
    .dl-landing-tipos,
    .dl-landing-confiar,
    .dl-landing-passos,
    .dl-landing-cta__foto {
        display: none;
    }
}

}