/* ============================================================================
   INFORA — A FOLHA COMUM DAS TELAS DO PORTAL
   Carregada por entrar.html, autoatendimento.html e creditos.html.

   ----------------------------------------------------------------------------
   POR QUE ELA EXISTE

   As três telas nasceram separadas, cada uma com o seu <style>, e foram
   divergindo: a mesma cor com dois valores, o mesmo botão com dois raios, a
   mesma etiqueta com dois tamanhos. Enquanto o CSS mora dentro do HTML, uma
   correção de identidade tem que ser feita três vezes — e a terceira sempre
   fica para depois. Aqui o que é IDENTIDADE mora num arquivo só; cada página
   guarda no seu <style> apenas o que é dela.

   ----------------------------------------------------------------------------
   A DIREÇÃO — por que o layout mudou (pedido do Junior em 22/08)

   O desenho anterior tinha as quatro assinaturas de painel gerado por IA:
     1. fundo quase preto com manchas de verde neon ao fundo;
     2. tudo em cartão arredondado igual — mesmo raio, mesma borda de 1px;
     3. RÓTULO EM CAIXA ALTA sobre número grande sobre legenda pequena;
     4. tipografia `system-ui`, que não é escolha, é ausência de escolha.

   A troca não é "outro tema". É outra METÁFORA: isto aqui é um EXTRATO, não
   um painel. Extrato se lê em coluna, alinhado, com régua separando seção de
   seção — o cartão arredondado existe para quando um dado precisa ser isolado
   do resto, e quase nunca precisa. O verde da marca FICA; o que muda é a
   execução: ele vira régua e acento, não campo de fundo.
   ========================================================================== */

:root{
  /* -- tinta ---------------------------------------------------------- */
  --tinta:#050a08;      /* o fundo                                        */
  --tinta2:#0b1512;     /* superfície levantada                           */
  --tinta3:#13211c;     /* superfície levantada duas vezes                */

  /* -- marca ---------------------------------------------------------- */
  --marca:#1fbf6b;      /* o verde de ação: botão, régua de abertura      */
  --marca2:#4ced99;     /* o verde de leitura: texto sobre fundo escuro   */
  --marca3:#d7f8e7;     /* quase branco esverdeado: dado em destaque      */
  --menta:#3fd9c8;      /* o segundo acento — usar com parcimônia         */

  /* -- texto ---------------------------------------------------------- */
  --texto:#eaf5f0;
  --fraco:#8fa79e;      /* apoio legível                                  */
  --fraco2:#5f7970;     /* etiqueta, legenda, rodapé                      */

  --borda:#1c2f28;      /* a régua discreta: separa                       */
  --borda2:#2a453b;     /* a borda que contorna: isola                    */

  /* -- semântica ------------------------------------------------------ */
  --alerta:#ffb347;     /* achado: tem registro, olhe                     */
  --erro:#ff6b5e;       /* falhou / não respondeu                         */
  --neutro:#5a7a8f;     /* sem cobertura, desligado                       */

  --raio:10px;          /* era 14. Canto menor = menos "cartãozinho".     */
  --mola:cubic-bezier(.22,1,.36,1);
  --max:920px;

  /* -- AS DUAS FAMÍLIAS -------------------------------------------------
     Mesmas do localizador, para o produto inteiro falar uma língua só.
     Display para NOME de coisa; mono para DADO — dinheiro, documento, data,
     hora. Em extrato, número tem que alinhar coluna com coluna, e só fonte
     de largura fixa alinha.
     ATENÇÃO: as famílias entram por <link> no <head> de cada página, NUNCA
     por @import aqui: a regra @import só vale no topo absoluto do arquivo.
     Depois de qualquer seletor o navegador ignora EM SILÊNCIO e a tela cai
     na fonte de sistema sem avisar ninguém.                              */
  --display:'Space Grotesk', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --corpo:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --dado:'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  /* As manchas de gradiente radial saíram das três telas. Dois borrões
     verdes atrás do conteúdo são assinatura de template — e não diziam nada
     sobre o assunto da página. No lugar, uma virada vertical discreta, como
     papel sob luz vindo de cima. */
  background:linear-gradient(180deg,#08110d 0%,var(--tinta) 42%),var(--tinta);
  color:var(--texto);
  font:400 15px/1.6 var(--corpo);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.env{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,3vw,48px)}

/* == A LARGURA EM TELA GRANDE (23/08) =====================================
   Pedido do Junior: "em computador, 1920 por 1080, dá para usar um pouco
   mais o espaço — as extremidades ficam muito vazias".

   A largura cresce por faixa, mas NÃO até a borda: em 1920 o conteúdo vai a
   1600 e sobram 160 de cada lado. Margem não é desperdício — é o que separa
   o conteúdo da moldura do navegador e dá onde o olho descansar.

   🚨 O que NÃO cresce junto: linha de TEXTO. Parágrafo com 1600px de largura
   é ilegível — o olho perde o começo da linha seguinte. Por isso os textos
   corridos continuam limitados em `ch` (`.folha .sub`, `.cat-grupo .resumo`,
   `.recado p`): quem ganha o espaço são as LISTAS, as TABELAS e a grade do
   catálogo, que existem para comparar lado a lado. */
@media (min-width:1280px){ :root{ --max:1180px } }
@media (min-width:1600px){ :root{ --max:1420px } }
@media (min-width:1900px){ :root{ --max:1600px } }

/* == CABEÇALHO ============================================================
   O logotipo é o mesmo desenho e o mesmo gradiente da index — trocar aqui
   descaracteriza a marca entre as páginas. */
header.topo{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 0 10px}
.mkt{display:flex;align-items:center;gap:12px;text-decoration:none}
.mkt svg{width:32px;height:auto;filter:drop-shadow(0 0 14px rgba(76,237,153,.45))}
.mkt .nm{font-family:var(--display);font-size:25px;font-weight:500;letter-spacing:.005em;
  color:#fff;line-height:1}
.mkt .nm i{font-style:normal;color:var(--marca2);text-shadow:0 0 20px rgba(76,237,153,.6)}
@media (max-width:700px){ .mkt svg{width:27px} .mkt .nm{font-size:21px} }

/* == A ABERTURA DA FOLHA ==================================================
   Substitui o "herói" centralizado com título em degradê. Régua verde em
   cima, título alinhado à esquerda, e o dado da direita quando houver
   (saldo, documento consultado). Documento abre assim; painel não. */
.folha{margin:24px 0 0;padding:24px 0 20px;
  border-top:2px solid var(--marca);border-bottom:1px solid var(--borda)}
.folha-topo{display:flex;flex-wrap:wrap;gap:22px 48px;align-items:flex-start}
.folha-lado{margin-left:auto;text-align:right}
@media(max-width:640px){ .folha-lado{margin-left:0;text-align:left} }
.folha h1{font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(25px,4vw,34px);line-height:1.15;margin:0 0 8px;color:var(--texto)}
.folha h1 i{font-style:normal;color:var(--marca2)}   /* acento sem degradê */
.folha .sub{margin:0;max-width:58ch;color:var(--fraco);font-size:14.5px}
.folha-acoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}

/* == ETIQUETA =============================================================
   A caixa-alta sobrou de propósito, mas só como ETIQUETA de campo — pequena,
   cinza, discreta. O que sumiu foi o combo rótulo-grande + número-gigante. */
.etiq{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fraco2);font-weight:500;margin-bottom:6px}

/* == SEÇÃO COM RÉGUA — no lugar de mais um cartão ========================= */
.secao{display:flex;align-items:center;gap:14px;margin:32px 0 12px}
.secao .tit{flex:none;margin:0;font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--menta)}
.secao .risca{flex:1;height:1px;background:var(--borda)}
.secao .leg{flex:none;font-size:12.5px;color:var(--fraco2)}

/* == CIFRA ================================================================
   Dinheiro não é "número grande". O R$ fica pequeno e alto, os centavos
   menores que os reais: o olho lê a grandeza primeiro e o troco depois — que
   é a ordem em que a pessoa decide se dá ou não dá. */
.cifra{font-family:var(--dado);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(36px,6vw,54px);line-height:1;margin:0;color:var(--marca2);
  font-variant-numeric:tabular-nums}
.cifra .rs{font-size:.36em;color:var(--fraco);margin-right:.28em;
  vertical-align:.62em;letter-spacing:.04em}
.cifra .cent{font-size:.5em;color:var(--marca);letter-spacing:0}
.cifra.zerado{color:var(--fraco)}
.cifra.zerado .cent{color:var(--fraco2)}
.sob{margin:9px 0 0;font-size:12.5px;color:var(--fraco2)}

/* == BOTÃO ================================================================
   Chapado, nunca degradê. Degradê em botão é das marcas mais fortes de
   template gerado, e não ajuda ninguém a clicar. */
.botao{flex:0 0 auto;padding:13px 22px;border-radius:9px;border:0;cursor:pointer;
  background:var(--marca);font-family:var(--display);color:#04150d;
  font-weight:600;font-size:14.5px;letter-spacing:.01em;text-decoration:none;
  display:inline-block;transition:background .15s,color .15s,border-color .15s}
.botao:hover:not(:disabled){background:var(--marca2)}
.botao:disabled{opacity:.45;cursor:not-allowed}
.botao.fantasma{background:none;border:1px solid var(--borda2);color:var(--fraco)}
.botao.fantasma:hover:not(:disabled){color:var(--marca2);border-color:var(--marca)}
.botao.largo{width:100%;text-align:center}

/* == CAMPO ================================================================ */
.campo{width:100%;padding:14px 15px;border-radius:9px;
  border:1px solid var(--borda2);background:rgba(5,10,8,.72);color:var(--texto);
  font-family:var(--dado);font-size:19px;font-weight:500;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  transition:border-color .18s,box-shadow .18s}
.campo::placeholder{color:var(--fraco2);font-weight:400;letter-spacing:.03em}
.campo:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px rgba(31,191,107,.16)}
.campo.ruim{border-color:var(--erro);box-shadow:0 0 0 3px rgba(255,107,94,.14)}
.campo.bom{border-color:var(--marca)}
.linha-campo{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.linha-campo .campo{flex:1 1 220px;min-width:0}
.aviso-campo{margin:10px 0 0;font-size:13px;min-height:19px;color:var(--erro);font-weight:600}
.aviso-campo.ok{color:var(--marca2)}

/* == A LINHA — o primitivo do extrato =====================================
   Uma fonte consultada e um movimento de carteira são a MESMA coisa
   visualmente: pino de estado · nome com detalhe embaixo · valor à direita.
   Antes eram duas listas com CSS duplicado e valores levemente diferentes.

   Sem borda em volta e sem canto: o que separa uma linha da outra é uma
   régua de 1px, como em extrato de banco. A borda só volta quando a linha
   precisa ser DESTACADA (achado), e aí ela significa alguma coisa. */
.lista{display:grid}
.linha{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:13px;
  padding:11px 2px;border-bottom:1px solid var(--borda);
  transition:background .2s,opacity .3s}
.linha:last-child{border-bottom:0}
.linha .pino{width:8px;height:8px;border-radius:50%;justify-self:center;
  background:var(--fraco2);transition:background .3s,box-shadow .3s}
.linha .nom{min-width:0}
.linha .nom b{display:block;font-size:14px;font-weight:600;color:var(--texto)}
.linha .nom small{display:block;font-size:11.5px;color:var(--fraco2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha .res{font-family:var(--dado);font-size:12.5px;font-weight:500;color:var(--fraco2);
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

.linha.buscando .pino{background:var(--menta);animation:pulsa 1s infinite}
.linha.buscando .res{color:var(--menta)}
@keyframes pulsa{0%,100%{opacity:.35}50%{opacity:1;box-shadow:0 0 0 5px rgba(63,217,200,.14)}}

/* achado: a ÚNICA linha que ganha fundo, porque é a única que pede o olho */
.linha.encontrado{background:rgba(255,179,71,.06);
  box-shadow:inset 2px 0 0 var(--alerta);padding-left:11px}
.linha.encontrado .pino{background:var(--alerta)}
.linha.encontrado .res{color:var(--alerta)}

/* 🚨 'NADA CONSTA' NÃO TEM COR — decisão do Junior em 23/08.
   Esta linha já foi verde. O laudo é uma lista de RESTRIÇÕES e metade das
   fontes do catálogo ainda nem está ligada; uma coluna de verde fazia o olho
   concluir "essa pessoa está limpa", que é justamente a conclusão que o laudo
   não pode dar. É a regra 1 do projeto aplicada à cor: silêncio nunca vira
   afirmação.

   Então: só o ACHADO tem cor. Ausência de cor é ausência de achado, não
   atestado de nada. O laudo passa a dizer "procurei nestes lugares e achei
   isto aqui" em vez de "está tudo certo".

   ⚠️ Não devolver o verde aqui "para a lista ficar mais viva". O ganho é
   estético e a perda é de sentido. Se um dia TODAS as fontes do catálogo
   estiverem ligadas, aí a conversa muda — e só aí. */
.linha.limpo .pino{background:var(--fraco2)}
.linha.limpo .res{color:var(--fraco2)}
.linha.indisponivel .pino{background:var(--erro)}
.linha.indisponivel .res{color:var(--erro)}
.linha.aguardando-contrato,.linha.sem-api{opacity:.45}
.linha.aguardando-contrato .pino{background:var(--neutro)}
.linha.sem-api .pino{background:transparent;border:1.5px solid var(--fraco2)}
/* gratuita esperando a chave: não é "sem cobertura", é cobertura a um
   cadastro de distância — por isso âmbar, não cinza */
.linha.sem-chave{opacity:.8}
.linha.sem-chave .pino{background:transparent;border:1.5px solid var(--alerta)}
.linha.sem-chave .res{color:var(--alerta)}

/* == RECADO ===============================================================
   Aviso não é cartão: é um bloco com barra na lateral esquerda. */
.recado{padding:14px 16px;margin-bottom:14px;border-left:3px solid var(--fraco2);
  background:rgba(255,255,255,.025);border-radius:0 6px 6px 0}
.recado.bom{border-left-color:var(--marca);background:rgba(31,191,107,.06)}
.recado.ruim{border-left-color:var(--erro);background:rgba(255,107,94,.06)}
.recado.aviso{border-left-color:var(--alerta);background:rgba(255,179,71,.06)}
.recado > b{display:block;font-family:var(--display);font-size:15px;font-weight:600;margin-bottom:5px}
/* 80ch é o limite clássico de leitura confortável: passando disso o olho
   perde o começo da linha seguinte. O bloco cresce com a tela; a LINHA não. */
.recado p{margin:0;color:var(--fraco);font-size:14px;line-height:1.6;max-width:80ch}
.recado p + p{margin-top:8px}
.recado code{background:rgba(5,10,8,.6);padding:2px 6px;border-radius:5px;
  font-size:12.5px;color:var(--menta);font-family:var(--dado)}

/* == PAINEL QUE APARECE =================================================== */
.painel{display:none;margin:26px 0 0;animation:sobe .4s var(--mola) both}
.painel.on{display:block}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.esconde{display:none}

/* == TABELA =============================================================== */
.tabela{width:100%;border-collapse:collapse;font-size:13.5px}
.tabela th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fraco2);padding:0 10px 7px 0;
  border-bottom:1px solid var(--borda)}
.tabela td{padding:8px 10px 8px 0;border-bottom:1px solid rgba(28,47,40,.5);color:var(--texto)}
.tabela td.num,.tabela th.num{text-align:right;font-family:var(--dado);
  font-variant-numeric:tabular-nums;font-weight:500;padding-right:0}
.tabela tr:last-child td{border-bottom:0}
.rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* == RODAPÉ =============================================================== */
footer{margin:48px 0 32px;padding-top:18px;border-top:1px solid var(--borda);
  color:var(--fraco2);font-size:12px;line-height:1.65}
footer b{color:var(--fraco)}
footer a{color:var(--fraco)}

/* == O RESPIRO — o sinal de que a casa está trabalhando (23/08) ===========
   Pedido do Junior: "quando está processando, entrando, aceitando um
   pagamento, a tela fica como se tivesse travado". Em vez de um spinner
   genérico, a PRÓPRIA MARCA respira: o traço do 7 se desenha, o arco fecha,
   o ponto pulsa — e recomeça. Três formas, mesma peça:
     .inf-loader          em linha, dentro de um bloco da tela
     .inf-overlay         o véu: cobre a tela nos momentos decisivos
     .botao.ocupado       o texto some e entra o giro, SEM mudar a largura
   E o fecho: .inf-ok, um check que se desenha quando algo deu certo.
   pathLength normaliza os traços (180 e 100) para o CSS não depender da
   geometria real do desenho. */
.inf-loader{display:inline-flex;align-items:center;gap:11px;color:var(--fraco);
  font-size:13.5px;line-height:1.35}
.inf-loader svg{width:26px;height:auto;flex:none;overflow:visible}
.inf-loader .t7{stroke:var(--marca2);stroke-width:13;fill:none;
  stroke-dasharray:180;stroke-dashoffset:180;animation:inf-traco 1.7s cubic-bezier(.4,0,.2,1) infinite}
.inf-loader .arco{stroke:var(--menta);stroke-width:11;fill:none;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;animation:inf-arco 1.7s cubic-bezier(.4,0,.2,1) infinite}
.inf-loader .pt{fill:var(--marca2);animation:inf-ponto 1.7s ease-in-out infinite}
.inf-loader.grande{flex-direction:column;gap:14px;text-align:center}
.inf-loader.grande svg{width:46px}
@keyframes inf-traco{0%{stroke-dashoffset:180}50%{stroke-dashoffset:0}82%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes inf-arco{0%,35%{stroke-dashoffset:100}75%{stroke-dashoffset:0}82%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes inf-ponto{0%,100%{opacity:.2}50%{opacity:1}}

.inf-overlay{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  background:rgba(5,10,8,.8);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s}
.inf-overlay.on{opacity:1}
.inf-overlay .inf-loader.grande{color:var(--texto);font-family:var(--display);font-size:15.5px}
.inf-overlay small{display:block;color:var(--fraco2);font-family:var(--corpo);font-size:12.5px;margin-top:3px}

/* ocupado também fica `disabled` (o clique e o Enter não podem repetir a
   ação); o estilo de desabilitado — opacidade e cor de texto do navegador —
   não pode vencer aqui, senão o texto reaparece sob o giro */
.botao.ocupado,.bt.ocupado{position:relative;color:transparent !important;
  -webkit-text-fill-color:transparent !important;text-shadow:none !important;
  opacity:1 !important;cursor:progress !important;pointer-events:none}
.botao.ocupado *,.bt.ocupado *{visibility:hidden}
.botao.ocupado::after,.bt.ocupado::after{content:'';position:absolute;inset:0;margin:auto;
  width:16px;height:16px;border-radius:50%;border:2px solid rgba(4,21,13,.3);border-top-color:#04150d;
  animation:inf-gira .7s linear infinite;visibility:visible}
.botao.fantasma.ocupado::after,.bt.fantasma.ocupado::after{border-color:rgba(143,167,158,.3);border-top-color:var(--marca2)}
@keyframes inf-gira{to{transform:rotate(360deg)}}

.inf-ok{display:inline-flex;align-items:center;gap:10px;color:var(--marca2)}
.inf-ok svg{width:30px;height:30px;flex:none}
.inf-ok circle{stroke:var(--marca);stroke-width:2;fill:rgba(31,191,107,.08);
  stroke-dasharray:80;stroke-dashoffset:80;animation:inf-fecha .5s ease-out forwards}
.inf-ok path{stroke:var(--marca2);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30;stroke-dashoffset:30;animation:inf-fecha .4s .3s ease-out forwards}
@keyframes inf-fecha{to{stroke-dashoffset:0}}

/* == A FAIXA DO SALDO — a conta feita ANTES de clicar (23/08) =============
   Pedido do Junior: "precisa ter alguma sinalização dizendo que o saldo está
   abaixo de qualquer consulta". Fica no topo do catálogo, antes das opções.

   Três estados, e o texto muda com a conta:
     .curto   nenhuma consulta paga cabe no saldo   → âmbar, com botão
     .parcial cabe em algumas, não em todas          → discreto
     (nada)   cabe em todas                          → não aparece
   A faixa não some quando está tudo certo: aviso que aparece sempre vira
   paisagem e para de ser lido. */
.saldo-faixa{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:20px 0 0;padding:14px 16px;border-radius:var(--raio);
  border:1px solid var(--borda2);background:rgba(11,21,18,.55)}
.saldo-faixa.curto{border-color:rgba(255,179,71,.45);background:rgba(255,179,71,.07)}
.saldo-faixa .txt{flex:1 1 260px;min-width:0;font-size:14px;color:var(--fraco);line-height:1.5}
.saldo-faixa .txt b{color:var(--texto)}
.saldo-faixa.curto .txt b{color:var(--alerta)}
.saldo-faixa .v{font-family:var(--dado);font-variant-numeric:tabular-nums}
.saldo-faixa .botao{flex:0 0 auto}
@media (max-width:520px){ .saldo-faixa .botao{width:100%;text-align:center} }

/* cartão que não cabe no saldo: continua clicável (o aviso explica), mas o
   preço avisa antes de a pessoa gastar o clique */
.cat-item.caro .preco{color:var(--alerta)}
.cat-item.caro .preco::after{content:' · acima do seu saldo';
  font-family:var(--corpo);font-size:11px;color:var(--fraco2);letter-spacing:0}

/* == O AVISO DE SALDO — a caixa que aparece ANTES de digitar (23/08) ======
   Pedido do Junior: "quando eu clicar em qualquer coisa acima do meu saldo,
   tem que vir um popup: você não tem saldo, quer recarregar agora?".

   🚨 Ela avisa no CLIQUE, não depois de preencher. Descobrir que falta saldo
   só depois de digitar o CPF é fazer a pessoa trabalhar para ouvir não.

   O servidor continua conferindo saldo do mesmo jeito (402): esta caixa é
   cortesia, não é a trava. Quem protege o dinheiro é sempre o servidor. */
.inf-modal{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(5,10,8,.82);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s}
.inf-modal.on{opacity:1}
.inf-caixa{width:100%;max-width:440px;background:var(--tinta2);border:1px solid var(--borda2);
  border-top:2px solid var(--alerta);border-radius:var(--raio);padding:24px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.inf-caixa h3{font-family:var(--display);font-size:19px;font-weight:600;margin:0 0 8px;
  letter-spacing:-.01em;color:var(--texto)}
.inf-caixa p{margin:0 0 6px;color:var(--fraco);font-size:14.5px;line-height:1.55}
/* a conta na cara: quanto custa, quanto tem, quanto falta */
.inf-conta{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin:16px 0 4px;
  padding:14px 0;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}
.inf-conta .k{color:var(--fraco2);font-size:13px}
.inf-conta .v{font-family:var(--dado);font-size:14.5px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--texto)}
.inf-conta .falta .k,.inf-conta .falta .v{color:var(--alerta);font-weight:500}
.inf-acoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.inf-acoes .botao{flex:1 1 auto;text-align:center}
@media (max-width:420px){ .inf-acoes .botao{flex:1 1 100%} }

@media (prefers-reduced-motion: reduce){
  .inf-loader .t7,.inf-loader .arco,.inf-loader .pt,.botao.ocupado::after,.bt.ocupado::after,
  .inf-ok circle,.inf-ok path{animation:none}
  .inf-loader .t7,.inf-loader .arco,.inf-ok circle,.inf-ok path{stroke-dashoffset:0}
}
