/* =========================================================
   Bessa & Quadros — protótipo de redesenho
   Paleta tirada do logo e das fotos do escritório:
   marinho profundo + dourado, sobre creme de papel.
   ========================================================= */
:root{
  --tinta:#0E1829; --tinta-2:#16243C; --tinta-3:#1E3050;
  --ouro:#C9A961; --ouro-claro:#E6D2A0;
  --creme:#F7F4ED; --creme-2:#EDE7DA;
  --texto:#262B33; --texto-2:#5B6370;
  --linha:rgba(201,169,97,.28);
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --corpo:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:1180px;
  --t-suave:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

/* ---------- transição entre páginas (View Transitions) ----------
   Home → Artigos → artigo passam a trocar com um fundido do próprio
   navegador, sem biblioteca e sem tela branca no meio. Navegadores
   que não suportam ignoram a regra e navegam como sempre. */
@view-transition{ navigation:auto }
::view-transition-old(root){animation:vt-sai .22s var(--t-suave) both}
::view-transition-new(root){animation:vt-entra .34s var(--t-suave) both}
@keyframes vt-sai  {to{opacity:0}}
@keyframes vt-entra{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

html{scroll-behavior:smooth}
section[id],footer[id]{scroll-margin-top:96px}
body{
  margin:0;background:var(--creme);color:var(--texto);
  font-family:var(--corpo);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* evita a última linha do parágrafo com uma palavra só */
p{text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- navegação por teclado ----------
   O anel padrão do Chrome é quase preto: sobre o marinho ele some.
   :focus-visible só aparece em navegação por teclado, então não
   polui o clique de mouse. */
:focus-visible{
  outline:2px solid var(--ouro);
  outline-offset:3px;
  border-radius:2px;
}
.pular{
  position:fixed;left:16px;top:-80px;z-index:200;
  background:var(--ouro);color:var(--tinta);text-decoration:none;
  font-size:.86rem;font-weight:600;padding:12px 18px;
  transition:top .2s var(--t-suave);
}
.pular:focus{top:16px}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.14;
  letter-spacing:-.012em;color:var(--tinta);margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.6vw,4.3rem)}
h2.titulo{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:34px;max-width:24ch}
h3{font-size:1.32rem}
p{margin:0 0 1em}
.serif-it{font-style:italic;color:var(--ouro-claro)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.centro{text-align:center;margin:46px 0 0}

/* ---------- tarja do protótipo ---------- */
.nota-proto{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--tinta-3);color:#fff;text-align:center;
  font-size:.82rem;padding:10px 16px;letter-spacing:.015em;
}
.nota-proto a{color:var(--ouro-claro)}

/* ---------- botão flutuante de WhatsApp ----------
   O público do escritório chega por WhatsApp e, no celular, o
   "Agendar uma conversa" fica abaixo da primeira tela. */
.zap{
  position:fixed;right:20px;bottom:20px;z-index:55;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:#1f2e49;color:var(--ouro-claro);
  border:1px solid rgba(201,169,97,.45);
  box-shadow:0 10px 26px rgba(0,0,0,.4);
  transition:background .35s var(--t-suave),color .35s var(--t-suave),
             transform .35s var(--t-suave);
}
.zap:hover{background:var(--ouro);color:var(--tinta);transform:translateY(-2px)}
.zap svg{display:block}
@media (max-width:620px){ .zap{right:14px;bottom:14px;width:52px;height:52px} }
@media print{ .zap{display:none} }

/* ---------- cabeçalho ---------- */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(14,24,41,.82);backdrop-filter:blur(13px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .45s var(--t-suave);
}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-top:15px;padding-bottom:15px}
.marca{
  display:flex;align-items:center;gap:12px;
  font-family:var(--display);font-size:1.17rem;letter-spacing:.17em;
  color:#fff;text-decoration:none;white-space:nowrap;padding:9px 0;
}
.marca-sinal{width:auto;height:30px;flex:none;
  transition:transform .5s var(--t-suave)}
.marca:hover .marca-sinal{transform:translateY(-2px)}
.marca-txt span{color:var(--ouro);font-style:italic;letter-spacing:0}
.rodape-logo{width:auto;height:84px;margin-bottom:16px}
.menu{display:flex;gap:30px}
.menu a{
  color:rgba(255,255,255,.82);text-decoration:none;font-size:.92rem;
  position:relative;padding:11px 0;transition:color .35s var(--t-suave);
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:7px;width:100%;height:1px;
  background:var(--ouro);transform:scaleX(0);transform-origin:left center;
  transition:transform .4s var(--t-suave);
}
.menu a:hover{color:#fff}
.menu a:hover::after{transform:scaleX(1)}

/* ---------- botões ---------- */
.btn{
  display:inline-block;text-decoration:none;font-size:.79rem;
  letter-spacing:.13em;text-transform:uppercase;padding:15px 26px;
  border:1px solid var(--ouro);color:var(--ouro-claro);white-space:nowrap;
  transition:background .45s var(--t-suave),color .45s var(--t-suave);
}
.btn:hover{background:var(--ouro);color:var(--tinta)}
.btn.solido{background:var(--ouro);color:var(--tinta);border-color:var(--ouro)}
.btn.solido:hover{background:var(--ouro-claro);border-color:var(--ouro-claro)}
.btn.vazado{border-color:rgba(255,255,255,.4);color:#fff}
.btn.vazado:hover{background:#fff;color:var(--tinta);border-color:#fff}
.btn.vazado.escuro{border-color:var(--tinta);color:var(--tinta)}
.btn.vazado.escuro:hover{background:var(--tinta);color:#fff}
.abrir-menu{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:8px}

/* ---------- abertura: a balança e as cinco batidas ---------- */
.abertura{background:var(--tinta);color:rgba(255,255,255,.76);position:relative}
.palco3d{min-height:100svh;display:flex;align-items:center;
  padding:128px 0 56px;position:relative;overflow:hidden}

/* A arte cobre a seção inteira. Era um quadrado dentro da grade e a emenda
   aparecia: o tone mapping desloca o marinho, então o canvas nunca casa
   exatamente com o fundo do CSS. Sem recorte, não há emenda. */
.abertura-art{position:absolute;inset:0;z-index:0}
.abertura-art canvas{width:100%;height:100%;display:block;
  transition:opacity .18s linear}
.abertura-art .balanca-estatica{
  position:absolute;right:7%;top:50%;transform:translateY(-50%);
  width:auto;height:min(78%,660px)}
/* um só dos dois aparece — quem decide é o cena3d.js, pelo suporte a WebGL.
   A exceção é a espera: enquanto o modelo de 918 KB não chega, a imagem
   fica no lugar dele para o herói não abrir vazio. */
.com3d .balanca-estatica{display:none}
.com3d.aguardando3d .balanca-estatica{display:block;opacity:1}
.com3d .balanca-estatica{transition:opacity .6s var(--t-suave)}
.com3d.aguardando3d canvas{opacity:0}
.com3d canvas{transition:opacity .5s var(--t-suave)}
.sem3d canvas{display:none}

.palco3d .wrap{position:relative;z-index:1;width:100%}
.abertura-txt{max-width:min(50%,560px)}
/* O texto corre num trilho vertical dentro de uma janela com máscara:
   o bloco seguinte sobe por baixo enquanto o atual sai por cima. Antes os
   blocos eram absolutos e só trocavam de opacidade no mesmo lugar — não
   havia sensação de avanço ao rolar, que é o ponto. */
  /* uma variável só governa a janela e cada bloco do trilho */
.janela-texto{
  --faixa:clamp(300px,48svh,460px);
  height:var(--faixa);overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
}
.abertura-txt .passos{display:flex;flex-direction:column;will-change:transform}
.passo{min-height:var(--faixa);flex:none;display:flex;flex-direction:column;
  justify-content:center;opacity:.14;
  transition:opacity .35s linear}
.passo.on{opacity:1}
.passo .olho{margin-bottom:22px}
.passo .etapa{font-family:var(--display);font-size:.92rem;letter-spacing:.22em;
  color:var(--ouro);margin:0 0 14px}
.abertura h1{color:#fff;max-width:16ch;margin-bottom:20px;
  font-size:clamp(2.3rem,4.3vw,3.5rem)}
.abertura h1 .l{display:inline-block;overflow:hidden;vertical-align:top}
.abertura h1 .l>span{display:inline-block}
.passo h2{font-size:clamp(1.75rem,3.3vw,2.7rem);color:#fff;margin-bottom:15px;max-width:17ch}
.passo > p{font-size:1.04rem;color:rgba(255,255,255,.68);margin:0;max-width:44ch}
.abertura .lead{color:rgba(255,255,255,.76);max-width:44ch;margin-bottom:28px;font-size:1.03rem}
.hero-acoes{display:flex;gap:15px;flex-wrap:wrap;align-items:center}
.passo .btn{margin-top:30px}

/* convite para rolar — some assim que a rolagem começa */
.role{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);margin:0;z-index:2;
  display:flex;flex-direction:column-reverse;align-items:center;gap:10px;
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.42);transition:opacity .5s var(--t-suave)}
.role span{display:block;width:1px;height:40px;
  background:linear-gradient(rgba(201,169,97,.9),rgba(201,169,97,0))}
.rolou .role{opacity:0}

/* faixa de números, agora seção própria */
.numeros{background:var(--tinta-2);border-top:1px solid rgba(201,169,97,.22)}
.numeros .wrap{display:flex;gap:42px;padding:26px 28px;flex-wrap:wrap;
  justify-content:space-between;align-items:center}
.selo{display:flex;align-items:baseline;gap:11px;color:rgba(255,255,255,.72);
  font-size:.83rem;letter-spacing:.04em}
.selo b{font-family:var(--display);font-size:1.6rem;color:var(--ouro);font-weight:500}
.selo:not(.oab) b::after{content:"+";font-size:.75em;vertical-align:super;margin-left:1px}
.selo.oab b{font-size:1.18rem;letter-spacing:.06em}

/* ---------- sem 3D: os cinco blocos viram uma leitura normal ---------- */
.sem3d{display:block;min-height:0;padding:148px 0 84px}
.sem3d .abertura-art{position:absolute;inset:0}
.sem3d .balanca-estatica{position:sticky;position:-webkit-sticky;
  top:160px;right:auto;transform:none;float:right;margin:0 4% 0 0;
  width:auto;height:min(64vh,560px)}
.sem3d .abertura-txt{max-width:min(52%,560px)}
.sem3d .abertura-txt .passos{min-height:0;display:grid;gap:56px}
.sem3d .passo{position:static;opacity:1;transform:none;pointer-events:auto}
.sem3d .role{display:none}
@media (max-width:960px){
  .sem3d{padding:124px 0 72px}
  .sem3d .abertura-art{position:static}
  .sem3d .balanca-estatica{position:static;float:none;width:auto;height:46vh;margin:0 auto 26px}
  .sem3d .abertura-txt{max-width:none}
}

/* ---------- base das seções ---------- */
.secao{padding:104px 0;position:relative}
.secao + .secao:not(.escura):not(.frentes-fundo){border-top:1px solid var(--linha)}
.secao.clara{background:var(--creme-2)}
.secao.escura{background:var(--tinta);color:rgba(255,255,255,.78)}
.secao.escura h2,.secao.escura h3{color:#fff}
.olho{
  display:flex;align-items:center;gap:15px;margin:0 0 20px;
  font-size:.76rem;letter-spacing:.21em;text-transform:uppercase;color:var(--ouro);
}
.olho .risco{display:block;width:40px;height:1px;background:var(--ouro);flex:none;
  transform:scaleX(0);transform-origin:left center}
.olho .rot{display:block}
.secao.escura .lead{color:rgba(255,255,255,.7)}
.lead{font-size:1.06rem;color:var(--texto-2);max-width:58ch}

/* ---------- a seção das frentes, sobre o escritório ----------
   O carrossel do site antigo era uma faixa ESCURA com a foto do escritório
   no fundo inteiro — era daí que vinha a profundidade. Tentei primeiro
   repetir isso sobre o creme, mas sobre fundo claro a foto ou some ou
   compete com o texto. Em faixa escura ela aparece sem atrapalhar, e ainda
   cria ritmo: creme, escuro, creme.

   O paralax é de verdade (o fundo desliza contra o conteúdo), não o
   background-attachment:fixed do original — aquele trava no iOS. */
.frentes-fundo{position:relative;overflow:clip;isolation:isolate;
  background:var(--tinta);color:rgba(255,255,255,.78)}
.frentes-fundo .titulo,.frentes-fundo h3{color:#fff}
.frentes-fundo .lead,.frentes-fundo .sub{color:rgba(255,255,255,.68)}
.frentes-fundo .pontos li{color:rgba(255,255,255,.66)}
.frentes-fundo .pontos b{color:#fff}
.frentes-fundo .pontos li::before{background:var(--ouro)}
.frentes-fundo .fecho{color:#fff;border-left-color:var(--ouro)}
.frentes-fundo .frente-foto::after{border-color:rgba(201,169,97,.45)}

.fundo-escritorio{position:absolute;inset:-18% 0;z-index:-2;will-change:transform}
.fundo-escritorio img{width:100%;height:100%;object-fit:cover;
  opacity:.5;filter:grayscale(.3) contrast(1.05)}
.frentes-fundo::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to right,rgba(14,24,41,.94) 0%,rgba(14,24,41,.6) 52%,rgba(14,24,41,.78) 100%),
    linear-gradient(to bottom,var(--tinta) 0%,rgba(14,24,41,.1) 18%,
                    rgba(14,24,41,.1) 82%,var(--tinta) 100%);
}
@media (prefers-reduced-motion:reduce){ .fundo-escritorio{transform:none!important} }

/* ---------- três frentes ---------- */
/* overflow-x:clip contém o deslocamento transitório da animação de entrada
   sem criar contexto de rolagem (não interfere no pin do ScrollTrigger). */
#frentes{padding-bottom:40px;overflow-x:clip}
.frente{padding:52px 0}
.frente .wrap{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:60px;align-items:center}
.frente.invertida .wrap{grid-template-columns:minmax(0,1fr) minmax(0,420px)}
.frente.invertida .frente-foto{order:2}
.frente-foto{position:relative}
.frente-foto::after{
  content:"";position:absolute;inset:0;border:1px solid var(--linha);
  transform:translate(14px,14px);z-index:-1;
}
.frente-foto img{width:100%;aspect-ratio:1/1;object-fit:cover}
.frente-txt .num{
  font-family:var(--display);font-size:.9rem;letter-spacing:.2em;
  color:var(--ouro);margin:0 0 10px;
}
.frente-txt h3{font-size:clamp(1.5rem,2.5vw,2.05rem);margin-bottom:8px}
.frente-txt .sub{font-size:1.04rem;color:var(--texto-2);margin-bottom:24px}
.pontos{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px}
.pontos li{
  position:relative;padding-left:26px;font-size:.97rem;color:var(--texto-2);line-height:1.55;
}
.pontos li::before{
  content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--ouro);
}
.pontos b{color:var(--tinta);font-weight:600}
.fecho{
  font-family:var(--display);font-size:1.12rem;font-style:italic;
  color:var(--tinta);border-left:2px solid var(--ouro);padding-left:18px;margin:0;
}

/* ---------- sobre ---------- */
.sobre .wrap{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);
  gap:72px;align-items:center}
.sobre-foto{margin:0;position:relative;will-change:transform}
.sobre-foto img{width:100%;height:auto;display:block;position:relative;z-index:1;
  box-shadow:0 26px 54px rgba(14,24,41,.22)}
/* moldura dourada deslocada: o mesmo gesto das fotos das frentes.
   Antes ela ficava escondida atrás da colagem e sobrava só um risco
   solto à esquerda — agora acompanha a foto inteira e fecha os 4 lados. */
.sobre-foto::before{
  content:"";position:absolute;left:-28px;bottom:-28px;width:100%;height:100%;
  border:1px solid var(--ouro-linha,rgba(201,169,97,.5));z-index:0;
}
.sobre-txt .diferenciais{margin-top:34px}
.diferenciais{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
.diferenciais li{
  padding:20px 0;border-bottom:1px solid var(--linha);display:flex;
  align-items:baseline;gap:15px;
}
.diferenciais li::before{content:"";flex:none;width:13px;height:1px;
  background:var(--ouro);transform:translateY(-.35em)}
.diferenciais b{font-family:var(--display);font-size:1.12rem;color:var(--tinta);font-weight:500}

/* ---------- áreas ---------- */
.areas{display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--linha);border:1px solid var(--linha)}
.area{background:var(--creme);padding:38px 32px 34px;position:relative;
  transition:background .5s var(--t-suave);min-height:238px;display:flex;
  flex-direction:column;text-decoration:none;color:inherit}
.area::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--ouro);transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--t-suave)}
.area:hover{background:#fff}
.area:hover::after{transform:scaleX(1)}
.area .ic{color:var(--ouro);margin-bottom:20px;transition:transform .5s var(--t-suave)}
.area:hover .ic{transform:translateY(-3px)}
.area h3{margin-bottom:10px}
.area p{font-size:.93rem;color:var(--texto-2);margin:0}
.area .mais{margin-top:auto;padding-top:18px;font-size:.76rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ouro);opacity:0;transform:translateX(-7px);
  transition:opacity .45s var(--t-suave),transform .45s var(--t-suave)}
.area:hover .mais{opacity:1;transform:none}

/* ---------- equipe ---------- */
.advogada{
  display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:54px;
  padding:52px 0;border-top:1px solid rgba(201,169,97,.2);align-items:start;
}
.advogada:first-of-type{border-top:0}
.retrato{position:relative}
/* Com a formação aberta por padrão, a coluna de texto fica bem mais
   alta que a foto e sobrava um vazio enorme ao lado. O retrato gruda
   e acompanha a leitura — só onde há altura sobrando pra isso.
   Vem DEPOIS do position:relative de propósito: mesma especificidade,
   quem está por último vence. */
@media (min-width:861px){
  .retrato{position:sticky;top:104px}
}
.retrato img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 22%}
.retrato::after{content:"";position:absolute;inset:0;border:1px solid var(--linha);
  transform:translate(12px,12px);z-index:-1}
.retrato .oab{
  position:absolute;left:0;bottom:0;background:var(--ouro);color:var(--tinta);
  font-size:.7rem;letter-spacing:.14em;padding:8px 14px;font-weight:600;
}
.bio h3{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:6px}
.cargo{font-size:.79rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ouro);margin-bottom:18px}
.bio>p{color:rgba(255,255,255,.72);font-size:1rem;max-width:58ch}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 28px}
.chips span{
  font-size:.79rem;padding:7px 14px;border:1px solid rgba(201,169,97,.36);
  color:var(--ouro-claro);
}
.formacao{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.1)}
.formacao>div{display:grid;grid-template-columns:76px 1fr;gap:18px;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.formacao b{font-family:var(--display);color:var(--ouro);font-weight:500;font-size:1rem}
.formacao p{margin:0;color:#fff;font-size:.97rem}
.formacao span{font-size:.85rem;color:rgba(255,255,255,.52)}

/* a formação completa fica recolhida: eram 4 e 3 entradas abertas por
   advogada, boa parte da altura da página no celular */
.formacao-caixa{margin-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.formacao-caixa summary{
  list-style:none;cursor:pointer;padding:16px 26px 16px 0;position:relative;
  font-size:.79rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro);
  transition:color .35s var(--t-suave);
}
.formacao-caixa summary::-webkit-details-marker{display:none}
.formacao-caixa summary::after{
  content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--ouro);border-bottom:1.5px solid var(--ouro);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--t-suave);
}
.formacao-caixa[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.formacao-caixa summary:hover{color:var(--ouro-claro)}
.formacao-caixa .formacao{border-top:0;padding-bottom:8px}

/* ---------- faixa de atendimento online ----------
   Era a única seção sem nada visual. O monograma entra grande e quase
   apagado, sangrando pela direita: marca a faixa sem virar enfeite e
   sem disputar com o texto. */
.faixa{background:var(--tinta-3);color:#fff;padding:74px 0;
  position:relative;overflow:clip}
.faixa::before{
  content:"";position:absolute;right:3%;top:50%;
  width:clamp(190px,24vw,310px);aspect-ratio:231/180;transform:translateY(-50%);
  background:url("/img/marca.webp") no-repeat center/contain;
  opacity:.08;pointer-events:none;
}
.faixa .wrap{position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.faixa h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:10px;max-width:22ch}
.faixa p{color:rgba(255,255,255,.72);margin:0;max-width:52ch;font-size:.99rem}

/* ---------- perguntas frequentes ---------- */
.faq{border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-size:1.1rem;color:var(--tinta);
  transition:color .35s var(--t-suave);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--ouro);border-bottom:1.5px solid var(--ouro);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--t-suave);
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq summary:hover{color:var(--ouro)}
.faq details p{margin:0 0 24px;color:var(--texto-2);font-size:.97rem;max-width:72ch;padding-right:44px}

/* ---------- artigos ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--creme);border:1px solid var(--linha);
  transition:transform .5s var(--t-suave),box-shadow .5s var(--t-suave);
}
.post:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(14,24,41,.13)}
.post-img{display:block;overflow:hidden;aspect-ratio:16/9}
.post-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--t-suave)}
.post:hover .post-img img{transform:scale(1.045)}
.post-data{display:block;padding:20px 24px 0;font-size:.73rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ouro)}
.post h3{font-size:1.17rem;padding:9px 24px 0;line-height:1.3}
.post-autor{display:block;padding:14px 24px 24px;margin-top:auto;
  font-size:.86rem;color:var(--texto-2)}
/* cartão sem linha de resumo (relacionados) precisa do respiro embaixo */
.post h3:last-child{padding-bottom:26px;margin-top:auto}

/* ---------- contato ---------- */
.contato{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:0 64px;align-items:start}
.cbloco{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.cbloco:first-child{border-top:1px solid rgba(255,255,255,.12)}
.cbloco b{display:block;font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ouro);margin-bottom:7px;font-weight:500}
.cbloco p{margin:0;color:#fff;font-size:1rem;line-height:1.55}
.cbloco a{display:inline-block;padding:11px 0;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(201,169,97,.5);transition:color .35s var(--t-suave)}
.cbloco a:hover{color:var(--ouro-claro)}
.contato-form{display:grid;gap:18px}
.campo{display:grid;gap:7px}
.campo label{font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}
.campo input,.campo textarea{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  color:#fff;padding:13px 15px;font-family:var(--corpo);font-size:.97rem;
  border-radius:0;transition:border-color .35s var(--t-suave),background .35s var(--t-suave);
}
.campo input:focus,.campo textarea:focus{
  outline:none;border-color:var(--ouro);background:rgba(255,255,255,.08)}
.contato-form .btn{justify-self:start;cursor:pointer;font-family:var(--corpo)}
.aviso{margin:0;font-size:.88rem;color:rgba(255,255,255,.6)}
.aviso a{color:var(--ouro-claro)}

/* ---------- mapa ----------
   O iframe do Google vem em tema claro e brigaria com a seção escura.
   O filtro inverte e recoloca o matiz: é o jeito usual de escurecer um
   mapa embutido sem depender de chave de API nem de tema pago.
   O véu ::after usa mix-blend-mode:color — pega só matiz e saturação
   do azul da marca e preserva a luminância do mapa, então o mapa passa
   a ser da mesma família de azul da seção sem perder legibilidade. */
.mapa{grid-column:1/-1;margin:56px 0 0;position:relative;
  border:1px solid rgba(201,169,97,.3)}
.mapa iframe{display:block;width:100%;height:340px;border:0;
  filter:invert(1) hue-rotate(185deg) saturate(.72) brightness(.98) contrast(.95)}
.mapa::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:#16304f;mix-blend-mode:color;opacity:.6}
.mapa-link{
  position:absolute;z-index:2;right:14px;bottom:14px;
  background:var(--tinta);color:var(--ouro-claro);text-decoration:none;
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  padding:11px 16px;border:1px solid rgba(201,169,97,.45);
  transition:background .35s var(--t-suave),color .35s var(--t-suave);
}
.mapa-link:hover{background:var(--ouro);color:var(--tinta)}
@media (max-width:620px){
  .mapa iframe{height:300px}
  /* a moldura deslocada sangrava pra fora da tela nas larguras pequenas */
  .sobre-foto::before{left:-14px;bottom:-14px}
  /* o monograma fica atrás do texto no celular: baixa e vai pro canto */
  .faixa::before{right:-6%;top:auto;bottom:-8%;transform:none;opacity:.055}
  /* no celular o botão sobreposto cobria metade do mapa: vira barra abaixo */
  .mapa-link{position:static;display:block;text-align:center;border-top:0;
    border-left:0;border-right:0;border-bottom:0;padding:13px 16px;
    background:rgba(201,169,97,.1)}
  .mapa{border-bottom-width:1px}
}

/* ---------- rodapé ---------- */
.rodape{background:var(--tinta-2);color:rgba(255,255,255,.6);padding:52px 0 38px}
.rodape .wrap{display:grid;grid-template-columns:1fr auto;gap:30px 48px;align-items:start}

.mini{font-size:.86rem;line-height:1.7;margin:0}
.rodape .mini a{color:rgba(255,255,255,.82);text-decoration:none;
  border-bottom:1px solid rgba(201,169,97,.4);
  transition:color .3s var(--t-suave),border-color .3s var(--t-suave)}
.rodape .mini a:hover{color:var(--ouro-claro);border-color:var(--ouro)}
.rodape-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.rodape-links a{text-decoration:none;font-size:.88rem;color:rgba(255,255,255,.66);
  padding:11px 0;transition:color .35s var(--t-suave)}
.rodape-links a:hover{color:var(--ouro-claro)}
.direitos{grid-column:1/-1;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.8rem;color:rgba(255,255,255,.44)}
.creditos{grid-column:1/-1;margin-top:-10px;font-size:.75rem;
  color:rgba(255,255,255,.34);max-width:86ch}
.creditos a{color:rgba(255,255,255,.52);text-decoration:none;
  border-bottom:1px solid rgba(201,169,97,.3)}
.creditos a:hover{color:var(--ouro-claro)}

/* ---------- páginas internas (biblioteca de artigos) ---------- */
.menu a.atual{color:#fff}
.menu a.atual::after{transform:scaleX(1)}
.capa-interna{background:var(--tinta);color:rgba(255,255,255,.76);padding:158px 0 76px}
.capa-interna h1{color:#fff;font-size:clamp(2.1rem,4.2vw,3.3rem);max-width:19ch;margin-bottom:20px}
.capa-interna .lead{color:rgba(255,255,255,.7);max-width:58ch;margin:0}

.filtros{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:40px;
  padding-bottom:22px;border-bottom:1px solid var(--linha)}
.filtros-rot{font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro)}
.filtros input{
  flex:1 1 300px;min-width:0;background:#fff;border:1px solid var(--linha);
  padding:13px 16px;font-family:var(--corpo);font-size:.95rem;color:var(--texto);
  border-radius:0;transition:border-color .35s var(--t-suave);
}
.filtros input:focus{outline:none;border-color:var(--ouro)}
.conta{font-size:.84rem;color:var(--texto-2);white-space:nowrap}

.lista-posts{min-height:320px}
.lista-posts .post{background:#fff}
.carregando{grid-column:1/-1;margin:0;padding:54px 0;text-align:center;color:var(--texto-2)}
.carregando a{color:var(--ouro)}

.paginacao{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:48px}
.pag{
  min-width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--linha);text-decoration:none;color:var(--texto-2);
  font-size:.92rem;font-variant-numeric:tabular-nums;
  transition:background .35s var(--t-suave),color .35s var(--t-suave),border-color .35s var(--t-suave);
}
.pag:hover{border-color:var(--ouro);color:var(--tinta)}
.pag.atual{background:var(--tinta);border-color:var(--tinta);color:var(--ouro-claro)}

@media (max-width:620px){
  .capa-interna{padding:112px 0 54px}
  .filtros{gap:12px}
  .conta{flex-basis:100%}
}

/* ---------- página de artigo ---------- */
.capa-artigo{background:var(--tinta);color:rgba(255,255,255,.76);
  padding:148px 0 58px;position:relative}
.capa-artigo .olho{margin-bottom:22px}
.capa-artigo .olho .risco{width:26px;transform:scaleX(1)}
.capa-artigo .olho a{color:var(--ouro);text-decoration:none;padding:14px 0;
  border-bottom:1px solid transparent;transition:border-color .35s var(--t-suave)}
.capa-artigo .olho a:hover{border-color:var(--ouro)}
.capa-artigo h1{color:#fff;font-size:clamp(1.95rem,3.9vw,3rem);max-width:21ch}
.assinatura{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px;
  font-size:.88rem;color:rgba(255,255,255,.62)}
.assinatura img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.assinatura b{display:block;color:#fff;font-weight:500;font-size:.95rem}
.assinatura span,.assinatura time{display:block}
.assinatura .sep{width:4px;height:4px;border-radius:50%;background:var(--ouro);opacity:.6}
.barra-leitura{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.1)}
.barra-leitura span{display:block;height:100%;background:var(--ouro);
  transform:scaleX(0);transform-origin:left center}

.leitura{padding-top:64px}
.leitura .wrap{max-width:780px}
.a-capa{margin:0 0 44px}
.a-capa img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* tipografia do texto do artigo */
.prosa{font-size:1.08rem;line-height:1.78;color:var(--texto)}
.prosa > :first-child{margin-top:0}
.prosa h2{font-size:clamp(1.42rem,2.5vw,1.92rem);margin:52px 0 16px;max-width:26ch}
.prosa h3{font-size:1.22rem;margin:38px 0 12px}
.prosa h4{font-family:var(--display);font-weight:500;font-size:1.08rem;margin:30px 0 10px;color:var(--tinta)}
.prosa p{margin:0 0 1.15em}
.prosa strong{color:var(--tinta);font-weight:600}
.prosa a{color:var(--texto);text-decoration:none;
  border-bottom:1px solid var(--ouro);transition:background .3s var(--t-suave)}
.prosa a:hover{background:rgba(201,169,97,.16)}
.prosa ul,.prosa ol{margin:0 0 1.3em;padding-left:0;list-style:none}
.prosa ol{counter-reset:n}
.prosa li{position:relative;padding-left:26px;margin-bottom:11px}
.prosa ul > li::before{content:"";position:absolute;left:0;top:.78em;
  width:11px;height:1px;background:var(--ouro)}
.prosa ol > li{counter-increment:n}
.prosa ol > li::before{content:counter(n) ".";position:absolute;left:0;top:0;
  color:var(--ouro);font-family:var(--display);font-size:.95rem}
.prosa blockquote{margin:34px 0;padding:24px 28px;background:var(--creme-2);
  border-left:2px solid var(--ouro);font-size:1.02rem}
.prosa blockquote p:last-child{margin-bottom:0}
.prosa dl{margin:0 0 1.3em}
.prosa dt{font-family:var(--display);font-size:1.05rem;color:var(--tinta);margin-top:18px}
.prosa dd{margin:4px 0 0;color:var(--texto-2)}
.prosa img{margin:34px 0;width:100%}
/* imagem secundária no meio do texto: no template antigo ela flutuava à
   direita com classe do bootstrap. Aqui vira figura de largura própria. */
.prosa .prosa-img{margin:34px 0}
.prosa .prosa-img img{margin:0}
@media (min-width:861px){
  .prosa .prosa-img{float:right;width:46%;margin:10px 0 24px 34px}
}
/* "Leia também" inserido automaticamente pelo gerador de artigos */
.prosa .leia-tambem-auto{
  margin:34px 0;padding:16px 20px;background:var(--creme-2);
  border-left:2px solid var(--ouro);font-size:1rem;
}
.prosa .leia-tambem-auto strong{display:block;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ouro);margin-bottom:4px;font-weight:600}
.prosa .leia-tambem-auto a{font-family:var(--display);font-size:1.08rem;
  color:var(--tinta);background:none;border-bottom:1px solid var(--linha)}
.prosa .leia-tambem-auto a:hover{background:none;border-color:var(--ouro)}
.prosa table{width:100%;border-collapse:collapse;margin:30px 0;font-size:.95rem}
.prosa th,.prosa td{border:1px solid var(--linha);padding:11px 14px;text-align:left}
.prosa th{background:var(--creme-2);font-weight:600;color:var(--tinta)}
.prosa hr{border:0;border-top:1px solid var(--linha);margin:44px 0}
/* lista de áreas da landing de SEO */
.prosa .lista-areas{margin:0 0 1.6em}
.prosa .lista-areas li{padding-left:0;margin-bottom:0;border-top:1px solid var(--linha);
  padding-top:14px;padding-bottom:14px}
.prosa .lista-areas li::before{display:none}
.prosa .lista-areas b{display:block;font-family:var(--display);font-weight:500;
  font-size:1.12rem;color:var(--tinta);margin-bottom:2px}
.prosa .lista-areas span{color:var(--texto-2);font-size:.98rem}

.apos-artigo{margin-top:64px;padding:38px 36px;background:var(--tinta);color:rgba(255,255,255,.72)}
.apos-artigo h2{color:#fff;font-size:1.45rem;margin-bottom:10px;max-width:24ch}
.apos-artigo p{font-size:.97rem;margin-bottom:24px;max-width:56ch}

@media (max-width:620px){
  .capa-artigo{padding:112px 0 46px}
  .leitura{padding-top:46px}
  .prosa{font-size:1.02rem}
  .prosa h2{margin-top:40px}
  .apos-artigo{padding:30px 24px;margin-top:48px}
  .assinatura{font-size:.84rem;gap:11px}
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1080px){
  .frente .wrap,.frente.invertida .wrap{grid-template-columns:minmax(0,350px) minmax(0,1fr);gap:44px}
  .sobre .wrap{gap:46px}
  .advogada{grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:40px}
}
@media (max-width:960px){
  .secao{padding:88px 0}
  .areas{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:repeat(2,1fr)}
  #artigos .posts .post:last-child{grid-column:1/-1}
  #artigos .posts .post:last-child .post-img{aspect-ratio:21/9}
  .sobre .wrap,.contato{grid-template-columns:1fr}
  .sobre-foto{max-width:520px;margin:0 auto}
  /* No celular não há pin (pin em telas táteis trava com a barra do
     navegador). A mesma coreografia sai de outro jeito: a arte fica
     GRUDADA no topo e os blocos passam por baixo dela. O 'top' desconta
     a tarja e o cabeçalho — sem isso o cabeçalho cobria o canvas e a
     estátua aparecia sem o topo. */
  .palco3d{min-height:0;padding:0 0 48px;display:block;overflow:visible}
  .abertura-art{position:sticky;inset:auto;top:var(--topo-fixo,120px);
    height:46svh;min-height:240px;z-index:0}
  /* O texto corre POR CIMA da arte grudada, e não só na parte de baixo:
     ele atravessa a caixa inteira enquanto rola. O véu antigo cobria só
     os 62% finais e a frase branca caía sobre o bronze claro no meio do
     caminho. Agora cobre tudo, leve no topo (onde fica a cabeça da peça
     e não passa texto) e fechando embaixo. */
  .abertura-art::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(14,24,41,.14) 0%,
      rgba(14,24,41,.42) 34%,
      rgba(14,24,41,.74) 66%,
      rgba(14,24,41,.93) 88%,
      var(--tinta) 100%)}
  /* o véu sozinho não basta onde o bronze é mais claro: a sombra no texto
     garante a leitura sem precisar escurecer mais a peça */
  .palco3d .passo{text-shadow:0 1px 16px rgba(14,24,41,.9),0 0 40px rgba(14,24,41,.65)}
  .sem3d .abertura-art::after{display:none}
  .abertura-txt{max-width:none;position:relative;z-index:1}
  .janela-texto{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .abertura-txt .passos{display:grid;gap:0;transform:none!important}
  .passo{min-height:44svh;display:flex;flex-direction:column;justify-content:center;
    opacity:.3;transition:opacity .45s var(--t-suave)}
  .passo.on{opacity:1}
  .role{display:none}
}
@media (max-width:900px){
  .menu{
    position:fixed;inset:72px 0 auto 0;flex-direction:column;gap:0;
    background:var(--tinta);border-bottom:1px solid var(--linha);
    padding:10px 28px 24px;display:none;
  }
  .menu.aberto{display:flex}
  .menu a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:1rem}
  .abrir-menu{display:block;padding:8px 10px}
  .topo .btn{display:none}
  .frente .wrap,.frente.invertida .wrap{grid-template-columns:1fr;gap:28px}
  .frente.invertida .frente-foto{order:0}
  .frente-foto{max-width:420px}
  .advogada{grid-template-columns:1fr;gap:28px}
  .retrato{max-width:300px}
  .numeros .wrap{gap:18px 26px}
  .selo b{font-size:1.32rem}
}
@media (max-width:720px){
  .faixa .wrap{flex-direction:column;align-items:flex-start;gap:26px}
  .rodape .wrap{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .secao{padding:70px 0}
  .areas,.posts{grid-template-columns:1fr}
  #artigos .posts .post:last-child .post-img{aspect-ratio:16/9}
  .frente{padding:34px 0}
  .frente-foto{max-width:none}
  .frente-foto::after{transform:translate(9px,9px)}
  .retrato{max-width:none}
  .retrato img{aspect-ratio:4/5}
  .formacao>div{grid-template-columns:60px 1fr;gap:12px}
  .faq summary{font-size:1.02rem;padding-right:36px}
  .faq details p{padding-right:0}
  /* BUG: .hero é flex. Ao tirar o position:absolute, a barra de números
     virava um segundo item da MESMA LINHA e colava ao lado do texto.
     No celular o hero passa a empilhar. */
  .numeros .wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;padding:22px 20px}
  .selo{flex-direction:column;align-items:flex-start;gap:2px}
}
@media (max-width:420px){
  .wrap{padding:0 20px}
  .numeros .wrap{gap:14px 20px}
  .marca{font-size:1.02rem;letter-spacing:.13em}
  .btn{padding:14px 20px;font-size:.74rem}
}

/* telas curtas (Android de 780px e afins): a arte cede altura para o
   "Agendar uma conversa" caber na primeira tela */
@media (max-width:620px) and (max-height:820px){
  .abertura-art{height:40svh;min-height:210px}
  .abertura h1{font-size:clamp(2rem,8.4vw,2.5rem)}
  .abertura .lead{margin-bottom:22px}
}

/* ---------- tipografia no celular ----------
   Os rótulos em caixa alta e espaçados ficam entre 11 e 12 px no desenho
   de tela grande. Em telefone isso é duro de ler: 45 trechos estavam
   abaixo de 13 px. Aqui eles sobem sem mexer no desktop. */
@media (max-width:620px){
  .olho{font-size:.84rem;letter-spacing:.16em}
  .btn{font-size:.85rem;letter-spacing:.1em;padding:15px 22px}
  .area .mais{font-size:.82rem}
  .area p{font-size:.98rem}
  .post-data{font-size:.82rem;letter-spacing:.12em}
  .post-autor{font-size:.9rem}
  .retrato .oab{font-size:.8rem;letter-spacing:.1em;padding:9px 14px}
  .cargo{font-size:.85rem;letter-spacing:.1em}
  .chips span{font-size:.86rem;padding:8px 14px}
  .formacao b{font-size:1.02rem}
  .formacao span{font-size:.9rem}
  .selo{font-size:.88rem}
  .campo label{font-size:.8rem;letter-spacing:.1em}
  .cbloco b{font-size:.8rem;letter-spacing:.12em}
  .mini{font-size:.9rem}
  .creditos{font-size:.82rem}
  .etapa{font-size:.98rem}
  .passo > p,.lead{font-size:1.02rem}
  .pontos li{font-size:1rem}
  .nota-proto{font-size:.86rem}
  .filtros-rot,.conta{font-size:.82rem}
  .pag{font-size:.98rem}
}

/* ---------- comprimento no celular ----------
   Seis cards de serviço ocupavam quase uma tela cada. */
@media (max-width:620px){
  .area{min-height:0;padding:26px 24px 24px}
  .area .ic{margin-bottom:12px}
  .area h3{margin-bottom:7px}
  .area .mais{display:none}
  .frente{padding:26px 0}
  .advogada{padding:38px 0}
  .posts{gap:20px}
}

/* ---------- quem pediu menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .olho .risco{transform:scaleX(1)!important}
  /* sem pin: os cinco blocos viram uma lista legível (ver .sem3d) */
  .janela-texto{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .abertura-txt .passos{display:grid;gap:52px;transform:none!important}
  .passo{min-height:0;display:block;opacity:1!important}
  [data-ent],[data-area],[data-frente],.hero h1 .l>span{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}