/* ============================================================================
   Anssina·e — folha de estilo única do produto.

   ⚠️ É white-label: a MARCA que aparece ao signatário vem do banco
   (`organizacoes.marca`), não daqui. O que esta folha define é a ESTRUTURA — quem
   comprar o produto troca o nome, não o desenho da tela.

   Organização do arquivo, nesta ordem:
     1. tokens          6. avisos e estados
     2. base            7. passos (o fluxo de quem assina)
     3. esqueleto       8. métodos de autenticação
     4. tipografia      9. carregamento e progresso
     5. componentes    10. documento, responsivo, tema escuro e impressão

   ⚠️ Cor não carrega sozinha nenhum significado: todo status tem TEXTO junto do
   contraste. Daltônico é 8% dos homens, e aqui o que está em jogo é um documento
   assinado — "o verde quer dizer assinado" não é informação que se possa perder.
   ========================================================================== */

/* -------------------------------------------------------------- 1. tokens */
:root{
  /* tinta e papel */
  --tinta:#16202c; --tinta-2:#3b4a5a; --fraco:#6b7784; --fraquinho:#93a1b0;
  --papel:#f4f6f8; --cartao:#fff; --linha:#e3e7ec; --linha-forte:#cfd6de;

  /* a cor do produto */
  --acento:#0f6e5c; --acento-forte:#0b5748; --acento-fraco:#e7f2ef;
  --acento-borda:#bfe0d7; --acento-claro:#4fd1b5;

  /* estados */
  --alerta:#8a5a00; --alerta-fraco:#fdf3e0; --alerta-borda:#f0dcb4;
  --erro:#b32a2a; --erro-escuro:#8a1c1c; --erro-fraco:#fdecec; --erro-borda:#f3c2c2;
  --info:#1f5b8f; --info-fraco:#eaf2fa; --info-borda:#c5dbf0;

  /* espaço, curva e sombra — uma escala só, para as telas não divergirem */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:22px; --e6:32px; --e7:48px;
  --curva:10px; --curva-g:14px; --curva-p:7px;
  --sombra:0 1px 2px rgba(22,32,44,.06), 0 1px 3px rgba(22,32,44,.04);
  --sombra-alta:0 10px 30px rgba(22,32,44,.13), 0 2px 8px rgba(22,32,44,.07);

  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
}

/* ---------------------------------------------------------------- 2. base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);
  font:15px/1.55 var(--fonte);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ⚠️ Foco SEMPRE visível. Quem assina pode estar no teclado, no leitor de tela ou
   com a mão tremendo no celular; tirar o anel de foco para "ficar limpo" é tirar a
   única pista de onde a pessoa está no formulário. */
:focus-visible{outline:3px solid var(--acento-claro);outline-offset:2px;border-radius:3px}
::selection{background:var(--acento-fraco);color:var(--acento-forte)}
a{color:var(--acento);text-underline-offset:2px}
a:hover{color:var(--acento-forte)}
img{max-width:100%;height:auto}

/* ----------------------------------------------------------- 3. esqueleto */
/* ⚠️ Navy da ANFRA (#060d1f), e não a tinta do texto: é o mesmo fundo do decágono do
   selo, e é isso que faz a marca se apoiar na barra em vez de aparecer um retângulo
   mais claro em volta dela. Veio do `static/brand.css` do sistema irmão. */
header.topo{background:#060d1f;color:#eef2f6;padding:0 var(--e5);
  display:flex;align-items:center;gap:var(--e6);height:56px;
  position:sticky;top:0;z-index:40}
header.topo .marca{font-weight:800;letter-spacing:-.4px;font-size:16px;
  display:flex;align-items:center;gap:9px;white-space:nowrap;color:inherit;
  text-decoration:none}
/* O selo tem fundo próprio (o decágono navy da família ANFRA), então ele se apoia na
   barra em vez de recortar nela — por isso nada de `border-radius` aqui. */
header.topo .marca img{flex:none;display:block}
header.topo .marca img{width:30px;height:30px}
header.topo .marca em{color:var(--acento-claro);font-style:normal}
header.topo nav{display:flex;gap:var(--e5);height:100%;overflow-x:auto;
  scrollbar-width:none}
header.topo nav::-webkit-scrollbar{display:none}
header.topo nav a{color:var(--fraquinho);text-decoration:none;font-size:14px;
  display:flex;align-items:center;border-bottom:3px solid transparent;
  white-space:nowrap;transition:color .12s}
header.topo nav a:hover{color:#fff}
header.topo nav a.ativo{color:#fff;border-bottom-color:var(--acento-claro);font-weight:600}
/* O canto direito diz em que pé está o sistema. Hoje diz "sem login", porque é a
   verdade — e é melhor que a tela repita isso do que o operador esquecer. */
header.topo .estado{margin-left:auto;font-size:12px;color:var(--fraquinho);
  display:flex;align-items:center;gap:6px;white-space:nowrap}
header.topo .estado b{color:#ffd9a0;font-weight:600}

main{max-width:1000px;margin:0 auto;padding:var(--e5) var(--e5) var(--e7)}
main.estreito{max-width:680px;font-size:16px}
footer.rodape{max-width:1000px;margin:0 auto;padding:0 var(--e5) var(--e6);
  color:var(--fraco);font-size:12px;line-height:1.6}
footer.rodape.centro{max-width:680px;text-align:center}

/* --------------------------------------------------------- 4. tipografia */
h1{font-size:23px;line-height:1.25;margin:0 0 var(--e1);letter-spacing:-.3px}
main.estreito h1{font-size:25px;margin-bottom:6px}
h2{font-size:12px;margin:var(--e6) 0 var(--e3);text-transform:uppercase;
  letter-spacing:.08em;color:var(--fraco);font-weight:700}
h3{font-size:15px;margin:0 0 var(--e2)}
.sub{color:var(--fraco);margin:0 0 var(--e5);font-size:14px}
.nota{color:var(--fraco);font-size:13px;line-height:1.55;margin:var(--e2) 0 0}
.nota b{color:var(--tinta-2)}
code{font:12px/1.5 var(--mono);background:#eef1f4;padding:2px 6px;border-radius:5px;
  word-break:break-all;color:var(--tinta-2)}

/* -------------------------------------------------------- 5. componentes */
.cartao{background:var(--cartao);border:1px solid var(--linha);
  border-radius:var(--curva);padding:var(--e4) var(--e5);margin-bottom:var(--e3);
  box-shadow:var(--sombra)}
.cartao.destaque{border-color:var(--acento-borda);background:var(--acento-fraco)}
main.estreito .cartao{margin:var(--e4) 0 var(--e5)}

/* Os números do painel. Cartão pequeno, número grande, rótulo por extenso. */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--e3);margin-bottom:var(--e5)}
.numero{background:var(--cartao);border:1px solid var(--linha);
  border-radius:var(--curva);padding:var(--e4);box-shadow:var(--sombra)}
.numero .valor{font-size:27px;font-weight:700;letter-spacing:-.5px;line-height:1.1}
.numero .rotulo{font-size:12px;color:var(--fraco);margin-top:var(--e1);
  text-transform:uppercase;letter-spacing:.05em;font-weight:600}

table{width:100%;border-collapse:collapse;background:var(--cartao);
  border:1px solid var(--linha);border-radius:var(--curva);overflow:hidden;
  box-shadow:var(--sombra)}
th,td{text-align:left;padding:11px var(--e4);border-bottom:1px solid var(--linha);
  font-size:14px;vertical-align:top}
th{background:#fafbfc;color:var(--fraco);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#fbfcfd}

/* O status de um envio. SEMPRE com texto — ver o aviso do topo do arquivo. */
.selo{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 9px;
  border-radius:99px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  background:#eef1f4;color:var(--tinta-2);border:1px solid var(--linha-forte)}
.selo::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor;
  flex:none}
.selo.assinado{background:var(--acento-fraco);color:var(--acento-forte);
  border-color:var(--acento-borda)}
.selo.aguardando{background:var(--alerta-fraco);color:var(--alerta);
  border-color:var(--alerta-borda)}
.selo.rascunho{background:#eef1f4;color:var(--fraco)}
.selo.recusado,.selo.expirado,.selo.cancelado{background:var(--erro-fraco);color:var(--erro-escuro);
  border-color:var(--erro-borda)}
.selo.novo{background:var(--info-fraco);color:var(--info);border-color:var(--info-borda)}

label{display:block;font-size:11px;font-weight:700;color:var(--fraco);
  text-transform:uppercase;letter-spacing:.06em;margin:var(--e4) 0 var(--e1)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--linha-forte);
  border-radius:var(--curva-p);font-size:15px;font-family:inherit;
  background:var(--cartao);color:var(--tinta);transition:border-color .12s,box-shadow .12s}
input[type=file]{width:100%;padding:10px 12px;border:1px solid var(--linha-forte);
  border-radius:var(--curva-p);font-size:14px;font-family:inherit;
  background:var(--cartao);color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px var(--acento-fraco)}
input::placeholder{color:var(--fraquinho)}

button,.botao{background:var(--acento);color:#fff;border:0;border-radius:var(--curva-p);
  padding:11px 20px;font-size:14.5px;font-weight:600;cursor:pointer;
  margin-top:var(--e4);font-family:inherit;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;text-decoration:none;transition:filter .12s}
button:hover:not(:disabled),.botao:hover{filter:brightness(1.09)}
button:disabled{opacity:.55;cursor:not-allowed}
button.secundario{background:var(--cartao);color:var(--tinta-2);
  border:1px solid var(--linha-forte)}
main.estreito button{width:100%;padding:14px 20px;font-size:16px}
main.estreito form{margin-bottom:var(--e3)}

/* O botão que está trabalhando DIZ que está — e para de aceitar clique, senão o
   operador manda o mesmo envio três vezes achando que travou. */
button[aria-busy=true]::before{content:"";width:14px;height:14px;flex:none;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:99px;
  animation:girar .7s linear infinite}
button.secundario[aria-busy=true]::before{border-color:var(--linha-forte);
  border-top-color:var(--acento)}
@keyframes girar{to{transform:rotate(360deg)}}

label.caixa{display:flex;gap:var(--e3);align-items:flex-start;text-transform:none;
  letter-spacing:0;font-size:15.5px;font-weight:400;color:var(--tinta);line-height:1.5;
  background:var(--cartao);border:1px solid var(--linha-forte);border-radius:var(--curva);
  padding:var(--e4);cursor:pointer;transition:border-color .12s,background .12s}
label.caixa:hover{border-color:var(--acento-borda);background:var(--acento-fraco)}
label.caixa input{margin-top:3px;width:19px;height:19px;flex:none;
  accent-color:var(--acento)}

pre.termos{background:var(--cartao);border:1px solid var(--linha);
  border-radius:var(--curva);padding:var(--e5);white-space:pre-wrap;
  font:13.5px/1.65 var(--mono);max-height:58vh;overflow:auto;
  box-shadow:inset 0 -14px 14px -14px rgba(22,32,44,.13)}

/* ---------------------------------------------------- 6. avisos e estados */
.aviso,.erro,.ok,.info{border-radius:var(--curva);padding:13px var(--e4);
  margin-bottom:var(--e4);font-size:14px;line-height:1.55}
.aviso{background:var(--alerta-fraco);border:1px solid var(--alerta-borda);
  border-left:4px solid var(--alerta)}
.aviso b{color:var(--alerta)}
.erro{background:var(--erro-fraco);border:1px solid var(--erro-borda);
  border-left:4px solid var(--erro);font-weight:600;color:var(--erro-escuro)}
.ok{background:var(--acento-fraco);border:1px solid var(--acento-borda);
  border-left:4px solid var(--acento);color:var(--acento-forte);font-weight:600}
.info{background:var(--info-fraco);border:1px solid var(--info-borda);
  border-left:4px solid var(--info)}
.aviso ul,.ok ul,.info ul{margin:var(--e2) 0 0;padding-left:18px}
.aviso li,.ok li,.info li{margin:4px 0}
.aviso p,.ok p,.info p{margin:var(--e2) 0 0}

.vazio{color:var(--fraco);padding:var(--e6) var(--e5);text-align:center;
  background:var(--cartao);border:1px dashed var(--linha-forte);
  border-radius:var(--curva);font-size:14px}
.vazio b{display:block;color:var(--tinta-2);font-size:15px;margin-bottom:6px}

.faixa-ensaio{background:var(--erro-escuro);color:#fff;font-size:13px;font-weight:700;
  padding:10px var(--e5);text-align:center;letter-spacing:.01em}

/* ------------------------------------------------------------- 7. passos */
/* O fluxo de quem assina, em quatro etapas. Serve para a pessoa saber que existe um
   fim — ninguém abandona menos um formulário do que quem sabe quanto falta. */
.passos{display:flex;gap:var(--e1);margin:0 0 var(--e5);padding:0;list-style:none;
  counter-reset:passo}
.passos li{flex:1;font-size:11px;color:var(--fraquinho);text-transform:uppercase;
  letter-spacing:.05em;font-weight:700;padding-top:var(--e2);
  border-top:3px solid var(--linha);counter-increment:passo;line-height:1.35}
.passos li::before{content:counter(passo) ". "}
.passos li.feito{color:var(--acento);border-top-color:var(--acento-claro)}
.passos li.feito::before{content:"✓ "}
.passos li.agora{color:var(--acento-forte);border-top-color:var(--acento)}

/* --------------------------------------------- 8. métodos de autenticação */
/* ⚠️ A regra que governa este projeto vale aqui acima de tudo: **não prometer o que
   o sistema não faz**. Os métodos que ainda não existem aparecem, porque o operador
   precisa saber o que vem — mas aparecem DESLIGADOS e dizendo o que falta em cada
   um. Cartão clicável que não funciona é promessa; cartão apagado que explica é
   roteiro. */
.metodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));
  gap:var(--e3);margin-top:var(--e2)}
.metodo{position:relative;display:flex;gap:var(--e3);align-items:flex-start;
  background:var(--cartao);border:1px solid var(--linha-forte);
  border-radius:var(--curva);padding:var(--e4);cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:400;color:var(--tinta);
  font-size:14px;margin:0;transition:border-color .12s,box-shadow .12s}
.metodo:hover{border-color:var(--acento-borda);box-shadow:var(--sombra)}
.metodo input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--acento)}
.metodo .nome{font-weight:700;font-size:14.5px;display:block;margin-bottom:3px}
.metodo .porque{font-size:12.5px;color:var(--fraco);line-height:1.45;display:block}
.metodo.escolhido{border-color:var(--acento);background:var(--acento-fraco);
  box-shadow:0 0 0 1px var(--acento)}
.metodo.indisponivel{cursor:not-allowed;background:#fbfcfd;border-style:dashed}
.metodo.indisponivel:hover{border-color:var(--linha-forte);box-shadow:none}
.metodo.indisponivel .nome{color:var(--fraco)}
.metodo .tarja{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--alerta);background:var(--alerta-fraco);
  border:1px solid var(--alerta-borda);border-radius:99px;padding:1px 7px;
  margin-left:6px;vertical-align:middle}

/* ------------------------------------------- 9. carregamento e progresso */
/* Regra da casa: toda rotina tem tela de carregamento COM PROGRESSO. Aqui o
   progresso é real — vem dos bytes que o navegador já mandou, não de uma animação
   que finge. Enquanto a barra anda, ela anda de verdade. */
.tapume{position:fixed;inset:0;background:rgba(18,26,36,.72);
  display:flex;align-items:center;justify-content:center;
  padding:var(--e5);z-index:90}
.tapume[hidden]{display:none}
.painel-carga{background:var(--cartao);border-radius:var(--curva-g);
  padding:var(--e6) var(--e5) var(--e5);max-width:430px;width:100%;
  box-shadow:var(--sombra-alta);text-align:center}
.painel-carga h3{font-size:17px;margin:0 0 6px}
.painel-carga .detalhe{color:var(--fraco);font-size:13.5px;margin:0 0 var(--e5);
  min-height:2.6em}
.barra{height:9px;background:#e8ecf0;border-radius:99px;overflow:hidden}
.barra i{display:block;height:100%;width:0;background:var(--acento);
  border-radius:99px;transition:width .18s ease-out}
/* Quando o navegador não sabe quanto falta, a barra DIZ que não sabe, em vez de
   parar em 99% — barra parada é o que faz a pessoa fechar a aba. */
.barra.indefinida i{width:38%;animation:vaievem 1.15s ease-in-out infinite}
@keyframes vaievem{0%{margin-left:-38%}100%{margin-left:100%}}
.painel-carga .conta{display:flex;justify-content:space-between;
  font:12px/1.4 var(--mono);color:var(--fraco);margin-top:var(--e2)}
.painel-carga .etapas{list-style:none;margin:var(--e5) 0 0;padding:0;text-align:left}
.painel-carga .etapas li{font-size:13px;color:var(--fraquinho);padding:4px 0 4px 22px;
  position:relative}
.painel-carga .etapas li::before{content:"○";position:absolute;left:4px}
.painel-carga .etapas li.agora{color:var(--tinta)}
.painel-carga .etapas li.agora::before{content:"●";color:var(--acento)}
.painel-carga .etapas li.feito{color:var(--fraco)}
.painel-carga .etapas li.feito::before{content:"✓";color:var(--acento)}

/* A lista dos arquivos escolhidos, antes de subir. Mostra tamanho porque o teto é
   real e o operador precisa ver que estourou ANTES de esperar o upload. */
.arquivos{list-style:none;margin:var(--e3) 0 0;padding:0}
.arquivos li{display:flex;justify-content:space-between;align-items:center;gap:var(--e3);
  padding:9px 12px;background:var(--cartao);border:1px solid var(--linha);
  border-radius:var(--curva-p);margin-bottom:6px;font-size:13.5px}
.arquivos li .peso{font:12px/1 var(--mono);color:var(--fraco);white-space:nowrap}
.arquivos li.grande{border-color:var(--erro-borda);background:var(--erro-fraco)}
.arquivos li.grande .peso{color:var(--erro-escuro);font-weight:700}
.soma{display:flex;justify-content:space-between;font-size:12.5px;color:var(--fraco);
  padding:var(--e2) 12px 0;border-top:1px solid var(--linha);margin-top:var(--e2)}
.soma.estourou{color:var(--erro-escuro);font-weight:700}

/* A área de arrastar arquivo. Continua sendo um input de arquivo por baixo: sem
   JavaScript, o campo comum aparece e funciona igual. */
/* ⚠️ É um <label> — então herda o maiúsculo e o espaçamento dos rótulos de campo, e
   "ARRASTE OS PDFS AQUI" sai gritando. Desfazer aqui, e não no HTML. */
.solta{border:2px dashed var(--linha-forte);border-radius:var(--curva);
  padding:var(--e6) var(--e5);text-align:center;background:var(--cartao);
  cursor:pointer;transition:border-color .12s,background .12s;display:block;
  text-transform:none;letter-spacing:0;color:var(--tinta);font-weight:400;
  margin:var(--e1) 0 var(--e2)}
.solta:hover,.solta.sobre{border-color:var(--acento);background:var(--acento-fraco)}
.solta b{display:block;font-size:15px;margin-bottom:4px}
.solta span{font-size:13px;color:var(--fraco);display:block}

/* ------------------------------- 10. o documento na tela de quem assina */
body.assinatura{background:#eaeef2}
.anexo{background:var(--cartao);border:1px solid var(--linha);
  border-radius:var(--curva);padding:var(--e4);margin-bottom:var(--e4);
  box-shadow:var(--sombra)}
.anexo-cabeca{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--e3);margin-bottom:var(--e3);font-size:15px}
.anexo-cabeca a{font-size:13px;white-space:nowrap}
iframe.documento{width:100%;height:62vh;min-height:380px;border:1px solid var(--linha);
  border-radius:var(--curva-p);background:var(--papel);display:block}
.anexo iframe.documento{height:46vh;min-height:300px}
.anexo label{margin-top:var(--e3)}

/* O campo do código: números grandes e espaçados, para conferir dígito a dígito. */
/* `display:block` não é enfeite: campo é inline-block, e `margin:0 auto` não centra
   inline-block — o campo ficava encostado na esquerda. */
#codigo{font:700 27px/1.2 var(--mono);letter-spacing:.34em;text-align:center;
  padding:15px 11px;max-width:270px;margin:0 auto;display:block}

/* ----------------------------------------------- 11. responsivo e temas */
@media (max-width:640px){
  :root{--e5:16px;--e6:24px;--e7:36px}
  header.topo{gap:var(--e4);padding:0 var(--e4);height:52px}
  header.topo .estado{display:none}   /* no celular o espaço é do menu */
  main{padding:var(--e4) var(--e4) var(--e7)}
  h1{font-size:20px}
  main.estreito h1{font-size:22px}
  .numeros{grid-template-columns:repeat(2,1fr)}
  .metodos{grid-template-columns:1fr}
  iframe.documento,.anexo iframe.documento{height:56vh;min-height:260px}
  /* Tabela larga vira rolagem própria, em vez de espremer a coluna do hash. */
  .rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rolagem table{min-width:520px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

/* Tema escuro: quem decide é o sistema operacional. O PDF dentro da moldura continua
   branco — é o documento, e documento não se pinta. */
@media (prefers-color-scheme:dark){
  :root{
    --tinta:#e8edf2; --tinta-2:#c3cdd7; --fraco:#93a1b0; --fraquinho:#6b7784;
    --papel:#11171e; --cartao:#19222c; --linha:#273240; --linha-forte:#34414f;
    --acento:#2f9e83; --acento-forte:#57d3b2; --acento-fraco:#132b27;
    --acento-borda:#1f4f45;
    --alerta:#e0a94a; --alerta-fraco:#2a2216; --alerta-borda:#4a3a1c;
    --erro:#e06a6a; --erro-escuro:#f0a0a0; --erro-fraco:#2b1818; --erro-borda:#4d2626;
    --info:#7ab3e0; --info-fraco:#152532; --info-borda:#27435c;
    --sombra:0 1px 2px rgba(0,0,0,.4); --sombra-alta:0 10px 30px rgba(0,0,0,.55);
  }
  body.assinatura{background:#0d1319}
  th{background:#1d2732}
  tbody tr:hover td{background:#1d2732}
  code{background:#222d39}
  .barra{background:#273240}
  .solta,.metodo.indisponivel,.numero{background:#161f28}
}

/* Impressão: o comprovante de assinatura é a coisa mais provável de sair em papel. */
@media print{
  header.topo,.tapume,button,.solta,form,.passos{display:none !important}
  body{background:#fff;font-size:11pt;color:#000}
  .cartao,table,.ok,.aviso{box-shadow:none;break-inside:avoid}
  main,main.estreito{max-width:none;padding:0}
  iframe.documento{display:none}
}

/* ------------------------------------------------- 12. a porta pública (`/`) */
/* A única tela que a internet inteira alcança sem token. Não mostra dado de
   ninguém — o que ela precisa é dizer, em dez segundos, o que o produto é. */
.capa{background:linear-gradient(180deg,var(--tinta) 0%,#1d2a38 100%);color:#eef2f6;
  padding:var(--e7) var(--e5)}
.capa .dentro{max-width:1000px;margin:0 auto}
.capa .chapeu{font-size:12px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--acento-claro);font-weight:700;margin:0 0 var(--e3)}
.capa h1{font-size:34px;line-height:1.18;letter-spacing:-.8px;margin:0 0 var(--e4);
  max-width:19ch;color:#fff}
.capa .linha{font-size:17px;line-height:1.6;color:#c3cdd7;max-width:62ch;margin:0}
.capa .base{font-size:12.5px;color:#93a1b0;margin:var(--e5) 0 0;
  padding-top:var(--e4);border-top:1px solid rgba(255,255,255,.12)}
body.porta header.topo .estado a{color:var(--fraquinho);text-decoration:none}
body.porta header.topo .estado a:hover{color:#fff}

.pilares{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--e3)}
.pilar{background:var(--cartao);border:1px solid var(--linha);
  border-radius:var(--curva);padding:var(--e5);box-shadow:var(--sombra)}
.pilar .n{width:30px;height:30px;border-radius:99px;background:var(--acento-fraco);
  color:var(--acento-forte);font-weight:800;font-size:15px;display:flex;
  align-items:center;justify-content:center;margin-bottom:var(--e3)}
.pilar h3{font-size:16px;margin:0 0 var(--e2)}
.pilar p{margin:0;font-size:14px;color:var(--fraco);line-height:1.6}

ol.fluxo{margin:0;padding-left:var(--e5);font-size:14.5px;line-height:1.65}
ol.fluxo li{margin:var(--e2) 0;padding-left:var(--e1)}
ol.fluxo li::marker{color:var(--acento);font-weight:700}

@media (max-width:640px){
  .capa{padding:var(--e6) var(--e4)}
  .capa h1{font-size:25px;max-width:none}
  .capa .linha{font-size:15.5px}
}