/* ===========================================================================
   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 de seção
     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/)
   ---------------------------------------------------------------------------
   Antes vinha do Google Fonts (fonts.googleapis.com -> fonts.gstatic.com):
   isso adicionava mais um domínio + um hop (CSS só pra apontar pro arquivo
   de fonte de verdade) na cadeia crítica de requisições, atrasando o LCP.
   Hospedando aqui, o navegador baixa o arquivo direto do mesmo domínio do
   site — sem DNS/TLS extra, sem round-trip do CSS intermediário.

   Só o subset "latin" (U+0000–00FF): cobre os acentos do português (á, ã,
   ç, õ...) e é o único subset usado no site — os outros que o Google Fonts
   manda (cyrillic, vietnamese...) não servem pra nada aqui.

   Nunito Sans: um arquivo variável só cobre os 4 pesos (400/500/600/700) —
   é assim que o próprio Google Fonts serve, não duplicação nossa. */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/nunito-sans-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/poppins-800.woff2') format('woff2');
}

/* ===========================================================================
   1. ROOT — tokens do site
   =========================================================================== */
:root {
    /* ---- Marca ---------------------------------------------------------------
       Verde do cliente (--cor-site-1..5) + cinzas neutros. Nada de vermelho.

       --cor-primaria é PREENCHIMENTO (botão, selo, fio, marca-texto) com o
       texto em PRETO/BRANCO por cima — mesma regra de antes, já que este verde
       (#0aa541) também não sustenta texto legível sobre o próprio fundo branco. */
    --cor-site-1: #014018;
    --cor-site-2: #03802f;
    --cor-site-3: #0aa541;
    --cor-site-4: #3b3f3b;
    --cor-site-5: #7e8480;

    --cor-primaria: var(--cor-site-3);
    --cor-primaria-escura: var(--cor-site-2);
    /* hover do preenchimento */
    --cor-primaria-clara: #6cc98d;
    /* fios e detalhes sobre preto/escura */
    --cor-primaria-suave: rgba(10, 165, 65, .18);

    /* Preto fixo pro texto QUANDO O FUNDO É --cor-primaria (selo, botão, pino
       do carrossel etc.): --cor-escura (verde escuro do cliente) não sustenta
       contraste AA sobre este verde claro (~3,7:1); preto puro sim (~6,5:1). */
    --cor-primaria-tinta: #000000;

    /* ---- Neutros -----------------------------------------------------------
       Verde bem escuro do cliente no lugar do preto puro; cinzas neutros para
       o resto (--cor-texto-suave segue #767676, não --cor-site-5, porque
       --cor-site-5 fica abaixo do AA — ver nota abaixo). */
    --cor-escura: var(--cor-site-1);
    --cor-texto: var(--cor-site-4);
    --cor-texto-suave: #767676;
    /* #8a8a8a media 3,45:1 no branco, abaixo do AA (4,5:1); este passa (~4,54:1). --cor-site-5 (#7e8480) passa só ~3,8:1, também abaixo do AA — mantido à parte da marca por acessibilidade. */
    --cor-borda: #e4e4e4;
    --cor-fundo: #ffffff;
    --cor-fundo-alt: #f6f6f6;
    --cor-fundo-band: #ededed;

    /* Apoio */
    --cor-whatsapp: #1a7a3c;
    /* verde oficial (#25d366) com texto branco fica em ~2:1, bem abaixo do AA; este passa (~5,4:1) */
    --cor-branco: #ffffff;

    /* ---- Tipografia --------------------------------------------------------
       DUAS famílias, e só. Dois papéis:
         display -> Poppins (títulos: h1–h4, título do card, título do imóvel)
         texto   -> Nunito Sans (todo o resto: corpo, rótulos, códigos, valores)

       Número que aparece em coluna (valor, contador, comodidades) não muda de
       família: usa `font-variant-numeric: tabular-nums`, que dá a mesma largura
       a todos os dígitos sem precisar de uma fonte mono. */
    --fonte-display: 'Poppins', 'Segoe UI', Arial, sans-serif;
    --fonte: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);

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

    /* Layout */
    --container: 1240px;
    --container-pad: 1.25rem;
    --altura-header: 84px;

    /* Formas — raios contidos: documento/ficha, não bolha. */
    --raio-sm: 3px;
    --raio: 5px;
    --raio-lg: 8px;
    --raio-pill: 999px;

    /* Sombras */
    --sombra-sm: 0 1px 2px rgba(0, 0, 0, .08);
    --sombra: 0 6px 20px rgba(0, 0, 0, .1);
    --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 ----------------------------------------------------
   A barra padrão do sistema é larga, tem setas nas pontas e um trilho cinza
   que corta o layout. Aqui ela vira um fio: 8px, sem setas, sem trilho, com
   o polegar em preto translúcido (funciona sobre branco e sobre cinza claro).
   Vale para a página e para qualquer área rolável (menu do dropdown, textos).
   Quem esconde a própria barra — como a trilha do carrossel — continua
   escondendo: aquelas regras são mais específicas que estas. */
* {
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: rgba(0, 0, 0, .25) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: var(--raio-pill);
    background: rgba(0, 0, 0, .25);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .4);
}

/* Sem as setinhas das pontas e sem o quadrado do canto. */
::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

html {
    /* Rede de segurança: se qualquer componente (banner, card, o que for)
       vazar mesmo que só alguns pixels além da largura da tela, isso vira
       scroll horizontal na PÁGINA TODA em vez de ficar contido ali — o site
       inteiro passa a arrastar de lado. Isto não esconde o vazamento (ele
       continua sendo bug), só impede que ele generalize pro resto da
       página. Carrosséis continuam rolando de lado normalmente: o
       `overflow-x` deles é próprio (`.carrossel__trilha`), independente
       deste aqui.
       SÓ NO <html>, NÃO TAMBÉM NO <body>: `overflow-x` em AMBOS força o
       navegador a computar `overflow-y: auto` nos dois (regra do spec —
       eixo não-`visible` obriga o outro a deixar de ser `visible`), criando
       dois contextos de rolagem aninhados. Isso quebra `position: sticky`
       em filhos diretos do body (ex.: `.cabecalho`), que passam a rolar
       junto com a página em vez de grudar no topo. */
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    -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);
}

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

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-infos 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);
}

/* --- Estruturas de página ------------------------------------------------ */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

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

.secao {
    padding-block: var(--gap-xl);
}

.secao--alt {
    background: var(--cor-fundo-alt);
}

.secao--compacta {
    padding-block: var(--gap-lg);
}

.secao__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: var(--gap-md);
}

/* Eyebrow: fio vermelho curto + rótulo em mono. O fio marca começo de bloco. */
.secao__chapeu {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cor-escura);
}

/* O fio amarelo (preenchimento) marca o começo do bloco; o rótulo é preto. */
.secao__chapeu::before {
    content: '';
    width: 24px;
    height: 3px;
    background: var(--cor-primaria);
    flex: none;
}

.secao__titulo {
    margin: 0;
    font-size: var(--fs-2xl);
}

.secao__texto {
    margin: .5rem 0 0;
    color: var(--cor-texto-suave);
    max-width: 62ch;
}


.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);
}

/* ===========================================================================
   2b. HERO DE PÁGINA
   ---------------------------------------------------------------------------
   Componente compartilhado para o topo de páginas institucionais/de conteúdo
   (Sobre, Contato, Anuncie, Solicite um imóvel, Blog...) — NÃO é o hero da
   home (aquele é específico, com foto de imóvel e carrossel). Texto puro
   (eyebrow + h1 + subtítulo) sobre um fundo levemente cinza — depois de
   testar ícone desenhado (sol, skyline) e foto de fundo, a decisão foi:
   nada disso, só tipografia bem cuidada.
   =========================================================================== */
.pagina-hero {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    background: var(--cor-fundo-alt);
    border-bottom: 1px solid var(--cor-borda);
}

.pagina-hero__titulo {
    margin: 0 0 var(--gap-sm);
    max-width: 22ch;
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
}

/* Marca-texto amarelo: o MESMO recurso do h1 da home — preenchimento com
   texto preto por cima, não cor de texto amarela (ilegível sobre branco). */
.pagina-hero__titulo mark {
    background: linear-gradient(to top, var(--cor-primaria) 42%, transparent 42%);
    color: inherit;
    padding-inline: .06em;
}

.pagina-hero__subtitulo {
    margin: 0;
    max-width: 62ch;
    font-size: var(--fs-lg);
    color: var(--cor-texto);
}

/* ===========================================================================
   3. BOTÕES
   =========================================================================== */
.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;
}

/* Verde claro é preenchimento, o texto é preto (ver --cor-primaria-tinta no :root). */
.btn--primario {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria-tinta);
}

/* Fundo mais escuro no hover: texto branco (preto perderia contraste aqui). */
.btn--primario:hover {
    background: var(--cor-primaria-escura);
    border-color: var(--cor-primaria-escura);
    color: var(--cor-branco);
}

.btn--secundario {
    background: var(--cor-escura);
    border-color: var(--cor-escura);
    color: var(--cor-branco);
}

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

.btn--contorno {
    border-color: var(--cor-escura);
    color: var(--cor-escura);
    background: transparent;
}

.btn--contorno:hover {
    background: var(--cor-escura);
    color: var(--cor-branco);
}

.btn--claro {
    background: var(--cor-branco);
    border-color: var(--cor-branco);
    color: var(--cor-escura);
}

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

.btn--whats {
    background: var(--cor-whatsapp);
    border-color: var(--cor-whatsapp);
    color: var(--cor-branco);
}

.btn--whats:hover {
    background: #145e2f;
    border-color: #145e2f;
    color: var(--cor-branco);
}

.btn--bloco {
    width: 100%;
}

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

.btn--lg {
    padding: 1rem 2rem;
    font-size: var(--fs-base);
}

/* Abaixo de 575px o .btn--lg costuma virar largura total (ver
   .sobre-chamada__acoes, .pagina-hero__acoes etc.) — com os mesmos 2rem de
   padding lateral do desktop, rótulos maiores ("Outros canais de contato")
   ficavam sem espaço e o texto quebrava em duas linhas dentro do botão. */
@media (max-width: 575px) {
    .btn--lg {
        padding: .85rem 1.25rem;
    }
}

/* --- 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);
}

.campo select:focus,
.campo input:focus {
    border-color: var(--cor-escura);
}

/* ===========================================================================
   4. HEADER
   =========================================================================== */
/* `.cabecalho__topo` (contatos) vem ANTES do `<header>` no HTML, fora dele —
   de propósito: `position: sticky` só consegue grudar enquanto o PAI do
   elemento ainda está cruzando a tela. Um `<header>` que embrulhasse as duas
   barras teria só ~120px de altura (a soma das duas), e a barra branca
   "descolaria" assim que esses 120px passassem — ficaria grudada por uma
   fração de segundo e sumiria junto no resto da rolagem. Por isso a barra
   preta é uma div solta ANTES do `<header>`, que aqui é só a barra branca —
   e essa sim gruda de verdade, porque o pai dela agora é o `<body>` inteiro. */
/* Fundo escuro: a logo do cliente é branca, precisa de contraste por trás. */
.cabecalho {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--cor-escura);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    transition: box-shadow var(--transicao);
}

.cabecalho--fixo {
    box-shadow: var(--sombra);
}

/* --- Barra superior (contatos) — rola normalmente, NÃO gruda ------------- */
.cabecalho__topo {
    background: var(--cor-branco);
    color: #000;
    border-bottom: 1px solid var(--cor-borda);
    font-size: var(--fs-xs);
}

.cabecalho__topo-interno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    min-height: 38px;
    padding-block: .35rem;
    padding-inline: 3rem;
}

.cabecalho__contatos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
}

.cabecalho__contato {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.cabecalho__contato svg {
    width: 14px;
    height: 14px;
    color: var(--cor-escura);
    flex: none;
}

.cabecalho__topo a:hover {
    color: var(--cor-texto);
}

.cabecalho__redes {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.cabecalho__redes a {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cor-fundo-alt);
    color: var(--cor-escura);
    transition: background var(--transicao), color var(--transicao);
}

.cabecalho__redes a:hover {
    background: var(--cor-primaria);
    color: var(--cor-primaria-tinta);
}

.cabecalho__redes svg {
    width: 14px;
    height: 14px;
}

/* --- Barra principal (a própria `.cabecalho`, ver acima) ------------------ */
.cabecalho__interno {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    min-height: var(--altura-header);
    padding-block: .75rem;
    padding-inline: 3rem;
}

/* Logo fixa à esquerda; nav + ações formam UM grupo colado à direita (com
   `gap` do próprio flex entre eles), em vez de três blocos espalhados com
   `justify-content: space-between` (que deixava o menu boiando isolado no
   meio, com vão grande de cada lado). */
.nav-principal {
    margin-left: auto;
}

.cabecalho__logo img {
    max-height: 58px;
    width: auto;
}

.cabecalho__logo-texto {
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--cor-branco);
    letter-spacing: -.01em;
}

/* --- Navegação desktop ---------------------------------------------------- */
.nav-principal>ul {
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* Item do menu: o verde entra como fio embaixo (preenchimento), não no texto. */
.nav-principal a {
    display: block;
    padding: .2rem .25rem;
    margin-inline: .5rem;
    border-bottom: 3px solid transparent;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--cor-branco);
}

.nav-principal a:hover {
    border-bottom-color: rgba(255, 255, 255, .35);
}

.nav-principal .ativo>a {
    border-bottom-color: var(--cor-primaria);
}

/* Contador de favoritos: preenchido pelo JS (public/js/favoritos.js), fica
   oculto (`hidden`) até existir pelo menos 1 favorito salvo. */
.favoritos-contador {
    display: inline-grid;
    place-items: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 .3rem;
    margin-left: .25rem;
    border-radius: 999px;
    background: var(--cor-primaria);
    color: var(--cor-primaria-tinta);
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: text-top;
}

.favoritos-vazio {
    padding: var(--gap-lg) 0;
    text-align: center;
    color: var(--cor-texto-suave);
}

.cabecalho__acoes {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}

/* Mesma altura para os dois botões independente de ícone: sem isto, o botão
   com SVG (18px) fica mais alto que o só-texto (linha ~14px), porque os dois
   são `inline-flex` com altura definida pelo conteúdo mais alto. */
.cabecalho__acoes .btn {
    height: 38px;
}

/* Fundo escuro do header: "Área do cliente" precisa da variante clara do
   contorno (branco em vez de --cor-escura, que aqui é a própria cor do fundo). */
.cabecalho__acoes .btn--contorno {
    border-color: var(--cor-branco);
    color: var(--cor-branco);
}

.cabecalho__acoes .btn--contorno:hover {
    background: var(--cor-branco);
    color: var(--cor-escura);
}

/* --- Ações mobile / hambúrguer -------------------------------------------- */
.cabecalho__mobile {
    display: none;
    align-items: center;
    gap: var(--gap-xs);
    margin-left: auto;
}

.btn-menu-mobile {
    display: grid;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 12px 11px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--raio-sm);
    background: transparent;
    cursor: pointer;
}

.btn-menu-mobile span {
    display: block;
    height: 2px;
    background: var(--cor-branco);
    border-radius: 2px;
}

.icone-redondo {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--cor-whatsapp);
    color: var(--cor-branco);
}

.icone-redondo svg {
    width: 22px;
    height: 22px;
}

/* --- Gaveta mobile -------------------------------------------------------- */
.menu-fundo {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(16, 22, 29, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicao), visibility var(--transicao);
}

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

.gaveta-menu {
    position: fixed;
    top: 0;
    z-index: 90;
    --gaveta-largura: min(360px, 88vw);
    width: var(--gaveta-largura);
    height: 100%;
    padding: var(--gap-md);
    background: var(--cor-branco);
    box-shadow: var(--sombra-lg);
    /* Fechada, fica de verdade FORA da viewport (right negativo), em vez de
       `right: 0` + `transform: translateX(100%)`. Esse combo (fixed +
       transform) é um bug conhecido em navegadores mobile: o layout box
       (antes do transform) fica encostado na borda direita da tela, e
       alguns navegadores contam esse box inteiro na largura ROLÁVEL da
       página — a página inteira ganhava ~360px de scroll horizontal
       fantasma, cortando qualquer coisa (título, botão, foto...) no mesmo
       ponto à direita. Com off-screen "de verdade" isso não acontece. */
    right: calc(-1 * var(--gaveta-largura));
    transition: right var(--transicao);
    overflow-y: auto;
}

.gaveta-menu.aberta {
    right: 0;
}

.gaveta__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: var(--gap-md);
}

.gaveta__topo img {
    max-height: 48px;
    width: auto;
}

.gaveta__fechar {
    width: 40px;
    height: 40px;
    border: 1px solid var(--cor-borda);
    border-radius: 50%;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.gaveta__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xs);
    margin-bottom: var(--gap-md);
}

.gaveta__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .7rem;
    border-radius: var(--raio-sm);
    background: var(--cor-fundo-alt);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.gaveta__chip:hover {
    background: var(--cor-primaria);
    color: var(--cor-primaria-tinta);
}

.gaveta__nav {
    display: grid;
    gap: .15rem;
    margin-bottom: var(--gap-md);
}

.gaveta__link {
    padding: .7rem .25rem;
    border-bottom: 1px solid var(--cor-borda);
    font-weight: 600;
}

.gaveta__link.ativo {
    box-shadow: inset 3px 0 0 var(--cor-primaria);
    padding-left: .75rem;
}

.gaveta__contatos {
    display: grid;
    gap: var(--gap-xs);
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
}

.gaveta__acoes {
    display: grid;
    gap: var(--gap-xs);
    margin-bottom: var(--gap-md);
}

/* ===========================================================================
   5. CARD DE IMÓVEL (home + listagem — o JS da busca gera o mesmo HTML)
   =========================================================================== */
.grid-imoveis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gap-md);
}

/* /favoritos: sem o padding vertical de .listagem__grid (só usado na busca
   com filtro lateral), o grid ficava colado direto em .listagem__topo assim
   que "Carregando..." (sem margem própria) sumia. */
.favoritos__resultados {
    padding-block: var(--gap-lg);
}

/* /favoritos: poucos itens (às vezes só 1) num grid de colunas fixas deixam
   colunas vazias reservadas, "puxando" o card pra esquerda com um vão enorme
   ao lado. Flex (sem tracks reservados) resolve: cada card fica com a
   largura normal e o espaço sobrando simplesmente não existe. */
body[data-pagina="favoritos"] .grid-imoveis {
    display: flex;
    flex-wrap: wrap;
}

body[data-pagina="favoritos"] .grid-imoveis .card-imovel {
    flex: 0 1 280px;
}

.card-imovel {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    overflow: hidden;
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

/* WhatsApp e copiar link: sobrepostos na foto, FORA do <a> principal (não dá
   pra aninhar elemento interativo dentro de outro). Ficam escondidos até o
   hover/foco pra não competir com o selo de exclusivo. */
.card-acoes {
    position: absolute;
    top: .65rem;
    right: .65rem;
    z-index: 2;
    display: flex;
    gap: .4rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transicao), transform var(--transicao);
}

.card-imovel:hover .card-acoes,
.card-imovel:focus-within .card-acoes {
    opacity: 1;
    transform: translateY(0);
}

.card-acao {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--cor-escura);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}

.card-acao svg {
    width: 15px;
    height: 15px;
}

.card-acao:hover {
    transform: scale(1.08);
}

.card-acao[href*="wa.me"]:hover {
    background: var(--cor-whatsapp);
    color: var(--cor-branco);
}

.card-acao.copiado {
    background: var(--cor-escura);
    color: var(--cor-branco);
}

/* Favoritar: os dois traçados (contorno/cheio) ficam sobrepostos, um escondido
   por vez via aria-pressed no botão — ver public/js/favoritos.js. */
.favoritar__cheio { display: none; }
.favoritar[aria-pressed="true"] .favoritar__contorno { display: none; }
.favoritar[aria-pressed="true"] .favoritar__cheio { display: block; }

.card-acao.favoritar[aria-pressed="true"] {
    color: var(--cor-primaria-escura);
}

.card-imovel:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -20px rgba(15, 23, 30, .28);
    border-color: transparent;
}

.card-imovel .card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--cor-fundo-alt);
    overflow: hidden;
}

.card-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.card-imovel:hover .card-foto img {
    transform: scale(1.06);
}

/* Placeholder de foto. Vale em qualquer caixa de imagem (card, ficha do
   banner, galeria do detalhe): o servidor usa quando não há capa, e o site.js
   coloca no lugar da imagem que falhou ao carregar (ver `.sem-foto` em
   public/js/site.js). A logo vem de `--logo-placeholder`, uma variável CSS
   escrita no <head> (ver header.php) — assim este bloco não precisa saber a
   URL da logo, só desenhá-la. */
.sem-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    /* Diagonal + textura de pontos bem sutil (16px de passo): sozinha, a
       diagonal ainda lia como "cinza genérico". A textura dá uma sensação
       de superfície/material em vez de um retângulo vazio. */
    background:
        radial-gradient(rgba(0, 0, 0, .04) 1px, transparent 1.5px) 0 0 / 16px 16px,
        linear-gradient(135deg, var(--cor-fundo-alt) 0%, #ececea 100%);
}

/* Moldura circular branca atrás da logo, com um halo na cor da marca (mesma
   `--cor-primaria-suave` do :focus-visible) — sem o halo, a logo era só um
   círculo branco neutro, que podia ser de qualquer site. Com ele, mesmo um
   estado "vazio" carrega a identidade visual do cliente. */
.sem-foto::before {
    content: '';
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background-color: var(--cor-branco);
    background-image: var(--logo-placeholder, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1), 0 0 0 8px var(--cor-primaria-suave);
}

/* Texto como um chip (fundo + borda), não legenda solta flutuando no
   fundo — o mesmo gesto de `.sobre-corretor__creci`/`.erro__selo` em vez de
   um uppercase cinza genérico. */
.sem-foto::after {
    content: 'Fotos em breve';
    padding: .3rem .8rem;
    border-radius: var(--raio-pill);
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

/* Só o Exclusivo mora na foto (é raro e vale destacar); Destaque não aparece
   mais aqui — as vitrines da home já só listam destaques, então repetir o
   selo em todo card não informava nada, só poluía. */
.card-selo--exclusivo {
    position: absolute;
    top: .65rem;
    left: .65rem;
    z-index: 1;
    padding: .25rem .65rem;
    border-radius: var(--raio-pill, 999px);
    background: var(--cor-primaria);
    color: var(--cor-primaria-tinta);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .4rem;
    padding: var(--gap);
}

/* Meta: finalidade e código, pequenos e discretos — contexto, não destaque. */
.card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.card-finalidade {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--cor-escura);
}

.card-finalidade::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cor-primaria);
}

.card-cod {
    color: var(--cor-texto-suave);
    letter-spacing: .04em;
}

.card-titulo {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-local {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-local svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--cor-texto-suave);
}

/* Texto corrido ("3 quartos · 2 banheiros · 1 vaga · 137 m²"): sem ícone, uma
   linha só. O círculo amarelo por comodidade que existia aqui antes ocupava
   largura demais e quebrava linha à toa num card estreito. */
.card-infos {
    margin: .1rem 0 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--cor-texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rodapé: preço em destaque + seta — separado do resto por uma linha, é a
   última coisa que o olho pega antes de decidir clicar. */
.card-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .7rem;
    border-top: 1px solid var(--cor-borda);
}

.card-valor {
    font-size: var(--fs-xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--cor-escura);
    line-height: 1.2;
}

.card-seta {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cor-fundo-alt);
    color: var(--cor-escura);
    transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}

.card-seta svg {
    width: 15px;
    height: 15px;
}

.card-imovel:hover .card-seta {
    background: var(--cor-primaria);
    transform: translateX(3px);
}

/* ===========================================================================
   5b. CARTÃO DE POST DO BLOG (componente — home e pages/blog.php)
   ---------------------------------------------------------------------------
   Mesma linguagem visual do .card-imovel (foto 4/3, sombra no hover) pra não
   destoar do resto do site.
   =========================================================================== */
/* 3 colunas FIXAS de propósito (não auto-fit/auto-fill): com poucos posts,
   sobra espaço vazio na(s) coluna(s) que faltam em vez dos cartões
   esticarem pra ocupar a linha inteira — o tamanho do cartão fica sempre o
   mesmo (o de "1 de 3"), publique 1 post ou 30. Menos colunas conforme a
   tela estreita (ver breakpoints no fim do arquivo). */
.blog-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-lg);
}

.blog-card {
    display: flex;
    flex-direction: column;
    /* Item de grid tem `min-width: auto` por padrão — sem zerar, um título
       ou nome de autor mais comprido (sem espaço pra quebrar) empurra ESSE
       card mais largo que os outros da fileira, e a fileira desalinha
       (mesmo bug que já corrigimos no carrossel de imóveis). */
    min-width: 0;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    overflow: hidden;
    background: var(--cor-branco);
    box-shadow: var(--sombra);
    transition: box-shadow var(--transicao), border-color var(--transicao), transform var(--transicao);
}

.blog-card:hover {
    border-color: var(--cor-escura);
    box-shadow: var(--sombra-lg);
    transform: translateY(-3px);
}

.blog-card__foto {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--cor-fundo-alt);
}

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

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

.blog-card__corpo {
    padding: var(--gap);
    display: grid;
    align-content: start;
    gap: .4rem;
}

/* Trava em 1 linha (com reticências): sem isso, uma categoria com nome mais
   comprido quebra em 2 linhas e empurra o título pra baixo só NAQUELE
   card — o vizinho, com categoria curta, fica com o título mais alto. Os
   dois ficam com formato diferente mesmo tendo a mesma altura de cartão. */
.blog-card__categoria {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cor-primaria-escura);
}

/* Trava em 2 linhas: sem isso, um título longo (5+ linhas) ao lado de um
   curto (1 linha) deixava os cartões com alturas bem diferentes na mesma
   fileira. */
.blog-card__titulo {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

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

/* ===========================================================================
   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__topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.carrossel__titulo {
    margin: 0;
    font-size: var(--fs-xl);
}

.carrossel__controles {
    display: flex;
    gap: .4rem;
    flex: none;
}

.carrossel__botao {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background: var(--cor-branco);
    color: var(--cor-escura);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao), opacity var(--transicao);
}

.carrossel__botao:hover:not(:disabled) {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria-tinta);
}

.carrossel__botao:disabled {
    opacity: .35;
    cursor: default;
}

.carrossel__botao svg {
    width: 18px;
    height: 18px;
}

.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;
}

.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;
}

/* Barra de controle: contador + fio de progresso + setas. O fio existe por
   função — mostra quanto falta para o autoplay virar o slide. */
.carrossel__barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs) var(--gap);
    max-width: 100%;
}

.carrossel__contador {
    font-size: var(--fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .1em;
    color: var(--cor-escura);
    flex: none;
}

.carrossel__progresso {
    position: relative;
    flex: 1;
    height: 3px;
    background: var(--cor-borda);
    overflow: hidden;
}

.carrossel__progresso i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--cor-primaria);
}

.carrossel__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    margin-top: var(--gap);
}

.carrossel__pontos {
    display: flex;
    gap: .4rem;
}

.carrossel__ponto {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: width var(--transicao), background var(--transicao);
}

.carrossel__ponto.ativo {
    width: 24px;
    border-radius: var(--raio-pill);
    background: var(--cor-primaria);
}

.carrossel__link {
    font-size: var(--fs-sm);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.carrossel__link svg {
    width: 16px;
    height: 16px;
}

/* 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 faltava para 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 preço, lá
   embaixo, gruda na base (`.card-rodape { margin-top: auto }`). Um
   `height: auto` aqui cancelava esse stretch, e aí cada card ficava do
   tamanho do próprio título (1 ou 2 linhas) — foto e preço em alturas
   diferentes de card para card. */
.vitrine-carrossel {
    --carrossel-itens: 4;
}

/* Blog da home: mesmo componente de carrossel, só 3 itens por vez (é
   sempre no máximo 3 posts aqui — ver home.php) e o card já vem pronto
   de .blog-card/.blog-card__foto etc. (compartilhado com a página /blog). */
.blog-carrossel {
    --carrossel-itens: 3;
}

.blog-carrossel .blog-card {
    height: 100%;
}

.blog-carrossel__acoes {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

/* ===========================================================================
   7. FOOTER
   =========================================================================== */
.rodape {
    margin-top: var(--gap-xl);
    background: var(--cor-escura);
    color: rgba(255, 255, 255, .72);
    font-size: var(--fs-sm);
}

.rodape a:hover {
    color: var(--cor-branco);
}

.rodape__principal {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
    gap: var(--gap-lg);
    padding-block: var(--gap-xl) var(--gap-lg);
}

.rodape__logo img {
    max-height: 64px;
    width: auto;
    margin-bottom: var(--gap);
}

.rodape__nome {
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--cor-branco);
    margin-bottom: var(--gap-xs);
}

.rodape h3 {
    margin-bottom: var(--gap);
    font-size: var(--fs-base);
    color: var(--cor-branco);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.rodape__lista {
    display: grid;
    gap: .55rem;
}

.rodape__contatos {
    display: grid;
    gap: .75rem;
}

.rodape__contato {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.rodape__contato svg {
    width: 16px;
    height: 16px;
    margin-top: .25rem;
    color: var(--cor-primaria);
    flex: none;
}

.rodape__rotulo {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .6);
    /* .45 media ~4,43:1 no fundo preto, abaixo do AA */
}

.rodape__redes {
    display: flex;
    gap: .5rem;
    margin-top: var(--gap);
}

.rodape__redes a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    transition: background var(--transicao), transform var(--transicao);
}

.rodape__redes a:hover {
    background: var(--cor-primaria);
    color: var(--cor-primaria-tinta);
    transform: translateY(-2px);
}

.rodape__redes svg {
    width: 17px;
    height: 17px;
}

.rodape__horarios {
    margin-top: var(--gap);
    display: grid;
    gap: .25rem;
}

/* --- Cadastro de novidades -------------------------------------------------
   Faixa horizontal entre o grid principal e a base do rodapé — não uma
   coluna espremida junto das outras, porque um formulário precisa de
   largura pra respirar. Campos claros sobre o preto do rodapé (mesmo
   contraste dos .campo do resto do site, cor invertida). */
.rodape__newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    padding-block: var(--gap-lg);
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.rodape__newsletter-texto {
    flex: 1 1 260px;
}

.rodape__newsletter-texto h3 {
    margin: 0 0 .2rem;
    color: var(--cor-branco);
    font-size: var(--fs-base);
    text-transform: none;
    letter-spacing: 0;
}

.rodape__newsletter-texto p {
    margin: 0;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .6);
}

.rodape__newsletter-form {
    flex: 1 1 480px;
}

.form-newsletter .aviso {
    margin-bottom: var(--gap-sm);
}

.form-newsletter__campos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.form-newsletter__campos input {
    flex: 1 1 160px;
    min-width: 0;
    padding: .65rem .9rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--raio-sm);
    background: rgba(255, 255, 255, .06);
    color: var(--cor-branco);
    font-size: var(--fs-sm);
    transition: border-color var(--transicao), background var(--transicao);
}

.form-newsletter__campos input::placeholder {
    color: rgba(255, 255, 255, .45);
}

.form-newsletter__campos input:focus {
    border-color: var(--cor-primaria);
    background: rgba(255, 255, 255, .1);
}

.form-newsletter__campos .btn {
    flex: 1 1 160px;
}

.form-newsletter .cf-turnstile {
    margin-top: var(--gap-sm);
}

.rodape__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    padding-block: var(--gap);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: var(--fs-xs);
}

.rodape__base p {
    margin: 0;
}

/* --- WhatsApp flutuante + voltar ao topo ---------------------------------- */
.whatsapp-flutuante {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 70;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--cor-whatsapp);
    color: var(--cor-branco);
    box-shadow: var(--sombra);
    transition: transform var(--transicao);
}

.whatsapp-flutuante:hover {
    transform: scale(1.08);
    color: var(--cor-branco);
}

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

.voltar-topo {
    position: fixed;
    /* 25px, não 22px: o botão é 44px vs os 58px do WhatsApp/chat (right:
       18px) — 25px alinha o CENTRO dos três na mesma coluna vertical. */
    right: 25px;
    bottom: 88px;
    z-index: 70;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--cor-escura);
    color: var(--cor-branco);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicao), visibility var(--transicao), background var(--transicao);
}

.voltar-topo.visivel {
    opacity: 1;
    visibility: visible;
}

.voltar-topo:hover {
    background: var(--cor-primaria);
    color: var(--cor-primaria-tinta);
}

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

/* Quando o chat do site existe (ver pages/partials/header.php, classe
   `.tem-chat` no <body>), ele ocupa o degrau mais baixo da pilha de botões
   flutuantes — WhatsApp e voltar ao topo sobem um degrau. */
body.tem-chat .whatsapp-flutuante {
    bottom: 88px;
}

body.tem-chat .voltar-topo {
    bottom: 158px;
}

/* Botão do WhatsApp virou um menu (mais de um setor com número PRÓPRIO
   configurado no painel — ver a lógica em pages/partials/footer.php): o
   wrap fixo assume a posição, o botão interno vira estático, e o menu
   abre pra cima dele. */
/* z-index MAIOR QUE .voltar-topo (70): SÃO IRMÃOS NO HTML E .voltar-topo VEM
   DEPOIS — COM O MESMO z-index, ELE SEMPRE PINTARIA POR CIMA (EMPATE
   RESOLVIDO PELA ORDEM NO DOM), TAMPANDO O MENU "FALAR COM QUAL SETOR?"
   QUANDO ABERTO. FICAR ACIMA NÃO MUDA NADA QUANDO O MENU ESTÁ FECHADO (OS
   DOIS BOTÕES NÃO SE SOBREPÕEM NESSE ESTADO). */
.whatsapp-flutuante-wrap {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 75;
}

body.tem-chat .whatsapp-flutuante-wrap {
    bottom: 88px;
}

.whatsapp-flutuante-wrap .whatsapp-flutuante {
    position: static;
    border: none;
}

/* Visual "cartão de contato do WhatsApp": cabeçalho verde, avatar circular
   por setor (mesmo ícone de telefone que o app usa pra contato), cantos bem
   arredondados e uma setinha apontando pro botão que abriu o menu — em vez
   do menu genérico de dropdown que tinha antes (título em caixa alta,
   ícone do WhatsApp repetido do lado do texto, sem nada que lembrasse o app). */
.whatsapp-menu {
    position: absolute;
    right: 0;
    bottom: 74px;
    width: max-content;
    min-width: 220px;
    /* `right:0` + `width:max-content`: sem isso o menu poderia crescer para
       além da borda esquerda da tela em celulares estreitos (~320px). */
    max-width: calc(100vw - 36px);
    padding: 0;
    background: var(--cor-branco);
    border-radius: 14px;
    box-shadow: var(--sombra-lg);
    overflow: hidden;
}

.whatsapp-menu[hidden] {
    display: none;
}

/* A setinha do balão, apontando pro botão flutuante logo abaixo. */
.whatsapp-menu::after {
    content: '';
    position: absolute;
    right: 22px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: var(--cor-whatsapp);
    transform: rotate(45deg);
    border-radius: 0 0 3px;
}

.whatsapp-menu__titulo {
    position: relative;
    z-index: 1;
    display: block;
    padding: 14px 16px;
    background: var(--cor-whatsapp);
    color: var(--cor-branco);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.whatsapp-menu__lista {
    display: grid;
    gap: 2px;
    padding: 6px;
}

.whatsapp-menu a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: var(--cor-branco);
    color: var(--cor-escura);
    font-weight: 700;
    font-size: var(--fs-sm);
    transition: background var(--transicao), transform var(--transicao);
}

/* Leve deslize pra direita no hover — mesmo gesto de "isso é clicável" do
   .card-seta nos cards de imóvel, só que aqui é a linha toda que se move. */
.whatsapp-menu a:hover {
    background: var(--cor-fundo-alt);
    transform: translateX(3px);
}

/* `>` (filho direto): só o ícone do WhatsApp vira bolinha verde — a setinha
   final (.whatsapp-menu__seta) tem o estilo próprio abaixo. */
.whatsapp-menu a>svg {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 7px;
    flex: none;
    color: var(--cor-branco);
    background: var(--cor-whatsapp);
    border-radius: 50%;
}

.whatsapp-menu__rotulo {
    flex: 1;
}

/* Seta discreta no final da linha — cinza em repouso, fundo verde no hover
   (mesmo par de estados do .card-seta, com a cor do WhatsApp no lugar da
   cor da marca, pra combinar com o resto do cartão). */
.whatsapp-menu__seta {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cor-fundo-alt);
    color: var(--cor-texto-suave);
    transition: background var(--transicao), color var(--transicao);
}

.whatsapp-menu__seta svg {
    width: 12px;
    height: 12px;
}

.whatsapp-menu a:hover .whatsapp-menu__seta {
    background: var(--cor-whatsapp);
    color: var(--cor-branco);
}

/* O modal do desafio Turnstile agora é o próprio AlertSami (desafio ->
   carregando -> resultado, tudo no mesmo modal) — ver alert-sami.css/.js.
   Não sobrou nada específico de Turnstile aqui no CSS do site. */

/* ===========================================================================
   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;
    z-index: 200;
    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. */

.instalar-app__icone {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--raio-sm);
}

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

.instalar-app__fechar {
    position: absolute;
    top: -10px;
    right: -10px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cor-escura);
    color: var(--cor-branco);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--sombra-sm);
    transition: background var(--transicao);
}

.instalar-app__fechar:hover {
    background: #000;
}

/* 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
   ---------------------------------------------------------------------------
   Fica num canto (não no rodapé inteiro) de propósito: não some o conteúdo
   nem disputa espaço com o cluster de botões flutuantes (WhatsApp, chat,
   voltar ao topo), que fica no canto OPOSTO. Consentimento em localStorage
   (ver site.js) — some e não volta enquanto não expira/for limpo.
   =========================================================================== */
.cookies-aviso {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 90;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-sm);
    max-width: min(420px, calc(100vw - 36px));
    padding: var(--gap-sm) var(--gap);
    border-radius: var(--raio-lg);
    background: var(--cor-escura);
    color: rgba(255, 255, 255, .85);
    box-shadow: var(--sombra-lg);
}

.cookies-aviso[hidden] {
    display: none;
}

.cookies-aviso p {
    margin: 0;
    font-size: var(--fs-xs);
    flex: 1 1 220px;
}

.cookies-aviso .btn {
    flex: none;
}

/* ===========================================================================
   MEU BOLETO (widget de terceiro, só na home — ver pages/home.php)
   ---------------------------------------------------------------------------
   O script injeta o próprio HTML/CSS com `position:fixed; right:Npx` fixo
   (não dá opção de canto na config) — sobrescrevendo aqui pro canto
   ESQUERDO, a pedido. `!important` porque o widget usa `style="right:Npx"`
   inline, que só perde pra uma regra nossa com !important.
   `bottom` AQUI É SÓ O VALOR INICIAL (ANTES DO JS RODAR) — QUEM DECIDE A
   ALTURA DE VERDADE É ajustarPilhaCantoEsquerdo() EM site.js, QUE EMPILHA
   ESTE BOTÃO ACIMA DO AVISO DE COOKIES/APP QUANDO ELES ESTIVEREM VISÍVEIS
   (E DEIXA ELE DESCER CONFORME OS DOIS VÃO SENDO FECHADOS/ACEITOS).
   VISUAL TAMBÉM PRECISOU DE !important (WIDGET APLICA ESTILO INLINE): SEM
   ISSO O BOTÃO SAÍA QUADRADO E SEM SOMBRA, "COLADO" NA PÁGINA EM VEZ DE
   PARECER UM BOTÃO FLUTUANTE DE VERDADE (COMPARADO AO WhatsApp/voltar ao
   topo, QUE SÃO REDONDOS E TÊM SOMBRA). SÓ CONHEÇO ESTAS DUAS CLASSES
   (CONFIRMADAS POR INSPEÇÃO ANTERIOR) — O WIDGET NÃO EXPÕE O TEMPLATE HTML
   INTERNO (ÍCONE/TEXTO) PRA MIRAR SELETORES MAIS ESPECÍFICOS. */
.open-button {
    right: auto !important;
    left: 28px !important;
    bottom: 18px !important;
    box-shadow: var(--sombra) !important;
    transition: transform var(--transicao), box-shadow var(--transicao) !important;
}

.open-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--sombra-lg) !important;
}

.chat-popup {
    right: auto !important;
    left: 15px !important;
    bottom: 100px !important;
    box-shadow: var(--sombra-lg) !important;
}

@media (max-width: 575px) {
    .cookies-aviso {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
    }
}

/* ===========================================================================
   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
   agora rola — ver .filtros__caixa 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. */
.dropdown__menu {
    position: fixed;
    z-index: 95;
    max-height: 264px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Sem recuo lateral: a barra de rolagem encosta na borda do menu e as
       linhas ocupam a largura toda. */
    padding: .25rem 0;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-branco);
    box-shadow: var(--sombra);
    text-align: left;
}

.dropdown__menu[hidden] {
    display: none;
}

.dropdown__opcao {
    padding: .5rem .7rem;
    font-size: var(--fs-sm);
    color: var(--cor-texto);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cursor do teclado e hover são o MESMO estado — só existe um "atual". */
.dropdown__opcao--ativa {
    background: var(--cor-fundo-alt);
    color: var(--cor-escura);
}

/* Escolhida: preto com fio amarelo à esquerda (amarelo é preenchimento). */
.dropdown__opcao[aria-selected="true"] {
    box-shadow: inset 3px 0 0 var(--cor-primaria);
    background: var(--cor-fundo-alt);
    color: var(--cor-escura);
    font-weight: 600;
}

/* --- Campo de valor (R$ + número) ---------------------------------------- */
.campo-moeda {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .7rem .8rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background: var(--cor-branco);
    transition: border-color var(--transicao);
}

/* Quem mostra o foco é a CAIXA, com o mesmo anel dos outros campos. Sem isto o
   :focus-visible global desenha o halo no input de dentro — e ele aparece
   flutuando dentro do branco, e não em volta do campo. */
.campo-moeda:focus-within {
    border-color: var(--cor-escura);
    outline: 2px solid var(--cor-escura);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--cor-primaria-suave);
}

.campo-moeda__prefixo {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--cor-texto-suave);
    flex: none;
}

/* O input já está dentro da caixa: sem borda, sem padding, sem fundo. */
.campo .campo-moeda__campo {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.campo .campo-moeda__campo:focus,
.campo .campo-moeda__campo:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ===========================================================================
   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__campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
}

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

.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-escura);
}

/* 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 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
}

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

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

.form-lead__aviso {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--cor-texto-suave);
}

.form-lead--compacto .form-lead__campos {
    grid-template-columns: 1fr;
}

.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;
}

.aviso--ok {
    border-left-color: var(--cor-whatsapp);
}

.aviso--ok svg {
    color: var(--cor-whatsapp);
}

.aviso--erro {
    border-left-color: var(--cor-primaria);
}

/* ===========================================================================
   RESPONSIVO
   =========================================================================== */
@media (max-width: 1100px) {
    .nav-principal a {
        padding: .6rem .65rem;
    }

    .cabecalho__acoes .btn span {
        display: none;
    }
}

@media (max-width: 991px) {
    :root {
        --altura-header: 72px;
    }

    .nav-principal,
    .cabecalho__acoes {
        display: none;
    }

    .cabecalho__mobile {
        display: flex;
    }

    .rodape__principal {
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-lg);
    }

    .vitrine-carrossel {
        --carrossel-itens: 3;
    }

    .blog-carrossel {
        --carrossel-itens: 2;
    }

    .blog-grade {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

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

    /* O título (chapéu + h2 + texto) quebra pra própria linha em telas
       estreitas — sobrando só as setas do carrossel na linha de baixo, que
       "space-between" com um item só cola na ESQUERDA (parece solto, sem
       relação com o título). Empilhado, com as setas alinhadas à direita,
       fica claro que elas pertencem a esse cabeçalho. */
    .secao__cabecalho {
        flex-direction: column;
        align-items: flex-start;
    }

    .carrossel__controles {
        align-self: flex-end;
        margin-top: calc(var(--gap-sm) * -1);
    }

    /* Mesma ideia acima, mas o cabeçalho do blog tem um wrapper a mais
       (setas + botão "Ver todos os posts" juntos, .blog-carrossel__acoes) —
       é ELE que precisa ocupar a linha inteira embaixo do título, não as
       setas isoladas. */
    .blog-carrossel__acoes {
        width: 100%;
        justify-content: space-between;
    }

    .cabecalho__topo {
        display: none;
    }

    .rodape__principal {
        grid-template-columns: 1fr;
        gap: var(--gap-md);
    }

    /* Em coluna, o `flex-basis` em px de `.rodape__newsletter-texto/-form`
       (260px/480px, pensado pra LARGURA na linha do desktop) passa a valer
       como ALTURA mínima — sobrava uma faixa preta vazia embaixo do texto
       antes do formulário aparecer. `flex: none` deixa cada bloco com a
       altura do próprio conteúdo. */
    .rodape__newsletter {
        flex-direction: column;
        align-items: stretch;
    }

    .rodape__newsletter-texto,
    .rodape__newsletter-form {
        flex: none;
    }

    .form-newsletter__campos input,
    .form-newsletter__campos .btn {
        flex: 1 1 100%;
    }

    .rodape__base {
        justify-content: center;
        text-align: center;
    }

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

    .vitrine-carrossel {
        --carrossel-itens: 2;
    }

    .blog-carrossel {
        --carrossel-itens: 1;
    }
}

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

    .vitrine-carrossel {
        --carrossel-itens: 1;
    }

    .blog-carrossel {
        --carrossel-itens: 1;
    }

    /* Precisa estar DEPOIS do bloco ≤991px no arquivo: os dois batem no
       mobile ao mesmo tempo (uma tela de 380px é ≤991 E ≤480), e quem vem
       por último no arquivo vence — não quem tem o max-width mais estreito.
       2 colunas ficam espremidas demais em celular pequeno. */
    .blog-grade {
        grid-template-columns: 1fr;
    }
}

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

    html {
        scroll-behavior: auto;
    }
}