@charset "UTF-8";

/* ============================================================

   MICHAELSEN ADVOCACIA — LINGUAGEM VISUAL DAS ÁREAS DE ATUAÇÃO

   Arquivo: assets/css/areas-2026.css

   Paleta: oliva profundo / cáqui / latão (o dourado do logo) 

   Tipografia: Fraunces (títulos) + IBM Plex Sans (texto)

   Este arquivo é autossuficiente: as páginas que o carregam NÃO

   precisam de Bootstrap, jQuery ou dos CSS do tema antigo.

   ============================================================ */

:root{

  --oliva-900:#22301F;

  --oliva-700:#3A4A34;

  --oliva-500:#5F6F4A;

  --oliva-300:#A7B394;

  --oliva-100:#E6E9E0;

  --oliva-050:#F3F4EF;

  --latao:#B88B3A;

  --latao-claro:#D9B76A;

  --tinta:#1B211A;

  --texto:#333A31;

  --texto-suave:#5B6357;

  --branco:#FFFFFF;

  --erro:#A23B2B;

  --sucesso:#3A6B3A;

  --fonte-titulo:"Fraunces", Georgia, "Times New Roman", serif;

  --fonte-texto:"IBM Plex Sans", "Segoe UI", Arial, sans-serif;

  --largura:1180px;

  /* imagens que mudam de uma página de área para outra.

     Cada página pode sobrescrever estas variáveis num <style> no <head>;

     use sempre caminho a partir da raiz (/assets/images/...): url() dentro de custom property

     não resolve caminho relativo de forma confiável entre a página e o CSS */

  --foto-hero:url("/assets/images/imagens_michaelsen/direito_militar1.jpg");

  --pos-hero:center 18%;

  --foto-chamada:url("/assets/images/imagens_michaelsen/direito_militar2.jpg");

  --pos-chamada:center 40%;

  --largura-foto-doutrina:200px;

  --raio:6px;

  --transicao:180ms ease;

}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{font-family:var(--fonte-texto);color:var(--texto);background:var(--branco);line-height:1.6;font-size:17px}

img{max-width:100%;height:auto;display:block}

a{color:var(--oliva-700)}

h1,h2,h3,h4{font-family:var(--fonte-titulo);color:var(--tinta);line-height:1.15;font-weight:600;letter-spacing:-0.01em}

h2{font-size:clamp(30px,3.6vw,44px)}

h3{font-size:clamp(20px,2vw,24px)}

p{max-width:68ch}

:focus-visible{outline:3px solid var(--latao);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

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

.secao{padding:88px 0}

section[id],main [id]{scroll-margin-top:96px}

.secao-clara{background:var(--oliva-050)}

.secao-escura{background:var(--oliva-900);color:var(--oliva-100)}

.secao-escura h2,.secao-escura h3{color:var(--branco)}

.secao-escura p{color:var(--oliva-100)}

.cabecalho-secao{max-width:760px;margin-bottom:44px}

.cabecalho-secao p{margin-top:14px;font-size:18px;color:var(--texto-suave)}

.secao-escura .cabecalho-secao p{color:var(--oliva-300)}



/* galão: divisor de seção inspirado nas divisas de posto */

.galao{display:inline-block;width:56px;height:10px;margin-bottom:18px;background:

  linear-gradient(to bottom, var(--latao) 0 3px, transparent 3px 7px, var(--latao) 7px 10px)}

.secao-escura .galao{background:linear-gradient(to bottom, var(--latao-claro) 0 3px, transparent 3px 7px, var(--latao-claro) 7px 10px)}



/* ---------- botões ---------- */

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:var(--raio);font-weight:600;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background var(--transicao),color var(--transicao),border-color var(--transicao);font-family:var(--fonte-texto);line-height:1.2}

.btn-latao{background:var(--latao);color:var(--tinta);border-color:var(--latao)}

.btn-latao:hover{background:var(--latao-claro);border-color:var(--latao-claro)}

.btn-contorno{background:transparent;color:var(--branco);border-color:rgba(255,255,255,.5)}

.btn-contorno:hover{border-color:var(--branco);background:rgba(255,255,255,.08)}

.btn-oliva{background:var(--oliva-700);color:var(--branco);border-color:var(--oliva-700)}

.btn-oliva:hover{background:var(--oliva-900);border-color:var(--oliva-900)}

.btn[disabled]{opacity:.6;cursor:progress}

.btn svg{width:18px;height:18px;flex:none}



/* ---------- barra superior + menu ----------

   O lettering do logo4.png é BRANCO: o cabeçalho precisa ser escuro. */

.barra-topo{background:#161F14;color:var(--oliva-300);font-size:14px}

.barra-topo .container{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:16px;flex-wrap:wrap}

.barra-topo a{color:var(--oliva-100);text-decoration:none}

.barra-topo a:hover{color:var(--latao-claro)}

.barra-topo .redes{display:flex;gap:14px}

.barra-topo .redes svg{width:16px;height:16px;fill:currentColor}

.barra-topo .endereco{color:var(--oliva-300)}

header.principal{position:sticky;top:0;z-index:50;background:var(--oliva-900);border-bottom:3px solid var(--latao)}

header.principal .container{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:24px}

.logo img{height:46px;width:auto}

nav.menu ul{list-style:none;display:flex;gap:2px;align-items:center}

nav.menu a{display:block;padding:10px 13px;text-decoration:none;color:var(--oliva-100);font-weight:500;font-size:15px;border-radius:var(--raio);letter-spacing:.02em}

nav.menu a:hover{background:rgba(255,255,255,.07);color:var(--branco)}

nav.menu a.ativo{color:var(--latao-claro);box-shadow:inset 0 -3px 0 var(--latao)}

.menu-toggle{display:none;background:none;border:2px solid rgba(255,255,255,.35);border-radius:var(--raio);padding:8px 10px;cursor:pointer}

.menu-toggle span{display:block;width:22px;height:2px;background:var(--branco);margin:5px 0}

@media (max-width:980px){

  .menu-toggle{display:block}

  nav.menu{position:absolute;left:0;right:0;top:100%;background:var(--oliva-900);border-bottom:3px solid var(--latao);display:none;padding:12px 24px 20px}

  nav.menu.aberto{display:block}

  nav.menu ul{flex-direction:column;align-items:stretch}

  nav.menu a{padding:12px 8px;font-size:17px}

  .barra-topo .endereco{display:none}

}



/* ---------- HERO ---------- */

.hero{background:var(--oliva-900);color:var(--branco);position:relative;overflow:hidden}

.hero::before{content:"";position:absolute;inset:0;background:var(--foto-hero) var(--pos-hero)/cover no-repeat;opacity:.16;filter:grayscale(45%)}

.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--oliva-900) 35%,rgba(34,48,31,.55) 100%)}

.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;padding-top:80px;padding-bottom:80px;align-items:center}

.migalhas{font-size:14px;color:var(--oliva-300);margin-bottom:26px}

.migalhas a{color:var(--oliva-300);text-decoration:none}

.migalhas a:hover{color:var(--branco)}

.hero h1{font-size:clamp(38px,5vw,60px);color:var(--branco);font-weight:600;line-height:1.06;max-width:15ch}

/* nome da materia destacado no titulo da pagina */

.hero h1 .materia{color:var(--latao-claro)}



/* ===== navegação entre as áreas: setas nas laterais do hero ===== */

.setas-areas{position:absolute;inset:0;z-index:3;pointer-events:none}

.setas-areas .seta{position:absolute;top:var(--y-setas,50%);transform:translateY(-50%);pointer-events:auto;

  display:flex;align-items:center;gap:8px;text-decoration:none;

  color:var(--branco);background:rgba(27,33,26,.55);border:1px solid rgba(217,183,106,.45);

  padding:16px 10px;line-height:0;

  transition:background var(--transicao),color var(--transicao),border-color var(--transicao)}

.setas-areas .seta-ant{left:0;border-left:0;border-radius:0 var(--raio) var(--raio) 0}

.setas-areas .seta-pro{right:0;border-right:0;border-radius:var(--raio) 0 0 var(--raio)}

.setas-areas .seta:hover,.setas-areas .seta:focus-visible{background:var(--latao);color:var(--tinta);border-color:var(--latao)}

.setas-areas .rotulo{font-family:var(--fonte-texto);font-size:14px;font-weight:600;line-height:1.2;

  white-space:nowrap;max-width:0;opacity:0;overflow:hidden;

  transition:max-width 280ms ease,opacity 200ms ease}

.setas-areas .seta:hover .rotulo,.setas-areas .seta:focus-visible .rotulo{max-width:220px;opacity:1}

.setas-areas svg{flex:0 0 auto}



/* transição lateral entre as páginas de área */

main{transition:opacity 220ms ease,transform 220ms ease}

body.mm-sai-pro main{opacity:0;transform:translateX(-46px)}

body.mm-sai-ant main{opacity:0;transform:translateX(46px)}

@keyframes mm-chega-pro{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}

@keyframes mm-chega-ant{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}

body.mm-entra-pro main{animation:mm-chega-pro 340ms ease both}

body.mm-entra-ant main{animation:mm-chega-ant 340ms ease both}



@media (max-width:980px){

  .hero .container{padding-left:48px;padding-right:48px}

  .setas-areas .seta{padding:14px 8px}

  .setas-areas .seta:hover .rotulo,.setas-areas .seta:focus-visible .rotulo{max-width:0;opacity:0}

}

@media (prefers-reduced-motion:reduce){

  main{transition:none}

  body.mm-entra-pro main,body.mm-entra-ant main{animation:none}

  .setas-areas .rotulo{transition:none}

}

.hero .sub{margin-top:22px;font-size:18px;color:var(--oliva-100);max-width:54ch}

.hero .acoes{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

.credencial{margin-top:36px;display:flex;gap:14px;align-items:flex-start;color:var(--oliva-300);font-size:15px;line-height:1.5}

.credencial a{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:var(--latao-claro);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(217,183,106,.45);padding-bottom:2px}

.credencial a::after{content:"\203A";font-size:18px;line-height:1;position:relative;top:-1px}

.credencial a:hover{color:var(--branco);border-bottom-color:var(--branco)}

.credencial b{color:var(--branco);font-weight:600}

.credencial .foto{margin-top:3px;width:56px;height:56px;border-radius:50%;background:var(--oliva-700) url("../images/imagens_michaelsen/mauricio_michaelsen.jpg") center 22% / cover;border:2px solid var(--latao);flex:none}



/* painel "Qual é a sua situação?" */

.painel-situacao{background:var(--branco);color:var(--tinta);border-radius:10px;padding:30px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}

.painel-situacao h2{font-size:24px;margin-bottom:6px}

.painel-situacao > p{font-size:15px;color:var(--texto-suave);margin-bottom:18px}

.perfis{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.perfil{display:flex;gap:12px;align-items:center;text-align:left;padding:13px 14px;border:2px solid var(--oliva-100);border-radius:var(--raio);background:var(--branco);cursor:pointer;font-family:var(--fonte-texto);font-size:15px;font-weight:500;color:var(--tinta);transition:border-color var(--transicao),background var(--transicao)}

.perfil svg{width:26px;height:26px;flex:none;stroke:var(--oliva-500);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.perfil:hover{border-color:var(--oliva-300)}

.perfil[aria-pressed="true"]{border-color:var(--latao);background:#FBF6EA}

.perfil[aria-pressed="true"] svg{stroke:var(--latao)}

.painel-situacao .nota{margin-top:14px;font-size:13px;color:var(--texto-suave)}

.painel-situacao .nota a{color:var(--oliva-700)}

@media (max-width:980px){

  .hero .container{grid-template-columns:1fr;padding-top:52px;padding-bottom:52px;gap:40px}

  .hero h1{max-width:none}

}

@media (max-width:480px){.perfis{grid-template-columns:1fr}}



/* ---------- faixa de credenciais ---------- */

.faixa{background:var(--latao);color:var(--tinta)}

.faixa .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0}

.faixa .item{padding:26px 24px;border-left:1px solid rgba(0,0,0,.12)}

.faixa .item:first-child{border-left:0;padding-left:0}

.faixa .numero{font-family:var(--fonte-titulo);font-size:34px;font-weight:600;line-height:1}

.faixa .rotulo{font-size:14px;margin-top:6px;color:#3B2F12}

@media (max-width:980px){.faixa .container{grid-template-columns:1fr 1fr}.faixa .item:nth-child(3){border-left:0;padding-left:0}}

@media (max-width:480px){.faixa .container{grid-template-columns:1fr}.faixa .item{border-left:0;padding-left:0;border-top:1px solid rgba(0,0,0,.12)}.faixa .item:first-child{border-top:0}}



/* ---------- serviços ---------- */

.filtro-ativo{display:none;margin:-20px 0 30px;padding:14px 18px;background:#FBF6EA;border-left:4px solid var(--latao);border-radius:0 var(--raio) var(--raio) 0;font-size:15px;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

.filtro-ativo.visivel{display:flex}

.filtro-ativo button{background:none;border:0;color:var(--oliva-700);font-weight:600;cursor:pointer;font-family:inherit;font-size:15px;text-decoration:underline}

.grupos-servicos{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

.grupo{border-top:4px solid var(--oliva-700);padding-top:22px}

.grupo:nth-child(2){border-top-color:var(--latao)}

.grupo:nth-child(3){border-top-color:var(--oliva-300)}

.grupo h3{margin-bottom:6px}

.grupo .desc{font-size:15px;color:var(--texto-suave);margin-bottom:18px}

.grupo ul{list-style:none}

.grupo li{padding:11px 0 11px 30px;border-bottom:1px solid var(--oliva-100);position:relative;font-size:16px;transition:opacity var(--transicao)}

.grupo li::before{content:"";position:absolute;left:0;top:19px;width:16px;height:8px;border-left:2px solid var(--latao);border-bottom:2px solid var(--latao);transform:rotate(-45deg) translateY(-2px)}

.grupo li small{display:block;color:var(--texto-suave);font-size:14px;margin-top:2px}

.grupo li.apagado{opacity:.28}

.grupo li.destaque{background:#FBF6EA;margin:0 -12px;padding-left:42px;padding-right:12px;border-radius:var(--raio)}

.grupo li.destaque::before{left:12px}

@media (max-width:980px){.grupos-servicos{grid-template-columns:1fr}}



/* ---------- bloco doutrinário: faixa compacta, texto contornando a foto ---------- */

#conceito.secao{padding:50px 0}

.doutrina{display:block}

.doutrina::after{content:"";display:block;clear:both}

.doutrina > div{max-width:88ch}

.doutrina figure{float:left;width:var(--largura-foto-doutrina);max-width:40%;margin:5px 34px 14px 0}

.doutrina figure img{width:100%;height:auto;border-radius:3px;box-shadow:9px 9px 0 var(--latao)}

.doutrina figcaption{margin-top:16px;font-size:12px;line-height:1.5;color:var(--texto-suave)}

.doutrina .galao{width:44px;height:8px;margin-bottom:12px}

.doutrina h2{font-family:var(--fonte-texto);font-size:20px;font-weight:600;letter-spacing:0;margin-bottom:10px}

.doutrina h3{font-family:var(--fonte-texto);font-size:16px;font-weight:600;margin:18px 0 8px}

.doutrina p{font-size:15px;line-height:1.65;color:var(--texto-suave);margin-bottom:10px;max-width:none}

@media (max-width:600px){.doutrina figure{float:none;width:160px;max-width:100%;margin:0 0 22px}}



/* ---------- percurso (stepper) ---------- */

.abas{display:inline-flex;border:2px solid var(--oliva-700);border-radius:var(--raio);overflow:hidden;margin-bottom:36px;flex-wrap:wrap}

.abas button{background:var(--branco);border:0;padding:12px 22px;font-family:inherit;font-size:15px;font-weight:600;color:var(--oliva-700);cursor:pointer}

.abas button[aria-selected="true"]{background:var(--oliva-700);color:var(--branco)}

/* abas em coluna no mobile: com 4 abas a linha nao cabe e o bloco fica irregular */

@media (max-width:900px){

  .abas{display:flex;flex-direction:column;width:100%}

  .abas button{width:100%;text-align:left;border-bottom:1px solid var(--oliva-100)}

  .abas button:last-child{border-bottom:0}

}

.percurso{display:grid;grid-template-columns:320px 1fr;gap:40px;align-items:start}

.etapas{list-style:none;counter-reset:etapa;position:relative}

.etapas::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:var(--oliva-100)}

.etapa{position:relative;padding:10px 0 10px 56px;cursor:pointer;border-radius:var(--raio)}

.etapa::before{counter-increment:etapa;content:counter(etapa);position:absolute;left:0;top:8px;width:40px;height:40px;border-radius:50%;background:var(--branco);border:2px solid var(--oliva-300);display:grid;place-items:center;font-family:var(--fonte-titulo);font-weight:600;color:var(--oliva-700);z-index:1;transition:background var(--transicao),border-color var(--transicao),color var(--transicao)}

.etapa h4{font-family:var(--fonte-texto);font-size:16px;font-weight:600;color:var(--tinta)}

.etapa span{font-size:13px;color:var(--texto-suave)}

.etapa[aria-selected="true"]::before{background:var(--latao);border-color:var(--latao);color:var(--tinta)}

.etapa[aria-selected="true"] h4{color:var(--oliva-700)}

.detalhe-etapa{background:var(--branco);border:1px solid var(--oliva-100);border-radius:10px;padding:34px 36px;min-height:300px}

.detalhe-etapa h3{margin-bottom:12px}

.detalhe-etapa p{margin-bottom:14px}

.detalhe-etapa .base-legal{display:inline-block;margin-top:6px;padding:6px 12px;background:var(--oliva-050);border-radius:var(--raio);font-size:14px;color:var(--oliva-700)}

.detalhe-etapa .alerta{margin-top:18px;padding:14px 16px;border-left:4px solid var(--latao);background:#FBF6EA;font-size:15px}

@media (max-width:980px){.percurso{grid-template-columns:1fr}.detalhe-etapa{padding:24px}}



/* ---------- prazos: gráfico + calculadora ---------- */

.prazos-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:start}

.grafico{list-style:none}

.grafico li{margin-bottom:22px}

.grafico .linha{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}

.grafico .nome{font-weight:600;color:var(--branco);font-size:16px}

.grafico .fonte{font-size:13px;color:var(--oliva-300)}

.grafico .valor{font-family:var(--fonte-titulo);font-size:22px;color:var(--latao-claro);white-space:nowrap}

.grafico .trilho{height:14px;background:rgba(255,255,255,.08);border-radius:7px;overflow:hidden}

.grafico .barra{height:100%;width:0;background:linear-gradient(90deg,var(--latao) 0%,var(--latao-claro) 100%);border-radius:7px;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}

.grafico .obs{margin-top:20px;font-size:13px;color:var(--oliva-300)}

.calculadora{background:var(--branco);color:var(--tinta);border-radius:10px;padding:30px}

.calculadora h3{margin-bottom:6px;color:var(--tinta)}

.calculadora > p{font-size:15px;color:var(--texto-suave);margin-bottom:20px}

.calculadora .ressalva{margin-bottom:18px;padding:14px 16px;border-left:4px solid var(--erro);background:#FBF1EF;font-size:13.5px;color:#5A2A20;line-height:1.5}

.calculadora .ressalva b{color:#7A3226}

.campo{margin-bottom:16px}

.campo label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}

.campo input,.campo select,.campo textarea{width:100%;padding:12px 14px;border:2px solid var(--oliva-100);border-radius:var(--raio);font-family:inherit;font-size:16px;color:var(--tinta);background:var(--branco)}

.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--oliva-500);outline:none}

.campo textarea{resize:vertical;min-height:110px}

.resultado{margin-top:18px;padding:18px;border-radius:var(--raio);background:var(--oliva-050);display:none}

.resultado.visivel{display:block}

.resultado .data{font-family:var(--fonte-titulo);font-size:28px;color:var(--oliva-700);line-height:1.1}

.resultado .aviso{font-size:13px;color:var(--texto-suave);margin-top:8px}

.resultado .selo{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:4px}

.resultado.vencido .data{color:var(--erro)}

@media (max-width:980px){.prazos-grid{grid-template-columns:1fr}}



/* ---------- mapa da justiça ---------- */

.justica{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.ramo{background:var(--branco);border:1px solid var(--oliva-100);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}

.ramo header{padding:18px 22px;background:var(--oliva-700);color:var(--branco)}

.ramo header h3{color:var(--branco);font-size:20px}

.ramo header p{color:var(--oliva-100);font-size:14px;margin-top:4px}

.ramo header{min-height:104px}   /* alinha o início das listas dos três cards */

.ramo .niveis{padding:8px 22px 18px;list-style:none}

.ramo .niveis li{padding:14px 0;border-bottom:1px dashed var(--oliva-100);display:flex;gap:14px;align-items:flex-start}

.ramo .niveis li:last-child{border-bottom:0}

.ramo .sigla{flex:none;min-width:58px;padding:5px 8px;text-align:center;border-radius:var(--raio);background:var(--oliva-050);font-weight:600;font-size:13px;color:var(--oliva-700)}

.ramo .niveis b{display:block;font-size:15px;color:var(--tinta)}

.ramo .niveis span{font-size:14px;color:var(--texto-suave)}

.ramo footer{margin-top:auto;padding:14px 22px 20px;background:var(--oliva-050);font-size:14px;color:var(--texto-suave)}

@media (max-width:980px){.justica{grid-template-columns:1fr}}



/* ---------- faixa de chamada com foto ---------- */

.chamada{position:relative;background:var(--oliva-900);color:var(--branco);overflow:hidden;border-bottom:3px solid var(--latao)}

.chamada::before{content:"";position:absolute;inset:0;background:var(--foto-chamada) var(--pos-chamada)/cover no-repeat;opacity:.5}

.chamada::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--oliva-900) 25%,rgba(34,48,31,.55) 100%)}

.chamada .container{position:relative;z-index:1;padding-top:52px;padding-bottom:52px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}

.chamada h2{color:var(--branco);font-size:clamp(24px,2.6vw,32px);max-width:22ch}

.chamada p{color:var(--oliva-100);margin-top:10px;max-width:46ch;font-size:16px}



/* ---------- informativo / artigos ---------- */

.artigos{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

.artigo{background:var(--branco);border:1px solid var(--oliva-100);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit}

.artigo .capa{aspect-ratio:3/2;background:var(--oliva-700);display:flex;align-items:flex-end;padding:20px;position:relative;overflow:hidden}

.artigo .capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.artigo .corpo{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column}

.artigo .tema{font-size:13px;color:var(--latao);font-weight:600;margin-bottom:10px;letter-spacing:.04em;text-transform:uppercase}

.artigo h3{font-size:19px;margin-bottom:10px;flex:1}

.artigo p{font-size:15px;color:var(--texto-suave);flex:1}

.artigo .ler{margin-top:16px;font-weight:600;color:var(--oliva-700);font-size:15px}

.artigo:hover h3{color:var(--oliva-700)}

.artigo:hover .ler{text-decoration:underline}

.sem-artigos{padding:26px;background:var(--branco);border:1px dashed var(--oliva-300);border-radius:10px;color:var(--texto-suave)}

@media (max-width:980px){.artigos{grid-template-columns:1fr}}



/* ---------- publicações ---------- */

.publicacoes{display:grid;grid-template-columns:1fr 1fr;gap:28px}

.publicacao{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center;background:var(--oliva-050);border-radius:10px;padding:26px}

.publicacao .capa{aspect-ratio:3/4;background:var(--oliva-900);border-radius:4px;box-shadow:8px 8px 0 var(--latao);display:grid;place-items:center;color:var(--latao-claro);font-family:var(--fonte-titulo);text-align:center;padding:16px;font-size:16px;line-height:1.2;overflow:hidden}

.publicacao .capa img{width:100%;height:100%;object-fit:cover}

.publicacao h3{margin-bottom:8px}

.publicacao p{font-size:15px;color:var(--texto-suave);margin-bottom:14px}

@media (max-width:980px){.publicacoes{grid-template-columns:1fr}}

@media (max-width:480px){.publicacao{grid-template-columns:1fr}.publicacao .capa{max-width:150px}}



/* ---------- FAQ ---------- */

.faq{max-width:860px}

.faq details{border-bottom:1px solid var(--oliva-100)}

.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-family:var(--fonte-titulo);font-size:20px;font-weight:600;color:var(--tinta);position:relative}

.faq summary::-webkit-details-marker{display:none}

.faq summary::after{content:"";position:absolute;right:6px;top:30px;width:12px;height:12px;border-right:2px solid var(--latao);border-bottom:2px solid var(--latao);transform:rotate(45deg);transition:transform var(--transicao)}

.faq details[open] summary::after{transform:rotate(-135deg);top:36px}

.faq details[open] summary{color:var(--oliva-700)}

.faq .resposta{padding:0 0 24px;font-size:16px}

.faq .resposta p{margin-bottom:10px}

.faq .resposta .lista-faq{list-style:none;margin:6px 0 14px}

.faq .resposta .lista-faq li{position:relative;padding:8px 0 8px 26px;font-size:16px;border-bottom:1px solid var(--oliva-100)}

.faq .resposta .lista-faq li:last-child{border-bottom:0}

.faq .resposta .lista-faq li::before{content:"";position:absolute;left:0;top:15px;width:12px;height:6px;border-left:2px solid var(--latao);border-bottom:2px solid var(--latao);transform:rotate(-45deg)}



/* ---------- leis e normas ---------- */

.normas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.norma-card{display:block;text-decoration:none;padding:18px 18px 16px;background:var(--branco);border:1px solid var(--oliva-100);border-radius:var(--raio);color:var(--tinta);transition:border-color var(--transicao)}

.norma-card:hover{border-color:var(--latao)}

.norma-card b{display:block;font-family:var(--fonte-titulo);font-size:18px;margin-bottom:4px}

.norma-card span{font-size:14px;color:var(--texto-suave)}

.normas-rodape{margin-top:22px;font-size:15px}

@media (max-width:980px){.normas{grid-template-columns:1fr 1fr}}

@media (max-width:480px){.normas{grid-template-columns:1fr}}



/* ---------- contato ---------- */

.contato{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

.contato .dados{list-style:none;margin-top:24px}

.contato .dados li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:16px}

.contato .dados svg{width:22px;height:22px;flex:none;stroke:var(--latao-claro);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}

.contato .dados a{color:var(--branco);text-decoration:none}

.contato .dados a:hover{color:var(--latao-claro)}

.form{background:var(--branco);color:var(--tinta);border-radius:10px;padding:32px}

.form h3{margin-bottom:6px;color:var(--tinta)}

.form > p{font-size:15px;color:var(--texto-suave);margin-bottom:20px}

.form .consentimento{font-size:13px;color:var(--texto-suave);display:flex;gap:10px;align-items:flex-start;margin:6px 0 18px}

.form .consentimento input{margin-top:4px;flex:none}

.form .consentimento span{flex:1}

.form .recaptcha{margin:4px 0 18px;transform-origin:0 0}

.form .aviso-form{display:none;padding:14px 16px;border-radius:var(--raio);margin-top:16px;font-size:15px}

.form .aviso-form.visivel{display:block}

.form .aviso-form.ok{background:#EDF4ED;color:var(--sucesso);border-left:4px solid var(--sucesso)}

.form .aviso-form.erro{background:#FBF1EF;color:var(--erro);border-left:4px solid var(--erro)}

@media (max-width:980px){.contato{grid-template-columns:1fr}}

@media (max-width:400px){.form{padding:24px 20px}.form .recaptcha{transform:scale(.86)}}



/* ---------- rodapé ---------- */

footer.rodape{background:#161F14;color:var(--oliva-300);padding:52px 0 28px;font-size:14px}

footer.rodape .colunas{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.4fr;gap:32px}

footer.rodape h4{color:var(--branco);font-family:var(--fonte-texto);font-size:15px;margin-bottom:14px;letter-spacing:.04em;text-transform:uppercase}

footer.rodape ul{list-style:none}

footer.rodape li{margin-bottom:8px}

footer.rodape a{color:var(--oliva-300);text-decoration:none}

footer.rodape a:hover{color:var(--latao-claro)}

footer.rodape p{color:var(--oliva-300);max-width:38ch}

footer.rodape .marca img{width:190px;margin-bottom:16px}

footer.rodape .redes-rodape{display:flex;gap:14px;margin-top:18px}

footer.rodape .redes-rodape a{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.2);border-radius:50%}

footer.rodape .redes-rodape svg{width:17px;height:17px;fill:currentColor}

footer.rodape .redes-rodape a:hover{border-color:var(--latao);color:var(--latao-claro)}

footer.rodape .news p{font-size:13.5px;margin-bottom:12px}

footer.rodape .news .linha{display:flex;gap:8px;flex-wrap:wrap}

footer.rodape .news input{flex:1;min-width:130px;padding:11px 12px;border:1px solid rgba(255,255,255,.2);border-radius:var(--raio);background:rgba(255,255,255,.06);color:var(--branco);font-family:inherit;font-size:14px}

footer.rodape .news input::placeholder{color:var(--oliva-300)}

footer.rodape .news button{padding:11px 18px;border:0;border-radius:var(--raio);background:var(--latao);color:var(--tinta);font-family:inherit;font-weight:600;font-size:14px;cursor:pointer}

footer.rodape .news button:hover{background:var(--latao-claro)}

footer.rodape .legal{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;margin-top:36px;font-size:13px;line-height:1.6}

footer.rodape .legal .creditos{margin-top:10px;color:#7B8570}

@media (max-width:980px){footer.rodape .colunas{grid-template-columns:1fr 1fr}}

@media (max-width:600px){footer.rodape .colunas{grid-template-columns:1fr}}



/* ---------- WhatsApp flutuante ---------- */

.whats-flutuante{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25)}

.whats-flutuante svg{width:30px;height:30px;fill:#fff}



@media (prefers-reduced-motion:reduce){

  html{scroll-behavior:auto}

  .grafico .barra{transition:none}

  *{transition-duration:0ms !important}

}

@media print{.barra-topo,header.principal,.whats-flutuante,.form,.chamada{display:none}}