*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;background:#f0f4f8;color:#222;line-height:1.6}
header{background:linear-gradient(135deg,#009c3b,#002776);color:#fff;padding:20px 0;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.container-header{max-width:1100px;margin:auto;padding:0 20px}
header h1{font-size:1.8rem}header p{font-size:.95rem;opacity:.9;margin-bottom:10px}
header nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
header nav a{color:#fff;text-decoration:none;background:rgba(255,255,255,.15);padding:8px 14px;border-radius:20px;font-size:.9rem;transition:.2s}
header nav a:hover{background:rgba(255,255,255,.3)}
.container{max-width:900px;margin:30px auto;padding:0 20px}
.filtros{background:#fff;padding:15px;border-radius:10px;margin-bottom:20px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.filtros form{display:flex;flex-wrap:wrap;gap:10px}
.filtros input,.filtros select,.filtros button{padding:10px;border:1px solid #ccc;border-radius:6px;font-size:.95rem}
.filtros input[type=text]{flex:1;min-width:180px}
.filtros button{background:#002776;color:#fff;border:none;cursor:pointer;padding:10px 20px}
.filtros button:hover{background:#001a4d}
.card{background:#fff;border-radius:12px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,.07);border-left:5px solid #009c3b}
.card-head{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.cat,.nivel,.status{font-size:.8rem;padding:4px 10px;border-radius:12px;font-weight:600}
.cat{background:#e6f4ea;color:#006b25}.nivel{background:#fff4d6;color:#8a6d00}
.status.s-recebido{background:#e3e3e3;color:#333}.status.s-analise{background:#fff0c2;color:#8a6d00}
.status.s-andamento{background:#cfe4ff;color:#004a99}.status.s-resolvido{background:#c8f7d4;color:#006b25}
.status.s-arquivado{background:#eee;color:#666}
.card h2{font-size:1.2rem;margin-bottom:6px}.card h3{font-size:1.1rem;margin-bottom:6px}
.meta{font-size:.85rem;color:#666;margin-bottom:10px}
.galeria{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.galeria img{width:110px;height:110px;object-fit:cover;border-radius:8px;cursor:pointer;transition:.2s}
.galeria img:hover{transform:scale(1.05)}
.resposta{background:#eef6ff;border-left:4px solid #002776;padding:10px 15px;border-radius:6px;margin:10px 0}
.acoes{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.btn-apoio,.btn-coment{padding:10px 18px;border:none;border-radius:25px;cursor:pointer;font-weight:600;font-size:.9rem;text-decoration:none;display:inline-block}
.btn-apoio{background:#ffdf00;color:#000}.btn-apoio:hover{background:#ffcc00}
.btn-apoio:disabled{background:#c8f7d4;color:#006b25;cursor:default}
.btn-coment{background:#002776;color:#fff}.btn-coment:hover{background:#001a4d}
.form-grande{background:#fff;padding:20px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.07);margin-bottom:15px}
.form-grande label{display:block;margin:12px 0 5px;font-weight:600}
.form-grande input,.form-grande select,.form-grande textarea{width:100%;padding:11px;border:1px solid #ccc;border-radius:8px;font-size:1rem;font-family:inherit}
.form-grande button{margin-top:15px;background:#009c3b;color:#fff;border:none;padding:13px 26px;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600}
.form-grande button:hover{background:#007a2e}
.erro,.aviso{background:#fff3cd;border-left:4px solid #ffc107;padding:10px 15px;border-radius:6px;margin-bottom:15px}
.erro{background:#f8d7da;border-color:#dc3545}
.vazio{text-align:center;padding:40px;color:#666}
.comentario{background:#fff;padding:15px;border-radius:10px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.comentario small{color:#999;font-size:.8rem;display:block;margin:3px 0 8px}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);justify-content:center;align-items:center;z-index:999}
.modal img{max-width:90%;max-height:90%;border-radius:10px}
footer{text-align:center;padding:30px;color:#666;font-size:.9rem}
@media(max-width:600px){header h1{font-size:1.4rem}.galeria img{width:80px;height:80px}}




/* Seletor de cidade */
.seletor-cidade{background:linear-gradient(135deg,#e6f4ea,#eef6ff);padding:20px;border-radius:12px;margin-bottom:20px;border-left:5px solid #009c3b}
.seletor-cidade h3{font-size:1rem;margin-bottom:12px;color:#002776}
.form-cidade{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.form-cidade select{padding:11px 15px;border:1px solid #ccc;border-radius:8px;font-size:.95rem;background:#fff;min-width:220px}
.btn-todos{background:#002776;color:#fff;text-decoration:none;padding:11px 18px;border-radius:8px;font-size:.9rem;font-weight:600}
.btn-todos:hover{background:#001a4d}
.local-atual{margin-top:10px;font-size:.9rem;color:#006b25}

/* Botões de tipo */
.tipos{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px}
.btn-tipo{padding:10px 18px;border-radius:25px;background:#fff;color:#333;text-decoration:none;font-weight:600;font-size:.9rem;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:.2s;border:2px solid transparent}
.btn-tipo:hover{transform:translateY(-2px)}
.btn-tipo.ativo{border-color:#002776;box-shadow:0 4px 10px rgba(0,39,118,.2)}
.btn-tipo.t-reclamacao{background:#ffe5e5;color:#b30000}
.btn-tipo.t-sugestao{background:#fff8d6;color:#8a6d00}
.btn-tipo.t-melhoria{background:#e0f7e9;color:#006b25}

/* Botões de categoria */
.categorias{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.btn-cat{padding:8px 14px;border-radius:20px;background:#f4f6f8;color:#333;text-decoration:none;font-size:.85rem;font-weight:600;transition:.2s;border:1px solid #ddd}
.btn-cat:hover{background:#e6f4ea;border-color:#009c3b}
.btn-cat.ativo{background:#009c3b;color:#fff;border-color:#009c3b}

/* Badge de tipo no card */
.tipo{padding:4px 12px;border-radius:12px;font-size:.8rem;font-weight:700}
.tipo.t-reclamacao{background:#ffe5e5;color:#b30000}
.tipo.t-sugestao{background:#fff8d6;color:#8a6d00}
.tipo.t-melhoria{background:#e0f7e9;color:#006b25}

/* Borda colorida por tipo */
.card.card-reclamacao{border-left-color:#b30000}
.card.card-sugestao{border-left-color:#ffc107}
.card.card-melhoria{border-left-color:#009c3b}

.resumo{background:#fff;padding:12px 18px;border-radius:8px;margin-bottom:15px;font-size:.9rem;box-shadow:0 1px 4px rgba(0,0,0,.05)}




/* ===== PÁGINA COMO FUNCIONA ===== */
.hero-como{background:linear-gradient(135deg,#009c3b,#002776);color:#fff;padding:50px 30px;border-radius:16px;text-align:center;margin-bottom:30px}
.hero-como h1{font-size:2rem;margin-bottom:10px}
.hero-como p{font-size:1.05rem;opacity:.95;max-width:700px;margin:0 auto}

.bloco{background:#fff;padding:30px;border-radius:14px;margin-bottom:25px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.bloco h2{font-size:1.4rem;color:#002776;margin-bottom:18px;border-bottom:3px solid #009c3b;padding-bottom:10px;display:inline-block}
.bloco p{font-size:1rem;margin-bottom:12px;color:#333}
.destaque{background:#e6f4ea;border-left:5px solid #009c3b;padding:12px 18px;border-radius:8px;font-size:1rem!important;margin-top:15px!important}

.lista-check,.lista-x{list-style:none;padding:0}
.lista-check li,.lista-x li{padding:8px 0;font-size:1rem;border-bottom:1px dashed #eee}
.lista-x li{color:#b30000}

/* Passos numerados */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:10px}
.passo{background:#f8fafc;border-radius:12px;padding:20px;position:relative;border-top:4px solid #009c3b;transition:.2s}
.passo:hover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(0,156,59,.15)}
.passo .num{position:absolute;top:-18px;left:20px;background:#009c3b;color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;box-shadow:0 3px 8px rgba(0,156,59,.4)}
.passo h3{font-size:1.05rem;color:#002776;margin:10px 0 8px}
.passo p{font-size:.92rem;color:#555;margin:0}

/* Tipos explicados */
.tipos-explica{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.tipo-card{padding:22px;border-radius:12px;border-left:6px solid}
.tipo-card h3{font-size:1.15rem;margin-bottom:10px}
.tipo-card p{font-size:.95rem}
.tipo-card .ex{background:rgba(255,255,255,.6);padding:8px 12px;border-radius:6px;font-size:.88rem;font-style:italic;margin-top:8px!important}
.tipo-card.t-reclamacao{background:#ffe5e5;border-color:#b30000}
.tipo-card.t-reclamacao h3{color:#b30000}
.tipo-card.t-sugestao{background:#fff8d6;border-color:#ffc107}
.tipo-card.t-sugestao h3{color:#8a6d00}
.tipo-card.t-melhoria{background:#e0f7e9;border-color:#009c3b}
.tipo-card.t-melhoria h3{color:#006b25}

/* Grid categorias */
.grid-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:10px}
.cat-item{background:#f4f6f8;padding:14px;border-radius:10px;text-align:center;font-weight:600;font-size:.95rem;border:2px solid #e6f4ea;transition:.2s}
.cat-item:hover{background:#e6f4ea;border-color:#009c3b;transform:scale(1.03)}

/* Tabela níveis */
.tabela-niveis{width:100%;border-collapse:collapse;margin-top:12px;border-radius:10px;overflow:hidden}
.tabela-niveis th{background:#002776;color:#fff;padding:12px;text-align:left;font-size:.95rem}
.tabela-niveis td{padding:12px;border-bottom:1px solid #eee;font-size:.95rem}
.tabela-niveis tr:nth-child(even) td{background:#f8fafc}
.tabela-niveis tr:hover td{background:#e6f4ea}

/* Status explicado */
.status-explica{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.st-item{background:#f8fafc;padding:12px 18px;border-radius:10px;font-size:.95rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* FAQ */
.faq{background:#f8fafc;padding:14px 18px;border-radius:10px;margin-bottom:10px;cursor:pointer;border-left:4px solid #009c3b}
.faq summary{font-weight:600;color:#002776;font-size:1rem;cursor:pointer}
.faq[open]{background:#e6f4ea}
.faq p{margin-top:10px;color:#444;font-size:.95rem}

/* CTA final */
.cta-final{background:linear-gradient(135deg,#002776,#009c3b);color:#fff;padding:50px 30px;border-radius:16px;text-align:center;margin-top:30px}
.cta-final h2{font-size:1.7rem;margin-bottom:12px;color:#fff;border:none}
.cta-final p{font-size:1.05rem;margin-bottom:25px;opacity:.95}
.cta-botoes{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}
.btn-cta,.btn-cta-sec{padding:14px 30px;border-radius:30px;text-decoration:none;font-weight:700;font-size:1rem;transition:.2s;display:inline-block}
.btn-cta{background:#ffdf00;color:#000}
.btn-cta:hover{background:#ffcc00;transform:scale(1.05)}
.btn-cta-sec{background:rgba(255,255,255,.15);color:#fff;border:2px solid #fff}
.btn-cta-sec:hover{background:#fff;color:#002776}

footer a{color:#009c3b;text-decoration:none;margin:0 6px}
footer a:hover{text-decoration:underline}

@media(max-width:600px){
  .hero-como h1{font-size:1.5rem}
  .bloco{padding:20px}
  .bloco h2{font-size:1.15rem}
  .cta-final h2{font-size:1.3rem}
}