/* Layout: artigo do blog Chaves na Mão — índice fixo à esquerda, coluna de leitura de 780px, gráficos ocupam a coluna inteira; seletor Venda|Aluguel fixo no topo pinta a página inteira */
:root{
  --red:#eb0027; --red-logo:#ff0d36; --red-tint:#fff0f2; --red-wash:#ff0d3610; --wine:#740017;
  --venda:#eb0027; --locacao:#1b1a1a;
  --v1:#ff958f; --v2:#f7625e; --v3:#eb0027; --v4:#c20022; --v5:#9a001d; --v6:#740017;
  --l1:#84b0ff; --l2:#4f89ff; --l3:#155dfc; --l4:#1b4fc8; --l5:#1d4196; --l6:#1d3267;
  --ref:#8a8686; --ref-soft:#d1d0d0; --na:#e7e6e6;
  --txt-1:#1b1a1a; --txt-2:#5e5c5d; --txt-3:#71717a;
  --bg:#ffffff; --bg-2:#f6f5f5; --bg-3:#f3f3f5; --line:#e5e5e7; --line-strong:#d1d0d0;
  --tip-bg:#1b1a1a; --tip-fg:#ffffff; --good:#0a7d32;
  --f:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius:9px; --body-max:780px;
  color-scheme:light;
}
.page[data-mode="venda"]{--serie:var(--venda); --c1:var(--v1); --c2:var(--v2); --c3:var(--v3); --c4:var(--v4); --c5:var(--v5); --c6:var(--v6)}
.page[data-mode="locacao"]{--serie:var(--venda); --c1:var(--v1); --c2:var(--v2); --c3:var(--v3); --c4:var(--v4); --c5:var(--v5); --c6:var(--v6)}

*{box-sizing:border-box}
figure{margin:0}
body{background:var(--bg); color:var(--txt-1); font-family:var(--f); font-size:18px; line-height:1.8; -webkit-font-smoothing:antialiased}
a{color:var(--red)}
h1,h2,h3{text-wrap:balance; line-height:1.25; margin:0}
p{margin:0}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--serie); outline-offset:2px}

/* faixa de material interno */
.internal{background:var(--red-tint); color:var(--wine); border-bottom:1px solid #ffd6dd; font-size:14px; line-height:1.5; padding-block:10px; padding-inline:16px}
.internal .in{max-width:1180px; margin:0 auto; display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap}
.internal b{font-weight:700}
.pill-int{background:var(--red-logo); color:#fff; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap}

/* topo do blog */
.brand{border-bottom:1px solid var(--line); padding-block:14px; padding-inline:16px; background:var(--bg)}
.brand .in{max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:16px; justify-content:space-between; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:21px; letter-spacing:-.02em; color:var(--txt-1); text-decoration:none}
.logo .mk{width:34px; height:34px; border-radius:8px; background:var(--red-logo); display:grid; place-items:center}
.logo small{font-weight:600; color:var(--txt-3); font-size:14px; letter-spacing:0; margin-left:2px}
.brand nav{display:flex; gap:18px; font-size:15px; color:var(--txt-2); flex-wrap:wrap}

/* barra fixa do modo */
.modebar{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); padding-block:10px; padding-inline:16px}
.modebar .in{max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.modebar .lbl{font-size:14px; color:var(--txt-2); line-height:1.4}
.modebar .lbl b{color:var(--txt-1)}
.seg{display:inline-flex; border:1px solid var(--line-strong); border-radius:999px; padding:3px; gap:3px; background:var(--bg)}
.seg button{border:0; background:transparent; color:var(--txt-2); font-weight:700; font-size:15px; padding:6px 18px; border-radius:999px; cursor:pointer; line-height:1.3}
.seg button[aria-pressed="true"]{background:var(--serie); color:#fff}
.seg.small{flex-wrap:wrap; border-radius:16px}
.seg.small button{font-size:13px; padding:4px 12px; font-weight:600}
.seg.small button[aria-pressed="true"]{background:var(--txt-1); color:var(--bg)}

/* grade do artigo */
.wrap{max-width:1180px; margin:0 auto; padding-inline:16px; padding-block:24px 64px; display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px}
.toc{position:sticky; top:84px; align-self:start; font-size:15px; line-height:1.45}
.toc p{font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--txt-3); margin-bottom:10px}
.toc ol{list-style:none; padding:0; margin:0; display:grid; gap:2px; counter-reset:t}
.toc a{display:block; color:var(--txt-2); text-decoration:none; padding:6px 10px; border-radius:6px; border-left:2px solid transparent}
.toc a:hover{background:var(--bg-2); color:var(--txt-1)}
.toc a.on{border-left-color:var(--serie); color:var(--txt-1); font-weight:600; background:var(--bg-2)}
main{min-width:0; max-width:820px}
.toc-m{display:none}
@media (max-width:1000px){
  .wrap{grid-template-columns:minmax(0,1fr); gap:0}
  .toc{display:none}
  .toc-m{display:block; border:1px solid var(--line); border-radius:var(--radius); padding:8px 14px; margin-bottom:24px; font-size:15px}
  .toc-m summary{cursor:pointer; font-weight:700}
  .toc-m ol{margin:8px 0 4px; padding-left:20px; line-height:1.7}
  .toc-m a{color:var(--txt-2)}
}

/* cabeçalho do artigo */
.crumbs{font-size:14px; color:var(--txt-3); display:flex; gap:6px; flex-wrap:wrap}
.crumbs a{color:var(--txt-3); text-decoration:none}
.cat{display:inline-block; margin-top:18px; background:var(--red-tint); color:var(--wine); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; padding:4px 10px; border-radius:6px}
h1{font-size:clamp(1.85rem,4.4vw,2.75rem); font-weight:800; letter-spacing:-.02em; margin-top:12px}
.dek{font-size:20px; color:var(--txt-2); margin-top:12px; line-height:1.55}
.author{margin-top:22px; background:var(--red-wash); border-radius:var(--radius); padding:12px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:15px; line-height:1.45}
.author .av{width:40px; height:40px; border-radius:50%; background:var(--red-logo); display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px; flex:none}
.author span{color:var(--txt-2)}

/* hero: mapa-capa */
.cover{margin-top:24px; border-radius:var(--radius); background:var(--bg-2); padding:20px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:24px; align-items:center}
.cover svg{width:100%; height:auto; max-height:360px}
.cover .big{font-size:clamp(2.6rem,7vw,4.2rem); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--serie)}
.cover .bl{font-size:16px; color:var(--txt-2); line-height:1.5; margin-top:8px}
.cover .rows{display:grid; gap:14px; margin-top:18px}
.cover .rows div{border-top:1px solid var(--line); padding-top:10px; font-size:15px; line-height:1.45; color:var(--txt-2)}
.cover .rows b{color:var(--txt-1); font-size:22px; display:block; font-weight:800; letter-spacing:-.01em}
@media (max-width:640px){ .cover{grid-template-columns:minmax(0,1fr)} .cover svg{max-height:260px} }

/* corpo */
section{scroll-margin-top:80px; margin-top:64px}
.kick{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--red)}
section > h2{font-size:clamp(1.45rem,3vw,1.85rem); font-weight:800; letter-spacing:-.015em; margin-top:6px}
.prose{display:grid; gap:16px; margin-top:16px; max-width:var(--body-max)}
.prose b{font-weight:700}
.prose p{font-size:18px}

/* KPIs */
.kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px}
@media (max-width:760px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .kpis{grid-template-columns:minmax(0,1fr)} }
.kpi{border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:4px; background:var(--bg); min-width:0}
.kpi .k{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--txt-2); line-height:1.35}
.kpi .v{font-size:clamp(1.6rem,3.6vw,2.15rem); font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--txt-1)}
.kpi .v.s{color:var(--serie)}
.kpi .d{font-size:13.5px; color:var(--txt-2); line-height:1.4}
.kpi .d .up{color:var(--good); font-weight:700}
.kpi .d .dn{color:var(--red); font-weight:700}
.kpi .chk{font-size:12.5px; color:var(--txt-3); line-height:1.4; border-top:1px dashed var(--line); padding-top:6px; margin-top:auto}

/* figuras */
.viz{margin-top:28px; border:1px solid var(--line); border-radius:var(--radius); padding:20px 20px 14px; background:var(--bg); min-width:0}
@media (max-width:560px){ .viz{padding:16px 12px 12px; margin-inline:-4px} }
.viz-k{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--txt-3)}
.viz-t{font-size:20px; font-weight:700; line-height:1.3; margin-top:4px; letter-spacing:-.01em}
.viz-s{font-size:15px; color:var(--txt-2); line-height:1.45; margin-top:4px}
.viz-ctrl{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; align-items:center}
.viz-body{margin-top:14px; position:relative; min-width:0}
.viz-body svg{display:block; width:100%; height:auto; overflow:visible}
.viz-read{font-size:14px; color:var(--txt-2); line-height:1.5; margin-top:12px}
.viz-read b{color:var(--txt-1)}
.viz-src{font-size:13px; color:var(--txt-3); line-height:1.5; margin-top:8px}
.viz-act{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; border-top:1px solid var(--line); padding-top:10px}
.btn{border:1px solid var(--line-strong); background:var(--bg); color:var(--txt-1); border-radius:999px; font-size:13px; font-weight:600; padding:5px 14px; cursor:pointer; line-height:1.4}
.btn:hover{background:var(--bg-2)}
.btn.ok{border-color:var(--good); color:var(--good)}
.tbl-wrap{overflow-x:auto; margin-top:12px; border:1px solid var(--line); border-radius:8px; max-height:420px}
table{border-collapse:collapse; width:100%; font-size:14px; line-height:1.4; font-variant-numeric:tabular-nums}
th,td{padding:7px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap}
th{background:var(--bg-2); font-weight:700; position:sticky; top:0; z-index:1}
td.n,th.n{text-align:right}
tr.hl td{background:var(--red-tint)}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--txt-2); line-height:1.3; margin-top:10px; align-items:center}
.legend i{display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-1px; margin-right:6px}
.legend i.ln{height:3px; border-radius:2px; width:16px; vertical-align:3px}
.legend i.dot{border-radius:50%}
.legend i.ring{border-radius:50%; background:transparent !important; border:2px solid var(--ref)}

/* svg */
.ax text, text.ax{fill:var(--txt-3); font-size:12px; font-family:var(--f)}
.ax line, line.grid{stroke:var(--line); stroke-width:1}
line.base{stroke:var(--line-strong); stroke-width:1}
text.lb{fill:var(--txt-1); font-size:13px; font-weight:600; font-family:var(--f)}
text.lb2{fill:var(--txt-2); font-size:12.5px; font-family:var(--f)}
text.lbw{font-size:12px; font-weight:700; font-family:var(--f)}
.f-serie{fill:var(--serie)} .s-serie{stroke:var(--serie)}
.f-ref{fill:var(--ref)} .s-ref{stroke:var(--ref)}
.f-soft{fill:var(--ref-soft)} .f-na{fill:var(--na)}
.f-bg{fill:var(--bg)}
.hov{cursor:pointer}
.hov:hover{opacity:.82}
.bairro{stroke:var(--bg); stroke-width:.8; cursor:pointer; transition:opacity .15s}
.bairro.sel{stroke:var(--txt-1); stroke-width:2}
.dim{opacity:.18}

/* mapa */
.map-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:700px){ .map-grid{grid-template-columns:minmax(0,1fr)} }
.map-grid svg{max-height:640px}
.toplist{list-style:none; margin:0; padding:0; display:grid; gap:2px; font-size:15px; line-height:1.35}
.toplist li{display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:8px; align-items:center; padding:7px 8px; border-radius:6px; cursor:pointer}
.toplist li:hover, .toplist li.on{background:var(--bg-2)}
.toplist .pos{font-weight:800; color:var(--serie); font-variant-numeric:tabular-nums}
.toplist .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.toplist .vl{font-variant-numeric:tabular-nums; font-weight:700}
.toplist .dl{grid-column:2 / 4; font-size:12.5px; color:var(--txt-3); margin-top:-4px}
.card-b{border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-top:12px; font-size:14px; line-height:1.5; background:var(--bg-2)}
.card-b h4{margin:0 0 4px; font-size:17px}
.card-b .row{display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed var(--line); padding-block:3px}
.card-b .row span:last-child{font-weight:700; font-variant-numeric:tabular-nums}
.warn{font-size:12.5px; color:var(--wine); background:var(--red-tint); border-radius:6px; padding:6px 8px; margin-top:8px; line-height:1.4}

/* waffle */
.waf-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
@media (max-width:560px){ .waf-grid{grid-template-columns:minmax(0,1fr)} }
.waf h4{font-size:15px; margin:0 0 8px}

/* na prática */
.prat{margin-top:28px; background:var(--red-wash); border-radius:var(--radius); padding:16px 18px; display:grid; gap:6px}
.prat .t{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--red); display:flex; align-items:center; gap:8px}
.prat p{font-size:16px; line-height:1.6}

/* frases */
.quotes{display:grid; gap:10px; margin-top:20px}
.q{border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; background:var(--bg)}
.q p{font-size:16.5px; line-height:1.5; font-weight:600}
.q small{display:block; font-size:12.5px; color:var(--txt-3); font-weight:400; margin-top:4px}
.q .tag{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border-radius:4px; padding:1px 6px; margin-right:6px; vertical-align:2px}
.tag.alta{background:color-mix(in srgb, var(--good) 15%, transparent); color:var(--good)}
.tag.media{background:var(--bg-3); color:var(--txt-2)}


/* validação */
.qid{display:inline-block; font-size:12px; font-weight:800; color:var(--red); border:1.5px solid var(--red); border-radius:5px; padding:0 6px; margin-right:8px; vertical-align:2px; font-variant-numeric:tabular-nums}
.q small a{color:var(--red); font-weight:600; text-decoration:none; white-space:nowrap}
.vsum{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:20px}
@media (max-width:520px){ .vsum{grid-template-columns:minmax(0,1fr)} }
.vs{border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; display:grid; gap:2px; line-height:1.35}
.vs b{font-size:24px; font-weight:800; letter-spacing:-.02em}
.vs span{font-weight:700; font-size:15px}
.vs small{font-size:12.5px; color:var(--txt-3)}
.vs.confirma b{color:var(--good)} .vs.direcao b{color:var(--txt-1)} .vs.exclusivo b{color:var(--red)}
.vcard{border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-top:12px; display:grid; gap:8px; scroll-margin-top:90px; background:var(--bg)}
.vcard:target, .q:target{border-color:var(--red); box-shadow:0 0 0 3px var(--red-wash)}
.q{scroll-margin-top:90px}
.vhd{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.vhd .back{margin-left:auto; font-size:13px; color:var(--txt-3); text-decoration:none}
.pill{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; border-radius:999px; padding:2px 10px}
.pill.confirma{background:color-mix(in srgb, var(--good) 14%, transparent); color:var(--good)}
.pill.direcao{background:var(--bg-3); color:var(--txt-2)}
.pill.exclusivo{background:var(--red-tint); color:var(--wine)}
.vtx{font-size:16px; font-weight:600; line-height:1.5}
.vnone{font-size:14.5px; color:var(--txt-2); line-height:1.55}
.vref{border-left:3px solid var(--line-strong); padding:2px 0 2px 12px; display:grid; gap:2px}
.vsrc{font-size:13.5px; color:var(--txt-3); line-height:1.45}
.vsrc a{color:var(--txt-1); font-weight:700}
.vval{font-size:15px; line-height:1.45}
.vlei{font-size:14px; color:var(--txt-2); line-height:1.5}

/* metodologia */
.method{display:grid; gap:12px; margin-top:16px}
.method details{border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px}
.method summary{cursor:pointer; font-weight:700; font-size:16.5px}
.method details p, .method details li{font-size:15.5px; line-height:1.65; color:var(--txt-2)}
.method details > *:not(summary){margin-top:8px}
.ctx{width:100%}

/* tooltip */
#tip{position:fixed; z-index:50; pointer-events:none; background:var(--tip-bg); color:var(--tip-fg); border-radius:6px; padding:8px 10px; font-size:13px; line-height:1.45; max-width:260px; box-shadow:0 6px 20px rgba(0,0,0,.18); opacity:0; transition:opacity .1s; font-variant-numeric:tabular-nums}
#tip.on{opacity:1}
#tip .h{font-weight:800; font-size:14px; margin-bottom:2px}
#tip .r{display:flex; justify-content:space-between; gap:14px}
#tip .r b{font-weight:700}
.end{margin-top:72px; border-top:1px solid var(--line); padding-top:20px; font-size:14px; color:var(--txt-3); line-height:1.6}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }
html,body{margin:0;padding:0;background:var(--bg);overflow:hidden}

.viz{margin:0}
figure.viz > .viz-k, figure.viz > .viz-read, figure.viz > .viz-src{display:none}

/* sem botao Ver tabela */
figure.viz > .viz-act, figure.viz > .tbl-wrap{display:none !important}