/* ===========================================================================
   style.css — BASE DO SITE
   ---------------------------------------------------------------------------
   Aqui mora só o que é usado em TODA página:

     1. :root .............. tokens (cores, tipografia, espaçamento, sombras)
     2. Reset e base ....... elementos, container, títulos
     2c. Preloader ....... cortina de carregamento (todas as páginas)
     3. Botões e campos .... .btn e suas variações, .campo de formulário
     4. Header ............. topo, menu desktop, gaveta mobile
     5. Card de imóvel ..... componente compartilhado (home + listagem)
     6. Carrossel .......... componente compartilhado (banner da home)
     7. Footer ............. rodapé, WhatsApp flutuante, voltar ao topo
     8. Dropdown e campo de valor ... componentes de formulário (busca)
     9. Formulário de lead . contato / anuncie / interesse no imóvel

   Cada página tem o SEU arquivo (home.css, imoveis.css, detalhes.css) e é
   carregado depois deste. Nada de estilo de página aqui dentro.
   =========================================================================== */

/* ===========================================================================
   0. FONTES — self-hosted (fonts/)
   ---------------------------------------------------------------------------
   UMA FAMÍLIA, UM PESO, UMA PÁGINA: Encode Sans Condensed 400, latin, usada só
   pelos dois títulos da página de administração de condomínios.

   O RESTO DO SITE NÃO BAIXA FONTE NENHUMA. O que chega ao corpo é
   `font-family: "Roboto", sans-serif` — a declaração do legado, letra por
   letra —, e o legado NÃO BAIXA Roboto: quem desenha é a fonte que a máquina
   do visitante tiver (no Windows, Arial). Copiar a declaração é o que faz o
   site novo e o legado renderizarem igual na mesma máquina.

   ⚠ NÃO ACRESCENTAR FAMÍLIA QUE O LEGADO NÃO BAIXA. Fonte carregada aqui e
   ausente lá muda a largura de todo texto e desfaz a medição.

   ⚠ O PESO 400 É O ÚNICO QUE EXISTE: a URL do legado é a antiga, SEM `:wght@`,
   e devolve só ele. Todo `font-weight: 500` que a folha de lá escreve nos
   títulos cai no 400 na hora de desenhar — não adianta hospedar o arquivo de
   500 aqui.

   SELF-HOSTED, como manda a casa: baixado do Google e servido de
   `public/fonts/`. Nada de <link> para CDN. */
@font-face {
    font-family: 'Encode Sans Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/encode-sans-condensed/encode-sans-condensed-400-latin.woff2') format('woff2');
}

:root {
    /* ---- Marca -------------------------------------------------------------
       MEDIDO NO NAVEGADOR, NO SITE DE REFERÊNCIA. Os nomes --ltn__* são os do
       tema de origem, anotados para conferência lado a lado.

       QUEM APARECE NA TELA É O AZUL #11509d (`--ltn__secondary-color`): é ele
       que pinta os dois botões da faixa de busca, o preço do card e a barra de
       copyright do rodapé. O `--ltn__primary-color` do tema é #000000 e não
       pinta quase nada — não é a cor da marca.

       ⚠ SÃO DOIS AZUIS, e a diferença é real: o botão "ÁREA DO CLIENTE" do
       cabeçalho usa #1c51ab, CRAVADO NO `style=` do próprio link no legado,
       enquanto todo o resto usa #11509d. Não é hover nem variação de estado:
       são dois valores diferentes no ar, lado a lado, e estão replicados assim.

       CONTRASTE: branco sobre #11509d dá 7,4:1 e sobre #1c51ab, 6,9:1 — os
       dois passam folgado nos 4,5:1 de texto pequeno. */
    --cor-primaria: #11509d;         /* --ltn__secondary-color — a que pinta a tela */
    --cor-primaria-forte: #0d3f7c;   /* 20% mais escura — hover dos botões */
    --cor-primaria-suave: rgba(17, 80, 157, .12);

    /* TINTA QUE VAI EM CIMA DO AZUL — branco, como na referência. */
    --cor-sobre-primaria: #ffffff;

    /* ---- Neutros -----------------------------------------------------------
       MEDIDO: #071c1f é a tinta de título (`--ltn__heading-color`), e é também
       a cor dos dois telefones do cabeçalho e do título do card; #5c727d é o
       texto corrido (`--ltn__paragraph-color`, e o `color` do próprio body);
       #dedfe0 é a linha de borda. (O fundo do rodapé é #ededed — ver
       `.rodape__principal`.) */
    --cor-escura: #071c1f;           /* --ltn__heading-color */
    --cor-texto: #5c727d;            /* --ltn__paragraph-color — texto corrido */
    --cor-texto-suave: #7a8b93;
    --cor-borda: #dedfe0;
    --cor-fundo: #ffffff;
    /* MEDIDO: o `body` da referência é BRANCO (na base era #fafafa). */
    /* ⚠ #fafafa, NÃO BRANCO. O corpo do legado é `background-color: #fafafa`
       (bootstrap.css de lá, que vence o #f6f6f6 do styles.css): o vão abaixo
       do banner é rgb(250,250,250). */
    --cor-fundo-pagina: #fafafa;
    --cor-fundo-alt: #ffffff;        /* fundo de cartão */
    /* MEDIDO: `--section-bg-1` do tema, o cinza-azulado das faixas. */
    --cor-fundo-band: #f2f6f7;
    /* MEDIDO: fundo dos campos da faixa de busca e do item da gaveta mobile. */
    --cor-fundo-suave: #f8f9fa;

    /* Apoio */
    --cor-whatsapp: #25d366;
    /* Verde oficial do WhatsApp, igual à referência (rgb(37,211,102)). Fica em
       ~1,9:1 com o ícone branco, abaixo do mínimo de 3:1 para elemento gráfico
       — mantido por fidelidade ao legado; ver README. */
    --cor-branco: #ffffff;

    /* ---- Tipografia --------------------------------------------------------
       Número em coluna (valor, contador, comodidade) não troca de família: usa
       `font-variant-numeric: tabular-nums`, que iguala a largura dos dígitos
       sem precisar de uma fonte mono. */
    /* ⚠ A DECLARAÇÃO É A DO LEGADO, LETRA POR LETRA.

       O que chega ao `body` de lá é `font-family: "Roboto", sans-serif`, do
       `styles.css` — e ele SOBREVIVE, porque o `bootstrap.css` de lá é
       customizado e teve a fonte do `body` removida. Só que o site NÃO BAIXA
       Roboto: o <head> dele carrega Encode Sans Condensed e Open Sans, mais
       nada. Na prática o visitante lê o que a máquina dele tiver para
       "Roboto" — no Windows, que não tem, cai no sans-serif do sistema
       (Arial).

       Trocar por uma fonte nossa, ou acrescentar um fallback que o legado não
       tem, divergiria de propósito: muda a largura de todo texto da tela.

       ⚠ `--fonte-display` fica IGUAL a `--fonte`. O legado usa
       'Encode Sans Condensed' em meia dúzia de títulos específicos
       (`.module-title h1`, `.page-title h1`, `.advance-title`). Quando uma
       página precisar, ela vem self-hosted: nada de CDN. */
    --fonte-display: Roboto, sans-serif;
    --fonte: Roboto, sans-serif;

    /* A CONDENSADA DOS TÍTULOS — ver o @font-face lá em cima. É o
       `'Encode Sans Condensed', sans-serif` que o legado escreve nos títulos
       de página, na régua de busca e nos títulos de módulo. */
    --fonte-titulo-condensada: 'Encode Sans Condensed', sans-serif;

    /* MEDIDO NA REFERÊNCIA: o CORPO é 14px com linha de 21px (1,5) — não os
       16px que o navegador dá de padrão. A raiz continua em 16px, então os
       tamanhos em rem batem: 13px = .8125rem (botão do topo, barra de
       contatos), 15px = .9375rem (item de menu), 20px = 1.25rem (h3),
       35,2px = 2.2rem (h2). */
    --fs-xs: .6875rem;   /* 11px — etiqueta do card */
    --fs-sm: .8125rem;   /* 13px — botão do topo, barra de contatos */
    --fs-base: .875rem;  /* 14px — corpo do site */
    --fs-lg: 1rem;       /* 16px — título do card */
    --fs-xl: 1.25rem;    /* 20px — h3 */
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;

    /* Espaçamento */
    --gap-xs: .5rem;
    --gap-sm: .75rem;
    --gap: 1rem;
    --gap-md: 1.5rem;
    --gap-lg: 2.5rem;
    --gap-xl: 4rem;

    /* Layout — MEDIDO NA REFERÊNCIA.

       TUDO usa o MESMO container, cabeçalho inclusive: degraus de
       540/720/960/1200 com 15px de respiro por dentro. Ver o bloco
       "CONTAINER" logo abaixo dos tokens.

       ⚠ O CABEÇALHO NÃO É EXCEÇÃO: a logo nasce onde o container começa
       (x=113 em 1440), como o resto da página. Nada de `.container-fluid`
       nem de token de padding só para ele. */
    /* ⚠ 1170, NÃO 1200: o legado não sobrescreve o `.container` do
       Bootstrap 3, então valem os degraus dele — 750 (≥768), 970 (≥992) e
       1170 (≥1200), com 15px de respiro POR DENTRO (o `padding: 0` que o
       `styles.css` tenta não pega, porque o `bootstrap.css` vem depois).
       A tinta do último item do menu termina exatamente na borda direita do
       container menos 15. */
    --container: 1170px;
    --container-pad: 15px;
    /* ALTURA DO CABEÇALHO — UMA faixa só: 116,4px em 1440, 105 entre 768 e
       1199, 114 em 390. Quem se posiciona pela altura do cabeçalho (a coluna
       grudada da listagem) usa estes números. Mudar o padding da faixa pede
       mudar aqui. */
    --altura-header: 90px;
    --altura-header-mobile: 60px;

    /* O FUNDO DA FAIXA — #fafafa, e não branco: `.header-section-4` declara
       `background: #fafafa !important` antes do `background-color: #fff`.
       Abaixo de 992 o cabeçalho do legado é OUTRO elemento e é BRANCO — ver o
       bloco 4. */
    --cor-cabecalho: #fafafa;

    /* Formas — MEDIDAS: botão do cabeçalho 5px, card de imóvel 8px, item da
       gaveta 10px (é o --border-radius que o CSS do cliente declara), CTA da
       home em pílula (40px num botão de 46 de altura). */
    --raio-sm: 5px;
    --raio: 8px;
    --raio-lg: 10px;
    --raio-pill: 999px;

    /* Sombras — a do card na referência é rgba(0,0,0,.08) 0 4px 12px. */
    --sombra: 0 4px 12px rgba(0, 0, 0, .08);
    --sombra-lg: 0 20px 50px rgba(0, 0, 0, .16);

    /* Movimento */
    --transicao: .25s ease;
}

/* ===========================================================================
   2. RESET E BASE
   =========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

/* ⚠ BARRA DE ROLAGEM: NENHUMA CUSTOMIZAÇÃO. A referência usa
   `scrollbar-width: auto` e `scrollbar-color: auto` — a barra padrão do
   sistema, de 15px.

   AFINAR A BARRA NO SELETOR UNIVERSAL TEM DUAS CONSEQUÊNCIAS, AS DUAS MEDIDAS:

     1. o painel do dropdown sai com um fio da cor da marca no lugar da barra
        cinza fina;
     2. a barra da página fica com 10px em vez de 15, e isso desloca TODO
        bloco alinhado à direita — a área útil em 1440 muda em 5px, que
        aparecem em cada medição de posição.

   A largura da barra não é detalhe estético: é ela que define a área útil da
   página. Quem quiser afinar a barra, remede o cabeçalho e a régua depois. */

/* TRAVA DA ROLAGEM HORIZONTAL — no <body>, como na referência
   (`body { overflow: hidden auto }`).

   Rede de segurança: se qualquer componente (banner, card, o que for) vazar
   alguns pixels além da largura da tela, isso vira arrasto lateral na PÁGINA
   TODA. A trava não esconde o vazamento (ele continua sendo bug), só impede
   que ele generalize. Carrossel continua rolando de lado: o `overflow-x` dele
   é próprio (`.carrossel__trilha`).

   ⚠ POR QUE NO <body> E NÃO NO <html>: quem recebe a trava vira o elemento que
   rola, e a largura de barra reservada muda com isso. No <body> o Chrome
   reserva os 10px clássicos e a área útil fecha com a da referência; no
   <html>, sobram 2px a mais e todo bloco alinhado à direita sai deslocado.

   O cabeçalho daqui não é `sticky` — o da referência também não. */
body {
    overflow: hidden auto;
}

body {
    margin: 0;
    font-family: var(--fonte);
    /* MEDIDO: 14px com linha de 21px (1,5). Com 16/1,6 a diferença aparece em
       TODA altura calculada — o item do menu fecha 44 em vez de 42,5, os
       botões do topo 40,8 em vez de 39,5. */
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--cor-texto);
    background: var(--cor-fundo-pagina);
    -webkit-font-smoothing: antialiased;
}

body.menu-aberto {
    overflow: hidden;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 var(--gap-sm);
    font-family: var(--fonte-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--cor-escura);
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-3xl);
}

h2 {
    font-size: var(--fs-2xl);
}

h3 {
    font-size: var(--fs-xl);
}

p {
    margin: 0 0 var(--gap);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transicao);
}

/* ⚠ AZUL, NÃO ESCURO. É a regra global da referência
   (`a:hover { color: var(--site-color-1) }`), e ela alcança MUITO mais do que
   parece: o link do card de imóvel, os ícones de rede do rodapé, a barra "Área
   do Cliente", o telefone do cabeçalho. Em `--cor-escura`, cada um desses
   lugares escurece em vez de acender.

   `.migalhas a:hover` continua escuro de propósito. */
a:hover {
    color: var(--cor-primaria);
}

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

/* Tamanho padrão dos ícones inline (samiSiteIcone). Sem isto o SVG estica
   para a altura do container e vira um ícone gigante. Regras específicas
   (.btn svg, .card-imovel__caracteristica svg, ...) sobrescrevem
   quando precisa. */
svg {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--cor-escura);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--cor-primaria-suave);
}

/* MEDIDO na referência (fale-conosco.php, campo em foco): `outline: none`,
   sem sombra, e a borda trocando de #dedede para o amarelo da marca.

   O anel de cima é o quadro preto que aparecia ao CLICAR num campo: o
   `:focus-visible` casa no clique do mouse quando o elemento aceita digitação
   (o navegador supõe que ali vem teclado). Some só para esses; link, botão e
   caixa de marcar continuam com o anel, que é como quem navega por Tab se
   acha na página. Quem avisa do foco no campo é a borda, logo abaixo. */
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: none;
}

/* --- Estruturas de página ------------------------------------------------ */
/* MEDIDO NA REFERÊNCIA: em 1440 o container tem 1320px de CONTEÚDO, com 60px
   de folga de cada lado — não 1320 menos o respiro interno. O `min()` dá
   exatamente isso e continua respeitando o respiro em telas estreitas:
   em 1440 → min(1400, 1320) = 1320; em 400 → min(360, 1320) = 360. */
/* ===========================================================================
   CONTAINER — O DA REFERÊNCIA, EM DEGRAUS
   ---------------------------------------------------------------------------
   MEDIDO na cadeia de CSS do legado: são os degraus SECOS do Bootstrap 3,
   porque o tema de lá não sobrescreve o `.container` do framework —

       < 768 .... 100%    ≥ 768 .... 750
       ≥ 992 .... 970     ≥ 1200 ... 1170

   com 15px de respiro por dentro, sempre.

   ⚠ NÃO HÁ DEGRAU EM 576. O `styles.css` do legado mexe no container só
   abaixo de 768 (480px em ≤767 e 100% em ≤481) — dois degraus que valem para
   telas que hoje quase não existem e que, na largura cheia do Bootstrap 3,
   dão no mesmo. Se aparecer diferença em tela estreita, é aqui que se olha.

   ⚠ É UMA REGRA SÓ, PARA `.container` SECO. Nada de container fluido nem de
   lista de páginas com degraus próprios: os degraus valem para o site
   inteiro. */
.container {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

@media (min-width: 768px) {
    .container { max-width: 750px; }
}

@media (min-width: 992px) {
    .container { max-width: 970px; }
}

@media (min-width: 1200px) {
    .container { max-width: var(--container); }
}

/* TÍTULOS: SEM `text-wrap: balance` E SEM APERTO DE LETRA.
   A referência não tem nenhum dos dois, e os dois mudam ONDE A FRASE QUEBRA,
   que é o que se vê na tela:

     · `balance` — medido em 390: "Gostaria de receber uma proposta?" sai
       299 + 123 na referência e 241 + 181 com ele ligado;
     · o aperto de letra encolhe o título ~3%: medido em 1200, um subtítulo dá
       477px lá e 462,8 com ele, e por causa disso cabe em UMA linha onde a
       referência usa duas. */
:is(h1, h2, h3, h4) {
    text-wrap: wrap;
    letter-spacing: normal;
}

.site-main {
    min-height: 60vh;

    /* ⚠ OS 40px ANTES DO RODAPÉ SÃO DO `#section-body { padding-bottom: 40px }`
       do legado, o bloco que embrulha o conteúdo de TODA página de lá — não são
       respiro de uma seção específica.

       MEDIDO: do pé do último cartão da home até o rodapé são 95px, e a conta
       só fecha com eles — 30 da margem do cartão + 55 do respiro da seção
       − 30 que a `.team-module` puxa de volta + 40 daqui. */
    padding-bottom: 40px;
}

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

/* --- Migalhas de pão (breadcrumb) -----------------------------------------
   Usado por várias páginas (imóveis, sobre, contato, anuncie...) — mora aqui,
   não no CSS de uma página específica, porque senão cada página que
   esquecesse de repetir a regra teria o breadcrumb sem estilo nenhum (era o
   que acontecia com /contato e /anuncie-seu-imovel antes desta mudança). */
.migalhas {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: var(--gap-md);
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
}

.migalhas a:hover {
    color: var(--cor-escura);
}

/* ===========================================================================
   2c. PRELOADER — A CORTINA DA REFERÊNCIA
   ---------------------------------------------------------------------------
   MEDIDA na folha do legado (`.loader`, css/styles.css):

     véu ......... tela cheia, `rgba(0, 0, 0, .35)`, z-index 999999
     girador ..... `images/loading.gif` CENTRADO, sem repetir — um GIF de
                   150x150 com uma caixa branca de cantos arredondados
                   (116x114) e doze riscos girando, 12 quadros de 0,1s
     saída ....... `$(".loader").fadeOut("slow")` no `load` da janela.
                   "slow" no jQuery são 600ms

   CONFERIDO: o véu sobre o fundo #fafafa da página dá rgb(163,163,163), que é
   exatamente 0,65 x 250. E a caixa branca fecha 115 CSS px, que é o tamanho do
   primeiro quadro do GIF.

   ⚠ O GIF É O ARQUIVO DO LEGADO, copiado tal e qual (4,8 KB). Não dá para
   converter para WebP sem perder a animação com as ferramentas que há aqui.

   O CUSTO DE UM PRELOADER É REAL: enquanto ele está na tela, o visitante não vê
   o site. Por isso UMA decisão que NÃO é cópia da referência e fica registrada:

     · A CORTINA SAI ANTES. Lá ela espera o `load` da janela inteira — que na
       ficha só chega depois do iframe do mapa lá embaixo, quase um segundo de
       tela parada à toa. Aqui o sinal é o que se vê: as imagens da PRIMEIRA
       TELA, com piso de 550ms (senão vira uma piscada em página cacheada) e
       teto de 4s. Ver o script no header.php.
   =========================================================================== */
.preloader {
    position: fixed;
    inset: 0;
    /* O mesmo número da referência. O maior z-index do resto do site é 9991. */
    z-index: 999999;

    /* O GIF NO CENTRO, SEM REPETIR, SOBRE O VÉU — a declaração do legado,
       propriedade por propriedade. Sem `?v=`: é `background-image`, e o
       cache-busting do site só alcança o que passa por samiSiteAsset(). */
    background: url('../img/preloader.gif') center no-repeat;
    background-color: rgba(0, 0, 0, .35);

    /* `visibility` PRECISA ESTAR NA TRANSIÇÃO. Ela não interpola — muda de uma
       vez —, e sem estar listada aqui o `visibility: hidden` da classe de saída
       valia no primeiro quadro: a cortina desaparecia inteira com a opacidade
       ainda em ~0,93, ou seja, de estalo. Listada, a troca é adiada para o fim
       do desvanecer e o que se vê é só ele.

       600ms É O `fadeOut("slow")` DO jQUERY, que é o que a referência chama. */
    transition: opacity .6s ease, visibility .6s ease;
    contain: layout style paint;

    /* REDE DE SEGURANÇA: se o JS falhar ou for bloqueado, a cortina se apaga
       sozinha aos 6s em vez de deixar o site inalcançável. Com JS funcionando
       ela é removida do DOM muito antes e isto nunca chega a rodar. O
       <noscript> no header.php cobre o caso de JS desligado.

       ⚠ A REFERÊNCIA NÃO TEM ISTO e por isso um `load` que nunca chega deixa o
       site dela atrás do véu para sempre. É divergência de propósito. */
    animation: preloader-desiste .3s ease 6s forwards;
}

@keyframes preloader-desiste {
    to { opacity: 0; visibility: hidden; }
}

/* SAÍDA: a cortina se apaga por cima, no mesmo tempo da referência. */
.preloader--pronto {
    opacity: 0;
    visibility: hidden;
}

/* Sem movimento: a cortina some de uma vez, sem desvanecer. O GIF continua
   girando — quem pediu menos movimento não é atendido por CSS num GIF —, mas
   ele fica na tela por menos tempo. A rede de segurança dos 6s NÃO entra aqui:
   ela não é enfeite, é o que impede um site inalcançável se o JS falhar. */
@media (prefers-reduced-motion: reduce) {
    .preloader {
        transition: none;
    }
}

/* ===========================================================================
   2e. TÍTULO DE PÁGINA E MIGALHAS (partials/migalhas.php)
   ---------------------------------------------------------------------------
   O `.page-title.breadcrumb-top` do legado: uma caixa cinza com a migalha e,
   abaixo dela, o título da página centrado. É o topo de TODA página interna —
   listagem, sobre, contato… — e por isso mora aqui, não no CSS de uma página.

   MEDIDO no navegador e na cadeia de CSS do legado:

     faixa ....... 30px de respiro em cima e embaixo (`.page-title`)
     caixa ....... 44,8px de altura: fundo #f5f5f5, raio 4, respiro
                   14px 4px 17px e 20 de margem embaixo
     migalha ..... 12px/12 peso 300 em #707070, item atual em #777, chevron
                   cinza #9b9b9b entre os itens
     título ...... 30px/38 CENTRADO, na cor #6c757d do `.text-muted` do
                   Bootstrap 4, na fonte do CORPO (ver abaixo)

   ⚠ A CAIXA CINZA VEM DE DUAS FOLHAS. O `styles.css` do legado escreve
   `background: none` e `padding: 18px 0 0`, e o `bootstrap.css`, que vem
   DEPOIS, repõe `background-color: #f5f5f5`, `border-radius: 4px` e
   `margin-bottom: 20px`; por cima disso,
   `.breadcrumb-top .breadcrumb { padding: 14px 4px 17px }`, de volta do
   `styles.css`. Ler só a primeira folha dá migalha transparente e título
   colado.

   ⚠ PESO 400 NO TÍTULO, e o legado escreve 500 — só o 400 existe para baixar.

   ⚠⚠ **O TÍTULO NÃO É CONDENSADO.** A folha de lá escreve
   `font-family: 'Encode Sans Condensed'` em `.page-title h1/h2`, mas as
   páginas de conteúdo NÃO carregam a fonte — ela cai no `sans-serif` do
   sistema. Medido: 0,482 em por caractere, que é Arial; a página de
   condomínios, onde a fonte É baixada, dá 0,401. Ver a nota longa no
   @font-face, no topo.

   ⚠ NO LEGADO A FONTE É CARREGADA EM UMA LISTAGEM E NÃO NA OUTRA, ou seja, o
   título de /vendas sai condensado e o de /locacao não. É descuido de lá;
   aqui os dois usam a fonte do corpo.
   =========================================================================== */

.page-titulo {
    padding: 30px 0;
}

/* MEDIDO na folha do legado: o respiro da faixa cai para 22 abaixo de 992 e
   não muda mais. */
@media (max-width: 991.98px) {
    .page-titulo {
        padding: 22px 0;
    }
}

.page-titulo__migalhas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    font-weight: 300;
    line-height: 12px;
    color: #707070;
}

/* A CAIXA CINZA fica na PRÓPRIA lista nas páginas de texto. Na listagem ela
   envolve também o campo "ordenar" e por isso mora um nível acima
   (`.page-titulo__faixa`, no imoveis.css) — por isso é modificador, e não
   regra fixa. */
.page-titulo__migalhas--caixa {
    margin: 0 0 20px;
    padding: 14px 4px 17px;
    border-radius: 4px;
    background: #f5f5f5;
}

.page-titulo__migalhas a {
    color: #707070;
    text-decoration: none;
}

.page-titulo__migalhas a:hover {
    color: #f17478;
}

/* O ITEM ATUAL é o `.breadcrumb > .active` do bootstrap.css: #777, dois tons
   acima do #707070 dos outros. */
.page-titulo__atual {
    color: #777;
}

/* O SEPARADOR é um chevron (`\f105` do Font Awesome) DEPOIS de cada item menos
   o último — não antes, como o Bootstrap faz. Desenhado com duas bordas
   giradas: mesma forma, sem depender de uma fonte de ícones que o site não
   carrega. */
.page-titulo__migalhas li:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 5px;
    border-top: 1px solid #9b9b9b;
    border-right: 1px solid #9b9b9b;
    transform: rotate(45deg);
    vertical-align: middle;
}

.page-titulo__casa {
    width: 12px;
    height: 12px;
    vertical-align: middle;
}

.page-titulo__texto {
    margin: 0;
    font-size: 30px;
    font-weight: 400;
    line-height: 38px;
    color: #6c757d;
    text-align: center;
}

/* Os degraus são os do legado (`.page-title h1`): 24 entre 768 e 991, 20/28
   abaixo de 768 e 18/24 abaixo de 482 — este último com `!important` lá, que
   aqui não faz falta. */
@media (max-width: 991.98px) {
    .page-titulo__texto {
        font-size: 24px;
    }
}

@media (max-width: 767.98px) {
    .page-titulo__texto {
        font-size: 20px;
        line-height: 28px;
    }

    /* MEDIDO: abaixo de 768 a caixa perde o respiro de cima e fica com
       `padding: 0 0 10px` (`.breadcrumb-top .breadcrumb`). */
    .page-titulo__migalhas--caixa {
        padding: 0 0 10px;
    }

    .page-titulo__migalhas {
        line-height: 18px;
    }
}

@media (max-width: 481.98px) {
    .page-titulo__texto {
        font-size: 18px;
        line-height: 24px;
    }
}

/* ===========================================================================
   2f. PÁGINA DE FORMULÁRIO — CABEÇALHO E CARTÃO (o `.membership-*` do legado)
   ---------------------------------------------------------------------------
   O molde das páginas de formulário do legado — "Atendimento por Email" e
   "Cadastre seu imóvel". As duas são o MESMO bloco do tema, com o mesmo
   respiro, o mesmo cartão e o mesmo botão; o que muda é a lista de campos. Por
   isso mora aqui e não no CSS de uma página.

   MEDIDO no navegador e na cadeia de CSS do legado:

     .form-pagina__cabecalho .. `.membership-page-top` + `.membership-page-title`
                                — 68 de respiro em cima, 54 de margem embaixo
     .form-cartao ............. `.account-block`, branco com borda #e5e5e5
     .form-cartao__topo ....... `.add-title-tab` — faixa de 57px, respiro 14/30
     .form-cartao__miolo ...... `.add-tab-content > .add-tab-row` — respiro 30
     .form-cartao__campo ...... `.form-group` dentro de um `.col-sm-6`
     .form-cartao__botao ...... `.btn.btn-danger`, que de vermelho não tem nada

   RÉGUA VERTICAL (as duas páginas batem no mesmo número):

      90     pé do cabeçalho
     158     topo do <h1>                (68 de respiro)
     215     topo do texto de apoio      (42 de linha + 15 de margem)
     +30     do bloco de conteúdo até o cartão, depois dos 54 de margem
     +57     a faixa do título do cartão
     +30     o respiro do miolo, até a primeira etiqueta
     +88,8   por linha de campo
     +30     do último campo até o pé do cartão
     +25     do cartão até o botão
     +40     do botão até o rodapé (vem do `.site-main`)

   ⚠ OS 88,8px DE PASSO NÃO ESTÃO DECLARADOS EM LUGAR NENHUM no legado: eles
   nascem da soma da caixa da etiqueta, dos 5px de margem dela, dos 42 do campo
   e da margem do `.form-group` — que ainda colapsa com a do próprio campo.
   Aqui a grade faz a conta direta: 20 + 5 + 42 + 22 = 89.

   ⚠ PESO 400 NOS TÍTULOS, e o legado escreve 500: o <head> dele baixa Encode
   Sans Condensed numa URL que traz só o peso 400. Ver o @font-face no topo.
   =========================================================================== */

/* --- Cabeçalho da página -------------------------------------------------- */

.form-pagina__cabecalho {
    margin-bottom: 54px;
    padding-top: 68px;
    text-align: center;
}

/* ⚠ NÃO É CONDENSADO. `atendimento-por-email.php` e `cadastre-seu-imovel.php`
   não carregam a fonte — medido no print: 0,483 em por caractere, que é Arial.
   Ver a nota no @font-face, no topo do arquivo. */
.form-pagina__titulo {
    margin: 0 0 15px;
    font-size: 36px;
    font-weight: 400;
    line-height: 42px;
    letter-spacing: normal;
    color: #6c757d;
}

/* O TEXTO DE APOIO herda a fonte do corpo, como todo o resto desta página. */
.form-pagina__apoio {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    line-height: 22px;
    color: #6c757d;
}

/* ⚠ SÓ A "CADASTRE SEU IMÓVEL" TEM ISTO: lá o parágrafo leva
   `style="text-align: justify; padding: 17px"` cravado no HTML, e o texto ocupa
   a largura inteira em vez de ficar centrado. Medido no print: a primeira linha
   nasce 16px mais abaixo que a da outra página, que é o padding. */
.form-pagina__apoio--justificado {
    padding: 17px;
    text-align: justify;
}

/* --- O cartão ------------------------------------------------------------- */

.form-cartao {
    background: var(--cor-branco);
    border: 1px solid #e5e5e5;
}

/* A FAIXA DO TÍTULO tem ALTURA FIXA de 57px no legado (`height: 57px` com
   respiro de 14/30). `position: relative` é o que ancora o botão de recolher,
   que fica no canto direito. */
.form-cartao__topo {
    position: relative;
    height: 57px;
    padding: 14px 30px;
    border-bottom: 1px solid #e5e5e5;
}

/* ⚠ TAMBÉM NÃO É CONDENSADO, e aqui por outro motivo: a regra do legado
   (`.add-title-tab h3`) não declara família nenhuma, e o
   `h1,h2,h3,h4,h5,h6 { font-family: inherit }` do `bootstrap.css` — que carrega
   DEPOIS do `styles.css` — apaga o `'Encode Sans Condensed'` que a folha do
   tema pôs nos títulos. Sobra a fonte do corpo. */
.form-cartao__titulo {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: normal;
    color: #000;
}

/* O BOTÃO DE RECOLHER — o `.add-expand` do legado, um quadrado de 57 colado no
   canto direito da faixa com uma seta de 18px em #959595. Lá é um `<div>` com
   `cursor: pointer`; aqui é `<button>`, que é o elemento certo para "abre e
   fecha" e o único que o teclado entende sem inventar comportamento. */
.form-cartao__recolher {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 57px;
    height: 57px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: #959595;
}

/* A SETA é desenhada com duas bordas giradas — mesma forma do `angle-down` do
   Font Awesome, sem depender de uma fonte de ícones que o site não carrega. O
   `margin-top` compensa o eixo de giro, que não é o centro do losango. */
.form-cartao__recolher::before {
    content: '';
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transicao);
}

.form-cartao__recolher[aria-expanded="false"]::before {
    margin-top: 5px;
    transform: rotate(-135deg);
}

/* O MIOLO É UMA GRADE DE DUAS COLUNAS.

   ⚠ A GOTEIRA DE 30 É A DO BOOTSTRAP 3 (15 de cada coluna), medida no print: o
   campo da esquerda fecha em x=745,6 e o da direita começa em 776. */
.form-cartao__miolo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
    row-gap: 22px;
    padding: 30px;
}

.form-cartao__miolo[hidden] {
    display: none;
}

.form-cartao__campo--largo {
    grid-column: 1 / -1;
}

/* TRÊS POR FILEIRA — o `.col-sm-4` do legado. Como a grade é de duas colunas,
   a fileira de três vira uma grade própria, com a MESMA goteira. */
.form-cartao__trio {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
    row-gap: 22px;
}

/* --- Campos ---------------------------------------------------------------
   `.form-campo` é o MESMO campo fora do cartão: a "Trabalhe conosco" do site no
   ar não tem `.account-block` nenhum — o formulário fica solto sobre o fundo da
   página, com os mesmos rótulos e os mesmos `.form-control`.
   --------------------------------------------------------------------------- */

/* ⚠ A ETIQUETA É NEGRITO, e o tema declara 400. Quem vence é o
   `label { font-weight: bold }` do `bootstrap.css`, que carrega DEPOIS do
   `styles.css` — a mesma armadilha de ordem de carga já anotada no botão dos
   cartões da home e na migalha da listagem. Medido no print: preto puro. */
.form-cartao__campo label,
.form-campo label {
    display: block;
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #000;
}

/* O `.form-control` do legado, com o que sobrevive da briga entre as duas
   folhas: altura e largura do `styles.css`; tinta, borda e sombra de dentro do
   `bootstrap.css`, que vem depois. */
.form-cartao__campo input,
.form-cartao__campo select,
.form-cartao__campo textarea,
.form-campo input,
.form-campo select,
.form-campo textarea {
    display: block;
    width: 100%;
    height: 42px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: var(--cor-branco);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    font-family: inherit;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.42857143;
    color: #555;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* ⚠ O FOCO É AZUL-CLARO, NÃO O VERMELHO DO TEMA. O `styles.css` pinta a borda
   de #f17478 no foco, mas o `.form-control:focus` do `bootstrap.css` vem
   depois e repõe o #66afe9 com o halo de 8px. É o que está no ar. */
.form-cartao__campo input:focus,
.form-cartao__campo select:focus,
.form-cartao__campo textarea:focus,
.form-campo input:focus,
.form-campo select:focus,
.form-campo textarea:focus {
    outline: 0;
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.form-cartao__campo input::placeholder,
.form-cartao__campo textarea::placeholder,
.form-campo input::placeholder,
.form-campo textarea::placeholder {
    color: #999;
    opacity: 1;
}

/* ⚠ O <textarea> NÃO TEM A ALTURA DOS CAMPOS. Nas duas páginas ele é maior, e
   por caminhos diferentes: a "Cadastre seu imóvel" usa `rows="4"` com
   `height: auto !important` (fecha 92,8 no print) e a "Atendimento por Email"
   crava `height: 125px !important`. Por isso a regra geral solta a altura e a
   segunda vem pelo modificador. */
.form-cartao__campo textarea,
.form-campo textarea {
    height: auto;
    resize: vertical;
}

.form-cartao__campo--alto textarea {
    height: 125px;
}

/* --- Desafio, botão ------------------------------------------------------- */

/* ⚠ O DESAFIO NÃO EXISTE NO LEGADO — não há medida a copiar. Lá o reCAPTCHA
   chegou a ser carregado e a linha está COMENTADA no <head>. Fica entre o
   cartão e o botão, com o mesmo respiro de 25 que o botão tem. */
.form-cartao__desafio {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

/* OS 25 SÃO A MARGEM CRAVADA NO `style=` DO <button> DO LEGADO. */
.form-cartao__acao {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

/* O `.btn.btn-danger` do legado — que de vermelho não tem nada: o `.btn` do
   `styles.css` vem depois do framework e manda (respiro 11x15, SEM BORDA, peso
   500), e o `.btn-danger` dele pinta **#3333FF**. A `border-color: #d43f3a`
   que ele ainda declara não desenha nada, porque não há borda.
   Medido no print: 41,6 de altura, rgb(51,51,255). */
.form-cartao__botao {
    padding: 11px 15px;
    border: 0;
    border-radius: 4px;
    background: #3333ff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42857143;
    color: var(--cor-branco);
    cursor: pointer;
    transition: background-color var(--transicao);
}

/* ⚠ O HOVER É A MESMA COR NO LEGADO. O `.btn-danger:hover` dele repete #3333ff
   — ou seja, o botão não reage. Aqui ele escurece de leve, que é o mínimo para
   quem usa o site saber que o botão é clicável; se for para igualdade literal,
   é apagar estas três linhas. */
.form-cartao__botao:hover {
    background: #2a2ad9;
}

/* --- Responsivo ----------------------------------------------------------- */
/* Os degraus são os do legado:
     768–991 ... respiro do cabeçalho 48, margem 40, título 30/26, campo de 50
     ≤ 767 ..... respiro 38, margem 30, título 24/30, apoio 14/18, UMA coluna */

@media (max-width: 991.98px) {
    .form-pagina__cabecalho {
        margin-bottom: 40px;
        padding-top: 48px;
    }

    /* ⚠ 30/26 É O QUE O LEGADO DECLARA, e a linha é MENOR que o corpo — o
       título encosta em si mesmo se quebrar em duas linhas. É o que está no
       ar. */
    .form-pagina__titulo {
        font-size: 30px;
        line-height: 26px;
    }

    /* MEDIDO na folha do legado: abaixo de 992 o campo cresce para 50. */
    .form-cartao__campo input,
    .form-cartao__campo select,
    .form-campo input,
    .form-campo select {
        height: 50px;
    }
}

@media (max-width: 767.98px) {
    .form-pagina__cabecalho {
        margin-bottom: 30px;
        padding-top: 38px;
    }

    .form-pagina__titulo {
        font-size: 24px;
        line-height: 30px;
    }

    .form-pagina__apoio {
        font-size: 14px;
        line-height: 18px;
    }

    .form-cartao__miolo {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    /* `col-xs-12`: abaixo de 768 a fileira de três também vira linha única. */
    .form-cartao__trio {
        grid-template-columns: 1fr;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--raio);
    background: none;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao),
        border-color var(--transicao), transform var(--transicao),
        box-shadow var(--transicao);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn svg {
    width: 18px;
    height: 18px;
    flex: none;
}

/* Amarelo é preenchimento e nunca texto sobre branco (1,3:1). A tinta por
   cima sai de --cor-sobre-primaria — ver a nota no :root sobre o contraste.
   MEDIDO na referência: raio 24px e padding 12px 32px no botão "SAIBA MAIS",
   peso 700, 16px. O hover da referência não existe (a regra aponta para
   --cor-site-4, que nunca é declarada), então aqui ele escurece para
   --cor-primaria-escura, que é o par natural da paleta. */
.btn--primario {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-sobre-primaria);
}

.btn--primario:hover {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-sobre-primaria);
}

.btn--sm {
    padding: .5rem 1rem;
    font-size: var(--fs-xs);
}

/* --- Campos de formulário (busca da home e da listagem) ------------------- */
.campo {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.campo label {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

.campo select,
.campo input {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background: var(--cor-branco);
    font-size: var(--fs-sm);
    transition: border-color var(--transicao);
}

/* Classe repetida de propósito. O CSS de página pinta a borda em repouso
   (`.cartao-contato .campo input`, por exemplo) e empata em especificidade com
   `.campo input:focus`; como a folha da página carrega depois, o empate era
   decidido pela ordem e o foco não trocava a cor. Com `.campo.campo` esta
   regra passa na frente sem depender de quem carregou primeiro. */
.campo.campo input:focus,
.campo.campo select:focus,
.campo.campo textarea:focus {
    border-color: var(--cor-primaria);
}

/* ===========================================================================
   4. CABEÇALHO E MENU
   ---------------------------------------------------------------------------
   MEDIDO NA REFERÊNCIA. Duas fontes, que fecham uma com a outra:

   (a) a CADEIA DE CSS do legado — `css/flexslider.css`, `css/styles.css`,
       `css/bootstrap.css`, `css/bootstrap.min.css`, nessa ordem;
   (b) o cabeçalho renderizado, medido pixel a pixel.

       faixa ......... 90px, fundo rgb(250,250,250)
       container ..... 1170 acima de 1200 (o do Bootstrap 3), 15px de respiro
                       por dentro
       logo .......... caixa de 237 com 10px de padding → imagem 217x70
       item de menu .. 14px/500, linha de 90px, 15px de respiro de cada lado,
                       cor #000 (hover #5b5b5b)
       último item ... a tinta termina na borda direita do container menos o
                       respiro de 15

   ⚠ TRÊS ARMADILHAS DA CADEIA DE LÁ, todas conferidas na ordem de carga:

   1. O FUNDO É #fafafa, NÃO BRANCO. `.header-section-4` declara
      `background: #fafafa !important` ANTES de `background-color: #fff` — o
      `!important` ganha.
   2. `1rem` VALE 10px, não 16. O `bootstrap.css` de lá tem
      `html { font-size: 10px }` (padrão do Bootstrap 3) e é ele que manda,
      porque vem depois do `styles.css`. Por isso o `.p-3` da caixa da logo
      (`padding: 1rem !important`) rende 10px, e a imagem fecha 217, não 205.
   3. `text-transform: capitalize` NO MENU INTEIRO. É o que faz "Administração
      De Condomínios" e "Área Do Cliente" saírem com as iniciais maiúsculas na
      tela, embora o HTML escreva "de" e "do". O submenu herda (`.navi ul ul li`
      declara `text-transform: inherit`).

   ABAIXO DE 992 o legado troca de cabeçalho (`.header-mobile`, um <div> irmão
   do <header>): 60px de altura, fundo BRANCO (não #fafafa), container de
   largura cheia, hambúrguer numa coluna de 25% à esquerda e a logo numa de
   50%, centrada. Aqui é a MESMA marcação, reordenada por flex.
   =========================================================================== */

.cabecalho {
    position: relative;
    z-index: 999;
    background: var(--cor-cabecalho);
    /* ALTURA RESERVADA: quando a barra gruda ela sai do fluxo, e sem isto a
       página daria um pulo de 90px. */
    min-height: var(--altura-header);
}

/* ---- A faixa: logo + menu ---------------------------------------------- */

/* SEM PADDING PRÓPRIO. A altura da faixa é a linha de 90px do item de menu (e
   a caixa da logo, que fecha os mesmos 90: 70 de imagem + 10+10 de respiro).
   ⚠ O CABEÇALHO NÃO MUDA DE ALTURA AO GRUDAR: o grudado do legado é um CLONE
   do normal (`this_sticky()` em js/custom.js de lá). */
.cabecalho__barra {
    padding: 0;
}

/* GRUDADO — a classe entra pelo site.js quando a rolagem passa da altura do
   cabeçalho.

   MEDIDO NO LEGADO (js/custom.js, `this_sticky`): o tema CLONA o <header>,
   embrulha em `.sticky_nav` (`position: fixed; top: 0; z-index: 999;
   box-shadow: 0 2px 2px rgba(0,0,0,.2)`) e faz `slideDown()` quando a rolagem
   passa de `header.position().top + altura`, e `fadeOut()` ao voltar ao topo.

   ⚠ AQUI NÃO SE CLONA NADA: a faixa vira `fixed` e desce com uma animação. A
   diferença que sobra é o feitio da entrada — o jQuery anima a ALTURA
   (`slideDown`), esta anima a POSIÇÃO. Mesma duração, mesma direção.

   ⚠ E ABAIXO DE 992 NÃO GRUDA: o `.header-mobile` do legado não tem
   `data-sticky`, então o cabeçalho do celular sobe junto com a página. */
.cabecalho__barra.grudado {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--cor-cabecalho);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
    animation: cabecalho-desce .3s ease-in-out;
}

@keyframes cabecalho-desce {
    from { transform: translate3d(0, -100%, 0); }
    to   { transform: none; }
}

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

/* O CONTAINER DO BOOTSTRAP 3, que é o que o legado usa: 1170 / 970 / 750, com
   15px de respiro por dentro — e largura cheia abaixo de 992, porque lá quem
   desenha é o `.header-mobile`, cujo container é `width: 100%`. */
.cabecalho__interno {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: flex;
    align-items: center;
}

@media (max-width: 1199.98px) {
    .cabecalho__interno { max-width: 970px; }
}

@media (max-width: 991.98px) {
    .cabecalho__interno { max-width: none; }
}

/* ---- Logo --------------------------------------------------------------- */

/* A CAIXA É 237 COM 10 DE RESPIRO (`.logo.p-3` do legado), o que deixa 217
   para a imagem. `line-height: 0` porque a caixa não pode ganhar a linha do
   texto — é o `.header-section-4 .logo { line-height: 0px }` de lá. */
.cabecalho__logo {
    display: block;
    flex: 0 0 auto;
    max-width: 237px;
    padding: 10px;
    line-height: 0;
}

.cabecalho__logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* SEM LOGO NO PAINEL sai o nome — ver a nota no partials/header.php. Enquanto
   a BUL não estiver cadastrada, os dois estão vazios. */
.cabecalho__logo-texto {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cor-escura);
}

/* ---- Menu principal ----------------------------------------------------- */

.menu-principal {
    /* EMPURRA O MENU PARA A DIREITA. No legado é `float: right` dentro de um
       `.header-left` de largura 100%; aqui é a folga do flex. */
    margin-left: auto;
    /* A REGRA QUE MUDA O TEXTO NA TELA — ver a armadilha 3 no topo do bloco. */
    text-transform: capitalize;
}

.menu-principal__lista {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-principal__item {
    position: relative;
}

.menu-principal__link {
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: var(--altura-header);
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.menu-principal__link:hover,
.menu-principal__link:focus-visible {
    color: #5b5b5b;
}

/* ⚠ O RESPIRO DO ITEM ENCOLHE ENTRE 992 E 1199, E ISSO NÃO É ENFEITE: É O QUE
   FAZ O MENU CABER.

   MEDIDO no legado (`@media (min-width:992px) and (max-width:1199px)
   .navi > ul > li > a { padding: 0 9px }`), e a conta fecha:

     · a 1170 de container (≥1200), a soma dos rótulos é ~577 e os 6 itens
       gastam 180 de respiro → menu de ~774, mais 237 da logo = 1011, dentro
       dos 1140 de conteúdo;
     · a 970 de container (992–1199) sobram 940 de conteúdo. Com 15 de respiro
       o mesmo menu pede 1011 e ESTOURA em 71px; com 9, pede 939 e cabe por um
       fio.

   ⚠ LER A REGRA BASE (15px) SEM A MEDIA QUERY DEIXA O MENU SAINDO DO CONTAINER
   entre 992 e 1199 — que é largura de notebook com a janela reduzida, não um
   caso de laboratório.

   ⚠ O LEGADO TEM UM TERCEIRO DEGRAU (10px entre 768 e 991) QUE NÃO ENTRA
   AQUI: abaixo de 992 o menu deixa de ser faixa e vira painel, e lá quem
   manda é o respiro de 14x18 do item de lista. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .menu-principal__link {
        padding: 0 9px;
    }
}

/* ⚠ A PÁGINA ATUAL SAI CINZA-CLARA, e isso é a referência:
   `.header-section-4 .navi > ul > li.active > a { color: #ccc }` — o item
   aceso fica MAIS APAGADO que os outros, não mais escuro. Medido na cadeia de
   CSS do legado, não é engano de leitura. */
.menu-principal__link--atual {
    color: #ccc;
}

/* A SETA do item com submenu: `fa-caret-down` a 14px é um triângulo cheio de
   8,75 x 5,25, 10px depois do rótulo. Desenhada com borda, que é o único jeito
   de garantir a mesma figura sem depender de arquivo de fonte. */
.menu-principal__seta {
    width: 0;
    height: 0;
    margin-left: 10px;
    border-left: 4.4px solid transparent;
    border-right: 4.4px solid transparent;
    border-top: 5.3px solid currentColor;
}

/* ---- Submenu ------------------------------------------------------------ */

/* MEDIDO: 250 de largura, fundo branco a 95%, sombra `0 4px 5px rgba(0,0,0,.15)`.
   FECHADO ele mora 20px ABAIXO do lugar (`top: 110px` contra os `top: 90px` do
   aberto) — é assim que o tema de lá faz a lista subir enquanto acende. */
.submenu {
    position: absolute;
    top: calc(var(--altura-header) + 20px);
    left: 0;
    z-index: 999;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicao), visibility var(--transicao), top var(--transicao);
}

.submenu__item {
    border-bottom: 1px solid #e6e6e6;
}

.submenu__item:last-child {
    border-bottom: 0;
}

.submenu__link {
    display: flex;
    align-items: center;
    padding: 13px 15px;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: #2e3e49;
    text-decoration: none;
}

.submenu__link:hover,
.submenu__link:focus-visible,
.submenu__link--atual {
    color: #023e70;
}

/* O ÍCONE DE CADA ITEM — no legado é um <i> do Font Awesome seguido de um
   espaço; aqui é SVG inline (ver partials/icones.php) na altura da linha. */
.submenu__icone {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-right: 6px;
}

/* ---- Desktop: submenu abre no ponteiro e no teclado ---------------------- */

@media (min-width: 992px) {
    .menu-principal__item--pai:hover > .submenu,
    .menu-principal__item--pai:focus-within > .submenu,
    .menu-principal__item--pai.aberto > .submenu {
        top: var(--altura-header);
        opacity: 1;
        visibility: visible;
    }
}

/* O HAMBÚRGUER só existe abaixo de 992. */
.btn-menu-mobile {
    display: none;
}

/* ---- Abaixo de 992: o cabeçalho do celular ------------------------------ */

@media (max-width: 991.98px) {
    /* FUNDO BRANCO, não #fafafa: `.header-mobile { background-color: #fff }`.
       São dois cabeçalhos diferentes no legado, e as cores não são iguais. */
    .cabecalho,
    .cabecalho__barra.grudado {
        background: var(--cor-branco);
    }

    .cabecalho {
        min-height: var(--altura-header-mobile);
    }

    /* NÃO GRUDA NO CELULAR — ver a nota do `.grudado` lá em cima. */
    .cabecalho__barra.grudado {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        box-shadow: none;
        animation: none;
    }

    .cabecalho__interno {
        position: relative;
    }

    /* AS TRÊS COLUNAS DO LEGADO: 25% para o gatilho, 50% para a logo, e os
       25% da direita ficam VAZIOS (lá eles seriam do ícone de conta, que este
       site não usa). É isso que deixa a logo centrada na tela. */
    .btn-menu-mobile {
        display: inline-flex;
        align-items: center;
        order: 1;
        flex: 0 0 25%;
        padding: 0;
        border: 0;
        background: none;
        line-height: var(--altura-header-mobile);
        /* ⚠ O AZUL NÃO É ENGANO — ver a nota no partials/header.php. */
        color: #3333ff;
        cursor: pointer;
    }

    .btn-menu-mobile svg {
        width: 18px;
        height: 18px;
    }

    .cabecalho__logo {
        order: 2;
        flex: 0 0 50%;
        max-width: none;
        text-align: center;
    }

    .cabecalho__logo img {
        width: auto;
        max-width: 100%;
        /* `.header-mobile .header-logo img { max-height: 80px }` */
        max-height: 80px;
        margin: 0 auto;
    }

    /* O MENU VIRA PAINEL, largura cheia, colado embaixo da faixa
       (`.nav-dropdown` do legado: `position: absolute; top: 60px; width: 100%`,
       fundo branco a 95% e a mesma sombra do submenu). */
    .menu-principal {
        position: absolute;
        top: var(--altura-header-mobile);
        left: 0;
        z-index: 999;
        width: 100%;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transicao), visibility var(--transicao);
    }

    .menu-principal.aberto {
        opacity: 1;
        visibility: visible;
    }

    .menu-principal__lista {
        display: block;
        background: rgba(255, 255, 255, .95);
        box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
    }

    /* ITEM DO PAINEL: risco de 1px em cima (menos no primeiro), 12px/500,
       link de 14x18 de respiro em #959595, e a linha inteira vira cinza-escura
       com texto branco no toque. */
    .menu-principal__item {
        border-top: 1px solid #f5f5f5;
    }

    .menu-principal__item:first-child {
        border-top: 0;
    }

    .menu-principal__link {
        display: flex;
        width: 100%;
        padding: 14px 18px;
        font-size: 12px;
        line-height: 12px;
        color: #959595;
    }

    .menu-principal__item:hover > .menu-principal__link,
    .menu-principal__link:hover,
    .menu-principal__link:focus-visible {
        background: #515252;
        color: var(--cor-branco);
    }

    /* A SETA fica na PONTA DIREITA da linha, não colada no rótulo. */
    .menu-principal__link--pai {
        justify-content: space-between;
    }

    .menu-principal__seta {
        margin-left: auto;
    }

    /* SUBMENU NO CELULAR: não flutua — abre dentro da lista, em cinza, como o
       `.nav-dropdown ul ul` do legado (`a { color: #fff; background: #ccc }`). */
    .submenu {
        position: static;
        width: auto;
        background: #ccc;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        display: none;
    }

    .menu-principal__item--pai.aberto > .submenu {
        display: block;
    }

    .submenu__item {
        border-bottom: 0;
        border-top: 1px solid #f5f5f5;
    }

    .submenu__link {
        padding: 14px 18px;
        font-size: 12px;
        line-height: 12px;
        color: var(--cor-branco);
    }

    .submenu__link:hover,
    .submenu__link:focus-visible,
    .submenu__link--atual {
        background: #515252;
        color: var(--cor-branco);
    }
}

/* ---- O véu das gavetas -------------------------------------------------- */

/* ⚠ FICA, MAS NÃO É MAIS DO MENU. O menu do celular é um painel que desce e
   não escurece a página — não há véu nenhum no legado. Esta classe continua
   aqui porque a GAVETA DE FILTROS DO BLOG a usa (pages/blog.php +
   css/blog.css). */
.menu-fundo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .34);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicao), visibility var(--transicao);
    z-index: 1100;
}

.menu-fundo.aberto {
    opacity: 1;
    visibility: visible;
}

/* ===========================================================================
   5. CARD DE IMÓVEL (home + listagem — o JS da busca gera o mesmo
      HTML; ver cardHTML() em public/js/busca.js)
   ---------------------------------------------------------------------------
   MEDIDO NA REFERÊNCIA (listagem de locação, viewport 1440). A tabela completa
   está no cabeçalho de pages/partials/card-imovel.php.

   ⚠ TRÊS ARMADILHAS DA FOLHA DE ORIGEM, todas medidas no navegador:

   1. A ALTURA É CRAVADA EM 413px. O CSS dela escreve `height: 100%` e logo
      abaixo `height: 413px` — a segunda vence. Card com texto grande NÃO
      cresce: o miolo é que se aperta.
   2. A CAIXA DA FOTO USA `padding-top: 191.8px`, em PIXEL, não em
      porcentagem. A foto não muda de altura quando a coluna estreita; só
      recorta mais.
   3. NÃO HÁ LINHA sob as características, embora ela declare
      `border-bottom: 1px solid var(--cor-site-8)`: a variável nunca é
      declarada e o navegador descarta a regra inteira. O respiro fica.

   SEM BOTÃO DE FAVORITOS — a referência tem só o WhatsApp.
   =========================================================================== */
.card-imovel {
    display: flex;
    flex-direction: column;
    height: 413px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: var(--raio);
    background: var(--cor-fundo);
    transition: all .3s ease;
}

.card-imovel:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 0, 0, .2);
    box-shadow: 0 8px 12px rgba(0, 0, 0, .075);
}

/* --- Foto ----------------------------------------------------------------- */
.card-imovel__imagem-container {
    position: relative;
    overflow: hidden;
    padding-top: 191.8px;
}

.card-imovel__imagem,
.card-imovel__imagem-container .sem-foto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.25, .45, .45, .95);
}

.card-imovel:hover .card-imovel__imagem {
    transform: scale(1.05);
}

.card-imovel:hover .card-imovel__mobiliado {
    max-width: 200px;
}

.card-imovel:hover .card-imovel__mobiliado span {
    opacity: 1;
}

.card-imovel__acao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
    color: var(--cor-escura);
    transition: background .2s, color .2s;
}

.card-imovel__acao svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.card-imovel__acao:hover {
    background: var(--cor-fundo);
    color: var(--cor-primaria-forte);
}

/* --- Corpo ---------------------------------------------------------------- */
.card-imovel__corpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 16px;
}

.card-imovel__titulo {
    margin: 0 0 6px;
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.3;
    color: var(--cor-escura);
}

.card-imovel__titulo a {
    color: inherit;
    transition: color .2s ease;
}

.card-imovel__titulo a:hover {
    color: var(--cor-primaria-forte);
}

/* --- Grade de cards ------------------------------------------------------- */
/* Base compartilhada por home, listagem e "imóveis semelhantes" da
   ficha. Quem tem largura de coluna própria (a listagem) sobrescreve o
   `grid-template-columns`; aqui fica o mínimo que serve a todas. */
.grid-imoveis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* ---------------------------------------------------------------------------
   ESQUELETO DE CARREGAMENTO (paginacao.js)
   ---------------------------------------------------------------------------
   ⚠ ISTO NÃO EXISTE NA REFERÊNCIA. Em carteira grande (centenas de imóveis) o
   pedido à API leva ~2s, e nesse tempo a grade fica VAZIA, sem nada dizendo
   que há busca em curso. A referência não tem loader porque a carteira dela é
   pequena e a espera não aparece.

   O ESQUELETO TEM A FORMA DO CARD DE VERDADE (413px de altura, 191,8 de foto,
   16 de respiro no corpo). Não é enfeite: com a mesma geometria, a página não
   PULA quando os cards chegam no lugar deles.

   ⚠ SÓ NA PRIMEIRA CARGA. Trocar um filtro NÃO troca os cards por esqueleto —
   a lista antiga fica à vista até a nova chegar, que é o que a referência faz
   (ver a nota em buscar(), paginacao.js). Lá o que muda é um VÉU por cima.
   --------------------------------------------------------------------------- */
.card-esqueleto {
    display: flex;
    flex-direction: column;
    height: 413px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: var(--raio);
    background: var(--cor-fundo);
}

.card-esqueleto__foto {
    flex: 0 0 191.8px;
}

.card-esqueleto__corpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

/* A FILEIRA DE ATRIBUTOS COLADA NO PÉ, como no card de verdade: o cartão tem
   altura FIXA de 413, e sem isto sobravam ~125px de branco no fim. */
.card-esqueleto__atributos {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.card-esqueleto__atributo {
    flex: 1 1 0;
    height: 14px;
    border-radius: 4px;
}

.card-esqueleto__linha {
    height: 12px;
    border-radius: 4px;
}

/* AS DUAS PRIMEIRAS LINHAS SÃO O TÍTULO (mais alto); as curtas são os
   atributos do pé do card. */
.card-esqueleto__linha--titulo { height: 16px; }
.card-esqueleto__linha--curta  { width: 55%; }
.card-esqueleto__linha--media   { width: 75%; }

/* O BRILHO QUE ATRAVESSA — é ele que diz "está vindo", e não "quebrou".
   Degradê em movimento em vez de opacidade piscando: piscar a 1s num bloco de
   seis cartões cansa a vista e parece erro. */
.card-esqueleto__foto,
.card-esqueleto__linha,
.card-esqueleto__atributo {
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
    background-size: 200% 100%;
    animation: esqueleto-brilho 1.4s ease-in-out infinite;
}

@keyframes esqueleto-brilho {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* QUEM PEDIU MENOS MOVIMENTO vê o cinza parado — a forma do card continua
   dizendo que há conteúdo a caminho. */
@media (prefers-reduced-motion: reduce) {
    .card-esqueleto__foto,
    .card-esqueleto__linha,
    .card-esqueleto__atributo {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   VÉU DA RE-BUSCA — trocar um filtro com a lista já na tela
   ---------------------------------------------------------------------------
   A lista antiga FICA (é o que a referência faz), mas apagada e sem clique,
   para ninguém abrir a ficha de um imóvel que o filtro novo já tirou da lista.
   --------------------------------------------------------------------------- */
.grid-imoveis[aria-busy="true"]:not([data-esqueleto]):not(:empty) {
    opacity: .45;
    pointer-events: none;
    transition: opacity .2s;
}

/* --- Telas menores -------------------------------------------------------- */
@media (max-width: 768px) {
    .card-imovel__corpo {
        padding: 14px;
    }
}

/* ===========================================================================
   5b. CARTÃO DE POST DO BLOG (home + /blog)
   ---------------------------------------------------------------------------
   MORA AQUI, E NÃO NO css/blog.css, PELO MESMO MOTIVO DO CARD DE IMÓVEL: são
   DUAS páginas montando o mesmo cartão — a seção do blog na home
   (partials/blog-home.php) e a listagem (pages/blog.php). O blog.css só é
   carregado em /blog; deixar o componente lá obrigaria a segunda cópia das
   mesmas regras dentro do home.css.

   NO css/blog.css FICA SÓ O QUE É DA LISTAGEM: os filtros, a gaveta lateral e
   a página do post.

   ⚠ NÃO EXISTE NA REFERÊNCIA. Blog é recurso do painel, e o site no ar não
   tem — não há medida a copiar.
   =========================================================================== */

/* 3 COLUNAS FIXAS, não auto-fit: com poucos posts sobra espaço na linha em vez
   de o cartão esticar — ele tem sempre o mesmo tamanho, com 1 post ou 30. */
.blog-grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--transicao), border-color var(--transicao);
}

.blog-card:hover,
.blog-card:focus-visible {
    border-color: var(--cor-primaria);
    box-shadow: 0 16px 32px rgba(7, 28, 31, .1);
}

/* QUADRADA: as capas do painel costumam ser feitas para o Instagram. Sem capa,
   fica o quadro cinza-claro — os cartões da fileira não mudam de altura. */
.blog-card__foto {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--cor-fundo-band);
}

.blog-card__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.blog-card:hover .blog-card__foto img {
    transform: scale(1.05);
}

.blog-card__corpo {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 18px 20px 20px;
}

/* UMA LINHA SÓ, com reticências: categoria longa não empurra o título para
   baixo só naquele cartão. */
.blog-card__categoria {
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--cor-primaria);
}

/* DUAS LINHAS NO MÁXIMO: um título longo ao lado de um curto deixava os
   cartões com alturas bem diferentes. */
.blog-card__titulo {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-family: var(--fonte-display);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--cor-escura);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.blog-card:hover .blog-card__titulo {
    color: var(--cor-primaria);
}

.blog-card__meta {
    margin: 0;
    font-size: 13px;
    color: var(--cor-texto-suave);
}

@media (max-width: 1199.98px) {
    .blog-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .blog-grade {
        gap: 20px;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .blog-card__foto img {
        transition: none;
    }
}

/* ===========================================================================
   6. CARROSSEL (componente — hoje no banner da home)
   ---------------------------------------------------------------------------
   Rolagem horizontal com scroll-snap: funciona arrastando no mobile mesmo sem
   JS. O site.js só liga as setas, os pontinhos e o autoplay.
   Quantos itens aparecem por vez: variável --carrossel-itens.
   =========================================================================== */
.carrossel {
    --carrossel-itens: 2;
}

.carrossel__janela {
    /* Deixa a sombra do card respirar sem cortar no scroll. */
    margin: calc(var(--gap-xs) * -1);
    padding: var(--gap-xs);
    overflow: hidden;
}

.carrossel__trilha {
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* A MÃO ABERTA AVISA QUE DÁ PARA ARRASTAR — ver o bloco de arrasto em
       public/js/site.js. `grab` só no ponteiro fino: em tela de toque o cursor
       não existe e o dedo já rola nativo. */
    cursor: grab;
}

.carrossel__trilha.arrastando {
    cursor: grabbing;
    /* SEM SELEÇÃO DE TEXTO DURANTE O GESTO: arrastar por cima do título do
       card pintava a frase inteira de azul no meio do movimento. */
    user-select: none;
}

@media (hover: none) {
    .carrossel__trilha {
        cursor: auto;
    }
}

.carrossel__trilha::-webkit-scrollbar {
    display: none;
}

.carrossel__item {
    flex: 0 0 calc((100% - (var(--carrossel-itens) - 1) * var(--gap)) / var(--carrossel-itens));
    /* Item flex tem `min-width: auto` por padrão — sem zerar isso, um preço
       ou local mais comprido (largura mínima de conteúdo maior que o
       `flex-basis` calculado ali em cima) empurra ESSE card mais largo que
       os outros da mesma fileira, e a fileira toda desalinha. */
    min-width: 0;
    scroll-snap-align: start;
    /* Sem isto, um arrasto rápido pode "pular" o ponto de parada mais
       próximo e o navegador só freia bem mais adiante — é aí que se vê um
       card cortado pela metade. `always` obriga a parar em CADA ponto de
       parada pelo caminho, nunca ultrapassando um card inteiro por vez. */
    scroll-snap-stop: always;
}

/* Vitrine da home (imóveis em destaque): mesmo componente do banner, com o
   card de imóvel dentro de cada item.
   SEM `height` aqui de propósito — é o que faz o card ficar sempre do mesmo
   tamanho: `.carrossel__trilha` é flex e por padrão (`align-items: stretch`)
   estica cada item para a altura do maior da fileira; o card
   (`.card-imovel { height: 100% }`) preenche esse espaço e o rodapé gruda na
   base (`.card-imovel__corpo { flex: 1 }` empurra o resto). Um `height: auto`
   aqui cancela esse stretch, e aí cada card fica do tamanho do próprio título
   (1 ou 2 linhas) — foto e preço em alturas diferentes de card para card. */

/* ===========================================================================
   7. RODAPÉ
   ---------------------------------------------------------------------------
   RÉPLICA DA REFERÊNCIA. Medido no navegador e conferido contra o CSS do
   legado (`.footer` e `.footer-bottom` do styles.css). A tabela completa está
   no cabeçalho de pages/partials/footer.php.

     faixa clara ... #ededed, respiro 50px em cima e 20 embaixo → 208 de altura
     grade ......... 4 colunas de 25% no container de 1170 (255 de conteúdo)
     título ........ 16px/16px peso 500, 20 até o corpo
     texto ......... 14px/20px peso 300, cor #000
     item de lista . 6px entre um e outro; ícone com 10 de respiro
     barra final ... #3333FF, risco branco de 1px em cima, respiro 15,
                     texto 12px/300 branco centrado

   A ALTURA DE 208 NÃO É CRAVADA, é consequência: a coluna mais alta é a do
   horário — 16 do título + 20 de margem + três linhas de 20 + 12 da última +
   30 da margem do bloco = 138 de conteúdo, mais 50+20 de respiro.
   =========================================================================== */

.rodape__principal {
    padding: 50px 0 20px;
    background: #ededed;
}

@media (max-width: 767.98px) {
    .rodape__principal {
        padding: 45px 0 15px;
    }
}

/* A GRADE DO BOOTSTRAP 3, em flex: goteira de 30 (15 de cada lado), que é o
   que a `.row` faz com a margem negativa. As colunas são `col-sm-3` — 25%
   acima de 768 e largura cheia abaixo. */
.rodape__grade {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.rodape__coluna {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px;
}

@media (min-width: 768px) {
    .rodape__coluna {
        flex-basis: 25%;
        max-width: 25%;
    }
}

/* `.footer-widget { margin-bottom: 30px }` — é ele que dá o pé do rodapé.
   ⚠ A QUARTA COLUNA NÃO TEM ESTE BLOCO no site no ar (a lista dela é filha
   direta da coluna), então ela não ganha os 30. Fica como está lá. */
.rodape__bloco {
    margin-bottom: 30px;
}

.rodape__logo {
    display: block;
    line-height: 0;
}

.rodape__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.rodape__titulo {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    color: #000;
}

/* "HORÁRIOS DE ATENDIMENTO:" sai em caixa alta pelo `.text-uppercase` do
   Bootstrap; "CONTATO" já está em caixa alta no texto. */
.rodape__titulo--caixa-alta {
    text-transform: uppercase;
}

.rodape__linha {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: #000;
}

/* `.mb-0` do legado: as duas primeiras linhas do horário andam coladas, só a
   última tem a margem de 12. */
.rodape__linha--junta {
    margin-bottom: 0;
}

.rodape__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rodape__lista li {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: #000;
}

.rodape__lista a {
    color: #000;
    text-decoration: none;
}

/* `.footer a:hover { opacity: .6 }` — o link não troca de cor, apaga. */
.rodape__lista a:hover,
.rodape__base a:hover {
    opacity: .6;
}

/* `.footer .fa { margin-right: 10px }`. O ícone do legado é fonte; aqui é SVG,
   então precisa de tamanho e de alinhamento explícitos. */
.rodape__icone {
    width: 14px;
    height: 14px;
    margin-right: 10px;
    vertical-align: -2px;
}

/* AS LOJAS DE APLICATIVO, ABAIXO DA LOGO (Sami, 2026-09-22). A logo tem
   `line-height: 0`, então o respiro tem de vir daqui — sem isto os dois links
   encostam nela. 20px é o mesmo respiro que separa o título das listas nas
   outras colunas (`.rodape__titulo { margin-bottom: 20px }`). */
.rodape__lojas {
    margin-top: 20px;
}

/* ---- A barra azul do fim ------------------------------------------------ */

.rodape__base {
    padding: 15px 0;
    border-top: 1px solid var(--cor-branco);
    background: #3333ff;
}

.rodape__base p {
    margin: 0;
    font-size: 12px;
    font-weight: 300;
    color: var(--cor-branco);
    text-align: center;
}

.rodape__base a {
    color: var(--cor-branco);
    text-decoration: none;
}

/* ---- Os dois botões flutuantes ------------------------------------------ */

/* WHATSAPP — MEDIDO NA REFERÊNCIA: 60x60, 79 do pé, verde #25d366, glifo
   branco. No legado o estilo está escrito INLINE no HTML, inclusive a sombra
   `1px 1px 2px #888`.

   ⚠ O `right` É 20, E NO LEGADO É 10 — divergência deliberada. Os três
   flutuantes formam uma COLUNA, e o eixo é o do voltar ao topo: ele tem 40 de
   largura a 30 da borda, ou seja, centro a 50. Círculo de 60 centrado nesse
   eixo pede 20 (50 − 30). Com os 10 do legado a coluna sai torta.
   Mexer em qualquer um dos três exige refazer esta conta.

   ⚠ NÃO APARECE ABAIXO DE 768: o <div> que o envolve lá tem `hidden-xs`.
   Replicado — ver a nota no partials/footer.php. */
.whatsapp-flutuante {
    position: fixed;
    right: 20px;
    bottom: 79px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    background: #25d366;
    color: var(--cor-branco);
    box-shadow: 1px 1px 2px #888;
}

.whatsapp-flutuante svg {
    width: 30px;
    height: 30px;
}

@media (max-width: 767.98px) {
    .whatsapp-flutuante {
        display: none;
    }
}

/* CHAT DO PAINEL — A BOLHA FICA ACIMA DO WHATSAPP.

   O widget vem inteiro de funcoes80/www/painel/chat.php e se posiciona
   sozinho (`#sami-chat-raiz { right: 20px; bottom: 20px }`): ali ele cobre o
   botão de voltar ao topo e fica ABAIXO do WhatsApp. Aqui sobe um degrau —
   79 do WhatsApp + 60 de altura dele + 10 de vão = 149 — no mesmo eixo dos
   outros dois (ver a conta do `right` no bloco do WhatsApp).

   ⚠ O `body` NA FRENTE É O QUE FAZ ESTA REGRA VENCER. O <style> do widget é
   injetado no fim do <body> em tempo de execução, DEPOIS deste arquivo; com
   a mesma especificidade (`#sami-chat-raiz`) ele ganharia pela ordem.

   ⚠ NÃO MOVE A JANELA DO CHAT. `#sami-chat-janela` é `position: fixed` por
   conta própria, então não acompanha a raiz — e nem precisa: com o chat
   aberto o widget esconde a bolha.

   ⚠ ABAIXO DE 768 O WHATSAPP SOME (regra acima), então não há degrau para
   subir e a bolha fica onde o widget a põe. */
@media (min-width: 768px) {
    body #sami-chat-raiz {
        right: 20px;
        bottom: 149px;
    }
}

/* VOLTAR AO TOPO — `.scrolltop-btn` do legado: 40x40 em #5b5b5b, 30px da
   direita e 30 do pé, seta branca de 24px, raio de 4 (do `.btn` do Bootstrap).
   MEDIDO no print: 40x40, rgb(91,91,91), 31,2 da borda direita.

   ⚠ SÓ APARECE COM ROLAGEM — o site.js liga a classe. */
.voltar-topo {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #5b5b5b;
    color: var(--cor-branco);
    cursor: pointer;
}

.voltar-topo.visivel {
    display: flex;
}

.voltar-topo:hover {
    opacity: .8;
}

.voltar-topo svg {
    width: 24px;
    height: 24px;
}

/* ===========================================================================
   7b. POPUP DO PAINEL
   ---------------------------------------------------------------------------
   Imagem/link cadastrados no painel administrativo (samiSitePainel()['popup'],
   ver src/core/Painel.php) — quando ativo, aparece uma vez por sessão (ver
   `popupPainel` em site.js). Markup em footer.php.
   =========================================================================== */
.popup-painel {
    position: fixed;
    inset: 0;
    /* ⚠ ACIMA DE TUDO QUE ESTÁ NA PÁGINA: cabeçalho (999), gaveta do menu
       (1200), aviso de cookies (9999), preloader (999999) e a bolha do chat do
       painel (999999, vem no CSS do widget). Com um número baixo o véu passa
       POR BAIXO do cabeçalho. Só o aviso de envio (alert-sami, 1000001) fica
       acima — e tem de ficar, senão o "mensagem enviada" nasce escondido. */
    z-index: 1000000;
    display: grid;
    place-items: center;
    padding: var(--gap-md);
}

.popup-painel[hidden] {
    display: none;
}

.popup-painel__fundo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
}

.popup-painel__caixa {
    position: relative;
    z-index: 1;
    max-width: min(480px, 100%);
    max-height: 88vh;
    border-radius: var(--raio-lg);
    background: var(--cor-branco);
    box-shadow: var(--sombra-lg);
    overflow: hidden;
    animation: popup-painel-entrar .25s ease;
}

@keyframes popup-painel-entrar {
    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.popup-painel__caixa img {
    display: block;
    width: 100%;
    height: auto;
}

.popup-painel__fechar {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: var(--cor-branco);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.popup-painel__fechar:hover {
    background: rgba(0, 0, 0, .75);
}

/* ===========================================================================
   7b2. BARRA DE INSTALAÇÃO DO PWA (ver footer.php, site.js)
   ---------------------------------------------------------------------------
   MESMO CARTÃO DE CANTO DO AVISO DE COOKIES (classe .cookies-aviso, reaproveitada
   — ver "7c" abaixo): aqui só o que é EXCLUSIVO deste cartão (ícone do app,
   botão de fechar). site.js empilha os dois (sobe este um pouco mais quando o
   de cookies também estiver visível), pra não ficar um em cima do outro.
   Escondido por padrão via [hidden]; site.js decide quando mostrar (só com
   beforeinstallprompt disponível — Chrome/Edge, não Safari/Firefox).
   =========================================================================== */
/* SEM REGRA DE position AQUI DE PROPÓSITO: ".cookies-aviso" JÁ TEM
   `position: fixed`, QUE POR SI SÓ JÁ É UM CONTEXTO VÁLIDO PRA POSICIONAR O
   FILHO ABSOLUTE (.instalar-app__fechar) — NÃO PRECISA DE relative NENHUM.
   UMA VERSÃO ANTERIOR DESTE CSS TINHA ".cookies-aviso.instalar-app {
   position: relative }", QUE SUBSTITUÍA (NÃO SOMAVA) O `fixed` DA REGRA
   BASE, FAZENDO O CARTÃO FICAR PRESO NO FLUXO NORMAL DA PÁGINA (DENTRO DO
   RODAPÉ) EM VEZ DE FLUTUAR FIXO NA TELA. LIÇÃO: `position` NÃO É PROPRIEDADE
   QUE "SOMA" ENTRE REGRAS — A ÚLTIMA/MAIS ESPECÍFICA SUBSTITUI A ANTERIOR
   POR COMPLETO. */

/* ⚠ O CARTÃO DE COOKIES É `text-align: center` COM ALTURA CRAVADA DE 140px —
   medida da referência, para AQUELE conteúdo (três blocos inline separados por
   <br>). O aviso do app tem outro conteúdo: marca, texto e botão. Herdando
   aquilo, cada parte caía numa linha solta e centrada — a logo sozinha em
   cima, o texto esticado no meio, o botão embaixo. Era o que o print do Sami
   pegou (2026-09-22).

   AQUI ELE VIRA UMA FILEIRA: marca | texto | botão. `height: auto` para o
   cartão fechar na altura do conteúdo, e `text-align: left` porque texto
   corrido centrado em duas linhas fica com o rio no meio. */
.instalar-app {
    display: flex;
    align-items: center;
    gap: 16px;
    height: auto;
    padding: 16px 20px;
    text-align: left;
}

/* A MARCA. Altura fixa e largura pela proporção: a logo é larga (540x175) e o
   ícone do app é quadrado — cravar 36x36 esmagaria a primeira. */
.instalar-app__marca {
    flex: none;
    width: auto;
    height: 36px;
    border-radius: var(--raio-sm);
}

/* A LOGO NÃO LEVA CANTO ARREDONDADO: ela não é um bloco de cor, é um desenho
   solto sobre o fundo do cartão, e o raio cortaria a ponta das letras. O raio
   fica para o ícone do app, que é um quadrado cheio. */
.instalar-app__marca--logo {
    max-width: 120px;
    border-radius: 0;
    object-fit: contain;
}

.instalar-app__texto {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    /* ⚠ A FOLGA À DIREITA É PARA O FECHAR. Ele é `absolute`, então não ocupa
       lugar: sem ela, a segunda linha do texto corre por baixo dele nas telas
       estreitas, onde o texto quebra em três. */
    padding-right: 18px;
}

.instalar-app__texto strong {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.instalar-app__texto span {
    font-size: 13px;
    line-height: 1.35;
    color: var(--cor-texto-suave);
}

.instalar-app .btn {
    flex: none;
}

/* O FECHAR FICA DENTRO DO CARTÃO, no canto de cima. Antes era um círculo preto
   de 24px PENDURADO para fora (`top: -10px; right: -10px`), que no print
   parecia um adesivo colado por cima da caixa. Dentro e sem fundo, ele some no
   cartão até alguém procurar por ele — que é o que um "fechar" deve fazer. */
.instalar-app__fechar {
    position: absolute;
    top: 6px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #9aa3ad;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--transicao), background var(--transicao);
}

.instalar-app__fechar:hover {
    background: rgba(0, 0, 0, .06);
    color: var(--cor-escura);
}

/* NO CELULAR A FILEIRA NÃO CABE — a marca e o texto ficam em cima e o botão
   ocupa a largura inteira embaixo, que é onde o polegar alcança. */
@media (max-width: 479.98px) {
    .instalar-app {
        flex-wrap: wrap;
        gap: 12px 14px;
    }

    .instalar-app__acao {
        flex: 1 0 100%;
    }
}

/* O GLIFO "×" NÃO É OPTICAMENTE CENTRADO NA PRÓPRIA CAIXA DE LINHA (FICA
   BAIXO/À ESQUERDA) — AJUSTA SÓ O <span> INTERNO, NÃO O BOTÃO (QUE PRECISA
   FICAR EXATAMENTE EM top/right:-10px PRA "PENDURAR" NO CANTO DO CARTÃO). */
.instalar-app__fechar span {
    transform: translateY(-1px);
}

/* ===========================================================================
   7c. AVISO DE COOKIES
   ---------------------------------------------------------------------------
   MEDIDO no site no ar (2026-08-27): 600x140 preso ao rodapé da janela
   (bottom 20), CENTRALIZADO, fundo #fefefe, borda 1px #ff3d3a, raio 12,
   padding 20px 30px, sombra 0 4px 20px rgba(0,0,0,.2) e conteúdo centrado.

     texto ..... 16px/700 #ff3d3a
     link ...... 14px/700 #282828, sublinhado, 8px acima
     botão ..... 147x41, fundo #ff5652 (a --cor-site-1, não a #ff3d3a do
                 resto), texto branco, raio 30, padding 10px 20px, 12px acima

   Ele entra deslizando de baixo (`translateY(100%)` → 0) em meio segundo.
   =========================================================================== */
.cookies-aviso {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 9999;
    width: 90%;
    max-width: 600px;
    /* ALTURA MEDIDA: 140px. O conteúdo é o mesmo da referência (três linhas
       inline separadas por <br>), mas o empilhamento das caixas de linha aqui
       fecha 145 — 5px que apareceriam como um degrau na base da caixa, já que
       ela é ancorada pelo rodapé da janela. Com a altura explícita, a caixa e o
       botão caem exatamente onde caem lá. */
    height: 140px;
    padding: 20px 30px;
    border: 1px solid var(--cor-primaria);
    border-radius: 12px;
    background: var(--cor-fundo-alt);
    color: var(--cor-escura);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    text-align: center;
    transform: translateX(-50%);
    transition: transform .5s ease-out, opacity .5s ease-out, visibility .5s ease-out;
}

/* A ENTRADA É DESLIZANDO. `hidden` sozinho não anima (o elemento nem existe
   na pintura), então o estado fechado fica aqui: fora da tela e transparente.
   O JS tira o `hidden` e põe `.cookies-aviso--visivel`. */
.cookies-aviso[hidden] {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(calc(100% + 20px));
}

/* Os três blocos são INLINE, separados por <br> no HTML — é o que a referência
   faz, e é o que faz o texto assentar na caixa de linha de 21px do site. */
.cookies-aviso__texto {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    /* A caixa de linha da referência tem 24px (o 1,5 do site sobre 16px) e põe
       a frase 2px abaixo do topo do respiro. Aqui o deslocamento é feito na
       pintura, não no fluxo: com `line-height: 1.5` a caixa toda crescia. */
    position: relative;
    top: 2px;
    color: var(--cor-primaria);
}

/* MEDIDO: 14px/700 #282828 sublinhado, 8px acima e 8px à esquerda (essa
   margem esquerda existe na referência e desloca o link 4px do centro). */
.cookies-aviso__link {
    display: inline-block;
    /* 5px, e não os 8px que a referência declara: com a altura da caixa fixada
       acima, são os 5 que põem o link no MESMO y=787 dela. O que vale é onde o
       pixel cai. */
    margin: 5px 0 0 8px;
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.2;
    color: var(--cor-escura);
    text-decoration: underline;
}

.cookies-aviso__link:hover {
    color: var(--cor-primaria);
}

/* MEDIDO: o botão usa a --cor-site-1 (#ff5652), mais clara que a #ff3d3a do
   resto do site. */
.cookies-aviso__botao {
    /* 10px pelo mesmo motivo do link acima: fecha o botão em y=818, como lá. */
    margin-top: 10px;
    padding: 10px 20px;
    border: 0;
    border-radius: 30px;
    background: var(--cor-primaria-forte);
    color: var(--cor-fundo-alt);
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: 21px;
    cursor: pointer;
    transition: background-color var(--transicao);
}

.cookies-aviso__botao:hover {
    background: var(--cor-primaria);
}

/* ===========================================================================
   8. DROPDOWN E CAMPO DE VALOR (componentes de formulário)
   ---------------------------------------------------------------------------
   O `<select>` nativo não aceita estilo na lista aberta: cada sistema desenha
   do seu jeito e ele destoa no meio de campos customizados. Aqui a lista é
   HTML, então gatilho e menu seguem exatamente a mesma medida dos inputs
   (altura, borda, raio) — ver pages/partials/dropdown.php e js/dropdown.js.
   =========================================================================== */
.dropdown {
    position: relative;
    min-width: 0;
}

/* O gatilho é a "cara" do campo: tem que ser idêntico a um input. */
.dropdown__gatilho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background: var(--cor-branco);
    font-size: var(--fs-sm);
    color: var(--cor-escura);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transicao);
}

.dropdown__gatilho:hover {
    border-color: var(--cor-texto-suave);
}

.dropdown--aberto .dropdown__gatilho {
    border-color: var(--cor-escura);
}

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

/* Placeholder ("Todas", "Todos") em cinza, como o de um input. */
.dropdown__texto--vazio {
    color: var(--cor-texto-suave);
}

.dropdown__seta {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--cor-texto-suave);
    transition: transform var(--transicao);
}

.dropdown--aberto .dropdown__seta {
    transform: rotate(180deg);
}

/* `fixed`, não `absolute`: um ancestral com `overflow` (a lateral de busca da
   listagem rola por dentro — ver .busca-lateral__campos em imoveis.css)
   recortaria um menu posicionado relativo a ele. Fixo escapa disso porque é relativo à JANELA.
   top/left/width vêm do JS a cada abertura (dropdown.js), calculados a partir
   do retângulo do gatilho — por isso não têm valor aqui, só o resto do visual. */
/* Painel flutuante inteiro (título da seção + lista). Só a LISTA
   (.dropdown__opcoes) rola — o título fica sempre visível, mesmo com
   a lista grande. */
/* Border/radius/sombra em valores literais (não os tokens --cor-borda/--raio/
   --sombra do design system) — aqui é para bater exatamente com
   .dropdown-container do site de referência (border:#ddd, radius:4px,
   box-shadow:0 4px 8px rgba(0,0,0,.1)), não com o resto do site. */
/* Coluna de flex para que o TÍTULO fique fixo e só a lista role: com o painel
   preso pela altura (ver `posicionar()` nos js de dropdown), é a lista que
   precisa ceder, não o bloco inteiro. */
/* MEDIDO no site no ar (2026-09-10, com o "Tipo" aberto): o painel é
   branco, borda 1px rgba(0,0,0,.15), raio 4 e SEM sombra. O respiro lateral do
   texto é de cada OPÇÃO (16px), não do painel — é isso que faz o realce do
   hover atravessar a largura toda.

   ⚠ ERA `padding: .75rem`, borda #ddd e sombra `0 4px 8px` (medidas da base).
   Com respiro nos dois, o texto da opção ficava recuado duas vezes.

   ⚠ O `.2rem` É ESCOLHA DO SAMI (2026-09-10), não medida: a referência usa
   `0 0 8px`. Ele achou o painel folgado demais e passou este valor. */
.dropdown__menu {
    position: fixed;
    z-index: 95;
    display: flex;
    flex-direction: column;
    padding: .2rem;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    background: var(--cor-branco);
    text-align: left;
}

.dropdown__menu[hidden] {
    display: none;
}

/* Entrada suave: `display` não interpola, então quem anima é opacidade +
   deslocamento, com a classe entrando um quadro depois do `hidden = false`
   (ver o auxiliar UI em public/js/dropdown.js). */
.dropdown__menu {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease;
}

.dropdown__menu--visivel {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .dropdown__menu {
        transform: none;
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   PELE DO MENU DAS BUSCAS — MEDIDA NO SITE DA base (2026-09-10), com o
   dropdown "Tipo" da régua aberto pelo DevTools.

   ⚠ O QUE ESTAVA AQUI ERA DA base e desenhava outra coisa: opção de 29,5px em
   13px, e um QUADRADINHO de 16x16 com borda antes do texto. a base não tem
   caixa de marcar nenhuma — ver `.dropdown__checkmark` mais abaixo.

     painel ....... branco, borda 1px rgba(0,0,0,.15), raio 4,
                    `padding: 0 0 8px`, SEM sombra
     opção ........ 37px de altura: 16px/400 #212529, linha 28,8,
                    `padding: 4px 16px`
     entre opções . 16px (é `margin-top` do <li>, não respiro da opção) — são
                    53px de uma para a outra
     hover ........ fundo #e9ecef, texto #1e2125
     escolhida .... ganha um ✔ à direita e MAIS NADA: mesmo peso, mesma cor,
                    sem fundo e sem fio na lateral

   O MESMO WIDGET APARECE NOS DOIS LUGARES no site no ar (a régua da home e a
   barra lateral da listagem usam `selectpicker`), então esta pele não tem
   prefixo de página — vale para o componente. */
.dropdown__titulo-lista {
    margin: 0;
    /* O painel perdeu o respiro lateral; o título passa a ter o seu, no mesmo
       prumo das opções. */
    padding: 8px 16px 0;
}

.dropdown__opcoes {
    /* MEDIDO: com os 9 tipos o painel da referência fecha 577 e NÃO rola. O
       teto antigo (264) cortava a lista em cinco itens e punha barra de
       rolagem onde lá não há. 560 cabe os 9 (9x37 + 8x16 = 461) com folga; daí
       para cima quem limita é a altura da janela, no posicionador em JS. */
    max-height: 560px;
}

/* ⚠ DIVERGÊNCIA DELIBERADA — pedido do Sami em 2026-09-10.

   A REFERÊNCIA TEM 16px ENTRE AS OPÇÕES: `margin: 16px 0 0` em CADA <li>
   (remedido item a item — Apto em y=355, Casa em 408, Casa Comercial em 461:
   são 53px de uma para a outra, com a opção medindo 37). Não é margem só da
   primeira, como cheguei a supor.

   AQUI AS LINHAS FICAM COLADAS (37px cada, sem vão): o Sami achou o
   espaçamento de lá exagerado. De quebra, o realce do hover vira uma faixa
   contínua, como em qualquer lista de seleção.

   PARA VOLTAR AO QUE ESTÁ NO AR, repor a regra abaixo — as duas formas de
   lista precisam dela: a de escolha única é <li> e a de caixas é um <label>
   solto dentro do <li>:

       .dropdown__opcoes li + li,
       .dropdown__opcao + .dropdown__opcao { margin-top: 16px; }
*/

/* ⚠ SAIU DAQUI o realce do campo aberto (`.busca-hero__form .campo:has(...)`:
   fundo #f0f0f0 e sombra), que era da régua da base — a classe
   `busca-hero__form` nem existe mais desde que a home virou a faixa da base.
   Na régua da base o campo aberto não muda de cor; quem muda é a opção sob o
   ponteiro, dentro do painel. */

/* Título da seção ("Todos os tipos", "Todas as cidades"): versalete pequeno e
   cinza, peso normal.

   ⚠ A REFERÊNCIA NÃO TEM ESTE TÍTULO — no lugar dele há uma tarja preta escrita
   "Selecionar" com um × de fechar, e abaixo um campo de busca dentro da lista
   (o `data-live-search` do selectpicker). Nenhum dos dois foi replicado ainda;
   quando forem, este título sai. O respiro lateral dele está no bloco da pele,
   acima. */
.dropdown__titulo-lista {
    font-size: 12px;
    color: #777;
    text-transform: uppercase;
}

/* Rolagem da lista: sem regra própria de barra aqui. A barra global de 6px que
   a base usava foi removida (ver a nota no topo deste arquivo); quando esta
   lista for medida contra a referência, ela ganha a sua, se precisar. */
.dropdown__opcoes {
    max-height: 264px;
    min-height: 0;      /* sem isto o item de flex não encolhe abaixo do conteúdo */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    list-style: none;
}

/* `.campo label` (acima) manda versalete em TODO <label> dentro de um campo, e
   a opção de dropdown É um <label> — as opções saíam em MAIÚSCULAS com
   espaçamento de letra. MEDIDO na referência: ali elas são texto normal.
   Seletor com dois níveis para vencer `.campo label`, que tem mais peso que
   uma classe sozinha. */
/* ⚠ DOIS NÍVEIS DE PROPÓSITO. `.campo label` (mais acima) manda versalete,
   11px e cinza em TODO <label> dentro de um campo — e a opção do dropdown de
   caixas É um <label>. Com um seletor de classe só, ela perde: as opções saíam
   em 11px cinza no lugar dos 16px #212529 medidos. Tudo o que precisa vencer
   `.campo label` mora AQUI, não na regra de baixo. */
.dropdown__menu .dropdown__opcao {
    text-transform: none;
    letter-spacing: normal;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    color: #212529;
}

/* MEDIDO na base (2026-09-10): 37px de altura — 16px/400 #212529 com linha de
   28,8 e `padding: 4px 16px`. O hover é um retângulo reto de ponta a ponta do
   painel, e é por isso que o respiro lateral é DAQUI e não do painel.

   ⚠ ERA `.5rem .75rem` em 13px na cor do texto corrido — medida da base. */
.dropdown__opcao {
    padding: 4px 16px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    color: #212529;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cursor do teclado e hover são o MESMO estado — só existe um "atual".
   MEDIDO: fundo #e9ecef, texto #1e2125. */
.dropdown__opcao--ativa,
.dropdown__opcao:hover {
    background: #e9ecef;
    color: #1e2125;
}

/* ESCOLHIDA: na referência ela ganha um ✔ à direita e MAIS NADA — mesma cor,
   mesmo peso, sem fundo.
   ⚠ ERA fundo + negrito + um fio de 3px da cor da marca à esquerda, desenho da base. */
.dropdown__opcao[aria-selected="true"] {
    position: relative;
    box-shadow: none;
    background: none;
    color: #212529;
    font-weight: 400;
}

.dropdown__opcao[aria-selected="true"]::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 6px;
    height: 12px;
    margin-top: -9px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.dropdown__opcao[aria-selected="true"]:hover,
.dropdown__opcao[aria-selected="true"].dropdown__opcao--ativa {
    background: #e9ecef;
}

/* ===========================================================================
   DROPDOWN COM CHECKBOXES (multi-escolha) — ver
   pages/partials/dropdown-checkboxes.php e js/dropdown-checkboxes.js.
   Reaproveita .dropdown/.dropdown__gatilho/.dropdown__menu/.dropdown__opcoes
   acima; só a linha de opção muda (checkbox + rótulo + marca própria, em vez
   de <li> de seleção única) porque aqui mais de uma pode ficar marcada ao
   mesmo tempo. O <input> nativo fica funcional mas invisível — quem aparece é
   o `.dropdown__checkmark`.
   =========================================================================== */
.dropdown__opcao--checkbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    cursor: pointer;
}

.dropdown__opcao--checkbox input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    cursor: pointer;
}

.dropdown__opcao--checkbox span:first-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    white-space: nowrap;
}

.dropdown__opcao--checkbox:hover {
    background: #e9ecef;
    color: #1e2125;
}

/* ---- A MARCA DE ESCOLHIDO É UM ✔, NÃO UMA CAIXINHA --------------------
   MEDIDO no site no ar (2026-09-10): a opção marcada ganha o glifo de "ok" do
   selectpicker à direita — caixa de 8x16, `right: 15px`, cor #212529 — e mais
   nada. NÃO EXISTE quadrado de marcar em lugar nenhum daquele site.

   ⚠ ERA UM CHECKBOX DESENHADO: 16x16 com borda #ccc, raio 3, que ao marcar se
   pintava da cor da marca com um visto branco dentro. Desenho da base, que
   veio com a base.

   O ✔ CONTINUA SENDO ITEM DE FLEX (o `justify-content: space-between` da linha
   já o joga na direita) em vez de absoluto como lá: assim ele nunca cobre um
   rótulo comprido, e a linha não "pula" quando alguém marca — o espaço dele já
   estava reservado, só invisível. */
/* ABSOLUTO, como na referência (`right: 15px`), e NÃO item de flex: assim ele
   não rouba largura do rótulo. Com ele no fluxo, "Casa Comercial" era cortado
   em "Casa Come…" num campo onde a referência mostra o nome inteiro.

   ⚠ E SEM RESPIRO EXTRA À DIREITA. A tentação é reservar 32px para o texto
   nunca passar por baixo da marca — mas aí sobram só 131px de rótulo e o corte
   volta. A referência deixa a marca FLUTUAR sobre os 16px de respiro que a
   opção já tem, e é o que se faz aqui: 149px de rótulo, que cabe o maior tipo
   da carteira. Rótulo mais comprido que isso passa por baixo do ✔ — lá também. */
.dropdown__checkmark {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 16px;
    margin-top: -8px;
    flex: none;
    border: 0;
    border-radius: 0;
    background: none;
    opacity: 0;
    transition: opacity var(--transicao);
}

.dropdown__checkmark::after {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.dropdown__opcao--checkbox input:checked ~ .dropdown__checkmark {
    opacity: 1;
}

/* O FOCO DO TECLADO PRECISA APARECER MESMO SEM A MARCA — com o ✔ invisível até
   marcar, quem navega por Tab não veria onde está. `:focus-visible` e não
   `:focus-within`: com o segundo o contorno aparecia também no clique de
   mouse, que a referência não faz. */
.dropdown__opcao--checkbox:has(input:focus-visible) {
    outline: 2px solid var(--cor-escura);
    outline-offset: -2px;
}

/* ---- BUSCA DENTRO DO MENU (opcional: `busca` em dropdown.php e
   dropdown-checkboxes.php) ----------------------------------------------------
   O `data-live-search` do selectpicker da listagem da base, MEDIDO em
   2026-09-11: caixa com 4/8 de respiro e campo de 38px, borda 1px #ddd, raio 4,
   16/24 Nunito Sans. Em foco a borda NÃO muda (o `input:focus` do tema de lá
   repõe #ddd). Sem resultado, a faixa cinza #f5f5f5 com o texto da biblioteca. */
.dropdown__busca {
    padding: 4px 8px;
}

/* ⚠ PRECISA DO `.campo` NA FRENTE (e do `.campo.campo` no foco): o campo mora
   dentro de um `.campo`, e as regras genéricas de formulário lá de cima
   (`.campo input` e `.campo.campo input:focus`) pegariam este <input> também —
   era o que saía na tela, 13px com borda azul e raio 5. Medido na referência:
   16px Nunito Sans, borda #ddd que NÃO muda no foco, raio 4. */
.campo .dropdown__busca-campo {
    display: block;
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-family: 'Nunito Sans', var(--fonte);
    font-size: 16px;
    line-height: 24px;
    color: #212529;
}

.campo.campo .dropdown__busca-campo:focus,
.campo.campo .dropdown__busca-campo:focus-visible {
    border-color: #ddd;
    outline: none;
    box-shadow: none;
}

.dropdown__sem-resultado {
    margin: 0 5px;
    padding: 3px;
    background: #f5f5f5;
    font-size: 16px;
    line-height: 1.8;
    color: #212529;
    white-space: nowrap;
}

/* ===========================================================================
   9. FORMULÁRIO DE LEAD (contato, anuncie, interesse no imóvel)
   ---------------------------------------------------------------------------
   O MESMO formulário nas três páginas — ver pages/partials/form-contato.php.
   A variação `--compacto` é a da coluna estreita (sidebar do imóvel).
   =========================================================================== */
.form-lead {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.form-lead .campo--largo,
.form-lead .campo--dropdown {
    grid-column: 1 / -1;
}

/* NO ARRANJO EM PARES o dropdown é um campo como os outros e ocupa UMA coluna —
   ele fica ao lado do telefone (ver $form['pares'] em form-contato.php). */
.form-lead--pares .campo--dropdown {
    grid-column: auto;
}

.form-lead textarea {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background: var(--cor-branco);
    font-size: var(--fs-sm);
    line-height: 1.5;
    resize: vertical;
    transition: border-color var(--transicao);
}

.form-lead textarea:focus {
    border-color: var(--cor-primaria);
}

/* Honeypot: some da tela sem `display:none` — robô costuma ignorar campo
   escondido assim, e leitor de tela não cai nele (aria-hidden no wrapper). */
.form-lead__armadilha {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-lead__acoes .btn {
    flex: 1;
    min-width: 200px;
}

.btn--enviando {
    opacity: .6;
    cursor: wait;
}

/* --- Modo "só placeholder" (ver $form['sem_rotulos'] em form-contato.php) ---
   MEDIDO na referência (fale-conosco.php): o campo não tem rótulo visível e
   ganha um glifo amarelo encostado 20px na direita — 16px de altura, no
   centro do campo; no textarea, 25px abaixo do topo.

   O RÓTULO CONTINUA NO HTML, só some da tela (.visualmente-oculto): o
   placeholder desaparece quando a pessoa começa a digitar, então ele não
   serve de rótulo para leitor de tela. */
.form-lead--sem-rotulos .campo {
    position: relative;
}

.form-lead--compacto .form-lead__acoes .btn {
    width: 100%;
}

/* Na coluna estreita o Turnstile entra no tamanho `compact` (data-size), que
   já cabe — não precisa de escala. Só garante que nunca estoure. */
.form-lead .cf-turnstile {
    max-width: 100%;
    overflow: hidden;
}

/* --- Aviso do resultado do envio ----------------------------------------- */
.aviso {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0 0 var(--gap);
    padding: var(--gap-sm) var(--gap);
    border: 1px solid var(--cor-borda);
    border-left-width: 3px;
    border-radius: var(--raio-sm);
    background: var(--cor-fundo-alt);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--cor-escura);
}

.aviso svg {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: .1rem;
}

/* ===========================================================================
   RESPONSIVO
   =========================================================================== */
@media (max-width: 991px) {
    /* MEDIDO: sem a barra escura de contatos o cabeçalho fecha 70px. Quem se
       posiciona por ele (coluna grudada da listagem) lê deste token. */
    :root {
        --altura-header: var(--altura-header-mobile);
    }

    /* ⚠ O RESPONSIVO DO RODAPÉ MUDOU DE LUGAR: agora mora junto com o resto
       dele, no bloco 7, porque são quatro pontos de quebra amarrados uns aos
       outros (colunas, corpo do texto e a barra azul que some). */
}

@media (max-width: 767px) {
    :root {
        --gap-xl: 3rem;
        --gap-lg: 2rem;
    }

    h1 {
        font-size: var(--fs-2xl);
    }

    /* ⚠ O RODAPÉ NÃO CENTRALIZA MAIS NO CELULAR. Era pedido do cliente da base em 2026-08-25, para o rodapé de cinco colunas escuras dela. a base no ar mantém tudo encostado à esquerda em qualquer largura
       (medido) — só a logo, as redes e as duas faixas azuis são centradas, e
       isso já está no bloco 7. */

    .grid-imoveis {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

}

@media (max-width: 480px) {
    .grid-imoveis {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}