/* ============================================================
   Fontes auto-hospedadas.
   Antes vinham de fonts.googleapis.com + fonts.gstatic.com: duas
   origens de terceiro em cascata no caminho critico, e a WebView do
   Instagram (de onde vem o trafego) tem cache sempre frio.
   Só os subconjuntos latinos: pt-BR nao usa cirilico nem grego.
   ============================================================ */
@font-face{
  font-family:'IBM Plex Sans';
  src:url('../fontes/ibm-plex-sans-400-normal-latin-ext.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-stretch:100%;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('../fontes/ibm-plex-sans-400-normal-latin.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-stretch:100%;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('../fontes/ibm-plex-sans-600-normal-latin-ext.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-stretch:100%;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('../fontes/ibm-plex-sans-600-normal-latin.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-stretch:100%;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Saira';
  src:url('../fontes/saira-400-800-normal-latin-ext.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-stretch:100% 125%;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Saira';
  src:url('../fontes/saira-400-800-normal-latin.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-stretch:100% 125%;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Conectta Imóveis NM · base: tokens da marca, reset, tipografia, botões e o marcador ∴
   ============================================================ */
/* ==========================================================================
   CONECTTA IMÓVEIS NM
   Paleta, tipografia e assinatura tiradas do logotipo da cliente:
   grafite #1A2027, degradê âmbar > laranja > fogo, e o ∴ que fica entre
   os dois telhados da marca (e abre a bio dela no Instagram).
   ========================================================================== */
:root{
  --grafite:#1A2027;
  --grafite-2:#12171C;
  --grafite-3:#252D36;
  --grafite-4:#39434E;
  --fogo:#F62300;
  --laranja:#FC6400;
  --ambar:#FCA500;
  --chama:linear-gradient(135deg,var(--ambar),var(--laranja) 45%,var(--fogo));
  /* o laranja da marca dá só 2,72:1 sobre o osso. Para texto pequeno em fundo
     claro usa-se esta variação queimada (5,20:1). O laranja vivo fica onde é
     preenchimento de botão ou grafite escuro atrás. */
  --fogo-texto:#B83A00;
  --osso:#F5F3F0;
  --osso-2:#E8E4DE;
  --branco:#FFFFFF;
  --texto:#39434E;
  --fraco:#5C666F;
  --linha:rgba(26,32,39,.14);
  --linha-forte:rgba(26,32,39,.3);
  --linha-clara:rgba(245,243,240,.18);

  --display:'Saira',system-ui,-apple-system,'Segoe UI',sans-serif;
  --corpo:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --largo:'wdth' 118;
  --medio:'wdth' 108;
  --normal:'wdth' 100;

  /* Altura do header (88px + 1px de borda). Barra de filtros, ficha sticky
     e scroll-margin das âncoras se penduram nela: um valor só evita
     desencontro quando o header muda de tamanho. */
  /* Alto o bastante para a marca empilhada caber legivel. Encolhe para 74px
     ao rolar, via .topo.fixo em site.css. */
  --altura-topo:112px;

  --raio:3px;
  --container:1280px;
  --gut:clamp(20px,4vw,48px);
  --secao:clamp(70px,8.5vw,128px);
  --mola:cubic-bezier(.16,.84,.3,1);
  --sombra:0 1px 2px rgba(18,23,28,.05),0 18px 38px -20px rgba(18,23,28,.3);
  --sombra-g:0 2px 6px rgba(18,23,28,.07),0 40px 80px -28px rgba(18,23,28,.55);

  /* grão: tira o aspecto chapado das áreas escuras */
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;
  /* WCAG 2.4.11: rolagem de foco para acima da barra fixa, não atrás dela */
  scroll-padding-bottom:calc(58px + 14px + env(safe-area-inset-bottom,0px) + 12px)}
body{
  margin:0;background:var(--osso);color:var(--texto);
  font-family:var(--corpo);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
/* Qualquer display explicito (grid, flex) vence o [hidden] do navegador, e o
   elemento continua na tela mesmo com o atributo marcado. Isto fecha o buraco
   de uma vez para .carregando, .grade, .ver-mais e qualquer outro. */
[hidden]{display:none !important}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section[id]{scroll-margin-top:calc(var(--altura-topo) + 16px)}

h1,h2,h3,h4{
  font-family:var(--display);font-variation-settings:var(--largo);
  color:var(--grafite);margin:0;font-weight:700;letter-spacing:-.025em;
}
h1{font-size:clamp(2rem,4.1vw,3rem);line-height:1.06}
h2{font-size:clamp(1.72rem,3.4vw,2.62rem);line-height:1.1}
h3{font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.28;letter-spacing:-.012em;font-variation-settings:var(--medio)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gut)}
.secao{padding-block:var(--secao)}
/* content-visibility foi testado aqui e removido: fazia a altura da página
   saltar ~2000px durante o scroll (a estimativa não batia com o tamanho real),
   e a barra de rolagem pulava. As imagens já são lazy + WebP. */
.grao{position:relative}
.grao>*{position:relative;z-index:1}
.grao::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grao);opacity:.055;
}

/* ∴ : a marca dela, virada em marcador de seção */
.tri{width:16px;height:13px;flex:none;fill:currentColor}
.olho{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-variation-settings:var(--normal);
  font-size:.688rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fogo-texto);margin:0 0 16px;
}
.olho.claro{color:var(--ambar)}

.cabeca{max-width:58ch}
/* :not() para não atropelar o .olho nem o aviso do painel, que têm cor própria */
.cabeca p:not(.olho):not(.nota-painel){color:var(--fraco);margin-top:14px;font-size:1.05rem}
.linha-titulo{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:clamp(30px,3.8vw,52px)}

/* botões: hover decidido, com um brilho que atravessa o degradê */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-variation-settings:var(--medio);
  font-size:.875rem;font-weight:600;letter-spacing:.03em;
  padding:14px 24px;min-height:50px;border-radius:var(--raio);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .14s ease,box-shadow .22s ease;
}
.btn>*{position:relative;z-index:1}
.btn:active{transform:translateY(1px)}
.btn-chama{background:var(--chama);color:#fff;box-shadow:0 6px 20px -8px rgba(246,35,0,.75)}
.btn-chama:hover{box-shadow:0 14px 32px -10px rgba(246,35,0,.95);transform:translateY(-1px)}
.btn-chama::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.34) 47%,transparent 63%);
  transform:translateX(-130%);transition:transform .75s ease;
}
.btn-chama:hover::after{transform:translateX(130%)}
.btn-grafite{background:var(--grafite);color:var(--osso)}
.btn-grafite:hover{background:var(--grafite-3)}
.btn-linha{background:transparent;color:var(--grafite);border-color:var(--linha-forte)}
.btn-linha:hover{background:var(--grafite);color:var(--osso);border-color:var(--grafite)}
.btn-bloco{width:100%}

.seta{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--display);font-variation-settings:var(--normal);
  font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grafite);padding-block:8px;border-bottom:1px solid var(--linha-forte);
  transition:color .18s ease,border-color .18s ease;
}
.seta:hover{color:var(--fogo-texto);border-color:var(--fogo-texto)}
.seta svg{transition:transform .22s var(--mola)}
.seta:hover svg{transform:translateX(5px)}

:focus-visible{outline:2px solid var(--fogo);outline-offset:3px}
.pula{position:absolute;left:14px;top:-70px;z-index:120;background:var(--grafite);color:var(--osso);padding:12px 18px;font-family:var(--display);font-size:.875rem;text-decoration:none;transition:top .18s ease}
.pula:focus{top:14px}



/* ============================================================
   Esqueleto do card de imóvel

   Mora aqui, e não no CSS da listagem, porque a landing também
   reserva espaço para a vitrine e não carrega listagem.css. Enquanto
   viveu lá, os seis esqueletos da home mediam ZERO de altura: não
   reservavam nada, e os cards do banco empurravam meia página ao
   chegar. As medidas seguem o card real (foto 3/2 + corpo + rodapé).
   ============================================================ */
.esqueleto{border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;background:var(--branco)}
.esqueleto .barra{background:var(--osso-2);animation:pulsa 1.4s ease-in-out infinite}
.esqueleto .foto-vazia{aspect-ratio:3/2}
.esqueleto .corpo{padding:19px;display:flex;flex-direction:column;gap:11px;
  /* casado com a altura real do corpo do card (local + preço + título de até
     duas linhas + selo + specs). As barras são enfeite; quem reserva o espaço
     é esta medida. */
  min-height:220px}
.esqueleto .corpo .barra{height:13px;border-radius:3px}
.esqueleto .corpo .barra.g{height:26px;width:55%}
.esqueleto .pe-vazio{height:65px;border-top:1px solid var(--linha)}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.esqueleto .barra{animation:none}}

/* ---- aviso de consentimento ----
   Os dois botões têm o MESMO tamanho, peso e altura de toque. Recusar precisa
   ser tão fácil quanto aceitar, senão o consentimento não vale: "Aceitar"
   grande e colorido com um "Recusar" apagado do lado é o padrão que a ANPD
   aponta como consentimento viciado.

   Fica em baixo e não cobre a tela inteira: o site funciona igual para quem
   ignorar, porque nada além da medição depende dessa escolha. */
.aviso-cookie{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:80;
  max-width:560px;margin-inline:auto;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 18px;border-radius:var(--raio);
  background:var(--grafite);color:rgba(245,243,240,.86);
  box-shadow:0 18px 48px -16px rgba(0,0,0,.6);
  font-size:.84rem;line-height:1.55;
}
.aviso-cookie p{margin:0;flex:1 1 260px}
.aviso-cookie a{color:var(--ambar);text-underline-offset:3px}
.aviso-cookie-acoes{display:flex;gap:8px;flex:0 0 auto}
.btn-cookie{
  min-height:42px;padding:0 20px;cursor:pointer;
  border:1px solid rgba(245,243,240,.28);border-radius:var(--raio);
  background:transparent;color:var(--osso);
  font-family:var(--display);font-size:.82rem;font-variation-settings:var(--medio);
  transition:background .16s ease,border-color .16s ease;
}
.btn-cookie:hover{background:rgba(245,243,240,.12);border-color:rgba(245,243,240,.5)}
@media (max-width:680px){
  /* acima da barra fixa do WhatsApp, senão um cobre o outro */
  .aviso-cookie{bottom:calc(78px + env(safe-area-inset-bottom, 0px))}
  .aviso-cookie-acoes{flex:1 1 100%}
  .btn-cookie{flex:1}
}

/* Botão de revogar o consentimento, dentro do texto da privacidade. A LGPD
   exige que retirar seja tão simples quanto conceder, então ele fica na
   própria página, não escondido num menu. */
.botao-consentimento{
  border:0;background:none;padding:0;cursor:pointer;
  font:inherit;color:var(--fogo-texto);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}