/* ==========================================================================
   FITCHECK AI — Páginas legais (Privacidade e Termos)
   Consome os tokens do design system e as classes de página de landing.css,
   ambos carregados antes deste arquivo. Nenhum token novo é criado aqui.

   O documento legal é texto longo lido em coluna estreita, não uma seção de
   marketing: por isso a medida é presa em ~72ch e o índice vira uma coluna
   fixa a partir de 1024px, onde sobra largura para ele.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cabeçalho do documento
   -------------------------------------------------------------------------- */

.doc-head {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--border-subtle);
}

.doc-title {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.034em;
  text-wrap: balance;
  max-width: 18ch;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   2. Grade: índice + corpo
   -------------------------------------------------------------------------- */

.doc-grid {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  padding-block: clamp(40px, 6vw, 72px);
  align-items: start;
}

/* Índice ------------------------------------------------------------------ */

.toc {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-1);
  padding: var(--space-5);
}

.toc-title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-micro);
  margin-bottom: var(--space-4);
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}

.toc-list li {
  counter-increment: toc;
}

.toc-link {
  display: flex;
  gap: var(--space-3);
  padding-block: 9px;
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.toc-link::before {
  content: counter(toc, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-micro);
  padding-top: 2px;
  transition: color var(--dur-fast) var(--ease-standard);
}

.toc-link:hover {
  color: var(--text-primary);
  opacity: 1;
}

.toc-link:hover::before {
  color: var(--lime-500);
}

/* --------------------------------------------------------------------------
   3. Corpo do documento
   -------------------------------------------------------------------------- */

.doc-body {
  min-width: 0;
  max-width: 72ch;
  counter-reset: sec;
}

.doc-sec {
  counter-increment: sec;
}

.doc-sec + .doc-sec {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--border-subtle);
}

.doc-h {
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.16;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.doc-h::before {
  content: counter(sec, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  color: var(--lime-500);
  padding-top: 0.55em;
}

/* Tudo que vem depois do título respira igual, seja parágrafo, lista ou
   tabela — o ritmo vertical mora só aqui. */
.doc-sec > * + * {
  margin-top: var(--space-4);
}

.doc-sec p,
.doc-sec li {
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.doc-sec strong {
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}

/* :not(.btn) porque os botões do documento (contato, navegação entre
   documentos) são links e não devem virar link de texto sublinhado. */
.doc-sec a:not(.btn) {
  color: var(--lime-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc-sub {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-top: var(--space-6);
}

/* Listas ------------------------------------------------------------------ */

/* margin-top fica por conta do ritmo de .doc-sec — zerar aqui apagaria o
   espaço acima de toda lista. */
.doc-list {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.doc-list > li {
  position: relative;
  padding-left: var(--space-6);
}

.doc-list > li + li {
  margin-top: var(--space-3);
}

.doc-list > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--lime-500);
}

/* --------------------------------------------------------------------------
   4. Blocos de destaque
   -------------------------------------------------------------------------- */

/* Resumo em linguagem simples no topo do documento. O texto completo continua
   valendo — este bloco é leitura, não substituição. */
.doc-note {
  border: 1px solid var(--border-strong);
  border-left: 2px solid var(--lime-500);
  border-radius: var(--radius-card);
  background: var(--surface-1);
  padding: clamp(20px, 3vw, 28px);
}

.doc-note .doc-list {
  margin-top: 0;
}

.doc-note .doc-list > li + li {
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   5. Tabela (bases legais, subprocessadores)
   -------------------------------------------------------------------------- */

.doc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}

.doc-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  text-align: left;
}

.doc-table th,
.doc-table td {
  padding: var(--space-4);
  vertical-align: top;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  border-bottom: 1px solid var(--border-subtle);
}

.doc-table tr:last-child th,
.doc-table tr:last-child td {
  border-bottom: 0;
}

.doc-table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-micro);
  background: var(--surface-1);
}

.doc-table tbody th {
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.doc-table td {
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   6. Contato e navegação entre documentos
   -------------------------------------------------------------------------- */

.doc-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.doc-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--border-subtle);
}

/* Sem barra fixa de download nestas páginas: o rodapé não precisa do respiro
   extra que a landing reserva para o dock. */
.foot-plain {
  padding-block: clamp(40px, 5vw, 64px);
}

/* --------------------------------------------------------------------------
   7. Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .doc-grid {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(48px, 6vw, 88px);
  }

  .toc {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toc {
    position: static;
    max-height: none;
  }
}