/* ==============================================================
   CÓDIGO LUMINOSO — estilos das páginas legais
   Reutiliza os mesmos tokens de cor/tipografia do site principal.
   ============================================================== */
:root{
  --tinta:#30454C;
  --tinta-2:#3C555E;
  --tinta-rgb:48,69,76;
  --luz:#B3EBF2;
  --luz-claro:#DFF7FA;
  --luz-escuro:#2E7A88;
  --luz-rgb:179,235,242;
  --luz-claro-rgb:223,247,250;
  --papel:#FFFFFF;
  --papel-suave:#F1F9FA;
  --linha:#E2ECEE;
  --texto:#3A4A50;
  --texto-suave:#61757C;
  --claro-rgb:237,246,247;
  --texto-claro-suave:rgba(var(--claro-rgb),.74);
  --dourado:#F2CB91;

  --display:"Fraunces",Georgia,serif;
  --sans:"Instrument Sans",system-ui,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,"SF Mono",monospace;

  --raio:16px;
  --raio-s:10px;
  --largura:1160px;
  --largura-texto:760px;
  --alt-header:72px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--texto);
  background:var(--papel);
  line-height:1.75;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--luz);color:var(--tinta)}
a{color:var(--luz-escuro);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--luz-escuro);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--largura);margin:0 auto;padding:0 28px}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;
  padding:.6rem 1rem;border-radius:0 0 var(--raio-s) 0;z-index:100;
}
.skip-link:focus{left:0}

/* ---------- Cabeçalho ---------- */
.l-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--linha);height:var(--alt-header);
}
.l-header .wrap{display:flex;align-items:center;justify-content:space-between;height:100%}
.logo{display:inline-flex;align-items:center;gap:.7rem;color:var(--tinta)}
.logo:hover{text-decoration:none}
.logo-img{height:40px;width:auto;display:block;flex:0 0 auto}
.logo-text{display:grid;line-height:1.05}
.logo-text b{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--tinta)}
.logo-text small{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texto-suave);margin-top:3px;
}
.voltar{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-suave);display:inline-flex;align-items:center;gap:.4rem;
}
.voltar:hover{color:var(--luz-escuro);text-decoration:none}

/* ---------- Conteúdo ---------- */
.legal{padding:64px 0 88px}
.legal .wrap-texto{max-width:var(--largura-texto);margin:0 auto}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--luz-escuro);margin-bottom:1rem;
}
.legal h1{
  font-family:var(--display);font-weight:600;color:var(--tinta);
  font-size:clamp(2rem,4.5vw,2.9rem);line-height:1.12;letter-spacing:-.015em;
}
.legal .meta{
  font-family:var(--mono);font-size:.8rem;color:var(--texto-suave);
  margin-top:1rem;padding-bottom:2rem;border-bottom:1px solid var(--linha);margin-bottom:2.4rem;
}
.legal h2{
  font-family:var(--display);font-weight:600;color:var(--tinta);
  font-size:1.4rem;line-height:1.25;letter-spacing:-.01em;
  margin:2.8rem 0 .9rem;
}
.legal h2 .num{color:var(--luz-escuro);font-family:var(--mono);font-size:.9rem;
  font-weight:500;margin-right:.6rem;vertical-align:.15em}
.legal h3{font-size:1.06rem;color:var(--tinta);margin:1.8rem 0 .5rem;font-weight:600}
.legal p{margin:0 0 1.05rem;color:var(--texto)}
.legal ul,.legal ol{margin:0 0 1.15rem 1.2rem;color:var(--texto)}
.legal li{margin:.4rem 0;padding-left:.3rem}
.legal li::marker{color:var(--luz-escuro)}
.legal strong{color:var(--tinta);font-weight:600}

.lead{font-size:1.08rem;color:var(--texto-suave)}

/* Bloco de dados / destaque */
.bloco{
  background:var(--papel-suave);border:1px solid var(--linha);
  border-radius:var(--raio);padding:1.4rem 1.6rem;margin:1.4rem 0 1.6rem;
}
.bloco p{margin:.35rem 0}
.bloco .rotulo{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-suave);
}

/* Tabela */
.tabela-envolve{overflow-x:auto;margin:1.2rem 0 1.6rem}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:460px}
th,td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--linha);vertical-align:top}
th{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texto-suave);background:var(--papel-suave);font-weight:500;
}

/* Nota para o administrador do site (visível, a substituir/confirmar) */
.nota-editor{
  background:#FFF6E6;border:1px solid rgba(242,203,145,.7);border-left:4px solid var(--dourado);
  border-radius:var(--raio-s);padding:1rem 1.2rem;margin:1.6rem 0;font-size:.9rem;color:#6B5320;
}
.nota-editor strong{color:#6B5320}

/* ---------- Rodapé ---------- */
.rodape{background:var(--tinta);color:var(--texto-claro-suave);padding:56px 0 28px;margin-top:64px}
.rodape .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.rodape .logo-text b{color:#F6FCFD}
/* As letras "CL" do logótipo são azul-marinho e ficariam ilegíveis
   sobre o fundo --tinta. Assenta numa placa clara. */
.rodape .logo-img{
  height:38px;padding:5px 7px;border-radius:11px;background:#F6FCFD;
}
/* Opacidades em .62: abaixo disso o texto não cumpre o contraste mínimo
   de 4.5:1 (WCAG AA) sobre --tinta. Nenhuma cor da paleta foi alterada. */
.rodape .logo-text small{color:rgba(var(--claro-rgb),.62)}
.rodape nav{display:flex;flex-wrap:wrap;gap:1rem 1.4rem}
.rodape nav a{color:var(--texto-claro-suave);font-size:.85rem}
.rodape nav a:hover{color:var(--luz-claro);text-decoration:none}
.rodape-base{
  border-top:1px solid rgba(var(--luz-claro-rgb),.18);margin-top:28px;padding-top:22px;
  font-size:.78rem;color:rgba(var(--claro-rgb),.62);
}
.rodape-base .wrap{display:block}

/* ---------- Responsivo ---------- */
@media (max-width:640px){
  .legal{padding:44px 0 64px}
  .logo-text small{display:none}
  .rodape .wrap{flex-direction:column;align-items:flex-start}
}