/* Estilo dos documentos legais. Herda os tokens de marca.css.
   Prioridade aqui é legibilidade: coluna estreita, entrelinha generosa,
   hierarquia clara. Documento jurídico que ninguém consegue ler não
   cumpre a função de informar. */

/* padding-block, nunca o atalho `padding: X 0`: estas seções também têm a
   classe .wrap, e o zero horizontal do atalho apagava o gutter dela. */
.doc{padding-block:clamp(2.4rem,6vw,4rem) clamp(3rem,7vw,5rem)}
.doc-cabeca{border-bottom:var(--rule);padding-bottom:1.8rem;margin-bottom:2.4rem}
.doc-cabeca h1{font-size:clamp(var(--t-3),7vw,var(--t-5));max-width:16ch}
.doc-data{margin:1.1rem 0 0;font-size:var(--t--1);color:var(--tinta-70)}
.doc-resumo{
  margin:1.6rem 0 0;
  padding:1.1rem 1.3rem;
  background:var(--marca);
  border:2px solid var(--tinta);
  max-width:66ch;
  font-size:var(--t-0);
}
.doc-resumo p{margin:0 0 .6em;max-width:none}
.doc-resumo p:last-child{margin-bottom:0}

/* sumário */
.sumario{margin:0 0 3rem;padding:0;list-style:none;columns:2;column-gap:2.4rem;max-width:62rem}
@media(max-width:700px){.sumario{columns:1}}
.sumario li{break-inside:avoid;margin:0 0 .45rem;font-size:var(--t--1)}
.sumario a{text-decoration-color:var(--tinta-35);text-underline-offset:.22em}
.sumario a:hover{text-decoration-color:var(--impulso)}

.doc-corpo{max-width:68ch}
.doc-corpo h2{
  font-size:clamp(var(--t-1),3.4vw,var(--t-2));
  margin:2.8rem 0 .9rem;
  padding-top:1.1rem;
  border-top:1px solid var(--tinta-35);
  scroll-margin-top:1rem;
}
.doc-corpo h2:first-child{margin-top:0;border-top:0;padding-top:0}
.doc-corpo h3{
  font-family:var(--corpo);font-weight:700;font-stretch:normal;
  font-size:var(--t-0);line-height:1.4;letter-spacing:0;
  margin:1.6rem 0 .4rem;
}
.doc-corpo p,.doc-corpo li{max-width:68ch}
.doc-corpo ul,.doc-corpo ol{padding-left:1.3rem;margin:0 0 1em}
.doc-corpo li{margin-bottom:.45rem}
.doc-corpo a{text-underline-offset:.2em}

/* tabela de dados: o que coletamos, por que, por quanto tempo */
.tabela{width:100%;border-collapse:collapse;margin:1.2rem 0 1.6rem;font-size:var(--t--1)}
.tabela caption{text-align:left;color:var(--tinta-70);padding-bottom:.6rem;font-size:var(--t--1)}
.tabela th,.tabela td{border:1px solid var(--tinta-35);padding:.6rem .7rem;vertical-align:top;text-align:left}
.tabela th{background:var(--papel-2);font-family:var(--display);font-weight:700;font-stretch:106%;font-size:.78rem}
.tabela-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* destaque para o que o leitor mais precisa saber */
.atencao{
  border-left:6px solid var(--impulso);
  background:var(--branco);
  padding:1rem 1.2rem;
  margin:1.4rem 0;
  max-width:68ch;
}
.atencao p:last-child{margin-bottom:0}

/* campos que só a Aeternis pode preencher */
.preencher{
  background:var(--impulso);
  color:var(--branco);
  padding:.08em .45em;
  font-family:var(--display);
  font-weight:700;font-stretch:104%;
  font-size:.82em;
  white-space:nowrap;
}

/* painel de preferência de cookies dentro da política */
.preferencia{
  border:var(--rule);
  background:var(--branco);
  padding:1.2rem 1.3rem;
  margin:1.4rem 0;
  max-width:68ch;
  display:grid;gap:.9rem;
}
.preferencia-estado{margin:0;font-weight:600}
.preferencia-acoes{display:flex;flex-wrap:wrap;gap:.7rem}

.voltar{display:inline-block;margin-top:3rem;font-size:var(--t--1);text-underline-offset:.22em}

/* ---------- celular ---------- */
@media(max-width:640px){
  .doc-cabeca{text-align:center}
  .doc-data{text-align:center}
  .doc-resumo{text-align:left}          /* texto corrido continua à esquerda */
  .doc-corpo h2{text-align:center}
  .doc-corpo h3{text-align:left}
  .sumario{text-align:center}
  .preferencia-acoes{justify-content:center}
  .preferencia{text-align:center}
  .preferencia .cookies-botao{flex:1 1 9rem}
  .voltar{display:block;text-align:center}
  .tabela th,.tabela td{padding:.55rem .6rem}
}