/* blog.css — páginas de imóvel e de cidade (item 37 amostra; item 39 B2 gerador). Sem main.css, sem Leaflet, sem Font Awesome. */
:root{
  --bg:#0a0a0f; --bg2:#12121c; --panel:#1a1a2e; --line:rgba(255,255,255,.12);
  --txt:#eef2f7; --mut:#a3afbf; --cy:#00d4ff; --gr:#4caf50; --am:#ffb74d;
  --r:14px; --w:1120px;
  --f-head:'Outfit',ui-rounded,'Segoe UI',system-ui,sans-serif;
  --f-body:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font:400 17px/1.65 var(--f-body);min-height:100vh}
img{max-width:100%;height:auto;display:block}
a{color:var(--cy);text-underline-offset:3px}
a:hover{color:#6fe6ff}
:focus-visible{outline:3px solid var(--cy);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* cabeçalho */
.topo{border-bottom:1px solid var(--line);background:rgba(10,10,15,.92)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:76px}
.topo img{width:72px;height:64px;object-fit:contain}
.topo nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.topo nav a{color:var(--txt);text-decoration:none;padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:10px;font-size:15px}
.topo nav a:hover{background:rgba(255,255,255,.07)}
.topo nav{margin-left:auto}
@media(max-width:480px){.topo .so-largo{display:none}}
.topo nav a.zap{background:var(--gr);color:#06130a;font-weight:700}
.topo nav a.zap:hover{background:#66bb6a}

/* migalhas */
.migalha{font-size:14px;color:var(--mut);padding:18px 0 0}
.migalha ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px}
.migalha li+li::before{content:"›";margin-right:8px;opacity:.6}
.migalha a{color:var(--mut)}

/* herói */
.heroi{position:relative;padding:22px 0 8px;overflow:hidden}
.heroi::before{content:"";position:absolute;inset:-40% -20% auto auto;width:900px;height:900px;pointer-events:none;
  background:repeating-radial-gradient(circle at 60% 40%,transparent 0 26px,rgba(0,212,255,.055) 26px 27px);
  -webkit-mask-image:radial-gradient(circle,#000 0,transparent 68%);mask-image:radial-gradient(circle,#000 0,transparent 68%)}
.heroi .wrap{position:relative}
.selo{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gr);font-weight:700}
.selo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gr)}
h1{font:700 clamp(28px,5.2vw,52px)/1.08 var(--f-head);letter-spacing:-.01em;margin:10px 0 14px;max-width:18ch}
h1 .num{background:linear-gradient(135deg,var(--cy),var(--gr));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--mut);max-width:62ch;font-size:18px}
.numeros{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:26px 0 0;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.numeros div{background:var(--bg2);padding:16px 18px}
.numeros dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.numeros dd{font:600 clamp(22px,3.4vw,32px)/1.2 var(--f-head);margin-top:2px;font-variant-numeric:tabular-nums}
.numeros dd small{font:400 14px var(--f-body);color:var(--mut)}

/* galeria */
.galeria{display:grid;gap:10px;margin:26px 0 8px;grid-template-columns:1fr}
.galeria img{border-radius:var(--r);width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--panel)}
.galeria figure:first-child{grid-column:1/-1}
.galeria figcaption{font-size:13px;color:var(--mut);margin-top:6px}
@media(min-width:760px){.galeria{grid-template-columns:2fr 1fr;grid-template-rows:auto auto}.galeria figure:first-child{grid-column:1;grid-row:1/3}.galeria.g2{grid-template-columns:1fr 1fr;grid-template-rows:auto}.galeria.g2 figure:first-child{grid-column:auto;grid-row:auto}}

/* blocos de texto */
main section{padding:34px 0 6px}
h2{font:600 clamp(22px,3vw,30px)/1.2 var(--f-head);margin-bottom:14px}
.colunas{display:grid;gap:34px}
@media(min-width:900px){.colunas{grid-template-columns:1.5fr 1fr;align-items:start}}
.ficha{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ficha div{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--line)}
.ficha div:last-child{border-bottom:0}
.ficha dt{color:var(--mut);font-size:15px}
.ficha dd{font-weight:600;text-align:right}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:6px 0 0}
.chips li{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg2);font-size:15px}
.chips li a{display:flex;align-items:center;min-height:44px;margin:-7px -12px;padding:7px 12px;color:var(--txt);text-decoration:none}
.chips li:has(a){padding:0 12px}
.paginas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin:26px 0 6px}
.paginas a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:12px;color:var(--txt);text-decoration:none}
.paginas span{color:var(--mut)}
.fonte{font-size:14px;color:var(--mut);margin-top:12px}
.pend{display:inline-block;border:1px dashed var(--am);color:var(--am);padding:0 8px;border-radius:6px;font-size:.9em}

/* chamada para visita */
.visita{background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:24px}
.visita p{color:var(--mut);margin-bottom:16px}
.botoes{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border-radius:12px;font-weight:700;text-decoration:none;font-size:16px}
.btn.zap{background:var(--gr);color:#06130a}
.btn.zap:hover{background:#66bb6a;color:#06130a}
.btn.sec{border:1px solid var(--line);color:var(--txt)}
.btn.sec:hover{background:rgba(255,255,255,.07);color:var(--txt)}
.nota{margin-top:18px;border:1px dashed var(--line);border-radius:10px;padding:12px 14px;color:var(--mut);font-size:15px}

/* cartões (cidade e relacionados) */
.cartoes{display:grid;gap:16px;grid-template-columns:1fr;list-style:none}
@media(min-width:640px){.cartoes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.cartoes{grid-template-columns:repeat(3,1fr)}}
.cartao{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;height:100%}
.cartao img{aspect-ratio:4/3;object-fit:cover;width:100%}
.cartao .c{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.cartao h3{font:600 19px/1.25 var(--f-head)}
.cartao h3 a{color:var(--txt);text-decoration:none}
.cartao h3 a::after{content:"";position:absolute;inset:0}
.cartao{position:relative}
.cartao .p{font:600 20px var(--f-head);font-variant-numeric:tabular-nums}
.cartao .m{color:var(--mut);font-size:14px;margin-top:auto}

/* rodapé */
.rodape{margin-top:56px;border-top:1px solid var(--line);background:var(--bg2);padding:28px 0 40px;font-size:15px;color:var(--mut)}
.rodape strong{color:var(--txt)}
.rodape p+p{margin-top:8px}

/* faixa da amostra (some em produção) */
.amostra{background:#1d1630;border-bottom:2px dashed var(--am);color:#ffe3b8;font-size:14px;padding:10px 0}
.amostra b{color:#fff}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(min-width:760px){.numeros{grid-template-columns:repeat(4,1fr)}}

.semfoto{aspect-ratio:4/3;display:grid;place-items:center;background:var(--panel);color:var(--mut);font-size:13px}

/* estados da página (produção) */
.selo.vendido,.selo.encerrado{color:var(--am)}
.selo.vendido::before,.selo.encerrado::before{background:var(--am)}
.galeria.g1{grid-template-columns:1fr}
.galeria.g1 figure:first-child{grid-row:auto}
.nota p{color:var(--txt);margin-top:6px}
/* onda I1 (item 149): leitura do guia, perguntas, toque e valor no mobile. So estilo; nenhum seletor novo no HTML. */
#guia article{max-width:60ch;line-height:1.7}
#guia article h2{margin:40px 0 12px}
#guia article h2:first-child{margin-top:0}
#guia article p+p,#guia article p+ul,#guia article ul+p,#guia article p+blockquote,#guia article blockquote+p{margin-top:16px}
#guia article ul,#guia article ol{margin:12px 0 0;padding-left:1.25em}
#guia article li+li{margin-top:6px}
#guia ~ #perguntas h3,#guia ~ #perguntas p{max-width:60ch}
#perguntas h3{margin-top:26px}
#perguntas h2+h3{margin-top:0}
#perguntas h3+p{margin-top:6px;color:var(--mut)}
@media(pointer:coarse){.migalha li{display:flex;align-items:center}.migalha a{display:inline-flex;align-items:center;min-height:44px}}
@media(max-width:480px){.numeros div{padding:16px 14px}.numeros dd{font-size:clamp(16px,4.7vw,22px)}}
/* onda I2a (item 157): contato sempre a mao no celular. O MESMO <a> do WhatsApp do bloco #visita (href, texto, data-cta-position,
   rel) vira uma barra fixa no pe da tela em telas de ate 480 px; nenhum elemento novo no HTML, entao o js/medicao.js continua medindo
   whatsapp_click igual. Acima de 480 px nada muda (0 px de diferenca). A barra NAO se move nunca (CLS 0). O banner de cookies, quando
   aparece, fica logo ACIMA da barra (bottom = altura da barra): assim nao ha colisao com qualquer altura do banner (fonte do sistema
   maior, 320 px etc.), coisa que um deslocamento da barra por altura medida do banner nao garantia (testado: sobrepunha com fonte >= 115%).
   Barra com z-index acima do banner, que entra deslizando por tras dela. Tudo dentro de @supports selector(:has()): sem :has o banner ficaria por baixo da barra (botoes cobertos), entao navegador sem :has fica como antes, sem barra. So existe em anuncio (main[data-property-id]) com #visita. */
@media(max-width:480px){
@supports selector(:has(a)){
  main[data-property-id] #visita .btn.zap{position:fixed;left:0;right:0;bottom:0;z-index:10001;box-sizing:border-box;
    min-height:calc(56px + env(safe-area-inset-bottom,0px));padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    border-radius:0;border-top:1px solid rgba(255,255,255,.3);box-shadow:0 -8px 24px rgba(0,0,0,.5);font-size:17px;text-align:center}
  main[data-property-id] #visita .btn.zap:focus-visible{outline:3px solid #06130a;outline-offset:-7px}
  main[data-property-id]:has(#visita .btn.zap) ~ .rodape{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  body:has(main[data-property-id] #visita .btn.zap) #cookie-consent-banner{bottom:calc(56px + env(safe-area-inset-bottom,0px));padding-bottom:.375rem}
}
}

/* onda I3 (item 162): galeria compacta no celular. So CSS, so em anuncio (main[data-property-id]) e so ate 480 px (mesmo limite da I2a);
   acima disso nada muda (0 px). A 1a foto continua grande e primeira (eager, fetchpriority, LCP) e as demais ficam lado a lado, 2 por
   linha; se sobrar uma foto sozinha na ultima linha ela ocupa a linha inteira. Nenhuma rolagem interna (sem tabindex), nenhum HTML,
   alt, loading ou dimensao mexidos; a proporcao 4/3 ja vem de .galeria img (CLS 0). */
@media(max-width:480px){
  main[data-property-id] .galeria{grid-template-columns:repeat(2,minmax(0,1fr))}
  main[data-property-id] .galeria figure:first-child,
  main[data-property-id] .galeria figure:last-child:nth-child(even){grid-column:1/-1}
}