/* Quanto Custa Processar
   Direção visual: a guia de recolhimento. Papel de segurança, tinta de
   impressora matricial, campos rotulados, picote e código de barras.
   Display: Zilla Slab · Texto: Public Sans · Números: Courier Prime */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=Public+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Courier+Prime:wght@400;700&display=swap');

:root{
  --papel:#e7eae1;
  --folha:#f4f6f0;
  --tinta:#10140f;
  --carimbo:#1c4b3c;
  --vencido:#96301f;
  --rotulo:#5c6a5b;
  --ocre:#9a6f13;
  --linha:#c2c9bb;
  --linha-forte:#9aa495;
  --sombra:0 1px 0 rgba(16,20,15,.06), 0 8px 24px -18px rgba(16,20,15,.5);
  --max:940px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font:400 16.5px/1.62 "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-image:
    repeating-linear-gradient(0deg, rgba(28,75,60,.028) 0 1px, transparent 1px 4px);
}
.env{max-width:var(--max); margin:0 auto; padding:0 20px 84px}

/* ---------- cabeçalho: tarja de guia ---------- */
.topo{
  border-bottom:2px solid var(--tinta); background:var(--folha);
  margin-bottom:30px;
}
.topo .env{padding-top:14px; padding-bottom:12px; display:flex; align-items:baseline; gap:16px; flex-wrap:wrap}
.marca{
  font-family:"Zilla Slab", Georgia, serif; font-weight:700; font-size:20px;
  letter-spacing:-.01em; text-decoration:none; color:var(--tinta); white-space:nowrap;
}
.marca span{color:var(--carimbo)}
.nav{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
.nav a{
  font-family:"Courier Prime", monospace; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--rotulo); text-decoration:none; padding:2px 0;
  border-bottom:1px solid transparent;
}
.nav a:hover,.nav a:focus{color:var(--tinta); border-bottom-color:var(--tinta)}

/* ---------- tipografia ---------- */
h1{
  font-family:"Zilla Slab", Georgia, serif; font-weight:700; font-size:clamp(29px,5.2vw,45px);
  line-height:1.1; letter-spacing:-.022em; margin:26px 0 12px; max-width:19ch;
}
h2{
  font-family:"Zilla Slab", Georgia, serif; font-weight:600; font-size:23px; line-height:1.24;
  letter-spacing:-.012em; margin:40px 0 12px; padding-bottom:7px; border-bottom:1px solid var(--linha);
}
h3{font-family:"Zilla Slab",Georgia,serif; font-weight:600; font-size:18.5px; margin:26px 0 8px}
p{margin:0 0 14px; max-width:68ch}
a{color:var(--carimbo)}
ul,ol{max-width:68ch; padding-left:20px}
li{margin:6px 0}
strong{font-weight:700}
.chamada{font-size:19px; line-height:1.55; color:#2b3229; max-width:60ch; margin-bottom:26px}
.eyebrow{
  font-family:"Courier Prime",monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--rotulo); margin:0 0 4px;
}

/* ---------- formulário ---------- */
.form{
  background:var(--folha); border:1.5px solid var(--tinta); box-shadow:var(--sombra);
  padding:20px 20px 22px; margin:8px 0 30px;
}
.form .linha{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:620px){.form .linha{grid-template-columns:1fr}}
label{
  display:block; font-family:"Courier Prime",monospace; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.11em; color:var(--rotulo); margin-bottom:5px;
}
input[type=text],select{
  width:100%; padding:11px 12px; font:700 19px/1.2 "Courier Prime",monospace;
  color:var(--tinta); background:#fff; border:1px solid var(--linha-forte); border-radius:0;
}
select{font-weight:400; font-size:16px}
input:focus,select:focus,button:focus{outline:2.5px solid var(--carimbo); outline-offset:2px}
.dica{font-size:13.5px; color:var(--rotulo); margin:7px 0 0}
button.calc{
  margin-top:16px; width:100%; padding:14px; background:var(--tinta); color:var(--folha);
  border:none; font:700 15px/1 "Public Sans",sans-serif; letter-spacing:.03em; cursor:pointer;
}
button.calc:hover{background:var(--carimbo)}
.marcadores{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.marcadores button{
  background:transparent; border:1px solid var(--linha-forte); color:var(--rotulo); cursor:pointer;
  font:400 12.5px/1 "Courier Prime",monospace; padding:6px 9px;
}
.marcadores button:hover{border-color:var(--tinta); color:var(--tinta)}

/* ---------- A GUIA: elemento assinatura ---------- */
.guia{
  background:var(--folha); border:1.5px solid var(--tinta); box-shadow:var(--sombra);
  margin:0 0 20px; position:relative;
}
.guia-topo{
  display:flex; align-items:flex-start; gap:14px; padding:14px 18px 12px;
  border-bottom:2px solid var(--tinta); flex-wrap:wrap;
}
.guia-orgao{flex:1; min-width:200px}
.guia-orgao .nome{font-family:"Zilla Slab",Georgia,serif; font-weight:700; font-size:18.5px; line-height:1.2}
.guia-orgao .esfera{font-family:"Courier Prime",monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--rotulo); margin-top:3px}
.selo{
  font-family:"Courier Prime",monospace; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; padding:4px 8px; border:1.5px solid currentColor; white-space:nowrap;
}
.selo.conf{color:var(--carimbo)}
.selo.parc{color:var(--ocre)}
.selo.fora{color:var(--vencido)}

.campos{padding:4px 18px 0}
.campo{
  display:grid; grid-template-columns:1fr auto; gap:10px; align-items:baseline;
  padding:11px 0; border-bottom:1px dashed var(--linha);
}
.campo .rot{font-size:15px}
.campo .det{display:block; font-size:13.3px; color:var(--rotulo); margin-top:3px; max-width:52ch}
.campo .val{font-family:"Courier Prime",monospace; font-weight:700; font-size:17px; white-space:nowrap}
.campo .val.zero{color:var(--carimbo)}
.campo .val.vazio{color:var(--ocre); font-size:13px; letter-spacing:.06em; text-transform:uppercase}

.total{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:15px 18px; background:var(--tinta); color:var(--folha); margin-top:6px;
}
.total .rot{font-family:"Courier Prime",monospace; font-size:12px; text-transform:uppercase; letter-spacing:.13em}
.total .num{font-family:"Courier Prime",monospace; font-weight:700; font-size:clamp(26px,6vw,38px); line-height:1}
.total.gratis .num{color:#8fd6b0}
.total.aberto .num{font-size:19px; color:#e6c46a; letter-spacing:.02em}

/* picote + código de barras */
.picote{
  border-top:2px dashed var(--linha-forte); margin:0; position:relative;
}
.picote::before,.picote::after{
  content:''; position:absolute; top:-7px; width:12px; height:12px; border-radius:50%;
  background:var(--papel); border:1px solid var(--linha-forte);
}
.picote::before{left:-7px}
.picote::after{right:-7px}
.barras{padding:14px 18px 8px; display:flex; align-items:flex-end; gap:2px; height:52px; overflow:hidden}
.barras i{display:block; background:var(--tinta); width:2px; height:100%}
.barras i.w{width:5px}
.barras i.h{height:66%}
.rodape-guia{
  padding:0 18px 14px; font-family:"Courier Prime",monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--vencido);
}

/* ---------- avisos ---------- */
.aviso{
  border-left:4px solid var(--ocre); background:var(--folha); padding:12px 15px; margin:0 0 12px;
  font-size:14.6px; line-height:1.55;
}
.aviso.grave{border-left-color:var(--vencido)}
.aviso.bom{border-left-color:var(--carimbo)}
.aviso p{margin:0 0 8px}
.aviso p:last-child{margin:0}

/* ---------- risco de sucumbência ---------- */
.risco{
  border:1.5px solid var(--vencido); background:var(--folha); padding:16px 18px; margin:24px 0;
}
.risco .cab{font-family:"Courier Prime",monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--vencido); margin-bottom:8px}
.risco .faixa{font-family:"Courier Prime",monospace; font-weight:700; font-size:clamp(20px,4.6vw,27px); color:var(--vencido); line-height:1.2; margin-bottom:8px}
.risco p{font-size:14.6px; margin:0}

/* ---------- comparação ---------- */
.tabela{width:100%; border-collapse:collapse; margin:16px 0 8px; font-size:15px}
.tabela th{
  text-align:left; font-family:"Courier Prime",monospace; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--rotulo);
  border-bottom:1.5px solid var(--tinta); padding:0 8px 7px 0;
}
.tabela td{border-bottom:1px solid var(--linha); padding:11px 8px 11px 0; vertical-align:top}
.tabela td.n{font-family:"Courier Prime",monospace; font-weight:700; text-align:right; white-space:nowrap; padding-right:0}
.tabela tr.fora td{color:var(--rotulo)}
.tabela .sub{display:block; font-size:12.8px; color:var(--rotulo)}
@media(max-width:560px){
  .tabela, .tabela tbody, .tabela tr, .tabela td{display:block; width:100%}
  .tabela thead{display:none}
  .tabela tr{border-bottom:1px solid var(--linha-forte); padding:10px 0}
  .tabela td{border:none; padding:2px 0}
  .tabela td.n{text-align:left; font-size:19px}
}

/* ---------- caixas de conteúdo ---------- */
.caixa{background:var(--folha); border:1px solid var(--linha-forte); padding:17px 19px; margin:20px 0}
.caixa h3{margin-top:0}
.duas{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:680px){.duas{grid-template-columns:1fr}}
.fonte{font-family:"Courier Prime",monospace; font-size:12.4px; color:var(--rotulo); line-height:1.5}

/* ---------- listas de links ---------- */
.links{list-style:none; padding:0; margin:14px 0}
.links li{margin:0; border-bottom:1px solid var(--linha)}
.links a{display:block; padding:11px 0; text-decoration:none; color:var(--tinta)}
.links a:hover{color:var(--carimbo)}
.links .q{font-weight:600}
.links .s{display:block; font-size:13.4px; color:var(--rotulo)}

/* ---------- rodapé ---------- */
.rodape{border-top:2px solid var(--tinta); margin-top:52px; padding-top:18px; font-size:13.6px; color:var(--rotulo)}
.rodape p{max-width:72ch}
.rodape a{color:var(--rotulo)}

/* ---------- acessibilidade ---------- */
@media(prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}
.pular{position:absolute; left:-9999px}
.pular:focus{left:8px; top:8px; background:var(--tinta); color:var(--folha); padding:8px 12px; z-index:9}

@media print{
  body{background:#fff}
  .nav,.form,.marcadores,button{display:none}
  .guia{box-shadow:none}
}