/* ==========================================================================
BRUCEE — Imóveis de Alto Padrão
Sistema visual extraído do mockup aprovado (paleta amostrada por pixel).
========================================================================== */
:root{
/* Paleta — verdes profundos do mockup + papel branco */
--tinta: #131A11; /* botão principal do hero */
--verde: #263223; /* botão buscar / newsletter */
--verde-fundo: #192117; /* bloco de lançamentos / rodapé */
--papel: #FFFFFF;
--areia: #F3F3F1; /* faixa de diferenciais */
--linha: #E4E4E0;
--texto: #23241F;
--suave: #5F5F59; /* escurecido: em 11px o cinza antigo não alcançava
contraste 4.5:1, que é o mínimo legível */
--claro: #74746C; /* idem. 4,71:1 sobre o branco — o valor antigo
(#9B9B94) dava 2,80, ilegível para muita gente */
/* Tipografia
A Cormorant Garamond saiu por causa dos algarismos: o "1" dela é um traço
estreito, de serifas mínimas, e no peso 300 com espaçamento largo some ao
lado dos outros números — "15.800.000" ficava ilegível. A EB Garamond é da
mesma família de desenho (revival de Garamond, mesmo ar clássico), mas com
algarismos mais encorpados e um "1" com bandeira e serifa de base bem
marcadas. Para voltar atrás, basta trocar esta linha e o link da fonte em
inc/comum.php. */
--serif: "EB Garamond", "Cormorant Garamond", "Times New Roman", Georgia, serif;
--sans: "Jost", "Helvetica Neue", Arial, sans-serif;
/* Métrica */
--largura: 1180px;
--raio: 2px;
--sombra: 0 1px 3px rgba(19,26,17,.06), 0 8px 28px rgba(19,26,17,.05);
}
*{box-sizing:border-box}
/* Página curta não tem barra de rolagem; página longa tem. A área útil muda de
largura entre as duas, e todo o conteúdo centralizado — inclusive o menu —
escorrega alguns pixels ao navegar de uma para outra.
scrollbar-gutter reserva o espaço sempre, então a régua não se move.
O overflow-y:scroll é a reserva para navegadores que ainda não entendem a
propriedade: dá o mesmo resultado por outro caminho. */
html{
-webkit-text-size-adjust:100%;
scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
html { overflow-y: scroll; }
}
body{
margin:0; background:var(--papel); color:var(--texto);
font-family:var(--sans); font-size:15px; line-height:1.6;
font-weight:300; letter-spacing:.01em;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--verde); outline-offset:3px}
.env{width:min(100% - 40px, var(--largura)); margin-inline:auto}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- Cabeçalho ---------- */
/* --------------------------------------------------------------------------
Barra do topo — uma peça só, que não recarrega ao trocar de página
--------------------------------------------------------------------------
Duas coisas trabalhando juntas:
1. position:sticky — a barra acompanha a rolagem em vez de sumir para cima.
O menu fica sempre a um clique, sem obrigar a voltar ao começo da página.
2. view-transition-name — com as transições entre documentos já ligadas, dar
um nome à barra faz o navegador entendê-la como o MESMO elemento nas duas
páginas. Em vez de a barra apagar e redesenhar junto com o resto, ela
permanece parada e só o conteúdo abaixo troca. É o que dá a sensação de
frame fixo, sem usar frame nenhum — e sem o custo de recarregar o menu.
-------------------------------------------------------------------------- */
.topo{
background:var(--papel); border-bottom:1px solid transparent;
position:sticky; top:0; z-index:40;
view-transition-name: barra-topo;
transition: box-shadow .2s ease, border-color .2s ease;
}
/* Sombra discreta só depois que a página rola: encostada no alto, a barra deve
parecer parte do papel; sobre o conteúdo, precisa se destacar dele. */
.topo.rolou{
border-bottom-color:var(--linha);
box-shadow:0 4px 18px rgba(20,22,18,.07);
}
.topo-int{display:flex; align-items:center; gap:34px; padding:18px 0}
/* Só o monograma na barra. Ele é vertical (179x255), então a mesma altura da
assinatura completa deixaria a barra alta demais — 44px equilibra com o menu.
O nome completo continua no alt e no aria-label, para leitor de tela e busca. */
.marca img{height:46px; width:auto; display:block; transition:opacity .18s ease}
.marca:hover img{opacity:.72}
.menu{display:flex; gap:26px; margin-left:auto; list-style:none; padding:0; margin-block:0}
/* Ajustes de legibilidade (v8.9)
Três coisas somadas deixavam o texto pequeno difícil de ler: tamanho baixo,
peso leve e espaçamento largo entre letras. O espaçamento é o menos óbvio dos
três — em caixa alta e tamanho pequeno, muito espaço separa as letras a ponto
de o olho deixar de ler a palavra e passar a soletrar. */
.menu a{
font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
color:var(--texto);
padding:7px 0; border-bottom:1px solid transparent; transition:border-color .18s
}
.menu a:hover, .menu a[aria-current="page"]{border-bottom-color:var(--tinta)}
.topo-acoes{display:flex; align-items:center; gap:20px}
.acao-txt{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--texto)}
.acao-txt svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.3}
.btn-anunciar{
background:var(--tinta); color:#fff; padding:12px 20px; border-radius:var(--raio);
font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap
}
.btn-anunciar:hover{background:var(--verde)}
.abrir-menu{display:none; background:none; border:0; padding:8px; cursor:pointer}
.abrir-menu span{display:block; width:22px; height:1px; background:var(--tinta); margin:5px 0}
/* ---------- Hero ---------- */
.hero{position:relative; min-height:430px; display:flex; align-items:center; color:#fff; overflow:hidden}
.hero-foto{position:absolute; inset:0; object-fit:cover; width:100%; height:100%}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(12,18,11,.90) 0%, rgba(12,18,11,.68) 46%, rgba(12,18,11,.18) 82%)}
.hero-txt{position:relative; z-index:2; padding:74px 0 96px; max-width:560px}
.hero h1{
font-family:var(--serif); font-weight:400; font-size:clamp(34px, 4.6vw, 52px);
line-height:1.12; letter-spacing:.03em; text-transform:uppercase; margin:0 0 20px
}
.hero p{font-size:16px; color:#E7E7E1; max-width:380px; margin:0 0 28px}
.btn-hero{display:inline-block; background:var(--tinta); color:#fff; padding:15px 26px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; border:1px solid rgba(255,255,255,.18)}
.btn-hero:hover{background:#fff; color:var(--tinta)}
/* ---------- Caixa de busca ---------- */
.busca{
background:#fff; box-shadow:var(--sombra); border:1px solid var(--linha);
margin-top:-58px; position:relative; z-index:20; padding:0 26px 26px
}
.busca-abas{display:flex; gap:28px; border-bottom:1px solid var(--linha); margin-bottom:22px}
.aba{
background:none; border:0; border-bottom:2px solid transparent; padding:18px 2px;
font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--suave); cursor:pointer
}
.aba[aria-selected="true"]{color:var(--tinta); border-bottom-color:var(--tinta)}
.busca-linha{display:grid; grid-template-columns:1fr 1.2fr 1fr .9fr auto; gap:16px; align-items:end}
.campo{display:flex; flex-direction:column; gap:8px; min-width:0}
.campo label{font-size:11.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--suave)}
.campo select, .campo input{
width:100%; height:46px; padding:0 14px; background:#fff;
border:1px solid var(--linha); border-radius:var(--raio);
font-size:14px; font-weight:400; color:var(--texto)
}
/* O select mostra texto e o campo de localização mostra placeholder — e o
navegador desenha placeholder mais claro por conta própria, o que fazia os
dois campos parecerem de famílias diferentes. Aqui eles voltam a combinar.
O opacity:1 é necessário: o Firefox aplica transparência ao placeholder e
ignoraria a cor definida. */
.campo input::placeholder{
color:var(--suave); opacity:1; font-weight:400; font-size:14px
}
.campo .com-icone svg{stroke:var(--suave)}
.campo .com-icone{position:relative}
.campo .com-icone input{padding-left:38px}
.campo .com-icone svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:15px; height:15px; stroke:var(--claro); fill:none; stroke-width:1.4}
.btn-buscar{
height:46px; padding:0 32px; background:var(--verde); color:#fff; border:0; border-radius:var(--raio);
display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:500; letter-spacing:.1em;
text-transform:uppercase; cursor:pointer
}
.btn-buscar:hover{background:var(--tinta)}
.btn-buscar svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.5}
.busca-avancada{display:flex; justify-content:flex-end; margin-top:16px}
.busca-avancada button{background:none;border:0;cursor:pointer;font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--texto);display:inline-flex;align-items:center;gap:8px}
.busca-avancada .seta{
width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.6;
stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease
}
/* Aberta, a seta aponta para cima: o botão passa a significar "recolher". */
.busca-avancada button[aria-expanded="true"] .seta{transform:rotate(180deg)}
.busca-extra{display:none; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px; padding-top:20px; border-top:1px solid var(--linha)}
.busca-extra.aberta{display:grid}
/* ---------- Seções ---------- */
.secao{padding:52px 0}
.secao-topo{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; gap:20px}
.secao-topo h2{
font-family:var(--serif); font-weight:400; font-size:26px; letter-spacing:.09em;
text-transform:uppercase; margin:0
}
.ver-todos{font-size:12px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; color:var(--texto)}
.ver-todos:hover{color:var(--verde)}
/* ---------- Cartão de imóvel ---------- */
.grade-imoveis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.cartao{background:#fff; border:1px solid var(--linha); display:flex; flex-direction:column; overflow:hidden}
.cartao:hover .cartao-foto img{transform:scale(1.04)}
.cartao-foto{position:relative; aspect-ratio:16/10.6; overflow:hidden; background:var(--areia)}
.cartao-foto img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.selo{
position:absolute; top:12px; left:12px; background:var(--verde-fundo); color:#fff;
padding:5px 11px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase
}
.selo.claro{background:rgba(255,255,255,.94); color:var(--tinta)}
.favorito{
position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
background:rgba(255,255,255,.94); border:0; cursor:pointer; display:grid; place-items:center
}
.favorito svg{width:16px;height:16px;stroke:var(--tinta);fill:none;stroke-width:1.4}
.favorito[aria-pressed="true"] svg{fill:var(--verde); stroke:var(--verde)}
.cartao-corpo{padding:16px 15px 18px; display:flex; flex-direction:column; gap:10px; flex:1}
.cartao h3{font-size:15px; font-weight:400; margin:0; letter-spacing:.01em}
.cartao .local{font-size:13px; color:var(--suave); margin:-6px 0 0}
.atributos{display:flex; flex-wrap:wrap; gap:12px; font-size:11.5px; color:var(--suave); padding:10px 0; border-top:1px solid var(--linha); border-bottom:1px solid var(--linha)}
.atributos span{display:inline-flex; align-items:center; gap:5px}
.atributos svg{width:13px;height:13px;stroke:var(--claro);fill:none;stroke-width:1.4}
.preco{font-size:18px; font-weight:400; letter-spacing:.02em; margin-top:auto}
.creditada{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--claro)}
/* ---------- Lançamentos ---------- */
.lancamentos{display:grid; grid-template-columns:1.02fr repeat(3,1fr); gap:0; border:1px solid var(--linha)}
.lanc-chamada{background:var(--verde-fundo); color:#fff; padding:38px 32px; display:flex; flex-direction:column; justify-content:center}
.lanc-chamada h2{font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.2; letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px}
.lanc-chamada p{color:#D8D8D0; font-size:13.5px; margin:0 0 26px; max-width:250px}
.btn-linha{display:inline-block; align-self:flex-start; border:1px solid rgba(255,255,255,.5); color:#fff; padding:13px 20px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase}
.btn-linha:hover{background:#fff; color:var(--verde-fundo)}
.lanc-item{border-left:1px solid var(--linha); display:flex; flex-direction:column}
.lanc-foto{position:relative; aspect-ratio:16/7.4; overflow:hidden}
.lanc-foto img{width:100%;height:100%;object-fit:cover}
.lanc-corpo{padding:16px 18px 20px; display:flex; flex-direction:column; gap:5px; flex:1}
.lanc-corpo h3{margin:0; font-size:15px; font-weight:400}
.lanc-corpo p{margin:0; font-size:12.5px; color:var(--suave)}
.saiba{margin-top:auto; padding-top:12px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; display:inline-flex; gap:8px; align-items:center}
/* ---------- Diferenciais ---------- */
.diferenciais{background:var(--areia); padding:34px 0}
.dif-grade{display:grid; grid-template-columns:repeat(4,1fr)}
.dif{display:flex; gap:16px; padding:0 26px; border-right:1px solid #DCDCD6}
.dif:last-child{border-right:0}
.dif:first-child{padding-left:0}
.dif svg{width:36px;height:36px;stroke:var(--tinta);fill:none;stroke-width:1;flex:none}
.dif h3{margin:2px 0 5px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:400}
.dif p{margin:0; font-size:12.5px; color:var(--suave); line-height:1.5}
/* ---------- Bairros ---------- */
.grade-bairros{display:grid; grid-template-columns:repeat(6,1fr); gap:12px}
.bairro{position:relative; aspect-ratio:1/.62; overflow:hidden; display:block}
.bairro img{width:100%;height:100%;object-fit:cover; transition:transform .5s}
.bairro:hover img{transform:scale(1.05)}
.bairro::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,20,14,.15), rgba(15,20,14,.72))}
.bairro span{position:absolute; left:0; right:0; bottom:14px; z-index:2; color:#fff; text-align:center; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase}
/* ---------- Parceiras ---------- */
.grade-parceiras{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.parceira{border:1px solid var(--linha); padding:26px 24px; display:flex; flex-direction:column; gap:12px; background:#fff}
.parceira-logo{height:52px; display:flex; align-items:center}
.parceira-logo img{max-height:52px; width:auto; object-fit:contain}
.parceira-logo .iniciais{
font-family:var(--serif); font-size:30px; letter-spacing:.14em; color:var(--verde-fundo)
}
.parceira h3{margin:0; font-size:16px; font-weight:400}
.parceira .meta{font-size:12px; color:var(--suave); margin:0}
.parceira p.sobre{font-size:13px; color:var(--suave); margin:0; line-height:1.55}
.plano{
align-self:flex-start; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
border:1px solid var(--linha); padding:4px 10px; color:var(--verde)
}
.plano.diamante{background:var(--verde-fundo); color:#fff; border-color:var(--verde-fundo)}
.plano.premium{background:var(--areia)}
/* ---------- Newsletter ---------- */
.news{background:var(--verde); color:#fff; padding:34px 0}
.news-int{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center}
.news h2{font-family:var(--serif); font-weight:400; font-size:22px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 6px}
.news p{margin:0; font-size:13px; color:#D5D9CF; max-width:420px}
.news-form{display:flex; min-width:520px}
.news-form input{flex:1; height:50px; border:0; padding:0 18px; font-size:14px}
.news-form button{height:50px; padding:0 34px; background:var(--tinta); color:#fff; border:0; cursor:pointer; font-size:11px; letter-spacing:.16em; text-transform:uppercase}
.news-form button:hover{background:#000}
/* ---------- Rodapé ---------- */
.rodape{background:var(--verde-fundo); color:#D9D9D2; padding:44px 0 0; font-size:13px}
.rodape-grade{display:grid; grid-template-columns:1.35fr repeat(3,.8fr) 1.1fr; gap:32px; align-items:start}
/* Sem a coluna de contato preenchida, a grade volta a quatro colunas — senão
sobra um vão à direita, que parece defeito. */
.rodape-grade.sem-contato{grid-template-columns:1.45fr repeat(3,1fr)}
/* Logo e redes formam um bloco de marca: os dois centralizados no mesmo eixo.
Antes a logo era ![]()
inline (encostada à esquerda) e os ícones flutuavam
em outro alinhamento — daí a sensação de estarem tortos. */
.rodape-marca{text-align:center}
.rodape img.logo{height:92px; width:auto; max-width:100%; margin:0 auto 22px; display:block}
.rodape h4{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 14px; font-weight:400}
.rodape ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.rodape a:hover{color:#fff}
.contato-li{display:flex; gap:10px; align-items:flex-start}
.contato-li svg{width:15px;height:15px;stroke:#B9BDB2;fill:none;stroke-width:1.3;flex:none;margin-top:3px}
/* A primeira coluna do rodapé tem a logo centralizada; os ícones seguiam
alinhados à esquerda e ficavam visivelmente fora de prumo com ela. */
.sociais{display:flex; gap:12px; margin-top:20px; justify-content:center}
.sociais a, .sociais .rede-sem-link{
width:40px;height:40px;border:1px solid rgba(255,255,255,.22);
display:grid;place-items:center;border-radius:50%
}
/* Sem perfil ainda: o ícone reage ao mouse como qualquer outro, mas não leva a
lugar nenhum. Cursor de ajuda em vez de mãozinha — sinaliza que há informação
(a dica "em breve") sem prometer navegação. */
.sociais .rede-sem-link{opacity:.72; cursor:help}
.sociais .rede-sem-link svg{stroke:currentColor;fill:none;stroke-width:1.3;width:18px;height:18px}
/* Reação ao mouse, igual para link e para ícone sem link. */
.sociais a, .sociais .rede-sem-link{
transition:background .18s ease, border-color .18s ease, opacity .18s ease, transform .18s ease;
}
.sociais a:hover, .sociais .rede-sem-link:hover{
background:#fff; border-color:#fff; opacity:1; transform:translateY(-2px);
}
.sociais a:hover svg, .sociais .rede-sem-link:hover svg{stroke:var(--verde-fundo)}
.sociais a:focus-visible, .sociais .rede-sem-link:focus-visible{
outline:2px solid #fff; outline-offset:3px;
}
/* Glifo preenchido (TikTok): fill em vez de contorno, senão sai um rabisco. */
.sociais svg.cheio{fill:currentColor; stroke:none}
.sociais a:hover svg.cheio, .sociais .rede-sem-link:hover svg.cheio{
fill:var(--verde-fundo); stroke:none;
}
.sociais a:hover{background:#fff}
.sociais svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.3}
.sociais a:hover svg{stroke:var(--verde-fundo)}
.rodape-fim{margin-top:36px; border-top:1px solid rgba(255,255,255,.12); padding:18px 0; text-align:center; font-size:11.5px; color:#9AA093}
/* ---------- Páginas internas ---------- */
.cabeca{background:var(--verde-fundo); color:#fff; padding:52px 0 44px}
.cabeca h1{font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.4vw,40px); letter-spacing:.06em; text-transform:uppercase; margin:0 0 10px}
.cabeca p{margin:0; color:#CFD3C8; max-width:560px; font-size:14.5px}
.trilha{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#9AA093; margin-bottom:16px}
.trilha a:hover{color:#fff}
.layout-busca{display:grid; grid-template-columns:262px 1fr; gap:30px; align-items:start; padding:36px 0 60px}
.filtros{border:1px solid var(--linha); padding:22px 20px; position:sticky; top:20px}
.filtros h3{margin:0 0 16px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:400}
.filtro-bloco{padding:14px 0; border-top:1px solid var(--linha)}
.filtro-bloco > label{display:block; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--suave); margin-bottom:8px}
.filtro-bloco select, .filtro-bloco input{width:100%; height:42px; border:1px solid var(--linha); padding:0 12px; border-radius:var(--raio)}
.opcoes{display:flex; flex-direction:column; gap:8px; font-size:13px}
.opcoes label{display:flex; gap:9px; align-items:center; cursor:pointer}
.btn-limpar{width:100%; margin-top:16px; height:42px; background:none; border:1px solid var(--linha); cursor:pointer; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase}
.btn-limpar:hover{border-color:var(--verde); color:var(--verde)}
.resultado-topo{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.resultado-topo p{margin:0; font-size:13.5px; color:var(--suave)}
.grade-resultado{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.vazio{border:1px solid var(--linha); padding:44px; text-align:center; color:var(--suave)}
.vazio strong{display:block; color:var(--texto); font-weight:400; font-size:16px; margin-bottom:6px}
/* Ficha do imóvel */
/* min-width:0 nos filhos é obrigatório aqui. Um item de grid tem min-width:auto
por padrão, ou seja, ele se recusa a ficar menor que o próprio conteúdo — e a
tira de miniaturas é uma linha flex que soma 30 itens de largura. Sem esta
linha, a coluna estoura a grade e empurra o aside de contato para fora da tela.
Foi o que aconteceu quando a galeria ganhou as miniaturas. */
.ficha{display:grid; grid-template-columns:1.7fr 1fr; gap:34px; padding:34px 0 60px; align-items:start}
.ficha > *{min-width:0}
.layout-busca > *{min-width:0}
.grade-resultado > *{min-width:0}
.ficha h1{overflow-wrap:anywhere}
/* Uma imagem só, com altura travada. Não depende de quantos filhos existem —
era isso que quebrava a ficha quando a galeria passou a ter tamanho variável. */
.galeria{position:relative; overflow:hidden; background:#f0f0ec}
.galeria .principal{display:block; width:100%; aspect-ratio:4/3; max-height:520px;
object-fit:cover; background:#f0f0ec;
transition:opacity .45s ease}
/* Estado intermediario da troca automatica: a foto some, a nova entra ja
carregada. Sem o fade a passagem "pisca"; com ele, escorrega. */
.galeria .principal.trocando{opacity:0}
@media (prefers-reduced-motion:reduce){
/* Quem pediu menos movimento nao recebe nem o fade nem o rodizio (o rodizio
e desligado no proprio script). */
.galeria .principal{transition:none}
.galeria .principal.trocando{opacity:1}
}
.ficha h1{font-family:var(--serif); font-weight:400; font-size:32px; letter-spacing:.03em; margin:26px 0 6px}
.ficha .local{color:var(--suave); margin:0 0 20px}
/* Era grid de 4 colunas fixas: com 5 atributos, o quinto caía sozinho numa
segunda linha. Flex distribui quantos existirem — 3, 4, 5 ou 6 — numa linha
só, e só quebra quando de fato não couberem. */
.especificacoes{
display:flex; flex-wrap:wrap; gap:14px 24px;
border-block:1px solid var(--linha); padding:18px 0; margin-bottom:26px
}
.especificacoes > div{flex:1 1 92px; min-width:0}
.especificacoes div span{display:block; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--suave); margin-bottom:4px}
.especificacoes div strong{font-weight:400; font-size:17px}
.ficha h2{font-family:var(--serif); font-size:22px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; margin:30px 0 12px}
.lista-check{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:9px; font-size:13.5px}
.lista-check li::before{content:"—"; color:var(--claro); margin-right:9px}
.aside-contato{border:1px solid var(--linha); padding:26px 24px; position:sticky; top:20px}
.aside-preco{font-size:28px; font-family:var(--serif); margin:0 0 4px}
.aside-custos{font-size:12.5px; color:var(--suave); margin:0 0 20px}
.aside-parceira{border-block:1px solid var(--linha); padding:16px 0; margin-bottom:20px; display:flex; gap:14px; align-items:center}
.aside-parceira .iniciais{font-family:var(--serif); font-size:24px; letter-spacing:.1em}
.aside-parceira small{display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--claro)}
.btn-bloco{display:block; width:100%; text-align:center; padding:15px; font-size:11px; letter-spacing:.15em; text-transform:uppercase; border:1px solid var(--verde); margin-bottom:10px; cursor:pointer; background:none}
.btn-bloco.cheio{background:var(--verde); color:#fff}
.btn-bloco.cheio:hover{background:var(--tinta)}
.btn-bloco:hover{background:var(--areia)}
/* Formulários públicos */
.form-cartao{max-width:820px; margin:38px auto 60px; border:1px solid var(--linha); padding:34px}
.form-grade{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.form-grade .largo{grid-column:1/-1}
.form-grade label{display:block; font-size:11.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--suave); margin-bottom:7px}
.form-grade input, .form-grade select, .form-grade textarea{
width:100%; border:1px solid var(--linha); border-radius:var(--raio); padding:12px 14px; background:#fff
}
.form-grade textarea{min-height:120px; resize:vertical}
.ajuda{font-size:12px; color:var(--claro); margin:6px 0 0}
.aviso{background:var(--areia); border-left:3px solid var(--verde); padding:14px 16px; font-size:13px; margin-bottom:24px}
/* ---------- Responsivo ---------- */
@media (max-width:1080px){
.grade-imoveis{grid-template-columns:repeat(2,1fr)}
.lancamentos{grid-template-columns:repeat(2,1fr)}
.lanc-item:nth-child(2){border-left:0}
.grade-bairros{grid-template-columns:repeat(3,1fr)}
.dif-grade{grid-template-columns:repeat(2,1fr); gap:24px 0}
.dif{padding:0 20px}
.dif:nth-child(2n){border-right:0}
.grade-parceiras{grid-template-columns:repeat(2,1fr)}
.grade-resultado{grid-template-columns:repeat(2,1fr)}
.busca-linha{grid-template-columns:1fr 1fr; }
.busca-linha .campo:nth-child(5), .btn-buscar{grid-column:1/-1}
.news-int{grid-template-columns:1fr}
.news-form{min-width:0}
.ficha{grid-template-columns:1fr}
.ficha > *{min-width:0}
.rodape-grade{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
.menu{
display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
flex-direction:column; gap:0; padding:8px 20px 18px; border-bottom:1px solid var(--linha); box-shadow:var(--sombra)
}
.menu.aberto{display:flex}
.menu li{border-bottom:1px solid var(--linha)}
.menu a{display:block; padding:14px 0}
.abrir-menu{display:block; margin-left:auto; order:3}
.topo-acoes .acao-txt{display:none}
.topo-int{gap:12px}
.marca img{height:42px}
.grade-imoveis, .lancamentos, .grade-parceiras, .grade-resultado{grid-template-columns:1fr}
.lanc-item{border-left:0; border-top:1px solid var(--linha)}
.grade-bairros{grid-template-columns:repeat(2,1fr)}
.dif-grade{grid-template-columns:1fr}
.dif{border-right:0; padding-left:0}
.busca{margin-top:-30px; padding:0 18px 20px}
.busca-linha{grid-template-columns:1fr}
.layout-busca{grid-template-columns:1fr}
.filtros{position:static}
.especificacoes > div{flex:1 1 40%} /* dois por linha no celular */
.lista-check, .form-grade{grid-template-columns:1fr}
.marca img{height:38px}
.rodape img.logo{height:70px; margin-bottom:16px}
/* Galeria em tela estreita: imagem mais baixa e miniaturas menores, senão a
tira ocupa metade da altura útil do celular. */
.galeria .principal{aspect-ratio:3/2; max-height:300px}
.tira{flex:0 0 76px; width:76px; height:56px}
.tiras{padding:8px 0 2px}
.rodape-grade{grid-template-columns:1fr}
.news-form{flex-direction:column; gap:10px}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important; transition:none!important}
}
/* ---------- Paginação ---------- */
.paginacao{display:flex; gap:8px; justify-content:center; margin-top:32px; flex-wrap:wrap}
.paginacao a{
min-width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--linha);
font-size:13px; padding:0 12px
}
.paginacao a:hover{border-color:var(--verde)}
.paginacao a.atual{background:var(--verde); color:#fff; border-color:var(--verde)}
/* ---------- Formulário de contato na ficha ---------- */
.form-lead{display:flex; flex-direction:column; gap:10px; margin-bottom:12px}
.form-lead input, .form-lead textarea{
width:100%; border:1px solid var(--linha); border-radius:var(--raio); padding:11px 13px; font:inherit; background:#fff
}
/* A caixa de aceite herdava width:100% da regra acima e esticava pela largura
toda, aparecendo sozinha e centralizada acima do texto. */
.form-lead .aceite input[type="checkbox"]{
width:16px; height:16px; flex:none; padding:0; border-radius:2px; margin-top:2px
}
.form-lead textarea{resize:vertical}
.form-lead .btn-bloco{margin-bottom:0}
/* --------------------------------------------------------------------------
Blocos de texto corrido (página de integração e institucionais)
-------------------------------------------------------------------------- */
.texto-longo { max-width: 760px; }
.texto-longo h3 {
font-family: var(--fonte-titulo, Georgia, serif);
font-size: 1.15rem; font-weight: 400;
margin: 32px 0 10px; letter-spacing: .01em;
}
.texto-longo p, .texto-longo li { line-height: 1.75; margin-bottom: 12px; }
.texto-longo ul { padding-left: 20px; margin-bottom: 18px; }
.texto-longo li { margin-bottom: 8px; }
.texto-longo code {
background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 3px; font-size: .9em;
}
.texto-longo .nota {
border-left: 2px solid var(--linha, #d8d8d2);
padding: 10px 0 10px 16px; margin: 24px 0;
font-size: .93rem; opacity: .82;
}
.texto-longo .btn { display: inline-block; margin-top: 12px; }
/* --------------------------------------------------------------------------
Tira de miniaturas da ficha do imóvel
-------------------------------------------------------------------------- */
.tiras {
display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
padding: 10px 0 4px; scrollbar-width: thin;
width: 100%; min-width: 0; max-width: 100%;
}
.tiras::-webkit-scrollbar { height: 6px; }
.tiras::-webkit-scrollbar-thumb { background: #d8d8d2; border-radius: 3px; }
.tira {
flex: 0 0 104px; width: 104px; height: 74px; padding: 0;
border: 2px solid transparent; /* borda sempre presente, para a ativa
não mudar o tamanho das vizinhas */
background: none; cursor: pointer; opacity: .55; transition: opacity .18s;
}
.tira img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tira:hover, .tira.ativa { opacity: 1; }
.tira.ativa { border-color: var(--tinta, #1a1a17); }
.contagem-fotos {
font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
color: #70706a; margin: 2px 0 18px;
}
/* --------------------------------------------------------------------------
Aceite de consentimento (LGPD)
-------------------------------------------------------------------------- */
.aceite {
display: flex; gap: 9px; align-items: flex-start;
font-size: 12px; line-height: 1.5; color: var(--suave, #70706a);
margin: 4px 0 14px; cursor: pointer;
}
.aceite input { margin-top: 2px; flex: none; accent-color: var(--tinta, #1a1a17); }
.aceite a { text-decoration: underline; }
/* Dentro de .form-grade, o aceite herdava o estilo dos rótulos do formulário —
caixa alta, espaçamento largo, cor de rótulo — e a caixa de marcação esticava
pela largura toda por causa da regra que formata os campos de texto. É frase
corrida, não rótulo: precisa se comportar como frase. */
.form-grade label.aceite,
.form-lead label.aceite {
grid-column: 1 / -1;
display: flex; align-items: flex-start; gap: 9px;
font-size: 12.5px; font-weight: 400; letter-spacing: normal;
text-transform: none; color: var(--suave); line-height: 1.55;
margin: 4px 0 16px;
}
.form-grade label.aceite input[type="checkbox"],
.form-lead label.aceite input[type="checkbox"] {
width: 16px; height: 16px; flex: none; margin-top: 2px; padding: 0;
}
.news-aviso { font-size: 12px; color: #B9BDB2; margin-top: 10px; max-width: 420px; }
.news-aviso a { text-decoration: underline; }
/* --------------------------------------------------------------------------
Agendamento de visita
-------------------------------------------------------------------------- */
.abas-contato { display: flex; gap: 6px; margin-bottom: 18px; }
.abas-contato .aba {
flex: 1; text-align: center; padding: 10px 8px; font-size: 12px;
letter-spacing: .08em; text-transform: uppercase;
border: 1px solid var(--linha); color: var(--suave); background: #fff;
}
.abas-contato .aba.ativa {
background: var(--verde-fundo); color: #fff; border-color: var(--verde-fundo);
}
.agendar { margin-bottom: 6px; }
.agendar-titulo {
font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--suave); margin: 16px 0 8px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
position: relative; cursor: pointer; border: 1px solid var(--linha);
background: #fff; padding: 8px 10px; text-align: center; line-height: 1.15;
transition: border-color .15s, background .15s;
}
/* O radio fica escondido dentro do label: sem JavaScript o formulário continua
funcionando, só perde o destaque visual. */
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:hover { border-color: var(--tinta); }
.chip.ativa { background: var(--verde-fundo); color: #fff; border-color: var(--verde-fundo); }
.chip .chip-dia, .chip .chip-mes { display: block; font-size: 10px; letter-spacing: .06em; opacity: .8; }
.chip .chip-num { display: block; font-size: 16px; font-family: var(--serif); }
.chips.horas .chip { min-width: 62px; font-size: 12.5px; padding: 7px 6px; }
.chips.modos .chip { flex: 1; font-size: 12px; letter-spacing: .06em; padding: 10px; }
.chip.bloqueada {
opacity: .3; cursor: not-allowed; text-decoration: line-through;
background: #f4f4f0; border-color: var(--linha);
}
.chip.bloqueada:hover { border-color: var(--linha); }
/* --------------------------------------------------------------------------
Algarismos
--------------------------------------------------------------------------
Duas garantias, independentes da fonte que estiver ativa:
lining-nums força os algarismos de altura uniforme. Fontes de texto
clássicas costumam vir com os "antigos", em que o 1, o 3 e o 7
descem abaixo da linha e o 0 fica do tamanho de um "o" — bonito
num parágrafo, confuso num preço.
tabular-nums dá a mesma largura a todos, então os preços de uma listagem
alinham coluna com coluna em vez de dançar.
-------------------------------------------------------------------------- */
.aside-preco, .preco, .especificacoes strong, .contagem-fotos,
.chip-num, .valor, .p-tabela td {
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: "lnum" 1, "tnum" 1;
}
/* O preço da ficha é o número mais importante da página: um pingo de peso a
mais separa bem os algarismos sem pesar no ar do conjunto. */
.aside-preco { font-weight: 500; letter-spacing: .01em; }
/* A imagem de reserva já diz o que é ("FOTO INDISPONÍVEL", com o monograma),
então não precisa mais ser esmaecida — esmaecer era um remendo de quando a
reserva era a foto de outro imóvel. Só o ajuste de encaixe. */
.foto-indisponivel { object-fit: cover; background: #f0f0ec; }
/* Atributos do lançamento na home: mesma linguagem visual dos cartões de
imóvel, mas sobre o fundo escuro do bloco de lançamentos. */
.lanc-atributos{display:flex; flex-direction:column; gap:6px; margin:8px 0 14px}
.lanc-atributos span{display:inline-flex; align-items:center; gap:6px}
.lanc-atributos svg{
width:13px; height:13px; flex:none;
stroke:currentColor; fill:none; stroke-width:1.4; opacity:.7
}
/* --------------------------------------------------------------------------
Transição entre páginas
--------------------------------------------------------------------------
Uma regra e a navegação deixa de piscar branco. Quem não suporta navega
normal — é melhoria progressiva, não depende de JavaScript e não quebra nada.
Suporte hoje: Chrome 126+, Safari 18.2+, Firefox parcial a partir da 143.
-------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
/* Curta de propósito. A transição deve sugerir continuidade, não custar espera:
acima de uns 150ms ela deixa de parecer fluidez e passa a parecer lentidão,
porque a página nova já está pronta e é a animação que segura. */
::view-transition-old(root) { animation-duration: .09s; }
::view-transition-new(root) { animation-duration: .11s; }
/* A barra não participa da transição: fica exatamente onde está enquanto o
conteúdo troca. Sem isto ela piscaria junto com o resto, que é justamente o
efeito de "menu recarregando" que se quer evitar. */
::view-transition-group(barra-topo) { animation: none; }
::view-transition-old(barra-topo),
::view-transition-new(barra-topo) { animation: none; mix-blend-mode: normal; }
/* A foto do imóvel acompanha o cartão até a ficha: o mesmo nome nos dois lados
faz o navegador animar de um para o outro em vez de trocar a tela inteira. */
.cartao-foto img, .cartao-foto picture { view-transition-name: none; }
.galeria .principal { view-transition-name: foto-imovel; }
@media (prefers-reduced-motion: reduce) {
@view-transition { navigation: none; }
}
/* --------------------------------------------------------------------------
Listas longas
--------------------------------------------------------------------------
content-visibility deixa o navegador pular a renderização do que está fora da
tela. contain-intrinsic-size reserva a altura estimada, senão a barra de
rolagem pula enquanto a pessoa desce.
-------------------------------------------------------------------------- */
.grade-imoveis > article, .grade-resultado > article {
content-visibility: auto;
contain-intrinsic-size: auto 420px;
}
/* --------------------------------------------------------------------------
Galeria em tela cheia (