/* Página pública do NDA, vestida com o design system da marca.
 *
 * Os tokens vêm de /tokens.css — cópia local de design-system/tokens/*.css
 * gerada por ferramentas/sincronizar_assinatura.py, porque a Vercel publica
 * contratos/assinatura como raiz e não enxerga nada acima dela.
 *
 * Três decisões que explicam o resto do arquivo:
 *
 *  1. O documento é lido na tela em rem, não em pontos. Papel A4 só existe no
 *     @media print — no celular, um texto dimensionado para folha fica
 *     minúsculo. A página não oferece impressão; as regras de papel existem
 *     para que um Ctrl+P acidental não devolva a tela com as barras fixas.
 *  2. Nenhum botão no topo. A ação mora numa barra fixa embaixo, na zona do
 *     polegar, e é a mesma faixa que depois vira estado ("enviando o código…",
 *     "assinado"). No topo fica só identidade e o progresso da leitura.
 *  3. Capa do documento em basalto, corpo em papel claro: a marca aparece na
 *     abertura e sai da frente quando começa o que precisa ser lido.
 */

@import url('/tokens.css');

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

:root {
  --medida: 66ch;              /* largura de leitura confortável */
  --papel: min(46rem, 100%);   /* largura da folha na tela */
  --topo-altura: 56px;
  --campo-tinta: var(--ember-700);
  --campo-fundo: var(--accent-tint);
  --campo-linha: var(--ember-400);
  --campo-ok-tinta: #2E7D48;
  --campo-ok-fundo: rgba(62, 155, 95, 0.14);
  --campo-ok-linha: var(--status-success);
}

* { box-sizing: border-box; }

html {
  background: var(--bg-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink-body);
  background: var(--bg-base);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; color: var(--text-strong); }
p { margin: 0; }
a { color: var(--accent-hover); }

.eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-hover);
}

/* ---------------------------------------------------------------------------
   Topo: identidade e progresso da leitura. Nenhuma ação aqui.
   --------------------------------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--topo-altura);
  padding: var(--space-3) var(--space-5);
  padding-left: max(var(--space-5), env(safe-area-inset-left));
  padding-right: max(var(--space-5), env(safe-area-inset-right));
  color: var(--text-on-dark);
  background: var(--basalt-900);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: var(--white);
  text-decoration: none;
}

.marca img { width: 22px; height: 22px; flex: none; }

.marca strong {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.topo__link {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  text-decoration: none;
}

.topo__link:hover { color: var(--white); }

/* Fio de progresso: quanto do acordo já passou pela tela. */
.progresso {
  position: sticky;
  top: var(--topo-altura);
  z-index: 19;
  height: 3px;
  background: var(--basalt-700);
}

.progresso i {
  display: block;
  height: 100%;
  width: var(--lido, 0%);
  background: var(--accent);
  transition: width 90ms linear;
}

/* ---------------------------------------------------------------------------
   Corpo da página
   --------------------------------------------------------------------------- */

main {
  padding: var(--space-8) var(--space-4);
  padding-bottom: calc(var(--space-24) + env(safe-area-inset-bottom));
}

.faixa { width: var(--papel); margin: 0 auto var(--space-5); }

/* ---- Resumo: o que este acordo é, antes das sete cláusulas ---- */

.resumo {
  padding: var(--space-6);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.resumo h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-subtitle);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
}

.fatos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.fatos li {
  padding: var(--space-3);
  background: var(--bg-sunken);
  border-radius: var(--radius-md);
}

.fatos b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-hover);
}

.fatos span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-body-sm);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}

.resumo p {
  max-width: var(--medida);
  margin: 0 0 var(--space-3);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
}

.resumo p:last-child { margin: 0; }

/* ---------------------------------------------------------------------------
   O documento
   --------------------------------------------------------------------------- */

#documento {
  width: var(--papel);
  margin: 0 auto;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.page { padding: var(--space-8) var(--space-6) var(--space-6); }

/* Na tela as duas páginas são um documento só; a divisão existe para o papel. */
.page + .page { padding-top: 0; }
.page + .page > .eyebrow { display: none; }

/* ---- Capa ---- */

.doc-capa {
  margin: calc(var(--space-8) * -1) calc(var(--space-6) * -1) var(--space-6);
  padding: var(--space-8) var(--space-6) var(--space-6);
  color: var(--text-on-dark);
  background: var(--grad-dawn);
  border-bottom: var(--border-width-strong) solid var(--accent);
}

.doc-capa .eyebrow { color: var(--accent); }

.doc-capa h1 {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, var(--text-display-md));
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--white);
}

.doc-capa .subtitle {
  max-width: var(--medida);
  margin: var(--space-3) 0 0;
  font-size: var(--text-body-sm);
  color: var(--text-on-dark-muted);
}

/* ---- Texto ---- */

.lead {
  max-width: var(--medida);
  margin: 0 0 var(--space-5);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-strong);
}

.page p {
  max-width: var(--medida);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-relaxed);
}

.page h2 {
  margin: var(--space-8) 0 var(--space-4);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-title);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.clause-number {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  /* Sem tracking de rótulo aqui: numeral curto com 0.14em vira "1 ." */
  letter-spacing: var(--tracking-normal);
  color: var(--accent-hover);
}

/* ---- Qualificação das partes ---- */

.partes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}

.parte {
  padding: var(--space-4);
  background: var(--bg-sunken);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.parte__rotulo {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-hover);
}

.parte__corpo {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
}

.parte__corpo strong { color: var(--text-strong); }
.parte .dica-cpf { display: block; color: var(--text-muted); font-size: var(--text-caption); }

/* ---- Campos a preencher ---- */

.fill {
  /* Respiro curto: com folga maior, a vírgula seguinte parece precedida de espaço. */
  padding: 0.05em 0.15em;
  border-bottom: var(--border-width-strong) dotted var(--campo-linha);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--campo-tinta);
  background: var(--campo-fundo);
  font-weight: var(--weight-semibold);
}

.fill[data-preenchido="sim"] {
  color: var(--campo-ok-tinta);
  background: var(--campo-ok-fundo);
  border-bottom-color: var(--campo-ok-linha);
}

/* Rótulo da folha: só existe no papel. Na tela as duas páginas são um
   documento contínuo, e um "1 de 2" no meio do texto só confundiria. */
.page-number { display: none; }

/* ---- Fecho e assinaturas ---- */

.signature-intro { margin-top: var(--space-6); }

.signature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
  margin-top: var(--space-12);
}

.signature {
  padding-top: var(--space-2);
  border-top: var(--border-width-strong) solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.signature strong {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  color: var(--text-strong);
}

/* ---------------------------------------------------------------------------
   Rodapé da página (não integra o acordo)
   --------------------------------------------------------------------------- */

.nota {
  width: var(--papel);
  margin: var(--space-6) auto 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------------- */

.botao-principal,
.botao-vazado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 46px;
  padding: 0.7rem 1.4rem;
  border: var(--border-width-strong) solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.botao-principal { color: var(--accent-contrast); background: var(--accent); }
.botao-principal:hover:not([disabled]) { background: var(--accent-hover); }

.botao-vazado {
  color: var(--text-strong);
  background: transparent;
  border-color: var(--border-strong);
}

.botao-vazado:hover:not([disabled]) { border-color: var(--basalt-900); background: rgba(26, 22, 17, 0.04); }

.botao-principal:active:not([disabled]),
.botao-vazado:active:not([disabled]) { transform: translateY(1px) scale(0.985); }

.botao-principal:focus-visible,
.botao-vazado:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); }

.botao-principal[disabled],
.botao-vazado[disabled] { cursor: progress; opacity: 0.45; }

.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-hover);
  font: inherit;
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  cursor: pointer;
}

.link:hover { color: var(--accent-pressed); }

/* ---------------------------------------------------------------------------
   Faixa fixa de baixo: primeiro as ações, depois o estado
   --------------------------------------------------------------------------- */

.acoes,
.barra {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  padding: var(--space-3) var(--space-5);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: var(--border-width) solid var(--border-on-dark);
}

.acoes[hidden],
.barra[hidden] { display: none; }

.acoes {
  color: var(--text-on-dark);
  background: var(--basalt-900);
}

.acoes__conteudo,
.barra-conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: var(--papel);
  margin: 0 auto;
}

.acoes__nota {
  font-size: var(--text-body-sm);
  line-height: var(--leading-snug);
  color: var(--text-on-dark-muted);
}

.acoes__botoes,
.barra-acoes { display: flex; gap: var(--space-2); flex: none; }

.acoes .botao-vazado { color: var(--white); border-color: var(--border-on-dark-strong); }
.acoes .botao-vazado:hover:not([disabled]) { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }

/* ---- Estado: revisão, envio do código, sucesso ---- */

.barra {
  color: var(--white);
  background: var(--ember-700);
  border-top-color: rgba(255, 255, 255, 0.18);
}

.barra p { font-size: var(--text-body-sm); line-height: var(--leading-snug); }

.barra strong {
  display: block;
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
}

.barra .botao-vazado { color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
.barra .botao-vazado:hover:not([disabled]) { border-color: var(--white); background: rgba(255, 255, 255, 0.12); }
.barra .botao-principal { color: var(--ember-700); background: var(--white); }
.barra .botao-principal:hover:not([disabled]) { background: var(--sand-100); }

.barra.sucesso { background: #1F5A34; }
.barra.sucesso .botao-principal { color: #1F5A34; }

/* ---------------------------------------------------------------------------
   Janela de assinatura
   --------------------------------------------------------------------------- */

dialog {
  width: min(30rem, calc(100vw - var(--space-6)));
  padding: 0;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  color: var(--ink-body);
  box-shadow: var(--shadow-xl);
}

dialog::backdrop { background: rgba(20, 16, 12, 0.66); }

.janela-corpo { padding: var(--space-6); }

.janela-corpo h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-headline);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.janela-corpo form > p {
  margin: 0 0 var(--space-5);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.campo { margin-bottom: var(--space-4); }

.campo label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

.campo .dica,
.tela-acoes .dica {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.campo input[type="text"],
.campo input[type="email"],
.painel input[type="text"] {
  width: 100%;
  min-height: 46px;
  padding: 0.7rem 0.9rem;
  border: var(--border-width-strong) solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--text-strong);
  background: var(--white);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.campo input::placeholder { color: var(--sand-500); }

.campo input:focus,
.painel input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.campo input[aria-invalid="true"] { border-color: var(--status-danger); }

.aceite {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--bg-sunken);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  cursor: pointer;
}

.aceite input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }

.janela-acoes { display: flex; gap: var(--space-2); justify-content: flex-end; }

.erros {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--status-danger);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgba(211, 58, 58, 0.10);
  color: var(--status-danger-700);
  font-size: var(--text-body-sm);
}

.erros ul { margin: 0; padding-left: var(--space-5); }
.erros li { margin: var(--space-1) 0; }
.erros:empty { display: none; }

/* ---- Código de seis dígitos ---- */

.campo-codigo {
  font-family: var(--font-mono) !important;
  font-size: 1.5rem !important;
  font-weight: var(--weight-bold);
  letter-spacing: 0.5em;
  text-align: center;
  text-indent: 0.5em; /* compensa o espaço que o tracking abre depois do último dígito */
}

/* ---- Abas do traço ---- */

.abas {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.aba {
  position: relative;
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}

.aba:hover,
.aba[aria-selected="true"] { color: var(--text-strong); }

.aba[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}

.aba:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-radius: var(--radius-sm); }

.painel { margin-bottom: var(--space-4); }

/* A fonte vem do próprio domínio: a prévia precisa bater com o PDF, e uma
   página sobre confidencialidade não vai pedir fonte a terceiro. */
@font-face {
  font-family: "Dancing Script";
  src: url("/dancing-script.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

.previa-assinatura {
  min-height: 64px;
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width-strong) solid var(--border-strong);
  font-family: "Dancing Script", "Segoe Script", cursive;
  font-size: 2.2rem;
  line-height: 1.3;
  color: var(--text-strong);
  overflow: hidden;
  white-space: nowrap;
}

#tela {
  display: block;
  width: 100%;
  height: 190px;
  border: var(--border-width-strong) dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--white);
  touch-action: none; /* sem isto o dedo rola a página em vez de desenhar */
  cursor: crosshair;
}

.tela-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.tela-acoes .dica { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Página de conferência
   --------------------------------------------------------------------------- */

.pagina-simples { padding: var(--space-10) var(--space-4) var(--space-16); }

.cartao {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--space-8);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.cartao h1 {
  font-family: var(--font-display);
  font-size: var(--text-headline);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.cartao .subtitle {
  max-width: var(--medida);
  margin: var(--space-3) 0 var(--space-6);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.solta {
  padding: var(--space-10) var(--space-5);
  border: var(--border-width-strong) dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-sunken);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.solta:hover,
.solta:focus-visible,
.solta.sobre { border-color: var(--accent); background: var(--accent-tint); }

.solta:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); }
.solta strong { color: var(--text-strong); }
.solta .dica { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-body-sm); }

.veredito {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-sunken);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
}

.veredito h2 { margin: 0 0 var(--space-2); font-size: var(--text-subtitle); letter-spacing: var(--tracking-tight); }
.veredito p { margin: 0 0 var(--space-2); }
.veredito ul { margin: 0; padding-left: var(--space-5); }
.veredito .dica { color: var(--text-muted); font-size: var(--text-caption); }
.veredito .aviso { color: var(--brass-600); }

.veredito.bom { border-left-color: var(--status-success); background: rgba(62, 155, 95, 0.10); }
.veredito.bom h2 { color: #1F5A34; }
.veredito.atencao { border-left-color: var(--status-warn); background: rgba(246, 167, 43, 0.12); }
.veredito.atencao h2 { color: var(--brass-600); }
.veredito.ruim { border-left-color: var(--status-danger); background: rgba(211, 58, 58, 0.10); }
.veredito.ruim h2 { color: var(--status-danger-700); }

.veredito dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-4) 0 var(--space-2);
}

.veredito dt {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.veredito dd { margin: 0; font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }

.veredito .impressao {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  word-break: break-all;
}

.explicacao {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-subtle);
}

.explicacao summary {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-hover);
  cursor: pointer;
}

.explicacao p,
.explicacao li { margin: var(--space-3) 0 0; font-size: var(--text-body-sm); line-height: var(--leading-relaxed); color: var(--text-muted); }
.explicacao ul { padding-left: var(--space-5); }

/* ---------------------------------------------------------------------------
   Telas estreitas
   --------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  main { padding: var(--space-5) var(--space-3); padding-bottom: calc(var(--space-24) + env(safe-area-inset-bottom)); }

  .faixa, #documento, .nota { width: 100%; }

  .resumo { padding: var(--space-5); }
  .fatos { grid-template-columns: 1fr; }
  .fatos li { display: flex; align-items: baseline; gap: var(--space-3); }
  .fatos b { flex: none; }
  .fatos span { margin-top: 0; }

  .page { padding: var(--space-6) var(--space-5) var(--space-5); }
  .doc-capa {
    margin: calc(var(--space-6) * -1) calc(var(--space-5) * -1) var(--space-5);
    padding: var(--space-6) var(--space-5) var(--space-5);
  }

  .partes, .signature-grid { grid-template-columns: 1fr; }
  .signature-grid { gap: var(--space-8); margin-top: var(--space-8); }

  /* A faixa de baixo vira só botão: o texto de apoio já está na página. */
  .acoes__nota { display: none; }
  .acoes__conteudo, .barra-conteudo { flex-wrap: wrap; }
  .acoes__botoes, .barra-acoes { width: 100%; }
  .acoes__botoes .botao-vazado { flex: 1; }
  .acoes__botoes .botao-principal { flex: 1.6; }
  .barra-acoes button { flex: 1; }

  .cartao { padding: var(--space-6) var(--space-5); }
  .veredito dl { grid-template-columns: 1fr; }
  .veredito dd { margin-bottom: var(--space-3); }
  .janela-corpo { padding: var(--space-5); }
  .campo-codigo { font-size: 1.3rem !important; letter-spacing: 0.4em; text-indent: 0.4em; }
  .previa-assinatura { font-size: 1.8rem; }
  #tela { height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Impressão — aqui o A4 volta a existir
   --------------------------------------------------------------------------- */

@page { size: A4; margin: 0; }

@media print {
  :root { --papel: 100%; }

  html, body { background: var(--white); color: var(--sand-900); }
  body { font-size: 10.4pt; line-height: 1.45; }

  .topo, .progresso, .acoes, .barra, .resumo, .nota, dialog { display: none !important; }

  main { padding: 0; }

  /* Papel branco de verdade: o creme da marca é bonito na tela, mas com
     print-color-adjust: exact ele viraria tinta na folha inteira. */
  #documento { width: 210mm; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--white); }

  .page {
    width: 210mm;
    min-height: 297mm;
    padding: 16mm 18mm 18mm;
    break-after: page;
    page-break-after: always;
  }

  .page:last-of-type { break-after: auto; page-break-after: auto; }
  .page + .page { padding-top: 16mm; }
  .page + .page > .eyebrow { display: block; }  /* cabeça de página corrida */

  .page p, .lead, .doc-capa h1, .doc-capa .subtitle { max-width: none; }

  /* A capa imprime clara: tinta de marca só no fio e na sobrancelha. */
  .doc-capa {
    margin: 0 0 8mm;
    padding: 0 0 5mm;
    color: var(--sand-900);
    background: none;
    border-bottom: 2px solid var(--accent);
  }

  .doc-capa h1 { font-size: 26pt; color: var(--sand-900); }
  .doc-capa .subtitle { color: var(--sand-500); font-size: 10pt; }

  /* Entrelinha de papel, não de tela. Com o 1.65 da leitura no monitor, a
     primeira folha estoura o A4 e o acordo vira três páginas — e o rótulo
     "1 de 2" cai na folha errada. Estes números são medidos: com eles as
     cláusulas 1 a 3 fecham dentro de uma folha. */
  .lead { font-size: 11pt; line-height: 1.4; margin-bottom: 4mm; }
  .page p { line-height: 1.32; margin-bottom: 2mm; }
  .parte__corpo { line-height: 1.32; }
  .page h2 { margin: 4mm 0 2mm; padding-top: 2mm; font-size: 12.5pt; break-after: avoid; page-break-after: avoid; }
  .clause-number { margin-bottom: 0.5mm; font-size: 8pt; }
  .parte { background: none; padding: 3mm; }
  .partes { gap: 4mm; }
  .signature-grid { margin-top: 8mm; gap: 12mm; }

  .page { position: relative; }

  .page-number {
    position: absolute;
    right: 18mm;
    bottom: 10mm;
    display: block;
    font-family: var(--font-mono);
    font-size: 7.5pt;
    letter-spacing: 0.04em;
    color: var(--sand-500);
  }

  /* No papel todo campo é só texto sublinhado: o realce âmbar/verde é sinal de
     tela (falta preencher / já preenchido) e não tem função no impresso. */
  .fill { color: var(--sand-900); background: none; border-bottom: 1px solid var(--sand-500); }
  .fill[data-preenchido="sim"] { color: var(--sand-900); background: none; border-bottom-color: var(--sand-500); }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}