:root{
  --marinho:#142A48;
  --marinho-fundo:#0E1E36;
  --tinta:#1E2A3A;
  --dourado:#B08636;
  --dourado-claro:#D6B26A;
  --cinza:#6B7789;
  --linha:#E1E6ED;
  --creme:#FBF7EF;
  --papel:#FFFFFF;
  --serifa:Georgia,"Times New Roman",serif;
  --corpo:"Aptos Display","Aptos","Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --rodape:"Lucida Bright","Lucida Serif",Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--creme);color:var(--tinta);
  font-family:var(--corpo);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
/* Justificado só onde a linha é larga o bastante para não abrir buraco entre
   as palavras. Em caixa estreita o esticamento chega a 11 vezes o espaço
   normal, e é isso que dá a sensação de letra mal encaixada. */
p{
  text-align:justify;hyphens:none;-webkit-hyphens:none;
  margin:0 0 1.1em;max-width:66ch;
}
h1,h2,h3,summary{text-wrap:balance}
img{max-width:100%}

/* nenhuma destas é larga o bastante para justificar */
.cartao p,.caso p,.lei p,.contato-grade p,.num span,details p,
footer p,caption,.sub,.chapeu,.cargo,td,th,.trajeto li,.perfil p{
  text-align:left;max-width:none;
}
.limite{max-width:920px;margin:0 auto;padding:0 24px}
.estreito{max-width:720px}
a{color:var(--marinho)}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--dourado);outline-offset:3px}

/* ---------- cabeçalho ---------- */
.topo{background:var(--marinho);padding:22px 0 0}
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:14px;text-decoration:none}
.marca img{width:196px;display:block}
.topo-tel{font-size:13.5px;color:#A9B6C9;text-align:right;line-height:1.5}
.topo-tel a{color:var(--dourado-claro);text-decoration:none}
.topo-tel a:hover{text-decoration:underline}

nav.menu{margin-top:18px;border-top:1px solid rgba(255,255,255,.14)}
nav.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
nav.menu a{
  display:block;padding:13px 0;margin-right:26px;
  color:#C8D2DF;text-decoration:none;font-size:14.5px;
  letter-spacing:.02em;border-bottom:2px solid transparent;
}
nav.menu a:hover{color:#fff}
nav.menu a[aria-current="page"]{color:#fff;border-bottom-color:var(--dourado)}

/* ---------- blocos ---------- */
section{padding:62px 0}
section.claro{background:var(--papel)}
section.escuro{background:var(--marinho-fundo);color:#E8EDF4}
section.escuro h2,section.escuro h3{color:#fff}
section.escuro p{color:#C9D4E2}
section.escuro a{color:var(--dourado-claro)}
section.escuro .chapeu{color:var(--dourado-claro)}

h1{
  font-family:var(--serifa);font-weight:normal;
  font-size:40px;line-height:1.2;margin:0 0 20px;color:var(--marinho);
}
h2{
  font-family:var(--serifa);font-weight:normal;
  font-size:28px;line-height:1.25;margin:0 0 6px;color:var(--marinho);
}
h3{font-family:var(--serifa);font-weight:normal;font-size:20px;margin:0 0 8px;color:var(--marinho)}
.chapeu{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dourado);margin:0 0 10px;font-weight:600;text-align:left;
}
.sub{color:var(--cinza);font-size:16px;margin:0 0 26px;text-align:left}
.regua{width:64px;height:3px;background:var(--dourado);margin:0 0 24px}

/* ---------- capa ---------- */
.capa{background:var(--marinho);color:#E8EDF4;padding:64px 0 70px}
.capa h1{color:#fff;font-size:44px;max-width:19ch}
.capa p{color:#C9D4E2;max-width:62ch}
.capa .chapeu{color:var(--dourado-claro)}

.botoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-block;padding:13px 24px;text-decoration:none;
  font-size:15px;border:1px solid var(--dourado);
}
.btn-cheio{background:var(--dourado);color:#12203A;font-weight:600}
/* a regra de link da seção escura pintava o texto do botão de dourado sobre dourado */
section.escuro .btn-cheio,.capa .btn-cheio{color:#12203A}
.btn-cheio:hover{background:var(--dourado-claro)}
.btn-vazio{color:var(--dourado-claro)}
.btn-vazio:hover{background:rgba(176,134,54,.14)}
section.claro .btn-vazio,section:not(.escuro):not(.capa) .btn-vazio{color:var(--dourado)}

/* ---------- números ---------- */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px 22px;margin:10px 0 24px}
.num b{
  display:block;font-family:var(--serifa);font-size:34px;
  line-height:1.1;color:var(--dourado);font-weight:normal;
}
.num span{display:block;font-size:14.5px;color:var(--cinza);margin-top:6px;line-height:1.45}
section.escuro .num span{color:#A9B6C9}

/* ---------- cartões ---------- */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:8px}
/* com quatro cartões, três colunas deixam o último órfão numa linha sozinha */
.cartoes.quatro{grid-template-columns:repeat(2,1fr)}
@media (max-width:620px){.cartoes.quatro{grid-template-columns:1fr}}
.cartao{
  background:var(--papel);border:1px solid var(--linha);
  border-top:3px solid var(--dourado);padding:24px 22px;
  display:flex;flex-direction:column;
}
.cartao h3{margin-top:0;text-wrap:pretty}
.cartao p{font-size:15.5px;margin-bottom:0}
.cartao p.leva{margin-top:auto;padding-top:14px}
.cartao a{font-size:15px}
section.claro .cartao{background:var(--creme)}

/* ---------- lista numerada de fases ---------- */
.fase{border-left:3px solid var(--linha);padding:0 0 34px 26px;position:relative}
.fase:last-child{padding-bottom:0}
.fase .marcador{
  position:absolute;left:-14px;top:0;width:25px;height:25px;border-radius:50%;
  background:var(--dourado);color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-family:var(--corpo);
}
.fase h3{margin-top:0}

/* ---------- base legal ---------- */
.lei{
  background:var(--creme);border-left:3px solid var(--dourado);
  padding:14px 18px;margin:0 0 18px;font-size:14.5px;color:var(--tinta);
}
section.claro .lei{background:#F6F3EB}
.lei b{font-family:var(--serifa);font-weight:normal;color:var(--marinho);display:block;margin-bottom:3px;font-size:15px}
.lei p{margin:0;font-size:14.5px}

/* ---------- tabela ---------- */
.rolagem{overflow-x:auto;margin:0 0 14px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px;background:var(--papel)}
caption{caption-side:bottom;text-align:left;font-size:13px;color:var(--cinza);padding-top:10px;line-height:1.5}
th,td{padding:10px 12px;border-bottom:1px solid var(--linha);text-align:left;vertical-align:top}
thead th{
  background:var(--marinho);color:#fff;font-weight:600;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;border-bottom:none;
}
td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.n{text-align:right}
tbody tr:nth-child(even){background:#FCFBF8}

/* ---------- perfil ---------- */
.perfil{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:start}
.perfil img{width:300px;height:300px;object-fit:cover;border:1px solid var(--linha);display:block}
.perfil h2{margin-bottom:2px}
.cargo{color:var(--dourado);font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px;text-align:left;font-weight:600}
@media (max-width:760px){.perfil{grid-template-columns:1fr;gap:24px}
  .perfil img{width:100%;max-width:340px;height:auto;aspect-ratio:1}}

.trajeto{list-style:none;margin:22px 0 0;padding:0}
.trajeto li{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--linha);font-size:15.5px}
.trajeto li b{font-family:var(--serifa);font-weight:normal;color:var(--dourado);white-space:nowrap}
@media (max-width:520px){.trajeto li{grid-template-columns:1fr;gap:2px}}

/* ---------- caso ---------- */
.caso{background:var(--papel);border:1px solid var(--linha);padding:24px 24px 8px;margin-bottom:18px}
section.claro .caso{background:var(--creme)}
.caso .quem{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dourado);margin:0 0 10px;text-align:left;font-weight:600}
.caso .rot{font-weight:600;color:var(--marinho)}

/* ---------- perguntas ---------- */
details{border-bottom:1px solid var(--linha);padding:16px 0}
summary{cursor:pointer;font-family:var(--serifa);font-size:18px;color:var(--marinho);list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";color:var(--dourado);font-weight:700;margin-right:10px;font-family:var(--corpo)}
details[open] summary::before{content:"–"}
details p{margin-top:12px;font-size:16px}

/* ---------- contato ---------- */
.contato-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
.contato-grade .item b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dourado);margin-bottom:6px}
.contato-grade .item p{margin:0;text-align:left;font-size:16px}
.contato-grade a{color:var(--marinho)}

/* ---------- rodapé ---------- */
footer{background:var(--marinho);color:#B7C3D3;padding:44px 0 34px;font-family:var(--rodape);font-size:14px;line-height:1.7}
footer .limite>div{max-width:none}
footer h4{font-family:var(--serifa);color:#fff;font-size:16px;font-weight:normal;margin:0 0 10px}
footer a{color:var(--dourado-claro);text-decoration:none}
footer a:hover{text-decoration:underline}
footer p{text-align:left;margin:0 0 .8em}
.rodape-grade{display:grid;grid-template-columns:1.4fr 1fr;gap:36px}
@media (max-width:640px){.rodape-grade{grid-template-columns:1fr}}
.redes a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;margin-right:18px}
.redes a:hover span{text-decoration:underline}
.redes .ico{flex:none;display:block}
.contato-grade .redes a{color:var(--marinho)}

.fontes{border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:22px;font-size:12.5px;color:#93A1B4;line-height:1.65}
.fontes b{color:#C8D2DF;font-weight:normal}
.aviso{margin-top:16px;font-size:12.5px;color:#93A1B4;line-height:1.65}

@media (max-width:700px){
  h1{font-size:31px}.capa h1{font-size:33px}h2{font-size:24px}
  section{padding:44px 0}.capa{padding:48px 0 52px}
  .marca img{width:162px}
  .topo-tel{display:none}
  nav.menu a{margin-right:20px;font-size:14px}
}

/* ---------- janela de temas (abas) ---------- */
/* Sem JavaScript as abas ficam escondidas e os painéis aparecem um embaixo
   do outro, então nada do conteúdo se perde. */
section.temas{padding-top:40px}
.abas{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  position:sticky;top:0;z-index:5;background:var(--creme);padding-top:10px;
}
.abas[hidden]{display:none}
.aba{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  font:inherit;text-align:left;color:var(--marinho);
  background:var(--papel);border:1px solid var(--linha);border-bottom:none;
  border-top:3px solid var(--linha);padding:12px 16px 13px;line-height:1.25;
  transition:background .15s,border-color .15s;
}
.aba small{
  display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cinza);font-weight:600;margin-bottom:3px;
}
.aba span{display:block;font-family:var(--serifa);font-size:19px}
.aba:hover{border-top-color:var(--dourado-claro)}
.aba[aria-selected="true"]{background:var(--marinho);border-color:var(--marinho);border-top-color:var(--dourado);color:#fff}
.aba[aria-selected="true"] small{color:var(--dourado-claro)}
.janela{background:var(--papel);border:1px solid var(--linha);border-top:3px solid var(--marinho)}
.painel{padding:40px 44px 34px}
.painel+.painel{border-top:1px solid var(--linha)}
.painel[hidden]{display:none}
.painel:focus{outline:none}
.janela .lei{background:#F6F3EB}
.janela .fase .marcador{box-shadow:0 0 0 4px var(--papel)}
.seguinte{
  margin:34px 0 0;padding-top:18px;border-top:1px solid var(--linha);
  text-align:right;max-width:none;font-size:15px;
}
.seguinte a{color:var(--dourado);font-weight:600;text-decoration:none}
.seguinte a::after{content:" \2192"}
.seguinte a:hover{text-decoration:underline}
.js-abas .painel+.painel{border-top:none}
@media (max-width:700px){
  .abas{grid-template-columns:repeat(2,1fr);position:static;padding-top:0}
  .aba{border-bottom:1px solid var(--linha)}
  .aba[aria-selected="true"]{border-bottom-color:var(--marinho)}
  .aba span{font-size:17px}
  .painel{padding:28px 20px 26px}
  .janela{border-left:none;border-right:none;margin:0 -24px}
  section.temas{padding-top:28px}
}

/* ---------- seletor de idioma ---------- */
.topo-dir{display:flex;align-items:center;gap:20px}
.idioma{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:13px;letter-spacing:.06em;color:#fff;text-decoration:none;
  border:1px solid rgba(214,178,106,.55);padding:6px 11px;line-height:1;
}
.idioma:hover{background:rgba(176,134,54,.18);border-color:var(--dourado-claro)}
.idioma svg{flex:none}
@media (max-width:700px){.topo-linha{flex-wrap:nowrap}.idioma{padding:6px 9px}}

/* No celular a linha tem uns 40 caracteres, e justificar abre buraco de até
   oito espaços entre as palavras. Abaixo de 620px o texto alinha à esquerda. */
@media (max-width:620px){p{text-align:left}}

.painel > h3:first-child{font-size:24px;line-height:1.25;margin-bottom:14px}


/* ======================================================================
   Acabamento visual, 7 de outubro de 2026
   ====================================================================== */

/* --- capa com profundidade ------------------------------------------- */
.capa{
  position:relative;
  background:
    radial-gradient(1100px 440px at 80% -12%, rgba(176,134,54,.22), transparent 64%),
    linear-gradient(180deg,#17324F 0%, var(--marinho) 56%, #112440 100%);
}
.capa::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--dourado) 0%,rgba(176,134,54,.35) 38%,rgba(176,134,54,0) 78%);
}
.capa h1{font-size:46px;letter-spacing:-.006em}
h1,h2{letter-spacing:-.005em}

/* --- duas seções escuras seguidas viravam um bloco só ----------------- */
section.escuro+section.escuro{padding-top:0}
section.escuro+section.escuro>.limite{
  border-top:1px solid rgba(255,255,255,.13);padding-top:54px;
}

/* --- números com fio de separação ------------------------------------ */
.num{border-top:1px solid var(--linha);padding-top:14px}
section.escuro .num{border-top-color:rgba(255,255,255,.17)}
.capa .num{border-top-color:rgba(255,255,255,.17)}
.num b{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* --- cartões: relevo no toque ---------------------------------------- */
.cartao{transition:transform .18s ease,box-shadow .18s ease,border-top-color .18s ease}
.cartao:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,42,72,.11)}
.cartao:hover{border-top-color:var(--dourado-claro)}

/* cinco cartões em três colunas deixavam um buraco na segunda linha */
.cartoes.cinco{grid-template-columns:repeat(6,1fr)}
.cartoes.cinco>.cartao:nth-child(-n+3){grid-column:span 2}
.cartoes.cinco>.cartao:nth-child(n+4){grid-column:span 3}
@media (max-width:860px){
  .cartoes.cinco{grid-template-columns:repeat(2,1fr)}
  .cartoes.cinco>.cartao{grid-column:auto}
}
@media (max-width:560px){.cartoes.cinco{grid-template-columns:1fr}}

/* --- botões ----------------------------------------------------------- */
.btn{transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.btn-cheio{box-shadow:0 2px 10px rgba(176,134,54,.22)}
.btn:hover{transform:translateY(-1px)}
.btn-cheio:hover{box-shadow:0 6px 18px rgba(176,134,54,.30)}

/* --- tabela ----------------------------------------------------------- */
tbody tr{transition:background .14s ease}
tbody tr:hover{background:#F7F2E6}
td small{display:block;font-size:12.5px;color:var(--cinza);margin-top:3px;line-height:1.35}

/* --- destaque legal e casos ------------------------------------------- */
.caso{box-shadow:0 1px 0 rgba(20,42,72,.04)}

/* --- menu no celular: uma linha que desliza --------------------------- */
@media (max-width:700px){
  nav.menu ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  nav.menu ul::-webkit-scrollbar{display:none}
  nav.menu li{flex:0 0 auto}
  nav.menu a{white-space:nowrap;margin-right:18px}
  nav.menu li:last-child a{margin-right:4px}
}

/* --- botão flutuante de WhatsApp -------------------------------------- */
.zap{
  position:fixed;right:22px;bottom:22px;z-index:40;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--marinho);color:#fff;border:1px solid var(--dourado);
  padding:11px 17px;text-decoration:none;font-size:14.5px;line-height:1;
  font-family:var(--corpo);box-shadow:0 10px 26px rgba(10,24,44,.30);
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.zap:hover{background:var(--dourado);color:#12203A;transform:translateY(-2px)}
.zap svg{flex:none}
@media (max-width:620px){
  .zap{right:15px;bottom:15px;padding:13px;border-radius:50%}
  .zap span{display:none}
}
@media print{.zap{display:none}}

/* --- títulos que acompanham a largura da tela ------------------------- */
h1{font-size:clamp(29px,5.0vw,40px)}
.capa h1{font-size:clamp(31px,6.2vw,46px)}
h2{font-size:clamp(23px,3.1vw,28px)}

/* --- aviso de que o menu desliza no celular -------------------------- */
@media (max-width:700px){
  nav.menu{position:relative}
  nav.menu::after{
    content:"";position:absolute;right:0;top:1px;bottom:0;width:38px;pointer-events:none;
    background:linear-gradient(90deg,rgba(20,42,72,0),var(--marinho) 72%);
  }
}