/*
 * DoceLar — F16 · fluxo de agendamento do cliente no desktop (docs/18 §3 P2 · §4 · §8).
 *
 * Tela-norte: 134844:10576 "Escolha o tipo de limpeza" (1440 × 900) — principal 659
 * (acordeão) + resumo 341 (seletor "Limpeza em" · card-resumo · suporte). As demais
 * telas do fluxo (agendar, escolher-data, escolher-profissionais, revisar-agendamento,
 * pagamento, agendamento-confirmado) e a disponibilidade da profissional não têm
 * desenho desktop: [TELA-NOVA:2026-09-24] imitando a tela-norte (Regra 3).
 *
 * Markup: os shortcodes embrulham a tela em .dl-fluxo (= .dl-d-p2) com
 * .dl-fluxo__principal / .dl-fluxo__resumo / .dl-fluxo__cartao, e imprimem as peças
 * que só existem no desktop com .dl-fluxo__so-desktop. Abaixo de 1024 os embrulhos
 * viram display:contents (não geram caixa: os filhos voltam a ser itens do mesmo
 * flex de antes) e as peças novas somem — o mobile fica idêntico.
 *
 * "A partir de R$ 150,00" (134845:11262) não entra: [DECISÃO:2026-09-24] oculto até
 * haver regra (docs/18 §5 #2). O resumo mostra só o que o fluxo já sabe.
 *
 * Mesmas regras de dl-desktop.css: tudo em @layer dl-telas, só tokens, sem !important.
 * Esta folha carrega ANTES de dl-desktop-shell (ordem alfabética): onde o shell define
 * a mesma propriedade, as regras daqui usam uma classe a mais.
 */

@layer dl-telas {

/* ---------------------------------------------------------------------- */
/* Abaixo de 1024: neutraliza o markup novo (display:contents / none)      */
/* ---------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
    .dl-fluxo,
    .dl-fluxo__principal,
    .dl-fluxo__resumo,
    .dl-fluxo__cartao {
        display: contents;
    }

    .dl-fluxo__so-desktop {
        display: none;
    }
}

@media (min-width: 1024px) {

    /* ------------------------------------------------------------------ */
    /* Comum às telas do fluxo                                             */
    /* ------------------------------------------------------------------ */

    /* As utilitárias do shell dão display às peças; [hidden] tem de vencer. */
    .dl-fluxo [hidden],
    .dl-fluxo__so-desktop[hidden] {
        display: none;
    }

    /* 134844:10576: conteúdo em y=92 (40 do shell + 52). As telas mobile esticam
       até o pé (botão no rodapé); no desktop o botão está no card-resumo. */
    .dl-container.dl-fluxo-tela {
        min-height: 0;
        padding-top: calc(92px - var(--dl-d-topo));
        padding-bottom: var(--dl-d-topo);
    }

    /* Principal: título → conteúdo a 40 (134845:11208). */
    .dl-fluxo .dl-fluxo__principal {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    /* Na tela-norte o título não tem ícone: os ícones de título do mobile saem. */
    .dl-fluxo .dl-agendar__titulo-icone,
    .dl-fluxo .dl-agenda__titulo-icone,
    .dl-fluxo .dl-profissionais__icone {
        display: none;
    }

    /* Apoio sob o título: Body 1 (16/1.5) cinza-50, 16 abaixo do título. */
    .dl-fluxo .dl-agendar__apoio,
    .dl-fluxo .dl-agenda__apoio,
    .dl-fluxo .dl-profissionais__apoio,
    .dl-fluxo .dl-revisar__apoio {
        font-size: 16px;
        line-height: 1.5;
        color: var(--dl-cinza-50);
    }

    .dl-fluxo .dl-agendar__cabecalho,
    .dl-fluxo .dl-agenda__cabecalho,
    .dl-fluxo .dl-profissionais__cabecalho,
    .dl-fluxo .dl-revisar__cabecalho {
        gap: 16px;
        margin: 0;
    }

    /* Seletor "Limpeza em" fora do catálogo: só informa (trocar o imóvel no meio do
       fluxo refaria horas e valor) — sem seta e sem ponteiro. */
    .dl-fluxo .dl-fluxo__seletor {
        justify-content: flex-start;
        gap: 8px;
        cursor: default;
    }

    .dl-fluxo__seletor-icone {
        flex: none;
        width: 20px;
        height: 20px;
    }

    /* Card-resumo: o primeiro bloco não tem divisor (a linha "A partir de" que ele
       separava está oculta — docs/18 §5 #2). */
    .dl-d-resumo.dl-fluxo__cartao > .dl-d-resumo__bloco:first-child {
        padding-top: 0;
        border-top: 0;
    }

    /* Vários pares rótulo → valor no mesmo bloco: 12 entre pares, 4 dentro. */
    .dl-d-resumo__bloco.dl-fluxo__dados {
        gap: 12px;
    }

    .dl-fluxo__dado {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    /* Botões das telas dentro do card: largura cheia, 48 de altura, sem as margens
       que no mobile os assentavam no rodapé. */
    .dl-d-resumo.dl-fluxo__cartao .dl-botao {
        width: 100%;
        height: 48px;
        margin: 0;
    }

    /* Caixas brancas do mobile dentro do card-resumo: o card já é a caixa. */
    .dl-d-resumo.dl-fluxo__cartao .dl-ag-cartao,
    .dl-d-resumo.dl-fluxo__cartao .dl-escolher-data__resumo {
        margin: 0;
        padding: 0;
        background: none;
        border-radius: 0;
    }

    /* Avisos INFO dentro do card: pele do bloco INFO (134845:11273) — branco, borda do
       resumo, raio 12, padding 16, ícone 20 azul, título 12 bold azul, texto 12. */
    .dl-d-resumo.dl-fluxo__cartao .dl-aviso:not(.dl-aviso--atencao) {
        gap: 12px;
        min-height: 0;
        padding: 16px;
        border: 1px solid var(--dl-d-resumo-borda);
        border-radius: var(--dl-radius-card);
        background: var(--dl-branco);
        color: var(--dl-azul);
    }

    .dl-d-resumo.dl-fluxo__cartao .dl-aviso:not(.dl-aviso--atencao) .dl-aviso__texto {
        gap: 6px;
        font-size: 12px;
        line-height: 1.5;
        color: var(--dl-cinza-50);
    }

    .dl-d-resumo.dl-fluxo__cartao .dl-aviso:not(.dl-aviso--atencao) strong {
        color: var(--dl-azul);
        font-weight: 700;
        text-transform: uppercase;
    }

    .dl-d-resumo.dl-fluxo__cartao .dl-aviso:not(.dl-aviso--atencao) .dl-aviso__texto > span {
        opacity: 0.7;
    }

    /* ------------------------------------------------------------------ */
    /* tipo-de-limpeza — 134844:10576                                       */
    /* ------------------------------------------------------------------ */

    /* [REVISÃO-DESKTOP:2026-10-01] slide 11 — "fazer igual do Figma": volta a
       tela-norte. Acordeão vertical (Expressa · Padrão · Pesada) no principal
       de 659 e o card-resumo de 341 à direita, gap 25, conteúdo em y=92 — sai a
       versão compacta de largura inteira e as colunas lado a lado ≥ 1440
       [TELA-NOVA:2026-09-28]. Fechado, o card mostra só ícone, nome e seta; o
       escolhido abre com a descrição e os itens [PACOTES] com o check verde
       (o nome de cada item, como no acordeão da landing; o texto completo segue
       no Modal/Info do mobile e na tela seguinte). "A partir de" continua
       oculto (docs/18 §5 #2). Slide 6: os cards trocam a borda pela sombra. */

    /* O seletor fica fora do <form> (topo da tela no mobile): a tela vira a
       grade e o form some da caixa, deixando principal e resumo como itens
       dela. Coluna da direita: seletor (linha 1) · 16 · card-resumo (linha 2);
       o principal cruza as duas. A 2ª linha é 1fr para a altura do acordeão
       não empurrar o card-resumo para longe do seletor. */
    .dl-catalogo[data-dl-catalogo] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--dl-d-col-resumo);
        grid-template-rows: auto 1fr;
        column-gap: var(--dl-d-gap-colunas);
        align-items: start;
        max-width: var(--dl-d-conteudo-max);
        padding-top: calc(92px - var(--dl-d-topo));
        padding-bottom: 0;
    }

    .dl-catalogo .dl-catalogo__form {
        display: contents;
    }

    .dl-catalogo .dl-catalogo__principal {
        grid-column: 1;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        gap: 40px;
        min-width: 0;
    }

    /* Seletor "Limpeza em" (134845:11252): 52 alto, raio 16, fundo e borda do
       resumo. O rótulo é 8 no Figma; 11 aqui para continuar legível. */
    .dl-catalogo .dl-catalogo__local {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--dl-d-topo));
        height: 52px;
        min-height: 0;
        margin: 0 0 16px;
        padding: 4px 21px 4px 20px;
        gap: 8px;
        border-radius: var(--dl-d-radius);
    }

    .dl-catalogo .dl-catalogo__local-icone {
        margin-right: 0;
    }

    .dl-catalogo .dl-catalogo__local-rotulo {
        font-size: 11px;
        line-height: 1.2;
        color: var(--dl-azul-marinho);
    }

    .dl-catalogo .dl-catalogo__local-endereco {
        font-size: 12px;
        font-weight: 600;
        line-height: 1.5;
    }

    /* O corte na altura da maiúscula do mobile, somado ao overflow do endereço,
       come vírgula e descendentes ("Vigário, 1450"); no seletor desktop não corta. */
    .dl-catalogo .dl-catalogo__local-rotulo,
    .dl-catalogo .dl-catalogo__local-endereco {
        text-box: normal;
    }

    .dl-catalogo .dl-catalogo__local-textos {
        gap: 4px;
    }

    /* Card-resumo: acompanha o seletor na rolagem (52 + 16 abaixo dele). */
    .dl-catalogo .dl-catalogo__resumo {
        grid-column: 2;
        grid-row: 2;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--dl-d-topo) + 68px);
        gap: 20px;
    }

    /* Título Desktop/H1 44/40 (o do shell) e apoio 16 cinza-50 a 16 dele. */
    .dl-catalogo .dl-catalogo__cabeca {
        gap: 16px;
    }

    .dl-catalogo .dl-catalogo__apoio {
        font-size: 16px;
        line-height: 1.5;
        color: var(--dl-cinza-50);
        text-box: normal;
    }

    /* O ícone citado no apoio é a seta do acordeão (134845:11177), não o Info. */
    .dl-catalogo .dl-catalogo__apoio-icone {
        display: none;
    }

    .dl-catalogo .dl-catalogo__apoio-seta {
        display: inline-block;
        width: 8px;
        height: 14px;
        margin: 0 4px;
        vertical-align: -2px;
        transform: rotate(90deg);
    }

    /* Acordeão (134844:10825): 4 entre os cards. */
    .dl-catalogo .dl-catalogo__cards {
        align-items: stretch;
        gap: 4px;
    }

    /* Card/Serviço (134844:10826): branco, raio 12, padding 12/24/12/12; ícone
       36 · 16 · nome · seta 16. Aberto, o padding de baixo vai a 24 e o corpo
       entra 24 abaixo da cabeça. */
    .dl-catalogo .dl-card-servico,
    .dl-catalogo .dl-card-servico:has(.dl-card-servico__radio:checked) {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) 16px;
        grid-template-rows: auto auto auto;
        column-gap: 16px;
        row-gap: 0;
        align-items: center;
        min-height: 0;
        padding: 12px 24px 12px 12px;
        border: 0;
        border-radius: var(--dl-radius-card);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-catalogo .dl-card-servico:has(.dl-card-servico__radio:checked) {
        padding-bottom: 24px;
    }

    .dl-catalogo .dl-card-servico:has(.dl-card-servico__radio:focus-visible) {
        box-shadow: var(--dl-d-sombra-card), var(--dl-foco-anel);
    }

    /* No desktop os outros cards não recuam (sem os 50% / 321 de 134834:2816). */
    .dl-catalogo .dl-catalogo__cards:has(.dl-card-servico__radio:checked) .dl-card-servico:not(:has(.dl-card-servico__radio:checked)) {
        opacity: 1;
        transform: none;
    }

    .dl-catalogo .dl-card-servico__conteudo {
        display: contents;
    }

    /* Ícone 36, raio 4, azul — o desenho de cada tipo (134844:10829 · 10838 · 10863). */
    .dl-catalogo .dl-card-servico .dl-card-servico__icone {
        grid-column: 1;
        grid-row: 1;
        width: 36px;
        height: 36px;
        border-radius: 4px;
        background: var(--dl-azul);
    }

    .dl-catalogo .dl-card-servico__icone .dl-icone,
    .dl-catalogo .dl-card-servico__icone-m {
        display: none;
    }

    .dl-catalogo .dl-card-servico__icone-d {
        display: block;
    }

    /* Nome: Desktop/H3 24/24 semibold −0,5 azul-claro (texto grande: passa no
       contraste de 3:1). */
    .dl-catalogo .dl-card-servico .dl-card-servico__titulo {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        height: auto;
        font-size: 24px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: -0.5px;
        color: var(--dl-azul-claro);
        text-box: normal;
    }

    /* Corpo do aberto (134844:10845): 12 de recuo dos dois lados; descrição 16
       cinza-50 e, 24 abaixo, os itens. Fechado, a altura é 0 (F16.M: com o
       interpolate-size do shell ela anima até auto) e some para o leitor de
       tela e para o tab (visibility). */
    .dl-catalogo .dl-card-servico .dl-card-servico__descricao,
    .dl-catalogo .dl-card-servico .dl-card-servico__escopo {
        grid-column: 1 / -1;
        height: 0;
        min-height: 0;
        margin: 0;
        padding-inline: 12px;
        overflow: clip;
        overflow-clip-margin: 8px;
        visibility: hidden;
    }

    .dl-catalogo .dl-card-servico .dl-card-servico__descricao {
        grid-row: 2;
        display: block;
        font-size: 16px;
        line-height: 1.5;
        color: var(--dl-cinza-50);
        text-box: normal;
    }

    .dl-catalogo .dl-card-servico .dl-card-servico__escopo {
        grid-row: 3;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .dl-catalogo .dl-card-servico:has(.dl-card-servico__radio:checked) :is(.dl-card-servico__descricao, .dl-card-servico__escopo) {
        height: auto;
        margin-top: 24px;
        visibility: visible;
    }

    .dl-catalogo .dl-card-servico .dl-card-servico__canto {
        grid-column: 3;
        grid-row: 1;
        display: grid;
        place-items: center;
        width: 16px;
        height: 16px;
    }

    /* O Info e o Sucesso do canto são do mobile; aqui o canto é a seta 16×8. */
    .dl-catalogo .dl-card-servico:has(.dl-card-servico__radio) .dl-card-servico__info,
    .dl-catalogo .dl-card-servico:has(.dl-card-servico__radio) .dl-card-servico__check {
        display: none;
    }

    .dl-catalogo .dl-card-servico__seta {
        display: block;
        flex: none;
        width: 8px;
        height: 16px;
        transform: rotate(90deg);
    }

    /* F16.M [TELA-NOVA:2026-09-25] (docs/19 §5.4): aberto, a seta gira para cima. */
    .dl-catalogo .dl-card-servico:has(.dl-card-servico__radio:checked) .dl-card-servico__seta {
        transform: rotate(-90deg);
    }

    /* Item (134844:10848): check verde 17×12 · 12 · nome 16 cinza-50. */
    .dl-catalogo .dl-card-servico__escopo-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 16px;
        line-height: 1.5;
        color: var(--dl-cinza-50);
    }

    .dl-catalogo .dl-card-servico__escopo-check {
        display: block;
        flex: none;
        width: 17px;
        height: 12px;
        margin: 6px 0 0;
    }

    .dl-catalogo .dl-card-servico__escopo-item strong {
        font-weight: 400;
        color: inherit;
    }

    /* Só o nome do item; o texto (e os dois-pontos) saem. Item sem nome mostra
       o texto. */
    .dl-catalogo .dl-card-servico__escopo-texto {
        display: none;
    }

    .dl-catalogo .dl-card-servico__escopo-item--sem-titulo .dl-card-servico__escopo-texto {
        display: inline;
    }

    /* A exclusão do tipo [PACOTES], como no Modal/Info do mobile. */
    .dl-catalogo .dl-card-servico__escopo-exclusao {
        margin-top: 4px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--dl-cinza-50);
    }

    /* Card-resumo (134845:11261): "Serviço selecionado" · INFO · Continuar —
       padding 24, raio 16, 20 entre as partes; INFO 16/raio 12; botão 48/16. */
    .dl-catalogo .dl-catalogo__caixa {
        padding: 0;
        background: none;
        border-radius: 0;
    }

    .dl-catalogo .dl-catalogo__aviso .dl-aviso__texto {
        gap: 6px;
        font-size: 12px;
        line-height: 1.5;
    }

    .dl-catalogo .dl-catalogo__aviso-corpo {
        text-box: normal;
    }

    .dl-catalogo .dl-d-resumo.dl-fluxo__cartao .dl-catalogo__continuar {
        height: 48px;
        margin-top: 0;
        font-size: 16px;
    }

    /* Troca de imóvel (134834:2872): largura inteira e em grade — bloco
       "Fluxo em largura inteira" no fim desta folha. */

    /* ------------------------------------------------------------------ */
    /* agendar — [TELA-NOVA:2026-09-24] roteiro à esquerda, horas/valor no  */
    /* card-resumo                                                         */
    /* ------------------------------------------------------------------ */

    .dl-fluxo .dl-agendar__acordeoes {
        margin: 0;
    }

    .dl-fluxo .dl-agendar__form {
        margin-top: 0;
    }

    /* ------------------------------------------------------------------ */
    /* escolher-profissionais — a barra "obrigatório contratar N" vira nota */
    /* sob o título                                                        */
    /* ------------------------------------------------------------------ */

    .dl-fluxo .dl-escolher-prof__cabeca-tela {
        order: -1;
    }

    .dl-fluxo .dl-escolher-prof__barra {
        position: static;
        width: auto;
        margin: -16px 0 0;
        padding: 16px 20px;
        border: 0;
        border-radius: var(--dl-radius-card);
        box-shadow: var(--dl-d-sombra-card);
        text-align: left;
    }

    .dl-fluxo .dl-escolher-prof__grupo {
        margin: 0;
    }

    /* A lista de escolha vira grade de cards compactos — bloco "Fluxo em largura
       inteira" no fim desta folha. */

    .dl-fluxo .dl-profissionais__resultado {
        margin-top: 0;
    }

    .dl-fluxo .dl-escolher-prof__form {
        flex: none;
    }

    /* ------------------------------------------------------------------ */
    /* revisar-agendamento — seções à esquerda, "Resumo do valor" no card   */
    /* ------------------------------------------------------------------ */

    .dl-d-resumo.dl-fluxo__cartao .dl-ag-resumo {
        margin-top: 0;
    }

    /* ------------------------------------------------------------------ */
    /* agendamento-confirmado — faixa à esquerda, pagamento + ações no card */
    /* ------------------------------------------------------------------ */

    .dl-fluxo .dl-confirmado__faixa {
        border-radius: var(--dl-d-radius);
    }

    .dl-fluxo .dl-confirmado__caixa {
        margin-top: 0;
    }

    .dl-fluxo .dl-confirmado__acoes {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
    }

    /* ------------------------------------------------------------------ */
    /* escolher-data — calendário à esquerda, resumo da escolha no card     */
    /* ------------------------------------------------------------------ */

    .dl-fluxo .dl-escolher-data__cartao {
        margin-top: 0;
    }

    /* ------------------------------------------------------------------ */
    /* disponibilidade (profissional) — semana à esquerda; dias bloqueados  */
    /* e Salvar na coluna da direita. Coluna alta: não gruda na rolagem.    */
    /* ------------------------------------------------------------------ */

    .dl-fluxo .dl-disponibilidade__semana {
        margin-top: 0;
    }

    .dl-fluxo .dl-fluxo__resumo--estatico {
        position: static;
        gap: 20px;
    }

    .dl-fluxo .dl-disponibilidade__bloqueios {
        margin-top: 0;
    }

    .dl-fluxo .dl-fluxo__resumo--estatico .dl-agenda__botao {
        width: 100%;
        height: 48px;
        margin: 0;
    }

    /* ------------------------------------------------------------------ */
    /* pagamento — checkout do widget à esquerda; o que o agendamento já    */
    /* sabe (serviço, data, duração, total) no card                        */
    /* ------------------------------------------------------------------ */

    /* dl-checkout.css está fora de camada (vence o widget) e fixa a tipografia do
       <h1>: o tamanho desktop vai num <span> interno, que só herda no mobile. */
    .dl-checkout .dl-checkout__titulo-texto {
        display: inline-block;
    }

    .dl-checkout--aguardando {
        max-width: 659px;
    }
}

/* 1024–1279: o resumo vai a 300 (o shell faz o mesmo em .dl-d-p2). No tipo-de-
   limpeza o principal ficaria com ~360: o respiro lateral desce a 32 (só nesta
   tela) e o título a 28/32, para caber numa linha. [TELA-NOVA:2026-09-28] */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .dl-catalogo[data-dl-catalogo] {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    body.dl-com-sidebar > main.dl-container:has(> .dl-catalogo[data-dl-catalogo]) {
        padding-inline: var(--dl-espaco-8);
    }

    .dl-catalogo .dl-catalogo__titulo.dl-d-titulo-tela {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.6px;
    }
}

/* ====================================================================== */
/* F16.M — micro-interações do P2 (docs/19 §5.4 · §5.6 disponibilidade)   */
/* [TELA-NOVA:2026-09-25]                                                  */
/*                                                                        */
/* O Figma não anima nada: tudo aqui é design criado pela Regra 3 e nada   */
/* carrega informação nova. Fio condutor: o que o principal muda "entra"   */
/* no card-resumo (crossfade + DL.motion.marcar). Primitivas do shell:     */
/* dl-d-entra, .dl-d-cascata, .dl-d-pop, .dl-d-tremer, .dl-d-atualizou,    */
/* .dl-botao[aria-busy]. Entradas com fill `backwards`, nunca `both`.       */
/* ====================================================================== */

@media (min-width: 1024px) {
    /* Valor novo de uma linha do resumo (JS: pulsar 'dl-fluxo-troca'). */
    @keyframes dl-fluxo-troca {
        from {
            opacity: 0;
        }
    }

    /* Bloco que estava [hidden] e aparece (resumo da data, "Serviço selecionado"). */
    @keyframes dl-fluxo-surge {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
    }

    @keyframes dl-fluxo-mes-prox {
        from {
            opacity: 0;
            transform: translateX(16px);
        }
    }

    @keyframes dl-fluxo-mes-ant {
        from {
            opacity: 0;
            transform: translateX(-16px);
        }
    }

    /* Horas: o número novo sobe de baixo (+) ou desce de cima (−); o antigo é o
       ::before, um "degrau" acima/abaixo, e sai junto com o movimento. */
    @keyframes dl-fluxo-num-sobe {
        from {
            transform: translateY(100%);
        }
    }

    @keyframes dl-fluxo-num-desce {
        from {
            transform: translateY(-100%);
        }
    }

    @keyframes dl-fluxo-brilho {
        from {
            transform: translateX(-100%);
        }

        to {
            transform: translateX(100%);
        }
    }

    /* Card da profissional escolhido: pop curto (mais contido que .dl-d-pop, que é
       para peças pequenas). */
    @keyframes dl-fluxo-escolhe {
        from {
            transform: scale(0.98);
        }
    }

    @keyframes dl-fluxo-etapa-ida {
        from {
            opacity: 0;
            transform: translateX(24px);
        }
    }

    @keyframes dl-fluxo-etapa-volta {
        from {
            opacity: 0;
            transform: translateX(-24px);
        }
    }

    @keyframes dl-fluxo-pix {
        50% {
            transform: scale(1.02);
        }
    }

    @keyframes dl-fluxo-sobe {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
    }

    /* ---- agendar · valor ao vivo: carregando = barra de skeleton ------- */

    /* dl-agendamento.css (mobile) esmaece o valor a 50%; aqui o texto some e a
       própria caixa do número vira o skeleton — mesma largura, nada pula. O
       brilho que corre por cima só existe sem reduced-motion (bloco abaixo). */
    .dl-fluxo .dl-agendar__valor.is-carregando strong {
        position: relative;
        overflow: hidden;
        border-radius: 4px;
        background: var(--dl-cinza-10);
        color: transparent;
        opacity: 1;
    }

    /* ---- agendar · janela do número das horas -------------------------- */

    /* inline-block com overflow visível: a linha de base continua a do texto. O
       clip-path recorta a janela sem mexer nela. */
    .dl-agendar__horas-janela {
        display: inline-block;
        clip-path: inset(0 -2px);
    }

    .dl-agendar__horas-num {
        position: relative;
        display: inline-block;
    }

    /* Card escolhido: a borda passa de 1 a 2 (dl-agendamento.css) e o padding de
       16 do mobile vencia os 24 do card desktop — o card encolhia 14px ao ser
       escolhido. 23 + 2 = 24 + 1: a escolha não mexe na altura (docs/19 §2 #5). */
    .dl-fluxo .dl-escolher-prof__grupo .dl-card-profissional--escolha:has(.dl-card-profissional__marcador:checked) {
        padding: 23px;
    }

    /* ---- disponibilidade · o dia desligado esmaece os turnos ------------ */

    /* Os turnos continuam à vista e clicáveis (o Figma 4846 os mostra sempre):
       recolher escondia o controle sob o cursor ao desmarcar o último turno. O
       estado inicial vem do servidor (class-dl-front-agenda.php). */
    .dl-fluxo .dl-disponibilidade__dia:not(.is-ativo) .dl-disponibilidade__turnos {
        opacity: 0.5;
    }
}

/* Movimento só para quem não pediu menos movimento. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {

    /* ---- Comum do P2 ----------------------------------------------------- */

    /* Valor que o principal acabou de trocar (o flash da linha é do shell). */
    .dl-fluxo-troca {
        animation: dl-fluxo-troca var(--dl-dur-base) var(--dl-ease-saida);
    }

    /* Botão primário do card-resumo: desabilitado → habilitado em 200ms (o
       componente só transiciona cor); a cor do rótulo acompanha o spinner. */
    .dl-d-resumo.dl-fluxo__cartao .dl-botao,
    .dl-fluxo .dl-fluxo__resumo--estatico .dl-agenda__botao {
        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),
            opacity var(--dl-dur-base) var(--dl-ease-saida),
            transform var(--dl-dur-rapida) var(--dl-ease-saida);
    }

    /* ---- tipo-de-limpeza (134844:10576) · acordeão de radio --------------- */

    /* Abre e fecha pela altura (0 ↔ auto), com o respiro de baixo e o gap junto;
       o visibility só vira no fim do fechamento. Borda do escolhido em 200ms. */
    .dl-catalogo[data-dl-catalogo] .dl-card-servico {
        transition:
            row-gap var(--dl-dur-lenta) var(--dl-ease-troca),
            padding var(--dl-dur-lenta) var(--dl-ease-troca),
            border-color var(--dl-dur-base) var(--dl-ease-saida),
            box-shadow var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-catalogo .dl-card-servico :is(.dl-card-servico__descricao, .dl-card-servico__escopo) {
        transition:
            height var(--dl-dur-lenta) var(--dl-ease-troca),
            visibility var(--dl-dur-lenta);
    }

    .dl-catalogo .dl-card-servico__seta {
        transition: transform var(--dl-dur-lenta) var(--dl-ease-troca);
    }

    /* Itens com o check verde em cascata de 30ms a cada abertura. */
    .dl-catalogo .dl-card-servico:has(.dl-card-servico__radio:checked) :is(.dl-card-servico__escopo-item, .dl-card-servico__escopo-exclusao) {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
        animation-delay: calc(80ms + var(--dl-i, 0) * 30ms);
    }

    .dl-card-servico__escopo > :nth-child(2) { --dl-i: 1; }
    .dl-card-servico__escopo > :nth-child(3) { --dl-i: 2; }
    .dl-card-servico__escopo > :nth-child(4) { --dl-i: 3; }
    .dl-card-servico__escopo > :nth-child(5) { --dl-i: 4; }
    .dl-card-servico__escopo > :nth-child(6) { --dl-i: 5; }
    .dl-card-servico__escopo > :nth-child(7) { --dl-i: 6; }
    .dl-card-servico__escopo > :nth-child(n + 8) { --dl-i: 7; }

    /* "Serviço selecionado" aparece no resumo na 1ª escolha. Nas trocas seguintes
       o bloco pisca (DL.motion.marcar): a lista repete a entrada pelo mesmo nome
       para ela não recomeçar quando a classe do flash entra e sai. */
    .dl-catalogo__resumo [data-dl-catalogo-resumo] {
        animation: dl-fluxo-surge var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
    }

    .dl-catalogo__resumo [data-dl-catalogo-resumo].dl-d-atualizou {
        animation:
            dl-fluxo-surge var(--dl-dur-lenta) var(--dl-ease-saida) backwards,
            dl-d-atualizou 700ms var(--dl-ease-saida);
    }

    /* ---- agendar · contador de horas ------------------------------------ */

    .dl-fluxo .dl-agendar__contador .dl-contador__botao {
        transition:
            transform var(--dl-dur-rapida) var(--dl-ease-saida),
            border-color var(--dl-dur-base) var(--dl-ease-saida),
            color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-fluxo .dl-agendar__contador .dl-contador__botao:active:not(:disabled) {
        transform: scale(0.9);
    }

    .dl-agendar__horas-num.is-sobe {
        animation: dl-fluxo-num-sobe var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-agendar__horas-num.is-desce {
        animation: dl-fluxo-num-desce var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-agendar__horas-num:is(.is-sobe, .is-desce)::before {
        content: attr(data-antes);
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
    }

    .dl-agendar__horas-num.is-sobe::before {
        bottom: 100%;
    }

    .dl-agendar__horas-num.is-desce::before {
        top: 100%;
    }

    /* ---- agendar · valor ao vivo (shimmer) ------------------------------ */

    .dl-fluxo .dl-agendar__valor.is-carregando strong::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, var(--dl-branco) 50%, transparent);
        opacity: 0.6;
        animation: dl-fluxo-brilho 1.2s var(--dl-ease-troca) infinite;
    }

    /* ---- agendar · kit -------------------------------------------------- */

    /* O marcador do kit acompanha a troca (o pop vem de DL.motion.pop). */
    .dl-fluxo .dl-agendar__kit .dl-opcao__radio {
        transition:
            background-color var(--dl-dur-base) var(--dl-ease-saida),
            border-color var(--dl-dur-base) var(--dl-ease-saida),
            box-shadow var(--dl-dur-base) var(--dl-ease-saida);
    }

    /* ---- escolher-data · calendário e períodos -------------------------- */

    :is(.dl-escolher-data, .dl-disponibilidade) :is(.dl-calendario__grade, .dl-calendario__titulo).dl-fluxo-mes--prox {
        animation: dl-fluxo-mes-prox var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
    }

    :is(.dl-escolher-data, .dl-disponibilidade) :is(.dl-calendario__grade, .dl-calendario__titulo).dl-fluxo-mes--ant {
        animation: dl-fluxo-mes-ant var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
    }

    :is(.dl-escolher-data, .dl-disponibilidade) .dl-calendario__grade .dl-calendario__dia {
        transition:
            background-color var(--dl-dur-rapida) var(--dl-ease-saida),
            border-color var(--dl-dur-rapida) var(--dl-ease-saida),
            color var(--dl-dur-rapida) var(--dl-ease-saida);
    }

    /* O resumo da escolha ([hidden] até o 1º dia) entra com fade + 8px. A linha do
       início, que reaparece ao escolher o período, ganha o flash do resumo (JS) —
       uma animação própria no <li> encobriria o .dl-d-atualizou do shell. */
    .dl-fluxo .dl-escolher-data__resumo {
        animation: dl-fluxo-surge var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
    }

    .dl-fluxo .dl-escolher-data__periodo {
        transition: color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-fluxo .dl-escolher-data__radio {
        transition:
            background-color var(--dl-dur-base) var(--dl-ease-saida),
            border-color var(--dl-dur-base) var(--dl-ease-saida);
    }

    /* ---- escolher-profissionais ----------------------------------------- */

    .dl-fluxo .dl-escolher-prof__grupo .dl-card-profissional--escolha {
        transition:
            border-color var(--dl-dur-base) var(--dl-ease-saida),
            opacity var(--dl-dur-base) var(--dl-ease-saida),
            box-shadow var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-fluxo .dl-escolher-prof__grupo .dl-card-profissional--escolha.dl-fluxo-escolhido {
        animation: dl-fluxo-escolhe var(--dl-dur-lenta) var(--dl-ease-mola);
    }

    /* Os cards entram em cascata, como as listas do P3. */
    html:not(.dl-splash-ativo) .dl-fluxo .dl-escolher-prof__grupo .dl-profissionais__lista > li {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
        animation-delay: calc(80ms + var(--dl-i, 0) * 50ms);
    }

    .dl-escolher-prof__grupo .dl-profissionais__lista > :nth-child(2) { --dl-i: 1; }
    .dl-escolher-prof__grupo .dl-profissionais__lista > :nth-child(3) { --dl-i: 2; }
    .dl-escolher-prof__grupo .dl-profissionais__lista > :nth-child(4) { --dl-i: 3; }
    .dl-escolher-prof__grupo .dl-profissionais__lista > :nth-child(5) { --dl-i: 4; }
    .dl-escolher-prof__grupo .dl-profissionais__lista > :nth-child(6) { --dl-i: 5; }
    .dl-escolher-prof__grupo .dl-profissionais__lista > :nth-child(7) { --dl-i: 6; }
    .dl-escolher-prof__grupo .dl-profissionais__lista > :nth-child(n + 8) { --dl-i: 7; }

    /* ---- pagamento · etapas do widget (só CSS por cima, docs/19 §9) ------ */

    /* O goToStep do widget troca display/.active: a etapa nova entra do lado para
       onde se anda (data-dl-etapa-dir, dl-checkout.js). */
    .dl-checkout .vime-checkout-step.active {
        animation: dl-fluxo-etapa-ida var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
    }

    .dl-checkout[data-dl-etapa-dir="volta"] .vime-checkout-step.active {
        animation-name: dl-fluxo-etapa-volta;
    }

    /* Pix aguardando: o QR respira devagar enquanto o JS consulta o pagamento. */
    .dl-checkout--aguardando .js-pix-qr-code {
        animation: dl-fluxo-pix 2.4s var(--dl-ease-troca) infinite;
    }

    /* ---- agendamento-confirmado · card-resumo em cascata ---------------- */

    /* O check desenhado e os textos da faixa valem para toda largura
       (dl-agendamento.css); no desktop o card-resumo sobe em cascata ao lado. */
    .dl-fluxo :is(.dl-confirmado__caixa > *, .dl-confirmado__acoes) {
        animation: dl-fluxo-sobe var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
    }

    .dl-fluxo .dl-confirmado__caixa > :nth-child(1) { animation-delay: 300ms; }
    .dl-fluxo .dl-confirmado__caixa > :nth-child(2) { animation-delay: 360ms; }
    .dl-fluxo .dl-confirmado__caixa > :nth-child(3) { animation-delay: 420ms; }
    .dl-fluxo .dl-confirmado__caixa > :nth-child(n + 4) { animation-delay: 480ms; }
    .dl-fluxo .dl-confirmado__acoes { animation-delay: 540ms; }

    /* ---- disponibilidade · turnos esmaecem e chips ---------------------- */

    .dl-fluxo .dl-disponibilidade__turnos {
        transition: opacity var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-fluxo .dl-disponibilidade__nome {
        transition: color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-fluxo .dl-disponibilidade__turno {
        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);
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    /* Dia com vaga (escolher-data) e dia bloqueável (disponibilidade): fundo do
       resumo no hover — o mesmo azul-claro 12% do card-resumo. */
    .dl-escolher-data .dl-calendario__dia--disponivel:not(.is-selecionado):hover,
    .dl-disponibilidade .dl-calendario__dia:not(:disabled, .dl-calendario__dia--bloqueado, .dl-calendario__dia--reservado):hover {
        background-color: var(--dl-d-resumo-fundo);
    }

    /* [REVISÃO-DESKTOP:2026-10-01] slide 6: clicável fechado sobe para a sombra
       de destaque no hover (o card não tem mais borda). */
    .dl-catalogo[data-dl-catalogo] .dl-card-servico:not(:has(.dl-card-servico__radio:checked)):hover {
        box-shadow: var(--dl-d-sombra-destaque);
    }
}

/* Menos movimento: sem deslocamento nem laço; o que é troca de valor vira fade
   curto (≤ 120ms) e o resto aparece no estado final. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .dl-fluxo-troca {
        animation: dl-fluxo-troca var(--dl-dur-rapida) linear;
    }

    .dl-checkout .vime-checkout-step.active,
    .dl-fluxo .dl-escolher-data__resumo,
    .dl-catalogo__resumo [data-dl-catalogo-resumo] {
        animation: dl-fluxo-troca var(--dl-dur-rapida) linear backwards;
    }

    .dl-catalogo__resumo [data-dl-catalogo-resumo].dl-d-atualizou {
        animation:
            dl-fluxo-troca var(--dl-dur-rapida) linear backwards,
            dl-d-atualizou 700ms var(--dl-ease-saida);
    }

    .dl-d-resumo.dl-fluxo__cartao .dl-botao,
    .dl-fluxo .dl-fluxo__resumo--estatico .dl-agenda__botao,
    .dl-catalogo[data-dl-catalogo] .dl-card-servico,
    .dl-catalogo .dl-card-servico :is(.dl-card-servico__descricao, .dl-card-servico__escopo),
    .dl-catalogo .dl-card-servico__seta,
    .dl-fluxo .dl-disponibilidade__turnos,
    .dl-fluxo .dl-agendar__contador .dl-contador__botao {
        transition: none;
    }

    .dl-agendar__horas-num,
    .dl-fluxo .dl-escolher-prof__grupo .dl-card-profissional--escolha,
    .dl-checkout--aguardando .js-pix-qr-code,
    .dl-fluxo :is(.dl-confirmado__caixa > *, .dl-confirmado__acoes),
    :is(.dl-escolher-data, .dl-disponibilidade) :is(.dl-calendario__grade, .dl-calendario__titulo) {
        animation: none;
    }
}


/* O corpo do acordeão desce 24 ao abrir: a margem acompanha a altura. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .dl-catalogo .dl-card-servico :is(.dl-card-servico__descricao, .dl-card-servico__escopo) {
        transition:
            height var(--dl-dur-lenta) var(--dl-ease-troca),
            margin-top var(--dl-dur-lenta) var(--dl-ease-troca),
            visibility var(--dl-dur-lenta);
    }
}



/* ====================================================================== */
/* Fluxo em largura inteira e compacto [TELA-NOVA:2026-09-29]             */
/*                                                                        */
/* agendar · escolher-data · escolher-profissionais · revisar-agendamento */
/* · pagamento · agendamento-confirmado (as seis são main.dl-fluxo-tela) e */
/* a troca de imóvel do catálogo. Mesma escala do tipo-de-limpeza acima   */
/* (e da agenda do cliente): a tela não para nos 1025 do shell — o         */
/* principal ocupa tudo ao lado do resumo de 340 (300 até 1279, 360 a      */
/* partir de 1600) —, título 32/36 (28/32 até 1279), texto 13–14, cards    */
/* raio 12 e padding 12–20, card-resumo padding 20 raio 12, botões 40/14.  */
/* Assim nada "cresce" ao avançar do tipo-de-limpeza para o resto do fluxo.*/
/*                                                                        */
/* Sem header no desktop, cada passo ganha "‹ passo anterior" acima do    */
/* título (Agendamento_Fluxo::d_voltar; rótulo = título da tela anterior). */
/* Nada novo entra no resumo (docs/18 §4 · §5 #2): só se reorganiza o que  */
/* cada tela já mostra. Escopo .dl-fluxo-tela: a disponibilidade da        */
/* profissional também usa .dl-fluxo e não muda com este bloco. Fica no    */
/* fim da folha para vencer, na mesma camada, as regras de 2026-09-24 e o  */
/* bloco de movimento.                                                     */
/* ====================================================================== */

@media (min-width: 1024px) {

    /* ------------------------------------------------------------------ */
    /* Largura, título e "‹ voltar" — comum às seis telas                   */
    /* ------------------------------------------------------------------ */

    /* O <main> do tema (em volta do shortcode) vai até a borda direita. */
    body.dl-com-sidebar > main.dl-container:has(> :is(.dl-fluxo-tela, .dl-catalogo--imoveis)) {
        max-width: none;
    }

    /* O título sobe para os 40 do shell, como no tipo-de-limpeza (os 52 extras
       da tela-norte eram respiro de tela de 900 de altura). */
    .dl-container.dl-fluxo-tela {
        max-width: none;
        padding-top: 0;
    }

    .dl-fluxo-tela > .dl-fluxo.dl-d-p2 {
        grid-template-columns: minmax(0, 1fr) 340px;
        max-width: none;
    }

    .dl-fluxo-tela .dl-fluxo__principal {
        gap: 24px;
    }

    /* Cabeçalho: voltar · 8 · título · 8 · apoio. */
    .dl-fluxo-tela :is(.dl-agendar__cabecalho, .dl-agenda__cabecalho, .dl-profissionais__cabecalho, .dl-revisar__cabecalho) {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
    }

    .dl-fluxo-tela .dl-d-titulo-tela,
    .dl-catalogo--imoveis .dl-catalogo__titulo.dl-d-titulo-tela {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -0.8px;
        text-box: normal;
    }

    .dl-fluxo-tela :is(.dl-agendar__apoio, .dl-agenda__apoio, .dl-profissionais__apoio, .dl-revisar__apoio) {
        font-size: 14px;
        line-height: 1.5;
        text-box: normal;
    }

    /* dl-checkout.css (fora de camada) dá 16 de respiro acima do cabeçalho: a
       margem negativa devolve o título à mesma altura das outras telas. */
    .dl-checkout.dl-fluxo-tela .dl-checkout__cabecalho {
        margin-top: -16px;
    }

    /* "‹ Escolha a data" — o mesmo link da agenda do cliente (.dl-ag-voltar). */
    .dl-fluxo__voltar {
        display: flex;
        width: fit-content;
        align-items: center;
        gap: 4px;
        margin: 0 0 4px -4px;
        color: var(--dl-azul);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        text-decoration: none;
    }

    .dl-fluxo__voltar:hover {
        color: var(--dl-azul-hover);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .dl-fluxo__voltar:focus-visible {
        outline: 2px solid var(--dl-azul);
        outline-offset: 2px;
        border-radius: 4px;
    }

    .dl-fluxo__voltar-icone {
        flex: none;
        width: 18px;
        height: 18px;
    }

    /* ------------------------------------------------------------------ */
    /* Coluna do resumo — a pele compacta do tipo-de-limpeza                */
    /* ------------------------------------------------------------------ */

    .dl-fluxo-tela .dl-d-p2__resumo {
        gap: 12px;
    }

    /* Seletor "Limpeza em": 48 alto, raio 12, rótulo 11 e endereço 13. */
    .dl-fluxo-tela .dl-d-seletor.dl-fluxo__seletor {
        min-height: 48px;
        padding: 4px 16px;
        gap: 10px;
        border-radius: var(--dl-radius-card);
    }

    .dl-fluxo-tela .dl-fluxo__seletor .dl-d-seletor__textos {
        gap: 2px;
    }

    .dl-fluxo-tela .dl-fluxo__seletor .dl-d-seletor__rotulo {
        font-size: 11px;
        line-height: 1.2;
    }

    .dl-fluxo-tela .dl-fluxo__seletor .dl-d-seletor__valor {
        font-size: 13px;
        line-height: 1.4;
    }

    /* Card-resumo: padding 20, raio 12, 16 entre as partes. */
    .dl-fluxo-tela .dl-d-resumo.dl-fluxo__cartao {
        gap: 16px;
        padding: 20px;
        border-radius: var(--dl-radius-card);
    }

    /* Pares rótulo → valor: 12/16 azul-claro sobre 14/20 marinho, 10 entre pares. */
    .dl-fluxo-tela .dl-d-resumo__bloco.dl-fluxo__dados {
        gap: 10px;
    }

    .dl-fluxo-tela .dl-fluxo__dado {
        gap: 2px;
    }

    .dl-fluxo-tela .dl-fluxo__dado .dl-d-resumo__bloco-rotulo {
        font-size: 12px;
        line-height: 16px;
    }

    .dl-fluxo-tela .dl-fluxo__dado .dl-d-resumo__bloco-valor {
        font-size: 14px;
        line-height: 20px;
    }

    /* Linha "Total" do pagamento: valor 20 (o 24 do shell é da tela-norte). */
    .dl-fluxo-tela .dl-d-resumo.dl-fluxo__cartao .dl-d-resumo__linha {
        font-size: 13px;
    }

    .dl-fluxo-tela .dl-d-resumo.dl-fluxo__cartao .dl-d-resumo__linha-valor {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -0.3px;
    }

    /* Botões 40/14 — os mesmos do tipo-de-limpeza. */
    .dl-fluxo-tela .dl-d-resumo.dl-fluxo__cartao .dl-botao {
        height: 40px;
        min-height: 0;
        font-size: 14px;
    }

    /* Avisos no card: padding 12/14, texto 12 (INFO e "Sobre o Cancelamento"). */
    .dl-fluxo-tela .dl-d-resumo.dl-fluxo__cartao .dl-aviso {
        gap: 10px;
        min-height: 0;
        padding: 12px 14px;
        border-radius: var(--dl-radius-card);
    }

    .dl-fluxo-tela .dl-d-resumo.dl-fluxo__cartao .dl-aviso .dl-aviso__icone {
        flex: none;
        width: 16px;
        height: 16px;
    }

    .dl-fluxo-tela .dl-d-resumo.dl-fluxo__cartao .dl-aviso .dl-aviso__texto {
        gap: 4px;
        font-size: 12px;
        line-height: 1.5;
    }

    .dl-fluxo-tela .dl-d-resumo.dl-fluxo__cartao .dl-aviso :is(.dl-ag-aviso__titulo, .dl-ag-aviso__corpo) {
        font-size: 12px;
        line-height: 1.5;
        text-box: normal;
    }

    .dl-fluxo-tela .dl-d-suporte {
        margin-top: 0;
    }

    /* ------------------------------------------------------------------ */
    /* agendar — roteiro à vista no principal; horas e valor no card        */
    /* ------------------------------------------------------------------ */

    /* As linhas que abrem as gavetas saem: o que elas mostravam está no
       principal (Agendamento_Fluxo::d_escopo). No mobile as gavetas seguem. */
    .dl-agendar .dl-agendar__acordeoes {
        display: none;
    }

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

    /* Card branco, raio 12, padding 20. [REVISÃO-DESKTOP:2026-10-01] slide 6: sombra de card, sem borda. */
    .dl-fluxo__escopo-bloco {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        border: 0;
        border-radius: var(--dl-radius-card);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-fluxo__escopo-titulo {
        margin: 0;
        color: var(--dl-azul-marinho);
        font-family: var(--dl-fonte);
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
    }

    /* Itens em colunas de no mínimo 240: 1 até ~1279, 2–4 conforme a largura. */
    .dl-fluxo__escopo-lista {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px 28px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Item: check verde 16 · 10 · título 14 marinho sobre o texto 13 cinza-50. */
    .dl-fluxo__escopo-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin: 0;
        color: var(--dl-cinza-50);
        font-size: 13px;
        line-height: 1.5;
    }

    .dl-fluxo__escopo-icone {
        flex: none;
        width: 16px;
        height: 16px;
        margin-top: 2px;
        color: var(--dl-sucesso);
    }

    .dl-fluxo__escopo-item--fora .dl-fluxo__escopo-icone {
        color: var(--dl-cinza-30);
    }

    .dl-fluxo__escopo-textos {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .dl-fluxo__escopo-textos strong {
        color: var(--dl-azul-marinho);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

    /* Nota de autonomia (a mesma caixa cinza das gavetas), sob a grade. */
    .dl-fluxo__escopo-nota {
        margin: 0;
        padding: 10px 14px;
        border-radius: var(--dl-radius-botao);
        background: var(--dl-cinza-claro);
        color: var(--dl-cinza-70);
        font-size: 12px;
        line-height: 1.5;
    }

    .dl-fluxo__escopo-nota::first-letter {
        text-transform: uppercase;
    }

    /* Card-resumo: kit, horas, profissionais, área e valor em 12 de ritmo. */
    .dl-agendar .dl-agendar__caixa {
        gap: 12px;
    }

    .dl-agendar .dl-agendar__kit {
        min-height: 0;
        padding: 11px 14px;
        border-radius: var(--dl-radius-card);
    }

    .dl-agendar .dl-agendar__kit:has(.dl-opcao__radio:checked) {
        padding: 10px 13px;
    }

    .dl-agendar .dl-agendar__kit .dl-opcao__titulo {
        font-size: 13px;
    }

    .dl-agendar .dl-agendar__kit .dl-opcao__sub {
        font-size: 12px;
        line-height: 1.45;
        text-box: normal;
    }

    .dl-agendar .dl-agendar__texto {
        font-size: 13px;
    }

    .dl-agendar .dl-agendar__valor span {
        font-size: 14px;
    }

    .dl-agendar .dl-agendar__valor strong {
        font-size: 20px;
        line-height: 24px;
    }

    /* [REVISÃO-DESKTOP:2026-10-01] slide 12 — "pode deixar todos esses que
       estão nesse azul claro branco": no /agendar/ o seletor "Limpeza em" e o
       card de pagamento saem do azul-claro do resumo e ficam brancos, como os
       cards de escopo ao lado (slide 6: sem borda, só a sombra de card). As
       caixas de dentro (kit, produtos de limpeza, nota do valor) já eram
       brancas e mantêm a borda azul-clara, que as separa do card. */
    .dl-agendar .dl-d-p2__resumo :is(.dl-d-seletor, .dl-d-resumo) {
        border: 0;
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
    }

    /* Slide 12 — "aumenta o espaçamento da letra até o final da box": os itens
       do "O que está incluso" ficam um por linha, com o texto na largura toda
       do card (a grade de colunas de 240 deixava o texto em faixas estreitas). */
    .dl-agendar .dl-fluxo__escopo-lista {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ------------------------------------------------------------------ */
    /* Resumo alinhado ao conteúdo [TELA-NOVA:2026-09-29]                   */
    /* ------------------------------------------------------------------ */

    /* Nas telas com cabeçalho (voltar · título · apoio), a coluna do resumo
       começa na altura do 1º bloco de conteúdo, não na do "‹ voltar". A
       principal vira display:contents: o cabeçalho ocupa a 1ª linha da grade
       do P2 e o resumo começa na 2ª, junto com o conteúdo. Os 24 entre os
       blocos (o gap do flex de antes) viram margin-top, e o resumo leva o
       mesmo 24 — as duas colunas partem da mesma linha. Os modais/gavetas que
       moram na principal ficam de fora (margem num fixed os deslocaria). O
       confirmado (sem cabeçalho: o título está na faixa) não muda. */
    .dl-fluxo-tela > .dl-fluxo.dl-d-p2:has(> .dl-fluxo__principal > header) {
        row-gap: 0;
        align-items: start;
    }

    .dl-fluxo-tela > .dl-fluxo.dl-d-p2:has(> .dl-fluxo__principal > header) > .dl-fluxo__principal {
        display: contents;
    }

    .dl-fluxo-tela > .dl-fluxo.dl-d-p2:has(> .dl-fluxo__principal > header) > .dl-fluxo__principal > :not(.dl-modal) {
        grid-column: 1;
        min-width: 0;
        margin-top: 24px;
    }

    /* :not(.dl-modal) só para igualar a especificidade da regra de cima. */
    .dl-fluxo-tela > .dl-fluxo.dl-d-p2:has(> .dl-fluxo__principal > header) > .dl-fluxo__principal > header:not(.dl-modal) {
        grid-row: 1;
        margin-top: 0;
    }

    .dl-fluxo-tela > .dl-fluxo.dl-d-p2:has(> .dl-fluxo__principal > header) > .dl-d-p2__resumo {
        grid-column: 2;
        grid-row: 2;
        margin-top: 24px;
    }

    /* Escolher profissionais: a barra do "obrigatório contratar N" fica a 16
       do cabeçalho (era gap 24 − 8) e o resumo acompanha os dois blocos. */
    .dl-fluxo-tela.dl-escolher-prof > .dl-fluxo.dl-d-p2:has(> .dl-fluxo__principal > header) > .dl-fluxo__principal > .dl-escolher-prof__barra {
        justify-self: start;
        margin-top: 16px;
    }

    .dl-fluxo-tela.dl-escolher-prof > .dl-fluxo.dl-d-p2:has(> .dl-fluxo__principal > header) > .dl-d-p2__resumo {
        grid-row: 2 / span 2;
        margin-top: 16px;
    }

    /* ------------------------------------------------------------------ */
    /* escolher-data — calendário e período no mesmo card                   */
    /* ------------------------------------------------------------------ */

    /* Card branco com a sombra de card ([REVISÃO-DESKTOP:2026-10-01] slide 6). Até 1439 o período fica sob
       o calendário; a partir de 1440 ao lado (bloco de 1440 no fim). */
    .dl-escolher-data .dl-escolher-data__cartao {
        border: 0;
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-escolher-data .dl-agenda__calendario {
        gap: 8px;
        padding: 16px 20px 20px;
    }

    /* Mês em 15 semibold, setas de 32 com hover. */
    .dl-escolher-data .dl-calendario__titulo {
        font-size: 15px;
        line-height: 20px;
    }

    .dl-escolher-data .dl-calendario__nav {
        width: 32px;
        height: 32px;
        justify-items: center;
        border-radius: var(--dl-radius-botao);
    }

    .dl-escolher-data .dl-calendario__semana span {
        font-size: 11px;
        line-height: 24px;
        color: var(--dl-cinza-50);
    }

    /* Dias [TELA-NOVA:2026-09-29]: cartões de agenda — número no canto de cima,
       ponto azul embaixo no dia com vaga — que preenchem a coluna sem virar
       barra esticada (64 de alto; 72 ≥ 1440). Sem vaga: cinza-claro e número
       apagado; com vaga: branco, borda azul-claro (base), número azul 15;
       escolhido: azul cheio (base), ponto branco. */
    .dl-escolher-data .dl-calendario__grade {
        gap: 6px;
        justify-items: stretch;
    }

    .dl-escolher-data .dl-calendario__grade .dl-calendario__dia {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
        max-width: none;
        height: 64px;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 14px;
        line-height: 18px;
        font-variant-numeric: tabular-nums;
    }

    .dl-escolher-data .dl-calendario__grade .dl-calendario__dia:not(.dl-calendario__dia--disponivel, .is-selecionado) {
        background: var(--dl-cinza-claro);
        color: var(--dl-cinza-30);
    }

    .dl-escolher-data .dl-calendario__grade .dl-calendario__dia--disponivel {
        font-size: 15px;
        font-weight: 600;
    }

    /* O ponto é o ::after — o mesmo pseudo que a base usa como área de toque
       (absoluto, centrado; dl-components F14). O cartão já passa de 44×44, então
       aqui ele volta ao fluxo e desce para o pé (space-between). */
    .dl-escolher-data .dl-calendario__grade .dl-calendario__dia:is(.dl-calendario__dia--disponivel, .is-selecionado)::after {
        content: "";
        position: static;
        width: 6px;
        height: 6px;
        min-width: 0;
        min-height: 0;
        border-radius: var(--dl-radius-pill);
        background: currentColor;
        transform: none;
    }

    .dl-escolher-data .dl-calendario__grade .dl-calendario__dia:empty {
        background: none;
    }

    .dl-escolher-data .dl-calendario__semana span {
        padding-left: 10px;
        text-align: left;
    }

    /* Legenda no pé do painel (≥ 1440 ele é coluna; abaixo, fica sob os
       períodos): as três peles do dia em miniatura. */
    .dl-escolher-data .dl-escolher-data__legenda-cal {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        margin: 16px 0 0;
        padding: 0;
        list-style: none;
        color: var(--dl-cinza-70);
        font-size: 12px;
        line-height: 16px;
    }

    .dl-escolher-data .dl-escolher-data__legenda-item {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .dl-escolher-data .dl-escolher-data__legenda-item::before {
        content: "";
        width: 14px;
        height: 14px;
        box-sizing: border-box;
        border-radius: 4px;
    }

    .dl-escolher-data .dl-escolher-data__legenda-item--vaga::before {
        border: 1px solid var(--dl-azul-claro);
        background: var(--dl-branco);
    }

    .dl-escolher-data .dl-escolher-data__legenda-item--sem::before {
        background: var(--dl-cinza-10);
    }

    .dl-escolher-data .dl-escolher-data__legenda-item--escolhido::before {
        background: var(--dl-azul);
    }

    .dl-escolher-data .dl-agenda__campo {
        padding: 16px 20px 20px;
    }

    .dl-escolher-data .dl-escolher-data__legenda {
        margin-bottom: 4px;
        color: var(--dl-azul-marinho);
        font-size: 14px;
        line-height: 20px;
    }

    .dl-escolher-data .dl-escolher-data__periodos {
        gap: 8px;
    }

    /* Período: linha-cartão de 48 (texto · rádio), borda cinza-10; o escolhido
       ganha a borda azul e o fundo do resumo. O toque é a linha toda. */
    .dl-escolher-data .dl-escolher-data__periodo {
        box-sizing: border-box;
        min-height: 48px;
        padding: 0 14px;
        border: 1px solid var(--dl-cinza-10);
        border-radius: var(--dl-radius-botao);
        font-size: 13px;
    }

    .dl-escolher-data .dl-escolher-data__periodo::after {
        inset: 0;
    }

    .dl-escolher-data .dl-escolher-data__periodo:has(.dl-escolher-data__radio:checked) {
        border-color: var(--dl-azul);
        background: var(--dl-d-resumo-fundo);
        color: var(--dl-azul-marinho);
    }

    .dl-escolher-data .dl-escolher-data__periodo:has(.dl-escolher-data__radio:focus-visible) {
        box-shadow: var(--dl-foco-anel);
    }

    /* Início fixo (≥ 8h): bloco com o relógio, o horário e o porquê — o painel
       ao lado do calendário deixa de ser uma linha solta. O porquê é o aviso do
       resumo (3475): enquanto o resumo está [hidden] ele aparece aqui; escolhido
       o dia, fica só no resumo — o texto nunca aparece duas vezes. */
    .dl-escolher-data .dl-escolher-data__fixo {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 14px 16px 0;
        border: 1px solid var(--dl-d-resumo-borda);
        border-bottom: 0;
        border-radius: 10px 10px 0 0;
        background: var(--dl-d-resumo-fundo);
        color: var(--dl-azul-marinho);
        font-size: 15px;
        font-weight: 600;
        line-height: 22px;
    }

    .dl-escolher-data .dl-escolher-data__fixo-icone {
        display: grid;
        place-items: center;
        flex: none;
        width: 32px;
        height: 32px;
        border-radius: var(--dl-radius-pill);
        background: var(--dl-branco);
        color: var(--dl-azul);
    }

    .dl-escolher-data .dl-escolher-data__fixo-icone .dl-escolher-data__icone {
        width: 18px;
        height: 18px;
    }

    .dl-escolher-data .dl-escolher-data__fixo-apoio {
        margin: 0;
        padding: 8px 16px 14px 58px;
        border: 1px solid var(--dl-d-resumo-borda);
        border-top: 0;
        border-radius: 0 0 10px 10px;
        background: var(--dl-d-resumo-fundo);
        color: var(--dl-cinza-70);
        font-size: 13px;
        line-height: 19px;
    }

    .dl-escolher-data:has(.dl-escolher-data__resumo:not([hidden])) .dl-escolher-data__fixo-apoio {
        display: none;
    }

    .dl-escolher-data:has(.dl-escolher-data__resumo:not([hidden])) .dl-escolher-data__fixo {
        padding-bottom: 14px;
        border-bottom: 1px solid var(--dl-d-resumo-borda);
        border-radius: 10px;
    }

    /* Resumo da escolha: linhas 13 a 10 de ritmo, valor 20. */
    .dl-escolher-data .dl-escolher-data__linhas {
        gap: 10px;
    }

    .dl-escolher-data .dl-escolher-data__linhas li {
        font-size: 13px;
    }

    .dl-escolher-data .dl-escolher-data__divisor {
        margin: 14px 0;
    }

    .dl-escolher-data .dl-escolher-data__valor span {
        font-size: 14px;
    }

    .dl-escolher-data .dl-escolher-data__valor strong {
        font-size: 20px;
        line-height: 24px;
    }

    .dl-escolher-data .dl-d-resumo.dl-fluxo__cartao .dl-escolher-data__aviso {
        margin-top: 14px;
    }

    /* ------------------------------------------------------------------ */
    /* escolher-profissionais — grade de cards compactos                    */
    /* ------------------------------------------------------------------ */

    /* O main leva .dl-profissionais (para herdar o Card/Profissional), e a busca
       logada de dl-desktop-publicas monta a grade dela em
       body.dl-com-sidebar .dl-container.dl-profissionais — a grade não é desta
       tela: aqui o main volta à coluna do mobile, com o P2 dentro. */
    body.dl-com-sidebar .dl-container.dl-fluxo-tela.dl-escolher-prof {
        display: flex;
        flex-direction: column;
    }

    /* "Para o seu imóvel é obrigatório contratar N" vira etiqueta sob o título,
       no fundo do resumo (é informação do fluxo, não um card). */
    .dl-fluxo-tela.dl-escolher-prof .dl-escolher-prof__barra {
        align-self: flex-start;
        margin: -8px 0 0;
        padding: 8px 14px;
        border: 1px solid var(--dl-d-resumo-borda);
        border-radius: var(--dl-radius-botao);
        background: var(--dl-d-resumo-fundo);
    }

    .dl-fluxo-tela.dl-escolher-prof .dl-escolher-prof__barra-texto {
        color: var(--dl-azul-marinho);
        font-size: 13px;
        line-height: 1.4;
        text-box: normal;
    }

    /* Colunas de no mínimo 235: 1 a 1024, 3 a 1440, 4 a 1920 (com 5 o nome
       longo truncava). */
    .dl-fluxo-tela.dl-escolher-prof .dl-escolher-prof__grupo .dl-profissionais__lista {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
        gap: 12px;
        margin: 0;
        padding: 0;
    }

    /* Card compacto: avatar 44 · 12 · nome 15 / estrelas / histórico 12;
       padding 14/16, raio 12, sombra de card ([REVISÃO-DESKTOP:2026-10-01] slide 6). O escolhido ganha 2
       de borda azul sem mexer na caixa (1 de borda + 1 de anel). */
    .dl-fluxo-tela.dl-escolher-prof .dl-escolher-prof__grupo .dl-card-profissional--escolha,
    .dl-fluxo-tela.dl-escolher-prof .dl-escolher-prof__grupo .dl-card-profissional--escolha:has(.dl-card-profissional__marcador:checked) {
        box-sizing: border-box;
        height: 100%;
        min-height: 0;
        gap: 12px;
        padding: 14px 16px;
        border-width: 1px;
        border-radius: var(--dl-radius-card);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-fluxo-tela.dl-escolher-prof .dl-escolher-prof__grupo .dl-card-profissional--escolha:has(.dl-card-profissional__marcador:checked) {
        border-color: var(--dl-azul);
        box-shadow: 0 0 0 1px var(--dl-azul), var(--dl-d-sombra-card);
    }

    .dl-fluxo-tela.dl-escolher-prof .dl-escolher-prof__grupo .dl-card-profissional--escolha:has(.dl-card-profissional__marcador:checked:focus-visible) {
        box-shadow: 0 0 0 1px var(--dl-azul), var(--dl-d-sombra-card), var(--dl-foco-anel);
    }

    .dl-fluxo-tela.dl-escolher-prof .dl-card-profissional--escolha .dl-avatar.dl-avatar--m {
        flex: none;
        width: 44px;
        height: 44px;
    }

    .dl-fluxo-tela.dl-escolher-prof .dl-card-profissional--escolha .dl-card-profissional__identidade {
        gap: 4px;
    }

    .dl-fluxo-tela.dl-escolher-prof .dl-escolher-prof__grupo .dl-card-profissional--escolha .dl-card-profissional__nome {
        font-size: 15px;
        line-height: 20px;
        text-box: normal;
    }

    .dl-fluxo-tela.dl-escolher-prof .dl-card-profissional--escolha .dl-card-profissional__historico {
        font-size: 12px;
        line-height: 16px;
    }

    /* ------------------------------------------------------------------ */
    /* revisar-agendamento — seções lado a lado; valor e política no card   */
    /* ------------------------------------------------------------------ */

    /* Colunas de no mínimo 300: 1 até ~1279, 2 a 1440 (Imóvel | Tipo, depois
       Profissional), 3 a 1920. */
    .dl-revisar .dl-ag-secoes {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        align-items: start;
    }

    .dl-revisar .dl-ag-secao {
        gap: 10px;
    }

    .dl-revisar .dl-ag-secao__titulo {
        color: var(--dl-azul-marinho);
        font-size: 14px;
        line-height: 20px;
        text-box: normal;
    }

    /* [REVISÃO-DESKTOP:2026-10-01] slide 6: sombra de card, sem borda; o cartão azul (pele do card-resumo)
       mantém a borda azul-clara do Figma. */
    .dl-revisar .dl-ag-secao .dl-ag-cartao {
        padding: 14px 16px;
        border: 0;
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-revisar .dl-ag-secao .dl-ag-cartao.dl-ag-cartao--azul {
        border: 1px solid var(--dl-d-resumo-borda);
    }

    .dl-revisar .dl-ag-linhas {
        gap: 10px;
    }

    .dl-revisar .dl-ag-linhas__linha {
        font-size: 13px;
    }

    .dl-revisar .dl-ag-linhas__linha + .dl-ag-linhas__linha {
        padding-top: 10px;
    }

    .dl-revisar .dl-ag-prof {
        gap: 14px;
    }

    .dl-revisar .dl-ag-secao > .dl-aviso {
        min-height: 0;
        padding: 12px 14px;
        border-radius: var(--dl-radius-card);
    }

    /* "Resumo do valor" no card-resumo: título 14, linhas 13, total 20. */
    .dl-revisar .dl-ag-resumo {
        gap: 14px;
    }

    .dl-revisar .dl-ag-resumo__topo {
        gap: 14px;
    }

    .dl-revisar .dl-ag-resumo__titulo {
        color: var(--dl-azul-marinho);
    }

    .dl-revisar .dl-ag-resumo__linhas {
        gap: 10px;
    }

    .dl-revisar .dl-ag-resumo__linha {
        font-size: 13px;
    }

    .dl-revisar .dl-ag-resumo__total strong {
        font-size: 20px;
        line-height: 24px;
    }

    /* ------------------------------------------------------------------ */
    /* pagamento — etapas do widget ao lado do resumo                       */
    /* ------------------------------------------------------------------ */

    /* Os campos de "Seus dados" e "Endereço" em duas colunas (só a grade do
       contêiner: o widget não declara colunas e dl-checkout.js não depende
       disso); Nome e Sobrenome, que o Woo marca como par (first/last), abrem a
       grade lado a lado. A etapa de pagamento (cartão/Pix do Asaas) não muda. */
    .dl-checkout.dl-fluxo-tela :is(.vime-checkout-step-1, .vime-checkout-step-2) .vime-checkout-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
    }

    .dl-checkout.dl-fluxo-tela :is(.vime-checkout-step-1, .vime-checkout-step-2) .vime-checkout-fields > :is(.form-row-first, .form-row-last) {
        order: -1;
    }

    /* ------------------------------------------------------------------ */
    /* agendamento-confirmado — faixa de sucesso ao lado do card            */
    /* ------------------------------------------------------------------ */

    /* A faixa acompanha a altura do card à direita (nada de vazio embaixo). */
    .dl-confirmado > .dl-fluxo.dl-d-p2 {
        align-items: stretch;
    }

    .dl-confirmado .dl-confirmado__faixa {
        width: auto;
        height: 100%;
        min-height: 360px;
        margin: 0;
        padding: 28px 24px 0;
        border-radius: var(--dl-radius-card);
    }

    .dl-confirmado .dl-confirmado__titulo {
        font-size: 24px;
        line-height: 28px;
        text-box: normal;
    }

    .dl-confirmado .dl-confirmado__apoio {
        font-size: 13px;
        line-height: 1.5;
        text-box: normal;
    }

    /* Card: pagamento em linhas 13, total 14, avisos compactos, ações 40. */
    .dl-confirmado .dl-confirmado__linhas {
        gap: 10px;
    }

    .dl-confirmado .dl-confirmado__linha {
        padding-bottom: 10px;
        font-size: 13px;
    }

    .dl-confirmado .dl-confirmado__total {
        font-size: 15px;
    }

    .dl-confirmado .dl-confirmado__caixa {
        gap: 12px;
    }

    .dl-confirmado .dl-confirmado__acoes {
        gap: 8px;
    }

    .dl-confirmado .dl-d-resumo.dl-fluxo__cartao .dl-confirmado__info .dl-ag-aviso__titulo {
        font-size: 12px;
    }

    /* ------------------------------------------------------------------ */
    /* Troca de imóvel (134834:2872) — título, busca e imóveis em grade     */
    /* ------------------------------------------------------------------ */

    /* [TELA-NOVA:2026-09-29] Título em cima; embaixo dele a busca (na
       largura toda) e "Adicionar endereço" ao lado dela; os imóveis em
       cards na largura inteira. A busca (dl-catalogo.js) continua filtrando
       os mesmos itens — o [hidden] que ela põe vence o display do card. */
    .dl-catalogo.dl-catalogo--imoveis {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 20px 12px;
        max-width: none;
        padding-top: 0;
        padding-bottom: 0;
    }

    .dl-catalogo--imoveis .dl-catalogo__cabeca--imoveis {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .dl-catalogo--imoveis .dl-catalogo__busca {
        grid-column: 1;
        height: 40px;
        margin: 0;
        border: 1px solid var(--dl-cinza-10);
    }

    .dl-catalogo--imoveis .dl-catalogo__busca-campo {
        font-size: 14px;
    }

    .dl-catalogo--imoveis .dl-catalogo__imoveis-adicionar {
        grid-column: 2;
        width: auto;
        height: 40px;
        min-height: 0;
        padding: 0 20px;
        border-radius: var(--dl-radius-botao);
        font-size: 14px;
    }

    .dl-catalogo--imoveis .dl-catalogo__imoveis {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 12px;
        margin: 0;
    }

    /* Card: endereço 15 · bairro/cidade 13 · imóvel 13, e o ✓ (ativo) e o
       lápis à direita. O link do endereço cobre o card inteiro (::after),
       então o card todo é clicável e o lápis fica por cima. O ativo tem a
       borda azul de 2 (1 + sombra), como o tipo escolhido. */
    .dl-catalogo--imoveis .dl-catalogo__imovel {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "end   marca edit"
            "local marca edit"
            "det   marca edit";
        align-items: center;
        column-gap: 12px;
        row-gap: 2px;
        min-height: 0;
        padding: 16px 18px;
        border: 1px solid transparent;
        border-radius: var(--dl-radius-card);
        background: var(--dl-branco);
        color: var(--dl-azul-marinho);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel[hidden] {
        display: none;
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel.is-ativo {
        border-color: var(--dl-azul);
        box-shadow: 0 0 0 1px var(--dl-azul), var(--dl-d-sombra-card);
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel-link {
        grid-area: end;
        color: inherit;
        font-size: 15px;
        font-weight: 600;
        line-height: 22px;
        text-decoration: none;
        text-box: normal;
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel-link::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel.is-ativo .dl-catalogo__imovel-link {
        color: var(--dl-azul);
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel-link:focus-visible {
        outline: none;
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel:has(.dl-catalogo__imovel-link:focus-visible) {
        outline: 2px solid var(--dl-azul);
        outline-offset: 2px;
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel-local,
    .dl-catalogo--imoveis .dl-catalogo__imovel-detalhe {
        overflow: hidden;
        color: var(--dl-cinza-50);
        font-size: 13px;
        line-height: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel-local {
        grid-area: local;
        color: var(--dl-cinza-70);
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel-detalhe {
        grid-area: det;
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel-marca {
        grid-area: marca;
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: var(--dl-radius-pill);
        background: var(--dl-azul);
        color: var(--dl-branco);
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel-marca-icone {
        width: 14px;
        height: 14px;
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel-editar {
        position: relative;
        z-index: 1;
        grid-area: edit;
        color: var(--dl-cinza-50);
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel-editar svg {
        width: 18px;
        height: 18px;
    }
}

/* 1024–1279: resumo 300, respiro lateral 32 e título 28/32 (o mesmo do
   tipo-de-limpeza, para o principal não ficar estreito demais). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .dl-fluxo-tela > .dl-fluxo.dl-d-p2 {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    body.dl-com-sidebar > main.dl-container:has(> :is(.dl-fluxo-tela, .dl-catalogo--imoveis)) {
        padding-inline: var(--dl-espaco-8);
    }

    .dl-fluxo-tela .dl-d-titulo-tela,
    .dl-catalogo--imoveis .dl-catalogo__titulo.dl-d-titulo-tela {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.6px;
    }

    /* Na coluna estreita os campos do pagamento seguem um por linha. */
    .dl-checkout.dl-fluxo-tela :is(.vime-checkout-step-1, .vime-checkout-step-2) .vime-checkout-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* [REVISÃO-DESKTOP:2026-10-01] slide 12 — "mudar para": no /agendar/ (≥ 1280)
   três colunas lado a lado — "O que está incluso" │ "O que não está incluso" │
   card de pagamento. O cabeçalho (voltar · título · apoio) fica sobre as duas
   primeiras; o roteiro (.dl-fluxo__escopo) deixa de ser caixa e os dois cards
   viram itens da grade do P2, na linha do card de pagamento. Sem exclusão no
   pacote, o "incluso" ocupa as duas colunas. Até 1279 o principal é estreito
   demais para dois cards: eles seguem empilhados. */
@media (min-width: 1280px) {
    .dl-agendar > .dl-fluxo.dl-d-p2:has(> .dl-fluxo__principal > header) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--dl-agendar-col-resumo, 340px);
    }

    .dl-agendar > .dl-fluxo.dl-d-p2:has(> .dl-fluxo__principal > header) > .dl-fluxo__principal > header:not(.dl-modal) {
        grid-column: 1 / 3;
    }

    .dl-agendar > .dl-fluxo.dl-d-p2:has(> .dl-fluxo__principal > header) > .dl-fluxo__principal > .dl-fluxo__escopo {
        display: contents;
    }

    .dl-agendar .dl-fluxo__escopo-bloco {
        grid-row: 2;
        grid-column: 1;
        align-self: start;
        min-width: 0;
        margin-top: 24px;
    }

    .dl-agendar .dl-fluxo__escopo-bloco--fora {
        grid-column: 2;
    }

    .dl-agendar .dl-fluxo__escopo:not(:has(.dl-fluxo__escopo-bloco--fora)) .dl-fluxo__escopo-bloco {
        grid-column: 1 / 3;
    }

    .dl-agendar > .dl-fluxo.dl-d-p2:has(> .dl-fluxo__principal > header) > .dl-d-p2__resumo {
        grid-column: 3;
    }
}

/* ≥ 1600: o card de pagamento abre para 360, como o resumo das outras telas. */
@media (min-width: 1600px) {
    .dl-agendar {
        --dl-agendar-col-resumo: 360px;
    }
}

/* ≥ 1280: a faixa de sucesso vira horizontal — selo, título e apoio à
   esquerda, a foto à direita, recortada da cintura para cima. */
@media (min-width: 1280px) {
    .dl-confirmado .dl-confirmado__faixa {
        display: flex;
        align-items: center;
        padding: 32px 40px;
    }

    .dl-confirmado .dl-confirmado__cabeca {
        align-items: flex-start;
        max-width: min(420px, 48%);
        text-align: left;
    }

    .dl-confirmado .dl-confirmado__foto {
        left: auto;
        right: 0;
        top: 12%;
        width: clamp(380px, 52%, 560px);
    }
}

/* ≥ 1440: no escolher-data o período vai para a direita do calendário, com
   divisor vertical; o calendário fica com a sobra (os dias não passam de 64,
   centrados na coluna) e o período com 300 (340 a partir de 1600). */
@media (min-width: 1440px) {
    .dl-escolher-data .dl-escolher-data__cartao {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .dl-escolher-data .dl-agenda__campo {
        display: flex;
        flex-direction: column;
        padding: 20px;
        border-left: 1px solid var(--dl-cinza-10);
    }

    .dl-escolher-data .dl-escolher-data__legenda-cal {
        flex-direction: column;
        margin-top: auto;
        padding-top: 16px;
    }

    .dl-escolher-data .dl-calendario__grade .dl-calendario__dia {
        height: 72px;
    }

    .dl-escolher-data .dl-agenda__campo::before {
        content: none;
    }
}

/* ≥ 1600: sobra largura — o resumo abre para 360. */
@media (min-width: 1600px) {
    .dl-fluxo-tela > .dl-fluxo.dl-d-p2 {
        grid-template-columns: minmax(0, 1fr) 360px;
    }

    .dl-escolher-data .dl-escolher-data__cartao {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    /* Pagamento: com a coluna larga, três campos por linha (Nome · Sobrenome ·
       Tipo de Pessoa, depois CPF · E-mail · Telefone). */
    .dl-checkout.dl-fluxo-tela :is(.vime-checkout-step-1, .vime-checkout-step-2) .vime-checkout-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* agendamento-confirmado como modal — [REVISÃO-DESKTOP:2026-10-01] slide 4 (docs/18 §11).
   [REVISÃO-DESKTOP:2026-10-01] slide 4 — modal empilhado (pedido do usuário 02/10):
   numa coluna só, na ordem do mobile — a faixa de sucesso em cima, o card de pagamento
   com as ações na largura da coluna e o suporte embaixo. A faixa fica a vertical (selo,
   título e apoio centrados, a foto embaixo), igual nas duas formas: a horizontal de
   ≥ 1280 não vale aqui. As colunas P2 empilham no shell (dl-desktop-shell.css). */
@media (min-width: 1024px) {
    body.dl-pagina-modal .dl-confirmado > .dl-fluxo.dl-d-p2 {
        gap: 24px;
    }

    body.dl-pagina-modal .dl-confirmado .dl-confirmado__faixa {
        display: block;
        height: 400px;
        min-height: 0;
        padding: 28px 40px 0;
    }

    body.dl-pagina-modal .dl-confirmado .dl-confirmado__cabeca {
        align-items: center;
        max-width: none;
        text-align: center;
    }

    body.dl-pagina-modal .dl-confirmado .dl-confirmado__foto {
        left: 50%;
        right: auto;
        top: 46%;
        width: 92%;
        transform: translateX(-50%);
    }
}

/* Hover (ponteiro fino): o período ganha a borda do resumo; o imóvel (card
   clicável, [REVISÃO-DESKTOP:2026-10-01] slide 6) sobe para a sombra de destaque. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .dl-escolher-data .dl-escolher-data__periodo:not(:has(.dl-escolher-data__radio:checked, .dl-escolher-data__radio:disabled)):hover {
        border-color: var(--dl-d-resumo-borda);
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel:not(.is-ativo):hover {
        box-shadow: var(--dl-d-sombra-destaque);
    }

    .dl-catalogo--imoveis .dl-catalogo__imovel-editar:hover {
        color: var(--dl-azul);
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .dl-escolher-data .dl-escolher-data__periodo,
    .dl-catalogo--imoveis .dl-catalogo__imovel {
        transition:
            border-color var(--dl-dur-base) var(--dl-ease-saida),
            background-color var(--dl-dur-base) var(--dl-ease-saida),
            box-shadow var(--dl-dur-base) var(--dl-ease-saida);
    }
}

}