/* =====================================================================
   TERMOS DE USO / POLÍTICA DE PRIVACIDADE: leitura e assinatura
   ---------------------------------------------------------------------
   Consome os tokens --db-* do despacha-ui.css; não redefine cor nenhuma.

   A fonte da assinatura (Dancing Script) é auto-hospedada como todas as
   outras, `scripts/baixar_fontes.py assinatura`. Aqui isso não é só
   desempenho: um @font-face que falhasse cairia em Arial, e o documento
   ficaria "assinado" em fonte de sistema, sem nada indicando o defeito.
   Ver app/docs/termos-aceite.md.
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1. A folha do documento
 * ------------------------------------------------------------------ */
/* A folha ganhou largura, e o índice virou TRILHO à esquerda em tela grande.
 *
 * Alargar só a coluna de texto tem limite: a 920px o contrato já rodava por
 * volta de 105 caracteres por linha, acima dos 65–75 que se lê confortavelmente.
 * Esticar mais pioraria a leitura em vez de melhorar. Então a largura extra vai
 * para o índice, que passa a ocupar a faixa vazia à esquerda e acompanha a
 * rolagem: a tela fica cheia, o documento parece maior, e a linha de texto
 * cresce só o suficiente para caber a fonte um ponto maior.
 *
 * Abaixo de 1080px o trilho vira o `<details>` de sempre, acima da folha. */
.termo-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

@media (min-width: 1080px) {
  .termo-wrap {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    grid-template-areas: 'trilha trilha' 'indice folha';
    align-items: start;
    gap: 0 2rem;
  }
  .termo-wrap > .termo-trilha { grid-area: trilha; }
  .termo-wrap > .termo-indice { grid-area: indice; }
  .termo-wrap > .termo-folha  { grid-area: folha; }
}

.termo-folha {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  box-shadow: var(--db-shadow-sm);
  overflow: hidden;
}

.termo-cabeca {
  padding: 1.75rem 2rem 1.5rem;
  background: var(--db-gradient);
  color: var(--db-text-invert);
}

.termo-cabeca__linha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.termo-cabeca__titulo {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Botão de imprimir: discreto sobre o degradê do cabeçalho. Não é `.db-btn`
   porque ali ele competiria com o "assinar": a ação principal da tela. */
.termo-imprimir {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.42rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--db-radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: var(--db-text-invert);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.termo-imprimir:hover { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.7); }
.termo-imprimir svg { width: 15px; height: 15px; }

@media (max-width: 480px) {
  .termo-imprimir span { display: none; }
  .termo-imprimir { padding: 0.42rem 0.6rem; }
}

.termo-cabeca__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  opacity: 0.9;
}

.termo-cabeca__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.termo-cabeca__meta svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ *
 * 2. O corpo: tipografia de contrato
 * ------------------------------------------------------------------ */
/* Fonte um ponto maior junto com a folha mais larga: crescer a caixa sem
   crescer o tipo aumentaria os caracteres por linha e pioraria a leitura,
   que é o contrário do que a largura extra pretende. */
.termo-corpo {
  padding: 2.25rem 2.5rem;
  color: var(--db-text);
  font-size: 1rem;
  line-height: 1.72;
  counter-reset: secao;
}

.termo-corpo h2 {
  margin: 2.25rem 0 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--db-surface-2);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--db-primary);
  counter-increment: secao;
}

.termo-corpo h2::before { content: counter(secao) ". "; }

.termo-corpo h2:first-child { margin-top: 0; }

.termo-corpo p { margin: 0 0 0.9rem; }

.termo-preambulo {
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--db-accent);
  border-radius: 0 var(--db-radius-sm) var(--db-radius-sm) 0;
  background: var(--db-surface-2);
  font-size: 0.92rem;
}

/* Numeração hierárquica automática: 6. / 6.1 / 6.3.2, a MESMA notação que o
   texto usa nas referências cruzadas ("nos termos da cláusula 6.3").
 *
 * O número da seção entra no item de propósito. Antes, o `<h2>` trazia o
 * número escrito à mão e a lista recomeçava em "1." dentro de cada seção:
 * quem lia "observado o disposto na cláusula 19.4" via um "4." solto e tinha
 * de contar as seções para chegar lá. Num contrato, referência cruzada que o
 * leitor não consegue seguir é defeito de redação.
 *
 * Escrever os números à mão resolveria a leitura e criaria outro problema:
 * uma cláusula inserida no meio desalinharia todas as referências abaixo
 * dela, e nada avisaria. Aqui o navegador conta. */
.termo-corpo ol { counter-reset: item; list-style: none; margin: 0 0 1.1rem; padding-left: 0; }
.termo-corpo ol > li { counter-increment: item; position: relative; padding-left: 3.1rem; margin-bottom: 0.6rem; }
.termo-corpo ol > li::before {
  content: counter(secao) "." counters(item, ".");
  position: absolute;
  left: 0;
  top: 0;
  min-width: 2.6rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--db-text-muted);
}
.termo-corpo ol ol { margin-top: 0.6rem; margin-bottom: 0; }
.termo-corpo ol ol > li::before { color: var(--db-text-soft); }

.termo-corpo strong { font-weight: 600; }

/* ------------------------------------------------------------------ *
 * 3. Bloco de assinaturas
 * ------------------------------------------------------------------ */
.termo-assinaturas {
  padding: 2rem;
  border-top: 1px solid var(--db-border);
  background: var(--db-surface-2);
}

.termo-assinaturas__titulo {
  margin: 0 0 1.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--db-text-soft);
  text-align: center;
}

.termo-assinaturas__par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

@media (max-width: 720px) {
  .termo-assinaturas__par { grid-template-columns: 1fr; gap: 2rem; }
  .termo-corpo, .termo-assinaturas { padding: 1.25rem; }
  .termo-cabeca { padding: 1.25rem; }
}

/* `min-width: 0` é obrigatório, não arrumação. Item de grid nasce com
   `min-width: auto`, e a assinatura é `white-space: nowrap`: um nome longo
   ("Ricardo Andrade Monteiro") esticava a coluna além do `1fr` e vazava para
   fora do cartão, levando junto o CPF e a linha do representante. Só apareceu
   ao olhar a tela, mas o HTML estava correto. */
.termo-firma { text-align: center; min-width: 0; }

/* A "linha da assinatura". Altura fixa para que assinar não empurre o layout:
   sem isso, o botão desce no instante do clique e o cursor fica sobre
   outra coisa. */
.termo-firma__linha {
  position: relative;
  height: 88px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--db-text-soft);
  overflow: hidden;
}

.termo-firma__nome {
  font-family: 'Dancing Script', 'Segoe Script', cursive;
  font-weight: 700;
  /* O JS reduz `--termo-fonte` até o nome caber na linha (ver
     `termo-assinatura.js`). Nenhuma unidade CSS faz "caber na largura" para
     um texto qualquer, e o `clamp` sozinho só acerta o nome de tamanho médio:
     "Ana Luz" fica pequeno, "Ricardo Andrade Monteiro" vaza. O valor abaixo é
     o ponto de partida e o que vale sem JS. */
  font-size: var(--termo-fonte, clamp(1.5rem, 4.6vw, 2.7rem));
  line-height: 1.15;
  color: #16305c;                 /* tinta: azul-escuro, não o preto do texto */
  transform: rotate(-1.6deg);
  white-space: nowrap;
  max-width: 100%;
}

.termo-firma__rodape {
  margin-top: 0.65rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--db-text-muted);
}

.termo-firma__quem { display: block; font-weight: 600; color: var(--db-text); }
.termo-firma__doc  { display: block; font-variant-numeric: tabular-nums; }

/* Estado "ainda não assinado": a linha vazia, com a dica */
.termo-firma__vazio {
  font-size: 0.85rem;
  color: var(--db-text-soft);
  padding-bottom: 0.5rem;
}

.termo-firma--pendente .termo-firma__linha { border-bottom-style: dashed; }

/* ------------------------------------------------------------------ *
 * 4. A escrita da assinatura
 * ------------------------------------------------------------------ *
 * O nome é revelado da esquerda para a direita por `clip-path`, com uma
 * "pena" acompanhando a borda do que já foi escrito.
 *
 * Por que clip-path e não desenho de traçado (SVG + stroke-dasharray): o
 * traçado exigiria converter o nome em curvas em tempo de execução, para
 * um nome qualquer, em toda sessão. O clip revela a MESMA fonte que fica
 * no documento depois: a animação e o resultado final são o mesmo
 * objeto, e não duas representações que podem divergir.
 *
 * `--termo-dur` é definido pelo JS a partir do comprimento do nome: um
 * nome de 6 letras e um de 40 escritos na mesma duração pareceriam duas
 * velocidades de caneta diferentes.                                     */
.termo-firma__nome--escrevendo {
  clip-path: inset(0 100% -20% 0);
  animation: termo-escrever var(--termo-dur, 1.5s) cubic-bezier(.55, .05, .4, .98) forwards;
}

@keyframes termo-escrever {
  /* Uma pausa mínima no começo: é o tempo de encostar a caneta no papel.
     Sem ela a escrita começa "já em movimento" e parece um wipe de slide. */
  0%   { clip-path: inset(0 100% -20% 0); }
  8%   { clip-path: inset(0 97% -20% 0); }
  100% { clip-path: inset(0 -4% -20% 0); }
}

.termo-firma__pena {
  position: absolute;
  bottom: 0.4rem;
  left: 0;
  width: 2px;
  height: 54px;
  background: linear-gradient(to top, rgba(22, 48, 92, 0.65), rgba(22, 48, 92, 0));
  transform: rotate(-14deg);
  opacity: 0;
  pointer-events: none;
}

.is-assinando .termo-firma__pena {
  animation: termo-pena var(--termo-dur, 1.5s) cubic-bezier(.55, .05, .4, .98) forwards;
}

@keyframes termo-pena {
  0%   { opacity: 0;   left: 8%; }
  8%   { opacity: 0.9; left: 10%; }
  92%  { opacity: 0.9; left: 90%; }
  100% { opacity: 0;   left: 92%; }
}

/* Quem pede menos movimento recebe a assinatura pronta: o ato de assinar
   não pode depender de a animação rodar. */
@media (prefers-reduced-motion: reduce) {
  .termo-firma__nome--escrevendo { clip-path: none; animation: none; }
  .is-assinando .termo-firma__pena { animation: none; opacity: 0; }
}

/* ------------------------------------------------------------------ *
 * 5. Ação
 * ------------------------------------------------------------------ */
.termo-acao {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--db-border);
  text-align: center;
}

.termo-acao__aviso {
  max-width: 620px;
  margin: 0 auto 1.1rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--db-text-muted);
}

.termo-acao__aviso strong { color: var(--db-text); }

/* Confirmação depois de assinado */
.termo-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(3, 140, 90, 0.35);
  border-radius: var(--db-radius-pill);
  background: rgba(3, 140, 90, 0.08);
  color: var(--db-success);
  font-size: 0.85rem;
  font-weight: 600;
}

.termo-selo svg { width: 16px; height: 16px; }

/* Rastro da prova: hash e IP. Miúdo de propósito: é registro, não
   comunicação. Quem procura, acha; quem não procura, não é interrompido. */
.termo-prova {
  margin-top: 1rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--db-text-soft);
  word-break: break-all;
}

.termo-prova code {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.7rem;
  color: var(--db-text-muted);
}

/* ------------------------------------------------------------------ *
 * 6. Trilha de documentos (quando há mais de um a assinar)
 * ------------------------------------------------------------------ */
.termo-trilha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  color: var(--db-text-muted);
}

.termo-trilha__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-pill);
  background: var(--db-surface);
}

.termo-trilha__item.is-atual {
  border-color: var(--db-primary);
  color: var(--db-primary);
  font-weight: 600;
}

.termo-trilha__item.is-feito { color: var(--db-success); border-color: rgba(3, 140, 90, 0.35); }
.termo-trilha__item svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------------ *
 * 7. Índice das cláusulas (montado pelo JS)
 * ------------------------------------------------------------------ */
.termo-indice {
  margin: 0 0 1rem;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  background: var(--db-surface-2);
  font-size: 0.86rem;
}

.termo-indice__topo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--db-primary);
  list-style: none;
}

.termo-indice__topo::-webkit-details-marker { display: none; }
.termo-indice__topo svg { width: 16px; height: 16px; }
.termo-indice[open] .termo-indice__topo { border-bottom: 1px solid var(--db-border); }

.termo-indice__lista {
  margin: 0;
  padding: 0.7rem 1rem 0.9rem 2.6rem;
  columns: 2;
  column-gap: 2rem;
  line-height: 1.9;
}

@media (max-width: 640px) {
  .termo-indice__lista { columns: 1; }
}

.termo-indice__lista a { color: var(--db-text-muted); text-decoration: none; }
.termo-indice__lista a:hover { color: var(--db-primary); text-decoration: underline; }

/* --- Trilho fixo (tela larga) --------------------------------------- *
 * O `open` é posto pelo JS, não por CSS: `<details>` fechado é escondido
 * por regra do próprio navegador, e forçá-lo aberto por folha de estilo
 * depende de um seletor interno que muda entre motores.                 */
@media (min-width: 1080px) {
  .termo-indice {
    position: sticky;
    top: 90px;                       /* abaixo do navbar fixo */
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    margin: 0;
    box-shadow: var(--db-shadow-xs);
  }
  .termo-indice__topo { cursor: default; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--db-text-soft); }
  .termo-indice__lista { columns: 1; padding: 0.6rem 0.9rem 0.9rem 2.2rem; line-height: 1.5; }
  .termo-indice__lista li { margin-bottom: 0.5rem; }
  /* A cláusula que está na tela agora: o trilho só ganha o espaço que
     ocupa se disser ONDE a pessoa está, e não só o que existe. */
  .termo-indice__lista a.is-atual { color: var(--db-primary); font-weight: 600; }
}

/* ------------------------------------------------------------------ *
 * 8. Barra fixa de assinatura
 * ------------------------------------------------------------------ *
 * `z-index: 1030` = logo ABAIXO da tabbar do celular (1035). As duas nunca
 * aparecem juntas, a barra só existe quando há termo a assinar, e nesse
 * estado a `navbar_reduzido` já esconde a tabbar, mas se um dia
 * aparecerem, é a navegação que deve ficar por cima.                    */
.termo-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--db-border);
  box-shadow: 0 -6px 24px rgba(2, 51, 115, 0.10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Trilho de progresso: a linha fina no topo da barra. É o que responde
   "quanto falta?" sem ocupar espaço: a pergunta que faz o cliente desistir
   de rolar é justamente essa. */
.termo-barra__trilho { height: 3px; background: var(--db-surface-2); }

.termo-barra__preenche {
  display: block;
  height: 100%;
  width: 0;
  background: var(--db-gradient-h);
  transition: width .15s linear;
}

.termo-barra__corpo {
  max-width: 920px;
  margin: 0 auto;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.termo-barra__quem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--db-text-muted);
}

.termo-barra__quem svg { width: 16px; height: 16px; flex-shrink: 0; }

.termo-barra__doc {
  font-weight: 600;
  color: var(--db-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.termo-barra__lido { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* No celular o título do documento sai: o que importa ali é o progresso e o
   botão, e três coisas na mesma linha espremem o botão a ponto de o rótulo
   quebrar em duas linhas. */
@media (max-width: 560px) {
  .termo-barra__doc { display: none; }
  .termo-barra__corpo { padding: 0.6rem 0.85rem; gap: 0.6rem; }
}

/* O botão muda de cor quando vira "assinar": é o sinal de que o estado
   mudou, para quem chegou ao fim rolando e não olhava a barra. */
.termo-barra [data-termo-acao] { flex-shrink: 0; }
.termo-barra.is-pronta [data-termo-acao] { --db-btn-bg: var(--db-gradient-green); }
.termo-barra__icone { display: inline-flex; }

/* Some quando o botão DE VERDADE está na tela, senão viram dois botões
   iguais, um logo abaixo do outro, e a pessoa para para decidir qual é o
   certo. Desce em vez de sumir seco: o movimento diz que ela saiu de cena,
   e não que a página piscou. */
.termo-barra {
  transition: transform .22s ease, opacity .22s ease;
}

.termo-barra.is-oculta {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .termo-barra { transition: none; }
}

/* Espaço para a barra não cobrir o fim do documento. */
.termo-wrap.tem-barra { padding-bottom: 6.5rem; }

/* ------------------------------------------------------------------ *
 * 9. "Meus documentos": a lista
 * ------------------------------------------------------------------ */
.termo-lista { display: grid; gap: 0.85rem; margin-top: 1.5rem; }

.termo-cartao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 1.1rem;
  padding: 1.25rem 1.4rem;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  box-shadow: var(--db-shadow-xs);
}

/* Faixa de estado na borda esquerda: diz "assinado ou não" antes de qualquer
   leitura. Numa lista de dois itens parece exagero; deixa de parecer quando
   entrar a v2 de um deles e o cliente precisar achar QUAL está pendente. */
.termo-cartao { border-left: 3px solid var(--db-border); }
.termo-cartao.is-assinado { border-left-color: var(--db-success); }
.termo-cartao.is-pendente { border-left-color: var(--db-warning); }

.termo-cartao__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--db-radius-sm);
  background: var(--db-surface-2);
  color: var(--db-primary);
}

.termo-cartao__icone svg { width: 21px; height: 21px; }

.termo-cartao__titulo { margin: 0; font-size: 1rem; font-weight: 700; color: var(--db-text); }
.termo-cartao__papel { margin: 0.15rem 0 0; font-size: 0.86rem; color: var(--db-text-muted); }
.termo-cartao__meta { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--db-text-soft); }

.termo-cartao__aceite,
.termo-cartao__pendente {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
}

.termo-cartao__aceite { color: var(--db-success); }
.termo-cartao__pendente { color: #9a7b06; }   /* âmbar legível; o --db-warning puro não passa em texto */
.termo-cartao__aceite svg,
.termo-cartao__pendente svg { width: 15px; height: 15px; flex-shrink: 0; }

.termo-cartao__prova {
  margin: 0.3rem 0 0;
  font-size: 0.71rem;
  color: var(--db-text-soft);
  word-break: break-all;
}

/* Cor explícita: o Bootstrap pinta `code` de rosa por padrão, e um hash
   rosa no meio de um comprovante parece erro, não dado. */
.termo-cartao__prova code {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.69rem;
  color: var(--db-text-muted);
}

.termo-cartao__acao { flex-shrink: 0; }

@media (max-width: 640px) {
  .termo-cartao { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.9rem; }
  .termo-cartao__acao { grid-column: 1 / -1; justify-content: center; }
}

.termo-historico__titulo {
  margin: 2rem 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--db-text-soft);
}

.termo-historico { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; line-height: 1.9; color: var(--db-text-muted); }
.termo-historico code { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.72rem; }

/* ------------------------------------------------------------------ *
 * 10. Impressão / PDF
 * ------------------------------------------------------------------ */
@media print {
  /* Some tudo que é NAVEGAÇÃO e fica a casca do documento. O que sobra é o
     contrato inteiro com as duas assinaturas, que é o que a pessoa espera ao
     mandar imprimir um contrato. Sem estas linhas o papel sai com navbar,
     rodapé e barra de voltar. */
  .navbar, .db-footer, .db-tabbar, .db-backbar, .termo-acao, .termo-trilha,
  .termo-barra, .termo-indice, .termo-imprimir { display: none !important; }

  body { background: #fff; }
  main { padding-top: 0 !important; }

  .termo-wrap { max-width: none; display: block; padding: 0; }
  .termo-wrap.tem-barra { padding-bottom: 0; }
  .termo-corpo { padding: 0.5rem 0; font-size: 10.5pt; }
  .termo-assinaturas { background: none; padding: 1.5rem 0 0; }
  /* A assinatura não pode ser cortada ao meio pela quebra de página. */
  .termo-assinaturas__par { break-inside: avoid; page-break-inside: avoid; }
  .termo-corpo h2 { break-after: avoid; page-break-after: avoid; }

  /* "Clique em Assinar abaixo" é instrução de TELA, e saía impressa no papel.
     Sem ela, o documento ainda não assinado sai com a linha em branco, que é
     exatamente o que se espera de um contrato impresso para assinar à mão. */
  .termo-firma__vazio, .termo-firma__pena { display: none !important; }
  .termo-firma--pendente .termo-firma__linha { border-bottom-style: solid; }
  .termo-folha { border: none; box-shadow: none; }
  .termo-cabeca { background: none; color: var(--db-text); border-bottom: 2px solid var(--db-primary); }
  .termo-firma__nome--escrevendo { clip-path: none; animation: none; }
}