/* Páginas de documento (termos, privacidade): índice fixo à esquerda, texto numerado à direita.
   Cabeçalho e rodapé são os do site (.topbar.site, em system.css, e .foot, o mesmo desenho do rodapé da página
   inicial). A grade também é a da página inicial: [220px] 40 [texto], com a margem em --page-x, para marca,
   índice e texto ficarem nas mesmas verticais ao trocar de página. */
:root { --page-x: max(var(--gutter), calc((100vw - 1680px) / 2)); }

.topbar.site nav a[aria-current="page"] { color: var(--text-1); }

.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; padding: 72px var(--page-x) 96px; }
.doc-aside { position: sticky; top: 32px; align-self: start; }
.doc-aside .label { display: block; margin-bottom: 16px; color: var(--text-3); }
.doc-aside ol { list-style: none; border-top: 1px solid var(--rule); }
/* .12em: o item mais longo ("05 Atendimento automatizado") cabe em uma linha nos 220px da coluna, com folga */
.doc-aside li a { display: block; padding: 11px 0; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); transition: color .2s; }
.doc-aside li a:hover { color: var(--text-1); }

.doc-head { padding-bottom: 36px; border-bottom: 1px solid var(--rule); }
.doc-head h1 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -0.02em; line-height: 1; margin: 16px 0 20px; text-wrap: balance; }
.doc-head p { color: var(--text-2); font-weight: 300; max-width: 62ch; }
.doc-head .meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

.doc section { padding: 40px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 24px; }
.doc section:last-child { padding-bottom: 0; border-bottom: 0; } /* quem fecha a página é a linha do rodapé */
.doc section h2 { display: flex; gap: 18px; align-items: baseline; font-size: 22px; letter-spacing: -0.01em; margin-bottom: 16px; text-wrap: balance; }
.doc section h2 .n { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .2em; color: var(--accent); }
.doc section h3 { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin: 24px 0 8px; }
.doc section p, .doc section li { color: var(--text-2); font-weight: 300; font-size: 16px; line-height: 1.7; max-width: 68ch; }
.doc section p + p { margin-top: 12px; }
.doc section ul { list-style: none; margin-top: 12px; }
.doc section ul li { position: relative; padding-left: 22px; margin-top: 8px; }
.doc section ul li::before { content: ""; position: absolute; left: 0; top: .82em; width: 10px; height: 1px; background: var(--text-3); }
.doc section strong { color: var(--text-1); font-weight: 400; }
.doc section a { border-bottom: 1px solid var(--rule-strong); transition: border-color .2s; }
.doc section a:hover { border-color: var(--text-1); }

.doc-dados { display: grid; grid-template-columns: 180px 1fr; border-top: 1px solid var(--rule); margin-top: 16px; max-width: 68ch; }
.doc-dados dt, .doc-dados dd { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.doc-dados dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); padding-top: 15px; }
.doc-dados dd { color: var(--text-1); font-size: 15px; overflow-wrap: anywhere; }

/* Rodapé do site: marca; navegação; documentos, empresa e ano. As regras repetem as de .foot em index.html
   (quem mexer em uma, mexe na outra). */
.foot { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; column-gap: 40px; align-items: center; padding: 22px var(--page-x); border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.foot .wordmark { color: var(--text-1); }
.foot nav, .foot .legal, .foot .end, .foot .co { display: flex; align-items: center; gap: 0 28px; white-space: nowrap; }
.foot nav { flex-wrap: wrap; }
.foot nav a, .foot .legal a { padding: 10px 0; color: var(--text-2); transition: color .2s; }
.foot nav a:hover, .foot .legal a:hover, .foot .legal a[aria-current="page"] { color: var(--text-1); }
.foot .theme-toggle { display: none; }

@media (max-width: 1439px) {
  /* rodapé em duas linhas: navegação em cima; documentos, empresa e ano embaixo, na coluna do texto */
  .foot { grid-template-columns: 220px minmax(0, 1fr); }
  .foot .end { grid-column: 2; justify-content: space-between; flex-wrap: wrap; }
}
@media (max-width: 999px) {
  .doc { grid-template-columns: minmax(0, 1fr); padding-top: 40px; padding-bottom: 64px; }
  /* No celular o índice ocuparia a primeira tela inteira antes do título */
  .doc-aside { display: none; }
  .doc section { padding: 32px 0; }

  .foot { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 20px var(--page-x) 16px; }
  .foot .end { grid-column: 1; }
}
@media (max-width: 639px) {
  .doc-dados { grid-template-columns: 1fr; }
  .doc-dados dt { border-bottom: 0; padding-bottom: 0; }
  .doc-dados dd { padding-top: 4px; }

  /* como na página inicial: sem largura para marca, tema e entrar na mesma linha, o botão de tema desce para o rodapé */
  .topbar.site .theme-toggle { display: none; }
  .foot { row-gap: 14px; padding: 28px var(--page-x); }
  .foot nav, .foot .legal { flex-direction: column; align-items: flex-start; }
  .foot .end { row-gap: 14px; }
  .foot .legal, .foot .co { flex-basis: 100%; }
  .foot .co { flex-wrap: wrap; row-gap: 6px; justify-content: space-between; margin-top: 6px; }
  .foot .theme-toggle { display: inline-flex; height: 40px; }
}