/* ============================================================================
   ASSINAR COM A CONTA GOV.BR (05/10/2026) — só o que esta página tem a mais
   que a assinar.html. Cores, cartões, botões, conta e véu vêm de infora.css e
   assinar.css (carregados antes deste).
   ========================================================================== */
.gv-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 0;padding:0;list-style:none}
.gv-tres li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;padding:12px 14px;
  border:1px solid var(--borda);border-radius:var(--raio);background:rgba(11,21,18,.5)}
.gv-tres b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--marca);color:#04150d;font:700 14px/1 var(--display)}
.gv-tres strong{display:block;margin-bottom:2px;color:var(--texto);font:600 14.5px/1.3 var(--display)}
.gv-tres span{color:var(--fraco);font-size:13px;line-height:1.45}
.gv-atalhos{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
@media (max-width:760px){ .gv-tres{grid-template-columns:1fr} .gv-atalhos .botao{flex:1 1 100%;text-align:center} }

/* == OS 4 PASSOS E O POPUP (07/10/2026) ======================================
   Ordem que funciona sem certificado: enviar → baixar com selo → assinar no gov.br → devolver.
   O passo em que a pessoa está fica aceso ([data-agora]); os de antes, marcados ([data-feito]). */
.gv-quatro{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .gv-quatro{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .gv-quatro{grid-template-columns:1fr} }
.gv-tres li,.gv-guia-passos li{transition:border-color .2s,background .2s}
.gv-tres li[data-agora],.gv-guia-passos li[data-agora]{border-color:rgba(31,191,107,.6);background:rgba(31,191,107,.09)}
.gv-tres li[data-feito] b,.gv-guia-passos li[data-feito] b{background:rgba(31,191,107,.16);color:var(--marca2)}
.gv-tres li[data-feito] strong::after{content:' ✓';color:var(--marca2)}
.gv-atalhos{align-items:center}
.gv-ver-guia{font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.gv-pronto .gv-ver-guia{justify-self:start}

/* -- O POPUP ANIMADO (07/10/2026, tela final) ---------------------------------
   Pedido do Jr: pouco texto, animado. Cada passo = um desenho em SVG + uma frase.
   Entram um depois do outro (gv-entra, atraso por passo); o passo em DESTAQUE
   ([data-destaque], posto pelo assinar-govbr-ui.js) anima em loop. Os outros
   ficam parados na cena final — dá para entender sem animação nenhuma.
   prefers-reduced-motion: tudo parado. Celular (≤700px): um passo por vez. */
.gv-guia{width:calc(100vw - 20px);max-width:1000px;max-height:calc(100dvh - 20px);margin:auto;padding:0;overflow:auto;
  border:1px solid var(--borda2);border-top:2px solid var(--marca);border-radius:var(--raio);background:var(--tinta2);color:var(--texto);
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.gv-guia::backdrop{background:rgba(5,10,8,.82);backdrop-filter:blur(3px)}
.gv-guia-caixa{position:relative;padding:22px 24px 22px}
.gv-guia-x{position:absolute;top:10px;right:10px;width:38px;height:38px;border:0;border-radius:50%;background:none;
  color:var(--fraco);font:400 26px/1 var(--corpo);cursor:pointer}
.gv-guia-x:hover{color:var(--marca2);background:rgba(76,237,153,.08)}
.gv-guia h2{margin:0 0 4px;padding-right:40px;color:#fff;font:600 clamp(22px,3vw,28px)/1.2 var(--display);letter-spacing:-.01em}
.gv-guia-sub{margin:0 0 18px;color:var(--fraco);font-size:14.5px;line-height:1.5}
.gv-guia-sub b{color:var(--texto)}
.gv-guia-passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px;padding:0;list-style:none}
.gv-guia-passos li{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:9px;align-items:center;
  padding:12px 12px 14px;border:1px solid var(--borda);border-radius:var(--raio);background:rgba(5,10,8,.5);
  transition:border-color .25s,background .25s,transform .25s}
.gv-guia-passos li > b{grid-row:2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--marca);color:#04150d;font:700 13.5px/1 var(--display)}
.gv-guia-passos li > strong{grid-row:2;color:var(--texto);font:600 16px/1.25 var(--display)}
.gv-guia-passos li > span{grid-column:1 / -1;grid-row:3;align-self:start;margin-top:5px;color:var(--fraco);font-size:14px;line-height:1.45}
.gv-guia-passos li[data-feito] > b{background:rgba(31,191,107,.16);color:var(--marca2)}
.gv-guia-passos li[data-feito] > strong::after{content:' ✓';color:var(--marca2)}
.gv-guia-passos li[data-destaque]{border-color:rgba(76,237,153,.55);background:rgba(31,191,107,.08);transform:translateY(-2px)}
.gv-guia-iti{grid-column:1 / -1;justify-self:start;margin-top:10px;padding:8px 13px;font-size:13.5px;text-decoration:none}
.gv-ani{grid-column:1 / -1;grid-row:1;height:104px;margin:-2px -2px 10px;border-radius:8px;
  background:radial-gradient(120% 90% at 50% 100%,rgba(31,191,107,.13),rgba(5,10,8,0) 70%)}
.gv-ani svg{display:block;width:100%;height:100%}

/* as peças do desenho (cores por classe: a CSP não deixa style="" no SVG) */
.gv-papel-f{fill:#eaf5f0}
.gv-linhas{fill:none;stroke:#9fb3ab;stroke-width:2.4;stroke-linecap:round}
.gv-selo-f{fill:#1fbf6b}
.gv-selo-l{fill:none;stroke:#04150d;stroke-width:2;stroke-linecap:round}
.gv-bandeja{fill:rgba(76,237,153,.28)}
.gv-bandeja-l,.gv-seta{fill:none;stroke:var(--marca2);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.gv-bandeja-l{stroke:rgba(76,237,153,.45)}
.gv-assinatura,.gv-assinatura-fixa{fill:none;stroke:#1857c9;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gv-assinatura{stroke-dasharray:100;stroke-dashoffset:0}
.gv-caneta{transform:translate(78px,57px)}
.gv-caneta-f{fill:var(--menta)}
.gv-caneta-p{fill:#04150d}
.gv-qr-m{fill:var(--marca2)}
.gv-ok-c{fill:var(--marca)}
.gv-ok-v{fill:none;stroke:#04150d;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.gv-folha-sobe,.gv-selo-pousa,.gv-seta-desce,.gv-folha-volta,.gv-ok-c,.gv-qr-m{transform-box:fill-box;transform-origin:center}

/* entrada: um passo depois do outro */
@keyframes gv-entra{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.gv-guia[open] .gv-guia-passos li{animation:gv-entra .5s var(--mola) both}
.gv-guia[open] .gv-guia-passos li:nth-child(2){animation-delay:.32s}
.gv-guia[open] .gv-guia-passos li:nth-child(3){animation-delay:.64s}
.gv-guia[open] .gv-guia-passos li:nth-child(4){animation-delay:.96s}

/* 1: a folha sobe da bandeja e o selo pousa nela */
@keyframes gv-sobe{0%{transform:translateY(34px);opacity:0}25%,100%{transform:none;opacity:1}}
@keyframes gv-pousa{0%,30%{transform:translateY(-46px);opacity:0}48%{transform:translateY(3px);opacity:1}56%{transform:translateY(-2px)}64%,100%{transform:none;opacity:1}}
/* 2: a seta desce para a bandeja */
@keyframes gv-desce{0%{transform:translateY(-14px);opacity:0}30%{opacity:1}75%{transform:translateY(10px);opacity:1}100%{transform:translateY(14px);opacity:0}}
/* 3: a caneta escreve a assinatura */
@keyframes gv-escreve{0%{stroke-dashoffset:100}70%,100%{stroke-dashoffset:0}}
@keyframes gv-caneta{0%{transform:translate(38px,57px)}17%{transform:translate(47px,54px)}35%{transform:translate(55px,51px)}52%{transform:translate(63px,55px)}70%,85%{transform:translate(78px,57px)}100%{transform:translate(80px,48px)}}
/* 4: a folha volta, o QR acende quadradinho por quadradinho e o check se desenha */
@keyframes gv-volta{0%{transform:translateX(-26px);opacity:0}25%,100%{transform:none;opacity:1}}
@keyframes gv-acende{0%,30%{opacity:.15}45%,100%{opacity:1}}
@keyframes gv-check{0%,55%{stroke-dashoffset:100}80%,100%{stroke-dashoffset:0}}
@keyframes gv-pulsa{0%,55%{transform:scale(.6);opacity:0}70%{transform:scale(1.12);opacity:1}80%,100%{transform:none;opacity:1}}

[data-destaque] .gv-folha-sobe{animation:gv-sobe 3s var(--mola) infinite}
[data-destaque] .gv-selo-pousa{animation:gv-pousa 3s ease-out infinite}
[data-destaque] .gv-seta-desce{animation:gv-desce 1.6s ease-in-out infinite}
[data-destaque] .gv-assinatura{animation:gv-escreve 2.8s ease-in-out infinite}
[data-destaque] .gv-caneta{animation:gv-caneta 2.8s ease-in-out infinite}
[data-destaque] .gv-folha-volta{animation:gv-volta 3.2s var(--mola) infinite}
[data-destaque] .gv-qr-m{animation:gv-acende 3.2s ease-out infinite}
[data-destaque] .gv-qr-m.q2{animation-delay:.12s}
[data-destaque] .gv-qr-m.q3{animation-delay:.24s}
[data-destaque] .gv-qr-m.q4{animation-delay:.36s}
[data-destaque] .gv-qr-m.q5{animation-delay:.48s}
[data-destaque] .gv-ok-c{animation:gv-pulsa 3.2s ease-out infinite}
[data-destaque] .gv-ok-v{animation:gv-check 3.2s ease-out infinite}

.gv-guia-pe{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.gv-guia-pe .botao{min-width:220px;text-align:center}
.gv-bolinhas{display:none;gap:4px}
.gv-bolinhas button{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.gv-bolinhas button::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--borda2);transition:background .2s,width .2s}
.gv-bolinhas button[aria-current]::before{width:22px;border-radius:5px;background:var(--marca2)}

@media (max-width:980px){ .gv-guia-passos{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* celular: carrossel — só o passo da vez aparece (.gv-ve), sem trilho que role para o lado */
@media (max-width:700px){
  .gv-guia{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .gv-guia-caixa{padding:16px 14px 14px}
  .gv-guia-sub{margin-bottom:12px}
  .gv-guia-passos{grid-template-columns:minmax(0,1fr);margin-bottom:12px}
  .gv-guia-passos li{display:none;min-height:252px;padding:12px 12px 16px}
  .gv-guia-passos li.gv-ve{display:grid}
  .gv-guia[open] .gv-guia-passos li{animation:gv-entra .4s var(--mola) both;animation-delay:0s}
  .gv-ani{height:132px}
  .gv-guia-passos li > strong{font-size:18px}
  .gv-guia-passos li > span{font-size:15px}
  .gv-guia-iti{justify-self:stretch;text-align:center}
  .gv-guia-pe{justify-content:space-between;gap:6px}
  .gv-guia-pe .botao{min-width:0;flex:0 0 auto;padding:12px 18px}
  .gv-bolinhas{display:flex}
  .gv-guia-volta{min-width:64px;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .gv-guia *,.gv-guia *::before{animation:none !important;transition:none !important}
  .gv-guia-passos li[data-destaque]{transform:none}
}

/* reserva da trava de saldo (o creditos-aviso.js tem a caixa dele; esta só aparece se a dele falhar) */
.gv-sem-creditos{max-width:460px}
.gv-sem-creditos .gv-sc-zap{display:block;margin-top:4px;text-decoration:none}
.gv-sc-rodape{margin:10px 0 12px;text-align:center;color:var(--fraco2);font:400 13px/1.3 var(--dado)}

/* a caixa "créditos acabaram" do creditos-aviso.js injeta um <style>, que a CSP desta página
   (style-src 'self') bloqueia. Cópia das regras dele (07/10) para a caixa sair igual aqui. */
.ifc-veu{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(5,10,8,.84);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s}
.ifc-veu.on{opacity:1}
.ifc-caixa{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;background:var(--tinta2);color:var(--texto);
  border:1px solid var(--borda2);border-top:2px solid var(--marca);border-radius:var(--raio);padding:24px 22px 18px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);font:400 15px/1.55 var(--corpo);text-align:left;transform:translateY(8px);transition:transform .22s var(--mola)}
.ifc-veu.on .ifc-caixa{transform:none}
.ifc-caixa *{box-sizing:border-box}
.ifc-etiq{display:block;font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fraco2);margin:0 0 8px}
.ifc-caixa h2{font:600 20px/1.25 var(--display);letter-spacing:-.01em;margin:0 0 10px;color:var(--texto)}
.ifc-caixa p{margin:0;color:var(--fraco);font-size:15px;line-height:1.55}
.ifc-zap{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;margin-top:20px;padding:14px 18px;border-radius:10px;border:0;
  cursor:pointer;background:var(--marca);color:#04150d;text-decoration:none;text-align:center;font:600 16.5px/1.25 var(--display);transition:background .15s}
.ifc-zap:hover{background:var(--marca2)}
.ifc-zap svg{width:22px;height:22px;flex:none}
.ifc-caixa .ifc-rodape{margin:11px 0 0;text-align:center;font-family:var(--dado);font-size:13px;color:var(--fraco2);font-variant-numeric:tabular-nums}
.ifc-fechar{display:block;width:100%;min-height:46px;margin-top:14px;padding:11px 16px;border-radius:9px;background:none;border:1px solid var(--borda2);
  color:var(--fraco);cursor:pointer;font:600 14.5px/1.2 var(--display);transition:color .15s,border-color .15s}
.ifc-fechar:hover{color:var(--marca2);border-color:var(--marca)}
.ifc-zap:focus-visible,.ifc-fechar:focus-visible{outline:3px solid var(--marca2);outline-offset:3px}
.ifc-comprar{color:var(--marca2);font-weight:600}
@media (max-width:420px){ .ifc-caixa{padding:22px 18px 16px} .ifc-caixa h2{font-size:19px} }
@media (prefers-reduced-motion:reduce){ .ifc-veu,.ifc-caixa{transition:none} }

/* -- AGUARDANDO O GOV.BR (07/10/2026) — a lista dos preparados ainda sem assinatura -- */
.gv-aguardando{margin-top:22px}
.gv-num-relogio svg{width:16px;height:16px}
.gv-lista{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.gv-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 16px;padding:11px 13px;
  border:1px solid var(--borda);border-left:3px solid var(--alerta);border-radius:0 var(--raio) var(--raio) 0;background:rgba(255,179,71,.04)}
.gv-item.gv-incompleto{border-left-color:var(--neutro);background:rgba(90,122,143,.06)}
.gv-item-txt{min-width:0}
.gv-item-txt strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--texto);font:600 15px/1.3 var(--display)}
.gv-item-txt small{display:block;margin-top:2px;color:var(--fraco);font-size:13px;line-height:1.45}
.gv-item-txt code{color:var(--marca3);font:500 12px/1.3 var(--dado);letter-spacing:.02em;overflow-wrap:anywhere}
.gv-item-estado{display:inline-block;margin-right:6px;padding:2px 7px;border-radius:999px;background:rgba(255,179,71,.14);color:var(--alerta);font:600 11px/1.4 var(--display);letter-spacing:.04em}
.gv-incompleto .gv-item-estado{background:rgba(90,122,143,.18);color:#9db6c7}
.gv-item-acoes{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;justify-content:flex-end}
.gv-item-acoes .botao{padding:10px 15px;font-size:14px}
.gv-item-certeza{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:9px 11px;border-radius:8px;
  background:rgba(255,107,94,.07);color:var(--texto);font-size:14px}
.gv-item-certeza .botao{padding:9px 14px;font-size:13.5px}
.gv-item-certeza .botao.perigo{background:var(--erro);color:#1a0603}
.gv-item-msg{grid-column:1 / -1;margin:0;color:var(--erro);font-size:13px;font-weight:600}
.gv-item-msg:empty{display:none}
@media (max-width:640px){
  .gv-item{grid-template-columns:minmax(0,1fr)}
  .gv-item-acoes{justify-content:stretch}
  .gv-item-acoes .botao{flex:1 1 100%;text-align:center}
  .gv-item-acoes .as-link{margin:0 auto}
}
.gv-esperado{margin:0 0 10px;padding:9px 12px;border-left:3px solid var(--alerta);border-radius:0 8px 8px 0;background:rgba(255,179,71,.07);
  color:var(--texto);font-size:14px;line-height:1.5}
.gv-esperado code{margin-left:4px;color:var(--marca3);font:500 12.5px/1.3 var(--dado);overflow-wrap:anywhere}
.as-msg.aviso{color:var(--alerta)}

.gv-oficina{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.gv-coluna{display:grid;gap:12px;min-width:0}
.gv-palco-caixa{grid-area:auto;position:sticky;top:12px;min-width:0}
@media (max-width:1100px){ .gv-oficina{grid-template-columns:minmax(0,1fr)} .gv-palco-caixa{position:static;order:-1} }

.gv-palco{place-items:center;min-height:min(560px,70vh)}
.gv-papel{position:relative;width:100%;max-width:560px;line-height:0}
.gv-papel #pdf-canvas{width:100%;height:auto;cursor:default}
.gv-selos{position:absolute;inset:0;pointer-events:none}
.gv-selo{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:2px;overflow:hidden;
  padding:4px 7px;border:1.5px solid var(--marca2);border-radius:4px;background:linear-gradient(to top right,#041a11 0%,#0b3d29 55%,#1f8f5c 100%);
  color:#eaf5f0;font:600 10px/1.2 Helvetica,Arial,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.gv-selo small{color:var(--marca2);font-weight:500}

.gv-nomes{display:grid;gap:8px;margin:0 0 10px;padding:0;list-style:none;counter-reset:nome}
.gv-nomes li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px}
.gv-nomes li::before{counter-increment:nome;content:counter(nome);display:grid;place-items:center;width:24px;height:24px;
  border:1px solid var(--borda2);border-radius:50%;color:var(--fraco);font:600 12px/1 var(--display)}
.gv-nomes .as-campo{padding-right:14px;text-transform:uppercase}
.gv-escolha{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px;margin-bottom:10px}
.gv-escolha .etiq{margin:0}
.gv-escolha .as-campo{padding-right:14px}

.gv-pronto{display:grid;gap:10px;margin-top:12px}
.gv-pronto .as-fatos{margin:0}
.gv-iti{text-align:center;text-decoration:none}
.gv-passos{margin:4px 0 0;padding-left:20px;color:var(--fraco);font-size:13.5px;line-height:1.55}
.gv-passos b{color:var(--texto)}
.gv-passos a{color:var(--marca2)}
.gv-devolver{margin-top:22px}
.gv-devolver .as-verificacao{display:inline-block;margin-top:12px}