/* =====================================================================
   Portal do Cidadão — estilos da página pública
   ===================================================================== */

/* ---------------- Cabeçalho ---------------- */
.topo{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topo__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:76px; }
.topo__nav{ display:flex; align-items:center; gap:26px; }
.topo__nav a{
  color:var(--ink-2); font-size:14.5px; font-weight:600; text-decoration:none;
  transition:color var(--t);
}
.topo__nav a:hover{ color:var(--navy); text-decoration:none; }
@media (max-width:860px){ .topo__nav a:not(.btn){ display:none; } .topo__in{ height:68px; } }

/* ---------------- Hero ---------------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(1100px 480px at 88% -8%, rgba(95,178,70,.42), transparent 62%),
    radial-gradient(700px 420px at 6% 108%, rgba(30,111,217,.42), transparent 60%),
    linear-gradient(150deg, var(--navy-900) 0%, var(--navy) 55%, #12408F 100%);
}
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:70px;
  background:var(--bg);
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
}
.hero__in{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding:76px 22px 104px;
}
@media (max-width:940px){
  .hero__in{ grid-template-columns:1fr; gap:38px; padding:56px 22px 88px; text-align:center; }
}

.hero h1{
  color:#fff; font-size:clamp(1.7rem, 6.5vw, 3.35rem); font-weight:850; letter-spacing:-.035em;
  margin:18px 0 18px;
}
.hero h1 em{ font-style:normal; color:#9FDD83; }
.hero__lead{
  font-size:17.5px; line-height:1.72; color:rgba(255,255,255,.87); max-width:56ch;
  margin-bottom:30px;
}
@media (max-width:940px){ .hero__lead{ margin-inline:auto; } }
@media (max-width:480px){ .hero__lead{ font-size:15.5px; } }

.hero__selo{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px 7px 9px; border-radius:999px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22);
  font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#fff;
}
.hero__selo .ico{ width:16px; height:16px; color:#9FDD83; }

.hero__acoes{ display:flex; gap:13px; flex-wrap:wrap; }
@media (max-width:940px){ .hero__acoes{ justify-content:center; } }

.hero__pilares{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:38px;
  padding-top:28px; border-top:1px solid rgba(255,255,255,.16);
}
@media (max-width:940px){ .hero__pilares{ justify-content:center; } }
.pilar{
  display:flex; align-items:center; gap:9px;
  font-size:13px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.pilar .ico{ width:17px; height:17px; color:#9FDD83; }
.pilar + .pilar{ padding-left:12px; border-left:1px solid rgba(255,255,255,.2); }

/* Cartão lateral do hero */
.herocard{
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.19);
  border-radius:var(--r-xl); padding:30px; backdrop-filter:blur(8px);
  box-shadow:0 24px 60px rgba(6,22,52,.34); text-align:left;
}
.herocard h3{ color:#fff; font-size:17px; margin-bottom:20px; }
.passo{ display:flex; gap:15px; padding:13px 0; }
.passo + .passo{ border-top:1px solid rgba(255,255,255,.13); }
.passo__n{
  width:32px; height:32px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:var(--green); color:#fff; font-size:14px; font-weight:800;
}
.passo b{ display:block; color:#fff; font-size:14.5px; font-weight:700; }
.passo span{ font-size:13.2px; color:rgba(255,255,255,.72); line-height:1.55; }

/* ---------------- Seções ---------------- */
.secao{ padding:74px 0; }
.secao--form{ padding-top:30px; }
.secao__topo{ text-align:center; max-width:660px; margin:0 auto 44px; }
.secao__topo h2{ font-size:clamp(1.4rem,5vw,2.15rem); margin:14px 0 12px; }
.secao__topo p{ color:var(--ink-2); font-size:16.5px; }

/* Faixa de confiança */
.faixa{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:860px){ .faixa{ grid-template-columns:1fr; } }
.faixa .card{ padding:26px; }
.faixa .ico{ width:24px; height:24px; color:var(--green-700); margin-bottom:12px; }
.faixa h4{ font-size:16px; margin-bottom:7px; }
.faixa p{ font-size:14.2px; color:var(--ink-2); }

/* ---------------- Formulário ---------------- */
.formcard{
  max-width:880px; margin-inline:auto; padding:0; overflow:hidden;
  box-shadow:var(--sh-2);
}
.formcard__head{
  padding:28px 34px; border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#FBFDFF,#fff);
}
.formcard__head h2{ font-size:21px; }
.formcard__head p{ color:var(--ink-2); font-size:14.5px; margin:6px 0 0; }
.formcard__body{ padding:32px 34px; }
.formcard__foot{
  padding:24px 34px 30px; border-top:1px solid var(--line-2); background:#FBFDFF;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.formcard__foot small{ color:var(--muted); font-size:12.8px; max-width:46ch; }
@media (max-width:640px){
  .formcard__body, .formcard__head, .formcard__foot{ padding-inline:20px; }
}

.bloco__titulo{
  display:flex; align-items:center; gap:11px; margin:0 0 20px;
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-700);
}
.bloco__titulo::after{ content:''; flex:1; height:1px; background:var(--line); }
.bloco + .bloco{ margin-top:38px; }

/* ---------------- Sucesso ---------------- */
.sucesso{ text-align:center; padding:12px 8px 6px; }
.sucesso__icone{
  width:76px; height:76px; margin:0 auto 20px; border-radius:50%;
  background:var(--green-soft); color:var(--green-700); display:grid; place-items:center;
  animation:selo 460ms cubic-bezier(.2,1.1,.4,1);
}
.sucesso__icone .ico{ width:36px; height:36px; stroke-width:2.6; }
@keyframes selo{ from{ transform:scale(.5); opacity:0 } to{ transform:none; opacity:1 } }
.sucesso h3{ font-size:23px; margin-bottom:10px; }
.sucesso p{ color:var(--ink-2); font-size:15px; max-width:46ch; margin-inline:auto; }
.protocolo{
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  margin:22px 0 6px; padding:15px 34px; border-radius:var(--r-lg);
  background:var(--navy-soft); border:1px dashed #B7CBEA;
}
.protocolo small{
  font-size:11px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.protocolo b{ font-size:24px; font-weight:850; letter-spacing:.02em; color:var(--navy); }

/* ---------------- Rodapé ---------------- */
.rodape{
  background:var(--navy-900); color:rgba(255,255,255,.72); padding:52px 0 26px; margin-top:20px;
}
.rodape__in{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:38px; }
@media (max-width:820px){
  .rodape__in{ grid-template-columns:1fr; gap:28px; }
  /* No mobile a navegação já está no cabeçalho — repeti-la aqui só alonga
     o rodapé sem necessidade. */
  .rodape__nav{ display:none; }
}
.rodape h5{
  color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; margin:0 0 14px;
}
.rodape p{ font-size:14px; line-height:1.7; }
.rodape a{ color:rgba(255,255,255,.78); font-size:14px; display:block; padding:3px 0; }
.rodape a:hover{ color:#9FDD83; text-decoration:none; }
.rodape__fim{
  margin-top:38px; padding-top:20px; border-top:1px solid rgba(255,255,255,.13);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:rgba(255,255,255,.5);
}