/* ===== Perto de Tudo — sistema visual =====
   Referência: plantas cadastrais, sinalização modernista brasileira, azulejaria.
   Papel + tinta ardósia + azulejo + telha. Linhas finas, sem vidro/blur/glow. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --paper:#EFEAD9; --paper-2:#F7F4E9; --ink:#1C2B24; --ink-soft:#4B5A50;
  --azulejo:#2B5D77; --azulejo-dim:#5C8496;
  --telha:#B1522E; --verde:#3F7A5C;
  --line:#C9C0A8; --line-strong:#1C2B24;
  --max:1180px; --gap:22px;
  --font-display:'Space Grotesk',Arial,sans-serif;
  --font-body:'Source Serif 4',Georgia,serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--font-body)}
a{color:var(--azulejo);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--telha)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--telha);outline-offset:2px}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin-inline:auto;padding:0 22px}
.small{font-size:.9rem;font-family:var(--font-mono)}
.muted{color:var(--ink-soft)}
.section{padding:76px 0;border-top:1px solid var(--line)}
.section-tight{padding:40px 0}
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* Tipografia */
.title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,1.2rem + 2.6vw,3.6rem);line-height:1.04;letter-spacing:-.01em;margin:0 0 14px;color:var(--ink)}
.subtitle{font-family:var(--font-body);font-style:italic;font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);color:var(--ink-soft);margin:0 0 14px;max-width:52ch}
.lead{font-size:1.05rem;color:var(--ink);max-width:62ch}
.h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,1.2rem + 1.1vw,2.3rem);line-height:1.1;margin:0 0 12px;letter-spacing:-.005em}
.h3{font-family:var(--font-display);font-weight:600;font-size:1.08rem;line-height:1.3;margin:0 0 8px}
.eyebrow{display:flex;gap:10px;align-items:center;font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;color:var(--telha);font-weight:600;margin-bottom:14px}
.eyebrow:before{content:"§";font-family:var(--font-mono)}

/* Botões */
.btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--paper-2);font-family:var(--font-display);font-weight:600;font-size:.95rem;padding:.85rem 1.3rem;border:1px solid var(--ink);border-radius:2px;transition:background .15s,color .15s;cursor:pointer}
.btn:hover{background:var(--telha);border-color:var(--telha);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn.ghost:hover{background:var(--ink);color:var(--paper-2)}

/* Marcadores de canto (estilo ponto de levantamento topográfico) */
.tick{position:relative}
.tick:before,.tick:after{content:"";position:absolute;width:9px;height:9px;border:1.4px solid var(--azulejo)}
.tick:before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.tick:after{bottom:-1px;right:-1px;border-left:none;border-top:none}

.card,.panel,.impact-card,.result-box{background:var(--paper-2);border:1px solid var(--line);border-radius:0;padding:22px}
.card{background:var(--paper-2)}

/* Header / nav */
header{position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--line-strong);z-index:50}
nav{display:flex;align-items:center;justify-content:space-between;min-height:66px;gap:16px}
.brand{display:flex;gap:.7rem;align-items:center}
.logo{width:132px;height:36px}
.brand span{display:none}
.menu{display:flex;gap:4px;flex-wrap:wrap}
.menu a{padding:8px 12px;font-family:var(--font-mono);font-size:.84rem;letter-spacing:.02em;color:var(--ink);border-bottom:2px solid transparent}
.menu a:hover,.menu a.active{color:var(--telha);border-bottom-color:var(--telha)}
.burger{display:none;background:transparent;color:var(--ink);border:1px solid var(--line-strong);width:38px;height:38px}
@media(max-width:920px){
  .menu{display:none}
  .menu.open{display:flex;flex-direction:column;position:absolute;left:22px;right:22px;top:64px;background:var(--paper-2);border:1px solid var(--line-strong);padding:8px}
  .menu.open a{padding:12px 8px;border-bottom:1px solid var(--line)}
  .burger{display:inline-flex;align-items:center;justify-content:center}
}

/* Hero */
.hero{display:grid;gap:30px;padding:56px 0 30px}
.hero-grid{display:grid;gap:36px;align-items:start}
@media(min-width:940px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.chip{display:inline-flex;gap:.4rem;align-items:center;font-family:var(--font-mono);background:transparent;border:1px solid var(--line-strong);color:var(--ink);padding:.3rem .7rem;font-size:.76rem;letter-spacing:.02em}

/* Painel de estatísticas — numerais mono, sem cartões arredondados */
.hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line-strong);margin-top:0}
.mini-stat{padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.mini-stat:nth-child(2n){border-right:none}
.mini-stat .big{font-family:var(--font-mono);font-size:1.7rem;font-weight:600;color:var(--ink)}
.kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line-strong)}
@media(min-width:900px){.kpi{grid-template-columns:repeat(4,1fr)}}
.kpi .box{padding:22px;text-align:left;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpi .h{font-family:var(--font-mono);font-size:1.9rem;font-weight:600;color:var(--ink);margin-bottom:4px}

.grid-2{display:grid;gap:36px}
@media(min-width:940px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;gap:18px}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}

.list,.checklist{display:grid;gap:10px;margin:14px 0 0;padding:0}
.list li,.checklist li{list-style:none;position:relative;padding-left:22px;color:var(--ink)}
.list li:before,.checklist li:before{content:"—";position:absolute;left:0;top:0;color:var(--telha);font-weight:700}

.impact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line-strong)}
.impact-card{background:var(--paper-2)}
.impact-card h3{margin-top:0;font-family:var(--font-display);color:var(--azulejo)}
.impact-card ul{margin:0;padding-left:18px;font-size:.95rem;color:var(--ink-soft)}

.timeline{display:grid;gap:0;border-top:1px solid var(--line-strong)}
.step{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.badge-year{font-family:var(--font-mono);font-weight:600;color:var(--azulejo)}

.diagram{display:grid;gap:1px;background:var(--line);border:1px solid var(--line-strong);grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:18px}
.node{padding:18px;background:var(--paper-2)}
.node .num{font-family:var(--font-mono);font-weight:700;color:var(--telha);display:block;margin-bottom:10px}

.quote{font-family:var(--font-body);font-style:italic;font-size:1.15rem;line-height:1.55;color:var(--ink);padding:24px;border-left:3px solid var(--telha);background:var(--paper-2)}

.footer{padding:36px 0;border-top:1px solid var(--line-strong);color:var(--ink-soft);font-size:.92rem}
.footer-links{display:grid;gap:6px}
.footer-grid{display:grid;gap:18px;grid-template-columns:1.3fr .7fr;align-items:start}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr}}

.page-hero{padding:48px 0 18px}
.subnav{display:flex;gap:0;flex-wrap:wrap;margin-top:16px;border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong)}
.subnav a{padding:8px 14px;border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);font-family:var(--font-mono);font-size:.82rem;color:var(--ink)}
.subnav a:hover{background:var(--paper-2);color:var(--telha)}

.reveal{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.reveal.show{opacity:1;transform:none}

/* Módulos (grade de quadras) */
.city-block{margin-top:18px}
.city-block h4{margin:0;padding:10px 14px;font-family:var(--font-mono);color:var(--paper-2);background:var(--ink);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}
.module-list{display:grid;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0}
.module-list .mod{display:flex;gap:10px;align-items:center;background:var(--paper-2);padding:13px 14px;font-size:.92rem;color:var(--ink)}
.module-list .mod.pilot{background:var(--ink);color:var(--paper-2)}
.module-list .mod .tag-pilot{margin-left:auto;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;background:var(--telha);color:#fff;padding:.2rem .5rem}

.instituto-card{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;background:var(--paper-2);border:1px solid var(--line-strong);padding:30px}
.pilot-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);border:1px solid var(--line-strong);color:var(--ink);padding:.35rem .75rem;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px}
.cta-band{background:var(--ink);color:var(--paper-2);border:1px solid var(--ink);padding:44px 32px;text-align:center}
.cta-band .h2,.cta-band .eyebrow{color:var(--paper-2)}
.cta-band .lead{color:#d7d2c2;margin-inline:auto}
.cta-band .btn{margin-top:10px;background:var(--telha);border-color:var(--telha);color:#fff}
.cta-band .btn:hover{background:var(--paper-2);border-color:var(--paper-2);color:var(--ink)}

/* Diagramas assinatura: grade de quadras + planta baixa proporcional */
.grid-signature{border:1px solid var(--line-strong);padding:18px;background:var(--paper-2)}
.grid-signature svg{width:100%;height:auto;display:block}
.blueprint{border:1px solid var(--line-strong);background:var(--paper-2);padding:22px}
.blueprint svg{width:100%;height:auto;display:block}
.blueprint-legend{display:grid;gap:8px;margin-top:16px;font-family:var(--font-mono);font-size:.82rem}
.blueprint-legend .row{display:flex;align-items:center;gap:10px}
.blueprint-legend .swatch{width:14px;height:14px;flex:0 0 14px}

/* Formulário */
input,select{font-family:var(--font-body);font-size:1rem}
input:focus,select:focus{border-color:var(--azulejo)!important}

/* Apoiadores */
.supporter-card{display:grid;gap:24px;grid-template-columns:200px 1fr;align-items:center;background:var(--paper-2);border:1px solid var(--line-strong);padding:26px}
@media(max-width:700px){.supporter-card{grid-template-columns:1fr}}
.supporter-logo{background:#fff;border:1px solid var(--line);padding:14px;display:flex;align-items:center;justify-content:center}
.supporter-logo img{max-width:100%;height:auto;display:block}
.support-cta{margin-top:24px;border:1px dashed var(--line-strong);padding:24px;background:transparent}
.support-cta h3{margin-top:0}

@media(max-width:760px){.hero-stats{grid-template-columns:1fr 1fr}}