:root{
  --primaria:#334494;
  --primaria-escura:#1c2758;
  --primaria-clara:#4c5db8;
  --dourado:#e8c54a;
  --dourado-escuro:#c9a233;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Segoe UI',Arial,Tahoma,sans-serif;background:#f3f5fb;color:#1c1f2b;}
a{text-decoration:none;}
.container{max-width:720px;margin:0 auto;padding:0 20px;}

/* topo */
.topbar{background:linear-gradient(135deg,var(--primaria-escura),var(--primaria));color:#fff;padding:14px 0;}
.topbar .container{display:flex;align-items:center;gap:12px;}
.topbar img{height:44px;width:44px;border-radius:50%;background:#fff;padding:3px;}
.topbar .nome{font-size:13px;line-height:1.3;opacity:.9;}
.topbar .nome b{display:block;font-size:16px;}

/* hero */
.hero{background:linear-gradient(135deg,var(--primaria-escura),var(--primaria) 60%,var(--primaria-clara));color:#fff;padding:44px 0 60px;text-align:center;}
.hero h1{font-size:26px;margin:0 0 10px;}
.hero p{font-size:15px;opacity:.92;margin:0 auto 26px;max-width:480px;line-height:1.5;}
.hero .selo{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;padding:8px 16px;border-radius:999px;font-size:13px;margin-bottom:18px;}
.hero .selo i{color:var(--dourado);}
.hero.hero-compacta{padding:34px 0 46px;}

.botoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding:0 16px;}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;border:none;border-radius:12px;padding:16px 22px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;}
.btn:active{transform:scale(.98);}
.btn-primario{background:var(--dourado);color:var(--primaria-escura);box-shadow:0 8px 20px rgba(232,197,74,.4);}
.btn-primario:hover{background:var(--dourado-escuro);}
.btn-secundario{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.5);}
.btn-secundario:hover{background:rgba(255,255,255,.22);}
.btn-bloco{width:100%;}

/* selos de confiança */
.confianca{margin-top:-30px;position:relative;z-index:2;}
.confianca .cards{display:flex;gap:10px;}
.confianca .card{flex:1;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(28,39,88,.12);padding:16px 8px;text-align:center;}
.confianca .card i{font-size:22px;color:var(--primaria);margin-bottom:6px;display:block;}
.confianca .card span{font-size:12px;color:#5a6072;display:block;line-height:1.3;}

/* wizard */
#wizardwrap{display:none;padding:30px 0 60px;}
.progresso{display:flex;justify-content:space-between;margin-bottom:22px;gap:6px;}
.progresso .etapa{flex:1;height:6px;border-radius:6px;background:#dfe3f0;}
.progresso .etapa.ativa,.progresso .etapa.feita{background:var(--primaria);}

.painel{background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(28,39,88,.12);padding:24px 20px;margin-bottom:16px;}
.painel h2{font-size:19px;margin:0 0 4px;color:var(--primaria-escura);}
.painel .sub{font-size:13px;color:#5a6072;margin:0 0 20px;}

.grid-tipos{display:flex;flex-wrap:wrap;gap:10px;}
.grid-tipos .tipo-card{flex:1 1 calc(50% - 10px);}
.tipo-card{border:2px solid #e3e7f3;border-radius:14px;padding:14px 10px;text-align:center;cursor:pointer;background:#fafbff;transition:.15s;}
.tipo-card i{font-size:20px;color:var(--primaria);display:block;margin-bottom:6px;}
.tipo-card span{font-size:13px;font-weight:600;line-height:1.25;display:block;}
.tipo-card.selecionado{border-color:var(--dourado);background:#fff9e8;}
.tipo-obs{background:#eef1fb;border-left:4px solid var(--primaria);border-radius:8px;padding:10px 12px;font-size:13px;color:#5a6072;margin-top:14px;display:none;}

label.campo{display:block;font-size:13px;font-weight:600;color:#1c1f2b;margin:16px 0 6px;}
select.form-c, textarea.form-c, input.form-c{width:100%;border:2px solid #e3e7f3;border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;background:#fafbff;}
select.form-c:focus, textarea.form-c:focus, input.form-c:focus{outline:none;border-color:var(--primaria);background:#fff;}
textarea.form-c{resize:vertical;min-height:90px;}
.dica{font-size:12px;color:#5a6072;margin-top:4px;}

.aviso-anonimo{background:#fff9e8;border:1px dashed var(--dourado-escuro);border-radius:12px;padding:14px;font-size:13px;color:#6b551a;margin-top:6px;}
.aviso-anonimo i{color:var(--dourado-escuro);margin-right:6px;}

.iframe-anexo{width:100%;border:none;border-radius:12px;overflow:hidden;height:260px;background:#fafbff;border:2px dashed #dfe3f0;}

.nav-wizard{display:flex;gap:10px;margin-top:18px;}
.nav-wizard .btn{flex:1;}
.btn-voltar{background:#eef1fb;color:var(--primaria-escura);}
.btn-voltar:hover{background:#e1e6f7;}

.passo{display:none;}
.passo.ativo{display:block;}

.rodape-legal{text-align:center;font-size:11px;color:#5a6072;padding:20px 20px 40px;line-height:1.6;}

/* acompanhar modal simples */
#modalAcompanhar{display:none;position:fixed;inset:0;background:rgba(20,25,50,.55);z-index:50;align-items:center;justify-content:center;padding:20px;}
#modalAcompanhar .caixa{background:#fff;border-radius:16px;padding:24px;max-width:360px;width:100%;text-align:center;}
#modalAcompanhar h3{margin:0 0 10px;color:var(--primaria-escura);}
#modalAcompanhar .fechar{position:absolute;top:14px;right:18px;font-size:22px;color:#fff;cursor:pointer;}

/* tela de agradecimento */
.sucesso-icone{width:76px;height:76px;border-radius:50%;background:rgba(232,197,74,.18);border:2px solid var(--dourado);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.sucesso-icone i{font-size:34px;color:var(--dourado);}
.protocolo-box{background:#fff;border-radius:16px;padding:18px;margin:18px 0;text-align:center;}
.protocolo-box .rotulo{font-size:12px;color:#5a6072;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.protocolo-box .numero{font-size:22px;font-weight:700;color:var(--primaria-escura);letter-spacing:.02em;word-break:break-all;}
.protocolo-box button{margin-top:10px;background:#eef1fb;border:none;border-radius:8px;padding:8px 14px;font-size:13px;color:var(--primaria);cursor:pointer;}

/* tela de acompanhamento */
.status-badge{display:inline-flex;align-items:center;gap:6px;background:#eef1fb;color:var(--primaria);font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;margin-bottom:10px;}
.linha-info{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #eef1fb;font-size:14px;}
.linha-info:last-child{border-bottom:none;}
.linha-info .rot{color:#5a6072;}
.linha-info .val{font-weight:600;text-align:right;}
.texto-bloco{background:#fafbff;border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.5;margin-top:6px;white-space:pre-wrap;}
.resposta-item{border-left:3px solid var(--primaria);background:#fafbff;border-radius:0 10px 10px 0;padding:10px 14px;margin-bottom:10px;}
.resposta-item.do-cidadao{border-left-color:var(--dourado);}
.resposta-item .data{font-size:11px;color:#5a6072;margin-bottom:4px;}
.anexo-item{display:flex;align-items:center;gap:10px;background:#fafbff;border:1px solid #e3e7f3;border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:13px;}
.anexo-item i{color:var(--primaria);}
.anexo-item .btn{padding:6px 12px;font-size:12px;}
.mapa-box{border-radius:12px;overflow:hidden;border:1px solid #e3e7f3;margin-top:10px;}

@media (min-width:600px){
  .grid-tipos .tipo-card{flex:1 1 calc(33.333% - 10px);}
}