/*
 * DoceLar — F16 · P1 · telas públicas (exceto a landing e o split de acesso,
 * que mora no bloco "Telas de acesso" de dl-desktop.css). docs/18 §3 · §4 · §8.
 *
 * [TELA-NOVA:2026-09-24] Nenhuma destas telas tem desenho desktop: todas saem
 * da linguagem da landing (134835:8068, dl-desktop-inicio.css) — títulos
 * Desktop/H1 44/40 e cards brancos raio 16 com a sombra do DS desktop.
 *
 * Mesmas regras de dl-desktop: @layer dl-telas, só @media, só tokens, sem
 * !important. Carregada antes de dl-desktop-shell (ordem alfabética): as
 * utilitárias .dl-d-* do shell vencem os empates; aqui só classes da área.
 *
 * Visitante: header pill + rodapé (P1). Logado: a sidebar do shell
 * (body.dl-com-sidebar) — as telas valem nos dois estados.
 *
 * [TELA-NOVA:2026-09-29] Logado, /servicos/ e /profissional/<slug>/ ganham o
 * padrão das telas logadas (agenda e conta): largura inteira ao lado da sidebar,
 * título 32, cards raio 12 com padding 16–20, botões 40–44/14. Todas essas
 * regras começam com body.dl-com-sidebar (bloco "Logado", depois do perfil):
 * o visitante (P1) não muda.
 */

@layer dl-telas {

@media (min-width: 1024px) {

    /* ---------------------------------------------------------------- */
    /* Respiro sob o pill (visitante): o header reserva 88 no fluxo; +40  */
    /* até o título, o mesmo --dl-d-topo do app logado. (O <main> da tela */
    /* vive dentro do main.dl-container de page.php.)                     */
    /* ---------------------------------------------------------------- */
    body:not(.dl-com-sidebar) .dl-container.dl-profissionais,
    body:not(.dl-com-sidebar) .dl-container.dl-perfil-publico,
    body:not(.dl-com-sidebar) .dl-container.dl-legal,
    /* A Central de ajuda (C103) é a única tela de conta aberta ao visitante. */
    body:not(.dl-com-sidebar) .dl-container.dl-d-conta[data-tela="central-de-ajuda"] {
        padding-top: var(--dl-d-topo);
        padding-bottom: 80px;
    }

    /* ================================================================ */
    /* entrar · cadastro · recuperar/redefinir senha — painel da foto    */
    /* ================================================================ */

    /* [REVISÃO-DESKTOP:2026-10-01] slide 2 — "Pode diminuir um pouco": a onda
       azul sobre a foto do split de acesso desce. As duas camadas (Vector 2 e
       Union, montadas no bloco "Telas de acesso" de dl-desktop.css) caem de
       56,16%/52,86% para 44%/41,4% da altura do painel, na mesma proporção
       entre si. Piso de 320/301: a chamada fica a 60 da base e ocupa ~210,
       então em painéis baixos (o mínimo é 520) a onda não desce além do que
       mantém o título inteiro sobre o azul. */
    body.dl-tela-acesso .dl-acesso__painel::before {
        height: calc(max(44%, 320px) + 32px);
    }

    body.dl-tela-acesso .dl-acesso__painel::after {
        height: calc(max(41.4%, 301px) + 32px);
    }

    /* ================================================================ */
    /* servicos — busca de profissionais (134834:3524)                  */
    /* ================================================================ */

    /* Título de tela 44/40 (docs/18 §2) com o ícone do mobile ao lado. */
    .dl-profissionais__titulo {
        gap: 16px;
        font-size: 44px;
        font-weight: 600;
        line-height: 40px;
        letter-spacing: -1px;
    }

    .dl-profissionais__icone {
        width: 30px;
        height: 40px;
    }

    .dl-profissionais__apoio {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Barra de busca antes do título, como no mobile: palavra-chave e cidade
       (sem geolocalização/mapa — [CONTRATO] exclusões) numa linha só. */
    .dl-profissionais__barra .dl-busca {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        max-width: 860px;
    }

    .dl-profissionais__barra .dl-busca__campo {
        flex: 1 1 0;
        min-width: 0;
    }

    .dl-profissionais__barra .dl-busca__submit {
        flex: none;
        width: auto;
        min-width: 160px;
        height: 46px;
        margin: 0;
        padding-inline: 32px;
    }

    /* C28: os chips cabem numa linha — sem rolagem, alinhados à barra. */
    .dl-profissionais__tipos {
        flex-wrap: wrap;
        overflow: visible;
        margin-top: 20px;
        padding-block: 0;
    }

    .dl-profissionais__cabecalho {
        gap: 20px;
        margin-top: 40px;
    }

    .dl-profissionais__resultado {
        margin-top: 40px;
    }

    /* Grade de cards: 3 colunas ≥ 1280, 2 entre 1024–1279 (bloco no fim). */
    .dl-profissionais .dl-profissionais__lista {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }

    /* Card/Profissional na pele dos cards do app desktop: raio 16, sombra
       card, padding 24. Escopo na lista: o mesmo componente vive no fluxo
       (escolher-profissionais), que não é desta área.
       [REVISÃO-DESKTOP:2026-10-01] slide 6: só a sombra de card (a borda
       cinza do componente mobile fica transparente — no fluxo ela é a borda
       azul do escolhido); no hover, a de destaque. */
    .dl-profissionais .dl-card-profissional {
        box-sizing: border-box;
        height: 100%;
        padding: 24px;
        border-color: transparent;
        border-radius: var(--dl-d-radius);
        box-shadow: var(--dl-d-sombra-card);
        transition: box-shadow var(--dl-dur-lenta) var(--dl-ease-saida);
    }

    .dl-profissionais .dl-card-profissional:hover {
        box-shadow: var(--dl-d-sombra-destaque);
    }

    .dl-profissionais .dl-card-profissional:has(.dl-card-profissional__link:focus-visible) {
        box-shadow: var(--dl-foco-anel);
    }

    .dl-profissionais .dl-card-profissional__nome {
        font-size: 18px;
    }

    /* Estado vazio e "Definir localização" centrados na largura da grade. */
    .dl-profissionais .dl-carregar-mais {
        margin-top: 40px;
    }

    /* ================================================================ */
    /* profissional — perfil público (134834:4987) em P2                 */
    /* ================================================================ */

    /* No mobile a coluna ocupa a tela toda (min-height do app); no desktop
       a altura é a do conteúdo. */
    .dl-perfil-publico {
        min-height: 0;
    }

    /* Sem o card de ação (profissional logada e sem preço configurado) a
       principal ocupa a linha. */
    .dl-d-p2.dl-perfil-publico__colunas:not(:has(.dl-perfil-publico__resumo)) {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Identificação: avatar à esquerda, nome/estrelas/credencial à direita,
       num card branco (no mobile é a pilha centrada no topo). [REVISÃO-DESKTOP:2026-10-01] slide 6: sombra
       de card — a de destaque fica só no "Próximo Serviço" e no hover. */
    .dl-perfil-publico__identificacao {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        align-items: center;
        column-gap: 24px;
        row-gap: 12px;
        margin: 0 0 40px;
        padding: 32px;
        border-radius: var(--dl-d-radius);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
        text-align: left;
    }

    .dl-perfil-publico__identificacao .dl-avatar {
        grid-row: 1 / -1;
    }

    .dl-perfil-publico__identificacao > :not(.dl-avatar) {
        grid-column: 2;
        justify-self: start;
    }

    .dl-perfil-publico__nome {
        font-size: 44px;
        font-weight: 600;
        line-height: 40px;
        letter-spacing: -1px;
    }

    .dl-perfil-publico__credencial {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Avaliações: título de seção 32/36 (docs/18 §2) e cards de lista. */
    .dl-perfil-publico__avaliacoes,
    .dl-perfil-publico__servicos {
        gap: 24px;
        margin-bottom: 40px;
    }

    .dl-perfil-publico__secao-titulo {
        color: var(--dl-azul-marinho);
        font-size: 32px;
        font-weight: 600;
        line-height: 36px;
        letter-spacing: -1px;
    }

    .dl-perfil-publico__avaliacoes-lista {
        gap: 16px;
    }

    /* [REVISÃO-DESKTOP:2026-10-01] slide 6: cada avaliação é um card — sombra de card no lugar da borda. Só
       para o visitante: logado, a lista inteira é o card (bloco "Logado"). */
    body:not(.dl-com-sidebar) .dl-perfil-publico__avaliacoes-lista .dl-avaliacao--publica {
        border: 0;
        box-shadow: var(--dl-d-sombra-card);
    }

    /* Preço do card de ação: valor 24 à esquerda, "por hora" à direita. */
    .dl-perfil-publico__preco {
        justify-content: flex-start;
        align-items: baseline;
        gap: 8px;
    }

    .dl-perfil-publico__preco .dl-d-resumo__linha-valor {
        color: var(--dl-azul);
    }

    /* "Voltar" por conteúdo, abaixo das colunas (no mobile é a barra cheia
       ancorada no pé). */
    .dl-botao.dl-perfil-publico__voltar {
        align-self: flex-start;
        width: auto;
        min-width: 200px;
        margin-top: 0;
        padding-inline: 44px;
    }

    /* ================================================================ */
    /* Logado (body.dl-com-sidebar) [TELA-NOVA:2026-09-29] — servicos e  */
    /* profissional na largura inteira e compactos. Nada novo na tela:   */
    /* só a ordem visual, a grade e as medidas.                          */
    /* ================================================================ */

    /* O <main> do tema (em volta do shortcode) para em 1025 úteis; estas
       telas ocupam tudo ao lado da sidebar, como a agenda e a conta. */
    body.dl-com-sidebar > main.dl-container:has(> :is(.dl-profissionais, .dl-perfil-publico)) {
        max-width: none;
    }

    /* ---- servicos ---------------------------------------------------- */

    /* Grade da tela: título + apoio no topo (como toda tela logada); abaixo a
       busca e, ao lado dela (≥ 1440) ou embaixo, os chips de tipo; depois a
       grade de cards. A ordem do DOM (busca → chips → título → lista) é a do
       mobile e não muda: o título não recebe foco, então o Tab segue a
       mesma ordem que se vê. */
    body.dl-com-sidebar .dl-container.dl-profissionais:not(.dl-fluxo-tela) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        padding-top: 0;
        padding-bottom: 0;
    }

    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) > .dl-profissionais__cabecalho {
        grid-row: 1;
        gap: 8px;
        margin: 0 0 24px;
    }

    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) .dl-profissionais__titulo {
        gap: 12px;
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -0.8px;
    }

    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) .dl-profissionais__icone {
        width: 24px;
        height: 32px;
    }

    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) .dl-profissionais__apoio {
        font-size: 14px;
        line-height: 20px;
        text-box: normal;
    }

    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) > .dl-profissionais__barra {
        grid-row: 2;
        min-width: 0;
    }

    /* Busca compacta: campos e botão de 44, texto 14, na largura da célula. */
    body.dl-com-sidebar .dl-profissionais__barra .dl-busca {
        max-width: none;
        gap: 8px;
    }

    body.dl-com-sidebar .dl-profissionais__barra .dl-busca__campo {
        height: 44px;
        box-sizing: border-box;
        font-size: 14px;
    }

    body.dl-com-sidebar .dl-profissionais__barra .dl-busca__campo :is(input, .dl-busca__local-texto) {
        font-size: 14px;
    }

    body.dl-com-sidebar .dl-profissionais__barra .dl-busca__submit {
        min-width: 120px;
        height: 44px;
        padding-inline: 24px;
        font-size: 14px;
    }

    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) > .dl-profissionais__tipos {
        grid-row: 3;
        margin-top: 12px;
    }

    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) > .dl-profissionais__resultado {
        grid-row: 4;
        margin-top: 24px;
    }

    /* Cards: quantos couberem com 300 de mínimo — 2 colunas a 1024, 3 a
       1280/1440, 5 a 1920. */
    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) .dl-profissionais__lista {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 16px;
    }

    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) .dl-card-profissional {
        gap: 12px;
        min-height: 0;
        padding: 16px;
        border-radius: var(--dl-radius-card);
    }

    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) .dl-card-profissional .dl-avatar--m {
        width: 48px;
        height: 48px;
    }

    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) .dl-card-profissional__identidade {
        gap: 4px;
    }

    /* Sem o trim de cap-height do mobile: com overflow hidden (o nome trunca
       em "…") ele cortava as descendentes ("Lopes"). */
    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) .dl-card-profissional__nome {
        font-size: 15px;
        line-height: 20px;
        text-box: normal;
    }

    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) .dl-card-profissional__historico {
        font-size: 12px;
        line-height: 16px;
    }

    /* "Carregar mais" do tamanho do rótulo, centrado sob a grade. */
    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) .dl-carregar-mais {
        margin-top: 24px;
    }

    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) .dl-carregar-mais .dl-botao {
        width: auto;
        height: 40px;
        min-height: 0;
        margin-inline: auto;
        padding: 0 24px;
        border-radius: var(--dl-radius-botao);
        font-size: 14px;
    }

    /* ---- profissional [TELA-NOVA:2026-09-29] ------------------------- */
    /* Um cartão só no topo — identificação e "Serviços oferecidos" à     */
    /* esquerda, preço/ação à direita atrás de um divisor — e as          */
    /* avaliações num segundo cartão, embaixo, na largura toda. A         */
    /* principal vira display:contents: os 4 blocos são itens da mesma    */
    /* grade, e o fundo do cartão de cima é o ::before dela (linhas 1–2), */
    /* então as peças encostam sem costura de sombra. O DOM (a ordem do   */
    /* mobile e do Tab) não muda.                                         */

    body.dl-com-sidebar .dl-container.dl-perfil-publico {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* "‹ Voltar" acima de tudo (a profissional volta ao Perfil); o [Voltar]
       do pé fica para o mobile e o visitante. */
    body.dl-com-sidebar .dl-perfil-publico__voltar-topo {
        display: flex;
        align-items: center;
        gap: 4px;
        width: fit-content;
        margin: 0 0 16px -4px;
        color: var(--dl-azul);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        text-decoration: none;
    }

    body.dl-com-sidebar .dl-perfil-publico__voltar-topo:hover {
        color: var(--dl-azul-hover);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    body.dl-com-sidebar .dl-perfil-publico__voltar-topo:focus-visible {
        outline: 2px solid var(--dl-azul);
        outline-offset: 2px;
        border-radius: 4px;
    }

    body.dl-com-sidebar .dl-perfil-publico__voltar-icone {
        width: 18px;
        height: 18px;
    }

    body.dl-com-sidebar .dl-botao.dl-perfil-publico__voltar {
        display: none;
    }

    body.dl-com-sidebar .dl-perfil-publico .dl-d-p2.dl-perfil-publico__colunas {
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-areas:
            "ident resumo"
            "serv  resumo"
            "aval  aval";
        gap: 0;
        align-items: start;
        max-width: none;
    }

    body.dl-com-sidebar .dl-perfil-publico .dl-d-p2.dl-perfil-publico__colunas:not(:has(.dl-perfil-publico__resumo)) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "ident"
            "serv"
            "aval";
    }

    body.dl-com-sidebar .dl-perfil-publico .dl-perfil-publico__colunas::before {
        content: "";
        grid-row: 1 / 3;
        grid-column: 1 / -1;
        align-self: stretch;
        border-radius: var(--dl-radius-card);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
    }

    body.dl-com-sidebar .dl-perfil-publico .dl-perfil-publico__principal {
        display: contents;
    }

    /* Identificação: avatar 64 | nome 28 · estrelas · credencial 14. */
    body.dl-com-sidebar .dl-perfil-publico__identificacao {
        grid-area: ident;
        column-gap: 20px;
        row-gap: 6px;
        margin: 0;
        padding: 24px 28px 20px;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    body.dl-com-sidebar .dl-perfil-publico__identificacao .dl-avatar--g {
        width: 64px;
        height: 64px;
    }

    body.dl-com-sidebar .dl-perfil-publico__nome {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.6px;
        text-box: normal;
    }

    body.dl-com-sidebar .dl-perfil-publico__credencial {
        color: var(--dl-cinza-70);
        font-size: 14px;
        line-height: 20px;
        text-box: normal;
    }

    /* "Serviços oferecidos": rótulo + chips numa linha, sob um fio, ainda
       dentro do cartão de cima. */
    body.dl-com-sidebar .dl-perfil-publico .dl-perfil-publico__servicos {
        grid-area: serv;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px 16px;
        text-align: left;
        margin: 0 28px;
        padding: 16px 0 24px;
        border-top: 1px solid var(--dl-cinza-10);
    }

    body.dl-com-sidebar .dl-perfil-publico .dl-perfil-publico__servicos .dl-perfil-publico__secao-titulo {
        color: var(--dl-cinza-70);
        font-size: 13px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 0;
        text-box: normal;
    }

    body.dl-com-sidebar .dl-perfil-publico .dl-perfil-publico__tipos {
        justify-content: flex-start;
        gap: 8px;
    }

    /* Preço/ação: coluna do cartão de cima, atrás de um divisor vertical;
       sem a pele de card-resumo (o cartão já é o fundo). */
    body.dl-com-sidebar .dl-perfil-publico .dl-perfil-publico__resumo {
        grid-area: resumo;
        align-self: stretch;
        display: flex;
        margin: 20px 0;
        border-left: 1px solid var(--dl-cinza-10);
    }

    body.dl-com-sidebar .dl-perfil-publico__resumo .dl-d-resumo {
        flex: 1;
        justify-content: center;
        gap: 14px;
        padding: 4px 28px;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    body.dl-com-sidebar .dl-perfil-publico__resumo .dl-perfil-publico__preco {
        justify-content: flex-start;
        align-items: baseline;
        gap: 6px;
        color: var(--dl-cinza-70);
        font-size: 14px;
    }

    body.dl-com-sidebar .dl-perfil-publico__preco .dl-d-resumo__linha-valor {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.5px;
    }

    body.dl-com-sidebar .dl-perfil-publico__resumo .dl-botao {
        height: 44px;
        min-height: 0;
        border-radius: var(--dl-radius-botao);
        font-size: 14px;
    }

    /* Avaliações: título 16 e a lista num cartão, em ladrilhos compactos
       (quantos couberem com 260 de mínimo). */
    body.dl-com-sidebar .dl-perfil-publico .dl-perfil-publico__avaliacoes {
        grid-area: aval;
        gap: 10px;
        margin: 28px 0 0;
    }

    body.dl-com-sidebar .dl-perfil-publico .dl-perfil-publico__avaliacoes .dl-perfil-publico__secao-titulo {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0;
        text-box: normal;
    }

    body.dl-com-sidebar .dl-perfil-publico .dl-perfil-publico__secao-total {
        color: var(--dl-cinza-50);
        font-weight: 400;
    }

    body.dl-com-sidebar .dl-perfil-publico .dl-perfil-publico__avaliacoes-lista {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 8px;
        padding: 12px;
        border-radius: var(--dl-radius-card);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
    }

    body.dl-com-sidebar .dl-perfil-publico .dl-avaliacao--publica .dl-avaliacao__corpo {
        height: 100%;
        box-sizing: border-box;
        gap: 4px;
        padding: 12px 14px;
        border: 0;
        border-radius: var(--dl-radius-botao);
        background: var(--dl-cinza-claro);
        box-shadow: none;
    }

    body.dl-com-sidebar .dl-perfil-publico__avaliacoes > .dl-vazio {
        padding: 24px;
        border-radius: var(--dl-radius-card);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
    }

    body.dl-com-sidebar .dl-perfil-publico__avaliacoes .dl-carregar-mais .dl-botao {
        width: auto;
        height: 40px;
        min-height: 0;
        padding: 0 24px;
        border-radius: var(--dl-radius-botao);
        font-size: 14px;
    }

    /* ================================================================ */
    /* termos-de-uso · politica-de-privacidade — coluna de leitura 760   */
    /* ================================================================ */

    .dl-legal > * {
        max-width: 760px;
        margin-inline: auto;
    }

    /* Com a sidebar a coluna se alinha à esquerda, como o resto do app. */
    body.dl-com-sidebar .dl-legal > * {
        margin-inline: 0;
    }

    /* Título de tela 44/40 (docs/18 §2 · .dl-d-titulo-tela). */
    .dl-legal .dl-legal__titulo {
        margin-bottom: 16px;
        color: var(--dl-azul-marinho);
        font-size: 44px;
        font-weight: 600;
        line-height: 40px;
        letter-spacing: -1px;
    }

    .dl-legal__atualizacao {
        margin-bottom: 40px;
        font-size: 14px;
    }

    .dl-legal__secao h2 {
        margin: 40px 0 12px;
        color: var(--dl-azul-marinho);
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.5px;
    }

    .dl-legal__secao p {
        font-size: 16px;
        line-height: 1.7;
    }
}

/* 1024–1279: a grade da busca cai para 2 colunas (visitante; logado a grade
   é auto-fill, acima) e a coluna de ação do perfil logado vai a 260. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    body:not(.dl-com-sidebar) .dl-profissionais .dl-profissionais__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.dl-com-sidebar .dl-perfil-publico .dl-d-p2.dl-perfil-publico__colunas {
        grid-template-columns: minmax(0, 1fr) 260px;
    }
}

/* ≥ 1440 (logado): no perfil, o cartão de cima vira uma faixa só —
   identificação | Serviços oferecidos | preço/ação, com divisores
   verticais — e as avaliações vêm logo abaixo. */
@media (min-width: 1440px) {
    body.dl-com-sidebar .dl-perfil-publico .dl-d-p2.dl-perfil-publico__colunas {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 300px;
        grid-template-areas:
            "ident serv resumo"
            "aval  aval aval";
    }

    body.dl-com-sidebar .dl-perfil-publico .dl-d-p2.dl-perfil-publico__colunas:not(:has(.dl-perfil-publico__resumo)) {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-areas:
            "ident serv"
            "aval  aval";
    }

    body.dl-com-sidebar .dl-perfil-publico .dl-perfil-publico__colunas::before {
        grid-row: 1 / 2;
    }

    body.dl-com-sidebar .dl-perfil-publico__identificacao {
        align-self: center;
        padding-bottom: 24px;
    }

    body.dl-com-sidebar .dl-perfil-publico .dl-perfil-publico__servicos {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        align-self: stretch;
        gap: 10px;
        margin: 20px 0;
        padding: 4px 28px;
        border-top: 0;
        border-left: 1px solid var(--dl-cinza-10);
    }
}

/* ≥ 1600 (logado): os chips de tipo sobem para o lado da busca — a linha
   inteira é o filtro. Abaixo disso a busca ficaria estreita (o texto de
   apoio do campo cortaria), então os chips ficam embaixo dela. */
@media (min-width: 1600px) {
    body.dl-com-sidebar .dl-container.dl-profissionais:not(.dl-fluxo-tela) {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 24px;
    }

    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) > :is(.dl-profissionais__cabecalho, .dl-profissionais__resultado) {
        grid-column: 1 / -1;
    }

    body.dl-com-sidebar .dl-profissionais:not(.dl-fluxo-tela) > .dl-profissionais__tipos {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        margin-top: 0;
    }
}

/* ---------------------------------------------------------------------- */
/* Motion das públicas (docs/19 §5.3) [TELA-NOVA:2026-09-25]. Entradas     */
/* esperam o splash sair e usam fill `backwards` (nunca `both`).           */
/* A cascata dos cards e das avaliações é a primitiva .dl-d-cascata do     */
/* -shell (classe no HTML); o lote do "Carregar mais" é numerado por       */
/* DL.motion.cascata em dl-profissionais.js.                               */
/* ---------------------------------------------------------------------- */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    @keyframes dl-publicas-fade {
        from {
            opacity: 0;
        }
    }

    /* servicos — skeleton ↔ resultado em crossfade: o skeleton aparece em
       fade enquanto a busca corre; o que volta (cards em cascata pela
       .dl-d-cascata, ou o estado vazio) entra em fade. */
    .dl-profissionais__resultado[aria-busy="true"] > * {
        animation: dl-publicas-fade var(--dl-dur-base) var(--dl-ease-saida) backwards;
    }

    html:not(.dl-splash-ativo) .dl-profissionais__resultado[aria-busy="false"] > :not(.dl-profissionais__lista) {
        animation: dl-publicas-fade var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
    }

    .dl-profissionais .dl-card-profissional {
        transition:
            transform var(--dl-dur-lenta) var(--dl-ease-saida),
            box-shadow var(--dl-dur-lenta) var(--dl-ease-saida),
            border-color var(--dl-dur-base) var(--dl-ease-saida);
    }

    /* Chips de tipo: cor em 200ms e press curto. */
    .dl-profissionais__tipos .dl-chip {
        transition:
            background-color var(--dl-dur-base) var(--dl-ease-saida),
            border-color var(--dl-dur-base) var(--dl-ease-saida),
            color var(--dl-dur-base) var(--dl-ease-saida),
            transform var(--dl-dur-rapida) var(--dl-ease-saida);
    }

    .dl-profissionais__tipos .dl-chip:active {
        transform: scale(0.95);
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    /* Card da busca: sobe 2px com a sombra de destaque (padrão .dl-d-elevavel;
       o componente também vive no fluxo, por isso a regra é local). */
    .dl-profissionais .dl-card-profissional:hover {
        transform: translateY(-2px);
    }

    .dl-profissionais .dl-card-profissional:active {
        transform: translateY(0);
    }
}

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

/* Markup exclusivo do desktop no perfil público: sai no HTML em toda largura.
   Abaixo de 1024 os invólucros do P2 não geram caixa e o card de ação some —
   o mobile (134834:4987) continua idêntico. */
@media (max-width: 1023.98px) {
    .dl-perfil-publico__colunas,
    .dl-perfil-publico__principal {
        display: contents;
    }

    .dl-perfil-publico__resumo,
    .dl-perfil-publico__voltar-topo {
        display: none;
    }
}

/* Visitante (P1): o "‹ Voltar" do topo é só do app logado — lá fica o [Voltar] do pé. */
@media (min-width: 1024px) {
    body:not(.dl-com-sidebar) .dl-perfil-publico__voltar-topo {
        display: none;
    }
}

}