/* Quadras · estilo compartilhado por todas as páginas (identidade "Prancheta", acabamento médio) */
:root {
  --bg:#F4F4F1; --surface:#FFFFFF; --line:#DCDDD8; --ink:#16181D; --ink2:#5A5F69; --ink3:#6B6F78;
  --accent:#2340D8; --accent-press:#1B33B3; --on-accent:#FFFFFF;
  --g-potencial:#2340D8; --g-margem:#9FACEF; --g-limite:#B9BBB4; --g-acima:#ECECE8; --g-gleba:#F1F1EE;
  --hatch-line:#C4C6BF;
  --hatch:repeating-linear-gradient(45deg, var(--hatch-line) 0 1.5px, var(--g-acima) 1.5px 4px);
  --grid:#E7E8E3;
  --display:'General Sans', system-ui, sans-serif; --text:'Switzer', system-ui, sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font:400 16px/1.55 var(--text); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.wrap { max-width:1200px; margin:0 auto; padding:0 32px; }
h1, h2, h3, .logo { font-family:var(--display); font-weight:600; letter-spacing:-.02em; }
h1 { font-size:56px; line-height:1.02; }
h2 { font-size:40px; line-height:1.08; }
h3 { font-size:20px; line-height:1.25; }
.num { font-variant-numeric:tabular-nums; }
.hero > *, .sec-head > *, .q > *, .fontes > *, .pedido > *, .texto > * { min-width:0; }

.btn { display:inline-block; font:500 16px var(--text); text-decoration:none; background:var(--accent); color:var(--on-accent); border:0; padding:12px 20px; border-radius:10px; cursor:pointer; }
.btn:hover { background:var(--accent-press); }
.btn:focus-visible, .quiet:focus-visible, input:focus-visible, .opt input:focus-visible + span, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.quiet { font:500 15px var(--text); text-decoration:none; color:var(--ink); border:1px solid var(--line); padding:8px 14px; border-radius:10px; }
.quiet:hover { border-color:var(--ink3); }
.link { color:var(--accent); font-weight:500; text-decoration:none; }
.link:hover { text-decoration:underline; }

/* ---------- nav ---------- */
nav { display:flex; justify-content:space-between; align-items:center; padding:24px 0; }
.logo { display:flex; align-items:center; gap:8px; font-size:20px; text-decoration:none; }
.logo svg { width:20px; height:20px; }
.navlinks { display:flex; gap:24px; align-items:center; font-size:15px; color:var(--ink2); }
.navlinks a:not(.quiet) { text-decoration:none; }
.navlinks a:not(.quiet):hover { color:var(--ink); }
.trilha { font-size:13px; color:var(--ink3); margin-bottom:16px; }
.trilha a { text-decoration:none; color:var(--ink2); }
.trilha a:hover { text-decoration:underline; }

/* ---------- topo ---------- */
.hero { display:grid; grid-template-columns:5fr 7fr; gap:48px; align-items:center; padding:32px 0 96px; }
.lead { font-size:18px; color:var(--ink2); margin-top:20px; max-width:32ch; }
.hero .btn { margin-top:32px; }

.ficha { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px; }
.ficha-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.ficha-top h2, .ficha-top h3 { font-size:28px; line-height:1.1; }
.ficha-top span { font-size:13px; color:var(--ink3); }
.tabs { display:flex; gap:24px; border-bottom:1px solid var(--line); margin:16px 0; font-size:14px; overflow-x:auto; }
.tabs button { font:inherit; background:none; border:0; padding:8px 0 10px; color:var(--ink3); white-space:nowrap; }
.tabs button[aria-selected=true] { color:var(--ink); font-weight:500; box-shadow:inset 0 -2px 0 var(--ink); }
.tabs small { font-size:12px; margin-left:4px; }
.mapbox { position:relative; }
.mapbox svg { display:block; width:100%; height:400px; }
.mapbox path.g { transition:opacity .2s ease-out; }
.mapbox.focus path.g { opacity:.15; }
.mapbox.focus path.g.hit { opacity:1; }
.scale { position:absolute; left:0; bottom:0; font-size:12px; color:var(--ink3); display:flex; align-items:center; gap:6px; }
.scale i { display:block; height:4px; border:1px solid var(--ink3); border-top:0; }
.barnote { font-size:12px; color:var(--ink3); margin-top:16px; }
.bar { display:flex; height:10px; border-radius:2px; overflow:hidden; margin-top:6px; gap:2px; }
.legend { display:flex; flex-wrap:wrap; gap:4px 20px; margin-top:12px; font-size:13px; color:var(--ink2); }
.legend button { font:inherit; color:inherit; background:none; border:0; padding:2px 0; cursor:pointer; display:flex; gap:8px; align-items:baseline; }
.legend i { width:10px; height:10px; border-radius:2px; flex:none; transform:translateY(1px); }
.legend b { font-weight:500; color:var(--ink); }
.ficha-nota { font-size:14px; color:var(--ink2); margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.ficha-nota b { font-weight:500; color:var(--ink); }
.completa { font-size:13px; color:var(--ink3); margin-top:8px; }
.completa a, .ficha-link { color:var(--accent); font-weight:500; text-decoration:none; }
.completa a { white-space:nowrap; }
.completa a:hover, .ficha-link:hover { text-decoration:underline; }
.ficha-link { display:inline-block; font-size:14px; margin-top:12px; }

/* ---------- seções ---------- */
section { padding:96px 0; border-top:1px solid var(--line); }
.sec-head { display:grid; grid-template-columns:5fr 7fr; gap:48px; margin-bottom:48px; }
.sec-head p { color:var(--ink2); font-size:18px; max-width:46ch; align-self:end; }
.q { display:grid; grid-template-columns:5fr 4fr 3fr; gap:48px; padding:32px 0; border-top:1px solid var(--line); align-items:baseline; }
.q p { color:var(--ink2); }
.q .lente { font-size:14px; color:var(--ink2); }
.q .lente b { display:block; font:600 32px/1.1 var(--display); letter-spacing:-.02em; color:var(--accent); margin-bottom:4px; }
.q.breve h3 { color:var(--ink2); }
.q.breve .lente { color:var(--ink3); }

.bairros { display:grid; grid-template-columns:5fr 7fr; gap:48px; align-items:baseline; }
.bairros ul { list-style:none; border-top:1px solid var(--line); }
.bairros li { border-bottom:1px solid var(--line); }
.bairros li a { display:flex; justify-content:space-between; gap:16px; padding:16px 0; text-decoration:none; }
.bairros li a b { font:600 20px var(--display); letter-spacing:-.02em; }
.bairros li a span { color:var(--ink2); font-size:15px; }
.bairros li a:hover b { color:var(--accent); }
.bairros p { color:var(--ink2); font-size:15px; margin-top:16px; }

.fontes { display:grid; grid-template-columns:5fr 7fr; gap:48px; }
.fontes dl { display:grid; grid-template-columns:auto 1fr; gap:20px 32px; }
.fontes dt { font-weight:500; }
.fontes dd { color:var(--ink2); }
.limites { grid-column:2; font-size:14px; color:var(--ink2); padding-top:24px; border-top:1px solid var(--line); }

/* texto corrido das páginas de bairro */
.texto { display:grid; grid-template-columns:5fr 7fr; gap:48px; }
.texto .corpo { max-width:62ch; }
.texto .corpo p { color:var(--ink2); font-size:17px; }
.texto .corpo p + p { margin-top:16px; }
.texto .corpo b { color:var(--ink); font-weight:500; }

/* ---------- pedido ---------- */
.pedido { display:grid; grid-template-columns:5fr 7fr; gap:48px; }
.oferta { background:var(--surface); border:2px solid var(--accent); border-radius:14px; padding:48px; }
.oferta-para { font-size:14px; font-weight:500; color:var(--accent); margin-bottom:12px; }
.oferta-itens { list-style:none; display:grid; gap:12px; margin-top:24px; font-size:17px; }
.oferta-itens li { display:flex; gap:12px; align-items:baseline; }
.oferta-itens li::before { content:""; width:10px; height:10px; border-radius:2px; background:var(--accent); flex:none; transform:translateY(1px); }
.oferta-nota { font-size:14px; color:var(--ink3); margin-top:24px; max-width:40ch; }
form { display:grid; gap:24px; }
label, legend { font-size:14px; font-weight:500; display:block; margin-bottom:8px; }
fieldset { border:0; }
.por-email { padding-top:24px; border-top:1px solid var(--line); }
.por-email-t { display:block; font-size:14px; font-weight:500; margin-bottom:8px; }
.email-row { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }
.email-row .quiet { background:none; cursor:pointer; padding:10px 16px; white-space:nowrap; }
.email-end { font-size:15px; color:var(--ink2); }
.btn-wa, .btn-ico { display:inline-flex; align-items:center; gap:8px; }
.ico-wa { width:18px; height:18px; flex:none; }
.quiet .ico-wa { width:16px; height:16px; }
input[type=text], input[type=email] { width:100%; font:16px var(--text); color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
input[type=text]::placeholder, input[type=email]::placeholder { color:var(--ink3); }
.opts { display:flex; flex-wrap:wrap; gap:8px; }
.opt input { position:absolute; opacity:0; pointer-events:none; }
.opt span { display:block; font-size:15px; border:1px solid var(--line); border-radius:10px; padding:8px 14px; cursor:pointer; }
.opt span:hover { border-color:var(--ink3); }
.opt input:checked + span { background:var(--ink); color:var(--surface); border-color:var(--ink); }
form .btn { justify-self:start; }
.aviso { font-size:14px; color:var(--ink2); }
.aviso[hidden] { display:none; }

footer { border-top:1px solid var(--line); padding:32px 0 48px; font-size:14px; color:var(--ink3); }
footer .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer .contatos { display:flex; gap:20px; flex-wrap:wrap; }
footer a { color:var(--ink2); text-decoration:none; }
footer a:hover { color:var(--ink); text-decoration:underline; }

@media (max-width:900px) {
  .wrap { padding:0 16px; }
  h1 { font-size:40px; } h2 { font-size:32px; }
  .hero, .sec-head, .q, .fontes, .pedido, .bairros, .texto { grid-template-columns:1fr; gap:16px; }
  .hero { gap:40px; padding:16px 0 64px; }
  section { padding:64px 0; }
  .q { padding:24px 0; }
  .limites { grid-column:1; }
  .mapbox svg { height:340px; }
  .navlinks a:not(.quiet) { display:none; }
  .oferta { padding:24px 20px; gap:32px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .mapbox path.g { transition:none; } }

/* ---------- acabamento (dose média, no atributo data-acab do <html>) ---------- */
[data-acab] .ficha { box-shadow:0 1px 2px rgba(60,62,48,.05), 0 12px 32px -16px rgba(60,62,48,.18); }
[data-acab] .btn { box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(35,64,216,.28); }
[data-acab] body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-acab="media"] .hero-band { background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:24px 24px; background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(#000 60%, transparent); mask-image:linear-gradient(#000 60%, transparent); }
[data-acab="media"] .mapbox path.g-potencial { filter:drop-shadow(1px 1.5px 0 #17288F); }
[data-acab="media"] .mapbox path.g-margem { filter:drop-shadow(.5px 1px 0 #7180C9); }
.hero-wrap { position:relative; }
.hero-wrap > .wrap { position:relative; }
.hero-band { position:absolute; inset:0 0 auto 0; height:100%; pointer-events:none; }