/* Sistema visual da Missão do Polo Norte.
 *
 * Fonte única do desenho. As páginas internas (formulário, confirmação,
 * esgotado, checkout simulado) linkam este arquivo; a landing recebe EMBUTIDA
 * a parte de cima, até o marcador "só nas páginas internas", gerada por
 * `php artisan npm:build-lp`.
 *
 * A diferença de tratamento não é capricho: a landing é medida pelo portão do
 * passo 3 (CLM-LT-0008), que conta quem desiste antes de a página pintar, e um
 * <link> de CSS bloqueia o primeiro texto. As internas são pós-pagamento — ali
 * uma requisição a mais não custa nada e um arquivo em cache entre as páginas
 * custa menos ainda.
 *
 * Um teste garante que a LP publicada bate com este arquivo: sem ele, editar
 * aqui e esquecer de reconstruir faria os dois desenhos divergirem em silêncio.
 */

/* ── Fontes ────────────────────────────────────────────────────────────────
 * As três do sistema 4A, as mesmas do PDF (pilot/tools/install_fonts.sh).
 * Servidas por nós: o Google Fonts custaria dois hosts de terceiro antes do
 * primeiro texto e mais um operador de LGPD recebendo o IP de quem visita.
 * Petrona e Inconsolata são variable: um arquivo cobre todos os pesos.
 * `swap` = o texto aparece na fonte do sistema e troca quando a nossa chega.
 * Nunca esperar fonte para mostrar texto.
 */
@font-face{font-family:Petrona;src:url(/fonts/petrona.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Inconsolata;src:url(/fonts/inconsolata.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Caveat;src:url(/fonts/caveat.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  /* --sec era #6b7682: passava no papel (4,5:1) e reprovava no creme
     (4,2:1). #5f6975 dá 5,0:1 no creme e 5,5:1 no papel. */
  --vermelho:#b81e28; --verde:#15583c; --papel:#fdfcf9; --creme:#f7f3ea;
  --tinta:#171e27; --corpo:#2b3542; --sec:#5f6975; --fraco:#9ea6ae;
  --ouro:#b0873f; --linha:#e3dccb; --linha2:#ede8dc; --verdeclaro:#c9ddd0;
  /* O erro é um vermelho mais fundo que o da ação (o botão de comprar é
     --vermelho): a mesma cor para "compre" e para "errou" confundia. */
  --erro:#9e1b24;
  /* Campos e estados. A borda do campo é o que mostra onde tocar: precisa de
     3:1 contra o fundo (#8a8373 dá 3,8:1); --linha fica para os filetes. */
  --campo:#fff; --borda-campo:#8a8373; --escolhido:#f4f9f6;
  --erro-fundo:#fdecec; --erro-borda:#f0c0c0;
  --aviso-fundo:#fdf6e3; --aviso-borda:#e8d9a8;
  --ok-fundo:#f0f7f3;
  /* Placas de leitura da 4A (6% da cor) e o texto sobre o verde. */
  --placa-vermelha:#fbeeee; --placa-verde:#ecf3ee; --sobre-verde:#dbe8df;
  /* Raios: pequeno (botões, papel), médio (campos, caixas), grande (cartões). */
  --raio-p:4px; --raio:6px; --raio-g:8px;
  --serif:Petrona,Georgia,serif;
  --mono:Inconsolata,ui-monospace,monospace;
  --script:Caveat,cursive;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--corpo);font:400 1.0625rem/1.62 var(--serif)}

h1,h2,h3{font-family:var(--serif);color:var(--tinta);line-height:1.18;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(1.875rem,6.4vw,3.25rem)}
h2{font-size:clamp(1.5rem,4.2vw,2.375rem)}
h3{font-size:1.1875rem;margin-bottom:.3em}
h1,h2{text-wrap:balance}
p,li{text-wrap:pretty}
p{margin:0 0 1em}
a{color:var(--verde);text-underline-offset:.15em}
::selection{background:var(--verdeclaro);color:var(--tinta)}

/* Foco de teclado desenhado: o anel padrão some sobre o vermelho do botão. */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--verde);outline-offset:3px}
.cta:focus-visible{outline-color:var(--tinta)}
/* No rodapé escuro o anel verde dava 2:1; o verde-claro dá 11,8:1. */
footer a:focus-visible{outline-color:var(--verdeclaro)}

/* Para quem ouve a página: está no documento, não na tela. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.w{max-width:1180px;margin:0 auto;padding:0 20px}
.estreito{max-width:720px}
.centro{text-align:center}

/* Rótulo em versalete: a voz institucional do Polo Norte, a mesma dos
   carimbos e cabeçalhos do PDF. */
.rotulo{font-family:var(--mono);font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sec)}
.script{font-family:var(--script);font-weight:600;color:var(--vermelho)}
.mono{font-family:var(--mono)}
.nw{white-space:nowrap}

/* Listra doce: o mesmo motivo do envelope e das pistas. */
.listra{height:12px;background:repeating-linear-gradient(115deg,var(--vermelho) 0 12px,var(--papel) 12px 24px)}
.listra.verde{background:repeating-linear-gradient(115deg,var(--verde) 0 12px,var(--papel) 12px 24px)}
.selo{display:inline-block;width:16px;height:12px;background:repeating-linear-gradient(115deg,var(--verde) 0 4px,transparent 4px 8px);vertical-align:-1px;margin-right:8px}

/* Botão: sombra sólida deslocada, como carimbo mal alinhado. */
.cta{display:inline-block;background:var(--vermelho);color:#fff;text-decoration:none;border:0;cursor:pointer;
  font:700 1.0625rem/1 var(--serif);padding:17px 26px;border-radius:var(--raio-p);
  box-shadow:4px 4px 0 var(--verde);transition:transform .08s,box-shadow .08s}
.cta:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--verde)}
.cta[disabled]{opacity:.45;cursor:not-allowed}
.cta .tag{font-family:var(--mono);font-weight:700;font-size:.9375rem;margin-left:10px;letter-spacing:.06em;white-space:nowrap}
.cta.pequeno{padding:10px 16px;font-size:.875rem;box-shadow:3px 3px 0 var(--verde)}
.cta.larga{display:block;width:100%;text-align:center}
.cta.fantasma{background:transparent;color:var(--sec);box-shadow:none;font-weight:400;padding:17px 10px}
.cta.fantasma:active{transform:none}

.micro{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sec);margin:14px 0 0}

header.topo{position:sticky;top:0;z-index:20;background:var(--papel);border-bottom:1px solid var(--linha2)}
/* Com texto grande o botão desce para a linha de baixo, em vez de a marca vazar.
   A marca entra na conta da quebra com 10em, não com a largura dela numa
   linha só: no celular ela cabe ao lado do botão e quebra em duas linhas;
   antes o botão descia já em 360px e o topo fixo ficava com 80px (UAT anu-9).
   O em acompanha o texto: ampliado, o botão volta a descer. */
header.topo .w{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;min-height:60px;padding-top:6px;padding-bottom:6px}
header.topo .marca{flex:1 1 10em;font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--verde);line-height:1.35;min-width:0;overflow-wrap:anywhere}
/* No celular estreito a marca quebra em duas linhas em vez de perder
   "Polo Norte" nas reticências, e o botão do topo fica sem o preço. */
@media(max-width:430px){
  header.topo .marca{letter-spacing:.16em}
  header.topo .cta.pequeno .tag{display:none}
}
header.topo .cta{white-space:nowrap;flex:none;min-height:44px;display:inline-flex;align-items:center}
/* Espaço de verdade antes do preço (o nome acessível era "de NatalR$ 59,90");
   a margem só completa o respiro. */
.cta .tag{margin-left:.3em}
header.topo .estrela{color:var(--ouro);margin-right:8px}
header.topo.solto{position:static}

footer{background:var(--tinta);color:var(--fraco);font-size:.875rem;padding:40px 0}
footer a{color:var(--verdeclaro)}
.todo{background:#3a3020;color:#e8c979;padding:2px 7px;border-radius:3px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em}


/* ── Peças da 4A usadas nas duas pontas (landing e páginas de dentro) ──── */
[hidden]{display:none!important}
/* Trilha: o numeral em anel do PDF, ímpar em vermelho e par em verde. */
.trilha{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px}
.trilha li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;line-height:1.4}
.trilha strong{display:block;color:var(--tinta);font-weight:600}
.trilha li>span:last-child{color:var(--sec);font-size:.9375rem}
.anel{width:32px;height:32px;border:2px solid var(--vermelho);border-radius:50%;display:grid;place-items:center;
  font:700 .875rem/1 var(--mono);color:var(--vermelho)}
.trilha li:nth-child(even) .anel{border-color:var(--verde);color:var(--verde)}
/* Carimbo tracejado da 4A: bate uma vez ao chegar e fica. */
.carimbo{display:inline-flex;flex-direction:column;align-items:center;gap:1px;margin:4px 8px 4px 2px;padding:9px 14px;
  border:2px dashed var(--verde);border-radius:var(--raio);color:var(--verde);font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.14em;line-height:1.25;transform:rotate(-4deg);animation:carimba .38s cubic-bezier(.2,.8,.2,1) both}
.carimbo span{font-size:.6875rem}
.carimbo strong{font-size:.9375rem;font-weight:700;letter-spacing:.1em}
@keyframes carimba{from{opacity:0;transform:rotate(-4deg) scale(1.3)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.carimbo{animation:none}}

/* ═══ só nas páginas internas ═══════════════════════════════════════════
 * Daqui para baixo, só o formulário, a confirmação e as páginas de dentro:
 * o npm:build-lp corta neste marcador, e a landing não pinta com o que não
 * usa. As páginas de dentro linkam o arquivo inteiro. */

/* ── Campos ───────────────────────────────────────────────────────────────
 * Quem preenche é pai ou mãe no celular, provavelmente à noite. Alvo grande,
 * fonte de 17px para o iOS não dar zoom ao focar, e foco visível de verdade.
 */
main.miolo{padding-top:32px;padding-bottom:48px}
.lead{font-size:1.1875rem}
/* Sem JS, uns avisos explicam; com JS, outros prometem o que só o script faz. */
form.passos-js .so-sem-js{display:none}
form:not(.passos-js) .so-com-js{display:none}
label{display:block;font-weight:600;color:var(--tinta);margin-bottom:6px}
label .opc{font-weight:400;color:var(--sec);font-size:.875rem}
.ajuda{color:var(--sec);font-size:.9375rem;margin:0 0 12px;line-height:1.5;max-width:65ch}

fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;display:block;width:100%}

input[type=text],input[type=email],input[type=number],input[type=tel],input[type=date],select,textarea{
  width:100%;padding:14px 14px;font:400 1.0625rem/1.5 var(--serif);color:var(--corpo);caret-color:var(--verde);
  background:var(--campo);border:1px solid var(--borda-campo);border-radius:var(--raio);-webkit-appearance:none;appearance:none}
/* O iOS encolhe o campo de data vazio sem appearance; a altura mínima o
   mantém do tamanho dos outros, e o texto à esquerda como eles. */
input[type=date]{min-height:54px;display:block}
input[type=date]::-webkit-date-and-time-value{text-align:left}
textarea{min-height:110px;resize:vertical}
select{background-image:linear-gradient(45deg,transparent 50%,var(--sec) 50%),linear-gradient(135deg,var(--sec) 50%,transparent 50%);
  background-position:calc(100% - 19px) 51%,calc(100% - 14px) 51%;background-size:5px 5px;background-repeat:no-repeat;padding-right:42px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--verde);outline-offset:1px;border-color:var(--verde)}
input::placeholder,textarea::placeholder{color:var(--sec);opacity:1}
[aria-invalid="true"]:is(input,select,textarea){border-color:var(--erro)}

.campo{margin:0 0 20px}
.campo.ultimo{margin-bottom:0}
.minimo{font-size:.875rem;color:var(--sec);margin:6px 0 0}
.linha2{display:flex;gap:10px}
.linha2>*{flex:1;min-width:0}
.linha2 .campo{margin-bottom:0}
.linha2 .idade{flex:0 0 96px}
.outro{margin-top:12px}

/* Opções: o alvo é o cartão inteiro, não o círculo de 12px. */
.opcoes{display:grid;gap:10px}
.opcoes label{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:var(--corpo);
  padding:15px 16px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--campo);cursor:pointer;margin:0}
.opcoes label:hover{border-color:var(--verde)}
.opcoes input{margin-top:3px;flex:none;accent-color:var(--verde);width:18px;height:18px}
.opcoes label:has(input:focus-visible){outline:2px solid var(--verde);outline-offset:2px}
.opcoes input:checked+span{font-weight:600;color:var(--tinta)}
.opcoes label:has(input:checked){border-color:var(--verde);background:var(--escolhido)}

.erro{color:var(--erro);font-size:.9375rem;margin:7px 0 0}
/* O atalho de um erro que se corrige em outro passo (o presente citado num
   fato, um lugar no cômodo do esconderijo). Alvo de toque de 44 px. */
.erro-atalho{background:none;border:0;padding:0;font:inherit;font-size:.9375rem;font-weight:600;color:var(--verde);text-decoration:underline;text-underline-offset:.15em;cursor:pointer;min-height:44px}
.caixa-erro{background:var(--erro-fundo);border:1px solid var(--erro-borda);border-radius:var(--raio);padding:13px 15px;margin:0 0 18px;font-size:.9375rem;color:var(--corpo)}
.caixa-erro:focus{outline:2px solid var(--erro);outline-offset:2px}
.caixa-erro ul{margin:6px 0 0;padding-left:20px}
.caixa-erro li{margin-top:4px}
.caixa-erro a{color:var(--corpo);display:block;padding:2px 0}
.caixa-alterna{background:none;border:0;padding:0 0 0 10px;font:inherit;font-size:.9375rem;color:var(--erro);text-decoration:underline;text-underline-offset:.15em;cursor:pointer;min-height:32px}
.caixa-erro .n{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--erro);white-space:nowrap}
.aviso{background:var(--aviso-fundo);border:1px solid var(--aviso-borda);border-radius:var(--raio);padding:13px 15px;margin:0 0 18px;font-size:.9375rem}
.ok{background:var(--ok-fundo);border:1px solid var(--verdeclaro);border-radius:var(--raio);padding:13px 15px;margin:0 0 18px;font-size:.9375rem}
/* Estado em andamento: neutro. O amarelo do .aviso é para o que pede atenção. */
.estado{background:var(--campo);border:1px solid var(--linha);border-radius:var(--raio);padding:13px 15px;margin:0 0 18px;font-size:.9375rem}

.cartao{background:var(--campo);border:1px solid var(--linha);border-radius:var(--raio-g);padding:20px}
.preco-caixa{background:var(--creme);border:1px solid var(--linha);border-radius:var(--raio-p);padding:30px 22px;text-align:center}
.preco-caixa .nome{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sec);margin-bottom:10px}
.preco-caixa .valor{font-family:var(--mono);font-weight:700;font-size:clamp(2.5rem,8vw,3.5rem);color:var(--vermelho);line-height:1;display:block;margin-bottom:6px}


/* ── Formulário por passos ────────────────────────────────────────────────
 * Uma pergunta por tela, como onboarding. O motivo não é moda: o formulário
 * não existe para ser preenchido, existe para extrair detalhe rico. Uma
 * parede de 25 campos convida resposta de três palavras, e "o sofá" não vira
 * pista — "o sofá cinza onde a gente faz sessão pipoca na sexta" vira.
 *
 * Tudo aqui é progressive enhancement: sem JavaScript as seções aparecem
 * todas, empilhadas, e o formulário continua funcionando como sempre.
 */
.passo{display:none}
.passo.ativo{display:block;animation:entra .24s ease-out}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.passo.ativo{animation:none}}

/* Sem JS, nenhum passo se esconde: o .passos-js só é ligado pelo script.
 *
 * O botão de ENVIAR continua visível, e isso é o ponto inteiro: some a barra
 * de progresso e somem "Continuar" e "Voltar", que sem JS não fazem nada — mas
 * quem chegou aqui já pagou, e um formulário que não pode ser enviado é pior
 * que um formulário feio. Por isso o estado padrão do HTML é o de sem-JS
 * (enviar visível, continuar escondido), e é o script que inverte. */
form:not(.passos-js) .passo{display:block;padding-bottom:30px;border-bottom:1px solid var(--linha2);margin-bottom:30px}
form:not(.passos-js) .barra-passos{display:none}
form:not(.passos-js) .navegacao{position:static;border:0}

.barra-passos{position:sticky;top:0;z-index:10;background:var(--papel);padding:14px 0 12px;border-bottom:1px solid var(--linha2)}
.barra-passos .trilho{height:5px;background:var(--linha2);border-radius:3px;overflow:hidden}
.barra-passos .cheio{height:100%;width:100%;background:var(--verde);border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .3s ease-out}
.barra-passos .legenda{display:flex;justify-content:space-between;align-items:baseline;margin-top:9px;gap:12px}
.barra-passos .secao{font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--verde)}
.barra-passos .quanto{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--sec);white-space:nowrap}

.passo{padding:30px 0 10px}
.passo .pergunta{font-size:clamp(1.4375rem,5vw,1.9375rem);line-height:1.22;color:var(--tinta);font-weight:600;margin:0 0 10px}
.passo .pergunta:focus{outline:0}
.passo .pergunta label{display:block;margin:0;font:inherit;color:inherit;cursor:default}
.passo .pergunta .script{font-size:1.05em}
.pergunta .opc{font-size:max(.9375rem,.55em);font-weight:400;color:var(--sec);white-space:nowrap}
/* Exemplo: o rótulo em versalete, como os campos do PDF, diz o que é o
   bloco para quem vê e para quem ouve. */
.passo .exemplo{background:var(--creme);border-radius:var(--raio);
  padding:12px 14px;margin:0 0 16px;font-size:.9375rem;color:var(--sec);font-style:italic;max-width:65ch}
.exemplo-rotulo{display:block;font:normal 600 .75rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--verde);margin-bottom:6px}

.navegacao{position:sticky;bottom:0;background:var(--papel);border-top:1px solid var(--linha2);
  padding:14px 0 max(18px,env(safe-area-inset-bottom));margin-top:20px;display:flex;gap:10px;align-items:center}
.navegacao .cta{flex:1}
.navegacao .voltar{flex:0 0 auto}
.cta.enviando{opacity:.85;cursor:progress}
.dica-teclado{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sec);text-align:center;margin:10px 0 0}
form.no-fim .dica-teclado{display:none}
@media(max-width:560px){.dica-teclado{display:none}}

/* O que é fixo não pode esconder o campo em foco (WCAG 2.4.11): a rolagem
   do navegador para antes da barra de cima e da navegação de baixo. Em tela
   baixa (celular deitado, zoom de 400%) nada fica fixo. */
:root:has(form.passos-js){scroll-padding:4.75rem 0 6.25rem}
@media(max-height:520px){
  .barra-passos,.navegacao{position:static}
  :root:has(form.passos-js){scroll-padding:0}
}
@media(prefers-reduced-motion:reduce){.barra-passos .cheio{transition:none}}

.lugar-cartao{border:1px solid var(--linha);border-radius:var(--raio-g);padding:16px;background:var(--campo);margin-bottom:14px}
/* legend flutuante: fora da borda do fieldset, como um título comum. */
.lugar-cartao>legend{float:left;margin:0 0 12px}
.lugar-cartao>legend+*{clear:left}
.lugar-cartao h3{font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--verde);margin:0}
.restaurado{background:var(--ok-fundo);border:1px solid var(--verdeclaro);border-radius:var(--raio);padding:6px 6px 6px 14px;margin:0 0 18px;font-size:.9375rem;display:flex;gap:12px;align-items:center;justify-content:space-between}
.restaurado button{background:none;border:0;color:var(--verde);font:inherit;text-decoration:underline;text-underline-offset:.15em;cursor:pointer;padding:0 8px;min-height:44px;flex:none}
.restaurado button[data-confirma]{color:var(--erro);font-weight:600}

/* ── Abertura do formulário ────────────────────────────────────────────────
 * Só na primeira visita. Enquanto ela está na tela, o passo 1 já é o ativo
 * (o estado do script não muda), mas fica escondido com a barra e a
 * navegação. Sem JS é a introdução do formulário longo, sem o botão. */
.capa{padding:30px 0 10px}
form.passos-js:not(.na-capa) .capa{display:none}
form.na-capa .barra-passos,form.na-capa .passo.ativo,form.na-capa .navegacao,form.na-capa .dica-teclado{display:none}
form:not(.passos-js) #comecar{display:none}
.capa-titulo{font-size:clamp(1.5625rem,5.4vw,2.125rem);line-height:1.2;margin:0 0 12px}
.capa-titulo .script{font-size:1.05em}
.capa-tamanho{font-size:1.125rem;color:var(--corpo);margin:0 0 22px}
.capa-garantias{margin:0 0 26px;padding:16px 16px 16px 34px;background:var(--creme);border-radius:var(--raio);font-size:.9375rem;color:var(--corpo)}
.capa-garantias li{margin:0 0 6px}
.capa-garantias li:last-child{margin:0}
.capa-garantias li::marker{color:var(--verde)}

/* ── Conferência: a Ordem antes do envio ───────────────────────────────── */
.dossie{background:var(--campo);border:1px solid var(--linha);border-radius:var(--raio-g);margin:8px 0 26px;overflow:hidden}
.dossie-titulo{margin:0;padding:12px 16px;background:var(--creme);border-bottom:1px solid var(--linha2);
  font:600 .75rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--verde)}
.dossie h3{margin:0;padding:14px 16px 6px;font:600 .75rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sec)}
.dossie ul{list-style:none;margin:0;padding:0}
.dossie-linha{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;width:100%;min-height:52px;
  padding:10px 16px;border:0;border-top:1px solid var(--linha2);background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.dossie-linha:hover{background:var(--escolhido)}
/* O cartão tem overflow:hidden: o anel vai para dentro, senão sai cortado. */
.dossie-linha:focus-visible{outline-offset:-3px}
.dossie-rotulo{grid-column:1;font-size:.875rem;font-weight:600;color:var(--tinta);line-height:1.3}
.dossie-valor{grid-column:1;font-size:.9375rem;color:var(--corpo);line-height:1.45;overflow-wrap:anywhere}
.dossie-alterar{grid-column:2;grid-row:1/span 2;font-size:.875rem;color:var(--verde);text-decoration:underline;text-underline-offset:.15em}
.legenda-autoriza{font:600 .75rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--verde);margin:0 0 10px}

/* Página de recebido. */
.cabeca-recebido{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin:0 0 20px}
.cabeca-recebido h1{margin:0}
h2.depois{font-size:1.25rem;margin:30px 0 10px}
ol.depois{margin:0 0 22px;padding-left:22px}
ol.depois li{margin-bottom:6px}