:root{
  --bg:#0b0b0c; --painel:#121214; --card:#1b1b1f; --txt:#f2f2f2; --mut:#a3a3ab;
  --dest:#ffd25a; --verde:#1fc15a; --borda:#2a2a30;
  --edu:#e3a008; --saude:#d63a3a; --infra:#2a62d6; --out:#13a06f;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.45}
a{color:var(--txt)}
[hidden]{display:none!important}
.view{min-height:100vh}

/* home */
#home,#metodologia{max-width:760px;margin:0 auto;padding:0 16px 40px}
.hero{padding:56px 0 24px}
.hero h1{font-size:clamp(30px,6vw,48px);line-height:1.05;margin:0 0 12px}
.hero h1 span{color:var(--dest)}
.lead{color:var(--mut);font-size:18px;margin:0 0 20px}
.search{position:relative}
.search input{width:100%;padding:16px 18px;font-size:18px;border-radius:12px;border:1px solid var(--borda);background:var(--card);color:var(--txt)}
.search input:focus{outline:2px solid var(--dest)}
#sugestoes{position:absolute;left:0;right:0;top:100%;margin:6px 0 0;padding:0;list-style:none;background:var(--card);border:1px solid var(--borda);border-radius:12px;overflow:hidden;z-index:10;max-height:320px;overflow-y:auto}
#sugestoes li a{display:flex;justify-content:space-between;padding:12px 18px;text-decoration:none}
#sugestoes li a:hover,#sugestoes li a.sel{background:#26262c}
#sugestoes small{color:var(--mut)}
.exemplos{color:var(--mut);font-size:15px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:12px 0 28px}
.stat{background:var(--card);border-radius:14px;padding:18px}
.stat > b{display:block;font-size:34px;color:var(--dest)}
.stat span{color:var(--mut);font-size:14px}
.card{background:var(--card);border-radius:14px;padding:22px;margin-bottom:20px}
.card h2{margin-top:0}
.texto h1{margin-top:0}
form label{display:block;margin-bottom:14px;font-weight:600}
form input,form select,form textarea{display:block;width:100%;margin-top:6px;padding:12px;border-radius:10px;border:1px solid var(--borda);background:var(--bg);color:var(--txt);font:inherit;font-weight:400}
form button{background:var(--dest);color:#111;border:0;padding:12px 24px;border-radius:10px;font-weight:700;font-size:16px;cursor:pointer}
.nota{color:var(--mut);font-size:13px}
footer{text-align:center;color:var(--mut);padding:12px}

/* cidade */
#cidade{display:flex;flex-direction:column;height:100vh}
.topbar{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;background:#000;font-size:15px}
.topbar a{font-size:14px;color:var(--mut)}
.split{flex:1;display:grid;grid-template-columns:minmax(360px,800px) 1fr;min-height:0}
.painel{background:var(--painel);display:flex;flex-direction:column;min-height:0}
.segmentos{display:flex;gap:6px;padding:10px 50px 0 50px}
.segmentos button{flex:1;border:0;background:none;color:var(--mut);font-size:12px;font-weight:600;padding:0;cursor:pointer;text-align:left}
.segmentos button::before{content:"";display:block;height:3px;background:#444;margin-bottom:8px;border-radius:2px}
.segmentos button.on{color:var(--txt)}
.segmentos button.on::before{background:#fff}
.conteudo{flex:1;overflow-y:auto;padding:20px 50px 40px}
.conteudo h2{font-size:20px;margin:0 0 10px}
.mut{color:var(--mut)}
.numerao{font-size:clamp(64px,10vw,104px);font-weight:900;color:var(--dest);line-height:1;margin:18px 0 4px}
.rotulo{font-size:20px;font-weight:700;margin-bottom:18px}
.alem{font-size:11px;letter-spacing:.08em;color:var(--dest);font-weight:800;margin:22px 0 6px}
.manchete{font-size:20px;font-weight:800;margin:0 0 14px}
.noticia{background:#fff;color:#111;border-radius:12px;padding:16px 18px}
.noticia .meta{display:flex;justify-content:space-between;font-size:12px;font-weight:800;text-transform:uppercase;color:#555;margin-bottom:8px}
.noticia h3{margin:0 0 8px;font-size:19px;line-height:1.2}
.noticia p{margin:0 0 12px;color:#333;font-size:15px}
.noticia .rod{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:#666}
.noticia .rod a{border:1px solid #111;color:#111;border-radius:20px;padding:6px 14px;font-weight:700;text-decoration:none;white-space:nowrap}
.pager{display:flex;justify-content:center;align-items:center;gap:14px;margin:14px 0;font-size:13px}
.pager button{width:34px;height:34px;border-radius:50%;border:1px solid #555;background:#222;color:#fff;cursor:pointer;font-size:16px}
.zap{display:block;text-align:center;background:#25d366;color:#04230f;font-weight:800;padding:15px;border-radius:30px;text-decoration:none;font-size:18px;margin-top:8px}
.lista{list-style:none;margin:0;padding:0}
.lista li{background:var(--card);border-radius:10px;padding:12px 14px;margin-bottom:8px;font-size:14px}
.lista b{display:block;margin-bottom:2px}
.pill{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:10px;margin-right:6px;color:#fff}
.legenda{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--mut);margin:10px 0 16px}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
#mapa{height:100%;min-height:300px;background:#dfe3e6}
.pin{border-radius:50%;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.85)}

@media(max-width:900px){
  #cidade{height:auto}
  .split{grid-template-columns:1fr;grid-template-rows:55vh auto}
  #mapa{order:-1;height:55vh}
  .segmentos,.conteudo{padding-left:16px;padding-right:16px}
}
.noticia .st{display:inline-block;background:#eee;color:#333;font-size:11px;font-weight:800;border-radius:10px;padding:2px 9px;margin-bottom:8px}