

body{
  font-family:var(--sans);color:var(--texto);background:var(--fundo);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box;margin:0;padding:0}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 22px}

.barra-topo{
  background:rgba(8,34,58,.92);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
          backdrop-filter:blur(12px) saturate(1.4);
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;top:0;z-index:50;
}
.barra-topo .wrap{display:flex;align-items:center;gap:8px}
.marca-topo{
  display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  font-weight:800;font-size:16px;letter-spacing:-.3px;
}
.marca-topo .sig{
  width:31px;height:31px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,var(--azul-vivo),var(--azul));
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
  border:1px solid rgba(255,255,255,.22);
}
.barra-topo nav{margin-left:auto;display:flex;align-items:center;gap:8px}
.barra-topo nav a,.barra-topo .entrar{
  color:#c6dcee;text-decoration:none;font-size:14.5px;font-weight:600;
  padding:8px 14px;border-radius:10px;
  transition:background var(--rapido) var(--mola),color var(--rapido) var(--mola);
}
.barra-topo nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.barra-topo .entrar{
  background:rgba(0,192,122,.18);border:1px solid rgba(0,192,122,.45);color:#8ff0c8;
}

.abre-menu{
  display:none;align-items:center;justify-content:center;
  width:41px;height:41px;flex:none;padding:0;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-family:inherit;
  transition:background var(--rapido) var(--mola);
}
.abre-menu:hover{background:rgba(255,255,255,.14)}
.abre-menu svg{width:21px;height:21px;display:block}
.abre-menu .fechar{display:none}
.abre-menu[aria-expanded="true"] .abrir{display:none}
.abre-menu[aria-expanded="true"] .fechar{display:block}

@media (max-width:720px){
  .marca-topo{font-size:15.5px;white-space:nowrap;letter-spacing:-.3px}
  .marca-topo .sig{width:29px;height:29px;font-size:12.5px}

  .abre-menu{display:flex}
  .barra-topo .entrar{margin-left:auto;padding:9px 14px}
  .barra-topo nav{
    position:absolute;top:100%;left:0;right:0;margin-left:0;
    display:flex;flex-direction:column;align-items:stretch;gap:6px;
    padding:10px 22px 16px;
    background:rgba(8,34,58,.98);border-bottom:1px solid rgba(255,255,255,.10);
    box-shadow:0 20px 34px -20px rgba(0,0,0,.75);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity var(--medio) var(--mola),
               transform var(--medio) var(--mola),
               visibility 0s linear var(--medio);
  }
  .barra-topo nav.aberto{
    opacity:1;visibility:visible;transform:none;
    transition-delay:0s,0s,0s;
  }
  .barra-topo nav a{font-size:15px;padding:13px 15px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
}

@media (max-width:340px){
  .marca-topo{font-size:0}
  .marca-topo .sig{font-size:12.5px}
  .barra-topo .entrar{padding:9px 12px;font-size:14px}
}

.guia-topo{
  background:linear-gradient(160deg,#0b3c66 0%,#0a2c4b 60%,#08223a 100%);
  color:#fff;padding:52px 0 56px;
}
.guia-topo .wrap{max-width:760px}
.migalhas{font-size:13.5px;color:#9fbdd6;margin-bottom:18px}
.migalhas a{color:#8ff0c8;text-decoration:none}
.migalhas a:hover{text-decoration:underline}
.guia-topo h1{
  font-size:clamp(27px,4.4vw,42px);line-height:1.15;letter-spacing:-1.1px;
  font-weight:800;max-width:22ch;
}
.guia-topo .resumo{
  font-size:clamp(16px,2vw,18.5px);color:#c6dcee;margin-top:16px;max-width:62ch;
}
.guia-meta{
  display:flex;gap:16px;flex-wrap:wrap;margin-top:22px;
  font-size:13.5px;color:#9fbdd6;
}

.guia-corpo{padding:46px 0 20px}
.guia-corpo .wrap{max-width:760px}
.guia-corpo h2{
  font-size:clamp(22px,3vw,29px);letter-spacing:-.7px;line-height:1.25;
  margin:44px 0 12px;font-weight:800;
}
.guia-corpo h3{font-size:19px;letter-spacing:-.3px;margin:30px 0 8px;color:var(--azul)}
.guia-corpo p{margin:14px 0;max-width:68ch;font-size:17px}
.guia-corpo ul,.guia-corpo ol{margin:14px 0 14px 24px;max-width:68ch}
.guia-corpo li{margin:8px 0;font-size:17px}
.guia-corpo li::marker{color:var(--azul-claro)}
.guia-corpo strong{font-weight:700}
.guia-corpo a{color:var(--azul-claro);font-weight:600}

.indice{
  background:var(--fundo-alt);border:1px solid var(--borda);
  border-left:4px solid var(--azul-claro);
  border-radius:12px;padding:18px 22px;margin:8px 0 30px;
}
.indice b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--suave);margin-bottom:10px}
.indice ol{margin:0 0 0 20px}
.indice li{margin:5px 0;font-size:15px}
.indice a{color:var(--texto);text-decoration:none}
.indice a:hover{color:var(--azul-claro);text-decoration:underline}

.guia-corpo .tab-rol{overflow-x:auto;margin:22px 0}
.guia-corpo table{
  width:100%;border-collapse:collapse;font-size:15px;min-width:420px;
  font-variant-numeric:tabular-nums;
}
.guia-corpo th,.guia-corpo td{
  border:1px solid var(--borda);padding:11px 14px;text-align:left;vertical-align:top;
}
.guia-corpo th{
  background:var(--azul);color:#fff;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.6px;font-weight:700;
}
.guia-corpo tbody tr:nth-child(even){background:var(--fundo-alt)}

.nota-guia{
  background:var(--fundo-alt);border:1px solid var(--borda);
  border-left:5px solid var(--alerta);
  border-radius:11px;padding:16px 20px;margin:24px 0;max-width:68ch;
}
.nota-guia b{display:block;margin-bottom:5px;color:var(--alerta);font-size:14px;
  text-transform:uppercase;letter-spacing:.6px}
.nota-guia p{margin:0;font-size:15.5px}

.fonte-guia{
  font-size:14px;color:var(--suave);border-top:1px solid var(--borda);
  margin-top:40px;padding-top:18px;max-width:68ch;
}

.chamada{
  background:linear-gradient(160deg,#0e4776,#08223a);
  color:#fff;border-radius:18px;padding:34px 32px;margin:48px 0 20px;
  box-shadow:var(--sombra-3);
}
.chamada h2{font-size:24px;letter-spacing:-.6px;margin:0 0 10px;color:#fff}
.chamada p{color:#c6dcee;font-size:16px;margin:0 0 20px;max-width:58ch}
.chamada .btn-guia{
  display:inline-block;text-decoration:none;font-weight:800;font-size:16px;
  background:linear-gradient(165deg,var(--acento-claro) -25%,var(--acento) 38%,var(--acento-escuro));
  color:#04231a;padding:14px 28px;border-radius:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, var(--sombra-verde);
  transition:transform var(--medio) var(--mola),box-shadow var(--medio) var(--mola);
}
.chamada .btn-guia:hover{transform:translateY(-2px)}

.lista-guias{list-style:none;margin:32px 0 60px;padding:0;display:grid;gap:14px}
.lista-guias a{
  display:block;text-decoration:none;color:inherit;
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--raio);padding:22px 24px;box-shadow:var(--sombra-1);
  transition:transform var(--medio) var(--mola),box-shadow var(--medio) var(--mola),
             border-color var(--medio) var(--mola);
}
.lista-guias a:hover{
  transform:translateY(-2px);box-shadow:var(--sombra-2);border-color:var(--borda-forte);
}
.lista-guias .rotulo{
  font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--azul-claro);
}
.lista-guias h2{font-size:19px;letter-spacing:-.4px;margin:7px 0 6px;line-height:1.3}
.lista-guias p{color:var(--suave);font-size:15px;margin:0;line-height:1.55}

.rodape-guia{
  background:var(--tinta);color:#a9c6de;padding:34px 0;margin-top:50px;
  font-size:14px;
}
.rodape-guia a{color:#8ff0c8;text-decoration:none}
.rodape-guia a:hover{text-decoration:underline}

@media (max-width:640px){
  .guia-topo{padding:38px 0 40px}
  .chamada{padding:26px 22px}
  .guia-corpo p,.guia-corpo li{font-size:16.5px}
}

@media (prefers-color-scheme: dark){
  .guia-corpo h3{color:var(--azul-claro)}
  .guia-corpo th{background:var(--tinta-2)}
}
