/* ==========================================================================
   KONTO by Vekso · páginas legais
   Herdam os tokens e as peças de css/painel.css. Aqui mora só o que é próprio
   de uma página de leitura longa: coluna estreita, hierarquia de texto corrido
   e a barra de retorno. Nada de movimento: documento não pisca.
   ========================================================================== */

.legal{
  max-width:52rem;
  margin-inline:auto;
  padding:3.5rem var(--gut) 0;
}

.legal-topo{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;padding-bottom:2.5rem;
}
.voltar{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9375rem;color:var(--texto-2);
  transition:color .16s ease;
}
.voltar:hover{color:var(--ouro)}
.voltar .ic{stroke-width:1.8}

.legal h1{
  font-size:clamp(2rem,5vw,3rem);
  margin-bottom:1rem;
}
.legal-data{
  font:500 .6875rem/1.4 var(--rotulo);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ouro);
  margin-bottom:2.5rem;
}
.legal-resumo{
  background:var(--chassi-alto);border:1px solid var(--linha-forte);
  border-radius:var(--r-medio);padding:1.75rem 2rem;
  margin-bottom:3rem;
}
.legal-resumo p{font-size:1.0625rem;color:var(--texto);text-wrap:pretty}
.legal-resumo p+p{margin-top:.75rem}

.legal section{padding-top:2.75rem}
.legal h2{
  font-size:1.5rem;font-weight:700;
  padding-bottom:.875rem;
}
.legal h3{
  font-size:1.125rem;font-weight:700;
  padding:1.5rem 0 .5rem;
}
.legal p{font-size:1.0625rem;line-height:1.7;color:var(--texto-2);text-wrap:pretty}
.legal p+p{margin-top:1rem}
.legal a:not(.voltar):not(.chave){color:var(--ouro);text-decoration:underline;text-underline-offset:3px}
.legal a:not(.voltar):not(.chave):hover{color:var(--ouro-2)}

.legal ul{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}
.legal ul li{
  display:flex;gap:.75rem;
  font-size:1.0625rem;line-height:1.7;color:var(--texto-2);
}
.legal ul li::before{
  content:"";flex:none;
  width:6px;height:6px;margin-top:.6875rem;
  border-radius:var(--pilula);background:var(--ouro);
}

.legal dl{display:flex;flex-direction:column;gap:1.25rem;margin-top:1.25rem}
.legal dl>div{
  background:var(--chassi);border:1px solid var(--linha);
  border-radius:var(--r-visor);padding:1.5rem 1.75rem;
}
.legal dt{
  font:500 .65625rem/1.4 var(--rotulo);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ouro);
  margin-bottom:.5rem;
}
.legal dd{margin:0;font-size:1rem;line-height:1.65;color:var(--texto-2)}

.legal-rascunho{
  display:flex;gap:.875rem;
  background:var(--creme);border-radius:var(--r-medio);
  padding:1.5rem 1.75rem;margin-bottom:2.5rem;
}
.legal-rascunho .ic{flex:none;margin-top:.1875rem;color:var(--tinta);stroke-width:1.8}
.legal-rascunho p{font-size:1rem;line-height:1.6;color:var(--tinta-creme)}
.legal-rascunho b{color:var(--tinta)}

.legal-fim{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  border-top:1px solid var(--linha);
  margin-top:4rem;padding-top:2.5rem;
}
.legal-fim p{font-size:.9375rem;color:var(--texto-3)}

@media (max-width:40em){
  .legal{padding-top:2rem}
  .legal-resumo{padding:1.375rem 1.5rem}
  .legal dl>div{padding:1.25rem 1.375rem}
}