/*
 * DoceLar — telas da F5: login 134834:3206, cadastro 134834:2984 · 3026 · 3080,
 * início 134834:3136, recuperar/redefinir senha e Endereços salvos [TELA-NOVA:2026-09-24].
 * Só var(--dl-*). Medidas do Figma; largura sempre como razão do shell (14).
 */

@layer dl-telas {

/* ------------------------------------------------------------------ */
/* Base comum                                                          */
/* ------------------------------------------------------------------ */

/* Largura cheia dentro do .dl-container, com ou sem o respiro aplicado pelo pai. */
.dl-f05-sangria {
    width: var(--dl-largura-shell);
    margin-inline: calc(50% - var(--dl-largura-shell) / 2);
}

/* Nas telas, o rótulo do campo é Body Tone 1 (14/600), não o 8px caixa alta do
   componente: é assim que 134834:3206/2984/3026/3080 o desenham. */
:is(.dl-f05-acesso, .dl-f05-cadastro, .dl-f05-enderecos, .dl-f05-drawer-endereco) .dl-campo {
    gap: 12px;
    margin-bottom: 0;
}

:is(.dl-f05-acesso, .dl-f05-cadastro, .dl-f05-enderecos, .dl-f05-drawer-endereco) .dl-campo__label {
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    letter-spacing: 0;
    text-transform: none;
    color: var(--dl-cinza-70);
}

/* O asterisco não existe no Figma: todo campo sem "Opcional" é obrigatório. */
:is(.dl-f05-acesso, .dl-f05-cadastro, .dl-f05-drawer-endereco) .dl-campo__obrigatorio {
    display: none;
}

/* Valor e placeholder em Body 2 (12), como nos campos das telas. */
:is(.dl-f05-acesso, .dl-f05-cadastro, .dl-f05-drawer-endereco) :is(.dl-campo__input, .dl-campo__select) {
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
}

.dl-f05-acesso .dl-campo__input::placeholder {
    color: var(--dl-cinza-50);
}

/* Botão/Primário em azul claro — "Criar conta como diarista" e "Quero trabalhar
   como diarista" (134834:3228 · 134834:3205). */
.dl-f05-botao--claro {
    background: var(--dl-azul-claro);
    color: var(--dl-branco);
}

@media (hover: hover) {
    .dl-f05-botao--claro:hover {
        background: color-mix(in srgb, var(--dl-azul-claro) 90%, var(--dl-preto));
    }
}

/* Link de apoio — "Esqueci minha senha" (Body 2 12 bold, azul claro, sublinhado). */
.dl-f05-link {
    display: block;
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-bold-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-azul-claro);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-box: trim-both cap alphabetic;
}

/* Aviso/Lembrete no formato das telas (RR de 134834:2984): altura pelo texto,
   padding 14/16, ícone 20, texto 12 a 70%. Cores: .dl-aviso--info do DS. */
.dl-f05-aviso {
    min-height: 0;
    gap: 12px;
    padding: 14px 16px 14px 14px;
}

.dl-f05-aviso .dl-aviso__texto {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: inherit;
    text-box: none;
}

.dl-f05-aviso .dl-aviso__texto > span {
    opacity: 0.7;
}

.dl-f05-aviso__titulo {
    font-weight: var(--dl-body2-bold-peso);
}

/* ------------------------------------------------------------------ */
/* Acesso — 134834:3206 e as telas de senha [TELA-NOVA:2026-09-24]      */
/* ------------------------------------------------------------------ */

.dl-f05-acesso {
    display: flex;
    flex-direction: column;
    padding-bottom: 21px;
}

/* Faixa azul: py 40, título H2 + apoio (gap 16), raio 24 embaixo. */
.dl-f05-hero-acesso {
    width: var(--dl-largura-shell);
    margin-inline: calc(50% - var(--dl-largura-shell) / 2);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px var(--dl-respiro-lateral);
    border-radius: 0 0 24px 24px;
    background: var(--dl-degrade-marca);
    text-align: center;
}

.dl-f05-hero-acesso__titulo {
    margin: 0;
    font-size: var(--dl-h2-tamanho);
    font-weight: var(--dl-h2-peso);
    line-height: var(--dl-h2-lh);
    color: var(--dl-branco);
    text-box: trim-both cap alphabetic;
}

.dl-f05-hero-acesso__texto {
    margin: 0;
    font-size: var(--dl-body1-tamanho);
    line-height: var(--dl-body1-lh);
    color: color-mix(in srgb, var(--dl-branco) 72%, transparent);
    text-box: trim-both cap alphabetic;
}

.dl-f05-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 60px;
}

.dl-f05-acesso .dl-campo__label {
    color: var(--dl-cinza-90);
}

.dl-f05-link--esqueci {
    align-self: flex-end;
}

/* 29 entre "Esqueci" e Entrar (474+9 → 512); os demais saltos são o gap 16. */
.dl-f05-acesso .dl-login__submit {
    margin-top: 13px;
}

.dl-f05-acesso :is(.dl-recuperar-senha__submit, .dl-redefinir-senha__submit) {
    margin-top: 8px;
}

.dl-f05-acesso > .dl-redefinir-senha__submit {
    margin-top: 60px;
}

.dl-f05-acesso > .dl-f05-aviso {
    margin-top: 60px;
}

.dl-f05-link--voltar {
    align-self: center;
    margin-top: 28px;
}

/* Divisor "ou": 327 de 335, linhas cinza 10, gap 12. */
.dl-f05-divisor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px calc(var(--dl-largura-conteudo) * 4 / 335) 0;
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-30);
}

.dl-f05-divisor::before,
.dl-f05-divisor::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--dl-cinza-10);
}

.dl-f05-divisor span {
    text-box: trim-both cap alphabetic;
}

.dl-f05-criar-conta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 28px;
}

/* ------------------------------------------------------------------ */
/* Cadastro — wizard 134834:2984 · 3026 · 3080                         */
/* ------------------------------------------------------------------ */

.dl-f05-cadastro {
    padding-top: 20px;
    padding-bottom: 38px;
}

.dl-f05-wizard .dl-multipassos__progresso {
    margin-bottom: 28px;
}

/* "Etapa 1 de 3" como na tela (a caixa alta é do componente-mestre).
   [DECISÃO:2026-09-25] Body 1 (14) em vez dos 8px do Figma, a pedido do usuário. */
.dl-f05-wizard .dl-multipassos__progresso-texto {
    margin-top: 4px;
    font-size: var(--dl-body1-tamanho);
    line-height: var(--dl-body1-lh);
    letter-spacing: 0;
    text-transform: none;
}

.dl-f05-passo {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.dl-f05-passo[hidden] {
    display: none;
}

.dl-f05-titulo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Título → campos: 22 em 134834:2984 e 40 em 3026/3080 (sobre o gap 24 do passo). */
.dl-f05-passo[data-passo="1"] .dl-f05-titulo {
    margin-bottom: -2px;
}

.dl-f05-passo:not([data-passo="1"]) .dl-f05-titulo {
    margin-bottom: 16px;
}

.dl-f05-titulo__h {
    margin: 0;
    font-size: var(--dl-h2-tamanho);
    font-weight: var(--dl-h2-peso);
    line-height: var(--dl-h2-lh);
    color: var(--dl-azul-marinho);
    text-box: trim-both cap alphabetic;
}

.dl-f05-titulo__sub {
    margin: 0;
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

.dl-f05-campos {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Campos do wizard: sem borda (fundo branco sobre o cinza); a borda de 1,5 fica
   transparente para o foco azul não empurrar o layout. */
.dl-f05-cadastro :is(.dl-campo__input, .dl-campo__select) {
    border-color: transparent;
}

.dl-f05-cadastro :is(.dl-campo__input, .dl-campo__select):focus {
    border-color: var(--dl-azul);
}

.dl-f05-linha {
    display: flex;
    gap: 10px;
}

.dl-f05-linha > * {
    flex: 1 1 0;
    min-width: 0;
}

.dl-f05-cidade__uf {
    flex: 0 0 calc(var(--dl-largura-conteudo) * 96 / 335);
}

/* O rótulo de campo das telas (acima) venceria o do componente de aceite. */
.dl-f05-cadastro .dl-aceite-termos .dl-campo__label {
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
    color: var(--dl-cinza-50);
}

/* Segmentado: rótulo a 16 das opções (134834:3092), não os 12 dos campos. */
:is(.dl-f05-cadastro, .dl-f05-drawer-endereco) .dl-campo.dl-segmentado {
    gap: 16px;
}

.dl-f05-acoes {
    margin-top: 24px;
}

/* O Figma não tem Voltar: a seta do header volta a etapa (dl-f05.js). */
.dl-f05-acoes [data-dl-passo-voltar] {
    display: none;
}

/* Imóvel: área + contadores com gap 8 (134834:3102), 40 abaixo do tipo de moradia. */
.dl-f05-imovel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

/* [DECISÃO:2026-10-01] D3 [TELA-NOVA:2026-10-01]: a pergunta da área externa segue o ritmo do bloco do imóvel. */
.dl-f05-area-externa:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.dl-f05-area-externa .dl-campo[hidden] {
    display: none;
}

.dl-f05-area__caixa {
    position: relative;
}

.dl-f05-area__caixa .dl-campo__input {
    padding-right: 48px;
    appearance: textfield;
    -moz-appearance: textfield;
}

.dl-f05-area__caixa .dl-campo__input::-webkit-inner-spin-button,
.dl-f05-area__caixa .dl-campo__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dl-f05-area__unidade {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-size: var(--dl-body2-tamanho);
    color: var(--dl-cinza-90);
    pointer-events: none;
}

/* Contador de 134834:3108: sem borda (a de 1px do componente fica transparente e
   já está descontada do padding 15/13/15/17 → 60 de altura), texto 12. */
.dl-f05-contador {
    border-color: transparent;
}

.dl-f05-contador .dl-contador__rotulo,
.dl-f05-contador .dl-contador__valor {
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
}

.dl-f05-contador .dl-contador__valor {
    min-width: 9px;
}

.dl-f05-contador .dl-contador__botao:not(:disabled) {
    border-color: var(--dl-azul-marinho);
    color: var(--dl-azul-marinho);
}

/* ------------------------------------------------------------------ */
/* Endereços salvos [TELA-NOVA:2026-09-24] — irmãs 134834:2872 · 4248   */
/* ------------------------------------------------------------------ */

.dl-f05-enderecos {
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 24px;
}

.dl-f05-enderecos__titulo {
    margin: 0 0 32px;
    font-size: var(--dl-h2-tamanho);
    font-weight: var(--dl-h2-peso);
    line-height: var(--dl-h2-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

.dl-f05-enderecos__lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dl-f05-enderecos__lista[hidden] {
    display: none;
}

.dl-f05-endereco {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding-right: 8px;
    box-sizing: border-box;
    border-radius: var(--dl-radius-card);
    background: var(--dl-branco);
}

/* O card todo (menos o X) abre a edição: o respiro do card é do botão, para a
   área de toque ir até a borda. */
.dl-f05-endereco__editar {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    align-self: stretch;
    padding: 12px 0 12px 16px;
    border: 0;
    border-radius: var(--dl-radius-card) 0 0 var(--dl-radius-card);
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.dl-f05-endereco__editar:focus-visible {
    outline: 2px solid var(--dl-azul);
    outline-offset: -2px;
}

.dl-f05-endereco__icone {
    color: var(--dl-azul);
}

.dl-f05-endereco__icone .dl-icone {
    width: 20px;
    height: 20px;
}

.dl-f05-endereco__texto {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.dl-f05-endereco__linha1 {
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul-marinho);
    text-box: trim-both cap alphabetic;
}

.dl-f05-endereco__linha2,
.dl-f05-endereco__imovel {
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

.dl-f05-endereco__imovel:empty {
    display: none;
}

.dl-f05-endereco__remover {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dl-cinza-50);
    cursor: pointer;
}

.dl-f05-endereco__remover .dl-icone {
    width: 20px;
    height: 20px;
}

.dl-f05-enderecos__adicionar {
    margin-top: 24px;
}

.dl-f05-endereco-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Na gaveta o fundo já é branco: o campo volta a ter a borda do componente. */
.dl-f05-drawer-endereco .dl-f05-contador {
    border-color: var(--dl-cinza-10);
}

/* ------------------------------------------------------------------ */
/* Tela de Início — 134834:3136                                         */
/* ------------------------------------------------------------------ */

/* overflow-x: clip — o cartão da pilha "Como funciona" sai pela lateral quando vai
   para o fundo; sem o recorte a página ganha rolagem lateral no celular. clip (não
   hidden) não vira contêiner de rolagem. Vai no main de fora (page.php), que tem a
   largura da tela e o respiro como padding: o .dl-f05-inicio é o main de dentro, já
   sem o respiro (335), e recortar nele cortava as laterais e os cantos de 24 do hero,
   que sangra até a borda. */
body:has(.dl-f05-inicio) > main.dl-container {
    overflow-x: clip;
}

.dl-f05-inicio {
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding-bottom: 20px;
}

/* Faixa de 620 com a foto posicionada como no Figma (159,57% × auto, -29,54% /
   27,73%). */
.dl-f05-inicio__hero {
    position: relative;
    box-sizing: border-box;
    width: var(--dl-largura-shell);
    margin-inline: calc(50% - var(--dl-largura-shell) / 2);
    height: 620px;
    padding: 32px var(--dl-respiro-lateral) 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 24px 24px;
    background: var(--dl-degrade-marca);
}

.dl-f05-inicio__foto img {
    position: absolute;
    left: -29.54%;
    top: 27.73%;
    width: 159.57%;
    height: auto;
    max-width: none;
    pointer-events: none;
}

.dl-f05-inicio__cidade,
.dl-f05-inicio__chamada,
.dl-f05-inicio__cta-hero {
    position: relative;
}

.dl-f05-inicio__cidade {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--dl-branco) 16%, transparent);
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-bold-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-branco);
    white-space: pre;
}

.dl-f05-inicio__chamada {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
    color: var(--dl-branco);
}

.dl-f05-inicio__chamada h1 {
    margin: 0;
    font-size: var(--dl-h1-tamanho);
    font-weight: var(--dl-h1-peso);
    line-height: var(--dl-h1-lh);
    color: var(--dl-branco);
    text-box: trim-both cap alphabetic;
}

.dl-f05-inicio__chamada p {
    margin: 0;
    font-size: var(--dl-body1-tamanho);
    line-height: var(--dl-body1-lh);
    opacity: 0.85;
    text-box: trim-both cap alphabetic;
}

.dl-f05-inicio__cta-hero {
    margin-top: auto;
    background: var(--dl-branco);
    color: var(--dl-azul-marinho);
}

.dl-f05-inicio__secao {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.dl-f05-inicio__cabeca {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dl-f05-inicio__cabeca h2 {
    margin: 0;
    font-size: var(--dl-h2-tamanho);
    font-weight: var(--dl-h2-peso);
    line-height: var(--dl-h2-lh);
    color: var(--dl-azul-marinho);
    text-box: trim-both cap alphabetic;
}

.dl-f05-inicio__cabeca p {
    margin: 0;
    font-size: var(--dl-body1-tamanho);
    line-height: var(--dl-body1-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

.dl-f05-inicio__pacotes {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Card/Serviço de 134834:3155: p 18, ícone 44 + gap 16, Info 20 no canto. */
.dl-f05-pacote {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-card);
    background: var(--dl-branco);
    text-decoration: none;
}

.dl-f05-pacote__icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--dl-azul);
    align-self: center;
}

.dl-f05-pacote__conteudo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    align-self: center;
}

.dl-f05-pacote__conteudo strong {
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul-marinho);
    text-box: trim-both cap alphabetic;
}

.dl-f05-pacote__conteudo span {
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

.dl-f05-pacote__info {
    flex-shrink: 0;
}

.dl-f05-inicio__confiar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Acordeão de 134834:3188: fundo azul, p 24, ícone + título + seta. Abre de 64 para 121
   com Smart Animate 0,3 s ease-out, um por vez (dl-f05.js anima a altura). */
.dl-f05-confiar {
    box-sizing: border-box;
    padding: 24px;
    border-radius: var(--dl-radius-card);
    background: var(--dl-azul);
    color: var(--dl-branco);
}

.dl-f05-confiar summary {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
}

.dl-f05-confiar summary::-webkit-details-marker {
    display: none;
}

.dl-f05-confiar summary span {
    flex: 1 1 auto;
    text-box: trim-both cap alphabetic;
}

.dl-f05-confiar__icone {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.dl-f05-confiar__seta {
    flex-shrink: 0;
    transition: transform 0.3s ease-out;
}

.dl-f05-confiar.is-fechando .dl-f05-confiar__seta {
    transform: none;
}

.dl-f05-confiar[open] .dl-f05-confiar__seta {
    transform: rotate(180deg);
}

.dl-f05-confiar p {
    margin: 12px 0 0;
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: color-mix(in srgb, var(--dl-branco) 72%, transparent);
}

/* Como funciona — pilha de 4 cartões (Component28 de 134834:3196, caixa 327,53 × 181,74):
   todos têm 272 × 153; os de trás ficam retos em x 24/40/56 e o da frente gira 6,26° no
   sentido anti-horário, centrado em (143,53; 90,87). A posição é toda no transform (x em %
   da largura do cartão, 272) para o JS animar a ida do da frente para o fundo num só
   caminho: sai para o lado do gesto, passa por baixo e entra atrás (dl-f05.js,
   [DECISÃO:2026-09-28]). Os outros
   andam uma casa com Smart Animate 0,3 s ease-out. pan-y: o gesto horizontal fica com a
   pilha, a rolagem vertical com a página. */
.dl-f05-passos {
    position: relative;
    width: calc(var(--dl-largura-conteudo) * 327.53 / 335);
    height: 182px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    cursor: pointer;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.dl-f05-passos__card {
    --dl-passo-x: 0%;
    --dl-passo-giro: 0deg;
    --dl-arrasto-x: 0px;
    --dl-arrasto-giro: 0deg;
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: calc(100% * 272 / 327.53);
    min-height: 153px;
    padding: 16px;
    border: 1px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-card);
    background: var(--dl-branco);
    transform: translateY(-50%) translateX(calc(var(--dl-passo-x) + var(--dl-arrasto-x))) rotate(calc(var(--dl-passo-giro) + var(--dl-arrasto-giro)));
    /* Subir uma casa: curva de gaveta do iOS, em cascata (a de trás sai um pouco depois). */
    transition: transform 0.46s cubic-bezier(0.32, 0.72, 0, 1), scale 0.2s ease-out;
}

.dl-f05-passos__card[data-pos="0"] { --dl-passo-x: calc(100% * 7.53 / 272); --dl-passo-giro: -6.26deg; z-index: 4; }
.dl-f05-passos__card[data-pos="1"] { --dl-passo-x: calc(100% * 24 / 272); z-index: 3; transition-delay: 40ms; }
.dl-f05-passos__card[data-pos="2"] { --dl-passo-x: calc(100% * 40 / 272); z-index: 2; transition-delay: 80ms; }
.dl-f05-passos__card[data-pos="3"] { --dl-passo-x: calc(100% * 56 / 272); z-index: 1; }

/* Na mão: o transform segue o dedo sem atraso; só o "levantar" (scale, propriedade
   à parte) tem transição. Viajando, o transform é do JS (Web Animations). */
.dl-f05-passos__card.is-arrastando,
.dl-f05-passos__card.is-viajando {
    transition: scale 0.2s ease-out;
}

.dl-f05-passos__card.is-arrastando {
    scale: 1.03;
}

/* Arrasto curto devolvido: volta com um leve respiro (overshoot pequeno). */
.dl-f05-passos__card.is-devolvendo {
    transition: transform 0.5s cubic-bezier(0.34, 1.36, 0.64, 1), scale 0.2s ease-out;
}

.dl-f05-passos__numero {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 28px;
    border-radius: 10px;
    background: var(--dl-azul);
    font-size: var(--dl-h2-tamanho);
    font-weight: var(--dl-h2-peso);
    line-height: var(--dl-h2-lh);
    color: var(--dl-branco);
}

.dl-f05-passos__card strong {
    margin-bottom: 12px;
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul-marinho);
    text-box: trim-both cap alphabetic;
}

.dl-f05-passos__card span:last-child {
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
}

.dl-f05-passos__pontos {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: -30px;
}

.dl-f05-passos__pontos span {
    width: 8px;
    height: 8px;
    border-radius: 24px;
    background: var(--dl-azul);
    transition: width 0.25s ease;
}

.dl-f05-passos__pontos span.is-ativo {
    width: 73px;
}

.dl-f05-inicio__ctas {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .dl-f05-passos__card,
    .dl-f05-passos__card.is-arrastando,
    .dl-f05-passos__card.is-devolvendo,
    .dl-f05-passos__pontos span,
    .dl-f05-confiar__seta {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* Motion no mobile (docs/21 §4 ①) [TELA-NOVA:2026-09-28]. ≥ 1024 o    */
/* split de acesso tem o dele (dl-desktop.css) e não muda.             */
/* ------------------------------------------------------------------ */

@keyframes dl-f05-olho {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
}

@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
    /* Olho da senha: o ícone que aparece entra em fade + escala. O outro sai
       por [hidden] (display:none !important de dl-components), então não há
       saída para cruzar — igual ao desktop. */
    body.dl-tela-acesso .dl-campo__olho-icone:not([hidden]) {
        animation: dl-f05-olho var(--dl-dur-base) var(--dl-ease-saida) backwards;
    }

    /* Wizard: a barra da etapa enche da esquerda (scaleX) em vez de só trocar
       de cor; parada, é a mesma barra azul. */
    .dl-f05-wizard .dl-multipassos__progresso-barra {
        position: relative;
        overflow: hidden;
    }

    .dl-f05-wizard .dl-multipassos__progresso-barra.is-feita {
        background: var(--dl-cinza-10);
    }

    .dl-f05-wizard .dl-multipassos__progresso-barra::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--dl-azul);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--dl-dur-lenta) var(--dl-ease-saida);
    }

    .dl-f05-wizard .dl-multipassos__progresso-barra.is-feita::after {
        transform: scaleX(1);
    }
}

}