/*
 * As três páginas jurídicas: Termos, Privacidade e Reembolso.
 *
 * Carregam `styles.css` antes desta folha, e só por causa dele: dali vêm os tokens de
 * cor, os `@font-face` e o `.rail`. O que sobra aqui é a prosa longa, que a landing não
 * tem — ela é feita de blocos curtos, e um documento jurídico é o oposto disso.
 *
 * **A medida é 66ch e não a largura do trilho.** Um contrato lido numa linha de 120
 * caracteres é um contrato que ninguém lê até o fim, e a metade que não é lida é sempre
 * a de baixo, onde moram cancelamento e reembolso.
 */

.doc {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 9vw, 7rem);
}

.doc__head {
  border-bottom: 1px solid var(--border-2);
  padding-bottom: 1.75rem;
  margin-bottom: 2.5rem;
}

.doc__back {
  display: inline-block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.25rem;
}

.doc__title {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.doc__meta {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin: 0;
}

.doc__body {
  max-width: 66ch;
}

.doc__body > * + * {
  margin-top: 1.05rem;
}

.doc__body h2 {
  font-family: "Geist Sans", system-ui, sans-serif;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: 2.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  text-wrap: balance;
}

.doc__body h3 {
  font-family: "Geist Sans", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  margin-top: 1.9rem;
}

/* 17px, um degrau acima do corpo do site, porque a tarefa é outra: a landing é lida aos
   saltos e este documento precisa ser lido inteiro — e a metade que as pessoas deixam de
   ler é sempre a de baixo, onde moram cancelamento e reembolso.

   Em `px` e não em `rem` apenas para fixar a intenção; o root aqui é 16px normal. (A
   primeira versão deste comentário dizia que o root resolvia para 14,5px. Não resolve:
   a medição que levou a isso lia o `<p>` do resumo, que carrega `font-size` inline.) */
.doc__body p,
.doc__body li {
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.72;
  color: var(--text-2);
}

.doc__body strong {
  color: var(--text);
  font-weight: 600;
}

/* `styles.css:331` zera `list-style` em todo `ul` e `ol` do site — faz sentido lá, onde
   as listas são grades e trilhos. Aqui elas são listas de verdade: numa enumeração de
   obrigações, o marcador é o que diz onde um item acaba e o outro começa. */
.doc__body ul {
  list-style: disc;
  padding-left: 1.35rem;
}

.doc__body ol {
  list-style: decimal;
  padding-left: 1.35rem;
}

.doc__body li::marker {
  color: var(--text-3);
}

.doc__body li + li {
  margin-top: 0.5rem;
}

.doc__body a {
  color: var(--accent-ink);
  text-underline-offset: 2px;
}

.doc__body code {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.86em;
  background: var(--surface-3);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* O resumo em linguagem simples que abre cada documento. Não substitui o texto abaixo e
   diz isso de si mesmo — mas é o que a maioria das pessoas vai de fato ler, então é o
   lugar onde as frases têm de ser as mais honestas do arquivo. */
.doc__tldr {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.5rem;
}

.doc__tldr h2 {
  border: none;
  margin: 0 0 0.7rem;
  padding: 0;
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-family: "Geist Mono", ui-monospace, monospace;
}

.doc__tldr ul {
  list-style: disc;
  margin: 0;
  padding-left: 1.2rem;
}

.doc__tldr li {
  font-size: 16px;
  line-height: 1.62;
}

/* Um dado que o texto ao lado afirma e que alguém pode querer conferir depressa: o prazo
   de arrependimento, a lista de quem processa, o endereço do encarregado. */
.doc__facts {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 15px;
}

.doc__facts th {
  text-align: left;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  padding: 0.6rem 0.9rem 0.6rem 0;
  border-bottom: 1px solid var(--border-2);
}

.doc__facts td {
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  line-height: 1.55;
  vertical-align: top;
}

.doc__facts td:first-child {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.doc__scroll {
  overflow-x: auto;
}

/* O que ainda não foi preenchido. Existe para ser impossível de publicar sem ver — um
   documento jurídico com um espaço em branco discreto é o tipo de coisa que vai ao ar. */
.todo {
  background: var(--wait-soft);
  border-bottom: 1px solid var(--wait-line);
  color: var(--text);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.82em;
  padding: 0.1em 0.4em;
}

.doc__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-2);
  font-family: "Geist Sans", system-ui, sans-serif;
  font-size: 0.9rem;
}