/* ───────────────────────────────────────────────────────────────────────────
   As páginas de texto: privacidade e as de serviço.

   Nasceu como <style> dentro de privacidade.html. Quando a segunda página de
   texto apareceu, copiar aquele bloco criaria duas versões da mesma régua de
   leitura, e elas divergiriam na primeira correção. Aqui é uma.

   Não entra em base.css porque as páginas de formulário não usam nada disto —
   e o que vai para o arquivo de todos é só o que todos carregam.
   ─────────────────────────────────────────────────────────────────────────── */

/* A abertura das páginas de serviço. Mesma escala das fichas, para a pessoa
   não sentir que trocou de site ao clicar em "Saiba mais". */
.capa { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.capa h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 1.25rem; }
.capa .conduz {
  font-size: clamp(1.0625rem, .5vw + 1rem, 1.2rem);
  color: var(--tinta-media); max-width: 52ch;
}

/* O corpo. A largura vem em ch, não em rem: o que cansa a vista é a contagem
   de caracteres por linha, e ela muda quando alguém aumenta a fonte. */
.texto { max-width: 68ch; padding-block: 0 clamp(2.5rem, 6vw, 4.5rem); }
.texto h1 { font-size: clamp(2rem, 6vw, 2.9rem); line-height: 1.1; margin-bottom: .75rem; }
.texto .data {
  font-family: var(--sans); font-size: .8125rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: 2.5rem;
}
.texto h2 {
  font-family: var(--serifa); font-size: clamp(1.3rem, 3.4vw, 1.6rem); font-weight: 500;
  margin-top: 2.75rem; margin-bottom: .7rem;
}
.texto h3 {
  font-family: var(--sans); font-size: .8125rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-fraca);
  margin-top: 1.75rem; margin-bottom: .4rem;
}
.texto p, .texto li { color: var(--tinta-media); margin-bottom: .9rem; }
.texto ul { padding-left: 1.15rem; margin-bottom: .9rem; }
.texto li { margin-bottom: .45rem; }
.texto a { color: var(--verde); }

.resumo {
  border-left: 3px solid var(--verde); background: #fff;
  padding: 1.25rem 1.4rem; margin-bottom: 2rem;
}
.resumo p:last-child { margin-bottom: 0; }

/* A tabela de operadores da política rola dentro da própria caixa. Sem isto ela
   empurra a página inteira e o texto passa a rolar de lado no celular. */
.rolagem { overflow-x: auto; margin-bottom: 1.5rem; }
/* Em tela larga a tabela sai da medida de leitura e ocupa o espaço que já
   existe ao lado. O recuo negativo é dos DOIS lados: a coluna é centralizada,
   então alargar só a largura empurraria a tabela para a direita e a página
   inteira passaria a rolar. O corte em 68rem deixa folga para o recuo da
   página, que cresce com a largura da tela. */
@media (min-width: 68rem) {
  .rolagem { width: 52rem; margin-inline: calc((100% - 52rem) / 2); }
}
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .9375rem; }
th, td {
  text-align: left; vertical-align: top; padding: .7rem .85rem;
  border-bottom: 1px solid var(--linha); color: var(--tinta-media);
}
th {
  font-family: var(--sans); font-size: .75rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-fraca); font-weight: 500;
}

/* As perguntas do fim das páginas de serviço. Abertas por padrão, ao contrário
   das da home: quem chegou aqui veio pela pergunta, e escondê-la atrás de um
   clique é fazer a pessoa procurar o que foi buscar. */
.duvidas { margin-top: 3rem; border-top: 1px solid var(--linha); padding-top: 2rem; }
.duvidas h2 { margin-top: 0; }
.duvidas dt { font-weight: 500; color: var(--tinta); margin-top: 1.5rem; }
.duvidas dd { margin: .4rem 0 0; color: var(--tinta-media); }

/* O fecho. Leva à agenda da home, não a uma segunda agenda: a marcação é uma
   só, e duas portas para ela é como os horários passam a discordar. */
.fecho {
  margin-top: 3rem; border-top: 1px solid var(--linha); padding-top: 2rem;
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
}
.fecho p { margin: 0 0 .5rem; flex: 1 1 100%; color: var(--tinta-media); }