/*
 * As duas páginas legais, e só elas.
 *
 * Ficam fora do index.html de propósito: o CSS da landing é inline, montado
 * para uma página de venda de uma tela só, e arrastar aquilo para cá traria
 * barra de urgência, contador e botão fixo de compra — coisas que não têm o que
 * fazer num texto de política de privacidade.
 *
 * A paleta e as fontes são as mesmas da landing, porque a pessoa que clica no
 * rodapé precisa continuar no mesmo lugar. O resto é uma coluna de texto.
 */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("fonts/Baloo2-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("fonts/Baloo2-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --papel: #faf6ef;
  --papel-2: #f3eada;
  --creme: #e5d6bc;
  --couro: #76563c;
  --tinta: #4a3220;
  --max: 560px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 22px;
}

/* O cabeçalho carrega a saída. Página legal sem link de volta é beco: quem
   entrou pelo rodapé só sai apertando o botão do navegador, e em anúncio aberto
   dentro do app da Meta esse botão às vezes fecha a página inteira. */
header {
  background: var(--papel-2);
  border-bottom: 1px solid var(--creme);
  padding: 18px 0 26px;
}
.voltar {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  color: var(--couro);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  margin-top: 4px;
}
main {
  padding: 30px 0 60px;
}
h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 19px;
  margin: 26px 0 6px;
}
p {
  margin-bottom: 12px;
}
a {
  color: var(--couro);
}
.data {
  color: var(--couro);
  font-size: 14px;
  font-weight: 700;
}

/* O que ainda falta, marcado na própria página em vez de num arquivo à parte.
   Pendência que só existe no README é pendência que ninguém vê. */
.pendente {
  background: #fff6e0;
  border: 1px solid #e9b44c;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #7a5a12;
  margin-bottom: 22px;
}

footer {
  border-top: 1px solid var(--creme);
  padding: 22px 0 40px;
  color: var(--couro);
  font-size: 14px;
  text-align: center;
}