/* =====================================================================
   Anúncios Aukage. Base visual

   Herda a identidade do site institucional aukage.com.br:
   fundo #0B0A09, texto #F4F1EA, dourado #E3A63B,
   Archivo nos títulos e na interface, Newsreader itálico nos destaques
   editoriais e monoespaçada nos rótulos.
   ===================================================================== */

/* ---------------------------------------------------------------- */
/* Tokens                                                            */
/* ---------------------------------------------------------------- */
:root {
    /* Superfícies */
    --preto:          #0B0A09;
    --superficie:     #151310;
    --superficie-2:   #1C1915;
    --superficie-3:   #241F1A;

    /* Texto */
    --creme:          #F4F1EA;
    --creme-2:        #D3CCBF;
    --creme-3:        #C9C0B0;
    --neutro:         #A79E8F;
    --neutro-2:       #8A8275;

    /* Marca */
    --dourado:        #E3A63B;
    --dourado-claro:  #F2C877;
    --dourado-escuro: #B4802A;

    /* Estados */
    --sucesso:        #6FBF73;
    --erro:           #E2685F;
    --aviso:          #E3A63B;
    --info:           #6FA8DC;

    /* Linhas */
    --linha:          rgba(var(--tinta), 0.13);
    --linha-forte:    rgba(var(--tinta), 0.24);
    --linha-suave:    rgba(var(--tinta), 0.07);

    /* Tipografia */
    --fonte:          Archivo, "Segoe UI", system-ui, -apple-system, sans-serif;
    --fonte-serif:    Newsreader, Georgia, "Times New Roman", serif;
    --fonte-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Métricas */
    --largura:        1240px;
    --largura-texto:  680px;
    --raio:           8px;
    --raio-g:         14px;
    --raio-pill:      999px;

    --altura-topo:    74px;

    /* Sombras */
    --sombra:         0 2px 20px rgba(0, 0, 0, 0.35);
    --sombra-g:       0 12px 48px rgba(0, 0, 0, 0.55);

    --transicao:      160ms ease;

    /* Tema: o que muda entre o escuro e o claro.
       --tinta é a cor do texto em RGB, usada nas camadas translúcidas
       (linhas, realces); --fundo-rgb é a cor da página em RGB, para o
       topo e as barras com fundo translúcido. Os "-fundo" são as cores
       cheias (botão dourado, número de passo) e --sobre-cor é o texto
       em cima delas, no tema claro o dourado do texto escurece para
       ser lido no branco, mas o botão continua no dourado da marca. */
    --tinta:                240, 232, 215;
    --fundo-rgb:            11, 10, 9;
    --dourado-fundo:        #E3A63B;
    --dourado-fundo-claro:  #F2C877;
    --dourado-fundo-escuro: #B4802A;
    --sucesso-fundo:        #6FBF73;
    --sobre-cor:            #0B0A09;
    --azul-admin:           #8FB3E8;
    --azul-admin-forte:     #B4CDF3;
    --sombra-painel:        0 18px 40px rgba(0, 0, 0, 0.45);

    color-scheme: dark;
}

/* ---------------------------------------------------------------- */
/* Tema claro                                                        */
/*                                                                   */
/* Quem decide é o tema.js, no <head>: segue o aparelho (automático) */
/* ou a escolha feita no botão do topo, e marca <html data-tema>.    */
/* Só os tokens mudam. O resto do arquivo não sabe que existe tema. */
/* ---------------------------------------------------------------- */
:root[data-tema="claro"] {
    --preto:          #F6F3EC;
    --superficie:     #FFFFFF;
    --superficie-2:   #F0EBE2;
    --superficie-3:   #E6DFD3;

    --creme:          #1C1812;
    --creme-2:        #3B342A;
    --creme-3:        #4A4236;
    --neutro:         #655D50;
    --neutro-2:       #736A5C;

    --dourado:        #96600E;
    --dourado-claro:  #7A4D0A;
    --dourado-escuro: #7A4D0A;

    --sucesso:        #2E7D32;
    --erro:           #B83227;
    --aviso:          #96600E;
    --info:           #2B659E;

    --sombra:         0 2px 14px rgba(60, 45, 20, 0.08);
    --sombra-g:       0 12px 40px rgba(60, 45, 20, 0.16);

    --tinta:                28, 24, 18;
    --fundo-rgb:            246, 243, 236;
    --dourado-fundo:        #E3A63B;
    --dourado-fundo-claro:  #EDB95A;
    --dourado-fundo-escuro: #C98E2C;
    --sucesso-fundo:        #7CC47F;
    --sobre-cor:            #1C1812;
    --azul-admin:           #2F5F9E;
    --azul-admin-forte:     #244C82;
    --sombra-painel:        0 14px 36px rgba(60, 45, 20, 0.16);

    color-scheme: light;
}

/* O que fica POR CIMA DE FOTO continua escuro nos dois temas: a
   pílula sobre a foto, o coração, a legenda da capa e a visualização
   de foto em tela cheia. Aqui os tokens voltam aos valores do escuro
   só dentro desses elementos.

   A etiqueta do mapa entra aqui pelo mesmo motivo, ainda que o fundo
   dela não seja foto: ela é uma pílula de fundo escuro fixo, e no tema
   claro o texto herdava --creme (#1C1812) sobre #151310. Preto no
   preto. O preço, que é a informação principal do mapa, sumia. */
:root[data-tema="claro"] :is(.etiqueta-flutuante, .coracao, .revisao-capa figcaption, .lente, .figura-cheia, .alfinete-imovel, .balao) {
    --preto:         #0B0A09;
    --superficie:    #151310;
    --creme:         #F4F1EA;
    --creme-2:       #D3CCBF;
    --neutro:        #A79E8F;
    --dourado:       #E3A63B;
    --dourado-claro: #F2C877;
    --tinta:         240, 232, 215;
    --linha:         rgba(240, 232, 215, 0.13);
    --linha-forte:   rgba(240, 232, 215, 0.24);
}

/* ---------------------------------------------------------------- */
/* Reset                                                             */
/* ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* O atributo hidden tem que esconder sempre. Sem isto, qualquer regra
   de display (flex, grid) da própria classe vence e o elemento aparece
   mesmo "escondido". Foi o que deixou os campos de preço à vista
   debaixo da barra. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--preto);
    color: var(--creme);
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--dourado); }

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-wrap: balance;
}

h1 { font-size: clamp(34px, 5vw, 62px); }
h2 { font-size: clamp(26px, 3.4vw, 40px); }
h3 { font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.02em; }
h4 { font-size: 17px; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--linha); margin: 32px 0; }

::selection { background: var(--dourado-fundo); color: var(--sobre-cor); }

:focus-visible {
    outline: 2px solid var(--dourado);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------- */
/* Utilitários de texto                                              */
/* ---------------------------------------------------------------- */
.serif {
    font-family: var(--fonte-serif);
    font-weight: 300;
    font-style: italic;
    letter-spacing: -0.01em;
}

.rotulo {
    font-family: var(--fonte-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutro-2);
}

.rotulo-dourado { color: var(--dourado); }

.dourado { color: var(--dourado); }
.suave   { color: var(--creme-2); }
.fraco   { color: var(--neutro); }

.texto-centro { text-align: center; }

/* ---------------------------------------------------------------- */
/* Estrutura                                                         */
/* ---------------------------------------------------------------- */
.envolucro {
    width: 100%;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 28px;
}

.secao        { padding: 72px 0; }
.secao-fina   { padding: 44px 0; }
.secao-borda  { border-bottom: 1px solid var(--linha); }
.secao-fundo  { background: var(--superficie); }

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 12px 20px;
    background: var(--dourado-fundo);
    color: var(--sobre-cor);
    font-weight: 700;
    border-radius: 0 0 var(--raio) 0;
}
.pular-para-conteudo:focus { left: 0; }

/* ---------------------------------------------------------------- */
/* Cabeçalho                                                         */
/* ---------------------------------------------------------------- */
.topo {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(var(--fundo-rgb), 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linha);
}

.topo-interno {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 28px;
    height: var(--altura-topo);
    display: flex;
    align-items: center;
    gap: 28px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    color: var(--creme);
}
.marca:hover { color: var(--creme); }

/* No topo a marca é a horizontal, sozinha. A empilhada foi tentada aqui
   e não serve: com 46px de altura ela tem só 28px de largura, some no
   canto e deixa um vão de 350px até o menu. A horizontal ocupa ~145px e
   equilibra a barra.

   A altura manda, a largura acompanha, a marca é desenho, não texto.
   Duas imagens, uma por tema; a de fora do tema fica em display:none e
   nem chega a ser baixada pelo navegador. */
.marca img { height: 30px; width: auto; object-fit: contain; }

.marca-escuro { display: block; }
.marca-claro { display: none; }

:root[data-tema="claro"] .marca-escuro { display: none; }
:root[data-tema="claro"] .marca-claro { display: block; }

.marca-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.marca-nome {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* O :not(.botao) não é enfeite. Sem ele, "a" com duas classes vence o
   .botao-principal na especificidade e pinta o texto do botão dourado
   de claro: letra clara sobre fundo dourado, ilegível. */
.menu a:not(.botao) {
    padding: 9px 14px;
    border-radius: var(--raio-pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--neutro);
    transition: color var(--transicao), background var(--transicao);
}

.menu a:not(.botao):hover { color: var(--creme); background: rgba(var(--tinta), 0.06); }

.menu a.ativo:not(.botao) {
    color: var(--creme);
    background: rgba(var(--tinta), 0.10);
}

/* A chamada principal do topo, afastada dos links de navegação. */
.menu .botao { margin-left: 10px; }

.menu-abrir { display: none; }

/* ---------------------------------------------------------------- */
/* Botões                                                            */
/* ---------------------------------------------------------------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border: 1px solid transparent;
    border-radius: var(--raio);
    font-family: var(--fonte);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
    text-align: center;
}

.botao-principal {
    background: var(--dourado-fundo);
    color: var(--sobre-cor);
}
.botao-principal:hover { background: var(--dourado-fundo-claro); color: var(--sobre-cor); }

.botao-contorno {
    background: transparent;
    border-color: var(--linha-forte);
    color: var(--creme);
}
.botao-contorno:hover {
    border-color: rgba(var(--tinta), 0.55);
    background: rgba(var(--tinta), 0.05);
    color: var(--creme);
}

/* Contorno DOURADO, fundo vazado. O mesmo desenho do botão de avisos
   no aplicativo.

   Usa var(--dourado) na borda E no texto de propósito: no tema claro
   essa variável já vale #96600E, a versão escurecida, enquanto no
   escuro vale #E3A63B. Escrever a cor da marca à mão aqui daria um
   texto com contraste 2:1 sobre branco: longe dos 4,5:1 que a norma
   pede, e o erro mais fácil de cometer ao levar marca de fundo escuro
   para fundo claro.

   Vale para a ação que precisa puxar o olho sem virar o botão
   principal da tela: salvar a busca é um convite, não o caminho
   esperado de quem está olhando imóveis. */
.botao-dourado {
    background: transparent;
    border-color: var(--dourado);
    color: var(--dourado);
}
/* O fundo do hover sai de --tinta, que É um trio RGB; --dourado-fundo
   é hexadecimal e dentro de rgba() não produziria cor nenhuma, a
   regra inteira seria descartada em silêncio. */
.botao-dourado:hover {
    background: rgba(var(--tinta), 0.06);
    border-color: var(--dourado-claro);
    color: var(--dourado-claro);
}

.botao-fantasma {
    background: transparent;
    color: var(--neutro);
    padding: 10px 14px;
}
.botao-fantasma:hover { color: var(--creme); }

/* Ação destrutiva: discreta em repouso, vermelha só quando o ponteiro
   está em cima. Não deve competir com a ação principal do cartão. */
.botao-perigo:hover { color: var(--erro); }

.botao-pequeno { padding: 9px 16px; font-size: 13.5px; }
.botao-largo   { width: 100%; }

.botao:disabled,
.botao[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------- */
/* Selos                                                             */
/* ---------------------------------------------------------------- */
/* ------------------------------------------------------------------
   O SELO DE SITUAÇÃO, e por que ele ficou mais forte (17/10/2026)

   "Está muito apagado, tem que retornar com mais destaque, para ficar
   claro para o usuário em qual status está", disse o Geraldo, com o
   print de "Meus imóveis" no tema claro. Ele estava certo, e eram três
   causas somadas:

   1. O FUNDO NÃO ACOMPANHAVA O TEMA. Ele era rgba FIXO, tirado das
      cores do tema escuro (o verde #6FBF73), enquanto o texto usava a
      variável, que no tema claro vira verde ESCURO (#2E7D32). Resultado:
      verde claro atrás, verde escuro na frente, e a pílula sumia no
      branco da página. O color-mix resolve na raiz, porque a mancha
      passa a nascer da MESMA cor do texto, em qualquer tema.
   2. Duas das quatro variantes não tinham BORDA nenhuma, então a pílula
      não tinha contorno: era texto colorido solto.
   3. 10,5px com peso 600 e letras espaçadas é o tamanho de uma legenda,
      não o de uma informação que a pessoa vem buscar. É a primeira coisa
      que se lê num cartão de anúncio.
   ------------------------------------------------------------------ */
.selo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: var(--raio-pill);
    /* Transparente, e não ausente: sem isto as variantes com borda
       ficariam 2px mais altas que as sem, e a fileira desalinharia. */
    border: 1px solid transparent;
    font-family: var(--fonte-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.selo-dourado {
    border-color: color-mix(in srgb, var(--dourado) 55%, transparent);
    background: color-mix(in srgb, var(--dourado) 15%, transparent);
    color: var(--dourado);
}

.selo-neutro {
    border-color: rgba(var(--tinta), 0.28);
    background: rgba(var(--tinta), 0.07);
    color: var(--neutro);
}

.selo-sucesso {
    border-color: color-mix(in srgb, var(--sucesso) 55%, transparent);
    background: color-mix(in srgb, var(--sucesso) 15%, transparent);
    color: var(--sucesso);
}

.selo-erro {
    border-color: color-mix(in srgb, var(--erro) 55%, transparent);
    background: color-mix(in srgb, var(--erro) 15%, transparent);
    color: var(--erro);
}

/*
 * DOIS NOMES QUE AS TELAS JÁ USAVAM E NÃO EXISTIAM AQUI.
 *
 * `selo-ok` aparece na cópia das imagens e na lista de veículos, e
 * `selo-aviso` na tela de cópias do banco. Sem a regra, o selo saía
 * com a borda neutra do `.selo`: não quebrava nada, e por isso ninguém
 * via. Um selo verde que sai cinza é pior que não ter selo, porque a
 * tela continua parecendo certa.
 *
 * Ficam como apelidos, e não como cópia das regras: no dia em que o
 * verde mudar, muda num lugar só.
 */
.selo-ok {
    border-color: color-mix(in srgb, var(--sucesso) 55%, transparent);
    background: color-mix(in srgb, var(--sucesso) 15%, transparent);
    color: var(--sucesso);
}

.selo-aviso {
    border-color: color-mix(in srgb, var(--aviso) 55%, transparent);
    background: color-mix(in srgb, var(--aviso) 15%, transparent);
    color: var(--aviso);
}

.ponto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.ponto-pulsando { animation: auk-pulso 2.4s ease-in-out infinite; }

@keyframes auk-pulso {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.8); }
}

/* ---------------------------------------------------------------- */
/* Cartões                                                           */
/* ---------------------------------------------------------------- */
.cartao {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    overflow: hidden;
    transition: border-color var(--transicao), transform var(--transicao);
}

.cartao:hover { border-color: var(--linha-forte); }

.cartao-corpo { padding: 24px; }

.painel {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    padding: 28px;
}

/* ---------------------------------------------------------------- */
/* Grades                                                            */
/* ---------------------------------------------------------------- */
.grade {
    display: grid;
    gap: 22px;
}

.grade-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); }

/* ---------------------------------------------------------------- */
/* Formulários                                                       */
/* ---------------------------------------------------------------- */
.campo { margin-bottom: 20px; }

.campo label,
.campo-rotulo {
    display: block;
    margin-bottom: 8px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--creme-2);
}

.campo-obrigatorio::after {
    content: " *";
    color: var(--dourado);
}

/* Antes isto era uma lista de type="…", e quem esquecesse o atributo
   ficava com o campo cru do navegador: pequeno, claro, fora do resto.
   Estavam assim 55 campos do sistema, entre eles o "Seu nome" e o
   "WhatsApp ou telefone" do formulário de contato do anúncio, e os
   quatro type="time", que nunca entraram na lista.

   Agora a regra é ao contrário: vale para todo input, MENOS os que
   precisam do desenho próprio do navegador (marcar, escolher arquivo)
   ou que são botão. Assim não há o que esquecer. */
.entrada,
input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"],
           [type="button"], [type="reset"], [type="image"], [type="hidden"],
           [type="range"], [type="color"]),
select,
textarea {
    width: 100%;
    padding: 13px 15px;
    background: var(--superficie-2);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    color: var(--creme);
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.4;
    transition: border-color var(--transicao), background var(--transicao);
}

textarea { min-height: 140px; resize: vertical; }

/* Campo que só mostra, sem deixar digitar (Meus dados: o e-mail da
   conta). Fica com a mesma caixa dos campos vizinhos para o selo de
   confirmado poder morar do lado, igual ao do WhatsApp. Era isso que
   estava desencontrado: o e-mail confirmava lá embaixo, numa tabela, e
   o telefone aqui em cima. Mas apaga o fundo e a cor do texto, senão
   parece um campo quebrado, que aceita clique e não aceita letra. */
.entrada-leitura {
    background: transparent;
    color: var(--creme-2);
    cursor: default;
    user-select: text;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23A79E8F' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 40px;
    cursor: pointer;
}

.entrada:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--dourado);
    background: var(--superficie-3);
}

input::placeholder, textarea::placeholder { color: var(--neutro-2); }

.campo-erro input,
.campo-erro select,
.campo-erro textarea { border-color: var(--erro); }

.mensagem-erro {
    margin-top: 7px;
    font-size: 13px;
    color: var(--erro);
}

/* O balão do PRIMEIRO campo irregular.

   Ele substitui o balão cinza do navegador, que tinha a cara do Chrome
   e não a do portal. A mensagem embaixo do campo continua existindo e é
   a que fica; este aqui serve para a pessoa achar ONDE está o problema
   num formulário longo, e some em dez segundos ou ao primeiro toque.

   Fica absoluto sobre o campo, com a seta apontando para cima, no lugar
   onde o balão do navegador aparecia. */
.campo-balao {
    position: absolute;
    z-index: 5;
    top: calc(100% - 2px);
    left: 12px;
    max-width: min(320px, calc(100% - 24px));
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 13px;
    border-radius: var(--raio);
    background: var(--superficie-3);
    border: 1px solid var(--linha-forte);
    box-shadow: var(--sombra-g);
    font-size: 13px;
    line-height: 1.45;
    color: var(--creme);
    animation: balao-entra .16s ease-out;
}

.campo-balao::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 16px;
    width: 10px;
    height: 10px;
    background: var(--superficie-3);
    border-left: 1px solid var(--linha-forte);
    border-top: 1px solid var(--linha-forte);
    transform: rotate(45deg);
}

.campo-balao-sinal {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    border-radius: 4px;
    background: var(--erro);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
}

@keyframes balao-entra {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .campo-balao { animation: none; }
}

/* Fica abaixo do campo. Sem display:block a margem não valia nada:
   margem vertical não se aplica a elemento em linha, e a dica é um
   <span>. Ela colava na caixa de texto. */
.campo-dica {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--neutro-2);
}

.caixa-marcar {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
    font-size: 14.5px;
    color: var(--creme-2);
    line-height: 1.45;
}

.caixa-marcar input[type="checkbox"],
.caixa-marcar input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--dourado);
    cursor: pointer;
}

/* Busca em destaque, no padrão do site institucional */
.busca-caixa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 6px 20px;
    background: rgba(var(--tinta), 0.06);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pill);
}

.busca-caixa input {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 10px 0;
    font-size: 16px;
    color: var(--creme);
}
.busca-caixa input:focus { background: transparent; }

/* A caixa é arredondada nas pontas: o botão de dentro acompanha a mesma
   curva, senão ficam dois formatos lado a lado. */
.busca-caixa .botao { border-radius: var(--raio-pill); flex-shrink: 0; }

/* ---------------------------------------------------------------- */
/* Avisos                                                            */
/* ---------------------------------------------------------------- */
.aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 18px;
    margin-bottom: 18px;
    border: 1px solid var(--linha);
    border-left-width: 3px;
    border-radius: var(--raio);
    background: var(--superficie-2);
    font-size: 14.5px;
    line-height: 1.5;
}

.aviso-sucesso { border-left-color: var(--sucesso); color: var(--creme); }
.aviso-erro    { border-left-color: var(--erro);    color: var(--creme); }
.aviso-aviso   { border-left-color: var(--aviso);   color: var(--creme); }
.aviso-info    { border-left-color: var(--info);    color: var(--creme); }

/* ---------------------------------------------------------------- */
/* Tabelas                                                           */
/* ---------------------------------------------------------------- */
.tabela-rolagem { overflow-x: auto; }

table.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

table.tabela th {
    padding: 12px 14px;
    text-align: left;
    font-family: var(--fonte-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--neutro-2);
    border-bottom: 1px solid var(--linha);
    white-space: nowrap;
}

table.tabela td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--linha-suave);
    color: var(--creme-2);
    vertical-align: middle;
}

table.tabela tr:hover td { background: rgba(var(--tinta), 0.03); }

/* ---------------------------------------------------------------- */
/* Rodapé                                                            */
/* ---------------------------------------------------------------- */
.rodape {
    border-top: 1px solid var(--linha);
    background: var(--preto);
    padding: 56px 0 30px;
}

.rodape-grade {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.rodape h4 {
    margin-bottom: 16px;
    font-family: var(--fonte-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dourado);
}

.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 10px; }
.rodape li a { font-size: 14.5px; color: var(--neutro); }
.rodape li a:hover { color: var(--creme); }

.rodape-fim {
    padding-top: 22px;
    border-top: 1px solid var(--linha-suave);
    font-family: var(--fonte-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--neutro-2);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
}

/* ---------------------------------------------------------------- */
/* As lojas do aplicativo e as redes, no rodapé                      */
/* ---------------------------------------------------------------- */
/* Os nomes das classes são os MESMOS do site.css e do gestao.css de
   propósito: o HTML vem do partial rodape-social, que é um só, e cada
   sistema só decide a cor. Trocar um nome aqui quebra os outros dois.

   Padrão fechado pelo Geraldo em 08/10/2026 e válido para toda página
   nova: rodapé virado para fora mostra onde se baixa o aplicativo e
   onde se segue a Aukage. */

.icone-marca { display: block; flex: none; }

.rodape-lojas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.selo-loja {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 9px 16px 9px 13px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    color: var(--creme);
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

.selo-loja:hover {
    border-color: var(--dourado);
    transform: translateY(-1px);
}

.selo-loja .icone-marca { width: 24px; height: 24px; }
.selo-loja span { display: block; line-height: 1.2; }
.selo-loja small { display: block; font-size: 10.5px; color: var(--neutro-2); }
.selo-loja strong { display: block; font-size: 14.5px; }

/* CLASSE DOBRADA, e o motivo é o mesmo em todos os três arquivos:
   .rodape li vale 0,1,1 e empurra 10px embaixo de cada item, porque os
   itens dali são linhas de uma lista de links. Aqui são bolinhas lado
   a lado, e os 10px viravam um degrau entre a fileira e o resto. */
.rodape-redes.rodape-redes {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.rodape-redes.rodape-redes li { margin: 0; }

.rodape-redes a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--linha);
    border-radius: 50%;
    color: var(--neutro);
    transition: color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.rodape-redes a:hover {
    color: var(--dourado);
    border-color: var(--dourado);
    transform: translateY(-1px);
}

.rodape-redes .icone-marca { width: 18px; height: 18px; }

/* A variante de uma faixa só, para rodapé que não tem colunas: as
   lojas e as bolinhas ficam na mesma linha, centradas. */
.rodape-social-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
}

.rodape-social-linha .rodape-lojas,
.rodape-social-linha .rodape-redes.rodape-redes { margin-top: 0; }

/* ---------------------------------------------------------------- */
/* Página de construção e de erro                                    */
/* ---------------------------------------------------------------- */
.centro-tela {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.caixa-central {
    width: 100%;
    max-width: 440px;
    text-align: center;
}

.caixa-central .painel { text-align: left; }

/* ---------------------------------------------------------------- */
/* Responsivo                                                        */
/* ---------------------------------------------------------------- */
@media (max-width: 900px) {
    .rodape-grade { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 760px) {
    .envolucro, .topo-interno { padding: 0 18px; }

    .secao      { padding: 48px 0; }
    .secao-fina { padding: 32px 0; }


    .menu {
        position: fixed;
        inset: var(--altura-topo) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 18px 20px;
        background: var(--preto);
        border-bottom: 1px solid var(--linha);
        display: none;
    }

    .menu.aberto { display: flex; }

    .menu a:not(.botao) {
        padding: 14px 12px;
        border-radius: var(--raio);
        font-size: 16px;
    }

    /* Empilhado, o botão ocupa a linha inteira e a margem lateral sai. */
    .menu .botao {
        margin: 10px 0 0;
        justify-content: center;
    }

    .menu-abrir {
        display: inline-flex;
        margin-left: auto;
        padding: 10px;
        background: transparent;
        border: 1px solid var(--linha-forte);
        border-radius: var(--raio);
        color: var(--creme);
        cursor: pointer;
    }

    .rodape-grade { grid-template-columns: 1fr; gap: 28px; }
    .rodape-fim { flex-direction: column; gap: 8px; }
}

/* ---------------------------------------------------------------- */
/* Impressão                                                         */
/* ---------------------------------------------------------------- */
@media print {
    .topo, .rodape, .menu, .botao { display: none !important; }
    body { background: #fff; color: #000; }
}

/* ================================================================== */
/* Camada 2: contas, painel e páginas longas                        */
/* ================================================================== */

/* ---------------------------------------------------------------- */
/* Telas de entrar / cadastrar                                       */
/* ---------------------------------------------------------------- */
.caixa-larga { max-width: 620px; }

/* O contêiner centraliza o texto do cabeçalho, mas formulário
   alinhado ao centro fica ilegível. */
.caixa-central form,
.caixa-central fieldset { text-align: left; }

.grupo-escolha {
    border: 0;
    padding: 0;
    margin: 0 0 22px;
}

.grupo-escolha legend { padding: 0; }

.escolha {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    margin-bottom: 9px;
    background: var(--superficie-2);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    font-size: 14.5px;
    color: var(--creme-2);
    cursor: pointer;
    transition: border-color var(--transicao), background var(--transicao);
}

.escolha:hover { border-color: var(--linha-forte); }

.escolha input { width: auto; margin: 0; accent-color: var(--dourado); }

.escolha:has(input:checked) {
    border-color: var(--dourado);
    background: rgba(227, 166, 59, 0.07);
    color: var(--creme);
}

/* ---------------------------------------------------------------- */
/* Painel do anunciante                                              */
/* ---------------------------------------------------------------- */
.painel-estrutura {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 34px;
    align-items: start;
    padding: 20px 0 10px;
}

/* O menu acompanha a rolagem (sticky). Quando ele é mais alto que a
   tela, o app.js ajusta o "top" conforme a página rola: o menu desce
   junto até mostrar o fim dele e só então para, sem barra de rolagem
   própria e sem precisar ir até o fim da página. */
.painel-lateral {
    position: sticky;
    top: 96px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio-grande);
    padding: 22px;
}

.painel-usuario {
    padding-bottom: 18px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--linha);
}

.painel-usuario strong {
    display: block;
    margin-top: 7px;
    font-size: 15px;
    color: var(--creme);
}

.painel-usuario span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    word-break: break-word;
}

.painel-menu { display: flex; flex-direction: column; gap: 2px; }

/* Título de grupo do menu do painel (30/09/2026). Mesmo desenho do
   menu da Central e da gestão. Lá a classe mora em gestao.css, e o
   painel do portal não carrega aquele arquivo. */
.painel-menu .g-menu-grupo {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dourado);
    margin: 16px 10px 6px;
}
.painel-menu .g-menu-grupo:first-child { margin-top: 0; }

.painel-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--raio);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--neutro);
    transition: background var(--transicao), color var(--transicao);
}

.painel-menu a:hover {
    background: var(--superficie-2);
    color: var(--creme);
}

.painel-menu a.ativo {
    background: rgba(227, 166, 59, 0.11);
    color: var(--dourado);
}

/* Dois ambientes no menu: "Meus anúncios" em dourado e "Administração
   do portal" em azul, numa caixa própria. Quem é anunciante e admin ao
   mesmo tempo sabe de relance de que lado está. */
.painel-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.painel-menu-titulo {
    display: block;
    margin: 0 12px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dourado);
}

.painel-menu-admin {
    margin-top: 18px;
    padding: 12px 8px 8px;
    border: 1px solid rgba(143, 179, 232, 0.24);
    border-radius: var(--raio);
    background: rgba(143, 179, 232, 0.05);
}

.painel-menu-admin .painel-menu-titulo { color: var(--azul-admin); }
.painel-menu-admin a:hover { background: rgba(143, 179, 232, 0.10); color: var(--creme); }
.painel-menu-admin a.ativo { background: rgba(143, 179, 232, 0.17); color: var(--azul-admin-forte); }

/* O item da equipe dentro do menu único: mesma lista, cor própria e um
   traço acima, que faz as vezes do título que existia antes. */
.painel-menu .menu-destacado {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--linha);
    color: var(--azul-admin);
}

.painel-menu .menu-destacado .menu-icone { color: var(--azul-admin); }
.painel-menu .menu-destacado:hover { background: rgba(143, 179, 232, 0.10); color: var(--creme); }
.painel-menu .menu-destacado.ativo { background: rgba(143, 179, 232, 0.17); color: var(--azul-admin-forte); }

/* Denúncias esperando análise: selo pequeno, na cor de alerta. */
.painel-menu-contagem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--raio-pill);
    background: var(--erro);
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
}

/* Nas telas de administração o conteúdo também avisa onde se está. */
.ambiente-faixa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 6px 12px;
    border: 1px solid rgba(143, 179, 232, 0.35);
    border-radius: var(--raio-pill);
    background: rgba(143, 179, 232, 0.08);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--azul-admin-forte);
}

.ambiente-faixa span { font-size: 9px; color: var(--azul-admin); }

.ambiente-admin .painel-conteudo .rotulo-dourado { color: var(--azul-admin); }

.painel-sair {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--linha);
}

.painel-conteudo { min-width: 0; }

/* Ajuda da tela (painel do anunciante). O desenho é o mesmo da Central
   e da gestão, e o parcial também, mas as regras moram em gestao.css,
   que o portal não carrega. Copiadas aqui, e não movidas para um
   arquivo comum: são vinte linhas, e um terceiro arquivo de CSS para
   carregar em toda página do portal custaria mais do que a repetição.

   O botão não fica no cabeçalho como nos outros dois: o topo do portal
   é o do site público, e um botão de ajuda de painel ali apareceria
   também na busca e na página do anúncio. */
.painel-ajuda-barra { display: flex; justify-content: flex-end; margin-bottom: 4px; }

.g-ajuda > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.g-ajuda > summary::-webkit-details-marker { display: none; }
.g-ajuda[open] > summary { border-color: var(--dourado); color: var(--dourado); }
.g-ajuda-painel {
    /* Começa no alto da janela, e não embaixo do cabeçalho: o do portal
       muda de altura conforme a largura da tela, e um valor fixo deixaria
       uma faixa vazia ou um pedaço escondido. */
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
    width: min(440px, 100vw); overflow-y: auto;
    padding: 22px 24px 30px;
    background: var(--superficie); border-left: 1px solid var(--linha-forte);
    box-shadow: var(--sombra-g); font-size: 14.5px; line-height: 1.55; color: var(--creme-2);
}
.g-ajuda-painel h2 { font-size: 20px; margin: 2px 0 8px; color: var(--creme); }
.g-ajuda-painel h3 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--dourado); margin: 20px 0 8px; }
.g-ajuda-painel ol, .g-ajuda-painel ul { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.g-ajuda-figura { margin: 16px 0 0; }
.g-ajuda-figura .ajuda-desenho { width: 100%; height: auto; display: block; }
.g-ajuda-figura figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--neutro); }
.g-ajuda-rotulo { margin: 0; font-size: 12px; color: var(--neutro); }
.g-ajuda-duvida { border-top: 1px solid var(--linha); padding: 9px 0; }
.g-ajuda-duvida summary { cursor: pointer; color: var(--creme); font-weight: 700; }
.g-ajuda-duvida p { margin: 6px 0 0; }
.g-ajuda-rodape { margin: 20px 0 0; font-size: 12.5px; color: var(--neutro); }

.numero-grande {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 8px;
    color: var(--creme);
}

/* ---------------------------------------------------------------- */
/* Tabela de dados                                                   */
/* ---------------------------------------------------------------- */
.tabela-dados {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

.tabela-dados th,
.tabela-dados td {
    padding: 12px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--linha-suave);
}

.tabela-dados th {
    width: 40%;
    font-weight: 600;
    color: var(--neutro);
}

.tabela-dados td { color: var(--creme-2); }

.tabela-dados tr:last-child th,
.tabela-dados tr:last-child td { border-bottom: 0; }

.tabela-larga th { width: auto; }

.tabela-larga thead th {
    font-size: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dourado);
    border-bottom-color: var(--linha);
}

/* ---------------------------------------------------------------- */
/* Páginas de texto longo (termos, privacidade)                      */
/* ---------------------------------------------------------------- */
.envolucro-texto { max-width: 760px; }

.texto-longo { font-size: 16px; line-height: 1.75; color: var(--creme-2); }

.texto-longo h2 {
    margin: 40px 0 14px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--creme);
}

.texto-longo h3 {
    margin: 26px 0 10px;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--creme);
}

.texto-longo h2:first-child { margin-top: 0; }

.texto-longo p { margin: 0 0 15px; }

.texto-longo ul {
    margin: 0 0 18px;
    padding-left: 20px;
}

.texto-longo li { margin-bottom: 8px; }

.texto-longo strong { color: var(--creme); font-weight: 600; }

.texto-longo .tabela-dados { margin: 20px 0 26px; }

/* ---------------------------------------------------------------- */
/* Responsivo da Camada 2                                            */
/* ---------------------------------------------------------------- */
@media (max-width: 860px) {
    .painel-estrutura { grid-template-columns: 1fr; gap: 24px; }

    .painel-lateral { position: static; }

    .painel-menu { flex-direction: row; flex-wrap: wrap; }
    .painel-menu-titulo { flex-basis: 100%; }

    .tabela-larga { display: block; overflow-x: auto; }
}

/* ================================================================== */
/* Camada 3. Cadastro de imóveis                                     */
/* ================================================================== */

/* ---------------------------------------------------------------- */
/* Trilha de etapas                                                  */
/* ---------------------------------------------------------------- */
.passos { margin: 22px 0 26px; }

.passos ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.passo { flex: 1 1 0; min-width: 92px; }

.passo a,
.passo button,
.passo > span {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border-radius: var(--raio);
    border: 1px solid var(--linha);
    background: var(--superficie);
    font-size: 13px;
    color: var(--neutro-2);
    transition: border-color var(--transicao), color var(--transicao);
}

.passo a:hover,
.passo button:hover { border-color: var(--linha-forte); color: var(--creme-2); }

.passo-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--superficie-3);
    font-size: 11.5px;
    font-weight: 700;
}

.passo-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.passo-feito a,
.passo-feito button,
.passo-feito > span { color: var(--creme-2); border-color: var(--linha-forte); }
.passo-feito .passo-numero { background: var(--dourado-fundo-escuro); color: var(--sobre-cor); }

.passo-atual > span {
    border-color: var(--dourado);
    background: rgba(227, 166, 59, 0.09);
    color: var(--creme);
    font-weight: 600;
}
.passo-atual .passo-numero { background: var(--dourado-fundo); color: var(--sobre-cor); }

/* ---------------------------------------------------------------- */
/* Rodapé de ações do assistente                                     */
/* ---------------------------------------------------------------- */
.acoes-etapa {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 24px;
}

/* ---------------------------------------------------------------- */
/* Cartão de anúncio na lista do painel                              */
/* ---------------------------------------------------------------- */
/* Foto à esquerda ocupando a altura toda; texto em cima e ações numa
   linha embaixo, à direita da foto. As ações já foram uma coluna de
   seis botões empilhados: o cartão ficava do tamanho da pilha, bem mais
   alto que a foto e o texto, e a lista de anúncios virava rolagem. */
.cartao-anuncio {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    grid-template-areas:
        "foto corpo"
        "foto acoes";
    column-gap: 20px;
    row-gap: 12px;
    align-items: start;
}

.cartao-anuncio-foto   { grid-area: foto; }
.cartao-anuncio-corpo  { grid-area: corpo; }

.cartao-anuncio-foto img {
    width: 168px;
    height: 126px;
    object-fit: cover;
    border-radius: var(--raio);
    display: block;
}

.cartao-anuncio-foto .sem-foto {
    width: 168px;
    height: 126px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio);
    color: var(--neutro-2);
}

.cartao-anuncio-corpo { min-width: 0; }
.cartao-anuncio-corpo h2 a { color: var(--creme); }
.cartao-anuncio-corpo h2 a:hover { color: var(--dourado); }

.cartao-anuncio-acoes {
    grid-area: acoes;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--linha-suave);
}

/* Os formulários somem do layout e os botões viram filhos diretos da
   linha. Cada botão continua enviando o próprio formulário, a
   ascendência no HTML não muda, só a caixa que o form desenhava. */
.cartao-anuncio-acoes form { display: contents; }

/* Mais baixos que o botao-pequeno: seis ações numa linha precisam caber
   sem dominar o cartão, que é sobre o imóvel e não sobre os botões. */
.cartao-anuncio-acoes .botao {
    padding: 6px 12px;
    font-size: 12.5px;
}

/* Publicidade vai para a ponta direita: é a única ação dourada, e
   separada das outras fica claro que é de outra natureza: divulgar,
   não administrar. */
.cartao-anuncio-acoes .botao-principal { margin-left: auto; }

/* ---------------------------------------------------------------- */
/* Blocos de características                                         */
/* ---------------------------------------------------------------- */
.grupo-caracteristicas {
    border: 0;
    padding: 0;
    margin: 0 0 22px;
}

.grupo-caracteristicas legend { margin-bottom: 10px; padding: 0; }

.grade-caracteristicas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
    gap: 2px 18px;
}

.grade-caracteristicas .caixa-marcar { margin: 0; padding: 5px 0; }

/* ---------------------------------------------------------------- */
/* Grade de fotos                                                    */
/* ---------------------------------------------------------------- */
.grade-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr));
    gap: 14px;
}

.foto-item {
    position: relative;
    margin: 0;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--superficie-2);
}

.foto-item.foto-capa { border-color: var(--dourado); }

/* A grade mantém a moldura 4/3 para as fotos ficarem alinhadas, mas a
   imagem aparece inteira dentro dela: quem está escolhendo a capa
   precisa ver o que a foto tem, não um pedaço dela. */
.foto-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--preto);
    display: block;
}

.foto-item figcaption { padding: 10px 8px; }

/* Lado a lado, como as ações do cartão em "Meus imóveis". Na foto de
   capa sobra só o Remover, centralizado. */
.foto-item figcaption form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
}

.foto-item figcaption .botao {
    padding: 6px 12px;
    font-size: 12.5px;
}

/* ---------------------------------------------------------------- */
/* Responsivo da Camada 3                                            */
/* ---------------------------------------------------------------- */
@media (max-width: 980px) {
    .cartao-anuncio {
        grid-template-columns: 1fr;
        grid-template-areas: "foto" "corpo" "acoes";
    }

    .cartao-anuncio-foto img,
    .cartao-anuncio-foto .sem-foto { width: 100%; height: 180px; }

    /* No celular a Publicidade desce para uma linha própria, larga:
       empurrada para a direita ela sobraria sozinha num canto. */
    .cartao-anuncio-acoes .botao-principal { margin-left: 0; flex-basis: 100%; justify-content: center; }

    .passo-titulo { display: none; }
    .passo { min-width: 0; flex: 0 0 auto; }
    .passo a, .passo button, .passo > span { padding: 9px 11px; }
}

/* ---------------------------------------------------------------- */
/* Fotos na tela de revisão                                          */
/*                                                                   */
/* A capa é limitada por ALTURA, não por largura: num notebook de     */
/* tela baixa uma foto a 100% da largura empurrava todo o resto do    */
/* anúncio para fora da janela.                                       */
/* ---------------------------------------------------------------- */
.revisao-capa {
    margin: 0 0 12px;
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.revisao-capa img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    border-radius: var(--raio);
}

.revisao-capa figcaption {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 9px;
    border-radius: 4px;
    background: rgba(11, 10, 9, 0.82);
    color: var(--dourado);
}

.revisao-miniaturas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.revisao-miniaturas img {
    width: 92px;
    height: 69px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--linha);
}

@media (max-width: 620px) {
    .revisao-capa img { max-height: 210px; }
}

/* ================================================================== */
/* Camada 3. Revisão do anúncio e trilha com etapas concluídas       */
/* ================================================================== */

/* A trilha usa <button> nos passos navegáveis, para salvar antes de
   sair. A aparência vem do bloco compartilhado lá em cima; aqui ficam
   só os padrões do próprio <button> que precisam ser desfeitos. */
.passo button {
    font-family: var(--fonte);
    text-align: left;
    cursor: pointer;
}

/* Etapa com o obrigatório preenchido */
.passo-ok .passo-numero { background: var(--sucesso-fundo); color: var(--sobre-cor); }

.passo-ok a,
.passo-ok button,
.passo-ok > span { border-color: rgba(111, 191, 115, 0.4); color: var(--creme-2); }

.passo-atual.passo-ok > span { border-color: var(--dourado); }
.passo-atual .passo-numero   { background: var(--dourado-fundo); color: var(--sobre-cor); }

/* ---------------------------------------------------------------- */
/* Galeria da revisão                                                */
/* ---------------------------------------------------------------- */
.galeria { margin-bottom: 22px; }

.galeria button {
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    display: block;
    line-height: 0;
}

/* Palco de altura fixa. A foto inteira cabe dentro dele e nada é
   cortado; trocar de foto não muda a altura da página, que é o que o
   "cover" resolvia às custas de esconder pedaço do imóvel. */
.galeria-principal {
    position: relative;
    width: 100%;
    height: clamp(220px, 48vh, 420px);
    border-radius: var(--raio) !important;
    overflow: hidden;
    background: var(--preto);
}

/* A própria foto, ampliada e desfocada, preenchendo o palco por baixo.
   O scale existe porque o desfoque puxa a borda para dentro: sem ele
   sobraria um halo claro nas quatro extremidades. */
.galeria-fundo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(26px) saturate(1.15) brightness(0.55);
    transform: scale(1.15);
}

.galeria-principal .galeria-foto {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.galeria-tiras {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.galeria-tiras button { border-radius: 6px; overflow: hidden; }

.galeria-tiras img {
    width: 88px;
    height: 66px;
    object-fit: cover;
    border: 1px solid var(--linha);
    border-radius: 6px;
    transition: border-color var(--transicao);
}

.galeria-tiras button:hover img { border-color: var(--dourado); }

/* ---------------------------------------------------------------- */
/* Prévia do anúncio                                                 */
/* ---------------------------------------------------------------- */
.anuncio-cabecalho h2 {
    font-size: 22px;
    margin: 8px 0 6px;
    letter-spacing: -0.02em;
}

.anuncio-precos {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: 20px 0;
    padding: 18px 0;
    border-top: 1px solid var(--linha-suave);
    border-bottom: 1px solid var(--linha-suave);
}

.anuncio-valor {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--creme);
    line-height: 1.1;
}

.anuncio-custos { font-size: 13.5px; line-height: 1.6; }

.anuncio-numeros {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.anuncio-numeros strong {
    display: block;
    font-size: 18px;
    color: var(--creme);
}

.anuncio-bloco {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--linha-suave);
}

.anuncio-bloco h3 {
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--creme);
}

.anuncio-bloco p { font-size: 15px; line-height: 1.7; color: var(--creme-2); }

.anuncio-caracteristicas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 14.5px;
    color: var(--creme-2);
}

.anuncio-caracteristicas .rotulo { min-width: 110px; }

.anuncio-selos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.video-quadro {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--raio);
    overflow: hidden;
}

.video-quadro iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------------------------------------------------------------- */
/* Lente de aumento das fotos                                        */
/* ---------------------------------------------------------------- */
.lente {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 96vw;
    max-height: 96vh;
    overflow: visible;
}

.lente::backdrop { background: rgba(6, 5, 4, 0.92); }

.lente img {
    display: block;
    max-width: 92vw;
    max-height: 84vh;
    width: auto;
    height: auto;
    border-radius: var(--raio);
}

.lente-fechar,
.lente-navegar {
    position: fixed;
    border: 1px solid var(--linha-forte);
    background: rgba(11, 10, 9, 0.82);
    color: var(--creme);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lente-fechar:hover,
.lente-navegar:hover { border-color: var(--dourado); color: var(--dourado); }

.lente-fechar   { top: 18px; right: 18px; }
.lente-anterior { left: 18px;  top: 50%; transform: translateY(-50%); }
.lente-proxima  { right: 18px; top: 50%; transform: translateY(-50%); }

.lente-contador {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 13px;
    color: var(--neutro);
    letter-spacing: 0.08em;
}

@media (max-width: 620px) {
    /* No celular a altura vem do palco, não da imagem: quem limita
       agora é o contêiner, e a foto se ajusta dentro dele. */
    .galeria-principal { height: clamp(200px, 42vh, 300px); }
    .anuncio-precos { gap: 18px; }
    .lente-navegar { width: 38px; height: 38px; }
}

/* ---------------------------------------------------------------- */
/* Linha do tempo do anúncio                                        */
/* ---------------------------------------------------------------- */
.tempo {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tempo-item {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
}

.tempo-item:last-child { padding-bottom: 0; }

/* O fio que liga um marco ao seguinte. Fica atrás do marcador e não
   desce do último item, para a trilha não terminar no vazio. */
.tempo-item::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 16px;
    bottom: 0;
    width: 1px;
    background: var(--linha);
}

.tempo-item:last-child::before { display: none; }

.tempo-marca {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--superficie-3);
    box-shadow: 0 0 0 3px var(--superficie);
}

.tempo-corpo { min-width: 0; }

.tempo-titulo {
    display: block;
    font-size: 14.5px;
    color: var(--creme);
}

.tempo-quando {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--neutro-2);
}

.tempo-motivo {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--neutro);
    max-width: 62ch;
}

.tempo-ok .tempo-marca    { background: var(--sucesso-fundo); }
.tempo-erro .tempo-marca  { background: var(--erro); }
.tempo-espera .tempo-marca { background: var(--dourado-fundo); }

/* O passo que ainda não aconteceu: contorno, sem preenchimento. */
.tempo-futuro .tempo-marca {
    background: var(--superficie);
    border: 2px solid var(--linha-forte);
}

.tempo-adiante .tempo-titulo { color: var(--dourado); }

/* Enquanto está na fila de análise, o marcador respira devagar. */
.tempo-adiante.tempo-espera .tempo-marca {
    animation: tempo-pulso 2.4s ease-in-out infinite;
}

@keyframes tempo-pulso {
    0%, 100% { box-shadow: 0 0 0 3px var(--superficie); }
    50%      { box-shadow: 0 0 0 3px var(--superficie), 0 0 0 6px rgba(227, 166, 59, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
    .tempo-adiante.tempo-espera .tempo-marca { animation: none; }
}

/* ---------------------------------------------------------------- */
/* Área de soltar fotos                                             */
/* ---------------------------------------------------------------- */
.solta-fotos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px 22px;
    border: 1.5px dashed var(--linha-forte);
    border-radius: var(--raio);
    background: var(--superficie);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transicao), background var(--transicao);
}

.solta-fotos:hover,
.solta-fotos:focus-within { border-color: var(--dourado); }

/* Enquanto o arquivo está sobre a área, ela acende inteira. */
.solta-fotos.recebendo {
    border-color: var(--dourado);
    border-style: solid;
    background: rgba(227, 166, 59, 0.07);
}

.solta-fotos-icone { color: var(--dourado); }

.solta-fotos-titulo {
    font-size: 15px;
    font-weight: 600;
    color: var(--creme-2);
}

.solta-fotos .campo-dica { max-width: 46ch; margin-top: 0; }

/* O campo real fica escondido, mas continua sendo ele que recebe o
   arquivo, inclusive o que é solto na área. */
.solta-fotos-campo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- */
/* Logomarcas: um quadro para fundo claro, outro para fundo escuro    */
/*                                                                   */
/* Cada quadro é a área de soltar/clicar do seu arquivo. A imagem     */
/* entra inteira, encaixada (contain). Nunca cortada nem aparada. O  */
/* nome do quadro fica embaixo, fora da imagem.                       */
/* ---------------------------------------------------------------- */
.logo-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 560px;
}

.logo-caixa {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 2 / 1;
    padding: 16px 20px;
    border: 1.5px dashed var(--linha-forte);
    border-radius: var(--raio);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.logo-caixa-claro  { background: #F4F1EA; border-color: rgba(20, 17, 12, 0.28); }
.logo-caixa-escuro { background: #0B0A09; }

.logo-caixa:hover,
.logo-caixa:focus-within,
.logo-caixa.recebendo { border-color: var(--dourado); border-style: solid; }

.logo-caixa.recebendo { box-shadow: 0 0 0 3px rgba(227, 166, 59, 0.25); }
.logo-caixa.enviando  { cursor: progress; opacity: 0.7; }

.logo-caixa img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-caixa-vazia {
    max-width: 18ch;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    color: var(--neutro-2);
}

.logo-caixa-claro .logo-caixa-vazia { color: #7C7566; }

/* Com "a mesma nos dois fundos", o quadro escuro é só um espelho da
   principal: borda contínua e discreta, para não parecer um segundo
   arquivo enviado. */
.logo-caixa-espelho { border-style: solid; border-color: var(--linha); }

.logo-slot-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
    margin-top: 6px;
}

.logo-slot-rotulo {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--neutro);
}

.logo-slot-rodape .botao { padding: 5px 10px; font-size: 12px; }

.logo-mesma { margin: 12px 0 4px; }

@media (max-width: 520px) {
    .logo-slots { grid-template-columns: 1fr; }
}

/* Durante o envio a área para de aceitar clique e conta o que vai. */

/* ---------------------------------------------------------------- */
/* Confirmação de contato por código                                  */
/* ---------------------------------------------------------------- */
.confirmacao-contato {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Era -6px no topo, e isso colava o selo na borda de baixo do campo:
       parecia parte da caixa, nao um aviso sobre ela (30/09/2026). */
    margin: 6px 0 16px;
}

/* O selo tem a largura do texto, e nao a do campo. Esticado de ponta a
   ponta ele lia como uma segunda borda do input. So quando e filho
   direto: dentro de .confirmacao-linha ele divide a linha com os botoes
   e precisa continuar centrado neles. */
.confirmacao-contato > .confirmacao-selo { align-self: flex-start; }

/* No HTML o bloco do código vem antes (por causa do Enter); na tela, o
   pedido do código aparece primeiro. */
.confirmacao-pedir { order: -1; }

/* O passo do WhatsApp: o botão que abre a conversa e o aviso de que a
   página está esperando a mensagem chegar. Fica escondido até a pessoa
   pedir, antes disso não há link nenhum para abrir. */
.confirmacao-whatsapp {
    display: grid;
    gap: 8px;
    justify-items: start;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(227, 166, 59, 0.35);
    border-radius: var(--raio);
    background: rgba(227, 166, 59, 0.09);
}
.confirmacao-whatsapp p { margin: 0; max-width: 56ch; }

.confirmacao-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.confirmacao-selo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pill);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--neutro);
}

.confirmacao-ok { border-color: rgba(111, 191, 115, 0.5); color: var(--sucesso); }
.confirmacao-pendente { border-color: rgba(227, 166, 59, 0.45); color: var(--dourado); }

.confirmacao-campo {
    width: 9.5em;
    letter-spacing: 0.3em;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.confirmacao-recado:empty { display: none; }

/* Valor mudou e ainda não foi salvo: só o aviso "salve para confirmar". */
.confirmacao-desatualizada > :not([data-confirmacao-salvar]) { display: none !important; }

.solta-fotos.enviando {
    cursor: progress;
    border-style: solid;
    border-color: var(--linha-forte);
    opacity: 0.75;
}

/* ---------------------------------------------------------------- */
/* Planos                                                            */
/* ---------------------------------------------------------------- */
.grade-planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: 16px;
    align-items: stretch;
}

.cartao-plano {
    display: flex;
    flex-direction: column;
}

/* O plano em que o anunciante já está entra destacado. */
.cartao-plano-atual { border-color: rgba(227, 166, 59, 0.45); }

.plano-preco {
    margin: 0 0 4px;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--creme);
}

.plano-itens {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    font-size: 14px;
    color: var(--creme-2);
    /* Empurra o botão para a base, para os cartões terminarem juntos. */
    flex: 1;
}

.plano-itens li {
    position: relative;
    padding: 5px 0 5px 20px;
}

.plano-itens li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dourado-fundo);
}

/* ---------------------------------------------------------------- */
/* Fluxo de status do anúncio                                       */
/* ---------------------------------------------------------------- */
.fluxo {
    display: flex;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    gap: 0;
}

.fluxo-fase {
    position: relative;
    flex: 1;
    padding-top: 24px;
    text-align: center;
    font-size: 13.5px;
    color: var(--neutro-2);
}

/* O traço que liga uma fase à seguinte, atrás do marcador. */
.fluxo-fase::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--linha);
}

.fluxo-fase:last-child::before { display: none; }

.fluxo-marca {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: var(--superficie-3);
    box-shadow: 0 0 0 3px var(--superficie);
}

/* Fase já vencida: marcada, mas discreta. É passado. */
.fluxo-vencida .fluxo-marca { background: var(--linha-forte); }
.fluxo-vencida::before       { background: var(--linha-forte); }

/* Só a fase atual ganha cor e peso. */
.fluxo-atual { color: var(--creme); font-weight: 600; }

.fluxo-atual.fluxo-tom-ok .fluxo-marca     { background: var(--sucesso-fundo); }
.fluxo-atual.fluxo-tom-erro .fluxo-marca   { background: var(--erro); }
.fluxo-atual.fluxo-tom-espera .fluxo-marca { background: var(--dourado-fundo); }
.fluxo-atual.fluxo-tom-neutro .fluxo-marca { background: var(--neutro); }

.fluxo-atual.fluxo-tom-ok     { color: var(--sucesso); }
.fluxo-atual.fluxo-tom-erro   { color: var(--erro); }
.fluxo-atual.fluxo-tom-espera { color: var(--dourado); }

/* Enquanto espera decisão, o marcador respira. */
.fluxo-atual.fluxo-tom-espera .fluxo-marca {
    animation: tempo-pulso 2.4s ease-in-out infinite;
}

.fluxo-futura .fluxo-marca {
    background: var(--superficie);
    border: 2px solid var(--linha);
}

.fluxo-agora {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--raio);
    background: var(--superficie-2);
    font-size: 14px;
    line-height: 1.6;
    color: var(--creme-2);
}

/* ---------------------------------------------------------------- */
/* Histórico recolhido                                              */
/* ---------------------------------------------------------------- */
.historico { margin-top: 16px; }

.historico summary {
    cursor: pointer;
    font-size: 13.5px;
    color: var(--neutro);
    padding: 6px 0;
}

.historico summary:hover { color: var(--creme-2); }

.historico[open] summary { margin-bottom: 14px; }

/* No histórico o passado é neutro: quem dá a cor é o fluxo acima. */
.historico .tempo-marca { background: var(--superficie-3); }

/* ---------------------------------------------------------------- */
/* Reenvio na fila de moderação                                     */
/* ---------------------------------------------------------------- */
.reenvio {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-left: 3px solid var(--dourado);
    border-radius: 0 var(--raio) var(--raio) 0;
    background: rgba(227, 166, 59, 0.07);
}

.reenvio-titulo {
    display: block;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dourado);
    margin-bottom: 4px;
}

.reenvio p { margin: 0; font-size: 14px; color: var(--creme-2); }

.reenvio-lista {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    color: var(--creme-2);
}

.reenvio-lista li { padding: 2px 0; }

/* Valor que existe mas se edita em outro lugar: parece campo, mas não
   é caixa de digitação. Não pode dar a impressão de estar travado. */
.campo-fixo {
    margin: 0;
    padding: 11px 0 0;
    font-size: 16px;
    color: var(--creme);
}

/* ---------------------------------------------------------------- */
/* Passo de publicar: ação, não preenchimento                       */
/*                                                                   */
/* Ele não compete com a etapa atual enquanto está apagado, e só     */
/* ganha a cor da marca quando o anúncio realmente pode ir embora.   */
/* ---------------------------------------------------------------- */
.passo-publicar { flex: 1 1 0; }

.passo-publicar > span {
    border-style: dashed;
    opacity: 0.7;
    cursor: not-allowed;
}

.passo-pronto button {
    border-color: var(--dourado-fundo);
    background: var(--dourado-fundo);
    color: var(--sobre-cor);
    font-weight: 700;
}

.passo-pronto button:hover {
    background: var(--dourado-fundo-claro);
    border-color: var(--dourado-fundo-claro);
    color: var(--sobre-cor);
}

.passo-pronto .passo-numero {
    background: rgba(11, 10, 9, 0.22);
    color: var(--sobre-cor);
}

/* ---------------------------------------------------------------- */
/* Contagem de cômodos em fichas                                    */
/* ---------------------------------------------------------------- */
.contadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 22px 26px;
}

.contador {
    margin: 0;
    padding: 0;
    border: 0;
}

.contador legend { padding: 0; margin-bottom: 9px; }

.contador-fichas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/*
 * O número exato, para quem marcou a última ficha ("4+").
 *
 * Quem mostra e esconde é o :has, e não o JavaScript: a etapa do
 * cadastro inteira funciona sem script, e um campo que só existisse com
 * JS deixaria a pessoa sem como informar o número exato. Sem :has, em
 * navegador muito antigo: o campo fica sempre visível, que é o pior
 * caso aceitável: ocupa uma linha a mais e continua funcionando.
 */
.contador-exato {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 14px;
}

.contador-exato .entrada {
    width: 88px;
    padding: 7px 10px;
}

.contador:has(.ficha-mais input:not(:checked)) .contador-exato {
    display: none;
}

/* O rádio some, mas continua sendo ele que guarda a escolha e que
   recebe o foco do teclado, por isso é clip, e não display:none.
   A ficha é a referência de posição dele: sem isso o rádio ia parar no
   topo da caixa de filtros, e o clique rolava a caixa até lá em cima. */
.ficha { position: relative; }

.ficha input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ficha span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 9px 12px;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--neutro);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}

.ficha span:hover { border-color: var(--linha-forte); color: var(--creme-2); }

.ficha input:checked + span {
    border-color: var(--dourado-fundo);
    background: var(--dourado-fundo);
    color: var(--sobre-cor);
}

.ficha input:focus-visible + span {
    outline: 2px solid var(--dourado);
    outline-offset: 2px;
}

.ficha-mais span { min-width: 0; }

/* ---------------------------------------------------------------- */
/* "Como contar" no cadastro: regra à esquerda, planta à direita     */
/* ---------------------------------------------------------------- */
.ajuda-contagem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 18px 26px;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 18px;
    border: 1px solid var(--linha);
    border-left: 3px solid var(--dourado);
    border-radius: var(--raio);
    background: rgba(var(--tinta), 0.025);
}

@media (max-width: 760px) {
    .ajuda-contagem { grid-template-columns: 1fr; }
}

.ajuda-contagem-titulo { display: block; margin-bottom: 8px; font-size: 14.5px; color: var(--dourado); }

.ajuda-contagem ul { margin: 0; padding-left: 18px; }
.ajuda-contagem li { margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: var(--creme-2); }
.ajuda-contagem li b { color: var(--creme); }
.ajuda-contagem li em { font-style: normal; color: var(--dourado); }

.ajuda-contagem-obs { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--neutro); }

.ajuda-contagem-exemplo { margin: 0; }

.ajuda-contagem-exemplo figcaption {
    margin-bottom: 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--neutro);
}

.ajuda-contagem-exemplo svg { display: block; width: 100%; height: auto; }

.pl-casa    { fill: none; stroke: var(--linha-forte); stroke-width: 2; }
.pl-quarto  { fill: rgba(227, 166, 59, 0.12); stroke: rgba(227, 166, 59, 0.55); stroke-width: 1.2; }
.pl-banho   { fill: rgba(143, 179, 232, 0.16); stroke: var(--azul-admin); stroke-width: 1.2; }
.pl-neutro  { fill: rgba(var(--tinta), 0.04); stroke: var(--linha); stroke-width: 1; }
.pl-quintal { fill: rgba(127, 196, 164, 0.05); stroke: var(--linha-forte); stroke-width: 1.2; stroke-dasharray: 5 4; }

.ajuda-contagem-exemplo text {
    font-family: var(--fonte);
    font-size: 11.5px;
    text-anchor: middle;
}

.pl-rot        { fill: var(--creme-2); font-weight: 600; }
.pl-rot-fraco  { fill: var(--neutro-2); font-weight: 500; }
.pl-num-quarto { fill: var(--dourado); font-weight: 700; }
.pl-num-banho  { fill: var(--azul-admin); font-weight: 700; }

.ajuda-contagem-resultado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--neutro);
}

.ajuda-contagem-resultado span {
    padding: 4px 10px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pill);
    color: var(--creme-2);
}

.ajuda-contagem-resultado b { color: var(--dourado); }

.ajuda-contagem-dica { display: block; margin-top: 3px; color: var(--neutro-2); font-style: italic; }

/* Realce: quem aponta para "Quartos", "Suítes" ou "Banheiros" (na
   lista, nas etiquetas de baixo ou nos próprios contadores) acende
   esses cômodos no desenho e apaga o resto. O app.js só troca o
   data-realce da caixa; o resto é daqui. */
.realce-gatilho {
    cursor: pointer;
    border-radius: 6px;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}

.ajuda-contagem li.realce-gatilho { margin-left: -6px; padding: 2px 6px; }
.ajuda-contagem li.realce-gatilho:hover,
.ajuda-contagem li.realce-gatilho:focus-visible,
.ajuda-contagem li.realce-ativo { background: rgba(227, 166, 59, 0.10); outline: none; }

.ajuda-contagem-resultado .realce-gatilho:hover,
.ajuda-contagem-resultado .realce-gatilho:focus-visible,
.ajuda-contagem-resultado .realce-ativo {
    border-color: var(--dourado);
    color: var(--creme);
    outline: none;
}

.ajuda-contagem svg .r { transition: opacity 0.2s ease; }
.ajuda-contagem svg .r rect { transition: fill 0.2s ease, stroke-width 0.2s ease; }

.ajuda-contagem[data-realce] svg .r,
.ajuda-contagem[data-realce] svg .pl-casa { opacity: 0.22; }

.ajuda-contagem[data-realce="quartos"] svg .r-quarto,
.ajuda-contagem[data-realce="suites"] svg .r-suite,
.ajuda-contagem[data-realce="banheiros"] svg .r-banho { opacity: 1; }

.ajuda-contagem[data-realce="quartos"] svg .r-quarto .pl-quarto,
.ajuda-contagem[data-realce="suites"] svg .r-suite .pl-quarto {
    fill: rgba(227, 166, 59, 0.34);
    stroke: var(--dourado);
    stroke-width: 2.4;
}

.ajuda-contagem[data-realce="banheiros"] svg .r-banho .pl-banho,
.ajuda-contagem[data-realce="suites"] svg .r-suite .pl-banho {
    fill: rgba(143, 179, 232, 0.38);
    stroke-width: 2.4;
}

/* O contador que corresponde ao realce também ganha destaque, para a
   pessoa ligar o desenho ao lugar onde vai marcar. */
.contador.realce-ativo legend { color: var(--dourado); }

/* Mobília e animais, no bloco "O que o imóvel tem": vêm antes das
   listas de marcar, lado a lado quando cabe. */
.grade-uso {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 18px 26px;
    margin-bottom: 22px;
}

.grade-uso .caixa-marcar { margin: 0; padding: 9px 0; }

/* No painel de filtros da busca as fichas ficam em três colunas:
   quartos, banheiros e vagas numa linha só no computador. */
.filtros-contadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 16px;
}

/* Só três fichas curtas (1, 2, 3+): um pouco mais largas que no
   cadastro, para o dedo acertar no celular. */
.filtros-contadores .ficha span { min-width: 48px; }

/* ---------------------------------------------------------------- */
/* Faixa de preço: duas alças numa régua                             */
/*                                                                   */
/* São dois <input type=range> um sobre o outro. O trilho deles é    */
/* transparente e não recebe clique: só as bolinhas recebem, cada   */
/* uma a sua. A barra dourada entre elas é desenhada à parte.        */
/* ---------------------------------------------------------------- */
.faixa { max-width: 560px; }

.faixa-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.faixa-topo .campo-rotulo { margin: 0; }
.faixa-valor { font-size: 15px; color: var(--dourado); white-space: nowrap; }

.faixa-trilho {
    position: relative;
    height: 30px;
}

.faixa-trilho::before {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: var(--linha-forte);
}

.faixa-cheio {
    position: absolute;
    z-index: 1;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: var(--dourado-fundo);
}

.faixa-trilho input[type="range"] {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 30px;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.faixa-trilho input[type="range"]::-webkit-slider-runnable-track { height: 30px; background: none; }
.faixa-trilho input[type="range"]::-moz-range-track { background: none; }

.faixa-trilho input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 22px;
    height: 22px;
    margin-top: 4px;
    border: 3px solid var(--superficie);
    border-radius: 50%;
    background: var(--dourado-fundo);
    box-shadow: 0 0 0 1px var(--dourado), 0 2px 6px rgba(0, 0, 0, 0.35);
    cursor: grab;
}

.faixa-trilho input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border: 3px solid var(--superficie);
    border-radius: 50%;
    background: var(--dourado-fundo);
    box-shadow: 0 0 0 1px var(--dourado), 0 2px 6px rgba(0, 0, 0, 0.35);
    cursor: grab;
}

.faixa-trilho input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }

.faixa-trilho input[type="range"]:focus { outline: none; }
.faixa-trilho input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--creme); outline-offset: 2px; }
.faixa-trilho input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--creme); outline-offset: 2px; }

.faixa-pontas {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--neutro-2);
}

/* ================================================================== */
/* Busca pública (Camada 4)                                           */
/* ================================================================== */
.migalhas {
    font-size: 13.5px;
    color: var(--neutro-2);
}
.migalhas a { color: var(--neutro); }
.migalhas a:hover { color: var(--dourado); }

/* ---------------------------------------------------------------- */
/* Filtros                                                           */
/* ---------------------------------------------------------------- */
.filtros {
    padding: 18px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    background: var(--superficie);
    margin-bottom: 18px;
}

.filtros-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.filtro { display: flex; flex-direction: column; flex: 1 1 150px; min-width: 130px; }
.filtro .campo-rotulo { margin-bottom: 6px; }
.filtros-linha .botao { flex: 0 0 auto; }

/* ---------------------------------------------------------------- */
/* Atalhos de finalidade e tipo                                      */
/*                                                                   */
/* Cada um é um link para um endereço próprio, não um filtro de       */
/* formulário: são estas as páginas que o Google indexa.             */
/* ---------------------------------------------------------------- */
.atalhos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

.atalho {
    padding: 7px 14px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-pill);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--neutro);
    transition: border-color var(--transicao), color var(--transicao), background var(--transicao);
}

.atalho:hover { border-color: var(--linha-forte); color: var(--creme-2); }

.atalho-ativo {
    border-color: var(--dourado);
    background: rgba(227, 166, 59, 0.10);
    color: var(--dourado);
}

.atalhos-divisa {
    width: 1px;
    height: 20px;
    background: var(--linha);
    margin: 0 4px;
}

/* Explorar a cidade: faixas de preço e bairros com anúncio (Camada 6) */
.explorar {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--linha);
    display: grid;
    gap: 22px;
}
.explorar-titulo {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--creme-2);
    margin-bottom: 12px;
}
.explorar .atalhos { margin-bottom: 0; }
.explorar-total {
    margin-left: 4px;
    font-weight: 500;
    color: var(--neutro-2);
}
.atalho-ativo .explorar-total { color: inherit; opacity: .75; }

/* Sistema: backups e falhas (Camada 10) */
.sistema-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 14px;
}
.sistema-cartao {
    display: grid;
    gap: 4px;
    border-left: 3px solid var(--linha-forte);
}
.sistema-cartao strong { font-size: 22px; }
.sistema-ok { border-left-color: var(--sucesso); }
.sistema-atencao { border-left-color: var(--aviso); }
.sistema-titulo-falhas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 34px 0 8px;
}
.falha-nivel {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--raio-pill);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid currentColor;
}
.falha-erro { color: var(--erro); }
.falha-aviso { color: var(--aviso); }
.sistema-falhas td { vertical-align: top; }

/* ---------------------------------------------------------------- */
/* Pendências: o número no menu e o sino no topo                     */
/* ---------------------------------------------------------------- */
/* Um contador só para tudo que espera ação. Vermelho é alerta        */
/* (denúncia, recusado, erro); dourado é rotina (fila, vencimento).   */
.contagem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--raio-pill);
    background: var(--erro);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    flex-shrink: 0;
}
.contagem-aviso {
    background: var(--dourado-fundo);
    color: var(--sobre-cor);
}

.visualmente-oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


.sino { position: relative; }

.sino-botao {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pill);
    color: var(--creme-2);
    cursor: pointer;
    list-style: none;
    transition: color var(--transicao), background var(--transicao);
}
.sino-botao::-webkit-details-marker { display: none; }
.sino-botao:hover,
.sino[open] .sino-botao {
    color: var(--creme);
    background: rgba(var(--tinta), 0.08);
}

.sino-contagem {
    position: absolute;
    top: -6px;
    right: -7px;
    min-width: 19px;
    height: 18px;
    font-size: 10.5px;
    padding: 0 5px;
    box-shadow: 0 0 0 2px var(--preto);
}

.sino-painel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 70;
    width: min(360px, calc(100vw - 36px));
    padding: 14px;
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    box-shadow: var(--sombra-painel);
}

.sino-titulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--neutro);
    margin: 0 4px 10px;
}

.sino-vazio {
    margin: 4px;
    font-size: 14px;
    color: var(--neutro);
}

.sino-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.sino-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 10px;
    border-radius: var(--raio);
    font-size: 14px;
    line-height: 1.4;
    color: var(--creme-2);
}
.sino-item:hover {
    background: var(--superficie-2);
    color: var(--creme);
}

.sino-marca {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--dourado-fundo);
}
.sino-alerta .sino-marca { background: var(--erro); }

.sino-texto { flex: 1; }

.sino-seta {
    color: var(--neutro-2);
    transition: transform var(--transicao), color var(--transicao);
}
.sino-item:hover .sino-seta {
    color: var(--dourado);
    transform: translateX(3px);
}



/* A linha acima dos resultados: contagem à esquerda, Lista/Mapa no
   meio, "Ordenar por" à direita.

   Era space-between, e aí a posição de cada peça dependia da largura
   das outras: "5 anúncios" e "Nenhum anúncio ainda" não medem o mesmo,
   e o "Ordenar por" só existe com mais de um resultado. O Lista/Mapa
   andava para os lados a cada busca, e ninguém acerta o clique num alvo
   que se move.

   Três colunas resolvem: as duas das pontas têm sempre a mesma fração,
   então o meio é o meio de verdade: o texto pode encompridar, encurtar
   ou sumir que o botão não sai do lugar. O minmax(0, ...) é o que
   permite ao texto quebrar em vez de empurrar a coluna. */
.busca-resumo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 16px;
    margin-bottom: 18px;
}

.busca-resumo > p { margin: 0; }
.busca-resumo .ver-como { justify-self: center; }
.filtro-ordem { justify-self: end; min-width: 190px; }

/* Numa tela estreita as três colunas viram três linhas: o meio do nada
   não ajuda ninguém, e um botão espremido é pior que um botão fora do
   centro. */
@media (max-width: 720px) {
    .busca-resumo { grid-template-columns: 1fr; gap: 12px; }
    .busca-resumo .ver-como,
    .filtro-ordem { justify-self: start; }
}

/* ---------------------------------------------------------------- */
/* Grade de resultados                                               */
/* ---------------------------------------------------------------- */
.grade-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 18px;
}

.cartao {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    background: var(--superficie);
    overflow: hidden;
    transition: border-color var(--transicao), transform var(--transicao);
}

.cartao:hover { border-color: var(--linha-forte); transform: translateY(-2px); }

.cartao-destaque { border-color: rgba(227, 166, 59, 0.45); }

.cartao-foto {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--preto);
}

/* A ÚNICA foto recortada do sistema. Numa grade, cartões de alturas
   diferentes viram um mural quebrado; dentro do anúncio ela volta
   inteira.

   A imagem é posicionada de forma absoluta de propósito: aspect-ratio
   define um tamanho PREFERIDO, e conteúdo maior ainda estica a caixa. 
   uma foto em pé deixava o cartão dela quase o dobro dos vizinhos. */
.cartao-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cartao-foto .sem-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* ---------------------------------------------------------------- */
/* Contato no anúncio (Camada 7)                                      */
/* ---------------------------------------------------------------- */
.contato-quem { margin: 0 0 14px; font-size: 15px; }
.contato-quem strong { color: var(--creme); }

.contato-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.contato-botoes form { margin: 0; }

/* O verde é o do próprio WhatsApp: é por ele que o botão é achado
   de relance, antes mesmo de ler o texto. */
.botao-whatsapp {
    gap: 8px;
    border-color: #25D366;
    background: #25D366;
    color: #0B1A10;
}

.botao-whatsapp:hover { background: #1FBE5B; border-color: #1FBE5B; color: #0B1A10; }
.icone-whatsapp { flex: 0 0 auto; }

.contato-numero { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* ---------------------------------------------------------------- */
/* Desempenho do anúncio: visualizações e contatos por período        */
/* ---------------------------------------------------------------- */
.desempenho-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.desempenho-topo .ver-como-botao { text-decoration: none; }

.desempenho-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.desempenho-numeros > div {
    padding: 12px 14px;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.desempenho-numeros strong {
    display: block;
    font-size: 26px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--creme);
}

.desempenho-numeros strong.dourado { color: var(--dourado); }
.desempenho-numeros span { font-size: 12.5px; color: var(--neutro); }

/* Uma coluna por dia. A barra é a visualização; o dia com contato ganha
   a barra dourada e um ponto em cima, para achar de relance. */
.desempenho-grafico {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 140px;
    border-bottom: 1px solid var(--linha-forte);
}

/*
 * O respiro que era padding-top do gráfico virou margem da área.
 *
 * Motivo: as linhas de referência são posicionadas por "bottom", que no
 * CSS conta a partir do PADDING box, enquanto a altura das barras conta
 * a partir do CONTENT box. Com padding no topo, a linha do topo ficava
 * oito pixels acima de onde a barra de 100% chega, e uma linha de
 * referência fora do lugar é pior que nenhuma.
 *
 * A margem também é onde o número do melhor dia aparece quando a barra
 * encosta no teto da escala.
 */
.desempenho-area {
    margin-top: 18px;
}

/*
 * A legenda do gráfico de desempenho.
 *
 * min-height segura a altura quando o texto é curto: sem isso, o
 * gráfico pularia para cima e para baixo a cada toque numa barra, e o
 * dedo erraria a próxima.
 */
.desempenho-legenda {
    margin: 0 0 8px;
    min-height: 20px;
    font-size: 13px;
    color: var(--neutro, #a79e8f);
}

/*
 * A área do gráfico: a coluna dos números e, ao lado, as barras.
 *
 * Os números ficam FORA do gráfico porque são até 90 barras numa linha
 * só. Cada pixel roubado some com uma barra.
 */
.desempenho-area {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.desempenho-escala {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    min-width: 26px;
    font-size: 11px;
    line-height: 1;
    color: var(--neutro, #a79e8f);
    /* Alinha o "0" com a base das barras, e o topo com a linha de cima. */
    padding-bottom: 2px;
}

/* As linhas de referência, atrás das barras. */
.desempenho-linha {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed rgba(244, 241, 234, 0.16);
    pointer-events: none;
}

/* O número do melhor dia, escrito logo acima da barra. */


/* A virada de mês, por cima das barras. */


/*
 * O eixo das colunas: uma data por coluna, nas mesmas proporções do
 * gráfico. É flex com os mesmos gaps, então cada data fica exatamente
 * sob a sua coluna. Posicionar por porcentagem desalinharia a cada
 * mudança de período.
 */
.desempenho-eixo-colunas {
    display: flex;
    gap: 2px;
    margin: 5px 0 0 34px;
    font-size: 10.5px;
    color: var(--neutro, #a79e8f);
}

.desempenho-eixo-colunas span {
    flex: 1 1 0;
    text-align: center;
    line-height: 1.25;
    /*
     * O intervalo quebra em DUAS LINHAS: "26/09", "a", "02/10". Numa
     * linha só, treze colunas num celular dariam menos de trinta pixels
     * cada, e a data sairia cortada no meio.
     */
    white-space: normal;
    word-break: keep-all;
}

/* O "a" do intervalo, discreto: ele separa, não informa. */
.desempenho-eixo-colunas b {
    display: block;
    font-weight: 400;
    font-size: 8.5px;
    opacity: 0.55;
}

/* O número escrito em cima da coluna. */
.desempenho-valor {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--creme, #f4f1ea);
    white-space: nowrap;
    pointer-events: none;
}

/* A barra escolhida, para a pessoa saber qual delas está lendo. */
.desempenho-dia.escolhido .desempenho-barra {
    background: var(--creme, #f4f1ea);
}

/* Virou <button>: tira o visual de botão e mantém a área de toque. */
button.desempenho-dia {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.desempenho-dia {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    cursor: default;
}

.desempenho-barra {
    width: 100%;
    min-height: 0;
    border-radius: 2px 2px 0 0;
    background: rgba(var(--tinta), 0.28);
    transition: background var(--transicao);
}

.desempenho-dia:hover .desempenho-barra { background: rgba(var(--tinta), 0.55); }

.desempenho-dia.com-contato .desempenho-barra { background: var(--dourado-fundo); }

.desempenho-dia.com-contato::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -2px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--dourado-fundo);
}

.desempenho-eixo {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--neutro-2);
}

/* Prazo de publicação perto do fim (ou vencido), no cartão do painel. */
.prazo-alerta { color: var(--dourado); }

.cartao-anuncio-acoes .botao-renovar { border-color: var(--dourado); color: var(--dourado); }
.cartao-anuncio-acoes .botao-renovar:hover { background: rgba(227, 166, 59, 0.1); color: var(--dourado); }

/* Barra fixa no rodapé, só no celular. */
.contato-barra { display: none; }

@media (max-width: 700px) {
    .contato-barra {
        position: fixed;
        z-index: 60;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        gap: 8px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--linha);
        background: rgba(var(--fundo-rgb), 0.94);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    .contato-barra > *,
    .contato-barra form { flex: 1 1 0; margin: 0; }

    .contato-barra .botao { width: 100%; justify-content: center; }

    /* Espaço no fim da página para a barra não cobrir o rodapé. */
    body:has(.contato-barra) { padding-bottom: 72px; }
}

/* ---------------------------------------------------------------- */
/* Etiqueta flutuante. O padrão de TODA identificação sobre foto     */
/*                                                                   */
/* Venda/Aluguel e Destaque no cartão, Capa nas fotos do cadastro.   */
/* Fundo escuro quase opaco, borda clara e bolinha de cor: se lê     */
/* igual sobre céu, parede branca ou foto noturna. As etiquetas      */
/* translúcidas de antes sumiam conforme o fundo da foto.            */
/* ---------------------------------------------------------------- */
.etiqueta-flutuante {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    border: 1px solid rgba(var(--tinta), 0.14);
    border-radius: var(--raio-pill);
    background: rgba(11, 10, 9, 0.8);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--creme);
    pointer-events: none;
}

.etiqueta-direita { left: auto; right: 10px; }

/* Etiquetas do cartão, lado a lado no canto esquerdo da foto. O
   limite à direita deixa livre o canto do coração dos favoritos; se
   não couberem numa linha, a segunda desce para baixo da primeira. */
.etiquetas-foto {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    right: 58px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}
.etiquetas-foto .etiqueta-flutuante { position: static; }

/* Em miniatura (grade de fotos do cadastro), um pouco menor. */
.etiqueta-pequena { top: 8px; left: 8px; padding: 5px 10px 5px 8px; font-size: 11.5px; }

/* Duas bolinhas lado a lado em "Venda ou aluguel": a segunda encosta
   na primeira, como um par. */
.etiqueta-cor {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.etiqueta-cor + .etiqueta-cor { margin-left: -3px; box-shadow: 0 0 0 1.5px rgba(11, 10, 9, 0.9); }

.etiqueta-cor-venda     { background: var(--dourado-fundo); }
.etiqueta-cor-aluguel   { background: #7FC4A4; }
.etiqueta-cor-temporada { background: var(--azul-admin); }
.etiqueta-cor-dourado   { background: var(--dourado-fundo); }

.cartao-corpo { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 4px; }

.cartao-precos { display: flex; flex-wrap: wrap; gap: 12px; }

.cartao-preco strong { font-size: 19px; letter-spacing: -0.02em; color: var(--creme); }
.cartao-preco .fraco { font-size: 12.5px; }

.cartao-titulo { font-size: 15px; font-weight: 600; line-height: 1.35; margin: 4px 0 0; letter-spacing: -0.01em; }
.cartao-titulo a { color: var(--creme-2); }
.cartao-titulo a:hover { color: var(--dourado); }

.cartao-onde, .cartao-numeros, .cartao-extra { margin: 0; font-size: 13.5px; }
.cartao-numeros { color: var(--neutro); }
.cartao-extra { font-size: 12.5px; }

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
}

/* ---------------------------------------------------------------- */
/* Lista de cidades                                                  */
/* ---------------------------------------------------------------- */
.lista-cidades {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
    gap: 2px 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lista-cidades a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    font-size: 14.5px;
    color: var(--creme-2);
    border-bottom: 1px solid transparent;
}

.lista-cidades a:hover { color: var(--dourado); border-bottom-color: var(--linha); }

.lista-cidade-total {
    font-family: var(--fonte-mono);
    font-size: 11.5px;
    color: var(--dourado);
}

/* ---------------------------------------------------------------- */
/* Outros imóveis da cidade                                          */
/* ---------------------------------------------------------------- */
.grade-parecidos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: 14px;
}

.parecido {
    display: block;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--superficie);
}

.parecido:hover { border-color: var(--linha-forte); }

.parecido img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--preto);
}

.parecido .sem-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
}

.parecido-corpo { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.parecido-corpo strong { font-size: 15px; color: var(--creme); }
.parecido-corpo .fraco { font-size: 12.5px; }

@media (max-width: 760px) {
    .filtros-linha { gap: 10px; }
    .filtro { flex: 1 1 100%; }
    .filtros-linha .botao { width: 100%; }
}

/* Larguras do filtro: cidade e tipo precisam de espaço para o nome
   inteiro; quartos e preço cabem em pouco. */
.filtro-largo   { flex: 2 1 210px; }
.filtro-estreito { flex: 0 1 130px; min-width: 110px; }

/* ---------------------------------------------------------------- */
/* Acompanhamento do desenvolvimento                                */
/* ---------------------------------------------------------------- */
.barra {
    display: block;
    height: 8px;
    border-radius: var(--raio-pill);
    background: var(--superficie-3);
    overflow: hidden;
}

.barra-cheia {
    display: block;
    height: 100%;
    border-radius: var(--raio-pill);
    background: var(--dourado-fundo);
}

/* Abas da página de desenvolvimento: um sistema por aba, cada uma com
   o progresso dela à vista. Dá para comparar sem trocar de aba. */
/* O que espera o Geraldo, no alto da página de desenvolvimento.
   Cada item é uma linha com divisória, e não um cartão: cartão pede
   grade, grade pede largura, e aqui o texto do porquê é longo de
   propósito. Quem lê precisa saber o motivo sem abrir outra coisa. */
/* Os tres sinais da Fraude, um bloco cada. A divisoria no topo separa
   sem precisar de caixa: caixa dentro de caixa (a secao tem paineis
   dentro) vira moldura sobre moldura. */
.fraude-sinal { margin-bottom: 30px; }

.fraude-sinal + .fraude-sinal {
    border-top: 1px solid var(--linha);
    padding-top: 22px;
}

.fraude-sinal-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-bottom: 6px;
}

.fraude-sinal-cabeca h2 { font-size: 19px; margin: 0; }
.fraude-sinal-explica { font-size: 14.5px; line-height: 1.65; max-width: 80ch; margin: 0 0 14px; }

.validar-item {
    padding: 12px 0;
    border-top: 1px solid var(--linha);
}

.validar-item:first-of-type { border-top: 0; padding-top: 0; }

.validar-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 4px;
}

.validar-topo strong { font-size: 15.5px; color: var(--creme-2); }
.validar-topo .fraco { font-size: 13px; }
.validar-item p { font-size: 14px; line-height: 1.6; margin: 0; max-width: 82ch; }

.abas-sistema {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.aba-sistema {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    background: var(--superficie);
    color: var(--neutro);
    text-decoration: none;
    transition: border-color var(--transicao), background var(--transicao);
}

.aba-sistema strong { font-size: 16px; color: var(--creme-2); }
.aba-sistema span { font-size: 13px; }
.aba-sistema:hover { border-color: var(--linha-forte); }

.aba-sistema.ativa {
    border-color: var(--dourado);
    background: rgba(227, 166, 59, 0.07);
}

.aba-sistema.ativa strong { color: var(--dourado); }

.visao-gestao { margin-bottom: 20px; }

.visao-gestao-premissas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 12px;
}

.visao-gestao-premissas > div {
    padding: 14px 16px;
    border: 1px solid var(--linha);
    border-left: 3px solid var(--dourado);
    border-radius: var(--raio);
    background: rgba(var(--tinta), 0.025);
}

.visao-gestao-premissas strong { display: block; margin-bottom: 5px; font-size: 14.5px; color: var(--creme); }
.visao-gestao-premissas p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--neutro); }

.camada { margin-bottom: 14px; }

/* O topo da camada virou <summary> em 27/09/2026, quando as camadas
   fechadas passaram a abrir recolhidas. O marcador padrão do navegador
   sai: a seta nativa fica fora de lugar num cabeçalho com bolinha,
   título e selo, e cada navegador desenha a sua. */
.camada-topo {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    list-style: none;
}

.camada-topo::-webkit-details-marker { display: none; }

/* Só a camada recolhível é clicável. A que está em andamento abre
   aberta e não recolhe. O cursor de mão ali prometeria uma coisa que
   não acontece. */
.camada-recolhivel > .camada-topo { cursor: pointer; }
.camada-recolhivel > .camada-topo:hover .camada-abrir { color: var(--dourado); border-color: var(--dourado); }

.camada-abrir {
    align-self: center;
    padding: 3px 10px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-pill);
    font-size: 12px;
    color: var(--neutro);
    white-space: nowrap;
    transition: color var(--transicao), border-color var(--transicao);
}

.camada-abrir::after {
    content: " ▾";
    font-size: 10px;
}

.camada-recolhivel[open] .camada-abrir::after { content: " ▴"; }

/* Quando o número é de PENDÊNCIA, e não de item pronto, ele ganha a
   cor de quem chama atenção: é o que a pessoa está procurando com a
   página toda recolhida. */
.camada-abrir-falta { color: var(--dourado); border-color: rgba(227, 166, 59, 0.4); }
.camada-recolhivel[open] > .camada-topo { margin-bottom: 4px; }


/* As versões do aplicativo usam o mesmo desenho das camadas: mesma
   bolinha, mesmo selo. São duas listas da mesma página e não deviam
   parecer dois sistemas diferentes. */
.versao-app { margin-bottom: 12px; }
.versao-app-topo {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.camada-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Largura mínima, e não fixa: "G12" não cabe num círculo de 34px e
       vira pílula; os números do portal continuam redondos. */
    min-width: 34px;
    height: 34px;
    padding: 0 7px;
    border-radius: var(--raio-pill);
    background: var(--superficie-3);
    font-family: var(--fonte-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--neutro);
}

/* Concluída ganha o número verde; em andamento, dourado. O resto fica
   apagado, para a leitura de cima a baixo mostrar onde o trabalho está. */
.camada-concluida .camada-numero,
.camada-validada .camada-numero { background: var(--sucesso-fundo); color: var(--sobre-cor); }

.camada-andamento .camada-numero,
.camada-parcial .camada-numero { background: var(--dourado-fundo); color: var(--sobre-cor); }

.camada-listas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 18px 28px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--linha);
}

.lista-feito, .lista-falta {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.55;
}

.lista-feito li, .lista-falta li {
    position: relative;
    padding: 4px 0 4px 20px;
    color: var(--creme-2);
}

.lista-feito li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--sucesso);
    font-size: 13px;
}

.lista-falta li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--linha-forte);
}

.lista-falta li { color: var(--neutro); }

/* ---------------------------------------------------------------- */
/* Filtros finos                                                     */
/*                                                                   */
/* Fechados por padrão: a primeira linha resolve a maioria das        */
/* buscas, e uma parede de caixinhas logo na abertura afasta quem só  */
/* quer ver casa de três quartos.                                    */
/* ---------------------------------------------------------------- */
.filtros-mais { margin-top: 14px; border-top: 1px solid var(--linha-suave); padding-top: 12px; }

.filtros-mais > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--creme-2);
    list-style: none;
    padding: 4px 0;
}

.filtros-mais > summary::-webkit-details-marker { display: none; }

/* O triângulo é desenhado à mão para girar junto com a abertura. */
.filtros-mais > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform var(--transicao);
}

.filtros-mais[open] > summary::before { transform: rotate(90deg); }
.filtros-mais > summary:hover { color: var(--dourado); }

.filtros-marca {
    min-width: 19px;
    padding: 1px 6px;
    border-radius: var(--raio-pill);
    background: var(--dourado-fundo);
    color: var(--sobre-cor);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}

.filtros-mais .grupo-caracteristicas { margin-top: 18px; }

.filtros-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

/* ---------------------------------------------------------------- */
/* Etiquetas do que está filtrado                                    */
/*                                                                   */
/* Repetem fora do <details> o que foi marcado dentro dele: com o     */
/* bloco fechado, nada indicaria que a lista está sendo cortada.     */
/* ---------------------------------------------------------------- */
.marcados {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -6px 0 18px;
}

.marcado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid var(--dourado);
    border-radius: var(--raio-pill);
    background: rgba(227, 166, 59, 0.10);
    color: var(--dourado);
    font-size: 13px;
    font-weight: 600;
}

.marcado span { font-size: 15px; line-height: 1; opacity: 0.75; }
.marcado:hover { background: rgba(227, 166, 59, 0.20); }

@media (max-width: 620px) {
    .filtros-acoes .botao { width: 100%; }
}

/* ---------------------------------------------------------------- */
/* Lista ou mapa                                                     */
/* ---------------------------------------------------------------- */
.ver-como {
    display: inline-flex;
    border: 1px solid var(--linha);
    border-radius: var(--raio-pill);
    padding: 3px;
    gap: 2px;
}

.ver-como-botao {
    padding: 6px 16px;
    border: 0;
    border-radius: var(--raio-pill);
    background: none;
    color: var(--neutro);
    font-family: var(--fonte);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}

.ver-como-botao:hover { color: var(--creme-2); }

.ver-como-botao.ativo {
    background: var(--dourado-fundo);
    color: var(--sobre-cor);
}

.mapa-busca { margin-bottom: 20px; }

.mapa-tela {
    position: relative;
    /* O Leaflet põe as camadas com z-index 400 a 1000. Sem isolar, elas
       disputavam com a página inteira e o mapa passava por cima do topo
       fixo e do menu da conta. Isolado, tudo fica preso dentro do mapa. */
    isolation: isolate;
    z-index: 0;
    height: min(70vh, 560px);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    background: var(--superficie);
    overflow: hidden;
}

.mapa-recado { margin-top: 10px; font-size: 13.5px; }
.mapa-recado:empty { display: none; }

/* Aviso no meio do mapa quando a busca não tem ponto nenhum. Acima da
   sombra das bordas (450) e das imagens; não recebe clique, para o
   mapa continuar arrastável por baixo dele. */
.mapa-aviso {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: none;
}

.mapa-aviso-caixa {
    max-width: 440px;
    padding: 20px 22px;
    border: 1px solid rgba(227, 166, 59, 0.45);
    border-radius: var(--raio-g);
    background: rgba(var(--fundo-rgb), 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--sombra-g);
    text-align: center;
    font-family: var(--fonte);
}

.mapa-aviso-caixa strong {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    color: var(--dourado);
}

.mapa-aviso-caixa p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--creme-2);
}

/* O Leaflet chega com tema claro; estes ajustes o encaixam no site. */
.mapa-tela .leaflet-container,
.mapa-tela.leaflet-container { background: var(--superficie); font-family: var(--fonte); }

/* Mesmo tratamento do mapa das cidades visitadas no aukage.com.br:
   o filtro vai SÓ nas imagens do mapa: aplicado no mapa inteiro, ele
   apagaria também os círculos dourados e os balões. */
.mapa-tela .leaflet-tile-pane { filter: grayscale(1) brightness(0.66) contrast(1.04); }

/* Sombra nas bordas, como lá: puxa o olho para o meio do mapa. Fica
   acima das imagens e dos círculos (400), abaixo dos balões (700) e
   dos botões (800), e não recebe clique. */
.mapa-tela::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 450;
    pointer-events: none;
    box-shadow: inset 0 0 90px 30px rgba(10, 9, 8, 0.5);
}

.mapa-tela .leaflet-popup-content-wrapper,
.mapa-tela .leaflet-popup-tip {
    background: var(--superficie-2);
    color: var(--creme);
    border: 1px solid var(--linha-forte);
    box-shadow: var(--sombra-g);
}

.mapa-tela .leaflet-popup-content { margin: 0; width: auto !important; }
.mapa-tela .leaflet-container a.leaflet-popup-close-button { color: var(--neutro); }

/* !important porque o leaflet.css é carregado depois deste arquivo,
   só quando o mapa abre, e com o mesmo peso de seletor ele vencia:
   a faixa de créditos ficava branca no canto do mapa escuro. */
.mapa-tela .leaflet-control-attribution {
    background: rgba(var(--fundo-rgb), 0.7) !important;
    color: var(--neutro) !important;
    font-size: 10px !important;
}

.mapa-tela .leaflet-control-attribution a { color: var(--creme-3) !important; }

.mapa-tela .leaflet-bar a {
    background: var(--superficie-2);
    color: var(--creme);
    border-bottom-color: var(--linha);
}

.mapa-tela .leaflet-bar a:hover { background: var(--superficie-3); color: var(--dourado); }

/* Balão de um imóvel dentro do mapa */
.balao {
    display: block;
    width: 210px;
    padding: 10px 12px 12px;
    color: var(--creme);
}

.balao-foto {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: var(--raio);
    margin: -2px 0 9px;
}

/* ------------------------------------------------------------------ */
/* A etiqueta do imóvel no mapa                                        */
/*                                                                      */
/* A mesma do aplicativo: pílula escura com a bolinha do negócio, o     */
/* tipo e o preço curto. Antes eram círculos dourados idênticos, e      */
/* saber o que era cada ponto exigia clicar um a um: o preço, que é o  */
/* primeiro filtro de quem procura imóvel, ficava escondido.            */
/* ------------------------------------------------------------------ */
.alfinete-imovel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 8px;
    border-radius: var(--raio-pill);
    border: 1.5px solid rgba(244, 241, 234, .25);
    background: #151310;
    color: var(--creme, #F4F1EA);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
    /* O Leaflet põe o ícone pelo canto; a etiqueta cresce com o texto,
       então ela mesma se centraliza sobre o ponto. */
    transform: translate(-50%, -50%);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.alfinete-imovel:hover,
.leaflet-marker-icon:focus-visible .alfinete-imovel {
    border-color: var(--dourado);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .6);
}
/* Ponto aproximado (bairro ou centro da cidade): borda tracejada, para
   não prometer precisão que não existe. */
.alfinete-aproximado { opacity: .88; border-style: dashed; }
.alfinete-imovel small { font-weight: 600; color: #D3CCBF; }

.alfinete-bolinha {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: var(--neutro);
}
/* As cores do negócio, iguais às do aplicativo e às das abas. */
.alfinete-venda     { background: #6FBF73; }
.alfinete-aluguel   { background: #6FA8DC; }
.alfinete-temporada { background: #E3A63B; }

/* Enquanto os pontos do outro negócio não chegam. Discreto de
   propósito: a troca é rápida, e uma tela piscando a cada toque cansa
   mais do que informa. */
.mapa-trocando { opacity: .72; transition: opacity .15s ease; }
.mapa-trocando .negocios { pointer-events: none; }

/* As abas de negócio, dentro do mapa: filtro e legenda das cores. */
.negocios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}
.negocio {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pill);
    background: var(--superficie);
    color: var(--creme-2);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.negocio:hover { border-color: var(--dourado); color: var(--creme); }
.negocio.ativo {
    background: var(--dourado);
    border-color: var(--dourado);
    color: var(--sobre-cor);
}
/* Na aba aberta a bolinha ficaria em cima do dourado e sumiria: ela
   ganha um anel escuro para continuar legível. */
.negocio.ativo .alfinete-bolinha { box-shadow: 0 0 0 1.5px rgba(11, 10, 9, .55); }

.balao-negocio {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--neutro);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.balao-negocio .alfinete-bolinha { width: 8px; height: 8px; }

.balao-preco { display: block; color: var(--dourado); font-size: 16px; }
.balao-titulo { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.35; }
.balao-onde,
.balao-ficha { display: block; margin-top: 3px; color: var(--neutro); font-size: 12px; }

.balao-aviso {
    display: block;
    margin-top: 7px;
    color: var(--neutro-2);
    font-size: 11px;
    font-style: italic;
}

.balao:hover .balao-titulo { color: var(--dourado); }

/* ---------------------------------------------------------------- */
/* Imobiliárias                                                      */
/* ---------------------------------------------------------------- */
.grade-imobiliarias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 14px;
    margin-top: 30px;
}

.cartao-imobiliaria {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    background: var(--superficie);
    color: var(--creme);
    transition: border-color var(--transicao), background var(--transicao);
}

.cartao-imobiliaria:hover { border-color: var(--linha-forte); background: var(--superficie-2); }
.cartao-imobiliaria:hover strong { color: var(--dourado); }

.imobiliaria-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.imobiliaria-corpo strong { font-size: 15.5px; transition: color var(--transicao); }
.imobiliaria-corpo .fraco { font-size: 12.5px; }

/* O quadro da logo tem tamanho fixo: logos chegam em toda proporção,
   e sem isto cada cartão da grade teria uma altura diferente. */
.imobiliaria-marca {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie-2);
    overflow: hidden;
}

.imobiliaria-marca img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.imobiliaria-marca-g { width: 88px; height: 88px; border-radius: var(--raio-g); }

/* Só a logo para fundo claro: ela entra num quadro claro, senão uma
   marca de letra escura sumiria no site escuro. */
.imobiliaria-marca-clara { background: #F4F1EA; border-color: rgba(20, 17, 12, 0.18); }

.imobiliaria-inicial {
    font-family: var(--fonte-serif);
    font-size: 26px;
    font-style: italic;
    color: var(--dourado);
}

.imobiliaria-marca-g .imobiliaria-inicial { font-size: 40px; }

.imobiliaria-cabeca {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    margin-top: 18px;
}

.selo-verificada {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--raio-pill);
    background: rgba(111, 191, 115, 0.14);
    color: var(--sucesso);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 620px) {
    .imobiliaria-cabeca { flex-direction: column; gap: 14px; }
}

/* ---------------------------------------------------------------- */
/* Gerador de story                                                  */
/* ---------------------------------------------------------------- */
.publicidade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 26px;
    align-items: start;
    margin-top: 26px;
}

.publicidade fieldset { border: 1px solid var(--linha); }
.publicidade legend { color: var(--dourado); }

/* A prévia acompanha a rolagem: mexer nas fotas lá embaixo sem ver o
   resultado obrigaria a subir a cada clique. */
.publicidade-previa { position: sticky; top: calc(var(--altura-topo) + 20px); }

.previa-moldura {
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    background: var(--preto);
    padding: 10px;
    box-shadow: var(--sombra-g);
}

.previa-moldura canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.publicidade-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.publicidade-acoes .botao { flex: 1 1 auto; justify-content: center; }

/* ---- Escolha do modelo ---- */
.modelos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(148px, 100%), 1fr));
    gap: 7px;
}

/* Cartão deitado, e não em coluna.
   Dez cartões altos empurravam as etapas de fotos e contato para fora
   da tela: o anunciante rolava meia página antes de escolher a primeira
   foto. Deitado, a mesma lista cabe em três fileiras curtas. */
.modelo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie-2);
    cursor: pointer;
    transition: border-color var(--transicao), background var(--transicao);
}

.modelo-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.modelo:hover { border-color: var(--linha-forte); }
.modelo input { position: absolute; opacity: 0; pointer-events: none; }
.modelo strong { font-size: 14.5px; }
.modelo .fraco { font-size: 12px; line-height: 1.35; }

.modelo-ativo,
.modelo:has(input:checked) {
    border-color: var(--dourado);
    background: rgba(227, 166, 59, 0.10);
}

.modelo-ativo strong,
.modelo:has(input:checked) strong { color: var(--dourado); }

.modelo-bloqueado { opacity: 0.45; cursor: not-allowed; }
.modelo-bloqueado:hover { border-color: var(--linha); }


/* A miniatura do arranjo.
   Os blocos são posicionados pelo JavaScript, com as mesmas medidas que
   a arte usa, por isso aqui só existe o palco, sem nenhum layout. */
.modelo-figura {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 40px;
    aspect-ratio: 9 / 16;
    border: 1px solid var(--linha);
    border-radius: 3px;
    background: var(--preto);
    overflow: hidden;
}

/* A borda preta em cada bloco é o que mantém o vão visível.
   Na arte o vão entre fotos tem 6 px de 1080. Reduzido a 40 px de
   largura ele viraria um quinto de pixel e sumiria, colando os blocos
   num borrão só. */
.modelo-figura span {
    position: absolute;
    background: var(--linha-forte);
    border: 1px solid var(--preto);
}

.modelo-ativo .modelo-figura span,
.modelo:has(input:checked) .modelo-figura span { background: var(--dourado-fundo-escuro); }

/* Nos modelos de tela cheia o texto fica SOBRE a foto: a miniatura
   mostra isso com um véu na parte de baixo, como na arte. */
.figura-cheia::after {
    content: "";
    position: absolute;
    inset: 44% 0 0;
    background: linear-gradient(180deg, rgba(11, 10, 9, 0), rgba(11, 10, 9, 0.92) 62%);
}

/* Nos demais, o corte fica visível: abaixo dele é a faixa de texto. */
.modelo-figura:not(.figura-cheia)::after {
    content: "";
    position: absolute;
    inset: 56.25% 0 0;
    background: var(--preto);
}

/* ---- Escolha das fotos ---- */
.escolha-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr));
    gap: 8px;
}

.escolha-foto {
    position: relative;
    display: block;
    padding: 0;
    border: 2px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie-2);
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    transition: border-color var(--transicao);
}

.escolha-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.escolha-foto:hover { border-color: var(--linha-forte); }
.escolha-foto.escolhida { border-color: var(--dourado); }
.escolha-foto:not(.escolhida) img { opacity: 0.55; }

/* O número diz a ORDEM, não só que está marcada: é ela que decide qual
   foto vai para o lugar grande do arranjo. */
.escolha-ordem {
    position: absolute;
    top: 5px;
    left: 5px;
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: var(--raio-pill);
    background: var(--dourado-fundo);
    color: var(--sobre-cor);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.escolha-foto:not(.escolhida) .escolha-ordem { display: none; }

@media (max-width: 900px) {
    .publicidade { grid-template-columns: 1fr; }
    .publicidade-previa { position: static; max-width: 320px; margin: 0 auto; }
}

/* Chamada de divulgação dentro do anúncio publicado. */
.painel-divulgar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    margin: 20px 0;
    border-color: rgba(227, 166, 59, 0.34);
    background: linear-gradient(180deg, rgba(227, 166, 59, 0.09), rgba(227, 166, 59, 0.02));
}

.painel-divulgar .botao { flex: 0 0 auto; }

@media (max-width: 620px) {
    .painel-divulgar .botao { width: 100%; justify-content: center; }
}

/* No cartão deitado ficam só o nome e a etiqueta. A descrição do
   modelo escolhido aparece numa linha só, abaixo da lista. */
.modelo strong {
    font-size: 13.5px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modelo-conta {
    align-self: flex-start;
    padding: 1px 6px;
    border-radius: var(--raio-pill);
    background: rgba(var(--tinta), 0.08);
    color: var(--neutro);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.modelo-conta-falta { background: rgba(227, 166, 59, 0.14); color: var(--aviso); }

.modelo-ativo .modelo-conta,
.modelo:has(input:checked) .modelo-conta {
    background: rgba(227, 166, 59, 0.18);
    color: var(--dourado);
}

.modelo-explica {
    margin: 11px 0 0;
    font-size: 12.5px;
    color: var(--neutro);
    min-height: 1.2em;
}

/* As caixas do "o que aparece" em duas colunas: quatro delas empilhadas
   devolveriam à etapa 3 a altura que a etapa 1 acabou de perder. */
.opcoes-arte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 2px 18px;
}

/* Descrição do modelo à esquerda, escolha de fundo à direita: os dois
   na mesma linha não custam altura nenhuma. */
.modelo-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 11px;
}

.modelo-rodape .modelo-explica { margin: 0; }
.modelo-rodape .ver-como { flex: 0 0 auto; }
.modelo-rodape .ver-como-botao { padding: 5px 13px; font-size: 12.5px; }

/* Com a arte clara, a moldura da prévia clareia junto: fundo preto sob
   uma peça clara faria a arte parecer mais contrastada do que vai sair. */
.arte-clara .previa-moldura { background: #E6E0D4; border-color: rgba(20, 17, 12, 0.18); }

/* ---------------------------------------------------------------- */
/* Visão geral do painel                                             */
/* ---------------------------------------------------------------- */
.painel-saudacao {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

/* Grade só para os números. A grade de conteúdo pede 300px por coluna
   e, dentro do painel, que já perde largura para o menu lateral,
   três cartões viravam duas fileiras. */
.grade-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.grade-numeros .painel { padding: 16px 18px; }
.grade-numeros .numero-grande { font-size: 30px; margin-bottom: 5px; }
.grade-numeros .rotulo { font-size: 10.5px; }

.painel-proximo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

.painel-proximo .botao { flex: 0 0 auto; }

@media (max-width: 620px) {
    .painel-proximo .botao { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- */
/* Minha imobiliária                                                 */
/* ---------------------------------------------------------------- */
.logo-campo {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Fundo claro atrás da logo: é como ela aparece na arte de divulgação,
   e a maioria das logomarcas é desenhada para fundo claro. */
.logo-campo .imobiliaria-marca { background: #F4F1EA; }
.logo-campo .imobiliaria-inicial { color: var(--neutro-2); }

.equipe {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    overflow: hidden;
}

.equipe-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    background: var(--superficie-2);
}

.equipe-linha + .equipe-linha { border-top: 1px solid var(--linha); }
.equipe-linha form { margin: 0; }

.equipe-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.equipe-quem strong { font-size: 14.5px; }

.equipe-quem .fraco {
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.equipe-papel { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* Convidado que ainda não entrou: a linha fica mais apagada que a de
   quem já é da equipe, e as duas ações lado a lado. */
.equipe-convidado { background: transparent; border-style: dashed; }
.equipe-convidado .equipe-quem strong { color: var(--neutro); font-weight: 600; }
.equipe-acoes-convite { display: flex; gap: 6px; flex-wrap: wrap; }

/* Página do link do convite. */
.convite-acoes { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- */
/* Denúncias                                                          */
/* ---------------------------------------------------------------- */
.denunciar { margin-top: 18px; }

.denunciar summary {
    display: inline-block;
    cursor: pointer;
    font-size: 13px;
    color: var(--neutro-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.denunciar summary:hover { color: var(--neutro); }
.denunciar-form { margin-top: 12px; max-width: 560px; }

/* Isca de robô: fora da tela, invisível para quem usa leitor de tela. */
.isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.denuncia-grupo { margin-bottom: 16px; }

.denuncia-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.denuncia-links { display: flex; gap: 6px; flex-wrap: wrap; }

.denuncia-lista {
    margin: 14px 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--linha);
}

.denuncia-lista li { padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.denuncia-lista p { margin: 6px 0 4px; color: var(--creme-2); line-height: 1.5; }

.denuncia-decidir { display: flex; flex-direction: column; gap: 10px; }
.denuncia-botoes { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- */
/* Relatórios e auditoria (admin)                                     */
/* ---------------------------------------------------------------- */
.relatorio-duas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.auditoria-filtros {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.auditoria-tabela td { vertical-align: top; font-size: 13.5px; }
.auditoria-quando { white-space: nowrap; font-variant-numeric: tabular-nums; }
.auditoria-detalhes { max-width: 380px; color: var(--neutro); font-size: 12.5px; line-height: 1.45; }
.auditoria-detalhes div + div { margin-top: 2px; }

.equipe-convite {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

@media (max-width: 620px) {
    .equipe-linha { grid-template-columns: 1fr; }
    .equipe-papel { flex-direction: row; align-items: center; }
    .equipe-convite .botao { width: 100%; justify-content: center; }
}

/* Filtros da carteira: a mesma barra da busca pública, mais baixa. 
   no painel ela é ferramenta, não vitrine. */
.filtros-carteira { margin: 22px 0 0; padding: 14px 16px; }
.filtros-carteira .filtros-acoes { margin-top: 12px; }

/* ---------------------------------------------------------------- */
/* Confirmação                                                       */
/*                                                                   */
/* No centro da tela, perto de onde o olho já está, e não colada no  */
/* topo da janela, como o confirm() do navegador desenhava.          */
/* ---------------------------------------------------------------- */
.confirmacao {
    width: min(440px, calc(100vw - 32px));
    padding: 26px 26px 22px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-g);
    background: var(--superficie);
    color: var(--creme);
    box-shadow: var(--sombra-g);
}

.confirmacao::backdrop { background: rgba(6, 5, 4, 0.72); }

.confirmacao-texto {
    margin: 0 0 22px;
    font-size: 15.5px;
    line-height: 1.6;
}

.confirmacao-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* Ação destrutiva confirmada em vermelho cheio: é o único lugar do
   sistema onde o vermelho aparece sólido, justamente para marcar o
   ponto sem volta. */
.botao-perigo-cheio,
.botao-perigo-cheio:hover {
    background: var(--erro);
    border-color: var(--erro);
    color: #fff;
}

.botao-perigo-cheio:hover { filter: brightness(1.08); }

@media (max-width: 480px) {
    .confirmacao-acoes .botao { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------------------------- */
/* Caixa suspensa do "Mais filtros"                                  */
/*                                                                   */
/* Corpo com rolagem própria e rodapé fixo: por mais características  */
/* que existam, o "Aplicar filtros" está sempre à vista.             */
/* ---------------------------------------------------------------- */
.filtros-painel {
    width: min(760px, calc(100vw - 24px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-g);
    background: var(--superficie);
    color: var(--creme);
    box-shadow: var(--sombra-g);
    overflow: hidden;
}

.filtros-painel[open] { display: flex; flex-direction: column; }
.filtros-painel::backdrop { background: rgba(6, 5, 4, 0.72); }

.filtros-painel-topo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--linha);
}

.filtros-painel-topo strong { font-size: 17px; }

.filtros-painel-fechar {
    width: 36px;
    height: 36px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-pill);
    background: none;
    color: var(--creme-2);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.filtros-painel-fechar:hover { border-color: var(--linha-forte); color: var(--dourado); }

.filtros-painel .filtros-mais-corpo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 22px 0;
}

.filtros-painel-rodape {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: auto -22px 0;
    padding: 14px 22px;
    border-top: 1px solid var(--linha);
    background: var(--superficie);
}

/* No celular a caixa vira folha de baixo para cima, largura toda. */
@media (max-width: 620px) {
    .filtros-painel {
        width: 100vw;
        max-width: 100vw;
        max-height: 88vh;
        /* Laterais em auto, não em 0: alguns navegadores limitam a
           largura da caixa por conta própria, e com margem 0 ela colava
           na esquerda com um vão só do lado direito. */
        margin: auto auto 0;
        border-radius: var(--raio-g) var(--raio-g) 0 0;
    }

    .filtros-painel-rodape .botao { flex: 1 1 auto; justify-content: center; }
}

/* Dentro da caixa os grupos ficam fora do .filtros-mais, e perderiam o
   respiro que tinham lá: sem isto "No imóvel" cola nos campos de cima. */
.filtros-painel .grupo-caracteristicas { margin-top: 18px; }

/* ---------------------------------------------------------------- */
/* Barra de busca numa linha só                                      */
/*                                                                   */
/* Cidade, negócio e tipo ficam à vista; o resto mora no "Mais        */
/* filtros". Com a barra baixa, os anúncios começam logo abaixo dela  */
/* em vez de depois de uma parede de campos.                         */
/* ---------------------------------------------------------------- */
.filtros-linha-principal .filtros-mais {
    margin: 0;
    padding: 0;
    border: 0;
    flex: 0 0 auto;
}

/* O "Mais filtros" com cara de botão, do tamanho do "Filtrar" ao lado. */
.filtros-linha-principal .filtros-mais > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--creme);
    background: transparent;
    transition: border-color var(--transicao), background var(--transicao);
}

.filtros-linha-principal .filtros-mais > summary::before { display: none; }

.filtros-linha-principal .filtros-mais > summary:hover {
    border-color: rgba(var(--tinta), 0.55);
    background: rgba(var(--tinta), 0.05);
    color: var(--creme);
}

/* Sem JavaScript o <details> abre no lugar: aí ele ocupa uma linha
   inteira, em vez de espremer os campos dentro da barra. */
.filtros-linha-principal .filtros-mais[open] { flex-basis: 100%; }

@media (max-width: 760px) {
    .filtros-linha-principal .filtros-mais,
    .filtros-linha-principal .filtros-mais > summary { width: 100%; justify-content: center; }
}

/* Botões da barra com a mesma altura dos campos (49 px): com o respiro
   padrão eles ficavam 4 px mais baixos, e o topo desalinhava ao lado
   das caixas de seleção. */
.filtros-linha-principal .botao,
.filtros-linha-principal .filtros-mais > summary {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* "Ver imóveis perto de mim": um link com ícone logo abaixo do título,
   discreto: é atalho, não a ação principal da página. */
.perto-de-mim {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: -2px 0 18px;
}

.perto-botao {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dourado);
    font-family: var(--fonte);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
}

.perto-botao:hover { color: var(--dourado-claro); text-decoration: underline; }
.perto-botao:disabled { opacity: 0.6; cursor: progress; text-decoration: none; }
.perto-recado { font-size: 13.5px; }

/* ---------------------------------------------------------------- */
/* Topo: sino e conta, lado a lado na ponta direita                  */
/* ---------------------------------------------------------------- */
.topo-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    order: 3;
}

/* O "Entrar" ocupa o lugar do menu da conta: mesma função, mesmo canto.
   A setinha entrando na porta diz o que o texto diz, para quem lê o
   ícone antes da palavra. */
.topo-entrar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.topo-entrar.ativo {
    border-color: var(--dourado);
    color: var(--dourado);
}
/* Na tela estreita fica só a setinha: o canto direito é disputado pelo
   tema e pelo botão do menu, e a porta já se explica. */
@media (max-width: 480px) {
    .topo-entrar { padding-left: 10px; padding-right: 10px; }
    .topo-entrar span { display: none; }
}

.suspenso > summary { list-style: none; }
.suspenso > summary::-webkit-details-marker { display: none; }

.conta { position: relative; }

.conta-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px 0 4px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pill);
    color: var(--creme);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transicao);
}
.conta-botao:hover,
.conta[open] .conta-botao { background: rgba(var(--tinta), 0.08); }

.conta-seta {
    color: var(--neutro);
    transition: transform var(--transicao);
}
.conta[open] .conta-seta { transform: rotate(180deg); }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--superficie-3);
    color: var(--dourado);
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
}
.avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-pequeno { width: 30px; height: 30px; font-size: 12px; }
.avatar-medio   { width: 52px; height: 52px; font-size: 18px; }
.avatar-grande  { width: 112px; height: 112px; font-size: 36px; }

.conta-painel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 70;
    width: 290px;
    padding: 10px;
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    box-shadow: var(--sombra-painel);
}

.conta-cabeca {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--linha);
}

.conta-foto { position: relative; flex-shrink: 0; }

.conta-foto-camera,
.foto-perfil-camera {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--dourado-fundo);
    color: var(--sobre-cor);
    box-shadow: 0 0 0 2px var(--superficie);
}

.conta-quem { display: grid; gap: 2px; min-width: 0; }
.conta-quem strong { font-size: 15px; color: var(--creme); }
.conta-quem span {
    font-size: 12.5px;
    color: var(--neutro);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conta-grupo { padding: 6px 0; }
.conta-grupo + .conta-grupo { border-top: 1px solid var(--linha); }

.conta-grupo-titulo {
    display: block;
    padding: 6px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dourado);
}
.conta-grupo-admin .conta-grupo-titulo { color: var(--azul-admin); }

.conta-painel .painel-menu a { padding: 9px 12px; font-size: 14px; }

.conta-sair {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--linha);
}
.conta-sair button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--raio);
    color: var(--neutro);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.conta-sair button:hover { background: var(--superficie-2); color: var(--erro); }

/* Foto do perfil em Meus dados */
.foto-perfil { margin-bottom: 26px; }
.foto-perfil-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
}
.foto-perfil-alvo {
    position: relative;
    display: inline-flex;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow var(--transicao), opacity var(--transicao);
}
.foto-perfil-alvo:hover,
.foto-perfil-alvo.arrastando { box-shadow: 0 0 0 3px var(--dourado); }
.foto-perfil-alvo .foto-perfil-camera { width: 32px; height: 32px; right: 2px; bottom: 2px; }
.foto-enviando .foto-perfil-alvo { opacity: .6; pointer-events: none; }
.foto-perfil-texto { display: grid; gap: 6px; flex: 1; min-width: 220px; }
.foto-perfil-texto strong { font-size: 16px; }
.foto-perfil-texto .fraco { font-size: 14px; line-height: 1.55; }
.foto-perfil-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Foto opcional no cadastro */
.foto-cadastro-alvo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio);
    cursor: pointer;
    transition: border-color var(--transicao);
}
.foto-cadastro-alvo:hover { border-color: var(--dourado); }
.foto-cadastro-alvo .avatar { color: var(--neutro); }
.foto-cadastro-texto { display: grid; gap: 2px; }

@media (max-width: 760px) {
    /* No celular sino e conta ficam antes do botão do menu, à direita,
       e os painéis ocupam a largura da tela logo abaixo do topo. */
    .topo-interno { gap: 14px; }
    .topo-acoes { order: 0; margin-left: auto; gap: 8px; }
    .topo-acoes ~ .menu-abrir { margin-left: 0; }

    .conta-nome { display: none; }
    .conta-botao { padding: 0 8px 0 4px; }

    .sino-painel,
    .conta-painel {
        position: fixed;
        top: calc(var(--altura-topo) + 6px);
        left: 12px;
        right: 12px;
        width: auto;
    }
}

/* ---------------------------------------------------------------- */
/* Menu da conta compacto                                            */
/* ---------------------------------------------------------------- */
/* Uma coluna só: os dois grupos viraram um quando o trabalho da equipe */
/* mudou para a Central. Se não couber na tela, o próprio menu rola.    */
.conta-painel {
    display: grid;
    grid-template-columns: minmax(min(240px, 100%), 1fr);
    column-gap: 4px;
    width: max-content;
    max-width: calc(100vw - 24px);
    padding: 8px;
    max-height: calc(100vh - var(--altura-topo) - 24px);
    max-height: calc(100dvh - var(--altura-topo) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--linha-forte) transparent;
}

.conta-cabeca,
.conta-sair { grid-column: 1 / -1; }

.conta-cabeca {
    gap: 10px;
    padding: 4px 6px 10px;
    margin-bottom: 2px;
}
.conta-cabeca .avatar-medio { width: 44px; height: 44px; font-size: 16px; }
.conta-quem strong { font-size: 14.5px; }

.conta-grupo { padding: 4px 0; }
.conta-grupo + .conta-grupo {
    border-top: 0;
    border-left: 1px solid var(--linha);
    padding-left: 4px;
}

.conta-grupo-titulo { padding: 6px 10px 3px; font-size: 10.5px; }

.conta-painel .painel-menu { gap: 0; }
.conta-painel .painel-menu a {
    padding: 7px 10px;
    font-size: 13.5px;
}

.conta-sair { margin-top: 2px; padding-top: 4px; }
.conta-sair button { padding: 8px 10px; font-size: 13.5px; }

@media (max-width: 760px) {
    .conta-painel {
        grid-template-columns: 1fr;
        width: auto;
        max-height: calc(100vh - var(--altura-topo) - 18px);
        max-height: calc(100dvh - var(--altura-topo) - 18px);
    }

    .conta-grupo + .conta-grupo {
        border-left: 0;
        border-top: 1px solid var(--linha);
        padding-left: 0;
    }

    /* O menu da CONTA volta a ser uma coluna aqui (30/09/2026).
       Ele compartilha a classe .painel-menu com o menu da esquerda, e
       por isso vinha herdando a regra que transforma AQUELE em fila que
       rola para o lado, no menu lateral isso faz sentido, porque ele
       deita embaixo do cabeçalho; aqui não, porque este é um painel
       vertical que já rola de cima para baixo.
       O efeito era o título do grupo entrar na MESMA linha dos botões:
       "Meus anúncios" e "Minha imobiliária" sumiam, e "Procurando
       imóvel" aparecia espremido no começo da fila. */
    .conta-painel .painel-menu {
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-x: visible;
    }

    .conta-painel .conta-grupo-titulo { display: block; }

    /* Em coluna, cada item ocupa a largura toda: botão de meia linha
       deixava o menu com cara de grade quebrada. */
    .conta-painel .painel-menu a { width: 100%; }
}

/* ---------------------------------------------------------------- */
/* Painel: menu lateral compacto, com ícones                         */
/* ---------------------------------------------------------------- */
/* Menos vão entre o topo e o painel, itens mais próximos e um ícone   */
/* por item: os mesmos ícones do menu da conta, no topo.              */
.secao-painel { padding: 22px 0 56px; }

.painel-estrutura {
    grid-template-columns: 236px 1fr;
    gap: 28px;
    padding: 0 0 10px;
}

.painel-lateral {
    top: calc(var(--altura-topo) + 16px);
    padding: 10px;
}

.painel-conta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--linha);
    border-radius: var(--raio) var(--raio) 0 0;
    color: var(--creme);
}
.painel-conta:hover { color: var(--creme); }
.painel-conta:hover .avatar { box-shadow: 0 0 0 2px var(--dourado); }
.painel-conta .avatar { width: 36px; height: 36px; font-size: 13px; transition: box-shadow var(--transicao); }
.painel-conta-quem { display: grid; gap: 1px; min-width: 0; line-height: 1.3; }
.painel-conta-quem strong { font-size: 14px; }
.painel-conta-quem span {
    font-size: 12px;
    color: var(--neutro);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.painel-menu { gap: 1px; }

.painel-menu a {
    justify-content: flex-start;
    gap: 10px;
    padding: 7px 10px;
    font-size: 14px;
    line-height: 1.3;
}
.painel-menu a .contagem { margin-left: auto; }

.menu-icone {
    flex-shrink: 0;
    opacity: .75;
    transition: opacity var(--transicao);
}
.painel-menu a:hover .menu-icone,
.painel-menu a.ativo .menu-icone { opacity: 1; }

.menu-rotulo {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.painel-menu-titulo {
    margin: 8px 10px 4px;
    font-size: 10px;
}

.painel-menu-admin {
    margin-top: 10px;
    padding: 4px 4px 4px;
}

.painel-sair {
    margin-top: 8px;
    padding-top: 6px;
}

.ambiente-faixa { margin-bottom: 12px; }

/* No menu da conta do topo, as colunas ganham o espaço do ícone.
   Largura fixa de propósito: com min(205px, 100%) o navegador media o
   menu antes de saber o tamanho das colunas, o menu ficava com 341px
   para 430px de conteúdo e aparecia uma barra de rolagem de lado.
   No celular (até 760px) volta a ser uma coluna só, na largura da tela. */
.conta-painel { grid-template-columns: 250px; overflow-x: hidden; }

@media (max-width: 760px) {
    .secao-painel { padding: 16px 0 40px; }
    .conta-painel { grid-template-columns: 1fr; }

    /* A ajuda ocupa a tela toda no celular, como na gestão. Esta regra
       já nasceu FORA de qualquer @media uma vez, em 30/09/2026: o painel
       passou a ter a largura da janela em qualquer tela e a tapar tudo.
       Contar chaves a olho não serve. Confira que ela está aqui dentro. */
    /* left:0 + width:auto, e não 100vw: a unidade vw conta a barra de
       rolagem, então o painel ficava quinze pixels mais largo que a
       janela e escorregava para fora pela esquerda. O padding de 16px
       virava um, e o texto encostava na borda. */
    .g-ajuda-painel { left: 0; width: auto; height: 100dvh; padding: 18px 16px 30px; border-left: 0; }
}

/* ---------------------------------------------------------------- */
/* Divulgação: o texto da publicação e as artes salvas. As abas de
   formato usam o estilo de abas comum, lá embaixo. */
.aba-formato span {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--neutro-2);
}


.modelo-escolhas {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.legenda-arte { margin-top: 16px; padding: 14px; }

.legenda-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.legenda-texto {
    width: 100%;
    min-height: 170px;
    resize: vertical;
    font-size: 13.5px;
    line-height: 1.5;
}

.legenda-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.link-botao {
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--dourado);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.artes-salvas { margin: 4px 0 28px; }

.artes-salvas-cabeca {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}
.artes-salvas-cabeca h2 { margin: 0; font-size: 20px; }

.artes-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
    gap: 14px;
}

.arte-salva {
    /* Âncora do círculo de marcar, que fica por cima da miniatura. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    transition: box-shadow var(--transicao), opacity var(--transicao);
}
.arte-salva-nova { box-shadow: 0 0 0 2px var(--dourado); }
.arte-salva-saindo { opacity: .4; pointer-events: none; }

.arte-salva-figura {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 230px;
    background: var(--preto);
    border-radius: 8px;
    overflow: hidden;
}
.arte-salva-figura img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.arte-salva-info { display: grid; gap: 2px; }
.arte-salva-info strong { font-size: 14px; }
.arte-salva-info .fraco { font-size: 12.5px; }


/* Arte salva: a miniatura é redesenhada pelo navegador num canvas. */
.arte-salva-figura {
    width: 100%;
    padding: 6px;
    border: 0;
    cursor: pointer;
    transition: box-shadow var(--transicao);
}
.arte-salva-figura:hover { box-shadow: inset 0 0 0 2px var(--linha-forte); }
.arte-salva-figura canvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
}

/* A marca da arte escolhida: a mesma bolinha do aplicativo, no mesmo
   canto. Dois lados da mesma função não podem marcar de jeitos
   diferentes, senão quem usa os dois aprende duas vezes.

   ELA É UM BOTÃO, e não um enfeite: clicar na ARTE abre no editor,
   clicar no CÍRCULO marca. São duas intenções diferentes no mesmo
   cartão, e só separando os alvos dá para ter as duas. */
.arte-salva-marca {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(11, 10, 9, 0.5);
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao);
}
.arte-salva-marca:hover { border-color: var(--dourado); }

.arte-salva.marcada { box-shadow: inset 0 0 0 2px var(--dourado); }
.arte-salva.marcada .arte-salva-marca {
    background: var(--dourado-fundo);
    border-color: var(--dourado-fundo);
}

/* O tique é desenhado com duas bordas giradas: é um traço só, não pede
   fonte de ícone e acompanha a cor do tema sozinho. */
.arte-salva.marcada .arte-salva-marca::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 7px;
    height: 12px;
    border: solid var(--sobre-cor);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

/* A barra fica GRUDADA embaixo da lista enquanto se rola, e não no fim
   dela: com seis artes, quem marca a última teria de rolar de volta para
   agir sobre ela. */
.artes-barra {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
}

.artes-barra-conta { display: flex; align-items: center; gap: 10px; }
.artes-barra-conta strong { font-size: 14px; }
.artes-barra-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.artes-barra-acoes .botao { padding: 8px 14px; font-size: 13px; }

/* Botão apagado AQUI é informação, não enfeite: ele diz que editar vale
   para uma arte só, antes do clique. */
.artes-barra .botao[disabled] { opacity: .45; cursor: not-allowed; }
.artes-barra .botao[disabled]:hover { border-color: var(--linha); color: inherit; }


/* Sistema: marcar falhas como resolvidas */
.sistema-falhas-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.sistema-falhas-acoes form { margin: 0; }
.sistema-falhas .falha-acao { white-space: nowrap; text-align: right; }
.sistema-falhas .falha-acao form { margin: 0; }
.falha-resolvida td:not(.falha-acao) { opacity: .5; }
.falha-resolvida-selo {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sucesso);
}

/* Sistema: atualização do banco pendente */
.sistema-migracoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    border-left: 3px solid var(--aviso);
}
.sistema-migracoes > div { display: grid; gap: 3px; }
.sistema-migracoes .fraco { font-size: 13px; }
.sistema-migracoes form { margin: 0; }

/* ---------------------------------------------------------------- */
/* Painel responsivo (14/09/2026)                                    */
/* ---------------------------------------------------------------- */
/* A regra do menu compacto (236px + conteúdo) vinha depois da regra   */
/* de celular e passava por cima dela: no celular o menu ocupava metade */
/* da tela e o conteúdo ficava numa coluna fina. Estas regras ficam no  */
/* fim do arquivo justamente para valerem sobre todas as anteriores.    */

/* Telas médias (tablet, notebook pequeno): só os ícones numa barra fina. */
/* Tela média (861 a 1100px): o menu lateral continua com os nomes, só
   um pouco mais estreito. O modo só de ícones que existia aqui foi
   tirado (18/09/2026): sem o nome, ninguém sabia o que era cada
   desenho. Abaixo de 861px o menu vira a faixa que desliza. */
@media (max-width: 1100px) and (min-width: 861px) {
    .painel-estrutura { grid-template-columns: 212px minmax(0, 1fr); gap: 22px; }

    .painel-lateral { padding: 8px; }

    .painel-menu a { font-size: 13.5px; gap: 9px; }

    .painel-conta-quem { min-width: 0; }
    .painel-conta-quem strong,
    .painel-conta-quem span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Celular: o menu vira uma faixa de botões que desliza para o lado,
   acima do conteúdo. Conta e "Sair" já estão no botão da foto, no topo. */
@media (max-width: 860px) {
    .secao-painel { padding: 12px 0 40px; }

    .painel-estrutura { grid-template-columns: minmax(0, 1fr); gap: 16px; }

    .painel-lateral {
        position: static;
        top: auto;
        display: grid;
        gap: 6px;
        padding: 8px;
        min-width: 0;
    }

    .painel-conta,
    .painel-sair,
    .painel-menu-titulo { display: none; }

    /* A fila que rola para o lado não comporta título: a ordem dos
       itens sozinha já agrupa, e o rótulo viraria um degrau no meio. */
    .painel-menu .g-menu-grupo { display: none; }

    .painel-menu {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .painel-menu::-webkit-scrollbar { display: none; }

    .painel-menu a {
        flex: 0 0 auto;
        gap: 7px;
        padding: 8px 12px;
        border: 1px solid var(--linha);
        border-radius: var(--raio-pill);
        font-size: 13.5px;
        white-space: nowrap;
        scroll-snap-align: start;
    }
    .painel-menu a.ativo { border-color: var(--dourado); }
    .painel-menu a .contagem { margin-left: 2px; }

    .painel-menu-admin {
        margin-top: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .painel-menu-admin a { border-color: rgba(143, 179, 232, 0.28); }
    .painel-menu-admin a.ativo { border-color: var(--azul-admin); }

    .painel-conteudo { min-width: 0; }
    .ambiente-faixa { margin-bottom: 10px; }
}

/* ---------------------------------------------------------------- */
/* Importação de imóveis (Camada 5)                                  */
/* ---------------------------------------------------------------- */
.importar-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 18px;
}
.importar-titulo { font-size: 18px; margin: 0 0 14px; }
.importar-ou {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 14px;
    color: var(--neutro-2);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.importar-ou::before,
.importar-ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.importar-passos { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.importar-nota { font-size: 13.5px; line-height: 1.55; margin: 0 0 12px; }
.importar-colunas td:first-child { white-space: nowrap; }
.importar-colunas td { vertical-align: top; font-size: 13.5px; }
.importar-origem { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.importacao-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.importacao-numero { display: grid; gap: 4px; padding: 14px 16px; }
.importacao-numero strong { font-size: 26px; font-weight: 800; }
.importacao-numero-erro strong { color: var(--erro); }

.importacao-confirmar fieldset { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.importacao-modo span { display: grid; gap: 2px; }
.importacao-modo .fraco { font-size: 13.5px; line-height: 1.5; }
.importacao-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.importacao-fotos { margin: 14px 0; }
.importacao-fotos-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.barra-progresso {
    height: 10px;
    border-radius: var(--raio-pill);
    background: var(--superficie-3);
    overflow: hidden;
}
.barra-progresso span {
    display: block;
    height: 100%;
    background: var(--dourado-fundo);
    border-radius: inherit;
    transition: width .4s ease;
}

.importacao-itens td { vertical-align: top; font-size: 13.5px; }
.importacao-titulo { display: block; font-size: 14px; margin-bottom: 2px; }
.importacao-itens .fraco { font-size: 12.5px; }
.importacao-item-erro td { background: rgba(226, 104, 95, 0.05); }
.importacao-situacao { min-width: 220px; }
.importacao-situacao ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.importacao-situacao p { margin: 6px 0 4px; line-height: 1.45; }
.importacao-avisos { color: var(--neutro); font-size: 12.5px; }

@media (max-width: 860px) {
    .importar-grade { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- */
/* Importação: passo a passo (Camada 5)                              */
/* ---------------------------------------------------------------- */
.tutorial-chamada {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    padding: 14px 18px;
    color: inherit;
    text-decoration: none;
    border-color: rgba(227, 166, 59, 0.35);
    transition: border-color var(--transicao), background var(--transicao);
}
.tutorial-chamada:hover { border-color: var(--dourado); background: var(--superficie-2); }
.tutorial-chamada > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.tutorial-chamada .fraco { font-size: 13.5px; }
.tutorial-chamada-icone {
    flex: none;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(227, 166, 59, 0.14);
    color: var(--dourado);
    font-weight: 800;
    font-size: 18px;
}
.tutorial-chamada-seta { color: var(--dourado); font-size: 20px; }

.tutorial-indice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
}
.tutorial-indice a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-pill);
    color: var(--creme-2);
    font-size: 13.5px;
    text-decoration: none;
}
.tutorial-indice a:hover { border-color: var(--dourado); color: var(--creme); }
.tutorial-indice span {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--superficie-3);
    color: var(--dourado);
    font-size: 12px;
    font-weight: 800;
}

.tutorial-passo {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
    padding: 26px 0;
    border-top: 1px solid var(--linha-suave);
    scroll-margin-top: calc(var(--altura-topo) + 16px);
}
.tutorial-numero {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--dourado-fundo);
    color: var(--sobre-cor);
    font-weight: 800;
    font-size: 19px;
}
.tutorial-corpo { max-width: 820px; }
.tutorial-corpo h2 { font-size: 22px; margin: 8px 0 10px; }
.tutorial-corpo > p { font-size: 15px; line-height: 1.65; color: var(--creme-2); margin: 0 0 14px; }

.tutorial-escolha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tutorial-escolha .painel { display: grid; gap: 6px; align-content: start; padding: 16px 18px; }
.tutorial-escolha strong { font-size: 16px; }
.tutorial-escolha p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--creme-3); }

.tutorial-lista { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.55; color: var(--creme-2); }
.tutorial-lista li strong { color: var(--creme); }
.tutorial-lista li .botao { display: table; }

.tutorial-tela {
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-g);
    background: var(--superficie);
    overflow: hidden;
    box-shadow: var(--sombra);
    margin: 4px 0 14px;
}
.tutorial-tela-barra {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: var(--superficie-3);
    border-bottom: 1px solid var(--linha);
}
.tutorial-tela-barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--linha-forte); }
.tutorial-tela-barra span { margin-left: 8px; font-size: 12px; color: var(--neutro); }

.tutorial-planilha { overflow-x: auto; }
.tutorial-planilha table { border-collapse: collapse; font-size: 12.5px; min-width: 640px; width: 100%; }
.tutorial-planilha th,
.tutorial-planilha td { border: 1px solid var(--linha); padding: 6px 9px; text-align: left; white-space: nowrap; }
.tutorial-planilha th,
.tutorial-planilha td:first-child { background: var(--superficie-2); color: var(--neutro-2); font-weight: 600; text-align: center; }
.tutorial-cabecalho td:not(:first-child) { color: var(--dourado); font-weight: 700; font-family: var(--fonte-mono); }
.tutorial-link { color: var(--info); max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

.tutorial-form { padding: 18px; display: grid; gap: 10px; max-width: 460px; }
.tutorial-campo { display: grid; gap: 5px; font-size: 12.5px; color: var(--neutro); }
.tutorial-entrada { padding: 9px 12px; border: 1px solid var(--linha); border-radius: var(--raio); font-size: 13px; background: var(--superficie-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tutorial-entrada-vazia { color: var(--neutro-2); }
.tutorial-entrada-ativa { border-color: var(--dourado); color: var(--creme); box-shadow: 0 0 0 3px rgba(227, 166, 59, 0.15); }
.tutorial-ou { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--neutro-2); text-align: center; }
.tutorial-botao { justify-self: start; padding: 9px 16px; border-radius: var(--raio-pill); background: var(--dourado-fundo); color: var(--sobre-cor); font-weight: 700; font-size: 13px; }

.tutorial-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 14px 14px 6px; }
.tutorial-resumo div { display: grid; gap: 2px; padding: 9px 11px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie-2); }
.tutorial-resumo span { font-size: 11px; color: var(--neutro); }
.tutorial-resumo b { font-size: 20px; }
.tutorial-resumo-erro b { color: var(--erro); }
.tutorial-linhas { padding: 6px 14px 14px; display: grid; gap: 6px; }
.tutorial-linhas div {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--linha-suave);
    border-radius: var(--raio);
    font-size: 13px;
}
.tutorial-linhas span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--creme-2); }
.tutorial-linhas em { font-style: normal; }
.tutorial-linha-erro { background: rgba(226, 104, 95, 0.06); }
.tutorial-linhas .tutorial-linha-erro span { color: var(--erro); }

.tutorial-progresso { padding: 18px; display: grid; gap: 10px; }
.tutorial-progresso > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.tutorial-progresso > div:first-child span { color: var(--neutro); }

.tutorial-legenda { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.55; color: var(--creme-2); }
.tutorial-legenda .selo { margin-right: 6px; }

.tutorial-dicas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tutorial-dicas div {
    padding: 12px 14px;
    border-left: 3px solid var(--dourado);
    border-radius: 0 var(--raio) var(--raio) 0;
    background: var(--superficie-2);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--creme-2);
}
.tutorial-dicas b { color: var(--creme); }

.tutorial-duvidas { padding: 26px 0 8px; border-top: 1px solid var(--linha-suave); scroll-margin-top: calc(var(--altura-topo) + 16px); }
.tutorial-duvidas h2 { font-size: 22px; margin: 0 0 14px; }
.tutorial-duvidas details { padding: 0; margin-bottom: 8px; }
.tutorial-duvidas summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 44px 14px 18px;
    font-weight: 600;
    font-size: 15px;
    position: relative;
}
.tutorial-duvidas summary::-webkit-details-marker { display: none; }
.tutorial-duvidas summary::after {
    content: "+";
    position: absolute;
    right: 18px; top: 50%;
    transform: translateY(-50%);
    color: var(--dourado);
    font-size: 20px;
}
.tutorial-duvidas details[open] summary::after { content: "\2212"; }
.tutorial-duvidas details p { margin: 0; padding: 0 18px 16px; font-size: 14.5px; line-height: 1.6; color: var(--creme-2); }

.tutorial-final {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    padding: 18px 20px;
}
.tutorial-final > div { display: grid; gap: 2px; }
.tutorial-final .fraco { font-size: 14px; }

@media (max-width: 860px) {
    .tutorial-passo { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .tutorial-numero { width: 36px; height: 36px; font-size: 16px; }
    .tutorial-escolha,
    .tutorial-dicas { grid-template-columns: minmax(0, 1fr); }
    .tutorial-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tutorial-linhas div { grid-template-columns: minmax(0, 1fr) auto; }
    .tutorial-linhas code { display: none; }
}

/* ---------------------------------------------------------------- */
/* Conta de quem procura imóvel (Camada 16)                          */
/* ---------------------------------------------------------------- */

/* O coração do cartão: fica sobre a foto, no canto de cima. */
/* O cartão é a referência de posição do coração. Sem isto o coração
   só "encaixava" no cartão durante o hover (o transform do hover cria
   essa referência): no celular ele sumia e só aparecia no toque, que
   já abria o anúncio. */
.cartao { position: relative; }

.cartao-favorito { position: absolute; top: 10px; right: 10px; z-index: 3; margin: 0; }
.coracao {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--creme);
    background: rgba(11, 10, 9, 0.55);
    backdrop-filter: blur(4px);
    transition: transform var(--transicao), color var(--transicao), background var(--transicao);
}
/* O path do coração vem com fill no HTML (para funcionar até sem CSS);
   a regra mira o path, senão o coração ficava sempre cheio e "desmarcado"
   só mudava de cor, no celular parecia que não desmarcava. */
.coracao svg path { fill: none; }
.coracao:hover { background: rgba(11, 10, 9, 0.75); color: var(--dourado-claro); transform: scale(1.06); }
.coracao-marcado { color: var(--dourado); }

/* Tela de toque: sem o "pulinho" do hover no cartão e com o coração um
   pouco maior, do tamanho confortável para o dedo. */
@media (hover: none) {
    .cartao:hover { transform: none; }
    .coracao { width: 44px; height: 44px; }
    .coracao:hover { transform: none; }

    /* No celular o hover fica grudado depois do toque. Sem isto, o
       coração recém-desmarcado continuava dourado. */
    .coracao:hover { color: var(--creme); background: rgba(11, 10, 9, 0.55); }
    .coracao-marcado:hover { color: var(--dourado); }
    .coracao-botao:hover:not(.coracao-marcado) { color: var(--creme); border-color: var(--linha-forte); background: transparent; }
}
.coracao-marcado svg path { fill: currentColor; }

/* O mesmo coração, agora como botão de texto na página do anúncio. */
.favoritar-anuncio { margin: 0 0 18px; }
.coracao-botao { display: inline-flex; align-items: center; gap: 8px; }
.coracao-botao svg path { fill: none; }
.coracao-botao.coracao-marcado { color: var(--dourado); border-color: var(--dourado); }
.coracao-botao.coracao-marcado svg path { fill: currentColor; }

/* "Avise-me de imóveis assim", acima dos resultados. */
.alerta-busca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 18px;
    padding: 16px 18px;
    /* BORDA DOURADA INTEIRA, e não a 30% de antes (18/10/2026). A faixa
       fica logo acima da lista de imóveis, e com a borda quase apagada
       ela se lia como mais um cartão de resultado. O Geraldo pediu o
       botão mais destacado; a faixa inteira precisava do mesmo, senão o
       botão ficaria forte dentro de uma caixa que ninguém vê. */
    border: 1px solid var(--dourado);
    border-radius: var(--raio-g);
    background: var(--superficie-2);
}
/* O texto não empurra o botão para a linha de baixo: ele encolhe até
   440px e só então a faixa quebra, que é largura de celular. Botão
   dourado embaixo do texto vira outra coisa, e a faixa ficou alta sem
   necessidade quando o botão cresceu. */
.alerta-busca > div { display: grid; gap: 2px; flex: 1 1 440px; }

/* A mesma faixa, quando a busca não achou nada.
   Ali ela deixa de ser um extra acima da lista e passa a ser o que a
   pessoa veio fazer: não achou hoje, quer saber quando entrar. Por isso
   vem abaixo do painel vazio, com a borda dourada inteira e sem o limite
   de largura do texto: é ação, não recado. */
.alerta-busca-vazio {
    margin-top: 18px;
    border-color: var(--dourado);
    padding: 18px 20px;
}
.alerta-busca strong { font-size: 15px; }
.alerta-busca .fraco { font-size: 13.5px; line-height: 1.5; }

/* Meus favoritos */
.favoritos-lista { display: grid; gap: 12px; }
.favorito {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
}
.favorito-foto {
    display: block;
    width: 160px;
    height: 120px;
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--superficie-3);
}
.favorito-foto img { width: 100%; height: 100%; object-fit: cover; }
.favorito-foto .sem-foto { display: grid; place-items: center; width: 100%; height: 100%; }
.favorito-corpo { display: grid; gap: 3px; }
.favorito-titulo { font-size: 16px; margin: 0; }
.favorito-titulo a { color: inherit; text-decoration: none; }
.favorito-titulo a:hover { color: var(--dourado); }
.favorito-onde { font-size: 13px; }
.favorito-preco { margin: 4px 0 0; font-size: 15px; }
.favorito-preco strong { font-size: 18px; }
.favorito-aviso { margin: 6px 0 0; font-size: 13.5px; }
.favorito-baixou { color: var(--sucesso); font-weight: 600; }
.favorito-quando { font-size: 12.5px; margin: 6px 0 0; }
.favorito-fora .favorito-foto img { filter: grayscale(1); opacity: .6; }

/* Meus avisos de busca */
.alertas-lista { display: grid; gap: 12px; }
.alerta { display: grid; gap: 14px; }
.alerta-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.alerta-titulo { font-size: 16px; margin: 0 0 3px; }
.alerta-titulo a { color: inherit; text-decoration: none; }
.alerta-titulo a:hover { color: var(--dourado); }
.alerta-quando { font-size: 12.5px; margin: 0; }
.alerta-acoes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.alerta-frequencia { min-width: 220px; }
.alerta-frequencia .campo { margin: 0; }

@media (max-width: 700px) {
    .favorito { grid-template-columns: 110px minmax(0, 1fr); }
    .favorito-foto { width: 110px; height: 88px; }
    .favorito-acao { grid-column: 1 / -1; }
    .alerta-acoes { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------- */
/* Planos, pagamento e destaque (Camada 8)                           */
/* ---------------------------------------------------------------- */
.destaques-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 14px;
}
.destaque-opcao {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 18px;
    margin: 0;
}
.destaque-opcao .plano-preco { font-size: 22px; font-weight: 800; }
.destaque-opcao .botao { justify-self: start; margin-top: auto; }

@media (max-width: 700px) {
    .destaques-grade { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- */
/* Integrações: chaves dos serviços de fora (Camada 8)               */
/* ---------------------------------------------------------------- */
.sistema-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
/* Ficha em leitura: o padrão de todo cadastro do sistema. A tela abre
   mostrando o que está gravado, e os campos só aparecem depois do
   clique em Editar. O nome era .integracao-*, mas o desenho serve a
   qualquer cadastro: nota fiscal, imobiliária, perfil, e nome que
   engana custa mais caro depois. */
.ficha-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.ficha-dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 12px;
    margin: 0 0 14px;
}
.ficha-dados > div {
    padding: 10px 12px;
    border: 1px solid var(--linha-suave);
    border-radius: var(--raio);
    background: var(--superficie-2);
}
.ficha-dados dt {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--neutro-2);
    margin-bottom: 4px;
}
.ficha-dados dd { margin: 0; font-size: 14px; }
.ficha-dados code { font-size: 13px; word-break: break-all; }

/* Ações de cada cobrança no histórico (Camada 8). */
.pagamento-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
}
.pagamento-acoes form { margin: 0; }

/* Ações da cobrança: os dois botões com a mesma largura, um sob o outro. */
.pagamento-acoes {
    display: grid;
    gap: 6px;
    justify-items: stretch;
    white-space: normal;
    min-width: 170px;
}
.pagamento-acoes .botao {
    width: 100%;
    text-align: center;
    justify-content: center;
}

/* ---------------------------------------------------------------- */
/* Transações e destaque ativo (Camada 8)                            */
/* ---------------------------------------------------------------- */
.transacoes-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.transacoes-filtros .campo { margin: 0; min-width: 150px; }
.transacoes-filtros-acoes { display: flex; gap: 8px; align-items: center; }
.transacoes td { vertical-align: top; font-size: 13.5px; }
.transacoes .fraco { font-size: 12.5px; }
.transacoes-rastreio code { font-size: 12.5px; word-break: break-all; }

.destaque-atual {
    margin-bottom: 18px;
    border-color: rgba(227, 166, 59, 0.45);
    background: linear-gradient(180deg, rgba(227, 166, 59, 0.08), transparent 60%);
}
.destaque-atual-topo {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}
.destaque-atual-topo h2 { font-size: 20px; margin: 8px 0 6px; }
.destaque-atual-topo .suave { font-size: 14.5px; line-height: 1.6; margin: 0; max-width: 60ch; }
.destaque-atual-contagem {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    min-width: 110px;
    padding: 12px 16px;
    border: 1px solid rgba(227, 166, 59, 0.35);
    border-radius: var(--raio-g);
    background: var(--superficie-2);
}
.destaque-atual-contagem strong { font-size: 30px; font-weight: 800; color: var(--dourado); line-height: 1; }
.destaque-atual-contagem span { font-size: 12px; color: var(--neutro); }
.destaque-atual-compra {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: 12px;
    margin: 16px 0 12px;
}
.destaque-atual-compra dt {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--neutro-2);
    margin-bottom: 3px;
}
.destaque-atual-compra dd { margin: 0; font-size: 14px; }
.destaque-atual-compra code { font-size: 13px; word-break: break-all; }

@media (max-width: 700px) {
    .destaque-atual-contagem { width: 100%; }
}

/* Recibo de pagamento (Camada 8). */
.recibo { max-width: 680px; }
.recibo-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--linha);
}
.recibo-topo > div { display: grid; gap: 2px; }
.recibo-topo .fraco { font-size: 13px; }
.recibo-descricao { font-size: 19px; margin: 16px 0 14px; }
.recibo-dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 14px;
    margin: 0 0 18px;
}
.recibo-dados dt {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--neutro-2);
    margin-bottom: 3px;
}
.recibo-dados dd { margin: 0; font-size: 14.5px; }
.recibo-dados code { font-size: 13px; word-break: break-all; }
.recibo-valor { font-size: 24px; font-weight: 800; color: var(--dourado); }
.recibo-liberado {
    padding: 14px 16px;
    border: 1px solid var(--linha-suave);
    border-radius: var(--raio);
    background: var(--superficie-2);
    margin-bottom: 14px;
}
.recibo-liberado p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; }
.recibo-nota { font-size: 12.5px; line-height: 1.6; margin: 0; }
.recibo-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

@media print {
    .painel-menu, .topo, .rodape, .recibo-acoes, .rotulo { display: none !important; }
    .recibo { border: 0; max-width: none; }
    body { background: #fff; color: #000; }
}

/* Correção: a célula continua célula; quem vira grade é o bloco dentro dela.
   Com display:grid no <td>, a borda da linha deixava de acompanhar a coluna
   e aparecia uma quebra embaixo do botão. */
.pagamento-acoes {
    display: table-cell;
    vertical-align: top;
    white-space: normal;
}
.pagamento-acoes-grade {
    display: grid;
    gap: 6px;
    justify-items: stretch;
    min-width: 150px;
}
.pagamento-acoes-grade form { margin: 0; }
.pagamento-acoes-grade .botao {
    width: 100%;
    text-align: center;
    justify-content: center;
}

/* ---------------------------------------------------------------- */
/* Transações em cartões (Camada 8)                                  */
/* A tabela espremia seis colunas de texto longo; em cartão, cada     */
/* bloco tem largura mínima e o botão nunca sai da caixa.            */
/* ---------------------------------------------------------------- */
.transacoes-lista { display: grid; gap: 12px; }
.transacao { padding: 16px 18px; }
.transacao-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--linha-suave);
}
.transacao-topo form { margin: 0; }
.transacao-identidade { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.transacao-valor { font-size: 20px; font-weight: 800; }
.transacao-identidade .fraco { font-size: 13px; }

.transacao-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 16px;
    margin-top: 14px;
}
.transacao-grade > div { min-width: 0; }
.transacao-grade .campo-rotulo { display: block; margin-bottom: 6px; }
.transacao-grade p { margin: 0 0 4px; font-size: 14px; line-height: 1.5; }
.transacao-grade .fraco { font-size: 12.5px; }
.transacao-grade code { font-size: 12.5px; overflow-wrap: anywhere; }
.transacao-mp { display: inline-block; max-width: 100%; }

.campo-busca-transacao { flex: 1 1 260px; min-width: 240px; }

@media (max-width: 700px) {
    .transacao-topo { align-items: flex-start; }
    .transacao-topo form,
    .transacao-topo .botao { width: 100%; }
}

/* ---------------------------------------------------------------- */
/* Cupons de desconto (Camada 8)                                     */
/* ---------------------------------------------------------------- */
.cupom-form { margin-bottom: 8px; }
.cupom-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 14px;
    margin-bottom: 6px;
}
.cupom-grade .campo { margin: 0; }
.cupom-campo-largo { grid-column: 1 / -1; }

.cupons-lista { display: grid; gap: 12px; }
.cupom { padding: 16px 18px; }
.cupom-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cupom-identidade { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cupom-codigo {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 10px;
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio);
    background: var(--superficie-2);
}
.cupom-identidade strong { font-size: 18px; color: var(--dourado); }
.cupom-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cupom-acoes form { margin: 0; }
.cupom-descricao { margin: 12px 0 0; font-size: 14px; color: var(--creme-2); }
.cupom-regras {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 12px 0 0;
    padding: 0;
    font-size: 12.5px;
    color: var(--neutro);
}
.cupom-regras li {
    padding: 3px 10px;
    border: 1px solid var(--linha-suave);
    border-radius: var(--raio-pill);
    background: var(--superficie-2);
}

/* ---------------------------------------------------------------- */
/* Celular: tabela vira lista                                        */
/*                                                                   */
/* Tabela larga no telefone só tem duas saídas ruins: espremer as    */
/* colunas até a leitura virar adivinhação, ou empurrar a página     */
/* para o lado. Aqui cada linha vira um cartão e cada célula mostra  */
/* o nome da coluna ao lado do valor: o cabeçalho da tabela some,   */
/* porque ele passa a estar em cada célula.                          */
/*                                                                   */
/* No td, "data-rotulo" é o nome da coluna. Sem ele, a célula ocupa  */
/* a linha inteira (é o caso das células de botão).                  */
/* ---------------------------------------------------------------- */
@media (max-width: 700px) {
    table.tabela-empilha,
    table.tabela-empilha tbody,
    table.tabela-empilha tr,
    table.tabela-empilha td {
        display: block;
        width: auto;
    }

    table.tabela-empilha thead { display: none; }

    table.tabela-empilha tr {
        padding: 14px 16px;
        border-bottom: 1px solid var(--linha);
    }
    table.tabela-empilha tr:last-child { border-bottom: 0; }
    table.tabela-empilha tr:hover td { background: transparent; }

    table.tabela-empilha td {
        padding: 5px 0;
        border: 0;
        display: grid;
        grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr);
        gap: 2px 12px;
        align-items: start;
        font-size: 14.5px;
        line-height: 1.5;
        white-space: normal;
        overflow-wrap: anywhere;
        max-width: none;
    }

    table.tabela-empilha td::before {
        content: attr(data-rotulo);
        font-family: var(--fonte-mono);
        font-size: 10.5px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--neutro-2);
        padding-top: 4px;
    }

    /* Célula sem nome de coluna (botões, por exemplo) ocupa a linha. */
    table.tabela-empilha td:not([data-rotulo]) {
        display: block;
        padding-top: 10px;
        text-align: left;
    }
    table.tabela-empilha td:not([data-rotulo])::before { content: none; }

    /* Os ajustes de tabela larga não valem mais quando ela é lista. */
    table.tabela-empilha .importar-origem,
    table.tabela-empilha .importacao-situacao,
    table.tabela-empilha td:first-child {
        max-width: none;
        min-width: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    table.tabela-empilha .botao { width: 100%; justify-content: center; }
    table.tabela-empilha .pagamento-acoes-grade { width: 100%; }

    /* SELO NUNCA ESTICA, em tabela empilhada nenhuma (18/10/2026).
       A célula vira uma grade de duas colunas, e tudo que está dentro
       dela ocupa a coluna inteira por padrão. No botão isso é escolha
       (a regra logo acima); num selo é defeito: ele é uma etiqueta do
       tamanho da palavra, e esticado vira uma faixa com uma palavra
       perdida à esquerda. Foi o "POST" de 136px da tela de API. */
    /* A regra é por POSIÇÃO, e não por classe: tentei primeiro listar
       .selo, .etiqueta, .contagem, e o selo de situação da Central se
       chama .g-selo-status, então passou batido. Caçar nome de classe
       aqui é apostar que ninguém vai criar a próxima. */
    table.tabela-empilha td > * {
        justify-self: start;
        max-width: 100%;
    }

    /* ENDEREÇO DE API QUEBRA LINHA AQUI DENTRO (18/10/2026).
       O <code> é nowrap de propósito no computador, para ninguém ler
       "/api/v1/imov" numa linha e "eis" na outra. No celular isso
       empurrava a página 212px para o lado, e a tela de API foi a
       única da Central que sobrou rolando depois da varredura. Entre
       um endereço partido e a página inteira torta, parte-se o
       endereço. */
    table.tabela-empilha code,
    table.tabela-api code {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Texto técnico (chave, endereço, referência) quebra em vez de       */
/* empurrar a página: no telefone não há largura para orgulho.        */
code { overflow-wrap: anywhere; }

/* O fieldset se recusa a ficar menor que o conteúdo dele. É a regra
   antiga do navegador. Sem isto, um campo largo dentro de um fieldset
   empurra a página inteira no telefone. */
fieldset { min-inline-size: 0; max-width: 100%; }

/* ---------------------------------------------------------------- */
/* Celular: o menu do painel rola para o lado, e agora avisa        */
/*                                                                   */
/* A fila de itens não cabe na tela e rola na horizontal. Quem não   */
/* percebe isso acha que o menu tem só o que está à vista. Então o   */
/* fim da fila desbota e aparece uma seta: ela acena duas vezes,     */
/* leva o menu adiante ao toque e some quando chega ao fim.          */
/* ---------------------------------------------------------------- */
.painel-menu-trilho { position: relative; min-width: 0; }
.painel-menu-seta,
.painel-menu-dica { display: none; }

/* A Central e a gestão usam o mesmo trilho, mas o menu delas é item de
   uma grade (.g-estrutura) e não pode ganhar um envoltório no
   computador: o display:contents faz a div sumir do layout, e o .g-menu
   continua sendo o filho direto da grade. Na tela estreita, onde a
   grade vira uma coluna só, ela volta a existir para posicionar a
   seta. */
.g-menu-trilho { display: contents; }

@media (max-width: 860px) {
    .g-menu-trilho {
        display: block; position: relative; min-width: 0;
        /* O fundo e a linha de baixo passam para cá: a frase fica dentro
           da mesma faixa do menu, e não solta sobre a página. */
        background: var(--superficie);
        border-bottom: 1px solid var(--linha);
    }
    .g-menu-trilho .g-menu { border-bottom: 0; }

    .g-menu-trilho .painel-menu-dica { margin: 0; padding: 9px 12px 0; }

    /* A seta se prende ao fim do trilho, que é o fim da faixa do menu:
       assim ela fica no meio da faixa com ou sem a frase em cima. */
    .g-menu-trilho .painel-menu-seta { top: auto; bottom: 9px; margin-top: 0; right: 8px; }
    /* A de voltar acompanha, espelhada: sem isto ela ficaria no meio da
       faixa e a de avançar embaixo, uma desalinhada da outra. */
    .g-menu-trilho.tem-antes .painel-menu-seta-antes { top: auto; bottom: 9px; margin-top: 0; left: 8px; right: auto; }
}

@media (max-width: 860px) {
    .painel-menu-trilho.tem-mais:not(.no-fim) .painel-menu,
    .painel-menu-trilho.tem-mais:not(.no-fim) .g-menu {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 54px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 54px), transparent 100%);
    }
    /* No fim da fila: só o começo desbota (tem item para trás), e o
       último item aparece inteiro, sem seta nem desbotado por cima. */
    .painel-menu-trilho.tem-antes.no-fim .painel-menu,
    .painel-menu-trilho.tem-antes.no-fim .g-menu {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px);
                mask-image: linear-gradient(to right, transparent 0, #000 22px);
    }
    .painel-menu-trilho.tem-antes.tem-mais:not(.no-fim) .painel-menu,
    .painel-menu-trilho.tem-antes.tem-mais:not(.no-fim) .g-menu {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 54px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 54px), transparent 100%);
    }

    .painel-menu-trilho.tem-mais:not(.no-fim) .painel-menu-seta {
        display: grid;
        place-items: center;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -16px;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid var(--linha-forte);
        border-radius: 50%;
        background: var(--superficie-2);
        color: var(--creme);
        cursor: pointer;
        z-index: 2;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
        animation: menu-acena 1.9s ease-in-out 2;
    }
    .painel-menu-trilho.tem-mais:not(.no-fim) .painel-menu-seta:hover { border-color: var(--dourado); color: var(--dourado); }

    /* A seta de VOLTAR segue a mesma forma da de avançar, e aparece pela
       condição oposta: só quando já se rolou alguma coisa. Sem `tem-antes`
       ela ficaria por cima do primeiro item, tapando justamente o que a
       pessoa quer alcançar.
       Não acena: a de avançar acena porque precisa AVISAR que a fila
       continua; esta só existe depois que a pessoa já descobriu isso. */
    .painel-menu-trilho.tem-antes .painel-menu-seta-antes {
        display: grid;
        place-items: center;
        position: absolute;
        left: 0;
        right: auto;
        top: 50%;
        margin-top: -16px;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid var(--linha-forte);
        border-radius: 50%;
        background: var(--superficie-2);
        color: var(--creme);
        cursor: pointer;
        z-index: 2;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
        animation: none;
    }
    .painel-menu-trilho.tem-antes .painel-menu-seta-antes:hover { border-color: var(--dourado); color: var(--dourado); }

    /* Com as duas setas, a fila precisa desbotar dos DOIS lados, senão o
       item de baixo da seta esquerda aparece cortado com aresta dura. */
    .painel-menu-trilho.tem-antes .painel-menu,
    .painel-menu-trilho.tem-antes .g-menu {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 100%);
    }
    .painel-menu-trilho.tem-antes.tem-mais:not(.no-fim) .painel-menu,
    .painel-menu-trilho.tem-antes.tem-mais:not(.no-fim) .g-menu {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 54px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 54px), transparent 100%);
    }

    /* A FRASE NÃO SOME NO FIM DA FILA (18/10/2026).
       Era `.tem-mais:not(.no-fim)`: ao chegar ao fim, a dica
       desaparecia, a faixa encolhia e o conteúdo da página dava um
       salto para cima. O Geraldo viu e foi direto ao ponto: "ele não
       pode sumir".

       Agora basta HAVER rolagem, para um lado ou para o outro: a
       altura da faixa é a mesma do começo ao fim. Quem muda é só a
       setinha, que aponta para onde ainda há menu. */
    .painel-lateral.tem-mais .painel-menu-dica,
    .painel-menu-trilho.tem-mais .painel-menu-dica,
    .painel-menu-trilho.tem-antes .painel-menu-dica {
        display: block;
        margin: 0 2px 4px;
        min-width: 0;
        font-family: var(--fonte-mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--neutro-2);
    }
    .painel-lateral.tem-mais .painel-menu-dica::after,
    .painel-menu-trilho.tem-mais:not(.no-fim) .painel-menu-dica::after {
        content: " ›";
        font-size: 15px;
        line-height: 1;
        color: var(--dourado);
    }
    /* No fim da fila a seta vira para trás, que é o único lado que
       ainda tem menu. Sem ela, a frase mandaria deslizar para um lado
       onde não há mais nada. */
    .painel-menu-trilho.tem-antes.no-fim .painel-menu-dica::before {
        content: "‹ ";
        font-size: 15px;
        line-height: 1;
        color: var(--dourado);
    }
}



@keyframes menu-acena {
    0%, 100% { transform: translateX(0); }
    45%      { transform: translateX(-5px); }
}

@media (prefers-reduced-motion: reduce) {
    .painel-menu-trilho .painel-menu-seta { animation: none; }
}

/* Campo dentro de grade estreita: o select mede pela opção mais longa
   e, sem isto, ele é que manda na largura da coluna. */
.entrada,
.campo,
.grade > * { min-width: 0; }

.entrada { max-width: 100%; }

/* Ficha de dados (Meus dados): e-mail e endereço sem espaço quebram
   em vez de esticar a linha. */
table.tabela-dados td,
table.tabela-dados th { overflow-wrap: anywhere; }

/* Rede de segurança: palavra sem espaço (e-mail comprido, link, código)
   quebra a linha em vez de empurrar a tela. Só age quando não cabe. */
body { overflow-wrap: break-word; }
.aviso > * { min-width: 0; }

/* Caixa de entrar/cadastrar/convite: pode encolher abaixo do conteúdo
   mais largo em telas muito estreitas (iPhone SE e parecidos). */
.caixa-central { min-width: 0; }
@media (max-width: 380px) {
    .centro-tela { padding: 32px 14px; }
}

/* ---------------------------------------------------------------- */
/* Telas bem estreitas (320px): a barra do topo aperta               */
/*                                                                   */
/* Logo, nome, sino, conta e o botão do menu não cabem lado a lado   */
/* num aparelho de 320px, e era isso que empurrava TODAS as páginas */
/* alguns pixels para o lado. Aqui o topo economiza espaço em vez de */
/* espremer o conteúdo da página.                                    */
/* ---------------------------------------------------------------- */
@media (max-width: 380px) {
    .envolucro, .topo-interno { padding: 0 12px; }
    .topo-interno { gap: 8px; }

    .marca { gap: 8px; }
    /* A altura manda e a largura acompanha, como no resto. A medida
       quadrada aqui vinha de quando a marca era um logo quadrado; com a
       marca desenhada só não deformava porque o object-fit segurava. */
    .marca img { height: 34px; width: auto; }
    .marca-nome { font-size: 15px; letter-spacing: 0.1em; }

    .topo-acoes { gap: 4px; }
}

/* ---------------------------------------------------------------- */
/* Tablet: o menu do topo vira botão mais cedo                       */
/*                                                                   */
/* Entre 760 e 960px o menu inteiro (seis itens), a marca e os       */
/* ícones da conta somavam mais que a largura da tela e empurravam   */
/* a página para o lado. Do 960 para baixo o menu passa a abrir pelo */
/* botão. Mesmo comportamento que já existia no celular.            */
/* ---------------------------------------------------------------- */
@media (max-width: 960px) {

    .menu {
        position: fixed;
        inset: var(--altura-topo) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 18px 20px;
        background: var(--preto);
        border-bottom: 1px solid var(--linha);
        display: none;
    }

    .menu.aberto { display: flex; }

    .menu a:not(.botao) {
        padding: 14px 12px;
        border-radius: var(--raio);
        font-size: 16px;
    }

    .menu .botao {
        margin: 10px 0 0;
        justify-content: center;
    }

    .menu-abrir {
        display: inline-flex;
        margin-left: auto;
        padding: 10px;
        background: transparent;
        border: 1px solid var(--linha-forte);
        border-radius: var(--raio);
        color: var(--creme);
        cursor: pointer;
    }
}

/* ---------------------------------------------------------------- */
/* Topo em notebook (961 a 1180px): o menu inteiro numa linha só     */
/*                                                                   */
/* Antes, "Histórias das cidades" e "Anunciar imóvel" quebravam em   */
/* duas linhas quando a tela apertava. O texto do menu não quebra    */
/* mais; nessa faixa os itens ficam mais juntos e o slogan sai.      */
/* ---------------------------------------------------------------- */
.menu a,
.menu .botao { white-space: nowrap; }

@media (max-width: 1180px) and (min-width: 961px) {
    .topo-interno { gap: 16px; }
    .menu { gap: 2px; }
    .menu a:not(.botao) { padding: 9px 10px; }
    .menu .botao { margin-left: 6px; }
}

/* ---------------------------------------------------------------- */
/* Entrar, cadastrar, senha e convite: formulário perto do topo      */
/*                                                                   */
/* A caixa era centralizada na altura inteira da tela. Num monitor  */
/* grande, o formulário ia parar longe do menu, com um vão enorme    */
/* em cima. Agora ele começa logo abaixo do topo, com um respiro que */
/* cresce pouco com a altura da tela. A tela de "em construção", que */
/* não tem topo, continua centralizada.                              */
/* ---------------------------------------------------------------- */
#conteudo .centro-tela {
    min-height: 0;
    align-items: flex-start;
    padding: clamp(36px, 7vh, 80px) 24px clamp(56px, 10vh, 110px);
}

@media (max-width: 380px) {
    #conteudo .centro-tela { padding: 28px 14px 48px; }
}

/* ---------------------------------------------------------------- */
/* Botão de aparência no topo (claro, escuro ou automático)          */
/* ---------------------------------------------------------------- */
.tema { position: relative; }

/* O ícone mostra o tema que está valendo agora. */
.tema-icone-claro { display: none; }
:root[data-tema="claro"] .tema-icone-claro { display: block; }
:root[data-tema="claro"] .tema-icone-escuro { display: none; }

.tema-painel {
    width: min(280px, calc(100vw - 36px));
    display: grid;
    gap: 4px;
}

.tema-opcao {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--raio);
    background: transparent;
    color: var(--creme-2);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao);
}
.tema-opcao:hover { background: rgba(var(--tinta), 0.06); color: var(--creme); }
.tema-opcao span { display: grid; gap: 1px; }
.tema-opcao strong { font-size: 14.5px; color: var(--creme); }
.tema-opcao small { font-size: 12.5px; color: var(--neutro); }
.tema-opcao svg { flex-shrink: 0; }

.tema-opcao.ativo {
    border-color: var(--dourado);
    background: rgba(227, 166, 59, 0.10);
    color: var(--dourado);
}
.tema-opcao.ativo::after {
    content: "✓";
    margin-left: auto;
    font-weight: 800;
    color: var(--dourado);
}

/* Com o menu no botão (até 960px), tema, sino e conta ficam juntos à
   direita, antes do botão do menu, como já era no celular. */
@media (max-width: 960px) {
    .topo-acoes { order: 0; margin-left: auto; gap: 8px; }
    .topo-acoes ~ .menu-abrir { margin-left: 0; }
}

/* Celular estreito: os botões redondos do topo encolhem um pouco. */
@media (max-width: 380px) {
    .topo-acoes .sino-botao { width: 36px; height: 36px; }
}

/* Troca de tema sem piscar em pedaços: tudo muda junto. */
:root[data-tema] body { transition: background-color 180ms ease, color 180ms ease; }

/* Tema claro: o mapa deixa de ser escurecido (fica só um pouco menos
   colorido, para os pinos dourados continuarem sendo o destaque) e o
   fundo borrado atrás da foto do anúncio clareia junto. */
:root[data-tema="claro"] .mapa-tela .leaflet-tile-pane { filter: grayscale(0.55) contrast(0.98); }
:root[data-tema="claro"] .galeria-fundo { filter: blur(26px) saturate(1.05) brightness(1.02); opacity: 0.55; }

/* Celular estreito: o selo da marca já traz "AUKAGE" escrito, então o
   nome ao lado sai e sobra espaço para aparência, sino e conta. */
@media (max-width: 400px) {
    .marca-texto { display: none; }
}

/* ---------------------------------------------------------------- */
/* Distância do topo até o conteúdo                                  */
/*                                                                   */
/* A primeira seção de cada página herdava o respiro de uma seção do */
/* meio (72px, e 96px na home), no celular isso virava um vão entre */
/* o menu e o título. A primeira seção agora começa mais perto do    */
/* topo, e o respiro cresce só um pouco com a largura da tela. As    */
/* seções seguintes continuam como estavam.                          */
/* ---------------------------------------------------------------- */
#conteudo > section.secao:first-of-type,
#conteudo > section.secao-fina:first-of-type {
    padding-top: clamp(24px, 3.5vw, 44px);
}

/* A abertura da home tem título grande: um pouco mais de ar no
   computador, quase nada a mais no celular. */
#conteudo > section.secao-abertura:first-of-type {
    padding-top: clamp(28px, 5vw, 64px);
}

/* Aviso de "salvo com sucesso" acima da página: sem somar dois vãos. */
#conteudo > .envolucro:first-child + section.secao,
#conteudo > .envolucro:first-child + section.secao-fina { padding-top: 20px; }

/* Barra de progresso do envio de fotos, dentro da área de soltar. */
.solta-fotos-progresso {
    display: block;
    width: min(360px, 100%);
    margin-top: 6px;
}

/* Marcadores do plano (importação, página própria, vídeo, tour…). */
.plano-marcadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 10px 22px;
    margin: 6px 0 18px;
}

/* Conversa do suporte, em balões dos dois lados.
   -------------------------------------------------------------------
   Antes era uma pilha de blocos, todos alinhados à esquerda, separados
   por linha. Dava para ler, mas não dava para ENXERGAR a conversa: quem
   abria um chamado de dez idas e vindas tinha de ler o nome em cada
   bloco para saber quem estava falando.
   No aplicativo já era assim, e a pessoa que usa os dois notou a
   diferença. Lado é mais rápido que nome: o olho separa antes de ler.
   O que é "meu" muda conforme quem olha, no painel do cliente, a fala
   dele; na central, a fala da equipe, então quem decide o lado é a
   página, pela classe .conversa-minha. */
.conversa { display: flex; flex-direction: column; gap: 12px; }

.conversa-fala {
    max-width: 78%;
    align-self: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    /* O canto reto aponta para o lado de quem fala: é o detalhe que faz
       a pilha parecer conversa mesmo sem cor nenhuma. */
    border-bottom-left-radius: 4px;
    background: var(--superficie-2);
}

.conversa-minha {
    align-self: flex-end;
    border-bottom-left-radius: var(--raio-g);
    border-bottom-right-radius: 4px;
    border-color: rgba(227, 166, 59, 0.35);
    background: rgba(227, 166, 59, 0.09);
}

/* O recado interno não é fala de ninguém para o cliente: fica no meio,
   largo e tracejado, para não se confundir com o que foi enviado. */
.conversa-interna {
    align-self: stretch;
    max-width: none;
    border-style: dashed;
    border-radius: var(--raio-g);
    background: transparent;
}

.conversa-fala p { margin: 0; line-height: 1.6; }

.conversa-quem {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    align-items: baseline; margin-bottom: 6px; font-size: 13px;
}

/* Em tela estreita o balão precisa de quase toda a largura, senão a
   linha quebra a cada três palavras. */
@media (max-width: 560px) {
    .conversa-fala { max-width: 92%; }
}

/* Um plano contratado por produto, com o encerrar do lado. */
.plano-contratado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--linha);
}

.plano-contratado:last-of-type { border-bottom: 0; padding-bottom: 0; }
.plano-contratado:first-of-type { padding-top: 0; }

/* Os módulos que o plano da gestão libera: por área, para a lista de
   doze caber em uma olhada. */
.plano-modulos {
    margin: 0 0 18px;
    padding: 14px 16px 16px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    background: var(--superficie-2);
}

.plano-modulos legend {
    padding: 0 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dourado);
}

.plano-modulos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 8px 22px;
}

.plano-modulos-grupo {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    color: var(--neutro);
}

/* Lista do que mudou entre duas versões do código (Camada 18). */
.versao-mudancas { margin-top: 10px; }
.versao-mudancas summary { cursor: pointer; font-size: 13.5px; color: var(--dourado); }
.versao-mudancas ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.versao-mudancas code { font-size: 12.5px; color: var(--creme-2); }

/* ---------------------------------------------------------------- */
/* Abas de assunto (tela Sistema)                                    */
/*                                                                   */
/* São links de verdade, com a aba no endereço: dá para guardar o    */
/* link da parte que se usa sempre, e o botão "voltar" funciona.     */
/* ---------------------------------------------------------------- */
/* Abas de verdade: cada uma com sua borda e seu fundo, e a ativa
   "aberta" para o conteúdo, sem a linha embaixo. Só o sublinhado
   dourado não bastava, de relance, parecia uma fileira de links. */
/* Trocar de aba não é sair da página: é trocar o que está embaixo da
   barra. Com o âncora #abas (posto pelo app.js) o navegador volta à
   própria barra em vez de ao topo, e esta margem impede que o
   cabeçalho fixo cubra a barra na chegada.
   No celular isso era grave: a barra fica abaixo do título e dos
   filtros, então cada toque numa aba jogava a pessoa para o começo da
   página e ela tinha de rolar de novo para ver o resultado. */
.abas,
.abas-formato {
    scroll-margin-top: calc(var(--altura-topo) + 12px);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    padding: 0 2px;
    border-bottom: 1px solid var(--linha-forte);
}

.aba,
.aba-formato {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    margin-bottom: -1px;
    border: 1px solid var(--linha);
    border-bottom-color: transparent;
    border-radius: var(--raio) var(--raio) 0 0;
    background: var(--superficie-2);
    color: var(--neutro);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.aba:hover,
.aba-formato:hover {
    background: var(--superficie);
    border-color: var(--linha-forte);
    color: var(--creme);
}

/* A ativa encosta no conteúdo: mesma cor de fundo e sem a linha de
   baixo, como a lingueta de uma pasta. O traço dourado no topo diz
   qual é, sem depender só da cor do texto. */
.aba.ativa,
.aba-formato.ativa {
    background: var(--superficie);
    border-color: var(--linha-forte);
    border-bottom-color: var(--superficie);
    box-shadow: inset 0 3px 0 var(--dourado);
    color: var(--creme);
    font-weight: 800;
}


.aba-contagem {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: var(--raio-pill);
    background: rgba(var(--tinta), 0.10);
    color: var(--neutro);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}
.aba-contagem-alerta { background: rgba(226, 104, 95, 0.16); color: var(--erro); }

/* A frase que abre cada aba: diz para que ela serve. */
.aba-explica {
    max-width: 74ch;
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--creme-2);
}

/* Cartão de ação: explicação à esquerda, botão à direita. */
.sistema-acao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.sistema-acao-texto { flex: 1 1 340px; min-width: 0; }
.sistema-acao h2 { font-size: 17px; margin: 0 0 6px; }
.sistema-acao p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 72ch; }

.sistema-guia { margin: 0; padding-left: 18px; display: grid; gap: 7px; font-size: 14px; line-height: 1.55; color: var(--creme-2); }

/* Ações do cartão de transação: Reconferir e Estornar (com o motivo). */
.transacao-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.transacao-estorno { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.transacao-estorno .entrada { width: 200px; padding: 7px 10px; font-size: 13px; }

@media (max-width: 620px) {
    .transacao-acoes { justify-content: flex-start; width: 100%; }
    .transacao-estorno { width: 100%; }
    .transacao-estorno .entrada { flex: 1 1 auto; width: auto; }
}

/* ---------------------------------------------------------------- */
/* Mapa do passo 2: onde fica o imóvel (alfinete arrastável)          */
/* ---------------------------------------------------------------- */
.mapa-imovel { margin-top: 20px; }
.mapa-imovel-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.mapa-imovel-recado { margin: 0; font-size: 14px; line-height: 1.5; color: var(--creme-2); max-width: 60ch; }

/* Latitude, longitude e o botão de marcar, numa linha só. O botão fica
   na altura dos campos, não embaixo do rótulo deles. */
.coordenadas {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    gap: 10px;
    margin-top: 12px;
}
.coordenadas .campo { margin: 0; }
@media (max-width: 560px) {
    .coordenadas { grid-template-columns: 1fr 1fr; }
    .coordenadas .botao { grid-column: 1 / -1; }
}

/* A permissão de aparecer no mapa e a confirmação do alfinete. Ficam
   coladas ao mapa, e não no bloco do endereço escrito: quem acabou de
   arrastar o alfinete decide ali mesmo, sem rolar a página. */
.mapa-permissao {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--linha-suave);
    border-radius: var(--raio);
    background: var(--superficie-2);
    display: grid;
    gap: 8px;
}
.mapa-permissao .campo-dica { margin: 0; }
.mapa-permissao [data-mapa-confirmacao] { display: grid; gap: 4px; }

/* A confirmação do alfinete, com destaque enquanto está pendente.
   Ela decide se o imóvel entra no mapa e vinha com a cara de uma
   observação qualquer. Dava para publicar sem ver. Confirmada, o
   realce some: aviso que continua gritando depois de atendido vira
   ruído, e a pessoa aprende a não ler. */
.mapa-confirma-pendente {
    margin: 4px -6px -4px;
    padding: 10px 12px;
    border-left: 3px solid var(--dourado);
    border-radius: var(--raio);
    background: rgba(227, 166, 59, .10);
}
.mapa-confirma-alerta { display: none; }
.mapa-confirma-pendente .mapa-confirma-alerta {
    display: flex;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--creme-2);
}
.mapa-confirma-pendente .mapa-confirma-alerta > span:first-child {
    flex-shrink: 0;
    font-weight: 800;
    color: var(--dourado);
}
.mapa-confirma-pendente .caixa-marcar { font-weight: 600; color: var(--creme); }
.mapa-imovel-recado.atencao { color: var(--dourado); }
.mapa-imovel-tela {
    height: 300px;
    border-radius: var(--raio);
    border: 1px solid var(--linha);
    overflow: hidden;
    background: var(--superficie-2);
}
@media (max-width: 620px) {
    .mapa-imovel-tela { height: 260px; }
}

/* Passo 2: Mapa / Satélite. A foto de satélite fica com as cores reais. */
.mapa-tela.mapa-satelite .leaflet-tile-pane,
:root[data-tema="claro"] .mapa-tela.mapa-satelite .leaflet-tile-pane { filter: none; }

.mapa-vistas {
    display: flex;
    padding: 3px;
    gap: 2px;
    border-radius: 999px;
    background: rgba(var(--fundo-rgb), 0.82);
    border: 1px solid var(--linha-forte);
    box-shadow: var(--sombra-g);
}
.mapa-vista {
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    background: transparent;
    color: var(--creme-2);
    font: 600 13px/1 var(--fonte);
    cursor: pointer;
}
.mapa-vista:hover { color: var(--creme); }
.mapa-vista.ativa { background: var(--dourado-fundo); color: var(--sobre-cor); }

/* ---------------------------------------------------------------- */
/* Notas fiscais: faixa do ambiente (testes x produção)              */
/* ---------------------------------------------------------------- */
.nfse-ambiente {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    margin: 0 0 18px;
    padding: 16px 20px;
    border-radius: var(--raio);
    border: 1px solid;
}
.nfse-ambiente p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--creme-2); max-width: 70ch; }
.nfse-ambiente-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.nfse-ambiente-rotulo::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
}
.nfse-ambiente-teste {
    background: rgba(227, 166, 59, 0.10);
    border-color: rgba(227, 166, 59, 0.55);
}
.nfse-ambiente-teste .nfse-ambiente-rotulo { color: var(--dourado); }
.nfse-ambiente-producao {
    background: rgba(111, 191, 115, 0.10);
    border-color: rgba(111, 191, 115, 0.55);
}
.nfse-ambiente-producao .nfse-ambiente-rotulo { color: var(--sucesso); }

.nfse-numeracao {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 12px 16px 14px;
    margin: 4px 0 18px;
    display: grid;
    gap: 10px;
}
.nfse-numeracao legend { padding: 0 6px; }
.nfse-numeracao-linha {
    display: grid;
    grid-template-columns: minmax(110px, 160px) repeat(2, minmax(0, 180px));
    gap: 0 14px;
    align-items: end;
}
.nfse-numeracao-linha > strong { padding-bottom: 12px; font-size: 14px; }
.nfse-numeracao-linha .campo { margin: 0; }
@media (max-width: 620px) {
    .nfse-numeracao-linha { grid-template-columns: 1fr 1fr; }
    .nfse-numeracao-linha > strong { grid-column: 1 / -1; padding-bottom: 0; }
}

/* ---------------------------------------------------------------- */
/* "Aguarde" no centro da tela (data-aguardar)                        */
/* ---------------------------------------------------------------- */
.aguarde { text-align: center; padding-top: 30px; }
.aguarde-giro {
    width: 42px;
    height: 42px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 3px solid rgba(var(--tinta), 0.14);
    border-top-color: var(--dourado);
    animation: aguarde-gira 0.9s linear infinite;
}
@keyframes aguarde-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .aguarde-giro { animation-duration: 2.4s; }
}
.aguarde-titulo { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--creme); }
.aguarde-detalhe { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--creme-2); }
.aguarde .confirmacao-acoes { justify-content: center; }
.aguarde-ok .aguarde-giro,
.aguarde-erro .aguarde-giro { animation: none; border-color: currentColor; display: flex; align-items: center; justify-content: center; }
.aguarde-ok .aguarde-giro { color: var(--sucesso); }
.aguarde-ok .aguarde-giro::after { content: "✓"; font-size: 22px; font-weight: 800; }
.aguarde-erro .aguarde-giro { color: var(--erro); }
.aguarde-erro .aguarde-giro::after { content: "!"; font-size: 22px; font-weight: 800; }

/* ------------------------------------------------------------------ */
/* Integrações: agrupadas por assunto, cada uma com "Como funciona"    */
/* ------------------------------------------------------------------ */
.integracao-grupo {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dourado);
    margin: 26px 0 10px;
}

.integracao-grupo:first-of-type { margin-top: 8px; }

/* O passo a passo fica fechado: quem já sabe não precisa passar por ele
   toda vez, e quem não sabe encontra no mesmo lugar em toda integração. */
.integracao-ajuda {
    margin-top: 14px;
    border-top: 1px solid var(--linha);
    padding-top: 12px;
}

.integracao-ajuda > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dourado);
    list-style: none;
}

.integracao-ajuda > summary::-webkit-details-marker { display: none; }

.integracao-ajuda > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transicao);
}

.integracao-ajuda[open] > summary::after { transform: rotate(225deg) translateY(-2px); }

.integracao-ajuda > div {
    margin-top: 12px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--creme-2);
}

.integracao-ajuda p { margin: 0 0 12px; max-width: 76ch; }
.integracao-ajuda .tutorial-lista { margin-bottom: 12px; }
.integracao-ajuda code { font-size: 13px; }

/* Notas fiscais: os interruptores no topo e as ações de cada cartão. */
.nfse-chaves { margin-bottom: 18px; display: grid; gap: 14px; }

.nfse-chave {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nfse-chave + .nfse-chave { border-top: 1px solid var(--linha); padding-top: 14px; }
.nfse-chave strong { display: block; font-size: 15px; }
.nfse-chave p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.55; max-width: 68ch; }
.nfse-chave form { display: flex; align-items: center; flex: 0 0 auto; }

/* Ver primeiro, editar depois: a fileira de botões embaixo da ficha. */
.nfse-acoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--linha);
}

.nfse-acoes form { display: inline-flex; }

/* ------------------------------------------------------------------ */
/* Grade de campos: rótulo, campo e dica alinhados entre as colunas    */
/*                                                                     */
/* Sem isto, um rótulo que quebra em duas linhas empurra só o campo    */
/* dele para baixo, e a fileira inteira fica torta. Com subgrid, as    */
/* três partes de cada campo dividem as mesmas faixas da grade: todos  */
/* os campos começam na mesma altura, tenha o rótulo uma linha ou duas. */
/* ------------------------------------------------------------------ */
.grade-campos {
    display: grid;
    gap: 0 18px;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    align-items: start;
}

@supports (grid-template-rows: subgrid) {
    .grade-campos { grid-template-rows: auto; }

    .grade-campos > .campo {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        row-gap: 0;
    }
}

/* Ponto de situação na aba: verde ligado, apagado quando falta
   configurar. Dá para ver o estado das sete integrações sem abrir
   nenhuma delas. */
.aba-ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neutro-2);
    flex: none;
}

.aba-ponto-ligado { background: var(--sucesso); }

/* ---------------------------------------------------------------- */
/* Modelo lógico do banco (Sistema → Banco de dados)                 */
/*                                                                    */
/* Um diagrama de tabelas que se lê com o mouse: cada caixa é uma     */
/* tabela, agrupada por assunto, e as linhas por baixo são as chaves  */
/* estrangeiras. Passar o mouse acende a vizinhança e apaga o resto.  */
/* ---------------------------------------------------------------- */
.diagrama {
    position: relative;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--linha-suave);
    border-radius: var(--raio-g);
    background: var(--superficie-2);
    overflow: hidden;
}
.diagrama-linhas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.diagrama-linha {
    fill: none;
    stroke: var(--linha-forte);
    stroke-width: 1.2;
    opacity: .5;
    transition: opacity .15s ease, stroke .15s ease, stroke-width .15s ease;
}
.diagrama-linha-cruzada { stroke: var(--dourado-escuro); opacity: .62; }
.diagrama-focado .diagrama-linha { opacity: .12; }
.diagrama-focado .diagrama-linha.acesa {
    stroke: var(--dourado);
    stroke-width: 2;
    opacity: 1;
}

.diagrama-grupos {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 14px;
}
.diagrama-grupo {
    border: 1px dashed var(--linha);
    border-radius: var(--raio);
    padding: 10px;
    background: color-mix(in srgb, var(--superficie) 70%, transparent);
}
.diagrama-grupo-nome {
    display: block;
    margin-bottom: 8px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--neutro-2);
}
.diagrama-lista { display: grid; gap: 6px; }

.diagrama-caixa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--creme-2);
    font-size: 12.5px;
    text-decoration: none;
    transition: border-color .15s ease, opacity .15s ease, transform .15s ease;
}
.diagrama-caixa strong { font-weight: 700; word-break: break-all; }
.diagrama-numero { color: var(--neutro); font-size: 11.5px; flex: none; }

.diagrama-focado .diagrama-caixa { opacity: .3; }
.diagrama-focado .diagrama-caixa.acesa { opacity: 1; border-color: var(--dourado-escuro); }
.diagrama-focado .diagrama-caixa.origem {
    opacity: 1;
    border-color: var(--dourado);
    transform: translateY(-1px);
}
.diagrama-caixa:hover, .diagrama-caixa:focus-visible { border-color: var(--dourado); }

/* O cartão do que está sob o mouse: fica abaixo do desenho, e não
   colado ao cursor. Cartão que persegue o mouse tapa justamente a
   caixa que a pessoa está tentando olhar. */
.diagrama-cartao {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--linha-suave);
    border-left: 3px solid var(--dourado);
    border-radius: var(--raio);
    background: var(--superficie-2);
    display: grid;
    gap: 4px;
}
.diagrama-cartao > strong { font-size: 15px; }
.diagrama-cartao-linha { color: var(--neutro); font-size: 13px; }
.diagrama-cartao-titulo {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--neutro-2);
}
.diagrama-cartao-lista {
    margin: 0;
    padding-left: 18px;
    color: var(--creme-2);
    font-size: 13px;
    line-height: 1.6;
}

/* ---------------------------------------------------------------- */
/* O prompt de continuidade (Desenvolvimento)                        */
/*                                                                    */
/* Recolhido por padrão: é um texto longo, que se lê uma vez e se     */
/* copia nas outras. Aberto, ele empurraria o roteiro de camadas para */
/* baixo em toda visita.                                              */
/* ---------------------------------------------------------------- */
.continuidade { margin-bottom: 26px; }
.continuidade-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
}
.continuidade-topo::-webkit-details-marker { display: none; }
.continuidade-topo::after {
    content: "mostrar";
    align-self: center;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dourado);
}
.continuidade[open] .continuidade-topo::after { content: "esconder"; }

.continuidade-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 10px;
}

.continuidade-texto {
    max-height: 420px;
    overflow: auto;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--linha-suave);
    border-radius: var(--raio);
    background: var(--superficie-2);
    color: var(--creme-2);
    font-family: var(--fonte-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12.5px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------------------------------------------------------------------
   Mensagem no anúncio, e a caixa de entrada de quem anuncia
   --------------------------------------------------------------------- */

/* A armadilha do robô. Fora da tela, e não display:none. Leitor de
   tela pula pelo aria-hidden, e o robô que ignora CSS preenche. */
.campo-armadilha {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mensagens-lista { display: grid; gap: 14px; }

.mensagem-recebida { display: grid; gap: 2px; }

/* A borda dourada diz o que ainda não foi lido, sem precisar de selo em
   cima de selo quando a lista está cheia. */
.mensagem-nova { border-left: 3px solid var(--dourado); }

.mensagem-cabeca { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.mensagem-texto {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: var(--superficie-2);
    border-radius: var(--raio);
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.mensagem-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.mensagem-acoes select { font-size: 13px; padding: 5px 8px; }

@media (max-width: 560px) {
    /* No celular a caixinha de situação desce para a própria linha em vez
       de espremer os botões de responder, que são o que se usa. */
    .mensagem-acoes form { margin-left: 0 !important; width: 100%; }
}

/* =====================================================================
   A marca no rodapé

   Aqui ela é a horizontal, com o slogan embaixo: o contrário do topo,
   que usa a empilhada com o slogan ao lado. O rodapé é uma coluna
   estreita: a horizontal preenche bem a largura, e a frase embaixo
   ganha a linha inteira em vez de espremer ao lado.

   Classe própria, e não a ".marca" do topo. Os dois têm arranjos
   opostos e mudariam junto se dividissem a mesma classe.
   ===================================================================== */
.rodape-marca {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 16px;
    color: var(--creme);
    text-decoration: none;
}

.rodape-marca:hover { color: var(--creme); }

/* A altura manda, a largura acompanha: a marca é desenho, não texto. */
.rodape-marca img { height: 34px; width: auto; object-fit: contain; }

.rodape-slogan {
    font-family: var(--fonte-serif);
    font-style: italic;
    font-size: 13px;
    color: var(--neutro);
    letter-spacing: 0.01em;
}

/* =====================================================================
   Andamento da nota fiscal (camada 8)

   Emissão de nota conversa com o governo, que sai do ar, muda regra e
   demora para responder. Antes, a tela mostrava só o estado final e o
   último erro, quando algo travava, não dava para saber em que etapa
   parou nem quantas vezes tentou. Esta é a mesma ideia do histórico de
   moderação, aplicada ao caminho da nota.
   ===================================================================== */

.nota-andamento {
    margin-top: 12px;
    border-top: 1px solid var(--linha);
    padding-top: 10px;
}

.nota-andamento > summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--creme-2);
    list-style: none;
}

.nota-andamento > summary::-webkit-details-marker { display: none; }

.nota-andamento > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 7px;
    color: var(--creme-3);
    transition: transform .15s ease;
}

.nota-andamento[open] > summary::before { transform: rotate(90deg); }

.linha-tempo {
    margin: 14px 0 2px;
    padding: 0 0 0 22px;
    list-style: none;
    border-left: 2px solid var(--linha);
}

.linha-tempo-item {
    position: relative;
    padding: 0 0 16px;
}

.linha-tempo-item:last-child { padding-bottom: 2px; }

/* A bolinha fica em cima da linha, por isso o deslocamento negativo
   precisa bater com o padding da lista e a espessura da borda. */
.linha-tempo-item::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--creme-3);
    box-shadow: 0 0 0 3px var(--superficie);
}

.linha-tempo-ok::before    { background: var(--sucesso); }
.linha-tempo-erro::before  { background: var(--erro); }
.linha-tempo-aviso::before { background: var(--aviso); }

.linha-tempo-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
}

.linha-tempo-cabeca .fraco { font-size: 12.5px; }

.linha-tempo-texto {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--creme-2);
    word-break: break-word;
}

.linha-tempo-meta { margin: 4px 0 0; font-size: 12px; }

/* O código do governo (E0712, E0824...) é o que se procura na
   documentação deles, por isso sai destacado do resto da linha. */
.linha-tempo-codigo {
    display: inline-block;
    padding: 1px 7px;
    margin-right: 6px;
    border-radius: 5px;
    background: rgba(227, 166, 59, .16);
    color: var(--dourado);
    font-weight: 700;
    letter-spacing: .02em;
}

/* Texto que só o leitor de tela lê.
   
   Diferente de .pular-para-conteudo, que é um atalho e APARECE quando
   recebe foco: este nunca aparece. Serve para avisar que a lista mudou
   quando o filtro busca sozinho: quem enxerga vê a página trocar, quem
   não enxerga precisa ouvir. */
.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   Abertura da home sobre a foto aérea

   A imagem é da própria Aukage: Belo Horizonte de cima, ao pôr do sol.
   Foto de banco de imagens diria "portal genérico"; esta diz que a
   empresa conhece Minas de perto, que é o argumento do negócio.

   O texto da abertura fica CLARO nos dois temas, e não só no escuro: a
   foto tem o sol e o céu na altura do título, e texto escuro ali some.
   Os valores do escurecimento vieram de medição, não de tentativa, a
   luminância da foto na faixa do texto é 144 na média e 189 na parte
   mais clara do céu, e esta combinação deixa o contraste com o texto
   claro em torno de 13:1. A norma pede 4,5:1.
   ===================================================================== */

.abertura-com-foto {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* O fundo por baixo da foto: enquanto ela carrega, o texto claro já
       tem onde se apoiar, em vez de piscar preto sobre branco. */
    background: #0B0A09;
    padding-bottom: clamp(40px, 5vw, 68px);
}

.abertura-fundo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    /* 0,7 escondia os prédios: o contraste com o texto ficava em 15:1,
       três vezes o que a norma pede, e a foto virava um fundo cinza.
       Com 0,95 e as sombras abaixo bem mais leves a cidade aparece, e o
       pior ponto: o céu claro atrás do título, ainda dá 5:1, acima
       dos 4,5:1 exigidos. Daqui para cima o texto começa a sofrer. */
    filter: brightness(0.95) saturate(1.08);
}

/* Duas sombras: a de baixo assenta o texto e costura a foto com a seção
   seguinte; a da esquerda protege a coluna onde o texto fica e deixa a
   imagem respirar do meio para a direita, onde não há texto nenhum. */
.abertura-com-foto::before,
.abertura-com-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.abertura-com-foto::before {
    background: linear-gradient(
        to top,
        rgba(11, 10, 9, 0.8) 0%,
        rgba(11, 10, 9, 0.24) 45%,
        rgba(11, 10, 9, 0.12) 78%,
        rgba(11, 10, 9, 0.1) 100%
    );
}

.abertura-com-foto::after {
    background: linear-gradient(
        to right,
        rgba(11, 10, 9, 0.3) 0%,
        rgba(11, 10, 9, 0.2) 34%,
        rgba(11, 10, 9, 0.06) 70%,
        transparent 90%
    );
}

/* Os tokens voltam aos valores do tema escuro dentro da abertura, do
   mesmo jeito que já acontece no que fica sobre foto. Assim o título, o
   parágrafo, o selo e os números continuam legíveis no tema claro sem
   que cada um precise de uma regra própria. */
.abertura-com-foto,
:root[data-tema="claro"] .abertura-com-foto {
    --creme:         #F4F1EA;
    --creme-2:       #D3CCBF;
    --creme-3:       #C9C0B0;
    --neutro:        #A79E8F;
    --superficie:    #151310;
    --superficie-2:  #1C1915;
    --linha:         rgba(240, 232, 215, 0.16);
    --linha-forte:   rgba(240, 232, 215, 0.26);
    /* O dourado também: no tema claro ele é escurecido (#96600E) para
       ter contraste sobre branco, e sobre a foto escura ficava apagado.
       Aqui vale o dourado do tema escuro, que é o da marca. */
    --dourado:        #E3A63B;
    --dourado-claro:  #F2C877;
    --dourado-escuro: #C98E2A;
    color: #FFFDF8;
    /* Com a foto tão visível, é a sombra que garante a leitura em
       cima de qualquer trecho da imagem, inclusive nos números dos
       contadores, que não têm classe própria. */
    text-shadow: 0 1px 12px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .4);
}

.abertura-com-foto h1,
.abertura-com-foto .rotulo,
.abertura-com-foto .suave { color: #FFFDF8; }

.abertura-com-foto h1 { text-shadow: 0 2px 30px rgba(0, 0, 0, .7), 0 1px 4px rgba(0, 0, 0, .5); }
.abertura-com-foto .suave { color: rgba(255, 253, 248, .95); text-shadow: 0 1px 16px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .45); }
.abertura-com-foto .rotulo { color: rgba(255, 253, 248, .88); text-shadow: 0 1px 12px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .45); }

/* ---------------------------------------------------------------------
   O CONVITE PARA O APLICATIVO, na abertura.

   MESMA INTENÇÃO, FORMA DIFERENTE POR APARELHO, e é essa a razão de
   existirem duas peças aqui em vez de uma:

   - No CELULAR aparece o botão. Quem já está no telefone não escaneia
     QR com o próprio telefone, e é justamente o celular que traz a
     maior parte do tráfego de um portal de imóveis.
   - No COMPUTADOR aparece o QR, porque aí a pessoa tem o aparelho na
     mão e a câmera resolve. Mandar alguém digitar o endereço da loja
     no celular é perder a visita.

   A escolha é por largura de tela, sem JavaScript: a CSP do portal é
   fechada e a decisão não precisa de script nenhum.
--------------------------------------------------------------------- */
.convite-app {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
}

/* O QR e a frase que explica o QR andam juntos: no celular os dois
   saem, porque "aponte a câmera" dito para quem está com o telefone na
   mão é instrução para apontar o aparelho para ele mesmo. */
.convite-app-qr,
.convite-app-texto { display: none; }

.convite-app-qr img {
    width: 92px;
    height: 92px;
    border-radius: 10px;
    /* A margem branca é exigência do padrão QR, não enfeite: o leitor
       precisa de silêncio em volta para achar as bordas. Ela já vem
       dentro do SVG, então aqui o fundo é só o encosto. */
    background: #fff;
    display: block;
}

.convite-app-texto {
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 23ch;
    color: rgba(255, 253, 248, .92);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .45);
}

.convite-app-texto strong { display: block; font-size: 14.5px; }

/* No computador o botão sai e entra o QR. 860px é onde o teclado
   começa: abaixo disso é telefone na mão, e câmera não serve. */
@media (min-width: 860px) {
    .convite-app-qr { display: block; }
    .convite-app-texto { display: block; }
    .convite-app .selo-loja { display: none; }
}

/* A caixa de busca sobre a foto: vidro fosco, para a imagem continuar
   viva atrás sem comer o texto digitado. */
.abertura-com-foto .busca-caixa {
    background: rgba(23, 20, 15, .72);
    border-color: rgba(240, 232, 215, .24);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.abertura-com-foto .busca-caixa input { color: #FFFDF8; }
.abertura-com-foto .busca-caixa input::placeholder { color: rgba(255, 253, 248, .58); }

/* A caixa de busca no tema claro. "abertura-com-foto .busca-caixa no tema claro".
   A abertura devolve os tokens do tema escuro para tudo que está sobre a
   foto, e a caixa vinha junto: no tema claro ela continuava preta, sendo
   a única peça da tela que ignorava a escolha de quem clicou no sol.
   Título, parágrafo e números continuam brancos de propósito. Ali o
   fundo é a foto, e não há superfície onde apoiar texto escuro. A caixa
   tem superfície própria, então ela pode (e deve) clarear.
   A sombra de texto que a abertura aplica em tudo precisa sair daqui:
   sombra escura embaixo de letra escura só borra. */
:root[data-tema="claro"] .abertura-com-foto .busca-caixa {
    background: rgba(255, 253, 248, .94);
    border-color: rgba(28, 24, 18, .16);
}

:root[data-tema="claro"] .abertura-com-foto .busca-caixa,
:root[data-tema="claro"] .abertura-com-foto .busca-caixa input {
    color: #1C1812;
    text-shadow: none;
}

:root[data-tema="claro"] .abertura-com-foto .busca-caixa input::placeholder {
    color: rgba(28, 24, 18, .56);
}

/* A lupa é um SVG com stroke="currentColor" e classe .fraco. */
:root[data-tema="claro"] .abertura-com-foto .busca-caixa .fraco {
    color: rgba(28, 24, 18, .5);
}

/* O selo tem contorno só; sobre céu claro ele sumia. */
.abertura-com-foto .selo-dourado {
    background: rgba(11, 10, 9, .62);
    border-color: rgba(245, 194, 101, .5);
    color: #F5C265;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------------
   Seção com foto ao fundo (reaproveitável)

   Diferente da abertura, aqui o que vai por cima são painéis de fundo
   sólido: o texto deles já tem o contraste garantido pelo próprio
   painel. A foto só precisa escurecer o bastante para os painéis
   brancos saltarem dela, sem isso o bloco fica com a mesma cor da
   seção de cima e as duas se confundem.
   ------------------------------------------------------------------ */
.secao-com-foto {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #0B0A09;
}

.secao-foto-fundo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 72% deixa de fora o céu, que ocupa o terço de cima da foto e
       nada acrescenta atrás do vidro, e centra na avenida elevada. 
       a linha larga e clara que atravessa a imagem. */
    object-position: center 72%;
    filter: brightness(0.88) saturate(1.05);
}

.secao-com-foto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(11, 10, 9, 0.40) 0%,
        rgba(11, 10, 9, 0.18) 45%,
        rgba(11, 10, 9, 0.44) 100%
    );
}

/* Painel de vidro: sólido, ele tapava a foto por inteiro. A conta que
   define as opacidades é o contraste do texto no pior ponto da imagem,
   e os dois temas falham em lados opostos. O claro tem painel branco
   com texto escuro e sofre onde a foto é escura; o escuro tem painel
   escuro com texto claro e sofre onde ela é clara.
   Medido no que de fato passa por trás de cada painel, o mínimo desta
   foto é 0,55 no tema claro e 0,31 no escuro; os valores abaixo ficam
   acima dos dois, com folga, contra os 4,5:1 que a norma pede. O claro
   é o que aperta: é ele que manda em qualquer troca de foto.
   O desfoque não muda a média, mas tira o detalhe fino de trás das
   letras: é o que permite abrir tanto a transparência sem a leitura
   ficar cansativa. Mesmo recurso que o topo e a caixa de busca já usam. */
.secao-com-foto .painel {
    background: rgba(21, 19, 16, .40);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
    border-color: rgba(240, 232, 215, .26);
    box-shadow: 0 20px 46px rgba(0, 0, 0, .34);
}

:root[data-tema="claro"] .secao-com-foto .painel {
    background: rgba(255, 255, 255, .58);
    border-color: rgba(255, 255, 255, .6);
}

/* Foto de cidade no cartão. A do imóvel é recortada em 4/3, que é a
   proporção de foto de casa; a aérea nasce em 16/9 e, cortada em 4/3,
   perderia justamente o horizonte, que é o assunto dela. */
.cartao-foto-larga { aspect-ratio: 16 / 9; }

/* ---------------------------------------------------------------
   A barra de paginação de todas as listas do sistema.

   Mora aqui, e não no gestao.css, porque o app.css é o único que
   as quatro áreas carregam: portal, painel, Central e gestão. No
   gestao.css ela existiria só para duas delas, e o painel voltaria
   a desenhar a sua.
   --------------------------------------------------------------- */
.g-paginacao {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 16px; padding: 12px 14px;
    background: var(--superficie); border: 1px solid var(--linha);
    border-radius: var(--raio-g);
}
.g-paginacao-conta { font-size: 13.5px; color: var(--creme-3); }
.g-paginacao-conta strong { color: var(--creme); }

/* O seletor fica compacto: ele é ajuste, não o assunto da barra. */
.g-paginacao-tamanho { display: flex; align-items: center; gap: 8px; margin: 0; }
.g-paginacao-tamanho .campo-rotulo { margin: 0; white-space: nowrap; }
.g-paginacao-tamanho .entrada { width: auto; padding: 6px 28px 6px 10px; font-size: 13.5px; }

.g-paginacao-passos { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.g-paginacao-numero,
.g-paginacao-atual {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 6px;
    border-radius: 8px;
    font-size: 13.5px; font-weight: 700;
}
.g-paginacao-numero { color: var(--creme-2); }
.g-paginacao-numero:hover { background: var(--superficie-2); color: var(--creme); }
.g-paginacao-atual { background: var(--dourado); color: var(--sobre-cor); }
.g-paginacao-buraco { padding: 0 2px; color: var(--neutro); }

/* Botão desativado é <span>, e não <a>: link sem destino continua
   recebendo foco do teclado e promete uma navegação que não existe. */
.g-paginacao-passos [aria-disabled="true"] { opacity: .45; pointer-events: none; }

@media (max-width: 700px) {
    .g-paginacao { justify-content: center; }
    .g-paginacao-numero, .g-paginacao-buraco { display: none; }
}

/* ------------------------------------------------------------------
   Avisos flutuantes

   A confirmação de cada ação vinha no topo da página, dentro do fluxo:
   quem enviava uma mensagem no fim de um anúncio voltava para o mesmo
   ponto e não via nada. O aviso estava fora da tela.

   Só o envoltório muda de desenho. A classe .aviso continua servindo
   aos recados fixos dentro das páginas (etapa do anúncio, moderação,
   destacar), e esses não flutuam.
   ------------------------------------------------------------------ */
.avisos-flutuantes {
    position: fixed;
    top: 16px; right: 16px; z-index: 120;
    display: flex; flex-direction: column; gap: 10px;
    width: min(400px, calc(100vw - 32px));
    pointer-events: none;
}

.avisos-flutuantes .aviso {
    margin: 0;
    padding-right: 42px;
    position: relative;
    background: var(--superficie);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .34), 0 2px 6px rgba(0, 0, 0, .2);
    pointer-events: auto;
    animation: aviso-entra 220ms ease-out both;
}

.avisos-flutuantes .aviso.saindo {
    animation: aviso-sai 200ms ease-in both;
}

.aviso-fechar {
    position: absolute; top: 10px; right: 10px;
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0;
    border: 0; border-radius: 6px;
    background: transparent; color: var(--neutro);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}

.aviso-fechar:hover { background: var(--superficie-2); color: var(--creme); }

@keyframes aviso-entra {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes aviso-sai {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateX(16px); }
}

/* No celular ele ocupa a largura toda, no alto: canto direito estreito
   cortaria a frase no meio. */
@media (max-width: 620px) {
    .avisos-flutuantes {
        top: 10px; right: 10px; left: 10px;
        width: auto;
    }
}

/* Quem pediu menos movimento no sistema recebe o aviso sem deslizar. */
@media (prefers-reduced-motion: reduce) {
    .avisos-flutuantes .aviso,
    .avisos-flutuantes .aviso.saindo { animation: none; }
}

/* A LISTA DE CIDADES DA BUSCA (18/10/2026)
   --------------------------------------------------------------------
   Ela existe porque o menu do <datalist> não se veste: o navegador
   desenha do jeito dele, em preto, fora do tom do portal, e o Geraldo
   apontou isso no mesmo dia em que o campo mudou. O app.js monta esta
   lista por cima do datalist, que fica no HTML como reserva.

   O pai é o .filtro, que já é position:relative? Não é, e por isso o
   relative vem aqui: sem ele a lista se ancoraria na página e
   escorregaria para longe do campo ao rolar. */
.filtro[data-cidade-campo] { position: relative; }

.sugestoes-cidade {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 302px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}

.sugestao-cidade {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: calc(var(--raio) - 3px);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14.5px;
    text-align: left;
    cursor: pointer;
}

/* O teclado e o mouse acendem a MESMA marca: quem desce com a seta e
   quem passa o mouse precisam ver a mesma coisa selecionada. */
.sugestao-cidade:hover,
.sugestao-cidade.marcada { background: rgba(var(--tinta), .07); }

.sugestao-cidade small {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--dourado);
}