/*
 * DoceLar — camada desktop.
 *
 * REGRA ABSOLUTA: tudo aqui vive dentro de @media (min-width: …). O app foi
 * construído mobile-only e o CSS base não tem nenhuma media query de largura;
 * por isso o mobile é preservado por construção — abaixo de 768px o navegador
 * nunca avalia este arquivo. Nunca escrever uma regra fora de uma media query.
 *
 * F16 [DECISÃO:2026-09-24]: o desktop segue as 3 telas de 1440 da página
 * `Desktop` (134835:2567) — padrões, tokens --dl-d-* (abaixo) e mapa das telas
 * em docs/18-desktop.md. Este arquivo guarda os tokens, o header/rodapé P1, as
 * telas de acesso e o que sobrou herdado do fork (medidas 1196/176 do
 * desenho de origem). Cada área tem a sua folha dl-desktop-<area>.css.
 *
 * Breakpoints: 768 (tablet) e 1024 (desktop pleno). Nenhum outro.
 */

@layer dl-telas {
/* ------------------------------------------------------------------ */
/* Tablet — 768px                                                      */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
    :root {
        /* --dl-container tem width: var(--dl-largura-shell) + padding-inline:
           var(--dl-respiro-lateral) em box-sizing: border-box (dl-tokens.css).
           O container real só casa com --dl-largura-conteudo se o shell for
           reconstruído como conteudo + respiro*2 — a mesma identidade da base,
           agora com os valores do desktop. */
        --dl-largura-conteudo: min(92vw, 900px);
        --dl-respiro-lateral: 24px;
        --dl-largura-shell: calc(var(--dl-largura-conteudo) + var(--dl-respiro-lateral) * 2);
    }

    /* Desenho de origem: card de categoria 176 com gap 20; label da categoria em
       valor absoluto. Valendo a partir do tablet: sem isso a faixa 768-1023
       herdava as regras do mobile enquanto o conteudo ja tinha alargado. */
    .dl-cat-cards {
        --dl-cat-largura: 176px;
        gap: 20px;
    }

    .dl-cat-card__label {
        font-size: 13px;
    }

    /* O palco do recorte é quadrado e guiado pela altura; sem teto próprio ele
       acompanharia a largura do modal e o enquadramento sairia do lugar.
       O gesto e o ResizeObserver não são tocados. */
    .dl-drawer--avatar .dl-avatar-crop__palco {
        width: min(420px, 100%, calc(100dvh - 210px));
    }
}

/* ------------------------------------------------------------------ */
/* Desktop — 1024px                                                    */
/* ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    :root {
        --dl-largura-conteudo: min(90vw, 1196px);
        --dl-respiro-lateral: 32px;
        /* Mesma identidade do bloco de 768px, com os valores do desktop pleno:
           o container real (.dl-container) chega aos 1196px do desenho de origem. */
        --dl-largura-shell: calc(var(--dl-largura-conteudo) + var(--dl-respiro-lateral) * 2);

        /* F16 — escala desktop medida na página `Desktop` (134835:2567), telas
           134844:10576 (cliente) e 134840:9647 (profissional). Ver docs/18. */
        --dl-d-sidebar: 244px;
        --dl-d-respiro: 48px;           /* sidebar → conteúdo */
        --dl-d-topo: 40px;
        --dl-d-conteudo-max: 1025px;    /* 292 → 1317 a 1440 */
        --dl-d-col-resumo: 341px;       /* card-resumo à direita */
        --dl-d-gap-colunas: 25px;
        --dl-d-radius: 16px;            /* cards e card-resumo no desktop */
        /* Figma drop-shadow (raio 9 / 5) → box-shadow com o blur em dobro do desvio.
           [REVISÃO-DESKTOP:2026-10-01] slide 6 — "padronizar sombreamento dos cards em
           todas as páginas": card em repouso usa SÓ --dl-d-sombra-card (sem borda nem
           sombra avulsa); --dl-d-sombra-destaque fica para o "Próximo Serviço"
           (134840:9647, onde o Figma a usa) e para o hover dos cards clicáveis. */
        --dl-d-sombra-destaque: 0 6px 9px rgba(23, 33, 71, 0.08);
        --dl-d-sombra-card: 0 2px 5px rgba(50, 61, 109, 0.08);
        --dl-d-resumo-fundo: color-mix(in srgb, var(--dl-azul-claro) 12%, var(--dl-branco));
        --dl-d-resumo-borda: color-mix(in srgb, var(--dl-azul-claro) 32%, transparent);
        --dl-d-nav-inativo: rgba(255, 255, 255, 0.6);
        /* [REVISÃO-DESKTOP:2026-10-01] slide 4 — página como modal (docs/18 §10).
           [REVISÃO-DESKTOP:2026-10-01] slide 4 — modal empilhado (pedido do usuário 02/10):
           a caixa tem 680 e o conteúdo vai numa coluna só (600 úteis). O <iframe> continua
           com 1024 por baixo dela, centrado e recortado: a página dentro mede a largura do
           quadro e precisa seguir ≥ 1024 para ser desktop. */
        --dl-d-modal-largura: 680px;
        --dl-d-modal-quadro: 1024px;
        --dl-d-modal-respiro: 40px;
        --dl-d-modal-margem: 32px;
    }

    /* P1 (134835:8068, docs/18 §3): o header vira o pill branco flutuante
       (1196x64 a 24 do topo). Os slots mobile (voltar / logo centrado /
       compartilhar) saem. O pill é FIXO — "menu flutuante"
       [FIGMA-NOTA:134835:8560] — e o header só reserva a faixa dele no fluxo
       (24 + 64); na landing a reserva zera e o hero sobe por baixo do pill
       (dl-desktop-inicio.css). Coluna, não a linha do mobile: o "Voltar ao
       perfil" (quando existe) se empilha abaixo da reserva. */
    .dl-header {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        background: transparent;
        padding: 88px 0 0;
        position: relative;
        z-index: 20;
    }

    .dl-header__slot,
    .dl-header__logo {
        display: none;
    }

    /* Caminho de volta das telas abertas pelo menu do perfil. Alinha com a
       mesma largura do pill e se apoia abaixo dele, sem disputar os slots
       internos (logo/nav/CTA). */
    .dl-header__voltar-perfil {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: var(--dl-largura-conteudo);
        max-width: 100%;
        margin: 20px auto -12px;
        padding-inline: 4px;
        color: var(--dl-cinza-70);
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.15s ease;
    }

    .dl-header__voltar-perfil:hover,
    .dl-header__voltar-perfil:focus-visible {
        color: var(--dl-azul-marinho);
    }

    /* Pill 134835:8560: raio 40, sombra do Figma, 12 de respiro. Três colunas
       (1fr auto 1fr) para os links ficarem no centro exato do pill. */
    .dl-header__desktop {
        position: fixed;
        top: 24px;
        left: 50%;
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 24px;
        box-sizing: border-box;
        width: var(--dl-largura-conteudo);
        max-width: calc(100% - 40px);
        height: 64px;
        padding: 12px;
        background: var(--dl-branco);
        border-radius: 40px;
        box-shadow: 0 3px 9.5px rgba(0, 0, 0, 0.07);
        transition: box-shadow var(--dl-dur-lenta) var(--dl-ease-saida);
    }

    /* [FIGMA-NOTA:134835:8560] "menu flutuante": fora do hero o pill ganha a
       sombra de destaque para se descolar do conteúdo que passa por baixo.
       dl-inicio-desktop.js liga .is-flutuando por IntersectionObserver no
       hero (sem listener de scroll). Sombra não é movimento: vale com reduce. */
    .dl-header__desktop.is-flutuando {
        box-shadow: var(--dl-d-sombra-destaque);
    }

    /* Logo horizontal do Figma (134835:8590): o mesmo logo empilhado
       (logo-desktop.svg, vetorizado no viewBox 150x113.734 do Figma) recortado em símbolo 68x38 +
       nome 119x26 + slogan 119x7, com os recortes do Figma. O src vem por
       variável inline do tema (o CSS do plugin não conhece o caminho). */
    .dl-header__desktop-logo {
        justify-self: start;
        display: flex;
        align-items: center;
        gap: 4px;
        height: 40px;
        border-radius: 8px;
    }

    .dl-header__desktop-logo-simbolo,
    .dl-header__desktop-logo-nome,
    .dl-header__desktop-logo-slogan {
        display: block;
        background-image: var(--dl-logo-src);
        background-repeat: no-repeat;
    }

    .dl-header__desktop-logo-simbolo {
        width: 68px;
        height: 38px;
        background-size: 94.96px 70.76px;
        background-position: -10.67px 0;
    }

    .dl-header__desktop-logo-textos {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        width: 124px;
    }

    .dl-header__desktop-logo-nome {
        width: 119px;
        height: 26px;
        background-size: 117.71px 90.43px;
        background-position: 0.67px -51.92px;
    }

    .dl-header__desktop-logo-slogan {
        width: 119px;
        height: 7px;
        background-size: 121.63px 82.17px;
        background-position: -3.27px -75.17px;
    }

    /* Links rápidos [FIGMA-NOTA:134836:8893], separados por traço 1x18
       cinza-10, gap 32. */
    .dl-header__desktop-lista {
        display: flex;
        align-items: center;
        gap: 32px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .dl-header__desktop-lista li {
        display: flex;
        align-items: center;
        gap: 32px;
    }

    .dl-header__desktop-lista li + li::before {
        content: "";
        width: 1px;
        height: 18px;
        background: var(--dl-cinza-10);
    }

    /* Coluna invisível com o rótulo em bold reserva a largura final: o link
       que vira bold no scroll-spy não empurra os vizinhos. */
    .dl-header__desktop-link {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        color: var(--dl-cinza-50);
        font-family: var(--dl-fonte);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        text-decoration: none;
        white-space: nowrap;
        border-radius: 4px;
        transition: color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-header__desktop-link::after {
        content: attr(data-dl-rotulo);
        height: 0;
        overflow: hidden;
        visibility: hidden;
        font-weight: 600;
    }

    .dl-header__desktop-link:hover {
        color: var(--dl-azul-marinho);
    }

    /* "quando na sessão o nome fica em azul bold" (dl-inicio-desktop.js). */
    .dl-header__desktop-link.is-ativo {
        color: var(--dl-azul);
        font-weight: 600;
    }

    /* Botão "Login" 134835:8620: azul, raio 32, 8x32, ícone 15x20 + texto 16
       semibold, gap 10. Logado vira "Minha conta" [TELA-NOVA:2026-09-24]. */
    .dl-header__desktop-cta {
        justify-self: end;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        box-sizing: border-box;
        height: 40px;
        padding: 8px 32px;
        border-radius: 32px;
        background: var(--dl-azul);
        color: var(--dl-branco);
        font-family: var(--dl-fonte);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-header__desktop-cta:hover {
        background: var(--dl-azul-hover);
    }

    .dl-header__desktop-cta svg {
        flex: none;
    }

    /* Foco: o anel global de dl-tokens (box-shadow --dl-foco-anel) já vale. */

    /* No desktop a navegação é o header; a barra inferior sai. */
    .dl-bottom-nav {
        display: none;
    }

    /* A reserva de altura da barra (dl-components.css) é zerada no fim deste
       arquivo, em @layer dl-components — ver lá o porquê. */

    /* Rodapé P1 (134840:9646): cartão azul-marinho de raio 32 a 20 das bordas
       da viewport, miolo de 791 centrado — logo 174x132 · "Seções" ·
       "Informações Legais" (colunas nos x 0/294/638 do Figma) · divisor ·
       "Desenvolvido por: vime" e copyright centrados. Texto de apoio em
       branco 71% (opacity-71 do Figma). O footer entra fora do <main>: o
       respiro até ele é dele. */
    .dl-footer {
        margin: 105px 20px 20px;
        padding: 72px 24px 50px;
        border-radius: 32px;
        background: var(--dl-azul-marinho);
    }

    .dl-footer__conteudo {
        width: 791px;
        max-width: 100%;
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .dl-footer__grid {
        display: grid;
        grid-template-columns: 174px 224px minmax(max-content, 1fr);
        column-gap: 120px;
        align-items: start;
        width: 100%;
    }

    .dl-footer__logo {
        display: block;
        width: fit-content;
        border-radius: 8px;
    }

    .dl-footer__logo img {
        display: block;
        width: 174px;
        height: 132px;
    }

    .dl-footer__coluna {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .dl-footer__titulo {
        margin: 0;
        font-family: var(--dl-fonte);
        font-weight: 600;
        font-size: 16px;
        line-height: 1.5;
        color: var(--dl-branco);
    }

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

    .dl-footer__lista a {
        font-size: 12px;
        line-height: 1.5;
        position: relative;
        color: color-mix(in srgb, var(--dl-branco) 71%, transparent);
        text-decoration: none;
        border-radius: 4px;
        transition: color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-footer__lista a:hover {
        color: var(--dl-branco);
        text-decoration: underline;
    }

    /* Line 37: azul-claro a 24%. */
    .dl-footer__divisor {
        width: 100%;
        margin: 0;
        border: none;
        border-top: 1px solid color-mix(in srgb, var(--dl-azul-claro) 24%, transparent);
    }

    .dl-footer__base {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .dl-footer__dev {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
        color: color-mix(in srgb, var(--dl-branco) 71%, transparent);
    }

    /* logo-vime.svg é cinza (feito para fundo claro); como mask, o background
       pinta o desenho com a cor de token que se quiser — um filter não
       chegaria numa cor exata. O url vem por variável inline do PHP porque o
       CSS do plugin não conhece o caminho do tema. 12 de altura (Figma). */
    .dl-footer__vime {
        display: block;
        width: 53px;
        height: 12px;
        background: var(--dl-branco);
        -webkit-mask: var(--dl-vime-logo) no-repeat center / contain;
        mask: var(--dl-vime-logo) no-repeat center / contain;
        border-radius: 2px;
        transition: background var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-footer__vime:hover {
        background: var(--dl-azul-claro);
    }

    .dl-footer__copy {
        margin: 0;
        font-size: 12px;
        line-height: 1.5;
        text-align: center;
        color: color-mix(in srgb, var(--dl-branco) 71%, transparent);
    }

    /* Sobre o marinho o anel azul global some: anel branco. O vime é máscara
       (o anel seria recortado), então o foco dele é a cor. */
    .dl-footer__logo:focus-visible,
    .dl-footer__lista a:focus-visible {
        box-shadow: 0 0 0 2px var(--dl-branco);
    }

    .dl-footer__vime:focus-visible {
        background: var(--dl-azul-claro);
    }

    /* A tira de categorias não sangra: fica CONTIDA nos mesmos 1196px do
       conteúdo, alinhada ao cabeçalho "Categorias". Os cards
       ficam centralizados dentro da faixa, mas a tira continua um contêiner que
       rola (14 categorias não cabem) — por isso a centralização é
       margin-inline:auto + width:fit-content no TRILHO, não justify-content nos
       itens: justify-content:center num flex com overflow corta o início do
       conteúdo ao rolar em alguns navegadores (o primeiro card ficaria
       inacessível). Com fit-content o trilho só fica maior que 1196px quando o
       conteúdo excede (aí vira scroll normal, começando do primeiro card). */
    .dl-cat-cards {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }

    /* Card de categoria 25% menor no desktop, 176x220 -> 132x165 — exatamente
       -25%, preservando a razão 4:5 (aspect-ratio 72/90 em
       dl-components.css cuida da altura sozinho a partir da largura).
       --dl-dobra e o padding/gap internos do card derivam de
       --dl-cat-largura (dl-components.css) e encolhem junto. Label não coube
       mais em 13px ("Profissionais" quebrava a palavra): reduzido ao piso
       legível do projeto, 10px — nunca escalar por razão (memória do
       projeto), e nunca abaixo de 10px. */
    .dl-cat-cards {
        --dl-cat-largura: 132px;
        gap: 20px;
    }

    .dl-cat-card__label {
        font-size: 10px;
    }

    /* Setas ‹ › (100x48: dois círculos de 40 com gap 20). */
    .dl-carrossel-setas {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-left: auto;
    }

    .dl-carrossel-seta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--dl-azul-marinho);
        color: var(--dl-branco);
        cursor: pointer;
        transition: background-color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-carrossel-seta svg {
        width: 18px;
        height: 18px;
    }

    .dl-carrossel-seta:hover {
        background: var(--dl-azul);
    }

    /* Enquanto o mouse arrasta o trilho, o cursor vira "agarrado" e a seleção
       de texto não dispara. */
    [data-dl-rolagem] {
        cursor: grab;
    }

    [data-dl-rolagem].is-arrastando {
        cursor: grabbing;
        user-select: none;
        scroll-snap-type: none;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    /* Tablet mantém a barra, mas com teto: `flex: 1 1 0` sem limite estica
       cada item até ~178px. */
    .dl-bottom-nav {
        max-width: 420px;
    }
}

/* Única exceção do arquivo: o markup desktop sai no HTML em toda tela e
   precisa ficar oculto abaixo de 1024px. É `display:none` num elemento que
   não existia antes — não altera nenhum comportamento mobile. */
@media (max-width: 1023.98px) {
    .dl-header__desktop {
        display: none;
    }

    .dl-footer {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Neutralização do markup novo abaixo de 768px                        */
/* ------------------------------------------------------------------ */
/* Há markup que só vale no desktop, mas sai no HTML em toda largura. Aqui ele
   some no mobile, que tem de continuar idêntico ao desenho mobile. Só
   neutraliza esse markup — nada de comportamento mobile é tocado. */
@media (max-width: 767.98px) {
    .dl-carrossel-setas {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Telas públicas — derivadas da linguagem da home (sem frame próprio) */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
    /* Formulário esticado é ilegível: a largura da linha é o limite, não o
       contêiner. O <main> é um .dl-container e a neutralização
       `.elementor .elementor-widget-shortcode .dl-container` (dl-tokens) impõe
       max-width:100%; esta camada já vence a de tokens, e a classe triplicada
       mantém a precedência sobre regras de uma classe das outras folhas de
       tela (mesma camada). 524 - 2x respiro ≈ 460 de miolo. */
    .dl-login.dl-login.dl-login,
    .dl-cadastro.dl-cadastro.dl-cadastro,
    .dl-recuperar-senha.dl-recuperar-senha.dl-recuperar-senha,
    .dl-redefinir-senha.dl-redefinir-senha.dl-redefinir-senha {
        max-width: 524px;
        margin-inline: auto;
    }
}

/* ------------------------------------------------------------------ */
/* Telas privadas e do prestador — derivadas da linguagem da home      */
/* ------------------------------------------------------------------ */
/* Classes triplicadas onde o alvo é o próprio .dl-container aninhado (mesmo
   motivo explicado no .dl-login). */
@media (min-width: 768px) {
    /* Formulário longo esticado é ilegível: coluna centrada. */

    .dl-tela-informacoes-pessoais.dl-tela-informacoes-pessoais.dl-tela-informacoes-pessoais {
        max-width: 640px;
        margin-inline: auto;
    }

    .dl-tela-alterar-senha.dl-tela-alterar-senha.dl-tela-alterar-senha {
        max-width: 524px;
        margin-inline: auto;
    }

    /* Notificações leem como um feed: coluna centrada, não grade. A pilha
       mobile solta sobre o fundo cinza flutuava sem âncora no shell largo —
       aqui a lista vira cartão branco e cada item vira linha de inbox:
       título+texto à esquerda, tempo à direita. */
    .dl-tela-notificacoes.dl-tela-notificacoes.dl-tela-notificacoes {
        max-width: 700px;
        margin-inline: auto;
    }

    .dl-notificacoes__lista {
        gap: 0;
        background: var(--dl-branco);
        border-radius: var(--dl-radius-card);
        padding: 8px 0;
    }

    .dl-notificacoes__lista .dl-notificacao {
        padding: 20px 28px;
        transition: background-color 0.15s ease;
    }

    .dl-notificacoes__lista .dl-notificacao:hover {
        background: var(--dl-cinza-claro);
    }

    .dl-notificacao__corpo {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 32px;
        row-gap: 8px;
        align-items: center;
    }

    .dl-notificacao__titulo {
        grid-column: 1;
        grid-row: 1;
        font-size: 16px;
    }

    .dl-notificacao__titulo + .dl-notificacao__texto {
        margin-top: 0;
    }

    .dl-notificacao__texto {
        grid-column: 1;
        grid-row: 2;
        font-size: 14px;
    }

    .dl-notificacao__tempo {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        font-size: 11px;
        white-space: nowrap;
    }

    /* Dot centrado no cap da 1ª linha do título de 16px (16 × 1.5 = 24). */
    .dl-notificacao__marcador {
        margin-top: 8px;
    }

    .dl-notificacoes__lista .dl-vazio {
        padding: 48px 28px;
    }
}

@media (min-width: 1024px) {
    /* Perfil é uma lista de atalhos, não formulário: 2 colunas. */
    .dl-tela-perfil.dl-tela-perfil.dl-tela-perfil {
        max-width: 824px;
        margin-inline: auto;
    }

    .dl-tela-perfil .dl-tela-perfil__grupo {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 24px;
        align-items: start;
    }

    /* Informações pessoais: a coluna de 640 empilha 8 campos curtos; em 1024+
       a tela alarga para 824 e os campos andam em pares (dados e localização
       são grades independentes — o título de seção fica entre elas). O
       margin-bottom de 16px do .dl-campo segue sendo o espaço entre linhas,
       por isso só column-gap. */
    .dl-tela-informacoes-pessoais.dl-tela-informacoes-pessoais.dl-tela-informacoes-pessoais {
        max-width: 824px;
    }

    #dl-form-info-pessoais,
    .dl-tela-informacoes-pessoais .dl-localizacao {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        align-items: start;
    }

    /* O spinner do CEP ancora no canto direito do .dl-localizacao; com duas
       colunas esse canto é o select de Estado. Reancora no fim da coluna do
       CEP (metade menos o gap/2, mais os 16px para dentro do input). */
    .dl-tela-informacoes-pessoais .dl-localizacao.is-carregando::after {
        right: calc(50% + 28px);
    }

    /* Padrão de rodapé das telas abertas pelo menu do perfil: um par de botões
       fica lado a lado, meio a meio, cada um na largura inteira da sua coluna
       (é o caso de Salvar/Sair em Informações Pessoais). Um botão sozinho ocupa
       a linha toda, porque a grade só cria a segunda coluna quando há o segundo
       filho. Vale para qualquer tela filha nova: usar .dl-acoes-par no
       container do rodapé em vez de escrever CSS novo. */
    .dl-acoes-par,
    .dl-info-pessoais__acoes {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        column-gap: 24px;
    }
}

/* ------------------------------------------------------------------ */
/* Gavetas viram modais centrados                                     */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
    /* O modal simples herda width: var(--dl-largura-conteudo) da base — que no
       desktop vale até 1196px e vira uma faixa de parede a parede (visto no
       painel de localização). Diálogo centrado tem teto por conteúdo; os
       overrides por id (solicitação 720 etc.) continuam vencendo. */
    .dl-modal__conteudo {
        width: min(560px, 92vw);
    }

    .dl-modal--confirmar .dl-modal__conteudo {
        width: min(420px, 92vw);
    }

    /* O painel já É um .dl-modal__conteudo — o drawer só trocava a caixa
       central por um painel colado na borda. Aqui a troca é desfeita e o
       modal centrado volta a valer. */
    .dl-drawer .dl-drawer__painel {
        inset: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.98);
        width: min(560px, 92vw);
        height: auto;
        max-height: 85vh;
        border-radius: var(--dl-radius-card);
        opacity: 0;
        /* Fade + scale é vocabulário de diálogo centrado; o slide de 300ms é
           de gaveta. dl-ui.js lê esta duração para o display:none da saída. */
        transition: opacity var(--dl-dur-base) var(--dl-ease-saida), transform var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-drawer.is-aberto.is-animando .dl-drawer__painel {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* A variante esquerda também deixa de deslizar. */
    .dl-drawer--esquerda:not(.is-animando) .dl-drawer__painel {
        transform: translate(-50%, -50%) scale(0.98);
    }
}

/* O reduce de dl-components.css mora numa camada abaixo e não alcançava o
   modal centrado: sem escala, só um fade curto. */
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    .dl-drawer .dl-drawer__painel,
    .dl-drawer--folha.dl-drawer--folha .dl-drawer__painel {
        transform: translate(-50%, -50%);
        transition: opacity var(--dl-dur-rapida) linear;
    }

    .dl-drawer.is-aberto.is-animando .dl-drawer__painel,
    .dl-drawer--esquerda:not(.is-animando) .dl-drawer__painel,
    .dl-drawer--folha.dl-drawer--folha.is-aberto.is-animando .dl-drawer__painel {
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 768px) {
    .dl-drawer--folha.dl-drawer--folha .dl-drawer__painel {
        top: 50%;
        bottom: auto;
        max-height: 85vh;
        transform: translate(-50%, -50%) scale(0.98);
        border-radius: var(--dl-radius-card);
        /* F16: o respiro de 28 embaixo fica — com 0 o botão colava na borda. */
        padding-bottom: 28px;
    }

    /* A alça do Modal/Info (::before do painel) sai: no mouse não há gesto. */
    .dl-drawer--folha.dl-drawer--folha .dl-drawer__painel::before {
        content: none;
    }

    .dl-drawer--folha.dl-drawer--folha.is-aberto.is-animando .dl-drawer__painel {
        transform: translate(-50%, -50%) scale(1);
    }

    /* Só vale para a câmera: é o único drawer que ainda tem X (UI::drawer
       'fechar' => true, [DECISÃO:2026-09-28]); os outros fecham pelo fundo,
       Esc ou pelos botões do rodapé. */
    .dl-drawer--folha.dl-drawer--folha .dl-drawer__fechar {
        display: grid;
    }

    /* Puxador e cursor de arraste saem: no mouse não há gesto. O handler em
       dl-ui.js continua registrado e fica inerte — só dispara em
       pointerdown sobre o cabeçalho da folha. */
    .dl-drawer--folha.dl-drawer--folha .dl-drawer__cabecalho {
        padding-top: 20px;
        touch-action: auto;
        cursor: default;
    }

    .dl-drawer--folha.dl-drawer--folha .dl-drawer__cabecalho::before {
        content: none;
    }
}

@media (min-width: 1024px) {
    #dl-drawer-avaliar .dl-drawer__painel,
    #dl-drawer-origem-foto .dl-drawer__painel {
        width: min(480px, 92vw);
    }

    #dl-drawer-camera .dl-drawer__painel {
        width: min(560px, 92vw);
    }

    #dl-drawer-calendario .dl-drawer__painel {
        width: auto;
        min-width: 360px;
    }
}

/* ------------------------------------------------------------------ */
/* Telas de acesso — split (entrar/cadastro/recuperar/redefinir senha). */
/* [TELA-NOVA:2026-09-24] Painel = hero da landing (134835:8068) à     */
/* esquerda + card do formulário à direita.                            */
/* ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    /* P1 (docs/18 §3): as telas de acesso também têm o header pill e o rodapé.
       O split fica como um cartão de raio 32 a 20 das bordas — a mesma
       moldura do hero da landing. O header reserva 88 (24 + pill 64) no fluxo;
       +24 aqui deixa o cartão a 24 do pill, como as âncoras da landing
       (scroll-margin 112), e o pill nunca encosta nem cobre o topo dele. */
    body.dl-tela-acesso > main.dl-container {
        width: 100%;
        max-width: none;
        padding: 24px 20px 0;
    }

    /* overflow: clip (não hidden) recorta o raio sem virar contêiner de
       rolagem. O cartão desce do topo (112) até no mínimo o pé da viewport;
       o painel estica junto, então nunca sobra faixa sem foto no canto. */
    body.dl-tela-acesso .dl-acesso {
        display: grid;
        grid-template-columns: minmax(440px, 1.05fr) minmax(0, 1fr);
        min-height: calc(100dvh - 112px);
        overflow: clip;
        border-radius: 32px;
    }

    /* [TELA-NOVA:2026-09-25] No desktop a faixa azul do mobile vira um
       cabeçalho de texto alinhado à esquerda: a faixa degradê dentro de um
       cartão repetia o login do paginas-conecta. O traço de 40 carrega o
       degradê da marca que a faixa tinha. */
    body.dl-tela-acesso .dl-acesso__conteudo .dl-f05-hero-acesso {
        width: auto;
        margin: 0;
        padding: 0;
        gap: 18px;
        border-radius: 0;
        background: none;
        text-align: left;
    }

    body.dl-tela-acesso .dl-acesso__conteudo .dl-f05-hero-acesso::before {
        content: "";
        width: 40px;
        height: 4px;
        margin-bottom: 4px;
        border-radius: var(--dl-radius-pill);
        background: linear-gradient(90deg, var(--dl-azul) 0%, var(--dl-azul-claro) 100%);
    }

    body.dl-tela-acesso .dl-acesso__conteudo .dl-f05-hero-acesso__titulo {
        font-size: 32px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.5px;
        color: var(--dl-azul-marinho);
    }

    body.dl-tela-acesso .dl-acesso__conteudo .dl-f05-hero-acesso__texto {
        font-size: 16px;
        line-height: 1.5;
        color: var(--dl-cinza-50);
    }

    body.dl-tela-acesso .dl-acesso__conteudo .dl-f05-form {
        margin-top: 36px;
    }

    body.dl-tela-acesso .dl-acesso__conteudo .dl-f05-divisor {
        margin: 28px 0 0;
    }

    /* "Criar conta como…" em dois blocos lado a lado, não duas barras
       empilhadas: a escolha de perfil fica visível como escolha. Ícones do
       próprio DS — pessoa (cliente) e o borrifador do pacote Padrão
       (diarista). ::before = selo, ::after = ícone por máscara, na cor azul. */
    body.dl-tela-acesso .dl-acesso__conteudo .dl-f05-criar-conta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 28px;
    }

    body.dl-tela-acesso .dl-f05-criar-conta .dl-botao.dl-botao {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 14px;
        height: auto;
        padding: 18px;
        border: 1px solid var(--dl-cinza-10);
        background: var(--dl-branco);
        color: var(--dl-azul-marinho);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        text-align: left;
        transition: border-color var(--dl-dur-base) var(--dl-ease-saida), background-color var(--dl-dur-base) var(--dl-ease-saida), transform var(--dl-dur-base) var(--dl-ease-saida);
    }

    body.dl-tela-acesso .dl-f05-criar-conta .dl-botao::before {
        content: "";
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: color-mix(in srgb, var(--dl-azul-claro) 18%, var(--dl-branco));
        transition: background-color var(--dl-dur-base) var(--dl-ease-saida);
    }

    body.dl-tela-acesso .dl-f05-criar-conta .dl-botao::after {
        content: "";
        position: absolute;
        top: 29px;
        left: 29px;
        width: 18px;
        height: 18px;
        background: var(--dl-azul);
        -webkit-mask: var(--dl-criar-conta-icone) center / contain no-repeat;
        mask: var(--dl-criar-conta-icone) center / contain no-repeat;
        transition: background-color var(--dl-dur-base) var(--dl-ease-saida);
    }

    body.dl-tela-acesso .dl-f05-criar-conta .dl-botao:first-child {
        --dl-criar-conta-icone: url("../img/icone-pessoa.svg");
    }

    body.dl-tela-acesso .dl-f05-criar-conta .dl-botao:last-child {
        --dl-criar-conta-icone: url("../img/catalogo/desktop-tipo-padrao.svg");
    }

    body.dl-tela-acesso .dl-f05-criar-conta .dl-botao.dl-botao:hover {
        border-color: var(--dl-azul);
        background: color-mix(in srgb, var(--dl-azul-claro) 6%, var(--dl-branco));
    }

    body.dl-tela-acesso .dl-f05-criar-conta .dl-botao:hover::before {
        background: var(--dl-azul);
    }

    body.dl-tela-acesso .dl-f05-criar-conta .dl-botao:hover::after {
        background: var(--dl-branco);
    }

    /* O painel estica até a altura da linha: sticky, no cadastro (form mais
       alto que a viewport), ele descia com a rolagem e abria um vão acima
       dele, descolado do topo arredondado do cartão. Mesma receita do hero
       da landing (dl-desktop-inicio.css): foto de fundo espelhada, as duas
       camadas da onda (Vector 2 + Union) na base e a chamada branca por cima. */
    body.dl-tela-acesso .dl-acesso__painel {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        box-sizing: border-box;
        min-height: max(520px, calc(100dvh - 112px));
        padding: 0 48px 60px;
        overflow: hidden;
        align-self: stretch;
        background: var(--dl-azul-claro);
        color: var(--dl-branco);
    }

    .dl-acesso__foto img {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* A foto do Figma é espelhada (w -100%): mesmo espelho da landing. O
           recorte (40% antes do espelho) mantém a diarista no quadro estreito. */
        object-position: 40% top;
        transform: scaleX(-1);
    }

    body.dl-tela-acesso .dl-acesso__painel::before,
    body.dl-tela-acesso .dl-acesso__painel::after {
        content: "";
        position: absolute;
        /* -32 para fora do canto: o SVG da onda tem o canto inferior esquerdo
           arredondado (raio 32 do hero da landing) e, esticado, a curva passava
           do raio do cartão e deixava a foto aparecer no canto. */
        left: -32px;
        right: 0;
        bottom: -32px;
        z-index: 1;
        background-repeat: no-repeat;
        /* Só a metade esquerda da onda (a que fica sob a chamada na landing):
           espremida inteira na largura do painel, a curva ficava íngreme e o
           título caía sobre a foto. */
        background-position: left bottom;
        background-size: 200% 100%;
        pointer-events: none;
    }

    body.dl-tela-acesso .dl-acesso__painel::before {
        height: calc(56.16% + 32px);
        background-image: url("../img/inicio/desktop-hero-onda.svg");
    }

    body.dl-tela-acesso .dl-acesso__painel::after {
        height: calc(52.86% + 32px);
        background-image: url("../img/inicio/desktop-hero-union.svg");
    }

    /* Chamada: Desktop/H1 44/40 −1 e corpo 16/1.5, como .dl-f05-inicio__chamada. */
    .dl-acesso__chamada {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: 449px;
    }

    .dl-acesso__titulo {
        margin: 0;
        font-size: 44px;
        font-weight: 600;
        line-height: 40px;
        letter-spacing: -1px;
        color: var(--dl-branco);
    }

    .dl-acesso__texto {
        margin: 0;
        font-size: 16px;
        line-height: 1.5;
        color: var(--dl-branco);
        opacity: 0.85;
    }

    /* [TELA-NOVA:2026-09-25] Lado do formulário sem cartão: o form fica
       solto no branco, ao lado da foto. O cartão branco sobre cinza com
       faixa azul e dobra era o mesmo desenho do paginas-conecta. */
    body.dl-tela-acesso .dl-acesso__conteudo {
        display: flex;
        padding: 56px clamp(40px, 5vw, 88px);
        background: var(--dl-branco);
    }

    /* Quádrupla para vencer o teto de 524px do bloco de 768px acima
       (3 classes, mesma camada). */
    .dl-acesso__conteudo > .dl-container.dl-container.dl-container {
        margin: auto;
        width: min(460px, 100%);
        padding: 0;
        background: none;
    }

    /* [DECISÃO:2026-09-29] Sem a seta do header, o wizard do cliente mostra o
       Voltar dele a partir da etapa 2 (o display:none inline da etapa 1 vem de
       dl-ui.js e segue valendo). Na etapa 1 quem volta é o link para o login. */
    body.dl-tela-acesso .dl-f05-acoes [data-dl-passo-voltar] {
        display: inline-flex;
    }

    /* A base da UF (96/335 da largura de conteúdo do mobile) passava da linha no
       desktop e espremia a cidade. Aqui 1/3, como no cadastro da profissional. */
    body.dl-tela-acesso .dl-f05-cidade__uf {
        flex: 0 0 calc((100% - 10px) / 3);
    }

    body.dl-tela-acesso .dl-acesso .dl-acesso__voltar-login {
        display: block;
        width: fit-content;
        margin: 28px auto 0;
        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;
    }

    body.dl-tela-acesso form:has([data-passo="1"][hidden]) ~ .dl-acesso__voltar-login {
        display: none;
    }

    /* No mobile o campo é pill branca sobre página cinza; dentro do card
       branco a relação inverte, senão o campo some. */
    .dl-acesso__conteudo .dl-campo__input,
    .dl-acesso__conteudo .dl-campo__select,
    .dl-acesso__conteudo .dl-campo__textarea {
        background-color: var(--dl-cinza-claro);
        /* [TELA-NOVA:2026-09-25] A borda do foco chega em 120ms, não salta.
           Cor, não movimento: vale também com reduce. Sem anel extra — o DS
           desenha só a borda. */
        transition: border-color var(--dl-dur-rapida) var(--dl-ease-saida);
    }
}

/* ------------------------------------------------------------------ */
/* Motion do P1 — header pill, rodapé, telas de acesso e setas de       */
/* carrossel (docs/19 §5.2/§5.3). [TELA-NOVA:2026-09-25] salvo onde diz. */
/* Entradas com fill `backwards` (nunca `both`) e esperando o splash    */
/* sair (html:not(.dl-splash-ativo)), como as primitivas do -shell.     */
/* ------------------------------------------------------------------ */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    @keyframes dl-p1-fade {
        from {
            opacity: 0;
        }
    }

    /* Foto espelhada (scaleX(-1)) que assenta de 1,03 para 1. */
    @keyframes dl-p1-foto-assenta {
        from {
            opacity: 0;
            transform: scale(-1.03, 1.03);
        }
    }

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

    /* [FIGMA-NOTA:134835:8560] Fora do hero o pill sobe 8px e encolhe 2%:
       fica mais discreto enquanto o conteúdo passa por baixo. */
    .dl-header__desktop {
        transition: transform var(--dl-dur-lenta) var(--dl-ease-saida), box-shadow var(--dl-dur-lenta) var(--dl-ease-saida);
    }

    .dl-header__desktop.is-flutuando {
        transform: translate(-50%, -8px) scale(0.98);
    }

    .dl-header__desktop-cta {
        transition: background-color var(--dl-dur-base) var(--dl-ease-saida), transform var(--dl-dur-rapida) var(--dl-ease-saida);
    }

    .dl-header__desktop-cta svg {
        transition: transform var(--dl-dur-base) var(--dl-ease-mola);
    }

    .dl-header__desktop-cta:active {
        transform: scale(0.97);
    }

    /* ---- Telas de acesso: a foto aparece, a chamada e o card sobem ---- */

    html:not(.dl-splash-ativo) body.dl-tela-acesso .dl-acesso__foto img {
        animation: dl-p1-foto-assenta 600ms var(--dl-ease-saida) backwards;
    }

    html:not(.dl-splash-ativo) body.dl-tela-acesso .dl-acesso__chamada > * {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
        animation-delay: 160ms;
    }

    html:not(.dl-splash-ativo) body.dl-tela-acesso .dl-acesso__chamada > :nth-child(2) {
        animation-delay: 240ms;
    }

    html:not(.dl-splash-ativo) body.dl-tela-acesso .dl-acesso__conteudo > :is(.dl-container, .dl-cad-prof) {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
        animation-delay: 80ms;
    }

    /* O olho da senha: o ícone que aparece entra em fade + escala (o outro
       sai por [hidden], display:none !important de dl-components). */
    body.dl-tela-acesso .dl-campo__olho-icone:not([hidden]) {
        animation: dl-p1-olho var(--dl-dur-base) var(--dl-ease-saida) backwards;
    }

    /* ---- Setas ‹ › de carrossel (UI::setas_carrossel) ---- */
    .dl-carrossel-seta {
        transition: background-color var(--dl-dur-base) var(--dl-ease-saida), transform var(--dl-dur-rapida) var(--dl-ease-saida);
    }

    .dl-carrossel-seta svg {
        transition: transform var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-carrossel-seta:active {
        transform: scale(0.92);
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    /* Login/Minha conta: o ícone cresce como o da sidebar (não há seta no
       botão do Figma 134835:8620). */
    .dl-header__desktop-cta:hover svg {
        transform: scale(1.08);
    }

    /* Rodapé [TELA-NOVA:2026-09-25]: o sublinhado cresce da esquerda. */
    .dl-footer__lista a:hover {
        text-decoration: none;
    }

    .dl-footer__lista a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-footer__lista a:hover::after {
        transform: scaleX(1);
    }

    .dl-carrossel-seta[data-dl-rolar="proximo"]:hover svg {
        transform: translateX(2px);
    }

    .dl-carrossel-seta[data-dl-rolar="anterior"]:hover svg {
        transform: translateX(-2px);
    }
}

/* Reduzir movimento: nada anda nem escala; trocas de estado viram fade curto. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .dl-header__desktop {
        transition: box-shadow var(--dl-dur-rapida) linear;
    }
}

/* ------------------------------------------------------------------ */
/* Solicitar serviço — wizard de etapas (só desktop)                   */
/* ------------------------------------------------------------------ */

/* Wizard (form_multipassos): a etapa nova entra do lado para onde se anda —
   vale em qualquer largura, em dl-motion.css (docs/21). */

/* F16: a gaveta lateral de notificações (aberta pelo sino do header desktop do
   fork) saiu — com a sidebar, "Notificações" é uma página (docs/18 §4). A tela
   no desktop mora em dl-desktop-conta.css. */
}

/*
 * A reserva de 82px da tab bar (body:has(.dl-bottom-nav) em dl-components.css) é
 * !important dentro de @layer dl-components. Entre declarações !important a camada
 * ANTERIOR vence — um !important em dl-telas nunca a derrubava, e toda tela com
 * tab bar rolava 82px vazios no desktop. Zerar na mesma camada, depois da original.
 */
@layer dl-components {
@media (min-width: 1024px) {
    body:has(.dl-bottom-nav) {
        padding-bottom: 0 !important;
    }
}
}