/* ============================================================
   Imóveis Kali — v2 (mobile-first)

   A identidade sai inteira da logo: o grafite das letras, o bronze
   do telhado e um papel quente no lugar do branco frio. É a mesma
   língua dos vídeos novos dos imóveis (papel, grafite, bronze,
   Inter Tight nos títulos), para site e filme serem uma marca só.

   Regras que valem para o arquivo inteiro:
   1. COR só sai dos tokens. São DUAS cores de marca: tinta e bronze.
   2. ESPAÇAMENTO só sai da escala --s-* (múltiplos de 4).
   3. TIPOGRAFIA só sai da escala --t-*.
   4. RAIO tem hierarquia: foto (--r-foto) < controle (--r-ctl) <
      caixa (--r-caixa) < folha (--r-folha). Nada de pílula em botão.
   5. Campos de formulário compartilham UMA regra (ver "campos").
   6. Movimento: só o que responde a um gesto, a vitrine do topo e
      as figuras de traço que se desenham. Nada "sobe com fade".

   Para voltar ao azul-marinho + azul-céu do site anterior, troque
   `tema` no js/config.js para "marinho" (ver o bloco logo abaixo).
   ============================================================ */

/* ---------- fontes locais (sem Google Fonts) ---------- */
@font-face{
  font-family:"Inter var";
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; 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:"Inter var";
  src:url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight:400 700; font-style:normal; 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:"Inter Tight var";
  src:url("/assets/fonts/inter-tight-latin.woff2") format("woff2");
  font-weight:500 700; font-style:normal; 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:"Inter Tight var";
  src:url("/assets/fonts/inter-tight-latin-ext.woff2") format("woff2");
  font-weight:500 700; font-style:normal; 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;
}

/* ============================================================
   TOKENS
   Contraste medido (WCAG): cada par de texto está anotado ao lado.
   ============================================================ */
:root{
  /* — superfícies — */
  --paper:#F7F5F0;         /* o fundo da página: papel quente */
  --paper-2:#EFEBE2;       /* faixa mais quente (proprietários, blocos de apoio) */
  --surface:#FFFFFF;       /* o que fica "em cima" do papel: campos, caixa de preço, faixas brancas */
  --nav-bg:rgba(247,245,240,.88);
  --veu:rgba(247,245,240,.55);   /* véu da abertura */

  /* — tinta (o grafite das letras da logo) — */
  --ink:#26262A;           /* 13,8:1 no papel · 15,1:1 no branco */
  --ink-hover:#3A3A40;
  --ink-2:#504E55;         /* 7,5:1 no papel · 6,9:1 na faixa quente */
  --ink-3:#66635C;         /* 5,5:1 no papel · 5,0:1 na faixa quente — passa AA */
  --ink-veil:rgba(38,38,42,.05);
  --ink-ring:rgba(38,38,42,.16);

  /* — fios — */
  --line:#DCD7CB;          /* divisória e borda de caixa (decorativa) */
  --line-2:#E7E3D9;        /* divisória discreta */
  --line-ctl:#85817A;      /* borda de CAMPO: 3,6:1 no papel · 3,9:1 no branco — WCAG 1.4.11 */

  /* — bronze (o telhado da logo): detalhe de marca, nunca cor de ação — */
  --accent:#94743F;        /* fios, figuras e ícones: 4,0:1 no papel · 4,4:1 no branco */
  --accent-ink:#755829;    /* TEXTO em bronze: 6,1:1 no papel · 6,6:1 no branco */
  --accent-soft:#DDD0B6;
  --accent-veil:#F3EDE0;
  --sobre-foto:#EDDBB3;    /* rótulo sobre a sombra da foto (11:1 no grafite) */

  /* — estados — */
  --verde:#1F5C48;         /* piscada dos tipos ao trocar Comprar/Alugar */
  --erro:#A3251C;
  --banco:#00559b;         /* azul institucional do selo do banco */

  /* — rodapé (a única área escura do site) — */
  --fundo-escuro:#26262A;
  --no-escuro:#F3EEE2;     /* 13:1 */
  --no-escuro-2:#BDB9B0;   /* 7,4:1 */
  --linha-escura:#3F3F45;

  /* — espaçamento: só múltiplos de 4 — */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px;
  --s-11:80px; --s-12:96px;
  /* respiro entre seções: 64 px no celular → 128 px no desktop */
  --sec-y:clamp(64px, 6vw + 40px, 128px);

  /* — tipografia — */
  --t-hero:clamp(2.375rem, 1.55rem + 3.6vw, 3.875rem);
  --t-h1:clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --t-h2:clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --t-h3:clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  --t-h4:1.0625rem;
  --t-lead:clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --t-price:1.25rem;
  --t-body:1rem;
  --t-sm:0.875rem;
  --t-label:0.8125rem;
  --t-xs:0.75rem;

  /* — forma — */
  --r-foto:8px;            /* fotos: quase retas, como uma cópia impressa */
  --r-ctl:10px;            /* botões e campos */
  --r-caixa:14px;          /* caixas (preço, simulador, registro) */
  --r-folha:20px;          /* folha de filtros */
  --pill:980px;            /* só em contadores e no seletor Comprar/Alugar */
  /* nomes antigos, ainda usados em trechos herdados */
  --r-xs:var(--r-foto); --r-sm:var(--r-ctl); --r:var(--r-caixa); --r-lg:var(--r-folha);
  --nav-h:64px;
  --medida:65ch;           /* largura máxima confortável de leitura */

  /* — movimento — */
  --ease:cubic-bezier(.25,.1,.25,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-cine:cubic-bezier(.3,.7,0,1);   /* a troca da vitrine */
  --dur-1:.18s;            /* resposta ao toque */
  --dur-2:.3s;             /* abrir/fechar */
  --dur-3:.6s;

  /* — sombra: quase não se usa; o site se organiza por fio, não por sombra — */
  --shadow-sm:0 1px 2px rgba(38,38,42,.04), 0 6px 16px rgba(38,38,42,.05);
  --shadow:0 1px 2px rgba(38,38,42,.05), 0 14px 36px rgba(38,38,42,.09);
  --shadow-lg:0 2px 4px rgba(38,38,42,.06), 0 28px 64px rgba(38,38,42,.16);

  --font:"Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display:"Inter Tight var", "Inter var", -apple-system, BlinkMacSystemFont, sans-serif;

  color-scheme:light;
}

/* ------------------------------------------------------------
   TEMA "marinho" — o azul-marinho + azul-céu do site anterior,
   no desenho novo. Liga-se com  tema: "marinho"  no js/config.js
   (o build escreve data-tema no <html>). Mesmos papéis de cor,
   todos os pares medidos de novo.
   ------------------------------------------------------------ */
html[data-tema="marinho"]{
  --paper:#FAFBFD; --paper-2:#F1F4F9; --surface:#FFFFFF;
  --nav-bg:rgba(250,251,253,.88); --veu:rgba(246,249,253,.55);
  --ink:#0E1A40;           /* 16,3:1 */
  --ink-hover:#1A2A66;
  --ink-2:#4B5265;         /* 7,5:1 · 7,1:1 */
  --ink-3:#666B7D;         /* 5,1:1 · 4,8:1 */
  --ink-veil:rgba(14,26,64,.05); --ink-ring:rgba(14,26,64,.16);
  --line:#D5D9E3; --line-2:#E7EAF0; --line-ctl:#868A97;
  --accent:#3A78C2;        /* 4,4:1 · 4,1:1 */
  --accent-ink:#1F5EA8;    /* 6,3:1 · 5,9:1 */
  --accent-soft:#C9DBF1; --accent-veil:#EEF4FB;
  --sobre-foto:#DCE8F8;
  --verde:#1F9D55;
  --fundo-escuro:#0E1A40; --no-escuro:#F2F5FA; --no-escuro-2:#B5BED3; --linha-escura:#27345F;
}

/* ============================================================
   BASE
   ============================================================ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scrollbar-gutter:stable; overflow-x:clip; }
body{
  margin:0; font-family:var(--font); font-size:var(--t-body); line-height:1.55;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
  overflow-wrap:break-word;
}
body.travado{ position:fixed; left:0; right:0; overflow:hidden; padding-top:var(--nav-h); }
/* com o body travado (fixed + top negativo) a barra sticky subiria junto e
   sumiria da tela; enquanto trava, ela fica presa no topo e o padding acima
   guarda o lugar dela, para o conteúdo não pular */
body.travado .nav{ position:fixed; top:0; left:0; right:0; }
[hidden]{ display:none !important; }
img{ max-width:100%; display:block; }
svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* títulos: Inter Tight seminegrito, como nas legendas dos vídeos */
h1,h2,h3,h4{
  margin:0; font-family:var(--display); font-weight:600;
  letter-spacing:-.028em; line-height:1.08; text-wrap:balance;
}
h3,h4{ letter-spacing:-.015em; line-height:1.25; }
p{ margin:0 0 var(--s-3); }
a{ color:var(--ink); text-decoration-color:var(--accent); text-underline-offset:3px; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:4px; }
[id]{ scroll-margin-top:calc(var(--nav-h) + var(--s-4)); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:var(--s-3); top:-60px; z-index:500; background:var(--ink); color:#fff; padding:var(--s-3) var(--s-4); border-radius:var(--r-ctl); text-decoration:none; }
.skip:focus{ top:var(--s-3); }
.num{ font-variant-numeric:tabular-nums; }

/* área de toque de 44px sem engordar o desenho.
   -y = só na vertical (controles lado a lado, para não roubar o clique do vizinho)
   -xy = nos dois eixos (botões redondos isolados) */
.seg button::before, .tchips button::before, .fbtn::before,
.link::before, .back::before, .foot-col a::before,
.fchips button::before, .catview button::before,
.crumbs a::before, .hero-dono::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%); height:44px; z-index:0;
}
.icon-btn::before, .share-btn::before, .fav::before, .gal-thumbs button::before, .vit-pausa::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:max(100%,44px); height:max(100%,44px); z-index:0;
}
.seg button, .tchips button, .fbtn, .link, .back, .foot-col a,
.fchips button, .icon-btn, .share-btn, .fav,
.catview button, .gal-thumbs button, .crumbs a, .hero-dono{ position:relative; }
.seg button > *, .tchips button > *, .fbtn > *, .link > *, .back > *{ position:relative; z-index:1; }

/* ⚠️ só padding-left/right aqui: as classes de página (.cat, .im, .sb…) usam a
   MESMA caixa e definem padding-block. Com o atalho `padding` uma zerava a outra. */
.wrap{
  width:100%; max-width:1200px; margin:0 auto;
  padding-left:max(var(--s-5), env(safe-area-inset-left));
  padding-right:max(var(--s-5), env(safe-area-inset-right));
}
.wrap-narrow{ max-width:800px; }
.sec{ padding-block:var(--sec-y); }
.sec-branca{ background:var(--surface); }
.sec-quente{ background:var(--paper-2); }
.sec-fio{ border-top:1px solid var(--line); }
.sec-head{ margin-bottom:var(--s-8); }
.sec-head h2{ font-size:var(--t-h2); }
.sec-head p{ color:var(--ink-2); margin:var(--s-3) 0 0; font-size:var(--t-lead); max-width:var(--medida); }
/* título + link "Ver todos" na mesma linha: o link nunca quebra, o título cede */
.sec-head.row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4); }
.sec-head.row h2{ min-width:0; }
.sec-head.row .link{ white-space:nowrap; flex:none; }
/* rótulo curto acima de um título de página: frase comum, em bronze, sem caixa-alta */
.sobretitulo{ font-family:var(--display); font-size:var(--t-sm); font-weight:600; color:var(--accent-ink); margin:0 0 var(--s-2); }
.lead{ font-size:var(--t-lead); color:var(--ink-2); max-width:var(--medida); }
.btns{ display:flex; flex-wrap:wrap; gap:var(--s-3); }

/* comprimento de linha confortável em todo o corpo de texto */
.priv p, .vender > .lead, .im-desc p, .faq p,
.sb-grid p, .creci-txt, .contato-grid > div > p{ max-width:var(--medida); }

/* troca de página sem recarregar: o conteúdo novo entra com um respiro
   (resposta a um gesto de quem navega — nunca no primeiro quadro) */
@keyframes viewIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.view-in{ animation:viewIn .32s var(--ease-out) both; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* ============================================================
   FIGURAS DE TRAÇO
   O desenho fino em bronze que acompanha cada compromisso e cada
   etapa — o mesmo dos vídeos ("uma figura minimalista ao lado").
   Cada traço tem pathLength="1" e se desenha uma vez, quando o
   bloco entra na tela (.js .desenha → .in, posto pelo app.js).
   ============================================================ */
.fig{ width:48px; height:48px; color:var(--accent); stroke-width:1.5; overflow:visible; }
.js .desenha .fig > *{ stroke-dasharray:1; stroke-dashoffset:1; }
.js .desenha.in .fig > *{ stroke-dashoffset:0; transition:stroke-dashoffset 1.1s var(--ease-out); }
.js .desenha.in > :nth-child(2) .fig > *{ transition-delay:.12s; }
.js .desenha.in > :nth-child(3) .fig > *{ transition-delay:.24s; }
.js .desenha.in > :nth-child(4) .fig > *{ transition-delay:.36s; }

/* ============================================================
   BOTÕES E LINKS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:48px; padding:0 var(--s-6); border-radius:var(--r-ctl); border:1px solid var(--ink);
  background:var(--ink); color:#fff; font-size:var(--t-sm); font-weight:600; line-height:1.2;
  font-family:var(--display); letter-spacing:-.005em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover{ background:var(--ink-hover); border-color:var(--ink-hover); }
.btn:active{ transform:scale(.98); }
.btn svg{ width:18px; height:18px; }
.btn-sm{ min-height:40px; padding:0 var(--s-4); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-ctl); }
.btn-ghost:hover{ background:var(--ink-veil); border-color:var(--ink); }
.btn-block{ width:100%; }
/* link de texto: sublinhado fino em bronze — é assim que o site aponta um caminho */
.link{
  display:inline-flex; align-items:center; gap:var(--s-2); color:var(--ink);
  font-family:var(--display); font-weight:600; font-size:var(--t-sm);
  text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:5px;
  transition:text-decoration-color var(--dur-1) var(--ease);
}
.link:hover{ text-decoration-color:var(--ink); }
.link svg{ width:16px; height:16px; color:var(--accent); transition:transform var(--dur-1) var(--ease); }
.link:hover svg{ transform:translateX(2px); }
/* seta que vai e volta: 2/3 do ciclo é pausa, para lembrar sem incomodar */
@keyframes setaVaiVolta{ 0%, 55%, 100%{ transform:none; } 76%{ transform:translateX(5px); } }
.link-balanco svg{ animation:setaVaiVolta 2.8s var(--ease) infinite; }
.link-balanco:hover svg{ animation:none; }
.back{ display:inline-flex; align-items:center; gap:var(--s-2); color:var(--ink-2); text-decoration:none; font-size:var(--t-sm); font-weight:500; }
.back svg{ width:16px; height:16px; transition:transform var(--dur-1) var(--ease); }
.back:hover{ color:var(--ink); }
.back:hover svg{ transform:translateX(-2px); }
.icon-btn{
  width:40px; height:40px; border-radius:var(--r-ctl); border:1px solid var(--line); background:var(--surface);
  display:grid; place-items:center; color:var(--ink); cursor:pointer; padding:0;
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.icon-btn:hover{ border-color:var(--ink-3); }
.icon-btn svg{ width:18px; height:18px; position:relative; z-index:1; }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin:var(--s-2) 0 var(--s-4); }
.chips:empty{ display:none; }
/* o número do CRECI: texto em bronze dentro de um fio, sem cara de etiqueta */
.chip-i{ font-family:var(--display); font-size:var(--t-label); font-weight:600; color:var(--accent-ink); background:var(--accent-veil); border:1px solid var(--accent-soft); border-radius:6px; padding:var(--s-1) var(--s-3); font-variant-numeric:tabular-nums; }
.chip-i:empty{ display:none; }

/* ============================================================
   CAMPOS — uma regra só para todo campo de texto/seleção do site
   ============================================================ */
.form input, .form select, .form textarea, .fgroup select, .range input,
.fref, .sim-campo input[type="text"]{
  width:100%; font:inherit; font-size:16px;  /* 16 px: abaixo disso o iOS dá zoom ao focar */
  color:var(--ink); background:var(--surface); margin:0; min-height:48px;
  border:1px solid var(--line-ctl); border-radius:var(--r-ctl); padding:var(--s-3) var(--s-4);
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus, .fgroup select:focus, .range input:focus,
.fref:focus, .sim-campo input[type="text"]:focus{
  outline:0; border-color:var(--ink); box-shadow:0 0 0 3px var(--ink-ring);
}
.form input::placeholder, .form textarea::placeholder, .fref::placeholder, .range input::placeholder{ color:var(--ink-3); }
.form textarea{ resize:vertical; min-height:112px; }
select, .fsort{
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366635C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--s-3) center; background-size:16px; padding-right:36px;
}

/* ---------- trilha de navegação ---------- */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-1) var(--s-2);
  font-size:var(--t-label); color:var(--ink-3); margin:0 0 var(--s-3); padding:0; list-style:none;
}
.crumbs li{ display:flex; align-items:center; gap:var(--s-1) var(--s-2); }
.crumbs li + li::before{ content:"/"; color:var(--line-ctl); }
.crumbs a{ color:var(--ink-2); text-decoration:none; padding:var(--s-2) 0; }
.crumbs a:hover{ color:var(--ink); text-decoration:underline; }
.crumbs [aria-current]{ color:var(--ink); font-weight:500; }

/* ============================================================
   NAVEGAÇÃO
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:120; height:var(--nav-h);
  background:var(--nav-bg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-2) var(--ease);
}
.nav.rolou{ border-bottom-color:var(--line); }
.nav-in{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); }
.brand{ display:flex; align-items:center; padding:var(--s-2) 0; transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out); }
.brand img{ height:38px; width:auto; }
/* Na home a logo grande já está logo abaixo, no topo da página: a da barra
   espera a grande sair da tela para aparecer (como o título grande do iPhone
   que "encaixa" na barra ao rolar). Sem JavaScript, fica sempre à vista. */
.js body[data-view="home"] .nav:not(.com-marca) .brand{ opacity:0; transform:translateY(4px); pointer-events:none; }
.nav-links{ display:none; gap:var(--s-7); }
.nav-links a{ color:var(--ink-2); text-decoration:none; font-size:var(--t-sm); font-weight:500; padding:var(--s-5) 0; position:relative; transition:color var(--dur-1) var(--ease); }
.nav-links a:hover{ color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:16px; height:1.5px; background:var(--accent);
}
.nav-act{ display:flex; align-items:center; gap:var(--s-2); }
.nav-wa span{ display:none; }
.nav-wa{ width:40px; padding:0; }
.nav-fav{ position:relative; }
.nav-fav b{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; z-index:2;
  border-radius:9px; background:var(--accent-ink); color:#fff; font-size:11px; font-weight:700;
  display:grid; place-items:center; font-family:var(--display);
}
.nav-burger{ border-color:transparent; background:transparent; }
.menu{
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:119;
  background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  animation:menuDown var(--dur-2) var(--ease-out);
}
@keyframes menuDown{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.menu-fundo{ position:fixed; inset:var(--nav-h) 0 0; z-index:118; background:rgba(38,38,42,.28); animation:fadeIn var(--dur-2) var(--ease); }
.menu nav{
  display:grid;
  padding:var(--s-2) max(var(--s-5), env(safe-area-inset-right)) calc(var(--s-5) + env(safe-area-inset-bottom)) max(var(--s-5), env(safe-area-inset-left));
  max-height:calc(100dvh - var(--nav-h)); overflow-y:auto;
}
.menu nav > a:not(.btn){ padding:var(--s-4) 0; border-bottom:1px solid var(--line-2); color:var(--ink); text-decoration:none; font-family:var(--display); font-size:var(--t-h3); font-weight:600; letter-spacing:-.015em; }
.menu nav .btn{ margin-top:var(--s-5); }

/* ============================================================
   TOPO DA HOME
   À esquerda, a marca e a frase; à direita, a vitrine — os imóveis
   de verdade, um de cada vez. Fecha com a linha de quem responde.
   ============================================================ */
.hero{ padding-block:var(--s-6) 0; }
.hero-grid{ display:grid; gap:var(--s-8); }
.hero-txt{ min-width:0; }
/* ⚠️ a frase da abertura viaja até virar este h1: as duas TÊM de ter a mesma
   tipografia e a mesma largura, senão a troca no fim salta. Mexeu numa, mexa na outra. */
.hero h1, .intro-title{
  font-family:var(--display);
  font-size:var(--t-hero); font-weight:600; line-height:1.03; letter-spacing:-.035em;
  text-align:left; text-wrap:balance; margin:0 0 var(--s-5);
}
/* ⚠️ a logo da abertura também viaja até virar esta: mesmo tamanho nas duas */
.hero-logo, .intro-logo{ display:block; height:clamp(68px, 15vw, 96px); width:auto; aspect-ratio:549/325; }
.hero-logo{ margin:0 0 var(--s-6); }
.hero-sub{ font-size:var(--t-lead); color:var(--ink-2); max-width:34em; margin:0 0 var(--s-7); }

/* Comprar/Alugar (um oval que alterna a cada toque) e, embaixo, os quatro
   tipos em azulejos iguais. A escolha do oval vale para os quatro. */
.hero-quick{ display:grid; gap:var(--s-3); max-width:500px; }
.fin-switch{
  position:relative; display:grid; grid-template-columns:1fr 1fr; height:48px; padding:4px; width:100%; max-width:264px;
  border:1px solid var(--line-ctl); border-radius:var(--pill); background:var(--surface); cursor:pointer;
  font:inherit;
  transition:border-color var(--dur-1) var(--ease);
}
.fin-switch:hover{ border-color:var(--ink); }
.fin-switch:active .fin-thumb{ transform:scale(.97); }
.fin-switch[data-fin="aluguel"]:active .fin-thumb{ transform:translateX(100%) scale(.97); }
.fin-thumb{
  position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:var(--pill);
  background:var(--ink);
  transition:transform var(--dur-2) var(--ease-out);
}
.fin-switch[data-fin="aluguel"] .fin-thumb{ transform:translateX(100%); }
.fin-op{
  position:relative; z-index:1; display:grid; place-items:center; padding:0 var(--s-4);
  font-family:var(--display); font-size:var(--t-sm); font-weight:600; color:var(--ink-2);
  transition:color var(--dur-2) var(--ease);
}
.fin-switch[data-fin="venda"] .fin-op[data-v="venda"],
.fin-switch[data-fin="aluguel"] .fin-op[data-v="aluguel"]{ color:#fff; }
.hero-tipos{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--s-2); }
.chip-tipo{
  display:grid; justify-items:center; align-content:center; gap:6px; min-height:76px; padding:var(--s-3) 2px;
  border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); color:var(--ink);
  font-family:var(--display); font-size:var(--t-label); font-weight:600; line-height:1.2; text-align:center; text-decoration:none;
  transition:border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.chip-tipo svg{ width:22px; height:22px; stroke-width:1.5; color:var(--accent); }
.chip-tipo:hover{ border-color:var(--ink); }
.chip-tipo:active{ transform:scale(.97); }
/* trocou Comprar/Alugar: o contorno dos quatro tipos pisca verde, rápido e
   suave, para mostrar que eles passaram a levar à outra finalidade. Sem
   fill-mode: no fim vale de novo o estilo normal (e o hover) */
@keyframes piscaVerde{
  0%, 100%{ border-color:var(--line); box-shadow:0 0 0 0 rgba(31,92,72,0); }
  40%{ border-color:var(--verde); box-shadow:0 0 0 3px rgba(31,92,72,.16); }
}
.hero-tipos.pisca .chip-tipo{ animation:piscaVerde .55s var(--ease); }
/* o atalho de quem tem um imóvel: uma frase com link, não um botão a mais */
.hero-dono{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:0 var(--s-2); margin-top:var(--s-5);
  color:var(--ink-2); font-size:var(--t-sm); text-decoration:none;
}
.hero-dono b{
  color:var(--ink); font-family:var(--display); font-weight:600;
  text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:5px;
}
.hero-dono:hover b{ text-decoration-color:var(--ink); }
.hero-dono svg{ width:15px; height:15px; color:var(--accent); transition:transform var(--dur-1) var(--ease); }
.hero-dono:hover svg{ transform:translateX(2px); }
/* Comprar/Alugar troca o verbo (Vender ↔ Alugar): os dois moram na mesma célula
   e um sai enquanto o outro entra, sempre no sentido do toque */
.dono-verbo{ display:inline-grid; }
.dono-verbo > span{
  grid-area:1/1; justify-self:end;
  transition:opacity .36s var(--ease) .06s, transform .42s var(--ease-out) .06s, filter .36s var(--ease) .06s;
}
.hero-dono[data-fin="aluguel"] [data-v="venda"], .hero-dono[data-fin="venda"] [data-v="aluguel"]{
  opacity:0; filter:blur(2px); transition-delay:0s;
}
.hero-dono[data-fin="aluguel"] [data-v="venda"]{ transform:translateY(-8px); }
.hero-dono[data-fin="venda"] [data-v="aluguel"]{ transform:translateY(8px); }

/* ---------- VITRINE ----------
   Um quadro só, um imóvel de cada vez, com a legenda dos vídeos: rótulo em
   ouro claro e título branco seminegrito sobre uma sombra que sobe do pé da
   foto. A troca é um movimento contínuo — a miniatura do próximo imóvel
   CRESCE até ocupar o quadro (app.js). A barrinha do passo atual é o relógio:
   quando ela enche, a vitrine avança; pausou a barrinha, pausou a vitrine. */
.vitrine{ position:relative; --vit-ar:1/1; }
.vit-quadro{
  position:relative; display:block; aspect-ratio:var(--vit-ar); border-radius:var(--r-foto); overflow:hidden;
  background:var(--paper-2); color:#fff; text-decoration:none; isolation:isolate;
}
.vit-fotos{ position:absolute; inset:0; }
/* Cada foto mora numa camada com a PRÓPRIA sombra, e a miniatura leva a mesma
   sombra na mesma proporção: a camada que chega nasce do tamanho da miniatura,
   idêntica a ela, e cresce já com a sombra — nada pula no começo nem no fim. */
.vit-camada{ position:absolute; inset:0; overflow:hidden; transform-origin:0 0; }
.vit-foto{ width:100%; height:100%; object-fit:cover; }
.vit-camada::after, .vit-prox::after{
  content:""; position:absolute; inset:auto 0 0 0; height:64%; pointer-events:none;
  background:linear-gradient(to top, rgba(14,14,16,.8) 0%, rgba(14,14,16,.52) 36%, rgba(14,14,16,0) 100%);
}
.vit-legenda{
  position:absolute; left:var(--s-5); bottom:calc(var(--s-5) + 14px); right:calc(26% + var(--s-5) + var(--s-4));
  display:grid; gap:4px; transition:opacity .26s var(--ease), transform .4s var(--ease-out);
}
.vit-legenda.troca{ opacity:0; transform:translateY(6px); }
.vit-rotulo{ color:var(--sobre-foto); font-family:var(--display); font-size:var(--t-label); font-weight:600; letter-spacing:.01em; }
.vit-titulo{
  font-family:var(--display); font-size:clamp(1.125rem, .95rem + .9vw, 1.5rem); font-weight:600; line-height:1.15; letter-spacing:-.02em;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; text-wrap:balance;
}
.vit-linha{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--s-3); margin-top:2px; font-size:var(--t-sm); }
.vit-linha b{ font-family:var(--display); font-size:1.0625rem; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vit-linha b small{ font-size:var(--t-label); font-weight:500; }
.vit-linha span{ opacity:.88; }
/* a miniatura do próximo imóvel: tocar nela avança */
.vit-prox{
  position:absolute; right:var(--s-4); bottom:calc(var(--s-4) + 14px); width:26%; aspect-ratio:var(--vit-ar); padding:0;
  border:0; border-radius:6px; overflow:hidden; cursor:pointer; background:var(--ink);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:opacity .3s var(--ease), transform .45s var(--ease-out);
}
.vit-prox img{ width:100%; height:100%; object-fit:cover; }
.vit-prox.sai{ opacity:0; transform:scale(.9); transition-duration:0s; }
.vit-prox:hover{ transform:scale(1.03); }
.vit-prox:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.vit-prox span{
  position:absolute; left:6px; bottom:6px; z-index:1; padding:2px 7px; border-radius:4px;
  background:rgba(14,14,16,.66); color:#fff; font-family:var(--display); font-size:11px; font-weight:600; line-height:1.4;
}
/* um passo por imóvel; o passo atual enche no tempo de cada imóvel */
.vit-passos{ position:absolute; left:var(--s-5); right:var(--s-5); bottom:var(--s-4); display:flex; gap:4px; pointer-events:none; }
.vit-passos i{ position:relative; flex:1; height:2px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.36); }
.vit-passos i::after{ content:""; position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left; }
.vit-passos i.feito::after{ transform:scaleX(1); }
@keyframes vitPasso{ to{ transform:scaleX(1); } }
.vit-passos i.agora::after{ animation:vitPasso var(--vit-tempo, 6.5s) linear forwards; }
/* tudo o que pausa a barrinha pausa a vitrine (é ela o relógio — ver app.js):
   o botão de pausa, a vitrine fora da tela, a abertura ainda tocando… */
.vitrine.parada .vit-passos i.agora::after, .vitrine.fora .vit-passos i.agora::after,
html.intro .vit-passos i.agora::after{ animation-play-state:paused; }
/* …o mouse em cima (só onde existe mouse: no celular o "hover" gruda depois do toque)… */
@media (hover:hover){
  .vitrine:hover .vit-passos i.agora::after{ animation-play-state:paused; }
}
/* …e o foco do TECLADO dentro dela. Regra à parte: onde :has() não existe,
   uma lista com ele seria descartada inteira. */
.vitrine:has(:focus-visible) .vit-passos i.agora::after{ animation-play-state:paused; }
.vit-pausa{
  position:absolute; top:var(--s-3); right:var(--s-3); width:36px; height:36px; padding:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.5); background:rgba(14,14,16,.36); color:#fff; cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:grid; place-items:center; transition:background var(--dur-1) var(--ease);
}
.vit-pausa:hover{ background:rgba(14,14,16,.6); }
.vit-pausa:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.vit-pausa svg{ width:14px; height:14px; fill:currentColor; stroke:none; position:relative; z-index:1; }
/* com um imóvel só não há o que trocar */
.vitrine.unica .vit-prox, .vitrine.unica .vit-pausa, .vitrine.unica .vit-passos{ display:none; }
.vitrine.unica .vit-legenda{ right:var(--s-5); bottom:var(--s-5); }

/* ---------- a linha de quem responde ----------
   Uma frase, como o expediente de uma publicação: nome, registro e o
   caminho para conferir. Está no topo de propósito. */
.assina{
  margin:var(--s-8) 0 0; padding:var(--s-5) 0; border-top:1px solid var(--line);
  color:var(--ink-2); font-size:var(--t-sm); line-height:1.6;
}
.assina b{ color:var(--ink); font-weight:600; }
.assina .link{ margin-left:var(--s-1); }

/* ============================================================
   ABERTURA
   ============================================================ */
.intro-veil{
  position:absolute; inset:0; background:var(--veu);
  -webkit-backdrop-filter:blur(24px) saturate(1.06); backdrop-filter:blur(24px) saturate(1.06);
  /* já de pé no 1º quadro: enquanto a fonte e a logo chegam, ninguém vê o
     topo sem o título por baixo */
  opacity:1; transition:opacity var(--dur-2) var(--ease);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .intro-veil{ background:var(--paper); opacity:.96; }
}
.intro-stage{ position:absolute; inset:0; display:grid; place-items:center; }
.intro-logo{
  grid-area:1/1; justify-self:center;
  opacity:0; transform:translateY(10px) scale(.96);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
  will-change:transform, opacity;
}
.intro-wrap{ grid-area:1/1; justify-self:stretch; }
/* o bloco fica no meio da tela; o texto, alinhado como o h1 que ele vai virar */
.intro-title{
  margin:0 auto; opacity:0; transform:translateY(14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  will-change:transform, opacity;
}
#intro.s1 .intro-logo{ opacity:1; transform:none; }
/* s2: a logo vai até o lugar dela no topo (o JS põe o translate) */
#intro.s2 .intro-logo{ transition:transform .72s cubic-bezier(.32,.72,0,1); }
#intro.s2 .intro-title{ opacity:1; transform:none; transition-delay:.1s; }
#intro.s3 .intro-veil{ opacity:0; transition:opacity .56s var(--ease) .04s; }
#intro.s3 .intro-title{ transition:transform .72s cubic-bezier(.32,.72,0,1); }
/* movimento reduzido: a mesma abertura, só com esmaecimentos (nada viaja) */
#intro.calmo .intro-veil, #intro.calmo .intro-logo, #intro.calmo .intro-title{
  transform:none !important; transition:opacity .45s ease !important;
}
#intro.calmo.s2 .intro-logo, #intro.calmo.s3 .intro-title{ opacity:0; }

/* ============================================================
   ÍNDICE DE IMÓVEIS (home)
   Uma lista para ler de cima a baixo: miniatura, o que é, onde fica,
   quanto mede e quanto custa. A foto grande já passou na vitrine.
   ============================================================ */
.indice{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.linha{
  position:relative; display:grid; grid-template-columns:96px minmax(0, 1fr); column-gap:var(--s-4); row-gap:var(--s-2);
  grid-template-areas:"foto txt" "foto num"; align-items:start;
  padding:var(--s-4) 0; border-bottom:1px solid var(--line);
}
.linha-foto{ grid-area:foto; aspect-ratio:1/1; border-radius:var(--r-foto); overflow:hidden; background:var(--paper-2); }
.linha-foto img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.linha-txt{ grid-area:txt; min-width:0; }
.linha-tipo{ margin:0; color:var(--accent-ink); font-family:var(--display); font-size:var(--t-label); font-weight:600; }
.linha-titulo{ margin:2px 0; font-size:var(--t-h4); line-height:1.25; letter-spacing:-.015em; }
.linha-titulo a{ color:inherit; text-decoration:none; }
.linha-titulo a::after{ content:""; position:absolute; inset:0; z-index:1; }
.linha-local{ margin:0; color:var(--ink-2); font-size:var(--t-sm); }
.linha-num{ grid-area:num; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--s-4); }
.linha-preco{ font-family:var(--display); font-size:var(--t-h4); font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.linha-preco small{ font-size:var(--t-label); font-weight:500; color:var(--ink-2); letter-spacing:0; }
.linha-area{ color:var(--ink-2); font-size:var(--t-sm); font-variant-numeric:tabular-nums; }
@media (hover:hover){
  .linha:hover .linha-foto img{ transform:scale(1.04); }
  .linha:hover .linha-titulo a{ text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:4px; }
}
.linha:focus-within{ outline:2px solid var(--ink); outline-offset:2px; border-radius:var(--r-foto); }
.linha-titulo a:focus-visible{ outline:0; }
.indice-pe{ margin:var(--s-6) 0 0; color:var(--ink-2); font-size:var(--t-sm); }

/* ============================================================
   CONFIANÇA (home) — "Confiança se confere."
   Quem responde pelos anúncios e o que dá para checar por conta
   própria. Os três primeiros títulos são os valores da casa; o
   texto embaixo é o que há de concreto em cada um.
   ============================================================ */
.conf-grid{ display:grid; gap:var(--s-9); }
.conf-quem h2{ font-size:var(--t-h2); }
.conf-quem > p{ color:var(--ink-2); font-size:var(--t-lead); margin:var(--s-4) 0 0; max-width:30em; }
.pessoa{ display:grid; grid-template-columns:88px minmax(0, 1fr); gap:var(--s-4); align-items:center; margin-top:var(--s-7); }
.pessoa-nome{ margin:0; font-family:var(--display); font-size:var(--t-h4); font-weight:600; line-height:1.25; letter-spacing:-.01em; }
.pessoa-papel{ margin:2px 0 var(--s-2); color:var(--ink-2); font-size:var(--t-sm); }
.conf-itens{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-7); }
.conf-item{ display:grid; grid-template-columns:48px minmax(0, 1fr); gap:var(--s-4); align-items:start; }
.conf-item h3{ font-size:var(--t-h4); margin:2px 0 var(--s-2); }
.conf-item p{ margin:0; color:var(--ink-2); font-size:var(--t-sm); line-height:1.6; }
.conf-item .link{ margin-top:var(--s-3); }

/* a foto do corretor: pequena, de propósito */
.sobre-photo{
  position:relative; width:180px; aspect-ratio:3/4; border-radius:var(--r-foto); overflow:hidden; background:var(--paper-2);
  border:1px solid var(--line); /* a foto tem fundo branco: sem o fio ela some na faixa branca */
  display:grid; place-items:center; color:var(--ink-3); font-size:2rem; font-weight:600; font-family:var(--display);
}
/* a foto cobre as iniciais; se ela falhar, some do DOM e as iniciais aparecem */
.sobre-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pessoa .sobre-photo{ width:88px; font-size:1.25rem; }
.values{ list-style:none; padding:0; margin:0 0 var(--s-5); display:grid; gap:var(--s-6); }
.values li{ display:grid; grid-template-columns:48px minmax(0, 1fr); gap:var(--s-4); align-items:start; }
.values h3{ font-size:var(--t-h4); margin:2px 0 var(--s-2); }
.values p{ margin:0; color:var(--ink-2); font-size:var(--t-sm); line-height:1.6; }

/* ============================================================
   COMO FUNCIONA (home) — é uma sequência de verdade, por isso
   leva número: do primeiro contato à assinatura.
   ============================================================ */
.passos{ list-style:none; margin:0; padding:0; display:grid; counter-reset:passo; }
.passos li{
  position:relative; counter-increment:passo; display:grid; grid-template-columns:48px minmax(0, 1fr); gap:var(--s-4);
  padding:var(--s-5) var(--s-7) var(--s-5) 0; border-top:1px solid var(--line);
}
.passos li:last-child{ border-bottom:1px solid var(--line); }
.passos li::before{
  content:counter(passo); position:absolute; right:0; top:var(--s-5);
  font-family:var(--display); font-size:var(--t-sm); font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.passos h3{ font-size:var(--t-h4); margin:2px 0 var(--s-1); }
.passos p{ margin:0; color:var(--ink-2); font-size:var(--t-sm); line-height:1.6; }

/* ============================================================
   PROPRIETÁRIOS (home)
   ============================================================ */
.donos-grid{ display:grid; gap:var(--s-7); align-items:center; }
.donos-txt h2{ font-size:var(--t-h2); }
.donos-txt > p{ color:var(--ink-2); font-size:var(--t-lead); margin:var(--s-4) 0 var(--s-6); max-width:32em; }
.donos-foto{ aspect-ratio:3/2; border-radius:var(--r-foto); overflow:hidden; background:var(--paper); }
.donos-foto img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   CARDS DE IMÓVEL (catálogo, favoritos, "mais imóveis")
   Sem caixa: a foto e, embaixo dela, o texto. Quem separa um card
   do outro é o espaço.
   ============================================================ */
.cards{ display:grid; gap:var(--s-8) var(--s-6); grid-template-columns:1fr; }
.card{ position:relative; display:flex; flex-direction:column; min-width:0; }
.card-media{ position:relative; aspect-ratio:4/3; border-radius:var(--r-foto); overflow:hidden; background:var(--paper-2); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
/* etiqueta sobre a foto: só existe a de "Exemplo" (o tipo e a finalidade viraram frase) */
.badges{
  position:absolute; top:var(--s-3); left:var(--s-3); right:calc(var(--s-3) * 2 + 40px);
  display:flex; flex-wrap:wrap; gap:6px; pointer-events:none;
}
.badge{
  height:26px; padding:0 var(--s-3); border-radius:6px;
  background:rgba(255,255,255,.94); color:var(--ink); font-size:var(--t-xs); font-weight:600;
  display:inline-flex; align-items:center; font-family:var(--display); letter-spacing:.01em; white-space:nowrap;
  vertical-align:middle;
}
.badge-ex{ background:rgba(38,38,42,.76); color:#fff; font-weight:500; }
.card-body{ padding:var(--s-4) 0 0; display:grid; gap:2px; }
.card-topo{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); margin:0; font-family:var(--display); font-size:var(--t-label); }
.card-tipo{ color:var(--accent-ink); font-weight:600; }
.card-ref{ color:var(--ink-3); font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.card-title{
  margin:2px 0 0; font-family:var(--display); font-size:var(--t-h4); line-height:1.3; color:var(--ink); font-weight:600; letter-spacing:-.015em;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.card-title a{ color:inherit; text-decoration:none; }
.card-title a::after{ content:""; position:absolute; inset:0; z-index:1; }
.card-loc{ margin:0; font-size:var(--t-sm); color:var(--ink-2); }
.card-pe{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-1) var(--s-4);
  margin-top:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--line);
}
.card-price{ margin:0; font-family:var(--display); font-size:var(--t-price); font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.card-price small{ font-size:var(--t-label); font-weight:500; color:var(--ink-2); letter-spacing:0; }
.card-specs{ margin:0; font-size:var(--t-sm); color:var(--ink-2); font-variant-numeric:tabular-nums; }
@media (hover:hover){
  .card:hover .card-media img{ transform:scale(1.04); }
  .card:hover .card-title a{ text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:4px; }
}
.card:focus-within .card-media{ outline:2px solid var(--ink); outline-offset:2px; }
.card-title a:focus-visible{ outline:0; }

/* ---------- coração de favorito ----------
   Fica por cima de fotos de qualquer cor, então precisa de fundo próprio:
   vidro fosco + borda clara + sombra baixa. Ao guardar, o coração dá uma
   batida e um anel se abre — o suficiente para a pessoa perceber que a
   ação valeu, sem virar espalhafato. */
.fav{
  position:absolute; top:var(--s-3); right:var(--s-3); z-index:2;
  width:40px; height:40px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
  color:var(--ink-2); display:grid; place-items:center;
  box-shadow:0 2px 10px rgba(38,38,42,.2);
  transition:color var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
             transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.fav svg{
  width:20px; height:20px; position:relative; z-index:1;
  stroke-width:1.9; transition:fill var(--dur-1) var(--ease), stroke var(--dur-1) var(--ease);
}
@media (hover:hover){
  .fav:hover{ color:var(--accent-ink); background:#fff; transform:scale(1.08); }
}
.fav:active{ transform:scale(.92); }
/* guardado = círculo cheio com coração branco: o estado se lê de longe */
.fav[aria-pressed="true"]{ color:#fff; background:var(--accent); border-color:var(--accent); }
.fav[aria-pressed="true"] svg{ fill:#fff; stroke:#fff; }
@media (hover:hover){
  .fav[aria-pressed="true"]:hover{ background:var(--accent-ink); border-color:var(--accent-ink); color:#fff; }
}
/* um coração sozinho não diz o que faz: no desktop, o nome aparece embaixo */
.fav-dica{
  position:absolute; right:0; top:calc(100% + 6px);
  transform:translateY(-4px);
  background:rgba(38,38,42,.9); color:#fff;
  font-family:var(--display); font-size:var(--t-xs); font-weight:600;
  padding:5px 10px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; z-index:1;
  transition:opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
@media (hover:hover){
  .fav:hover .fav-dica, .fav:focus-visible .fav-dica{ opacity:1; transform:translateY(0); }
}
@media (max-width:639px){ .fav-dica{ display:none; } }
/* anel que se abre ao guardar (o ::before já é a área de toque de 44 px) */
.fav::after{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:2px solid var(--accent); opacity:0; pointer-events:none;
}
.fav.pop::after{ animation:favAnel .55s var(--ease); }
.fav.pop svg{ animation:favBatida .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes favAnel{
  from{ opacity:.6; transform:scale(1); }
  to{ opacity:0; transform:scale(1.85); }
}
@keyframes favBatida{
  0%{ transform:scale(1); } 28%{ transform:scale(.76); }
  58%{ transform:scale(1.3); } 100%{ transform:scale(1); }
}

/* ============================================================
   MAPA (página do imóvel)
   ============================================================ */
.map{ aspect-ratio:3/2; border-radius:var(--r-foto); overflow:hidden; background:var(--line-2); }
.map iframe{ width:100%; height:100%; border:0; display:block; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:var(--s-5) 0; font-weight:600; font-size:var(--t-h4);
  font-family:var(--display); letter-spacing:-.01em;
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary svg{ width:18px; height:18px; color:var(--accent); transition:transform var(--dur-2) var(--ease); }
.faq details[open] summary svg{ transform:rotate(180deg); }
.faq p{ margin:0 0 var(--s-5); color:var(--ink-2); }
.faq details[open] p{ animation:viewIn var(--dur-2) var(--ease-out); }

/* ============================================================
   CONTATO E FORMULÁRIOS
   ============================================================ */
.contato-grid{ display:grid; gap:var(--s-7); }
.contato-grid h2{ font-size:var(--t-h2); }
.contato-grid > div > p{ color:var(--ink-2); font-size:var(--t-lead); margin-top:var(--s-4); }
.c-actions{ display:grid; margin-top:var(--s-6); border-top:1px solid var(--line); }
.c-action{
  display:flex; align-items:center; gap:var(--s-4); padding:var(--s-4) 0;
  border-bottom:1px solid var(--line); color:inherit; text-decoration:none; min-height:64px;
}
.c-action svg{ width:22px; height:22px; color:var(--accent); }
.c-action b{ display:block; font-family:var(--display); font-weight:600; }
.c-action small{ color:var(--ink-2); font-size:var(--t-sm); word-break:break-all; }
.c-action:hover b{ text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:4px; }
.form{ display:grid; gap:var(--s-4); }
.form label{ display:grid; gap:var(--s-2); font-size:var(--t-label); font-weight:600; color:var(--ink-2); }
.form-row{ display:grid; gap:var(--s-4); }
.form-note{ font-size:var(--t-label); color:var(--ink-3); margin:0; max-width:var(--medida); }

/* ============================================================
   RODAPÉ — a única área escura: o site termina firme, com os
   dados de quem responde por ele.
   ============================================================ */
footer{
  background:var(--fundo-escuro); color:var(--no-escuro-2);
  padding:var(--s-10) 0 calc(var(--s-7) + env(safe-area-inset-bottom)); font-size:var(--t-sm);
}
footer :focus-visible{ outline-color:var(--no-escuro); }
.foot-col a, .foot-col span{ overflow-wrap:anywhere; }
/* no celular: uma coluna, mas os links de navegação em duas fileiras
   (o e-mail não cabe em meia coluna sem quebrar no meio da palavra) */
.foot-grid{ display:grid; gap:var(--s-8); }
.foot-nav{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s-5); }
.foot-nav h2{ grid-column:1 / -1; }
.foot-brand img{ height:44px; width:auto; margin-bottom:var(--s-4); }
.foot-brand p{ max-width:34ch; margin:0; }
.foot-social{ display:inline-grid; place-items:center; width:44px; height:44px; margin-top:var(--s-4); border:1px solid var(--linha-escura); border-radius:var(--r-ctl); color:var(--no-escuro); }
.foot-social svg{ width:18px; height:18px; }
.foot-col h2{ font-family:var(--display); font-size:var(--t-sm); font-weight:600; line-height:1.25; letter-spacing:0; color:var(--no-escuro); margin-bottom:var(--s-3); }
.foot-col a, .foot-col span{ display:block; color:var(--no-escuro-2); text-decoration:none; padding:var(--s-2) 0; }
.foot-col a:hover{ color:#fff; }
/* quem responde: nome, registro e CNPJ, numa frase, com o caminho para conferir */
.foot-assina{ margin:var(--s-9) 0 0; padding-top:var(--s-5); border-top:1px solid var(--linha-escura); color:var(--no-escuro-2); line-height:1.7; max-width:74ch; }
.foot-assina b{ color:var(--no-escuro); font-weight:600; }
.foot-assina a{ color:var(--no-escuro); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; white-space:nowrap; }
.foot-assina a:hover{ text-decoration-color:var(--no-escuro); }
.foot-base{ margin-top:var(--s-6); display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); font-size:var(--t-xs); color:var(--no-escuro-2); }

/* ============================================================
   CATÁLOGO
   ============================================================ */
.cat{ padding-block:var(--s-5) var(--s-11); }
.cat-head{ margin-bottom:var(--s-5); }
.cat-head h1{ font-size:var(--t-h1); }

/* Barra de filtros — grade no celular (nada sai da tela em 320 px):
   linha 1 = finalidade + Filtros; linha 2 = os quatro tipos, cada coluna na
   largura do próprio nome ("Residencial" é o dobro de "Loja"). No desktop vira
   uma linha só. */
.fbar{ display:grid; gap:var(--s-2); }
.seg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--paper-2); border-radius:var(--r-ctl); padding:3px; }
.seg button{
  height:38px; padding:0 var(--s-1); border:0; border-radius:7px; background:transparent;
  font-size:var(--t-sm); font-weight:500; color:var(--ink-2); cursor:pointer; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.seg button.on{ background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(38,38,42,.14); }
.frow{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-2); }
.tchips{ display:grid; grid-template-columns:repeat(4,auto); gap:var(--s-2); }
.tchips button, .fbtn{
  height:44px; padding:0 var(--s-3); border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface);
  font-size:var(--t-sm); font-weight:500; color:var(--ink); cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  overflow:hidden; text-overflow:ellipsis;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.tchips button:hover, .fbtn:hover{ border-color:var(--ink-3); }
.tchips button.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.fbtn{ font-weight:600; border-color:var(--line-ctl); }
.fbtn svg{ width:16px; height:16px; }
.fbadge{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--ink); color:#fff; font-size:var(--t-xs); font-weight:700; display:inline-grid; place-items:center; font-family:var(--display); }
/* Telas estreitas: os quatro tipos com o respiro mais justo (a 320 px
   "Galpão · Loja · Residencial · Lote" ocupam 271 de 280 px). Abaixo de
   340 px o Filtros fica só com o ícone e a contagem, para a finalidade caber. */
@media (max-width:399px){
  .tchips button{ padding:0 var(--s-2); }
}
@media (max-width:339px){
  .fbtn svg{ display:block; }
  .fbtn > span{ display:none; }
}

/* linha de resultado: contagem à esquerda, ordenação e Lista/Mapa à direita */
.cat-linha{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2) var(--s-3);
  margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--line);
}
#catCount{ margin:0; color:var(--ink-2); font-size:var(--t-sm); white-space:nowrap; }
.cat-ferr{ display:flex; align-items:center; gap:var(--s-2); flex:none; margin-left:auto; }
.fsort{
  height:36px; border:0; border-radius:var(--r-ctl); background-color:transparent;
  padding:0 28px 0 var(--s-2); font-size:16px; font-weight:600; color:var(--ink); cursor:pointer;
  background-position:right var(--s-2) center;
}
.fsort:hover{ background-color:var(--ink-veil); }
.fsort:focus{ outline:0; box-shadow:0 0 0 3px var(--ink-ring); }
.catview{ display:inline-flex; background:var(--paper-2); border-radius:var(--r-ctl); padding:3px; }
.catview button{
  height:30px; width:36px; padding:0; border:0; border-radius:7px; background:transparent; cursor:pointer;
  font-size:var(--t-label); font-weight:500; color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.catview button svg{ width:16px; height:16px; }
.catview button span{ display:none; }
.catview button.on{ background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(38,38,42,.14); }
.fchips{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin:var(--s-3) 0 0; }
.fchips:empty{ display:none; }
.fchips button{
  height:34px; padding:0 var(--s-3); border:0; border-radius:6px; background:var(--paper-2);
  font-size:var(--t-label); color:var(--ink); display:inline-flex; align-items:center; gap:var(--s-2); cursor:pointer;
  transition:background var(--dur-1) var(--ease);
}
.fchips button:hover{ background:var(--line); }
.fchips button svg{ width:12px; height:12px; color:var(--ink-3); }
.fchips .fchips-clear{ background:transparent; color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }
.cat .cards{ margin-top:var(--s-6); }
.more{ text-align:center; padding:var(--s-6) 0 0; }

/* fim da lista — a saída de quem rolou tudo e não achou */
.fimlista{ margin-top:var(--s-10); padding-top:var(--s-8); border-top:1px solid var(--line); }
.fimlista-marca{ margin:0 0 var(--s-2); font-family:var(--display); font-size:var(--t-sm); font-weight:600; color:var(--accent-ink); }
.fimlista b{ display:block; font-family:var(--display); font-size:var(--t-h3); font-weight:600; letter-spacing:-.02em; }
.fimlista > p{ color:var(--ink-2); max-width:56ch; margin:var(--s-3) 0 var(--s-6); }
.fimlista > p.fimlista-marca{ margin:0 0 var(--s-2); }
.empty{ padding:var(--s-8) var(--s-5); margin-top:var(--s-6); border:1px solid var(--line); border-radius:var(--r-caixa); background:var(--surface); }
.empty > svg{ width:28px; height:28px; color:var(--accent); margin:0 0 var(--s-3); stroke-width:1.5; }
.empty b{ display:block; font-size:var(--t-h3); font-weight:600; margin-bottom:var(--s-2); font-family:var(--display); letter-spacing:-.02em; }
.empty p{ color:var(--ink-2); max-width:56ch; margin:0 0 var(--s-5); }

/* mapa da busca */
.catmap{ margin-top:var(--s-5); display:grid; gap:var(--s-4); }
.catmap .map{ aspect-ratio:1/1; }
.catmap-nota{ font-size:var(--t-label); color:var(--ink-3); margin:0; }
.catmap-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; align-content:start; border-top:1px solid var(--line); }
.catmap-list button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-3) var(--s-2); border:0; border-bottom:1px solid var(--line); background:transparent;
  text-align:left; cursor:pointer; color:inherit; font-size:var(--t-sm); min-height:48px;
  transition:background var(--dur-1) var(--ease);
}
.catmap-list button:hover{ background:var(--ink-veil); }
.catmap-list button.on{ background:var(--accent-veil); }
.catmap-list b{ font-family:var(--display); font-weight:600; }
.catmap-list span{ color:var(--ink-2); font-size:var(--t-label); white-space:nowrap; }

/* folha de filtros (sobe do rodapé no celular, caixa no desktop) */
.sheet{ position:fixed; inset:0; z-index:200; background:rgba(38,38,42,.42); display:flex; align-items:flex-end; justify-content:center; animation:fadeIn var(--dur-2) var(--ease); }
.sheet-card{
  background:var(--paper); width:100%; max-height:88vh; max-height:88dvh; border-radius:var(--r-folha) var(--r-folha) 0 0;
  display:flex; flex-direction:column; animation:sheetUp var(--dur-2) var(--ease-out);
}
@keyframes sheetUp{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line); }
.sheet-head h2{ font-size:var(--t-h3); }
.sheet-body{ overflow:auto; padding:var(--s-4) var(--s-5) var(--s-5); display:grid; gap:var(--s-5); -webkit-overflow-scrolling:touch; }
.sheet-foot{
  display:flex; gap:var(--s-3);
  padding:var(--s-3) max(var(--s-5), env(safe-area-inset-right)) calc(var(--s-3) + env(safe-area-inset-bottom)) max(var(--s-5), env(safe-area-inset-left));
  border-top:1px solid var(--line);
}
.sheet-foot .btn{ flex:1; }
.fgroup{ display:grid; gap:var(--s-2); }
.fgroup > label, .fgroup > p{ font-size:var(--t-label); font-weight:600; color:var(--ink-2); margin:0; }
.range{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); }
.fdica{ font-size:var(--t-xs); color:var(--ink-3); margin:0; }
.fdica b{ color:var(--ink-2); font-weight:600; }

/* ============================================================
   PÁGINA DO IMÓVEL
   ============================================================ */
.im{ padding-block:var(--s-4) var(--s-12); }
.im-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-3); }
.im-share{ display:flex; align-items:center; gap:var(--s-2); font-size:var(--t-label); color:var(--ink-2); position:relative; }
.im-share > span{ display:none; }
.share-btn{
  width:40px; height:40px; border-radius:var(--r-ctl); border:1px solid var(--line); background:var(--surface); color:var(--ink);
  display:grid; place-items:center; cursor:pointer; padding:0;
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.share-btn:hover{ border-color:var(--ink-3); }
.share-btn svg{ width:16px; height:16px; position:relative; z-index:1; }
.share-btn.ok{ background:var(--ink); border-color:var(--ink); color:#fff; }
.share-ok{ position:absolute; right:0; top:calc(100% + 6px); background:var(--ink); color:#fff; font-size:var(--t-xs); padding:var(--s-1) var(--s-3); border-radius:6px; white-space:nowrap; z-index:3; animation:viewIn var(--dur-1) var(--ease-out); }
.im-grid{ display:grid; gap:var(--s-5); grid-template-areas:"gal" "head" "cta" "body"; }
.im-gal{ grid-area:gal; min-width:0; }
.im-head{ grid-area:head; min-width:0; }
.im-aside{ grid-area:cta; min-width:0; }
.im-body{ grid-area:body; min-width:0; }
.gal{ position:relative; border-radius:var(--r-foto); overflow:hidden; background:var(--paper-2); }
.gal-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; aspect-ratio:3/2; }
.gal-track::-webkit-scrollbar{ display:none; }
.gal-item{ flex:0 0 100%; scroll-snap-align:start; cursor:zoom-in; }
.gal-item img{ width:100%; height:100%; object-fit:cover; }
/* anúncio com vídeo ou infográfico: nada é cortado, porque o vídeo é vertical
   e os infográficos têm texto até a borda. A caixa fica mais alta para caber. */
.gal-track.misto{ aspect-ratio:1/1; }
.gal-track.misto .gal-item img{ object-fit:contain; }
.gal-track.tres-dois{ aspect-ratio:3/2; }
.gal-track.misto .gal-item{ position:relative; overflow:hidden; isolation:isolate; }
.gal-track.misto .gal-item::before{
  content:""; position:absolute; inset:-36px; z-index:-1;
  background:var(--fundo, none) center / cover no-repeat;
  filter:blur(26px) saturate(1.1); opacity:.6;
}
/* vídeo e infográfico têm fundo claro e texto: o desfoque viraria mancha */
.gal-track .gal-video, .gal-track .gal-info{ background:#eef3fc; }
.gal-video{ position:relative; }
.gal-play{
  position:absolute; left:50%; bottom:var(--s-4); transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:var(--s-2); white-space:nowrap;
  min-height:44px; padding:var(--s-2) var(--s-5); border:0; border-radius:var(--r-ctl);
  background:var(--ink); color:#fff; font-family:var(--display); font-size:var(--t-label); font-weight:600;
  box-shadow:0 6px 20px rgba(38,38,42,.35); cursor:pointer;
}
.gal-play svg{ width:18px; height:18px; }
.t-play{
  position:absolute; left:50%; top:50%; width:28px; height:28px; padding:6px; box-sizing:border-box;
  transform:translate(-50%,-50%); border-radius:50%; background:var(--ink); color:#fff; pointer-events:none;
}
.gal-count{ position:absolute; right:var(--s-3); bottom:var(--s-3); background:rgba(38,38,42,.66); color:#fff; font-size:var(--t-xs); padding:var(--s-1) var(--s-3); border-radius:6px; font-variant-numeric:tabular-nums; }
/* setas: só no desktop, e só quando o mouse está sobre a foto */
.gal-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(255,255,255,.92); color:var(--ink); display:none; place-items:center; cursor:pointer; padding:0;
  box-shadow:var(--shadow-sm); opacity:0;
  transition:opacity var(--dur-2) var(--ease), background var(--dur-1) var(--ease);
}
.gal:hover .gal-nav, .gal:focus-within .gal-nav{ opacity:1; }
.gal-nav:hover{ background:#fff; }
.gal-nav svg{ width:18px; height:18px; }
.gal-prev{ left:var(--s-3); } .gal-next{ right:var(--s-3); }
.gal-thumbs{ display:none; }

/* cabeçalho do anúncio: o que é (em frase), o título, onde fica */
.im-tipo{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-1) var(--s-4); margin:0; font-family:var(--display); font-size:var(--t-sm); }
.im-tipo > span:first-child{ color:var(--accent-ink); font-weight:600; }
.im-ref{ color:var(--ink-3); font-weight:500; font-variant-numeric:tabular-nums; }
.im-head .badge{ margin:var(--s-2) var(--s-2) 0 0; background:var(--paper-2); }
.im-head .badge-ex{ background:rgba(38,38,42,.76); }
.im-head h1{ font-size:var(--t-h1); margin:var(--s-2) 0 var(--s-3); }
.im-loc{ display:flex; align-items:center; gap:var(--s-2); color:var(--ink-2); font-size:var(--t-body); margin:0; }
.im-loc svg{ width:16px; height:16px; color:var(--accent); }

/* a caixa de preço: a única caixa "levantada" da página */
.im-cta{ border:1px solid var(--line); border-radius:var(--r-caixa); padding:var(--s-6); background:var(--surface); box-shadow:var(--shadow-sm); }
.im-price small{ font-size:var(--t-label); color:var(--ink-2); }
.im-price b{ display:block; font-family:var(--display); font-size:2.125rem; font-weight:600; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums; }
.im-m2{ display:block; margin-top:var(--s-2); font-size:var(--t-label); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.im-price b em{ font-style:normal; font-size:var(--t-sm); font-weight:500; color:var(--ink-2); letter-spacing:0; }
.im-taxas{ display:flex; gap:var(--s-6); margin:var(--s-4) 0 0; padding:var(--s-3) 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); font-size:var(--t-sm); }
.im-taxas span{ display:grid; gap:2px; }
.im-taxas small{ color:var(--ink-2); font-size:var(--t-xs); }
.im-taxas b{ font-family:var(--display); font-weight:600; font-variant-numeric:tabular-nums; }
.im-taxas em{ font-style:normal; font-weight:400; color:var(--ink-3); font-size:var(--t-xs); }
.im-cta .btn{ width:100%; margin-top:var(--s-2); }
.im-cta .im-price + .btn, .im-cta .im-taxas + .btn{ margin-top:var(--s-5); }
/* ações secundárias em texto: guardar e simular, lado a lado */
.im-links{ display:flex; align-items:center; justify-content:center; gap:var(--s-3); margin-top:var(--s-3); flex-wrap:wrap; }
.im-links .sep{ width:1px; height:14px; background:var(--line); }
.im-fav{
  position:relative; height:44px; padding:0 var(--s-2); border:0; background:transparent;
  color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--display); font-size:var(--t-sm); font-weight:600; border-radius:var(--r-ctl);
  transition:color var(--dur-1) var(--ease);
}
.im-fav svg{ width:18px; height:18px; stroke-width:1.9; transition:fill var(--dur-1) var(--ease), stroke var(--dur-1) var(--ease); }
.im-fav:hover{ color:var(--ink); }
.im-fav[aria-pressed="true"]{ color:var(--accent-ink); }
.im-fav[aria-pressed="true"] svg{ fill:var(--accent); stroke:var(--accent); }
.im-fav.pop svg{ animation:favBatida .45s cubic-bezier(.34,1.56,.64,1); }
.im-links .link{ height:44px; padding:0 var(--s-2); }
/* quem responde por este anúncio — junto do botão, que é onde a dúvida aparece */
.im-assina{
  display:grid; grid-template-columns:44px minmax(0, 1fr); gap:var(--s-3); align-items:center;
  margin-top:var(--s-4); padding-top:var(--s-5); border-top:1px solid var(--line);
}
.im-assina-foto{
  position:relative; width:44px; height:44px; border-radius:50%; overflow:hidden; background:var(--paper-2); border:1px solid var(--line);
  display:grid; place-items:center; font-family:var(--display); font-size:var(--t-label); font-weight:600; color:var(--ink-3);
}
/* o retrato é 3:4, de corpo: a moldura redonda fecha no rosto */
.im-assina-foto img{ position:absolute; left:-60%; top:-9%; width:220%; max-width:none; height:auto; }
.im-assina p{ margin:0; font-size:var(--t-label); color:var(--ink-2); line-height:1.5; }
.im-assina b{ color:var(--ink); font-weight:600; }
.im-assina a{ font-weight:600; white-space:nowrap; }
.im-como{ margin-top:var(--s-4); border-top:1px solid var(--line); }
.im-como summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-4) 0 0; font-family:var(--display); font-size:var(--t-sm); font-weight:600;
}
.im-como summary::-webkit-details-marker{ display:none; }
.im-como summary svg{ width:16px; height:16px; color:var(--accent); transition:transform var(--dur-2) var(--ease); }
.im-como[open] summary svg{ transform:rotate(180deg); }
.im-como ol{ list-style:none; margin:var(--s-3) 0 0; padding:0; display:grid; gap:var(--s-2); counter-reset:como; }
.im-como li{ counter-increment:como; display:grid; grid-template-columns:18px minmax(0, 1fr); gap:var(--s-2); font-size:var(--t-label); color:var(--ink-2); line-height:1.5; }
.im-como li::before{ content:counter(como); font-family:var(--display); font-weight:600; color:var(--accent-ink); }
.im-como[open] ol{ animation:viewIn var(--dur-2) var(--ease-out); }

/* números do imóvel: sem caixinhas — valor grande, rótulo pequeno, um fio em cima e outro embaixo */
.im-specs{ display:flex; flex-wrap:wrap; gap:var(--s-4) var(--s-8); padding:var(--s-5) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.im-spec{ display:grid; gap:2px; }
.im-spec svg{ display:none; }
.im-spec b{ font-family:var(--display); font-size:1.25rem; font-weight:600; letter-spacing:-.02em; line-height:1.2; font-variant-numeric:tabular-nums; }
.im-spec span{ font-size:var(--t-label); color:var(--ink-2); }
.im-body h2{ font-size:var(--t-h3); margin:var(--s-8) 0 var(--s-3); }
.im-links-area{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5); }
.im-links-area .btn{ flex:1 1 240px; }
.im-condo{ margin:var(--s-4) 0 0; color:var(--ink-2); font-size:var(--t-sm); }
.im-body p{ color:var(--ink-2); }
.im-desc p{ font-size:var(--t-lead); line-height:1.65; }
.im-carac ul{ list-style:none; padding:0; margin:0; display:grid; gap:var(--s-2); }
.im-carac li{ display:grid; grid-template-columns:18px minmax(0, 1fr); gap:var(--s-3); align-items:start; font-size:var(--t-body); }
.im-carac li::before{
  content:""; width:18px; height:18px; margin-top:3px; background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ficha técnica */
.im-ficha{ margin:0; display:grid; gap:0; border-top:1px solid var(--line); }
.im-ficha div{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4); padding:var(--s-3) 0; border-bottom:1px solid var(--line); }
.im-ficha dt{ font-size:var(--t-sm); color:var(--ink-2); }
.im-ficha dd{ margin:0; font-size:var(--t-sm); font-weight:600; text-align:right; }
.im-map .map{ margin-top:var(--s-2); }
.map-regiao{ width:100%; height:auto; margin-top:var(--s-2); border-radius:var(--r-foto); background:var(--line-2); }
.local-consulta{ margin-top:var(--s-4); padding:var(--s-5); border:1px solid var(--accent-soft); border-radius:var(--r-caixa); background:var(--accent-veil); }
.local-consulta h3{ margin:0 0 var(--s-2); font-size:var(--t-h4); }
.local-consulta p{ margin:0 0 var(--s-4); color:var(--ink-2); font-size:var(--t-sm); }
.im-map small{ display:block; color:var(--ink-3); font-size:var(--t-xs); margin-top:var(--s-2); }
/* sobre este anúncio: de onde vêm as informações e quando elas passam a valer */
.im-nota{
  display:grid; grid-template-columns:48px minmax(0, 1fr); gap:var(--s-4); align-items:start;
  margin-top:var(--s-8); padding:var(--s-5); border:1px solid var(--line); border-radius:var(--r-caixa); background:var(--surface);
}
.im-body .im-nota h2{ font-size:var(--t-h4); margin:2px 0 var(--s-2); }
.im-nota p{ margin:0; font-size:var(--t-sm); line-height:1.6; }
.im-nota p + p{ margin-top:var(--s-2); }
.im-nota .cod{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.im-sim{ margin-top:var(--s-10); padding-top:var(--s-8); border-top:1px solid var(--line); }
.im-sim-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-6); }
.im-sim-head h2{ font-size:var(--t-h2); min-width:0; }
.im-sim-head .link{ white-space:nowrap; flex:none; }
.im-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  background:var(--nav-bg); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding:var(--s-3) max(var(--s-4), env(safe-area-inset-right)) calc(var(--s-3) + env(safe-area-inset-bottom)) max(var(--s-4), env(safe-area-inset-left));
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
}
.im-bar b{ font-size:var(--t-h4); font-family:var(--display); font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.im-bar b small{ font-size:var(--t-xs); font-weight:500; color:var(--ink-2); }
.im-bar small{ display:block; font-size:var(--t-xs); color:var(--ink-2); }
.im-bar .btn{ flex:none; }
/* a barra fixa cobre o fim da página: o conteúdo ganha esse respiro a mais */
body[data-view="imovel"] footer{ padding-bottom:calc(var(--s-7) + 76px + env(safe-area-inset-bottom)); }

/* ---------- simulador de financiamento ---------- */
.sim{
  margin-top:var(--s-8); border:1px solid var(--accent-soft); border-radius:var(--r-caixa);
  background:var(--accent-veil); padding:var(--s-6);
}
.im-body .sim h2{ font-size:var(--t-h3); margin:0 0 var(--s-1); }
.sim > p{ font-size:var(--t-sm); color:var(--ink-2); margin:0 0 var(--s-5); max-width:56ch; }
.sim-campos{ display:grid; gap:var(--s-4); }
.sim-campo{ display:grid; gap:var(--s-2); }
.sim-campo label{ font-size:var(--t-label); font-weight:600; color:var(--ink-2); display:flex; justify-content:space-between; gap:var(--s-3); }
.sim-campo label b{ color:var(--ink); font-family:var(--display); font-variant-numeric:tabular-nums; }
.sim-campo input[type="range"]{ width:100%; margin:0; height:44px; accent-color:var(--ink); background:transparent; }
.sim-saida{
  margin-top:var(--s-5); padding:var(--s-5); background:var(--surface); border:1px solid var(--accent-soft); border-radius:var(--r-ctl);
  display:grid; gap:var(--s-3);
}
.sim-parcela{ display:grid; gap:2px; }
.sim-parcela small{ font-size:var(--t-label); color:var(--ink-2); }
.sim-parcela b{ font-family:var(--display); font-size:1.75rem; font-weight:600; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums; }
.sim-linhas{ display:grid; gap:var(--s-1); margin:0; }
.sim-linhas div{ display:flex; justify-content:space-between; gap:var(--s-4); font-size:var(--t-label); padding:var(--s-1) 0; }
.sim-linhas dt{ color:var(--ink-2); }
.sim-linhas dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; }
.sim-alerta{ font-size:var(--t-label); color:var(--erro); margin:0; }
.sim-nota{ font-size:var(--t-xs); color:var(--ink-3); margin:var(--s-4) 0 0; }
/* A saída para o simulador oficial: uma porta para FORA do site, e para um banco. */
.sim-oficial{
  display:flex; align-items:center; gap:var(--s-4); margin-top:var(--s-4); padding:var(--s-4);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-ctl); color:inherit; text-decoration:none;
  min-height:72px; transition:border-color var(--dur-1) var(--ease);
}
.sim-oficial:hover{ border-color:var(--banco); }
.sim-banco{
  flex:none; width:80px; height:48px; border-radius:6px;
  background:#fff; border:1px solid var(--line-2); display:grid; place-items:center;
}
.sim-banco img{ width:60px; height:auto; display:block; }
.sim-txt{ flex:1; min-width:0; display:grid; gap:3px; }
.sim-txt > b{ font-family:var(--display); font-size:var(--t-sm); letter-spacing:-.01em; }
.sim-txt small{ color:var(--ink-2); font-size:var(--t-xs); line-height:1.45; }
.sim-txt small b{ color:var(--banco); font-weight:600; }
.sim-oficial .sim-go{ flex:none; width:18px; height:18px; color:var(--ink-3); }
/* celular: a logo e a seta numa linha, o texto embaixo na largura toda */
@media (max-width:519px){
  .sim-oficial{ flex-wrap:wrap; row-gap:var(--s-3); }
  .sim-oficial .sim-go{ margin-left:auto; }
  .sim-txt{ order:3; flex-basis:100%; }
}

/* ============================================================
   VENDER
   ============================================================ */
.vender{ padding-block:var(--s-5) var(--s-11); max-width:760px; }
.vender h1{ font-size:var(--t-h1); margin-bottom:var(--s-4); }
.etapas{ list-style:none; padding:0; margin:var(--s-7) 0; display:grid; gap:0; counter-reset:etapa; border-top:1px solid var(--line); }
/* no celular, nome em cima e explicação embaixo; no desktop, na mesma linha */
.etapas li{ display:grid; grid-template-columns:28px 1fr; column-gap:var(--s-2); align-items:baseline; counter-increment:etapa; padding:var(--s-4) 0; border-bottom:1px solid var(--line); }
.etapas li::before{ content:counter(etapa); grid-row:1 / span 2; color:var(--accent-ink); font-family:var(--display); font-size:var(--t-sm); font-weight:600; font-variant-numeric:tabular-nums; }
.etapas b{ grid-column:2; font-family:var(--display); font-weight:600; }
.etapas span{ grid-column:2; color:var(--ink-2); font-size:var(--t-sm); }
/* o que fica combinado com quem entrega o imóvel */
.garantias{ list-style:none; margin:0 0 var(--s-8); padding:0; display:grid; gap:var(--s-3); }
.garantias li{ display:grid; grid-template-columns:18px minmax(0, 1fr); gap:var(--s-3); align-items:start; color:var(--ink-2); }
.garantias svg{ width:18px; height:18px; margin-top:3px; color:var(--accent); }
.vender .form{ padding:var(--s-6); border:1px solid var(--line); border-radius:var(--r-caixa); background:var(--surface); }

/* ============================================================
   SOBRE MIM (página)
   ============================================================ */
.sb{ padding-block:var(--s-5) var(--s-11); }
.sb-head h1{ font-size:var(--t-h1); }
.sb-grid{ display:grid; gap:var(--s-7); margin-top:var(--s-6); }
/* registro no CRECI: a marca do conselho, o número e a saída para a consulta oficial */
.creci{
  margin-top:var(--s-10); display:grid; gap:var(--s-6); padding:var(--s-6);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-caixa);
}
.creci-marca{ display:flex; align-items:center; gap:var(--s-3); }
.creci-marca img{ flex:none; width:56px; height:56px; }
.creci-nome{ display:grid; line-height:1; }
.creci-nome b{ font-family:var(--display); font-weight:700; font-size:1.625rem; letter-spacing:-.01em; color:#47484c; }
.creci-nome b i{ font-style:normal; color:var(--ink-3); margin:0 .06em; }
.creci-nome small{ margin-top:6px; font-size:var(--t-xs); font-weight:500; color:var(--ink-3); }
.creci-corpo h2{ font-size:var(--t-h3); }
.creci-num{ margin:var(--s-3) 0 0; display:grid; gap:2px; }
.creci-num small{ font-family:var(--display); font-size:var(--t-label); font-weight:600; color:var(--accent-ink); }
.creci-num b{ font-family:var(--display); font-size:2.75rem; font-weight:600; letter-spacing:-.03em; line-height:1.05; color:var(--ink); font-variant-numeric:tabular-nums; }
.creci-num-linha{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-2) var(--s-4); }
.creci-copiar{
  position:relative; display:inline-flex; align-items:center; gap:var(--s-2); height:36px; padding:0 var(--s-4);
  border:1px solid var(--line-ctl); border-radius:var(--r-ctl); background:var(--surface); color:var(--ink);
  font:inherit; font-family:var(--display); font-size:var(--t-label); font-weight:600; cursor:pointer;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
/* o botão tem 36 px; a área de toque, 44 */
.creci-copiar::before{ content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:44px; }
.creci-copiar svg{ width:16px; height:16px; }
.creci-copiar:hover{ background:var(--ink-veil); border-color:var(--ink); }
.creci-copiar.ok{ background:var(--accent-veil); border-color:var(--accent-soft); color:var(--accent-ink); }
.creci-txt{ color:var(--ink-2); margin:var(--s-3) 0 var(--s-5); }
.creci-btn svg{ width:16px; height:16px; }
/* como conferir, em três passos (a consulta do conselho não aceita link já preenchido) */
.creci-passos{ list-style:none; margin:0 0 var(--s-5); padding:0; display:grid; gap:var(--s-2); counter-reset:cp; }
.creci-passos li{ counter-increment:cp; display:grid; grid-template-columns:18px minmax(0, 1fr); gap:var(--s-2); font-size:var(--t-sm); color:var(--ink-2); }
.creci-passos li::before{ content:counter(cp); font-family:var(--display); font-weight:600; color:var(--accent-ink); }
@media (min-width:768px){
  .creci{ grid-template-columns:220px minmax(0, 1fr); gap:0; padding:var(--s-8) var(--s-8) var(--s-8) 0; align-items:stretch; }
  .creci-marca{ flex-direction:column; justify-content:center; text-align:center; gap:var(--s-4); border-right:1px solid var(--line-2); }
  .creci-marca img{ width:72px; height:72px; }
  .creci-corpo{ padding-left:var(--s-8); }
}
/* dados de quem responde: empresa, CNPJ, contato — em lista, para ler e conferir */
.sb-dados{ margin:var(--s-10) 0 0; display:grid; border-top:1px solid var(--line); }
.sb-dados div{ display:grid; gap:2px var(--s-5); padding:var(--s-4) 0; border-bottom:1px solid var(--line); }
.sb-dados dt{ font-size:var(--t-sm); color:var(--ink-2); }
.sb-dados dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }
.sb-dados dd a{ font-weight:600; }
.sb h2.sb-sub{ font-size:var(--t-h3); margin:var(--s-10) 0 0; }
.sb h2.sb-sub + .sb-dados{ margin-top:var(--s-4); }
.sb-quote{
  margin:var(--s-10) 0 0; font-family:var(--display); font-size:var(--t-h2);
  font-weight:600; letter-spacing:-.03em; color:var(--ink); max-width:20ch; line-height:1.12;
}
.sb-quote strong{ font-weight:600; }
.sb-fim{ margin-top:var(--s-8); padding-top:var(--s-7); border-top:1px solid var(--line); }
.sb-fim p{ margin:0 0 var(--s-1); color:var(--ink-2); }
.sb-fim p b{ color:var(--ink); font-size:var(--t-h3); font-weight:600; font-family:var(--display); letter-spacing:-.02em; }
.sb-fim .btns{ margin-top:var(--s-5); }

/* ============================================================
   FAVORITOS · PRIVACIDADE · 404
   ============================================================ */
.fv{ padding-block:var(--s-5) var(--s-11); }
.fv-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-3); }
.fv-head h1{ font-size:var(--t-h1); }
.fv-acoes{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin:var(--s-5) 0 var(--s-7); }
.fv .cards{ margin-top:var(--s-6); }
.priv{ padding-block:var(--s-5) var(--s-11); max-width:760px; }
.priv h1{ font-size:var(--t-h1); margin-bottom:var(--s-4); }
.priv h2{ font-size:var(--t-h3); margin:var(--s-8) 0 var(--s-3); }
.priv p{ color:var(--ink-2); }
.priv b{ color:var(--ink); font-weight:600; }
.priv code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9em; background:var(--paper-2); padding:1px 6px; border-radius:4px; }
/* índice da página: links que rolam até a seção */
.priv-idx{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin:var(--s-2) 0 var(--s-4); }
.priv-idx a{
  display:inline-flex; align-items:center; height:36px; padding:0 var(--s-3); border-radius:6px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:var(--t-label); font-weight:500; text-decoration:none;
  transition:border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.priv-idx a:hover{ border-color:var(--ink); color:var(--ink); }
/* lista "dado → explicação" */
.priv-lista{ margin:0; padding:0; display:grid; gap:var(--s-3); }
.priv-lista > div{ padding:var(--s-4) var(--s-5); border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); }
.priv-lista dt{ font-family:var(--display); font-weight:600; color:var(--ink); margin-bottom:var(--s-2); }
.priv-lista dd{ margin:0; color:var(--ink-2); font-size:var(--t-sm); line-height:1.6; }
.priv-ul{ margin:0 0 var(--s-3); padding-left:1.2em; color:var(--ink-2); display:grid; gap:var(--s-2); max-width:var(--medida); }
.priv-ul li::marker{ color:var(--accent); }
.priv-data{ margin-top:var(--s-8); padding-top:var(--s-4); border-top:1px solid var(--line); font-size:var(--t-label); color:var(--ink-3); }
/* tabela de cookies: rola na horizontal no celular, sem esticar a página */
.tabela-rolo{ overflow-x:auto; contain:paint; margin:0 0 var(--s-3); -webkit-overflow-scrolling:touch; }
.priv-tab{ width:100%; min-width:560px; border-collapse:collapse; font-size:var(--t-sm); color:var(--ink-2); }
.priv-tab th, .priv-tab td{ text-align:left; vertical-align:top; padding:var(--s-3) var(--s-3); border-bottom:1px solid var(--line-2); }
.priv-tab thead th{ font-size:var(--t-label); color:var(--ink-3); font-weight:600; border-bottom-color:var(--line); }
.priv-tab tbody th{ font-weight:600; color:var(--ink); white-space:nowrap; }
/* no celular cada linha vira um bloco: rótulo · valor, sem rolagem lateral */
@media (max-width:639px){
  .priv-tab{ min-width:0; }
  .priv-tab thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .priv-tab tr{ display:block; padding:var(--s-3) 0; border-bottom:1px solid var(--line-2); }
  .priv-tab tbody th, .priv-tab td{ display:block; border:0; padding:var(--s-1) 0; white-space:normal; }
  .priv-tab td{ display:grid; grid-template-columns:5.5em 1fr; gap:var(--s-2); }
  .priv-tab td::before{ content:attr(data-rotulo); font-size:var(--t-xs); color:var(--ink-3); font-weight:600; padding-top:2px; }
}

/* caixa de consentimento dos formulários (nativa: teclado e leitor de tela de graça) */
.consent{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-3); align-items:start; }
.consent input{ width:24px; height:24px; min-height:0; padding:0; border:0; margin:0; accent-color:var(--ink); cursor:pointer; }   /* desfaz a regra geral de campo */
.consent label{ display:block; font-size:var(--t-label); font-weight:400; color:var(--ink-2); line-height:1.5; cursor:pointer; }   /* .form label é grid; aqui o texto corre */
.consent label a{ font-weight:600; }
.consent input:focus, .consent input:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; box-shadow:none; }

/* aviso de cookies: cartão fixo no rodapé, nunca cobre a barra fixa do imóvel (fica acima dela) */
.cookie-aviso{
  position:fixed; left:var(--s-4); right:var(--s-4); bottom:calc(var(--s-4) + env(safe-area-inset-bottom)); z-index:305;
  display:grid; gap:var(--s-4); padding:var(--s-5); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-caixa);
  box-shadow:var(--shadow-lg); animation:toastUp var(--dur-2) var(--ease-out); max-width:720px; margin:0 auto;
}
body[data-view="imovel"] .cookie-aviso{ bottom:calc(var(--s-4) + 80px + env(safe-area-inset-bottom)); }
.cookie-txt b{ display:block; font-family:var(--display); font-weight:600; margin-bottom:var(--s-1); }
.cookie-txt p{ margin:0; font-size:var(--t-sm); color:var(--ink-2); }
.cookie-btns{ display:flex; gap:var(--s-2); }
.cookie-btns .btn{ flex:1; }

/* mapa sob clique: nada do Google carrega antes de a pessoa pedir */
.map-aviso{
  height:100%; min-height:220px; display:grid; place-content:center; justify-items:center; text-align:center;
  gap:var(--s-2); padding:var(--s-5); background:var(--paper-2); color:var(--ink-2);
  background-image:radial-gradient(var(--line) 1px, transparent 1px); background-size:18px 18px;
}
.map-aviso svg{ width:28px; height:28px; color:var(--accent); }
.map-aviso b{ font-family:var(--display); font-weight:600; color:var(--ink); }
.map-aviso p{ margin:0; font-size:var(--t-label); max-width:34ch; }
.map-aviso .btn{ margin-top:var(--s-2); }
.map-aviso small{ font-size:var(--t-xs); color:var(--ink-3); max-width:36ch; }

/* preferências de cookies (página /cookies/) */
.prefs{ display:grid; gap:var(--s-3); margin:var(--s-4) 0; }
.pref{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-3); align-items:start; padding:var(--s-4) var(--s-5); border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); }
.pref input{ width:24px; height:24px; margin:0; accent-color:var(--ink); cursor:pointer; }
.pref label{ display:grid; gap:var(--s-1); cursor:pointer; }
.pref label b{ font-family:var(--display); font-weight:600; color:var(--ink); }
.pref label span{ font-size:var(--t-sm); color:var(--ink-2); line-height:1.5; }
.pref-nota{ font-size:var(--t-label); color:var(--ink-3); margin:0; }
.pref-nota:empty{ display:none; }
.priv-404{ padding-top:var(--s-10); }
.priv-404 .fig{ width:72px; height:72px; margin-bottom:var(--s-5); }
.priv-404 .btns{ margin-top:var(--s-6); }

/* ============================================================
   LIGHTBOX E AVISO
   ============================================================ */
.lightbox{ position:fixed; inset:0; z-index:300; background:rgba(14,14,16,.94); display:grid; place-items:center; animation:fadeIn var(--dur-2) var(--ease); }
.lightbox img, .lightbox video{ max-width:94vw; max-height:86vh; max-height:86dvh; object-fit:contain; border-radius:4px; }
.lightbox video{ background:#000; }
.lb-close, .lb-nav{
  position:absolute; width:48px; height:48px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff;
  display:grid; place-items:center; cursor:pointer; padding:0; transition:background var(--dur-1) var(--ease);
}
.lb-close:hover, .lb-nav:hover{ background:rgba(255,255,255,.28); }
.lb-close:focus-visible, .lb-nav:focus-visible{ outline-color:#fff; }
.lb-close{ top:var(--s-4); right:var(--s-4); }
.lb-nav{ top:50%; transform:translateY(-50%); }
.lb-prev{ left:var(--s-3); } .lb-next{ right:var(--s-3); }
.lb-close svg, .lb-nav svg{ width:20px; height:20px; }
.lb-count{ position:absolute; bottom:var(--s-5); left:50%; transform:translateX(-50%); color:#fff; font-size:var(--t-label); opacity:.85; font-variant-numeric:tabular-nums; }

.toast{
  position:fixed; left:50%; bottom:calc(var(--s-6) + env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:310; background:var(--ink); color:#fff; font-size:var(--t-sm); padding:var(--s-3) var(--s-5);
  border-radius:var(--r-ctl); box-shadow:var(--shadow); max-width:calc(100vw - var(--s-8)); text-align:center;
  animation:toastUp var(--dur-2) var(--ease-out);
}
@keyframes toastUp{ from{ opacity:0; transform:translate(-50%, 10px); } to{ opacity:1; transform:translate(-50%, 0); } }

/* ============================================================
   RESPONSIVO — 640 / 900 / 1024
   ============================================================ */
@media (min-width:640px){
  .cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cookie-aviso{ grid-template-columns:1fr auto; align-items:center; }
  .cookie-btns .btn{ flex:none; }
  /* em grade, a altura de 2 linhas fica reservada para as fichas alinharem */
  .card-title{ min-height:calc(2 * 1.3 * var(--t-h4)); }
  .form-row{ grid-template-columns:1fr 1fr; }
  .vitrine{ --vit-ar:16/10; }
  .vit-prox{ width:22%; }
  .vit-legenda{ right:calc(22% + var(--s-5) + var(--s-4)); }
  .linha{ grid-template-columns:148px minmax(0, 1fr); column-gap:var(--s-6); align-items:center; }
  .linha-foto{ aspect-ratio:4/3; }
  .linha-titulo{ font-size:var(--t-h3); }
  .conf-itens{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-8) var(--s-7); }
  .passos{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--s-7); }
  .passos li:nth-last-child(2){ border-bottom:1px solid var(--line); }
  .sim-campos{ grid-template-columns:1fr 1fr; }
  .catmap{ grid-template-columns:1.4fr 1fr; align-items:start; }
  .catmap .map{ aspect-ratio:4/3; }
  .catmap-nota{ grid-column:1/-1; }
  .catview button{ width:auto; padding:0 var(--s-3); }
  .catview button span{ display:inline; }
  .etapas li{ grid-template-columns:28px 150px 1fr; align-items:baseline; }
  .etapas li::before{ grid-row:auto; }
  .etapas b{ grid-column:2; }
  .etapas span{ grid-column:3; font-size:var(--t-body); }
  .sb-dados div{ grid-template-columns:200px minmax(0, 1fr); align-items:baseline; }
  .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
  .foot-nav{ display:block; }
  .im-carac ul{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-3) var(--s-6); }
}

@media (min-width:900px){
  .wrap{ padding-left:max(var(--s-7), env(safe-area-inset-left)); padding-right:max(var(--s-7), env(safe-area-inset-right)); }
  .nav-links{ display:flex; }
  .nav-burger{ display:none; }
  .nav-wa{ width:auto; padding:0 var(--s-4); }
  .nav-wa span{ display:inline; }
  .nav-act{ gap:var(--s-3); }
  .hero{ padding-block:var(--s-8) 0; }
  .assina{ margin-top:var(--s-10); }
  /* índice: miniatura · o que é e onde · área · preço, numa linha só */
  .linha{
    grid-template-columns:176px minmax(0, 1fr) auto; grid-template-areas:"foto txt num";
    column-gap:var(--s-7); padding:var(--s-5) 0;
  }
  .linha-num{ flex-wrap:nowrap; gap:var(--s-9); justify-content:flex-end; }
  .linha-preco{ order:2; min-width:9.5ch; text-align:right; font-size:var(--t-price); }
  .linha-area{ order:1; text-align:right; }
  .map{ aspect-ratio:16/10; }
  .contato-grid{ grid-template-columns:1fr 1fr; gap:var(--s-10); align-items:start; }
  .donos-grid{ grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:var(--s-10); }
  .cat{ padding-block:var(--s-7) var(--s-12); }
  .cards{ gap:var(--s-9) var(--s-7); }
  /* barra de filtros numa linha só: finalidade · tipos · … · Filtros */
  .fbar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); }
  .seg{ display:inline-grid; grid-auto-flow:column; grid-auto-columns:auto; }
  .seg button{ padding:0 var(--s-4); }
  .frow{ display:contents; }
  .tchips{ display:inline-flex; order:1; }
  .tchips button{ padding:0 var(--s-4); }
  .fbtn{ margin-left:auto; order:2; }
  .fsort{ font-size:var(--t-sm); padding-left:var(--s-3); }
  .sheet{ align-items:center; padding:var(--s-6); }
  .sheet-card{ max-width:640px; border-radius:var(--r-folha); max-height:84vh; max-height:84dvh; box-shadow:var(--shadow-lg); }
  .im{ padding-block:var(--s-6) var(--s-12); }
  .im-share > span{ display:inline; }
  .im-grid{ grid-template-columns:minmax(0, 1fr) 372px; grid-template-areas:"gal cta" "head cta" "body cta"; gap:var(--s-6) var(--s-9); }
  .im-aside{ position:sticky; top:calc(var(--nav-h) + var(--s-5)); align-self:start; }
  .gal-track{ aspect-ratio:16/10; }
  .gal-track.misto{ aspect-ratio:4/3; }
  .gal-track.tres-dois{ aspect-ratio:3/2; }
  .gal-nav{ display:grid; }
  .gal-thumbs{ display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--s-2); margin-top:var(--s-2); }
  .gal-thumbs button{ position:relative; aspect-ratio:4/3; padding:0; border:0; border-radius:6px; overflow:hidden; background:var(--paper-2); cursor:pointer; transition:opacity var(--dur-1) var(--ease); opacity:.62; }
  .gal-thumbs button:hover{ opacity:1; }
  .gal-thumbs button.on{ opacity:1; box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
  .gal-thumbs img{ width:100%; height:100%; object-fit:cover; }
  .im-bar{ display:none; }
  body[data-view="imovel"] footer{ padding-bottom:calc(var(--s-7) + env(safe-area-inset-bottom)); }
  .sim-campos{ grid-template-columns:repeat(2, 1fr); }
  .sb-grid{ grid-template-columns:260px minmax(0, 1fr); gap:var(--s-10); align-items:start; }
  .sb-grid .sobre-photo{ width:100%; }
  footer{ padding-top:var(--s-11); }
}

@media (min-width:1024px){
  .cards{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .catmap .map{ aspect-ratio:16/10; }
  /* o topo se abre em duas colunas: a marca e a frase · a vitrine */
  .hero{ padding-block:var(--s-9) 0; }
  .hero-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.04fr); gap:var(--s-10); align-items:center; }
  .hero-logo{ margin-bottom:var(--s-7); }
  .vitrine{ --vit-ar:1/1; }
  .vit-prox{ width:25%; }
  .vit-legenda{ left:var(--s-6); bottom:calc(var(--s-6) + 14px); right:calc(25% + var(--s-6) + var(--s-4)); }
  .vit-prox{ right:var(--s-5); bottom:calc(var(--s-5) + 14px); }
  .vit-passos{ left:var(--s-6); right:var(--s-6); bottom:var(--s-5); }
  .conf-grid{ grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:var(--s-11); align-items:start; }
  /* quatro etapas lado a lado: a figura em cima, o número no canto */
  .passos{ grid-template-columns:repeat(4, minmax(0, 1fr)); column-gap:var(--s-7); }
  .passos li{ grid-template-columns:1fr; gap:var(--s-4); padding:var(--s-6) 0 0; border-bottom:0; }
  .passos li:last-child, .passos li:nth-last-child(2){ border-bottom:0; }
  .passos li::before{ top:var(--s-6); }
}

/* ============================================================
   FICHA DO IMÓVEL — o que sai no papel (e no "Salvar em PDF")
   ------------------------------------------------------------
   Regra de ouro: NADA depende de fundo colorido, porque o navegador
   não imprime fundo por padrão. Tudo que precisa aparecer é traço,
   borda ou texto.
   ============================================================ */
.folha-topo, .folha-pe{ display:none; }

@media print{
  @page{ margin:14mm 12mm; }
  html, body{ background:#fff !important; overflow:visible !important; }
  body{ font-size:10.5pt; line-height:1.45; color:#000; }
  a{ color:#000; text-decoration:none; }

  /* o que não vai para o papel */
  .nav, .menu, .menu-fundo, .skip, .im-bar, .toast, .lightbox,
  .sheet, .im-share, .im-sim, .sim, .gal-nav, .gal-count, .gal-thumbs,
  .crumbs, nav[aria-label="Trilha de navegação"], .back, .im-top,
  .im-links, .im-cta .btn, .im-map .map, .local-consulta .btn, footer,
  .fimlista, .fav, .catview, .fbar, .more, #intro, .im-como, .im-assina-foto,
  .im-assina a, .im-nota .fig{ display:none !important; }

  main, .wrap, .im{ padding:0 !important; margin:0 !important; max-width:none !important; }
  .im-grid{ display:block !important; }
  .im-aside{ position:static !important; }

  /* cabeçalho e rodapé da ficha */
  .folha-topo{
    display:flex !important; align-items:center; gap:8mm;
    padding-bottom:3mm; margin-bottom:5mm; border-bottom:1.2pt solid #94743F;
  }
  .folha-topo img{ height:12mm; width:auto; }
  .folha-quem{ flex:1; }
  .folha-quem b{ display:block; font-family:var(--display); font-size:11pt; }
  .folha-quem span{ font-size:8pt; color:#444; }
  .folha-contato{ text-align:right; font-size:8.5pt; color:#333; }
  .folha-contato span{ display:block; }
  .folha-pe{
    display:block !important; margin-top:6mm; padding-top:2.5mm;
    border-top:.6pt solid #bbb; font-size:7.5pt; color:#555;
  }
  .folha-pe span{ display:block; }

  /* fotos: a de capa grande e as três seguintes numa fileira */
  .gal{ border-radius:0 !important; background:none !important; }
  .gal-track{
    display:grid !important; grid-template-columns:repeat(3,1fr); gap:2mm;
    overflow:visible !important; aspect-ratio:auto !important;
  }
  .gal-item{ display:none !important; }
  .gal-item:nth-child(-n+5){ display:block !important; }
  .gal-item.gal-video{ display:none !important; }   /* vídeo não existe no papel */
  .gal-track.misto .gal-item::before{ display:none; }
  .gal-item:first-child{ grid-column:1 / -1; }
  .gal-track .gal-item img, .gal-track.misto .gal-item img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
  .gal-item:first-child img{ aspect-ratio:16/9; max-height:88mm; }

  /* título, preço e números */
  .im-head{ margin-top:5mm; }
  .im-head h1{ font-size:16pt; margin:2mm 0 1mm; }
  .im-tipo > span:first-child, .im-ref{ color:#000 !important; }
  .im-loc{ font-size:9pt; }
  .im-loc svg{ display:none; }
  .badge{
    position:static !important; background:none !important; border:.7pt solid #666;
    color:#000 !important; font-size:7.5pt; padding:0 2mm; height:auto; line-height:1.6;
  }
  .im-cta{
    border:.8pt solid #999 !important; border-radius:0; padding:4mm; margin:4mm 0;
    box-shadow:none !important;
  }
  .im-price b{ font-size:17pt; }
  .im-taxas{ gap:8mm; }
  .im-assina{ display:block !important; border-top:.4pt solid #ccc; padding-top:2mm; margin-top:2mm; }
  .im-assina p{ font-size:8pt; color:#333; }
  .im-specs{ gap:2mm 10mm; padding:3mm 0; margin-bottom:4mm; border-color:#999 !important; }
  .im-spec b{ font-size:11pt; }
  .im-spec span{ font-size:7.5pt; }

  /* texto corrido */
  .im-body h2{ font-size:11pt; margin:5mm 0 2mm; }
  .im-body p, .im-desc p{ color:#000 !important; max-width:none !important; font-size:10.5pt; }
  .im-ficha div{ padding:1.2mm 0; border-bottom:.4pt solid #ccc; }
  .im-ficha dt{ font-size:8.5pt; color:#444; }
  .im-ficha dd{ font-size:9pt; }
  .im-carac ul{ display:block !important; }
  .im-carac li{ display:inline-block; border:.5pt solid #999; padding:.8mm 2mm; margin:0 1mm 1mm 0; font-size:8pt; }
  .im-carac li::before{ display:none; }
  .im-nota{ display:block !important; border:.5pt solid #999 !important; border-radius:0; padding:3mm; margin-top:5mm; }
  .im-nota p{ font-size:8.5pt; }

  /* não deixar um bloco partir no meio entre duas folhas */
  .im-desc, .im-detalhes, .im-carac, .im-cta, .im-specs, .im-nota{ break-inside:avoid; }
  h1, h2{ break-after:avoid; }
}

/* ============================================================
   MOVIMENTO REDUZIDO — tudo o que se mexe sozinho é desligado
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .desenha .fig > *{ stroke-dasharray:none; stroke-dashoffset:0; transition:none; }
  .view-in, .sheet, .sheet-card, .menu, .menu-fundo, .lightbox, .toast, .faq details[open] p, .share-ok, .im-como[open] ol{ animation:none; }
  .intro-veil, .intro-logo, .intro-title{ transition:none; }
  .link-balanco svg{ animation:none; }
  .vit-passos i.agora::after{ animation:none; transform:scaleX(1); }
  .card:hover .card-media img, .linha:hover .linha-foto img{ transform:none; }
  *{ transition-duration:.01ms !important; }
}