:root {
  --verde-escuro: #022c22;
  --verde-medio: #064e3b;
  --verde-claro: #10b981;
  --verde-neon: #34d399;
  --papel: #fafaf9;
  --tinta: #1c1917;
  --cinza: #78716c;
  --borda: #e7e5e4;
  --vermelho: #dc2626;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Archivo', system-ui, sans-serif; background: var(--papel); color: var(--tinta); }

.hero { position: relative; overflow: hidden; background: var(--verde-escuro); color: var(--papel); padding: 52px 24px 44px; border-bottom: 8px solid var(--verde-claro); }
.hero::before { content: ""; position: absolute; top: -45%; left: 50%; transform: translateX(-50%); width: 760px; height: 760px; background: radial-gradient(circle, rgba(52,211,153,.18) 0%, rgba(52,211,153,0) 62%); pointer-events: none; }
.container { max-width: 760px; margin: 0 auto; position: relative; }
.eyebrow { font-family: 'Spline Sans Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--verde-neon); }
.hero h1 { font-family: 'Archivo Black', sans-serif; font-size: clamp(1.85rem, 5vw, 2.8rem); line-height: 1.06; margin-top: 10px; letter-spacing: -.01em; }
.hero h1 span { color: var(--verde-neon); }
.hero p.sub { margin-top: 14px; color: rgba(236,253,245,.78); max-width: 560px; font-size: 1.02rem; line-height: 1.6; }

.migalha { font-family: 'Spline Sans Mono', monospace; font-size: 11.5px; color: rgba(236,253,245,.5); margin-bottom: 4px; }
.migalha a { color: rgba(236,253,245,.72); text-decoration: none; }
.migalha a:hover { color: var(--verde-neon); }

.selos { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.selo { display: inline-flex; align-items: center; gap: 6px; font-family: 'Spline Sans Mono', monospace; font-size: 12px; color: #a7f3d0; background: rgba(6,78,59,.55); border: 1px solid #065f46; padding: 6px 12px; border-radius: 999px; }

.barra { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: rgba(6,78,59,.32); padding: 12px; border-radius: 16px; border: 1px solid #065f46; box-shadow: 0 20px 45px -22px rgba(0,0,0,.65); }
.barra label { font-family: 'Spline Sans Mono', monospace; font-size: 12.5px; color: #a7f3d0; }
.barra select { background: var(--verde-medio); border: 1px solid #065f46; border-radius: 11px; padding: 13px 14px; color: var(--papel); font-family: 'Spline Sans Mono', monospace; font-size: 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.barra select:focus { border-color: var(--verde-neon); box-shadow: 0 0 0 3px rgba(52,211,153,.18); outline: none; }
.barra .cta-termo { margin-left: auto; background: var(--verde-claro); color: var(--verde-escuro); border: none; border-radius: 11px; padding: 13px 22px; font-family: 'Archivo Black', sans-serif; font-size: 13.5px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: background .15s, transform .1s; }
.barra .cta-termo:hover { background: var(--verde-neon); }
.barra .cta-termo:active { transform: translateY(1px); }

.status { margin-top: 14px; font-family: 'Spline Sans Mono', monospace; font-size: 13px; color: #6ee7b7; }
.erro { margin-top: 14px; display: none; align-items: center; gap: 9px; color: #fecaca; background: rgba(220,38,38,.15); border: 1px solid rgba(248,113,113,.45); padding: 11px 15px; border-radius: 11px; font-size: 14px; line-height: 1.35; }
.erro::before { content: "⚠️"; font-size: 16px; line-height: 1; }

main { padding: 32px 24px 80px; }
.contagem { font-family: 'Archivo Black', sans-serif; font-size: 1.2rem; color: var(--verde-medio); margin-bottom: 4px; }
.contagem-sub { font-family: 'Spline Sans Mono', monospace; font-size: 12.5px; color: var(--cinza); margin-bottom: 18px; }

.card { display: block; background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 18px; margin-bottom: 12px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--verde-claro); transform: translateY(-1px); }
.card .topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.card h3 { font-size: 15px; font-weight: 600; }
.card .local { font-family: 'Spline Sans Mono', monospace; font-size: 12px; color: var(--cinza); white-space: nowrap; }
.card .desc { font-size: 13.5px; color: #44403c; margin-top: 6px; line-height: 1.5; }
.card .meta { font-family: 'Spline Sans Mono', monospace; font-size: 12px; color: var(--cinza); margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; }
.badge-prazo { color: var(--verde-medio); font-weight: 500; }
.badge-prazo.urgente { color: var(--vermelho); font-weight: 700; }
.vazio { text-align: center; color: var(--cinza); padding: 50px 20px; font-family: 'Spline Sans Mono', monospace; font-size: 14px; line-height: 2; }

.esqueleto { background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 18px; margin-bottom: 12px; }
.esqueleto div { height: 11px; border-radius: 4px; background: linear-gradient(90deg, #f5f5f4 25%, #ebebe9 37%, #f5f5f4 63%); background-size: 400% 100%; animation: brilho 1.3s ease infinite; }
.esqueleto div + div { margin-top: 9px; }
@keyframes brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.cta-busca { background: var(--verde-escuro); color: var(--papel); border-radius: 14px; padding: 26px 24px; margin: 34px 0; text-align: center; }
.cta-busca h2 { font-family: 'Archivo Black', sans-serif; font-size: 1.2rem; margin-bottom: 8px; color: var(--papel); }
.cta-busca p { color: rgba(236,253,245,.75); font-size: .95rem; line-height: 1.55; max-width: 490px; margin: 0 auto 16px; }
.cta-busca a { display: inline-block; background: var(--verde-claro); color: var(--verde-escuro); text-decoration: none; padding: 13px 26px; border-radius: 11px; font-family: 'Archivo Black', sans-serif; font-size: 14px; transition: background .15s; }
.cta-busca a:hover { background: var(--verde-neon); }

article h2 { font-family: 'Archivo Black', sans-serif; font-size: 1.32rem; margin: 38px 0 12px; color: var(--verde-escuro); }
article h3 { font-size: 1.02rem; font-weight: 600; margin: 20px 0 8px; }
article p { font-size: 1rem; line-height: 1.72; color: #292524; margin-bottom: 14px; }
article ul, article ol { margin: 0 0 16px 22px; }
article li { font-size: 1rem; line-height: 1.7; color: #292524; margin-bottom: 8px; }
article a { color: var(--verde-medio); }
article strong { font-weight: 600; }
.todos-ufs { font-family: 'Spline Sans Mono', monospace; font-size: 12.5px; line-height: 2.1; color: var(--cinza); }
.todos-ufs a { color: var(--verde-medio); text-decoration: none; }
.todos-ufs a:hover { text-decoration: underline; }

.faq details { border: 1px solid var(--borda); border-radius: 8px; background: #fff; margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 15px 18px; font-weight: 600; font-size: .98rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--verde-claro); font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 18px 16px; margin: 0; font-size: .96rem; color: #44403c; line-height: 1.65; }

.guias { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 16px; }
.guia-card { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 18px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.guia-card:hover { border-color: var(--verde-claro); transform: translateY(-2px); }
.guia-card h3 { font-size: .98rem; font-weight: 600; margin: 0 0 6px; }
.guia-card p { font-size: .87rem; color: #57534e; line-height: 1.5; margin: 0 0 8px; }
.guia-card .ler { font-family: 'Spline Sans Mono', monospace; font-size: 12px; color: var(--verde-medio); }

footer { border-top: 1px solid var(--borda); padding: 32px 24px; text-align: center; font-size: 12px; color: var(--cinza); margin-top: 24px; }
footer a { color: var(--verde-medio); }

@media (max-width: 560px) {
  .barra .cta-termo { margin-left: 0; width: 100%; justify-content: center; }
}