/* Fábio Gimenes & Associados — folha de estilo do site
   Identidade: azul institucional #00709C (cor do logotipo), fundo profundo
   #00435F, creme #F5F5F0, tinta #10242F, acento ouro #C9A227.
   Tipografia: Karla (títulos e interface) + Source Serif 4 (texto corrido). */

:root{
  --azul:#00709C;
  --fundo:#00435F;
  --fundo-2:#0E2C3A;
  --creme:#F5F5F0;
  --areia:#EDE7DC;
  --tinta:#10242F;
  --tinta-2:#3E5460;
  --tinta-3:#6E818C;
  --linha:#DBE2E6;
  --linha-2:#C3CED4;
  --ouro:#C9A227;
  --ouro-escuro:#8A6E12;
  --branco:#FFFFFF;
  --sombra:0 1px 2px rgba(16,36,47,.05), 0 14px 34px -22px rgba(16,36,47,.35);
  --max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;background:var(--branco);color:var(--tinta);
  font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul)}

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

/* ---------------------------------------------------------------- cabeçalho */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;
  border-bottom:1px solid transparent;
  transition:background .2s, border-color .2s;
}
.topo.solido{
  background:rgba(255,255,255,.94);backdrop-filter:saturate(150%) blur(8px);
  border-bottom-color:var(--linha);
}
.topo .logo-escuro{display:none}
.topo.solido .logo-claro{display:none}
.topo.solido .logo-escuro{display:block}
.topo .nav a{color:rgba(255,255,255,.88)}
.topo.solido .nav a{color:var(--tinta-2)}
.topo .nav a:hover{color:var(--branco);border-bottom-color:var(--ouro)}
.topo.solido .nav a:hover,.topo.solido .nav a[aria-current="page"]{
  color:var(--azul);border-bottom-color:var(--ouro)}
.topo-in{
  max-width:var(--max);margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.topo .marca img{width:236px}
.nav{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.nav a{
  color:var(--tinta-2);text-decoration:none;font-size:15px;font-weight:600;
  letter-spacing:.01em;padding:4px 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--azul);border-bottom-color:var(--ouro)}

/* ------------------------------------------------------------------- capa */
.capa{position:relative;background:var(--fundo);color:var(--branco);overflow:hidden;
  min-height:min(88vh,720px);display:flex;align-items:center;padding-top:56px}
.capa .container{position:relative;z-index:3;padding-top:96px;padding-bottom:112px;width:100%}
.capa-fundo{position:absolute;inset:0;z-index:1;line-height:0}
.capa-fundo svg{width:100%;height:100%;display:block}
.capa-veu{position:absolute;inset:0;z-index:2;background:linear-gradient(100deg,
  rgba(0,67,95,.96) 0%, rgba(0,67,95,.90) 34%, rgba(0,67,95,.52) 66%, rgba(0,67,95,.22) 100%)}
.capa .marca-capa{margin-bottom:30px}
.capa .marca-capa img{width:min(360px,74vw);height:auto}
.capa .regua{width:92px;height:5px;background:var(--ouro);margin-bottom:28px}
.areas-capa{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0;padding:0;list-style:none}
.areas-capa li{
  border:1px solid rgba(255,255,255,.36);border-radius:999px;padding:7px 15px;
  font-size:13.5px;font-weight:600;letter-spacing:.015em;color:rgba(255,255,255,.92);
}
.btn-zap{background:var(--ouro);color:#231A00}
.btn-zap:hover{background:#DCB737}
.capa h1{
  font-size:clamp(34px,5.4vw,60px);line-height:1.06;letter-spacing:-.028em;
  font-weight:800;margin:0;max-width:19ch;text-wrap:balance;
}
.capa .sub{
  font-family:"Source Serif 4",Georgia,serif;font-size:clamp(18px,2.2vw,22px);
  line-height:1.55;color:rgba(255,255,255,.80);margin:22px 0 0;max-width:56ch;
}
.capa .acoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}

.btn{
  display:inline-block;text-decoration:none;font-weight:700;font-size:15.5px;
  padding:14px 26px;border-radius:8px;border:1.5px solid transparent;transition:.16s;
}
.btn-p{background:var(--branco);color:var(--fundo)}
.btn-p:hover{background:var(--areia)}
.btn-s{border-color:rgba(255,255,255,.45);color:var(--branco)}
.btn-s:hover{border-color:var(--branco);background:rgba(255,255,255,.08)}

/* ---------------------------------------------------------------- seções */
.secao{padding:88px 0}
.secao.claro{background:var(--creme)}
.secao.areia{background:var(--areia)}
.rotulo{
  font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--azul);
  font-weight:700;margin:0 0 10px;
}
h2{
  font-size:clamp(26px,3.6vw,38px);line-height:1.14;letter-spacing:-.022em;
  font-weight:800;margin:0 0 16px;text-wrap:balance;max-width:22ch;
}
h3{font-size:20px;line-height:1.28;font-weight:700;margin:0 0 10px;letter-spacing:-.01em}
.chamada{
  font-family:"Source Serif 4",Georgia,serif;font-size:20px;line-height:1.58;
  color:var(--tinta-2);margin:0 0 40px;max-width:62ch;
}
p{margin:0 0 16px;max-width:68ch}

/* ------------------------------------------------------------------ áreas */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.area{
  background:var(--branco);border:1px solid var(--linha);border-radius:14px;
  padding:28px 26px 30px;box-shadow:var(--sombra);
}
.area .n{
  font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--ouro-escuro);
  display:block;margin-bottom:14px;
}
.area p{font-size:15.5px;color:var(--tinta-2);margin:0;max-width:none;line-height:1.62}

/* ------------------------------------------------------------- como trabalha */
.valores{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.valor{border-top:3px solid var(--ouro);padding-top:20px}
.valor h3{margin-bottom:8px}
.valor p{font-size:15.5px;color:var(--tinta-2);max-width:40ch;margin:0}

/* --------------------------------------------------------------- perfil */
.perfil{display:grid;grid-template-columns:300px 1fr;gap:46px;align-items:start;
  margin-top:40px}
.perfil-foto img{width:100%;border-radius:16px;box-shadow:var(--sombra)}
.perfil-foto figcaption{
  margin-top:14px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-3);font-weight:700;line-height:1.6;
}
.perfil h3{font-size:24px;margin-bottom:6px}
.perfil .cargo{
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro-escuro);
  font-weight:700;margin:0 0 18px;
}
.formacao{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:16px}
.formacao li{padding-left:20px;position:relative;font-size:15.5px;color:var(--tinta-2);
  line-height:1.6;max-width:56ch}
.formacao li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:2px;background:var(--ouro)}
.formacao strong{color:var(--tinta);font-weight:700;display:block}
@media (max-width:760px){
  .perfil{grid-template-columns:1fr;gap:28px}
  .perfil-foto{max-width:260px}
}

/* --------------------------------------------------------------- artigos */
.artigos{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.artigo{
  background:var(--branco);border:1px solid var(--linha);border-radius:14px;
  padding:26px;box-shadow:var(--sombra);text-decoration:none;color:inherit;display:block;
  transition:.16s;
}
.artigo:hover{border-color:var(--azul);transform:translateY(-2px)}
.artigo .tag{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--azul);display:block;margin-bottom:12px;
}
.artigo h3{margin-bottom:10px}
.artigo p{font-size:15px;color:var(--tinta-2);margin:0;max-width:none}
.artigo .ler{
  display:inline-block;margin-top:16px;font-weight:700;font-size:14.5px;color:var(--azul);
}

/* --------------------------------------------------------------- contato */
.contato{background:var(--fundo-2);color:var(--branco)}
.contato h2{color:var(--branco)}
.contato .chamada{color:rgba(255,255,255,.78)}
.canais{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;
  margin-top:12px}
.canal{border-top:2px solid rgba(255,255,255,.22);padding-top:18px}
.canal span{
  display:block;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.58);margin-bottom:8px;font-weight:700;
}
.canal a,.canal strong{color:var(--branco);font-size:17px;font-weight:600;
  text-decoration:none;line-height:1.5;display:block}
.canal a:hover{color:var(--ouro)}

/* ---------------------------------------------------------------- rodapé */
.rodape{background:var(--fundo);color:rgba(255,255,255,.72);padding:52px 0 40px;
  font-size:14.5px}
.rodape .marca img{width:250px;margin-bottom:24px}
.rodape-grade{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
.rodape a{color:rgba(255,255,255,.82);text-decoration:none}
.rodape a:hover{color:var(--ouro)}
.rodape .legal{
  margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  font-size:13px;color:rgba(255,255,255,.52);line-height:1.7;max-width:78ch;
}

/* ---------------------------------------------------------------- artigo */
.post-capa{background:var(--creme);padding:148px 0 52px;border-bottom:1px solid var(--linha)}
.post-capa .rotulo{margin-bottom:14px}
.post-capa h1{
  font-size:clamp(30px,4.4vw,46px);line-height:1.1;letter-spacing:-.025em;font-weight:800;
  margin:0;max-width:21ch;text-wrap:balance;
}
.post-meta{margin-top:20px;font-size:14.5px;color:var(--tinta-3);letter-spacing:.02em}
.post-corpo{padding:56px 0 80px}
.post-corpo .container{max-width:760px}
.post-corpo p,.post-corpo li{
  font-family:"Source Serif 4",Georgia,serif;font-size:19px;line-height:1.72;
  color:var(--tinta);max-width:none;
}
.post-corpo h2{font-size:27px;margin:44px 0 14px;max-width:none;font-weight:800}
.post-corpo h3{font-size:21px;margin:32px 0 10px}
.post-corpo ul,.post-corpo ol{margin:0 0 18px;padding-left:24px}
.post-corpo li{margin-bottom:10px}
.post-corpo .destaque{
  border-left:3px solid var(--ouro);background:var(--creme);padding:20px 24px;
  border-radius:0 10px 10px 0;margin:28px 0;
}
.post-corpo .destaque p{margin:0;font-size:18px}
.post-corpo .aviso{
  margin-top:48px;padding-top:22px;border-top:1px solid var(--linha);
  font-family:"Karla",sans-serif;font-size:14.5px;color:var(--tinta-3);line-height:1.65;
}
.voltar{display:inline-block;margin-bottom:26px;font-weight:700;font-size:14.5px;
  text-decoration:none}

/* ------------------------------------------------------------ acessibilidade */
a:focus-visible,button:focus-visible{outline:2px solid var(--azul);outline-offset:3px;
  border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

@media (max-width:820px){
  .topo-in{flex-direction:column;align-items:flex-start;gap:14px}
  .nav{gap:18px}
  .capa .container{padding-top:64px;padding-bottom:96px}
  .secao{padding:64px 0}
}