/* ============================================================================
   ESTILO DO SITE — Fernando S. Lorentz, Advogado Criminal
   ----------------------------------------------------------------------------
   Um unico arquivo para TODAS as paginas (inicial + areas de atuacao +
   institucionais). Editar aqui muda o visual do site inteiro de uma vez.

   Escrito MOBILE FIRST: o padrao e o celular; as telas maiores entram
   depois, nos blocos @media (min-width: ...).
   ============================================================================ */

/* ====================== 1. VARIAVEIS DA MARCA ====================== */
:root{
  /* Cores tiradas do arquivo original do logo */
  --tinta:#1A1A1B;
  --grafite:#2B2C2D;
  --carvao:#232425;
  --ouro:#CAA04A;
  --ouro-2:#DFBB72;
  --ouro-esc:#9C7A31;

  --papel:#FFFFFF;
  --papel-2:#F7F6F4;
  --papel-3:#EEEBE6;
  --linha:#E3E0DA;
  --linha-2:#D6D2CA;

  --texto:#4E5459;
  --texto-forte:#26292B;
  --suave:#868C91;
  --claro:#B9BDC0;

  --zap:#25D366;
  --zap-esc:#1DAE53;

  --wrap:1180px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --display:'Montserrat',var(--sans);

  --raio:4px;
  --sombra:0 10px 30px rgba(26,26,27,.08);
  --sombra-2:0 22px 50px rgba(26,26,27,.16);

  /* altura da barra fixa do celular — usada para dar respiro no rodape */
  --barra-mobile:74px;
}

/* ====================== 2. RESET ENXUTO ====================== */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:78px; /* para os links de ancora nao ficarem sob o topo fixo */
}
body{
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 18px;text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--texto-forte);font-family:var(--display);line-height:1.18;text-wrap:balance;font-weight:700}
ul,ol{margin:0;padding:0;list-style:none}
strong,b{color:var(--texto-forte);font-weight:600}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--ouro);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sec{padding:56px 0}
.sec-clara{background:var(--papel-2)}
.sec-escura{background:var(--grafite);color:#C6CACD}
.sec-escura h2,.sec-escura h3{color:#fff}

/* Link de acessibilidade — so aparece com navegacao por teclado */
.pular{
  position:absolute;left:12px;top:-70px;z-index:300;background:var(--ouro);color:var(--tinta);
  padding:12px 18px;border-radius:var(--raio);font-size:13px;font-weight:700;transition:top .15s;
}
.pular:focus{top:12px}

/* ====================== 3. TITULOS DE SECAO ====================== */
.olho{
  display:inline-block;font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.20em;text-transform:uppercase;color:var(--ouro-esc);
}
.sec-escura .olho{color:var(--ouro)}
.titulo{margin-bottom:30px}
.titulo h2{
  font-size:clamp(23px,5.4vw,34px);font-weight:700;letter-spacing:-.02em;margin-top:12px;
}
.titulo .fio{display:block;width:52px;height:3px;background:var(--ouro);margin:16px 0 0}
.titulo p{margin:16px 0 0;font-size:16px;max-width:62ch}
.titulo.centro{text-align:center}
.titulo.centro .fio{margin-left:auto;margin-right:auto}
.titulo.centro p{margin-left:auto;margin-right:auto}

/* ====================== 4. BOTOES ====================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 22px;
  font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.01em;line-height:1.25;
  border:2px solid transparent;border-radius:var(--raio);cursor:pointer;text-align:center;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn svg{width:19px;height:19px;flex:0 0 auto}
.btn:active{transform:translateY(1px)}

.btn-zap{background:var(--zap);color:#06301A;box-shadow:0 10px 26px rgba(37,211,102,.30)}
.btn-zap:hover{background:var(--zap-esc);color:#fff}

.btn-ouro{background:var(--ouro);color:var(--tinta);box-shadow:0 10px 26px rgba(202,160,74,.28)}
.btn-ouro:hover{background:var(--ouro-2)}

.btn-escuro{background:var(--grafite);color:#fff}
.btn-escuro:hover{background:var(--tinta)}

.btn-linha{background:transparent;border-color:var(--linha-2);color:var(--texto-forte)}
.btn-linha:hover{border-color:var(--grafite);background:var(--papel-2)}

.btn-linha-clara{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
.btn-linha-clara:hover{border-color:var(--ouro);color:var(--ouro)}

.btn-bloco{width:100%}
.btn-sm{min-height:44px;padding:10px 16px;font-size:13px}
.btn-lg{min-height:58px;font-size:15px;padding:16px 26px}
[data-wa]{cursor:pointer}

/* ====================== 5. BARRA DE TOPO (so desktop) ====================== */
.topo-info{display:none}

/* ====================== 6. CABECALHO ====================== */
.cabecalho{
  position:sticky;top:0;z-index:120;
  /* Fundo quase opaco: dispensa o backdrop-filter (o desfoque do que fica
     atras). Um "position:sticky" com blur precisa reprocessar a mistura de
     cor a cada quadro de rolagem — e e exatamente isso que tremia e
     travava a tela no celular. Sem blur, o efeito visual e quase igual,
     mas sem esse custo. */
  background:rgba(24,24,25,.98);
  border-bottom:1px solid rgba(202,160,74,.22);
  transition:box-shadow .22s ease;
  /* Mantem o cabecalho na sua propria camada da GPU, em vez de ser
     promovido/rebaixado a cada rolagem — outra causa comum de tremor em
     elementos fixos/sticky no Safari e no Chrome do celular. */
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.cabecalho.rolou{box-shadow:0 10px 30px rgba(0,0,0,.30)}
.cabecalho .wrap{display:flex;align-items:center;gap:12px;height:66px}

.marca{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:0}
.marca img{height:38px;width:auto;flex:0 0 auto;transition:height .22s ease}
.marca .nome{display:flex;flex-direction:column;line-height:1;min-width:0;overflow:hidden}
/* Se um dia o nome no config-tags.js for mais longo, ele e cortado com
   reticencias em vez de empurrar o menu para fora da tela. */
.marca .n1{
  font-family:var(--display);font-size:13.5px;font-weight:800;letter-spacing:.02em;
  color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.marca .n2{
  font-family:var(--display);font-size:8.5px;font-weight:600;letter-spacing:.30em;
  color:var(--ouro);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.nav-desktop{display:none}
.btn-topo{display:none}

/* botao de WhatsApp compacto do topo (celular) */
.zap-topo{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--zap);color:#06301A;flex:0 0 auto;
}
.zap-topo svg{width:23px;height:23px}

/* hamburguer */
.abrir-menu{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 9px;flex:0 0 auto;
}
.abrir-menu span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
body.menu-aberto .abrir-menu span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-aberto .abrir-menu span:nth-child(2){opacity:0}
body.menu-aberto .abrir-menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ====================== 7. MENU GAVETA (celular) ====================== */
.veu{
  position:fixed;inset:0;z-index:130;background:rgba(10,10,11,.6);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
body.menu-aberto .veu{opacity:1;visibility:visible}

.gaveta{
  position:fixed;top:0;right:0;bottom:0;z-index:140;width:min(86vw,340px);
  background:var(--tinta);border-left:1px solid rgba(202,160,74,.25);
  transform:translateX(102%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 20px calc(24px + env(safe-area-inset-bottom));
}
body.menu-aberto .gaveta{transform:translateX(0)}
.gaveta .cabeca{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.gaveta .fechar{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:26px;line-height:1}
.gaveta .grupo{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;color:var(--ouro);margin:22px 0 8px}
.gaveta a.item{
  display:block;padding:13px 0;font-size:15.5px;font-weight:500;color:#E7E9EA;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.gaveta a.item:hover,.gaveta a.item[aria-current="page"]{color:var(--ouro)}
.gaveta .acoes{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.gaveta .dados{margin-top:24px;font-size:13px;line-height:1.7;color:var(--claro)}
.gaveta .dados a{color:var(--ouro)}

/* ====================== 8. HERO ====================== */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(202,160,74,.16) 0%, rgba(202,160,74,0) 58%),
    linear-gradient(168deg,#232425 0%,#1A1A1B 58%,#141415 100%);
  color:#C9CDD0;
  padding:34px 0 0;
}
/* linhas verticais discretas, ecoando a moldura do logo */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.030) 0 1px,transparent 1px 68px);
  -webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 100%);
  mask-image:linear-gradient(100deg,transparent 30%,#000 100%);
}
.hero .wrap{position:relative;z-index:2}

.hero h1{
  color:#fff;font-size:clamp(29px,7.4vw,40px);font-weight:800;letter-spacing:-.025em;
  line-height:1.12;margin:14px 0 0;
}
.hero h1 .destaque{color:var(--ouro)}
/* No celular o texto ficava muito compacto (titulo, subtitulo e botoes
   quase colados); aqui embaixo tem mais respiro. No desktop essas
   margens voltam ao valor original, la na secao de telas maiores. */
.hero .sub{margin:26px 0 0;font-size:16px;line-height:1.65;color:#B7BCBF;max-width:56ch}
.hero .sub strong{color:#fff;font-weight:600}

.hero .acoes{display:flex;flex-direction:column;gap:10px;margin-top:34px}
.hero .acoes .btn{width:100%}

.hero .selos{display:flex;flex-direction:column;gap:9px;margin:22px 0 0}
.hero .selos li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.5;color:#AEB3B7}
.hero .selos svg{width:17px;height:17px;color:var(--ouro);flex:0 0 auto;margin-top:2px}

/* foto do hero
   Sem moldura: a propria foto se dissolve nas bordas ate a cor do fundo,
   com uma mascara radial (mask-image) em vez de uma caixa com contorno.
   Como a mascara deixa as bordas da imagem transparentes, o fundo escuro
   do .hero por tras aparece por baixo, sem nenhuma linha reta separando
   os dois — e assim que a foto "encaixa" com o fundo. */
.hero-foto{position:relative;margin:0;display:none}
.hero-foto img{
  position:relative;width:100%;height:auto;object-fit:cover;
  object-position:50% 38%;aspect-ratio:4/5;
  -webkit-mask-image:radial-gradient(120% 105% at 55% 36%,#000 42%,transparent 88%);
  mask-image:radial-gradient(120% 105% at 55% 36%,#000 42%,transparent 88%);
}
.hero-foto::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,20,21,0) 58%,rgba(20,20,21,.92) 100%);
}
.hero-foto .assinatura{
  position:absolute;left:20px;right:20px;bottom:16px;z-index:2;
  display:flex;align-items:center;gap:12px;
}
.hero-foto .assinatura .l{width:34px;height:2px;background:var(--ouro);flex:0 0 auto}
.hero-foto .assinatura b{display:block;font-family:var(--display);font-size:14px;font-weight:800;color:#fff;letter-spacing:.01em}
.hero-foto .assinatura span{display:block;font-size:11.5px;color:var(--ouro);letter-spacing:.12em;text-transform:uppercase;margin-top:3px}

/* ====================== 10. FAIXA DE NUMEROS ====================== */
.numeros{background:var(--papel-3);border-bottom:1px solid var(--linha)}
.numeros .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;padding-top:30px;padding-bottom:30px}
.numeros .n{display:block;font-family:var(--display);font-size:clamp(18px,4.8vw,27px);font-weight:800;color:var(--grafite);line-height:1.05;letter-spacing:-.02em;overflow-wrap:break-word}
.numeros .t{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:#6B7075}

/* ====================== 11. CARDS DE AREA ====================== */
.grade{display:grid;grid-template-columns:1fr;gap:14px}
.card{
  position:relative;display:flex;flex-direction:column;gap:10px;
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:24px 20px 22px;box-shadow:0 4px 16px rgba(26,26,27,.045);
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;
}
.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ouro);
  border-radius:var(--raio) 0 0 var(--raio);transform:scaleY(0);transform-origin:top;
  transition:transform .3s ease;
}
.card:hover{box-shadow:var(--sombra-2);transform:translateY(-3px);border-color:var(--linha-2)}
.card:hover::before{transform:scaleY(1)}
.card .ico{
  width:46px;height:46px;border-radius:50%;background:var(--grafite);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.card .ico svg{width:22px;height:22px;color:var(--ouro)}
.card h3{font-size:18px;font-weight:700;line-height:1.28}
.card p{margin:0;font-size:14.5px;line-height:1.65}
.card .saiba{
  margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--display);font-size:13.5px;font-weight:700;color:var(--ouro-esc);
}
.card .saiba svg{width:15px;height:15px;transition:transform .2s ease}
.card:hover .saiba svg{transform:translateX(3px)}

/* ====================== 12. PASSOS ====================== */
.passos{display:grid;grid-template-columns:1fr;gap:14px;counter-reset:passo}
.passo{
  position:relative;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:24px 20px 22px 20px;
}
.passo .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--ouro);color:var(--tinta);
  font-family:var(--display);font-size:15px;font-weight:800;margin-bottom:12px;
}
.passo h3{font-size:17px;font-weight:700;margin-bottom:8px}
.passo p{margin:0;font-size:14.5px;line-height:1.65}

/* ====================== 13. SOBRE ====================== */
.sobre{background:var(--papel-2)}
.sobre .caixa{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.sobre .foto{position:relative;max-width:320px;margin:0 auto}
.sobre .foto img{width:100%;border-radius:var(--raio);position:relative;z-index:2}
.sobre .foto::before{
  content:"";position:absolute;left:-12px;top:-12px;right:26px;bottom:26px;
  border:2px solid var(--ouro);border-radius:var(--raio);z-index:1;
}
.sobre h2{font-size:clamp(22px,5.2vw,30px)}
.sobre .credenciais{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sobre .credenciais span{
  font-size:12.5px;font-weight:600;color:var(--texto-forte);background:var(--papel);
  border:1px solid var(--linha);border-radius:100px;padding:8px 14px;
}

/* ====================== 14. LISTA DE ORIENTACOES ====================== */
.orienta{display:grid;grid-template-columns:1fr;gap:12px;margin-top:8px}
.orienta li{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:17px 18px;
}
.orienta .marca-ok,.orienta .marca-no{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.orienta .marca-ok{background:rgba(202,160,74,.16);color:var(--ouro-esc)}
.orienta .marca-no{background:rgba(180,60,60,.10);color:#B03C3C}
.orienta svg{width:15px;height:15px}
.orienta b{display:block;font-family:var(--display);font-size:15px;font-weight:700;color:var(--texto-forte);margin-bottom:4px;line-height:1.35}
.orienta span{display:block;font-size:14px;line-height:1.6}

/* ====================== 15. FAQ ====================== */
details{border-bottom:1px solid var(--linha);background:transparent}
details:first-of-type{border-top:1px solid var(--linha)}
summary{
  list-style:none;cursor:pointer;position:relative;
  padding:19px 42px 19px 0;
  font-family:var(--display);font-size:16px;font-weight:600;color:var(--texto-forte);line-height:1.4;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  margin-top:-9px;border-right:2px solid var(--ouro);border-bottom:2px solid var(--ouro);
  transform:rotate(45deg);transition:transform .25s ease;
}
details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
details .resposta{padding:0 4px 20px 0;font-size:15px;line-height:1.75}
details .resposta p:last-child{margin-bottom:0}
details[open] .resposta{animation:abre .28s ease}
@keyframes abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ====================== 16. FAIXA CTA ESCURA ====================== */
.cta-faixa{
  position:relative;overflow:hidden;background:var(--grafite);color:#C2C6C9;padding:48px 0;
}
.cta-faixa::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 120% at 88% 0%,rgba(202,160,74,.20) 0%,rgba(202,160,74,0) 60%);
}
.cta-faixa .wrap{position:relative;z-index:2}
.cta-faixa h2{color:#fff;font-size:clamp(21px,5.2vw,30px);font-weight:700}
.cta-faixa p{margin:14px 0 0;font-size:15.5px;line-height:1.65;color:#B0B5B9;max-width:60ch}
.cta-faixa .acoes{display:flex;flex-direction:column;gap:10px;margin-top:24px}

/* ====================== 17. CONTATO ====================== */
.contato-grid{display:grid;grid-template-columns:1fr;gap:14px}
.contato-item{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:18px;
}
.contato-item .bolha{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;background:var(--grafite);
  display:flex;align-items:center;justify-content:center;
}
.contato-item .bolha svg{width:18px;height:18px;color:var(--ouro)}
.contato-item .rot{display:block;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--suave);margin-bottom:4px}
.contato-item .val{display:block;font-size:15px;line-height:1.6;color:var(--texto-forte)}
.contato-item a.val{color:var(--ouro-esc);font-weight:600}
.mapa{margin-top:16px;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;background:var(--papel-3)}
.mapa iframe{display:block;width:100%;height:280px;border:0}

/* ====================== 18. TRILHA (breadcrumb) ====================== */
.trilha{background:var(--papel-2);border-bottom:1px solid var(--linha)}
.trilha ol{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:12px 0;font-size:12.5px;color:var(--suave)}
.trilha li{display:flex;align-items:center;gap:7px}
.trilha li+li::before{content:"›";color:var(--linha-2)}
.trilha a:hover{color:var(--ouro-esc)}
.trilha [aria-current="page"]{color:var(--texto-forte);font-weight:600}

/* ====================== 19. PAGINAS DE CONTEUDO ====================== */
.hero-int{
  position:relative;overflow:hidden;padding:36px 0 40px;
  background:linear-gradient(168deg,#232425 0%,#1A1A1B 100%);
}
.hero-int::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 100% at 90% 0%,rgba(202,160,74,.17) 0%,rgba(202,160,74,0) 60%);
}
.hero-int .wrap{position:relative;z-index:2}
.hero-int h1{color:#fff;font-size:clamp(25px,6.2vw,38px);font-weight:800;letter-spacing:-.02em;margin:12px 0 0;max-width:22ch}
.hero-int .sub{margin:14px 0 0;font-size:15.5px;line-height:1.65;color:#AFB4B8;max-width:62ch}
.hero-int .acoes{display:flex;flex-direction:column;gap:10px;margin-top:22px}

.artigo{padding:40px 0}
.artigo .miolo{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
.corpo h2{font-size:clamp(20px,4.8vw,26px);font-weight:700;margin:34px 0 12px}
.corpo h2:first-child{margin-top:0}
.corpo h3{font-size:17.5px;font-weight:700;margin:24px 0 8px}
.corpo p{font-size:16px;line-height:1.8}
.corpo ul,.corpo ol{margin:0 0 18px;padding-left:20px}
.corpo ul{list-style:disc}
.corpo ol{list-style:decimal}
.corpo li{font-size:16px;line-height:1.72;margin-bottom:9px}
.corpo li::marker{color:var(--ouro)}
.destaque-box{
  background:var(--papel-2);border-left:3px solid var(--ouro);border-radius:0 var(--raio) var(--raio) 0;
  padding:18px 20px;margin:24px 0;font-size:15px;line-height:1.7;
}
.destaque-box b{display:block;font-family:var(--display);margin-bottom:6px;color:var(--texto-forte)}
.destaque-box p:last-child{margin-bottom:0}
.aviso-legal{
  background:var(--papel-3);border:1px solid var(--linha);border-radius:var(--raio);
  padding:16px 18px;font-size:13.5px;line-height:1.65;color:#6B7075;margin:26px 0 0;
}

.lateral{display:flex;flex-direction:column;gap:16px}
.caixa-lat{background:var(--papel);border:1px solid var(--linha);border-top:3px solid var(--ouro);border-radius:var(--raio);padding:22px 20px;box-shadow:var(--sombra)}
.caixa-lat h3{font-size:16.5px;font-weight:700;margin-bottom:10px}
.caixa-lat p{font-size:14px;line-height:1.65;margin-bottom:16px}
.caixa-lat.autor{display:flex;flex-direction:column;align-items:center;text-align:center}
.caixa-lat.autor img{width:84px;height:84px;border-radius:50%;object-fit:cover;margin-bottom:12px}
.caixa-lat.autor .oab{font-size:12.5px;color:var(--suave);margin:2px 0 10px}
.relacionados a{display:block;padding:12px 0;font-size:14.5px;color:var(--texto-forte);border-top:1px solid var(--linha);line-height:1.45}
.relacionados li:first-child a{border-top:0}
.relacionados a:hover{color:var(--ouro-esc)}

/* ====================== 20. RODAPE ====================== */
.rodape{background:var(--tinta);color:#8E9498;font-size:13.5px;padding:40px 0 calc(var(--barra-mobile) + 24px)}
.rodape .topo{display:grid;grid-template-columns:1fr;gap:26px;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.08)}
.rodape .marca-rod{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.rodape .marca-rod img{height:44px;width:auto}
.rodape .marca-rod b{display:block;font-family:var(--display);font-size:14px;font-weight:800;color:#fff}
.rodape .marca-rod span{display:block;font-size:9.5px;letter-spacing:.28em;color:var(--ouro);margin-top:4px}
.rodape .desc{font-size:13.5px;line-height:1.7;max-width:46ch}
.rodape h4{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ouro);margin-bottom:12px}
.rodape .coluna a{display:block;padding:6px 0;line-height:1.45}
.rodape .coluna a:hover{color:#fff}
.rodape .redes{display:flex;gap:12px;margin-top:16px}
.rodape .redes a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.rodape .redes svg{width:18px;height:18px}
.rodape .redes a:hover{border-color:var(--ouro);color:var(--ouro)}
.rodape .fim{padding-top:22px;display:flex;flex-direction:column;gap:10px;font-size:12.5px;line-height:1.6}
.rodape .fim .legal{color:#6E7478;font-size:11.5px;line-height:1.6}

/* ====================== 21. BOTOES FIXOS ====================== */
.barra-mobile{
  /* Mesmo ajuste do cabecalho: fundo quase opaco em vez de blur, e camada
     de GPU propria — evita o mesmo tipo de tremor numa barra fixa. */
  position:fixed;left:0;right:0;bottom:0;z-index:110;display:flex;gap:8px;
  background:rgba(255,255,255,.98);
  border-top:1px solid var(--linha);box-shadow:0 -6px 22px rgba(26,26,27,.12);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.barra-mobile .btn{flex:1;min-height:52px;font-size:13.5px;padding:10px 8px;box-shadow:none}
.zap-float{display:none}

/* ====================== 22. ANIMACOES ====================== */
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rv.vis{opacity:1;transform:none}

/* pulso discreto no botao flutuante */
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.42)}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* ====================== 23. TELAS MAIORES ====================== */
@media (min-width:600px){
  .hero .acoes{flex-direction:row;flex-wrap:wrap}
  .hero .acoes .btn{width:auto;flex:1 1 240px}
  .cta-faixa .acoes{flex-direction:row;flex-wrap:wrap}
  .grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .passos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .numeros .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}
  .contato-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-int .acoes{flex-direction:row;flex-wrap:wrap}
  .orienta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rodape .topo{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
}

@media (min-width:900px){
  html{scroll-padding-top:96px}
  .sec{padding:78px 0}
  .wrap{padding:0 28px}

  /* barra de contato acima do cabecalho */
  .topo-info{
    display:block;background:var(--grafite);color:#A9AEB2;font-size:12.5px;
    border-bottom:1px solid rgba(202,160,74,.18);
  }
  .topo-info .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px}
  .topo-info .itens{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
  .topo-info .item{display:inline-flex;align-items:center;gap:7px}
  .topo-info svg{width:14px;height:14px;color:var(--ouro);flex:0 0 auto}
  .topo-info a:hover{color:#fff}
  .topo-info .redes{display:flex;gap:14px}
  .topo-info .redes svg{width:15px;height:15px}

  .cabecalho .wrap{height:82px;gap:22px}
  .cabecalho.rolou .wrap{height:70px}
  .marca img{height:46px}
  .cabecalho.rolou .marca img{height:38px}
  .marca .n1{font-size:15.5px}
  .marca .n2{font-size:9px}

  .abrir-menu{display:none}
  .zap-topo{display:none}
  .nav-desktop{
    display:flex;align-items:center;gap:22px;margin-left:auto;
    font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#D3D6D8;
  }
  .nav-desktop>a,.nav-desktop .tem-sub>a{
    display:inline-block;padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap;
    transition:color .18s,border-color .18s;
  }
  .nav-desktop a:hover,.nav-desktop a[aria-current="page"]{color:var(--ouro);border-color:var(--ouro)}
  .nav-desktop .tem-sub{position:relative}
  .nav-desktop .tem-sub>a::after{content:"▾";margin-left:6px;font-size:10px;opacity:.7}
  .submenu{
    position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
    background:var(--tinta);border:1px solid rgba(202,160,74,.25);border-radius:var(--raio);
    box-shadow:0 22px 46px rgba(0,0,0,.4);padding:8px;min-width:300px;
    display:flex;flex-direction:column;gap:1px;
    opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease,transform .2s ease;
  }
  .tem-sub:hover .submenu,.tem-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .submenu a{
    padding:11px 14px;border-radius:3px;font-size:13px;font-weight:500;letter-spacing:0;
    color:#D3D6D8;text-transform:none;border:0;white-space:normal;line-height:1.4;
  }
  .submenu a:hover{background:rgba(202,160,74,.14);color:var(--ouro)}
  .cabecalho .btn-topo{display:inline-flex}

  /* hero em duas colunas */
  .hero{padding:0}
  .hero .wrap{
    display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:48px;align-items:center;padding-top:64px;padding-bottom:64px;
  }
  .hero h1{font-size:clamp(36px,3.9vw,50px)}
  /* Desktop mantem o espacamento original (o ajuste acima e so pro celular) */
  .hero .sub{font-size:17px;margin-top:16px}
  .hero .acoes{margin-top:24px}
  /* Sem stretch/flex aqui de proposito: o .hero-foto fica do tamanho da
     propria foto, e quem centraliza verticalmente e o align-items:center
     do grid do .hero .wrap acima. */
  .hero-foto{margin:0;display:block}
  .hero-foto .assinatura{left:24px;right:24px;bottom:22px}
  .hero-foto .assinatura b{font-size:16px}

  .grade{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .orienta{gap:14px}

  .sobre .caixa{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:52px}
  .sobre .foto{max-width:none;margin:0}

  .artigo{padding:56px 0}
  .artigo .miolo{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:52px}
  /* paginas sem barra lateral (areas de atuacao, contato) ocupam a largura toda */
  .artigo .miolo.largo{grid-template-columns:minmax(0,1fr)}
  .lateral{position:sticky;top:104px}

  .contato-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mapa iframe{height:340px}

  .cta-faixa{padding:64px 0}
  .cta-faixa .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px}
  .cta-faixa .acoes{margin-top:0;flex-shrink:0}

  .rodape{padding:56px 0 40px}
  .rodape .topo{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:44px}
  .rodape .fim{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
  .rodape .fim .legal{flex-basis:100%;order:3}

  /* no desktop a barra fixa some e entra o botao flutuante */
  .barra-mobile{display:none}
  .zap-float{
    display:flex;position:fixed;right:24px;bottom:24px;z-index:110;
    width:60px;height:60px;border-radius:50%;background:var(--zap);color:#fff;
    align-items:center;justify-content:center;animation:pulso 2.8s ease-out infinite;
    transition:transform .2s ease,background-color .2s ease;
  }
  .zap-float svg{width:31px;height:31px}
  .zap-float:hover{background:var(--zap-esc);transform:scale(1.07)}

  .titulo{margin-bottom:40px}
  details summary{font-size:17px;padding:22px 46px 22px 0}
}

@media (min-width:1100px){
  .faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
}

/* ====================== 24. IMPRESSAO E ACESSIBILIDADE ====================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

@media print{
  .cabecalho,.topo-info,.barra-mobile,.zap-float,.gaveta,.veu,.cta-faixa{display:none!important}
  body{color:#000}
}