/* O estilo das páginas que se leem fora do app: a política de privacidade, os
   termos de uso, a de apagar a conta e as cinco páginas de pergunta sobre
   mesada.

   Quem as lê talvez nem tenha o app instalado, então elas não carregam nada
   dele. As cores são as mesmas da marca. */

:root {
  --noite: #0c1210;
  --noite-2: #141d19;
  --linha: #25332c;
  --claro: #e9f0eb;
  --nevoa: #b3c2b8;
  --verde: #34d17e;
  --uva: #7a5cf0;
  --uva-clara: #b9a8fa;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px 16px 64px;
  background: var(--noite);
  color: var(--claro);
  font: 16px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

main {
  max-width: 40rem;
  margin: 0 auto;
}

.marca {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 32px;
}

.marca span {
  color: var(--uva-clara);
}

/* Nas páginas de pergunta a marca leva à apresentação, e continua com cara de
   marca, e não de link. */
.marca a {
  color: inherit;
  text-decoration: none;
}

h1 {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 16px;
}

h2 {
  font-size: 1.05rem;
  margin: 32px 0 8px;
  color: var(--verde);
}

p,
li,
td {
  color: var(--nevoa);
}

strong,
th {
  color: var(--claro);
}

ol,
ul {
  padding-left: 1.25rem;
}

li {
  margin-bottom: 8px;
}

.bloco {
  background: var(--noite-2);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
}

.bloco h2:first-child {
  margin-top: 0;
}

a {
  color: var(--uva-clara);
}

/* A tabela larga rola dentro dela mesma, e a página não rola de lado. */
.tabela {
  overflow-x: auto;
  margin: 12px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 8px;
  border-bottom: 1px solid var(--linha);
}

.botao {
  display: inline-block;
  background: var(--verde);
  color: var(--noite);
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
  padding: 12px 20px;
  margin-top: 8px;
}

.vigencia {
  font-size: 0.9rem;
}

footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
  font-size: 0.9rem;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}