/* ============================================================
   /legal RINCÃOBEACH — casca comum das páginas jurídicas.
   Reset, estrutura, tipografia, botões e rodapé: tudo que o
   índice e cada documento compartilham. O que é específico de
   um documento mora no CSS dele (ex.: nda/nda.css).
   Cor, tipo, espaço e borda vêm exclusivamente dos tokens do DS
   publicado em /_ds/ — o mesmo que o index.html do site carrega.
   Nada de valor cru aqui.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  text-wrap: pretty;
}

h1,
h2 {
  text-wrap: balance;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* --- Estrutura ---------------------------------------------- */

.pagina {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.navbar-voltar {
  grid-column: 3;
  justify-self: end;
  font: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--areia-200);
  text-decoration: none;
  opacity: 0.85;
}

.navbar-voltar:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.navbar {
  background: var(--azul-800);
  /* Três colunas para o logo ficar centrado com ou sem link ao lado: o índice
     tem só a marca, o documento tem a marca e a volta para /legal. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--space-6) var(--gutter-page-mobile);
}

.navbar > :first-child {
  grid-column: 2;
}

/*
 * A largura acompanha o device, com margem pequena.
 *
 * Eram 760px fixos, herdados de quando a página era só texto corrido — e para
 * texto corrido uma coluna estreita é o certo. Deixou de ser: o que ocupa a
 * tela agora é o documento dentro do iframe da D4Sign, e ali cada pixel a
 * menos é uma linha que o leitor precisa rolar para alcançar.
 *
 * O teto de 1200px existe porque acima disso a moldura do documento passa a
 * flutuar num campo vazio, sem ganhar legibilidade. Onde o texto continua
 * sendo texto — parágrafos de apoio — a medida é limitada em `ch`, adiante.
 */
.conteudo {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-4) var(--space-9);
}

.cartao {
  background: var(--surface-card);
  border: var(--border-hair);
  box-shadow: var(--shadow-card);
  /* No celular o respiro lateral do cartão soma com a margem da página, e o
     texto acabava começando a uns 55px da borda numa tela de 390. Aqui ele é
     curto; acima de 640px volta a ser generoso (ver a media query no fim). */
  padding: var(--space-7) var(--space-5);
}

/* --- Tipografia --------------------------------------------- */

.titulo-principal {
  font: var(--fw-semibold) var(--fs-h3) / var(--lh-title) var(--font-core);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  color: var(--azul-800);
  margin: var(--space-3) 0 var(--space-5);
}

.chamada {
  font: var(--fw-light) var(--fs-body-lg) / var(--lh-body) var(--font-core);
  color: var(--text-body);
  margin: 0 0 var(--space-6);
}

.apoio {
  font: var(--type-body);
  color: var(--text-muted);
  margin: 0 0 var(--space-6);
}

.regua-sol {
  width: 56px;
  height: var(--border-w-heavy);
  background: var(--sol-500);
  margin: 0 0 var(--space-5);
}

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

.botao {
  font: var(--fw-bold) var(--fs-small) / 1 var(--font-core);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-7);
  border: none;
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: var(--transition-base);
}

.botao--primario {
  background: var(--azul-800);
  color: var(--areia-200);
}

.botao--primario:hover:not(:disabled) {
  background: var(--azul-700);
}

.botao--primario:active:not(:disabled) {
  transform: scale(var(--press-scale));
}

.botao--secundario {
  background: transparent;
  color: var(--azul-800);
  border: var(--border-hair);
}

.botao--secundario:hover:not(:disabled) {
  border-color: var(--azul-800);
}

.botao:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.acoes {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-7);
}

/* --- Rodapé ---------------------------------------------------- */

.rodape {
  background: var(--azul-800);
  padding: var(--space-5) var(--gutter-page-mobile);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Razão social e política, empilhadas à direita. O link para /privacidade não
   é decorativo: respondido o aviso de consentimento, ele não volta a aparecer,
   e sem este caminho a política — e o botão que revoga o consentimento — ficaria
   inalcançável a partir daqui. */
.rodape-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.rodape-razao {
  font: var(--fw-medium) var(--fs-caption) / 1.2 var(--font-core);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--areia-200);
  text-align: right;
}

.rodape-privacidade {
  font: var(--fw-medium) var(--fs-caption) / 1.2 var(--font-core);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--areia-200);
  text-decoration: underline;
}

/* --- Índice de documentos --------------------------------------- */

.lista-documentos {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.documento {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: var(--border-hair);
}

.documento:first-child {
  padding-top: 0;
  border-top: 0;
}

.documento-natureza {
  display: inline-block;
  font: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-600);
}

.documento-natureza[data-natureza='assinatura'] {
  color: var(--sol-700);
}

.documento-titulo {
  margin: var(--space-2) 0 0;
  font: var(--fw-semibold) var(--fs-h4) / var(--lh-title) var(--font-core);
}

.documento-titulo a {
  color: inherit;
  text-decoration: none;
}

.documento-titulo a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.documento-resumo {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  max-width: 58ch;
}

.documento-versao {
  margin: var(--space-3) 0 0;
  font: var(--fw-regular) var(--fs-caption) / var(--lh-body) var(--font-core);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.documento-acao {
  align-self: flex-start;
  text-decoration: none;
}

.chamada,
.apoio,
.aviso {
  /* Container largo não deve virar linha de 160 caracteres. A moldura do
     documento usa a largura toda; o texto ao redor, não. */
  max-width: 68ch;
}

.nota-guarda {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-hair);
}

/* --- Acima de 640px -------------------------------------------- */

@media (min-width: 640px) {
  .cartao {
    padding: var(--space-9) var(--space-8);
  }

  .navbar,
  .rodape {
    padding-left: var(--gutter-page);
    padding-right: var(--gutter-page);
  }

  /* Texto e ação lado a lado quando há largura para isso. */
  .documento {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
  }

  .documento-acao {
    align-self: center;
    flex: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}