/* ==========================================================================
   SARCONY | PETZINGER ADVOGADOS — folha de estilo única do site
   --------------------------------------------------------------------------
   Direção visual: "Ink & Bordô editorial".
   Referências: Susman Godfrey, Paul Weiss, Cravath — fundo cor de papel,
   tipografia serifada grande, azul-tinta quase preto e um único acento bordô.
   A regra que segura tudo: UMA cor de destaque só. Quando tudo grita,
   nada é importante.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — as variáveis. Mude aqui e o site inteiro muda junto.
   -------------------------------------------------------------------------- */
:root{
  /* Cores */
  --bg:        #F7F5F1;   /* papel / osso — fundo padrão */
  --bg-2:      #EFEBE4;   /* papel um tom abaixo, para faixas alternadas */
  --paper:     #FFFFFF;   /* cartões */
  --ink:       #101820;   /* azul-tinta quase preto — texto e títulos */
  --ink-soft:  #39424C;   /* texto corrido */
  --muted:     #736E66;   /* legendas, rótulos */
  --line:      #DED8CE;   /* fios e bordas */
  --accent:    #8C2230;   /* BORDÔ — o único destaque do site */
  --accent-dk: #6E1A25;   /* bordô no hover */
  --dark:      #0E1620;   /* seções escuras */
  --dark-soft: #9AA4AE;   /* texto secundário dentro do escuro */

  /* Tipografia */
  --serif: "Fraunces", "Times New Roman", Georgia, serif;
  --sans:  "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Escala fluida: o tamanho acompanha a largura da tela sozinho,
     sem precisar de dez media queries. */
  --t-hero: clamp(2.75rem, 7.5vw, 6.5rem);
  --t-h2:   clamp(2rem, 4.2vw, 3.5rem);
  --t-h3:   clamp(1.35rem, 2.2vw, 1.75rem);
  --t-lead: clamp(1.05rem, 1.5vw, 1.3rem);

  /* Ritmo */
  --gut: clamp(1.25rem, 5vw, 5rem);   /* respiro lateral da página */
  --sec: clamp(4.5rem, 10vw, 9rem);   /* respiro vertical entre seções */
  --max: 1280px;                      /* largura máxima do conteúdo */

  --radius: 2px;  /* quase reto: escritório de advocacia não usa bolinha */
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* --------------------------------------------------------------------------
   2. RESET enxuto
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  color:var(--ink);
  line-height:1.05;
  letter-spacing:-.015em;
  margin:0;
  font-variation-settings:"SOFT" 0,"WONK" 0;
}
p{ margin:0 0 1.1em; }
::selection{ background:var(--accent); color:#fff; }

/* Quem navega por teclado precisa ver onde está. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sec); }
.section--alt{ background:var(--bg-2); }
.section--dark{ background:var(--dark); color:var(--dark-soft); }
.section--dark h2,.section--dark h3{ color:#F4F2EE; }

/* Rótulo de seção: fio curto bordô + texto miúdo em caixa alta.
   É o detalhe que faz parecer escritório grande. */
.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  margin:0 0 1.5rem;
}
.eyebrow::before{ content:""; width:2.25rem; height:1px; background:var(--accent); flex:none; }
.section--dark .eyebrow{ color:var(--dark-soft); }

.lead{ font-size:var(--t-lead); color:var(--ink-soft); max-width:58ch; }
.section--dark .lead{ color:var(--dark-soft); }

.grid{ display:grid; gap:clamp(1.5rem,3vw,3rem); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .grid--2,.grid--3{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   4. BOTÕES
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.75rem;
  font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid transparent; border-radius:var(--radius);
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-dk); }
.btn--ghost{ border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--bg); }
.btn--light{ border-color:rgba(255,255,255,.35); color:#F4F2EE; }
.btn--light:hover{ background:#F4F2EE; color:var(--dark); }
.btn--block{ width:100%; }

/* Link com seta que anda no hover */
.arrow-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); padding-bottom:.25rem; border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}
.arrow-link span{ transition:transform .25s var(--ease); }
.arrow-link:hover{ border-color:var(--accent); }
.arrow-link:hover span{ transform:translateX(5px); }

/* --------------------------------------------------------------------------
   5. CABEÇALHO
   -------------------------------------------------------------------------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
  padding-block:1.25rem;
}
/* .is-stuck é ligado pelo JS depois que a pessoa rola a página */
.header.is-stuck{
  background:rgba(247,245,241,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
  padding-block:.7rem;
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }

.brand{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--serif); font-size:1.15rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
}
.brand__name em{ font-style:normal; color:var(--accent); }
.brand__sub{
  font-size:.58rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); margin-top:.35rem;
}

/* O gap encolhe junto com a tela: é o espaçamento que cede primeiro,
   nunca o texto. E white-space:nowrap impede "O ESCRITÓRIO" de quebrar
   em duas linhas quando o menu aperta. */
.nav{ display:flex; align-items:center; gap:clamp(1.15rem,2.1vw,2rem); }
.nav a{
  font-size:.78rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); position:relative; padding-block:.3rem;
  white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--accent); transition:width .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ width:100%; }

/* Botão hambúrguer — só aparece no celular */
.burger{ display:none; background:none; border:0; padding:.5rem; color:var(--ink); }
.burger span{
  display:block; width:24px; height:1.5px; background:currentColor; margin:5px 0;
  transition:transform .3s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:980px){
  .burger{ display:block; z-index:2; }
  .nav{
    position:fixed; inset:0; background:var(--bg);
    flex-direction:column; justify-content:center; gap:2rem;
    /* fica fora da tela até o JS abrir */
    transform:translateX(100%); transition:transform .4s var(--ease);
  }
  .nav.is-open{ transform:translateX(0); }
  .nav a{ font-size:1.1rem; font-family:var(--serif); text-transform:none; letter-spacing:0; white-space:normal; }
  .header__cta{ display:none; }
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero{ position:relative; padding-block:clamp(9rem,18vh,13rem) var(--sec); overflow:hidden; }
.hero__grid{
  display:grid; grid-template-columns:1.25fr .75fr;
  gap:clamp(2rem,5vw,4rem); align-items:end;
}
@media (max-width:980px){ .hero__grid{ grid-template-columns:1fr; } }

.hero__title{ font-size:var(--t-hero); }
.hero__title em{ font-style:italic; color:var(--accent); }
.hero__lead{ font-size:var(--t-lead); max-width:46ch; margin-top:2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.5rem; }

/* Cartão lateral do hero — ancora visual e dá o contato de cara */
.hero__card{
  /* vidro fosco: deixa o monograma 3D aparecer por baixo sem atrapalhar a leitura */
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 24px 60px -40px rgba(16,24,32,.55);
  padding:clamp(1.5rem,3vw,2.25rem);
}
/* Navegador sem backdrop-filter recebe o cartão sólido de sempre. */
@supports not (backdrop-filter:blur(2px)){
  .hero__card{ background:var(--paper); border-color:var(--line); }
}
.hero__card dt{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.hero__card dd{ margin:.3rem 0 1.5rem; font-family:var(--serif); font-size:1.25rem; color:var(--ink); }
.hero__card dd:last-of-type{ margin-bottom:0; }

/* Monograma 3D ao fundo do topo.
   A caixa guarda a proporção do monograma (350x390 no arquivo original),
   para o canvas nunca distorcer o desenho. */
.hero__mark{
  /* Centralizado atrás de tudo e bem apagado: a pessoa sente o movimento
     e reconhece a marca, sem que o desenho dispute com o texto. Antes ele
     sangrava pela direita e, em janela estreita, virava um borrão cortado. */
  position:absolute; top:50%; left:50%; transform:translate(-50%,-48%);
  z-index:-1;
  width:min(112vh,980px); aspect-ratio:350/390;
  pointer-events:none; user-select:none;
  opacity:.075;
}
.hero__mark canvas{ width:100%; height:100%; display:block; }

/* Plano B: se o 3D não subir, volta a marca-d água escrita. */
.hero__mark-sp{ display:none; }
.hero__mark.sem-3d{ opacity:.045; display:grid; place-items:center; }
.hero__mark.sem-3d canvas{ display:none; }
.hero__mark.sem-3d .hero__mark-sp{
  display:block;
  font-family:var(--serif); font-size:clamp(20rem,34vw,30rem); line-height:.8; color:var(--ink);
}

/* No celular o monograma fica menor e ainda mais apagado, para não
   competir com o texto numa tela estreita. */
@media (max-width:760px){
  .hero__mark{ width:min(128vw,520px); opacity:.055; }
}

/* --------------------------------------------------------------------------
   7. FAIXA DE NÚMEROS
   -------------------------------------------------------------------------- */
.stats{ border-block:1px solid var(--line); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stats__item{ padding:clamp(2rem,4vw,3rem) clamp(1rem,2vw,2rem); border-left:1px solid var(--line); }
.stats__item:first-child{ border-left:0; padding-left:0; }
.stats__num{ font-family:var(--serif); font-size:clamp(2.5rem,5vw,3.75rem); color:var(--ink); line-height:1; }
.stats__num sup{ font-size:.45em; color:var(--accent); top:-.7em; }
.stats__label{ font-size:.78rem; letter-spacing:.06em; color:var(--muted); margin-top:.6rem; }
@media (max-width:760px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stats__item{ border-left:0; border-top:1px solid var(--line); padding-inline:0; }
  .stats__item:nth-child(2),.stats__item:nth-child(4){ border-left:1px solid var(--line); padding-left:1.25rem; }
  .stats__item:first-child,.stats__item:nth-child(2){ border-top:0; }
}

/* --------------------------------------------------------------------------
   8. ÁREAS DE ATUAÇÃO — lista numerada que abre no clique
   -------------------------------------------------------------------------- */
.areas__item{ border-top:1px solid var(--line); }
.areas__item:last-child{ border-bottom:1px solid var(--line); }
.areas__head{
  width:100%; background:none; border:0; text-align:left;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.5rem,3vw,2.25rem) 0; color:var(--ink);
  transition:padding-inline .3s var(--ease), color .3s var(--ease);
}
.areas__head:hover{ padding-inline:.75rem; color:var(--accent); }
.areas__num{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.18em; color:var(--muted); }
.areas__name{ font-family:var(--serif); font-size:var(--t-h3); line-height:1.1; }
.areas__plus{ position:relative; width:18px; height:18px; flex:none; }
.areas__plus::before,.areas__plus::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:currentColor;
  transition:transform .3s var(--ease);
}
.areas__plus::after{ transform:rotate(90deg); }
.areas__head[aria-expanded="true"] .areas__plus::after{ transform:rotate(0); }
.areas__head[aria-expanded="true"]{ color:var(--accent); }
/* O painel cresce de 0 até a altura real — o JS mede e escreve o valor. */
.areas__panel{ overflow:hidden; height:0; transition:height .4s var(--ease); }
.areas__body{ padding:0 0 2.25rem; max-width:70ch; }
.areas__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; list-style:none; padding:0; }
.areas__tags li{
  font-size:.75rem; letter-spacing:.04em; color:var(--muted);
  border:1px solid var(--line); background:var(--paper); padding:.4rem .8rem;
}

/* --------------------------------------------------------------------------
   9. CARTÕES (método, sócios, artigos)
   -------------------------------------------------------------------------- */
.card{
  background:var(--paper); border:1px solid var(--line); padding:clamp(1.5rem,3vw,2.5rem);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -28px rgba(16,24,32,.45); border-color:#CFC7BA; }
.card__step{ font-family:var(--serif); font-size:2.5rem; color:var(--accent); line-height:1; }
.card__title{ font-size:var(--t-h3); margin:1rem 0 .75rem; }
.card p:last-child{ margin-bottom:0; }

/* Sócios */
.person{ display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:start; }
.person__photo{
  width:110px; height:130px; flex:none; object-fit:cover; background:var(--bg-2);
  border:1px solid var(--line); filter:grayscale(1); transition:filter .4s var(--ease);
}
.card:hover .person__photo{ filter:grayscale(0); }
.person__name{ font-family:var(--serif); font-size:1.4rem; color:var(--ink); }
.person__role{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:.4rem 0 .9rem; }
.person__bio{ font-size:.95rem; }
@media (max-width:520px){ .person{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   10. CITAÇÃO / PROVA SOCIAL
   -------------------------------------------------------------------------- */
.quote{ max-width:52ch; }
.quote blockquote{ margin:0; font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.25rem); line-height:1.3; color:#F4F2EE; }
.quote figcaption{ margin-top:1.5rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dark-soft); }

/* --------------------------------------------------------------------------
   11. CHAMADA FINAL
   -------------------------------------------------------------------------- */
.cta{ background:var(--dark); color:var(--dark-soft); }
.cta__title{ font-size:var(--t-h2); color:#F4F2EE; max-width:18ch; }
.cta__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:860px){ .cta__inner{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   12. RODAPÉ
   -------------------------------------------------------------------------- */
.footer{ background:var(--bg-2); padding-block:clamp(3rem,6vw,5rem) 2rem; font-size:.9rem; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
@media (max-width:860px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }
.footer h4{
  font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1rem;
}
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer a:hover{ color:var(--accent); }
.footer__bottom{
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.78rem; color:var(--muted);
}
/* Aviso da OAB: o Provimento 205/2021 proíbe publicidade mercantil.
   Manter este bloco é o que deixa o site dentro das regras. */
.footer__oab{ margin-top:1.25rem; font-size:.75rem; color:var(--muted); max-width:70ch; line-height:1.6; }

/* --------------------------------------------------------------------------
   13. BOTÃO FLUTUANTE DO WHATSAPP
   -------------------------------------------------------------------------- */
.wa{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:90;
  display:flex; align-items:center; gap:.65rem;
  background:var(--ink); color:#F4F2EE; padding:.85rem 1.25rem; border-radius:999px;
  font-size:.8rem; font-weight:600; letter-spacing:.06em;
  box-shadow:0 14px 34px -18px rgba(16,24,32,.8);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.wa:hover{ background:var(--accent); transform:translateY(-2px); }
.wa svg{ width:18px; height:18px; fill:currentColor; }
@media (max-width:520px){ .wa span{ display:none; } .wa{ padding:1rem; } }

/* --------------------------------------------------------------------------
   14. FORMULÁRIO
   -------------------------------------------------------------------------- */
.field{ display:grid; gap:.45rem; margin-bottom:1.25rem; }
.field label{ font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{
  font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:.85rem 1rem; width:100%;
  transition:border-color .25s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); }
.field textarea{ min-height:130px; resize:vertical; }
.form__note{ font-size:.78rem; color:var(--muted); margin-top:.75rem; }

/* --------------------------------------------------------------------------
   15. ANIMAÇÃO DE ENTRADA
   O elemento nasce deslocado e transparente; o JS liga .is-in quando ele
   aparece na tela. Quem configurou "menos animação" no sistema não vê nada.
   -------------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Leitor de tela vê, olho não. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Link "pular para o conteúdo" — exigência de acessibilidade */
.skip{ position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff; padding:.75rem 1.25rem; z-index:200; }
.skip:focus{ left:0; }

/* --------------------------------------------------------------------------
   16. SÓCIOS — retratos em página dupla de revista
   --------------------------------------------------------------------------
   As duas fotos foram feitas no mesmo estúdio, com o mesmo fundo azul.
   Isso é ouro: dá para tratá-las como um par. O que fazemos aqui é
   dessaturar as duas por padrão e devolver a cor só quando o mouse passa —
   assim elas conversam entre si em vez de brigar.
   -------------------------------------------------------------------------- */
.socios__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
@media (max-width:760px){ .socios__grid{ grid-template-columns:1fr; gap:3.5rem; } }

.socio{ position:relative; }

/* A moldura da foto. aspect-ratio trava a proporção 4:5 em qualquer tela,
   então o layout nunca "pula" enquanto a imagem carrega. */
.socio__media{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:4/5; background:var(--dark);
}
.socio__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 15%;
  filter:grayscale(.6) contrast(1.06) brightness(.95);
  transform:scale(1.03);
  transition:filter .9s var(--ease), transform 1.3s var(--ease);
  will-change:transform;
}
.socio:hover .socio__media img,
.socio:focus-within .socio__media img{ filter:none; transform:scale(1.08); }

/* Véu bordô por cima da foto: some no hover.
   É o que amarra as fotos à paleta do site em vez de deixá-las soltas. */
.socio__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(170deg, rgba(140,34,48,.22) 0%, rgba(14,22,32,.62) 100%);
  mix-blend-mode:multiply;
  transition:opacity .9s var(--ease);
}
.socio:hover .socio__media::after,
.socio:focus-within .socio__media::after{ opacity:.12; }

/* Número vazado no canto, como numeração de edição */
.socio__num{
  position:absolute; z-index:2; pointer-events:none;
  top:clamp(.6rem,2vw,1.25rem); left:clamp(.75rem,2vw,1.5rem);
  font-family:var(--serif); font-size:clamp(2.75rem,5vw,4.25rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(247,245,241,.6);
}

/* A placa do nome encavala a foto por baixo — truque de diagramação
   que faz duas peças planas virarem uma composição. */
.socio__plate{
  position:relative; z-index:3;
  width:calc(100% - clamp(1.25rem,4vw,3.5rem));
  margin-top:clamp(-4rem,-6vw,-2.75rem);
  background:var(--paper);
  border-top:2px solid var(--accent);
  padding:clamp(1.15rem,2.5vw,1.75rem);
  box-shadow:0 22px 50px -34px rgba(16,24,32,.55);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.socio:hover .socio__plate{ transform:translateY(-8px); box-shadow:0 30px 60px -34px rgba(16,24,32,.6); }

.socio__name{ font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.65rem); color:var(--ink); line-height:1.15; }
.socio__role{
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:.55rem 0 1rem;
}
.socio__bio{ font-size:.95rem; margin-bottom:1.25rem; }

/* Rodapé da placa: o número de processos, que é a prova objetiva */
.socio__meta{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  border-top:1px solid var(--line); padding-top:1rem; margin:0;
}
.socio__meta dt{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.socio__meta dd{ margin:.25rem 0 0; font-family:var(--serif); font-size:1.5rem; color:var(--ink); line-height:1; }

/* A paralaxe escreve --py; a escala vem junto para não aparecer borda vazia. */
.socio__media img{ transform:translate3d(0,var(--py,0),0) scale(1.03); }
.socio:hover .socio__media img,
.socio:focus-within .socio__media img{ transform:translate3d(0,var(--py,0),0) scale(1.08); }

/* --------------------------------------------------------------------------
   17. CONTATO DIRETO DO SÓCIO
   Botão dentro da placa do nome: quem se identificou com o advogado
   fala com ELE, não com um formulário genérico.
   -------------------------------------------------------------------------- */
.socio__acao{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:1.25rem; padding:.7rem 1.1rem;
  border:1px solid var(--line); border-radius:var(--radius);
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); background:var(--bg);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.socio__acao svg{ width:15px; height:15px; fill:currentColor; flex:none; }
.socio__acao:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* --------------------------------------------------------------------------
   18. PLANTÃO CRIMINAL
   Faixa escura, curta e direta. Quem cai aqui está com pressa: o telefone
   precisa ser a maior coisa da tela, não um item de lista.
   -------------------------------------------------------------------------- */
.plantao{ background:var(--dark); color:var(--dark-soft); }
.plantao__inner{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
@media (max-width:860px){ .plantao__inner{ grid-template-columns:1fr; } }

.plantao__title{ font-size:var(--t-h2); color:#F4F2EE; max-width:16ch; }
.plantao__title em{ font-style:italic; color:#D98C97; }

/* Bolinha que pulsa: sinaliza linha ativa sem precisar escrever "online". */
.plantao__selo{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#D98C97; margin-bottom:1.25rem;
}
.plantao__selo::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(140,34,48,.7);
  animation:pulso 2.2s infinite;
}
@keyframes pulso{
  0%   { box-shadow:0 0 0 0 rgba(140,34,48,.75); }
  70%  { box-shadow:0 0 0 12px rgba(140,34,48,0); }
  100% { box-shadow:0 0 0 0 rgba(140,34,48,0); }
}

/* O telefone em corpo grande — é o elemento de ação da faixa */
.plantao__fone{
  display:inline-block; font-family:var(--serif);
  font-size:clamp(1.9rem,4.5vw,3rem); line-height:1.1; color:#F4F2EE;
  border-bottom:2px solid rgba(140,34,48,.85); padding-bottom:.15rem;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.plantao__fone:hover{ color:#fff; border-color:var(--accent); }
.plantao__quem{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dark-soft); margin-top:1rem; }

/* --------------------------------------------------------------------------
   19. TOPO DAS PÁGINAS INTERNAS
   Versão curta do hero: sem 3D, sem cartão, só o assunto da página.
   O padding de cima existe porque o cabeçalho é fixo e cobriria o título.
   -------------------------------------------------------------------------- */
.pagehead{ padding-block:clamp(8rem,16vh,11rem) clamp(2.5rem,5vw,4rem); }
.pagehead h1{ font-size:clamp(2.5rem,6vw,4.75rem); max-width:16ch; }
.pagehead h1 em{ font-style:italic; color:var(--accent); }
.pagehead .lead{ margin-top:1.75rem; }

/* --------------------------------------------------------------------------
   20. BLOCOS DE ÁREA (página áreas.html)
   Número e nome ficam grudados no topo enquanto o conteúdo rola ao lado.
   É o que dá a sensação de capítulo.
   -------------------------------------------------------------------------- */
.area-bloco{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--line);
}
.area-bloco:last-of-type{ border-bottom:1px solid var(--line); }
@media (max-width:860px){ .area-bloco{ grid-template-columns:1fr; gap:1.25rem; } }

.area-bloco__cabeca{ position:sticky; top:7rem; align-self:start; }
@media (max-width:860px){ .area-bloco__cabeca{ position:static; } }
.area-bloco__num{
  font-size:.72rem; font-weight:600; letter-spacing:.2em; color:var(--accent);
  display:block; margin-bottom:.75rem;
}
.area-bloco__nome{ font-size:clamp(1.6rem,3vw,2.35rem); }

/* Lista de serviços em duas colunas, cada item com um fio bordô curto */
.lista-itens{ list-style:none; margin:1.75rem 0 0; padding:0; columns:2; column-gap:2.5rem; }
@media (max-width:620px){ .lista-itens{ columns:1; } }
.lista-itens li{
  break-inside:avoid; padding:.5rem 0 .5rem 1.25rem; position:relative;
  font-size:.96rem; border-bottom:1px solid var(--line);
}
.lista-itens li::before{
  content:""; position:absolute; left:0; top:1.25rem;
  width:.6rem; height:1px; background:var(--accent);
}

/* --------------------------------------------------------------------------
   21. PÁGINA DE CONTATO
   -------------------------------------------------------------------------- */
.contato__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:920px){ .contato__grid{ grid-template-columns:1fr; } }

.canal{
  display:block; border:1px solid var(--line); background:var(--paper);
  padding:clamp(1.15rem,2.5vw,1.6rem); margin-bottom:1rem;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.canal:hover{ border-color:var(--accent); transform:translateY(-2px); }
.canal__rotulo{ font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.canal__valor{ font-family:var(--serif); font-size:1.35rem; color:var(--ink); margin-top:.4rem; }
.canal__nota{ font-size:.85rem; color:var(--muted); margin-top:.35rem; }
.canal--urgente{ border-left:3px solid var(--accent); }

.endereco{ border-top:1px solid var(--line); margin-top:2rem; padding-top:1.75rem; }
.endereco dt{ font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.endereco dd{ margin:.4rem 0 1.25rem; }

.form__linha{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width:620px){ .form__linha{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   22. CORTINA DE ABERTURA
   Cobre a tela enquanto a animação de entrada toca. O JavaScript a remove
   quando termina; a animação de CSS abaixo é a rede de seguranca: se o JS
   nao rodar, a cortina se apaga sozinha em 4,5s e o site aparece igual.
   -------------------------------------------------------------------------- */
.abertura{
  position:fixed; inset:0; z-index:300;
  background:#0B121A;                 /* a abertura acontece no escuro */
  display:grid; place-items:center;
  transition:background .7s var(--ease);
  animation:aberturaSaida .5s 5s forwards;
}
/* No fim, o fundo clareia para a cor do site antes da cortina subir:
   a passagem do escuro para o papel vira parte da animacao. */
.abertura--clareia{ background:var(--bg); }

/* Clarão do estouro: uma camada branca por cima de tudo, acesa por um
   piscar. O JS controla a opacidade direto, quadro a quadro. */
.abertura__clarao{
  position:absolute; inset:0; background:#FFF6EA;
  opacity:0; pointer-events:none; mix-blend-mode:screen;
}
.abertura--clareia canvas{ opacity:0; transition:opacity .7s var(--ease); }
.abertura canvas{ width:100%; height:100%; display:block; }

/* classe que o JS liga para a cortina subir suavemente */
.abertura--fim{ opacity:0; pointer-events:none; transition:opacity .6s var(--ease); }

@keyframes aberturaSaida{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

/* Para quem desligou animacao no sistema, nem existe. */
@media (prefers-reduced-motion:reduce){ .abertura{ display:none; } }

/* --------------------------------------------------------------------------
   23. PLACAS DOS SÓCIOS COM ALTURA IGUAL
   Bio de tamanho diferente deixava uma placa mais alta que a outra, e de
   longe parecia que uma estava por cima da foto do lado. Virando a coluna
   em flex, as duas placas esticam até a altura da maior; os números e o
   botão descem para a base com margin-top:auto.
   -------------------------------------------------------------------------- */
.socio{ display:flex; flex-direction:column; height:100%; }
.socio__plate{ flex:1 1 auto; display:flex; flex-direction:column; }
.socio__meta{ margin:auto 0 0; }