/* ═══════════════════════════════════════════════════════════════════
   LEANDRO SANTOS — ADVOCACIA CRIMINAL
   v2 · Sistema visual DARK · GOLD · SILVER
   Derivado dos assets reais da marca (logo LS + filme institucional).

   PRINCÍPIO DE PERFORMANCE DESTA FOLHA
   Nenhuma animação usa filter, backdrop-filter, box-shadow ou
   mix-blend-mode. Só transform, opacity e clip-path — as três
   propriedades que o compositor resolve sem repintar a página.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────── */
:root{
  /* Dark — base estrutural, levemente quente para conversar com o filme */
  --obsidian:#0A0A0C;
  --graphite:#0F0F12;
  --slate:#141418;
  --slate-2:#1A1A1F;
  --fog:#2A2A31;
  --fog-soft:#1F1F25;

  /* Gold — assinatura, uso contido.
     `gold-deep` é decorativo: filetes, bordas, degradês. Para TEXTO
     existe `gold-label`, porque #8A6F1E sobre o obsidiano dá 4,12:1 e
     esses rótulos são pequenos — abaixo do mínimo de 4,5:1 da WCAG AA. */
  --gold:#C9A227;
  --gold-lite:#E4CC8E;
  --gold-deep:#8A6F1E;
  --gold-label:#AE902B;      /* 6,43:1 sobre #0A0A0C — folga para as poças de luz */
  --gold-glow:rgba(201,162,39,.14);

  /* Silver — modernidade e contraste */
  --platinum:#EFF0F2;
  --silver:#C7CBD1;
  --steel:#9BA1AA;
  --steel-dim:#828892;       /* 5,54:1 sobre #0A0A0C — folga para as poças de luz */

  --bg:var(--obsidian);
  --fg:var(--platinum);

  /* Tipografia — duas famílias. Os rótulos técnicos são a própria
     grotesca em caixa alta com tracking largo. */
  /* Display: grotesca de formas quadradas, no lugar da serifa editorial. */
  --display:"Archivo","Inter Tight",Arial,Helvetica,sans-serif;
  --sans:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --fs-display:clamp(2.1rem,min(6vw,7.6vh),4.9rem);
  --fs-h2:clamp(1.75rem,4.2vw,3.4rem);
  --fs-h3:clamp(1.2rem,2vw,1.6rem);
  --fs-lede:clamp(1rem,1.3vw,1.18rem);
  --fs-body:clamp(.95rem,1.02vw,1.04rem);
  --fs-label:clamp(.64rem,.76vw,.73rem);

  /* Ritmo */
  --gut:clamp(1.25rem,5vw,4.5rem);
  --max:1400px;
  --sec-y:clamp(5rem,11vw,9.5rem);
  --nav-h:clamp(58px,7vw,82px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.02,.16,1);
}
@media (min-width:1600px){ :root{--max:1520px} }

/* ── 2. RESET ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:var(--fs-body);font-weight:300;
  line-height:1.65;letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:#0A0A0A}

body.menu-open{overflow:hidden}

section[id]{scroll-margin-top:var(--nav-h)}

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

.skip-link{
  position:fixed;top:0;left:50%;translate:-50% -140%;z-index:1000;
  background:var(--gold);color:#0A0A0A;padding:.7rem 1.3rem;border-radius:0 0 3px 3px;
  font-size:.78rem;font-weight:500;letter-spacing:.08em;transition:translate .25s var(--ease);
}
.skip-link:focus-visible{translate:-50% 0}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:1px solid var(--gold);outline-offset:3px;border-radius:1px;
}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* Rótulo técnico — substitui a antiga família monoespaçada.
   Mesma leitura de dossiê, uma requisição de fonte a menos. */
.lab,.eyebrow,.hero__meta dt,.sobre__col h3,.contato__dl dt,.rodape__nav h4,
.form__title,.frente__num,.etapa__num,.spine{
  font-family:var(--sans);font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.ph{color:var(--steel-dim);font-size:.9em;letter-spacing:.02em}
a.ph{transition:color .3s}
a.ph:hover{color:var(--gold)}

/* ── 3. COMPONENTES ────────────────────────────────────────────── */
.eyebrow{
  display:flex;align-items:center;gap:.8rem;
  font-size:var(--fs-label);line-height:1;color:var(--gold);
}
.eyebrow::before{content:"";width:clamp(20px,3vw,40px);height:1px;background:var(--gold-deep);flex:0 0 auto}

.rule{display:inline-block;width:34px;height:1px;background:var(--gold-deep);vertical-align:middle;margin-inline-end:.8rem;flex:0 0 auto}

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:.92rem 1.6rem;font-size:.78rem;font-weight:400;line-height:1;
  letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--fog);overflow:hidden;isolation:isolate;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.btn svg{width:17px;height:17px;flex:0 0 auto;transition:translate .35s var(--ease)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);
  scale:0 1;transform-origin:left;transition:scale .45s var(--ease-io);
}
.btn:hover::before,.btn:focus-visible::before{scale:1 1}
.btn:hover svg{translate:4px 0}

.btn--gold{border-color:var(--gold-deep);color:var(--gold-lite);background:rgba(201,162,39,.06)}
.btn--gold:hover,.btn--gold:focus-visible{color:#0A0A0A;border-color:var(--gold)}
.btn--line{color:var(--silver);background:rgba(10,10,12,.32)}
.btn--line::before{background:var(--silver)}
.btn--line:hover,.btn--line:focus-visible{color:#0A0A0A;border-color:var(--silver)}
.btn--ghost{color:var(--silver);padding:.7rem 1.2rem;font-size:.7rem}
.btn--ghost::before{background:var(--silver)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:#0A0A0A;border-color:var(--silver)}
.btn--lg{padding:1.1rem 2rem}
.btn--block{width:100%}

/* ── 4. REVELAÇÕES ─────────────────────────────────────────────────
   Um gesto por seção, não um fade universal. Tudo em transform,
   opacity ou clip-path; cada elemento anima uma única vez.

   REGRA DE SEGURANÇA — por que tudo depende de `html.rv`
   Esconder por padrão e contar com o JS para revelar é uma aposta:
   se o observador não disparar, se o script morrer, se innerHeight
   vier 0, a seção inteira fica preta para sempre. Foi exatamente o
   que aconteceu.
   Agora o estado escondido só existe sob `html.rv`, uma classe que o
   script do <head> aplica JUNTO com um temporizador que a remove
   sozinho em 2,5 s. Se qualquer elo da corrente quebrar, a classe cai
   e a página aparece inteira. O padrão passou a ser "visível".      */
html.rv [data-rv]{--i:0;--d:calc(var(--i) * 80ms)}

html.rv [data-rv="fade"]      {opacity:0;translate:0 14px;transition:opacity .7s var(--ease) var(--d),translate .8s var(--ease) var(--d)}
html.rv [data-rv="slide"]     {opacity:0;translate:-22px 0;transition:opacity .8s var(--ease) var(--d),translate .9s var(--ease) var(--d)}
html.rv [data-rv="curtain"]   {clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease-io) var(--d)}
html.rv [data-rv="curtain-x"] {clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease-io) var(--d)}
html.rv [data-rv="wipe"]      {clip-path:inset(0 100% 0 0);transition:clip-path 1.15s var(--ease-io) var(--d)}
html.rv [data-rv="rise"]      {opacity:0;translate:0 26px;transition:opacity .75s var(--ease) var(--d),translate .95s var(--ease-io) var(--d)}
html.rv [data-rv="zoom"] img  {scale:1.08;transition:scale 1.3s var(--ease-io) var(--d)}
html.rv [data-rv="zoom"]      {clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-io) var(--d)}
html.rv [data-rv="mask"] h3 span{translate:0 105%;display:block;transition:translate 1s var(--ease-io) var(--d)}
html.rv [data-rv="mask"] p    {opacity:0;transition:opacity .8s var(--ease) calc(var(--d) + 180ms)}
html.rv [data-rv="line"]::before{scale:0 1;transform-origin:left;transition:scale 1.2s var(--ease-io)}

/* O clip final é declarado só para as variantes que realmente recortam.
   Aplicá-lo a todas deixaria um inset(0) permanente em botões e títulos
   — e um inset(0) corta o que legitimamente sai da caixa: o anel de
   foco, o ::before dos botões, a perna de um "g" em itálico.
   Cada regra de revelação carrega uma classe a mais que a sua irmã
   escondida, então vence por especificidade. */
html.rv [data-rv].in{opacity:1;translate:0 0}
html.rv [data-rv="curtain"].in,html.rv [data-rv="curtain-x"].in,
html.rv [data-rv="wipe"].in,html.rv [data-rv="zoom"].in{clip-path:inset(0 0 0 0)}
html.rv [data-rv="zoom"].in img{scale:1}
html.rv [data-rv="mask"].in h3 span{translate:0 0}
html.rv [data-rv="mask"].in p{opacity:1}
html.rv [data-rv="line"].in::before{scale:1 1}

/* ── 5. NAVEGAÇÃO ──────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(.8rem,1.5vw,1.3rem) var(--gut);
  border-bottom:1px solid transparent;
  transition:translate .45s var(--ease),background-color .4s linear,border-color .4s linear;
}
/* Sem backdrop-filter: em máquinas modestas o blur de largura total
   custa um repaint por quadro de scroll. Opacidade sólida resolve. */
.nav.is-solid{background:rgba(10,10,12,.94);border-bottom-color:var(--fog-soft)}
.nav.is-up{translate:0 -110%}

.nav__brand{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.nav__brand img{width:clamp(26px,2.6vw,32px);height:auto}
.nav__brand-text{display:flex;flex-direction:column;line-height:1.15}
.nav__brand-text b{font-size:.86rem;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--platinum)}
.nav__brand-text i{font-size:.56rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-dim);font-style:normal}

.nav__links{display:none;margin-inline-start:auto;gap:clamp(1rem,2.4vw,2.2rem)}
.nav__links a{position:relative;font-size:.82rem;letter-spacing:.05em;color:var(--steel);padding-block:.3rem;transition:color .3s}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
  scale:0 1;transform-origin:left;transition:scale .4s var(--ease);
}
.nav__links a:hover,.nav__links a.is-current{color:var(--platinum)}
.nav__links a:hover::after,.nav__links a.is-current::after{scale:1 1}
@media (min-width:1024px){.nav__links{display:flex}}

.nav .nav__cta{display:none;flex:0 0 auto}
@media (min-width:1024px){.nav .nav__cta{display:inline-flex}}

.nav__toggle{
  margin-inline-start:auto;display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;
  border:1px solid var(--fog);border-radius:2px;transition:border-color .3s;
}
.nav__toggle:hover{border-color:var(--gold-deep)}
.nav__toggle-bars{display:grid;gap:5px;width:18px}
.nav__toggle-bars i{display:block;height:1px;background:var(--silver);transition:transform .35s var(--ease)}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child{transform:translateY(3px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child{transform:translateY(-3px) rotate(-45deg)}
@media (min-width:1024px){.nav__toggle{display:none}}

.menu{
  position:fixed;inset:0;z-index:95;background:var(--obsidian);
  display:flex;flex-direction:column;justify-content:center;gap:2.5rem;
  padding:6rem var(--gut) 2.5rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease-io);
}
.menu[hidden]{display:none}
.menu.is-open{clip-path:inset(0 0 0 0)}
.menu__list{display:grid;gap:.3rem}
.menu__list a{
  display:flex;align-items:baseline;gap:1rem;padding-block:.5rem;
  font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,7vw,2.6rem);line-height:1.15;letter-spacing:-.03em;color:var(--platinum);
  border-bottom:1px solid var(--fog-soft);
  opacity:0;translate:0 24px;
}
.menu.is-open .menu__list a{opacity:1;translate:0 0;transition:opacity .5s var(--ease) var(--d,0s),translate .6s var(--ease) var(--d,0s),color .3s}
.menu__list a:hover{color:var(--gold-lite)}
.menu__list a em{font-size:.64rem;font-weight:500;letter-spacing:.2em;color:var(--gold);font-style:normal;flex:0 0 auto}
.menu__foot{display:grid;gap:1rem;justify-items:start}
.menu__foot p{font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dim)}

/* ── 6. ÍNDICE LATERAL ─────────────────────────────────────────── */
.spine{
  position:fixed;left:clamp(1rem,2vw,1.8rem);top:50%;translate:0 -50%;z-index:60;
  display:none;flex-direction:column;align-items:center;gap:1rem;
  font-size:.6rem;line-height:1;color:var(--steel-dim);
  transition:color .4s linear;
}
.spine__num{color:var(--gold);font-size:.68rem;letter-spacing:.14em;transition:color .4s linear}
.spine__track{position:relative;width:1px;height:140px;background:var(--fog);transition:background-color .4s linear}
/* Preenchido por `scale`, não por `height`: o navegador resolve no
   compositor e a barra não força layout a cada quadro de rolagem. */
.spine__track i{
  position:absolute;inset:0;background:linear-gradient(180deg,var(--gold-lite),var(--gold-deep));
  transform-origin:top;scale:1 0;
}
.spine__label{writing-mode:vertical-rl;white-space:nowrap}
@media (min-width:1200px){.spine{display:flex}}

/* ── 7. HERO ───────────────────────────────────────────────────────
   Um retrato em baixa luz, e nada que se mova atrás do texto. A
   fotografia já sai do arquivo com o lado esquerdo escuro — é ali que
   a tipografia mora — e com o advogado à direita, o olhar na altura do
   título. O véu é só reforço para telas estreitas, onde o retrato
   avança sobre a coluna do texto.                                   */
.hero{position:relative;isolation:isolate;overflow:clip;background:var(--obsidian)}

.hero__media{position:relative;overflow:hidden;background:var(--obsidian)}
/* `object-position` é o que mantém o rosto em quadro quando a janela é
   mais larga ou mais alta que a fotografia. Os valores saem da posição
   do rosto no arquivo: 71% da largura no plano largo, centro no
   retrato em pé. */
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 10%;
}
.hero__veil{position:absolute;inset:0;pointer-events:none}
.hero__noise{
  position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

.hero__body{position:relative;z-index:2}
.hero__plate{max-width:min(900px,100%)}
.hero__logo{width:clamp(190px,min(21vw,20vh),280px);height:auto;margin-bottom:clamp(1rem,2.2vh,1.8rem)}

/* O H1 da página. Visível, curto e com a busca principal — "advogado
   criminalista em Sinop-MT" — no mesmo registro de rótulo que o site já
   usa. O slogan logo abaixo continua sendo o título de impacto, agora
   como parágrafo: o Google lê o H1, o visitante lê os dois. */
.hero__kicker{margin-bottom:clamp(.9rem,1.8vh,1.4rem)}

.hero__title{
  font-family:var(--display);font-weight:600;font-size:var(--fs-display);line-height:1;
  letter-spacing:-.035em;color:#fff;margin-bottom:clamp(1rem,2vh,1.6rem);
}
.hero__title .ln{display:block;overflow:hidden}
.hero__title .ln>span{display:block}
.hero__title em{font-style:italic;color:var(--gold-lite)}

.hero__lede{max-width:49ch;font-size:var(--fs-lede);color:var(--silver);line-height:1.62}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.4rem,2.6vh,2.2rem)}

/* Ficha técnica — barra sólida, largura total, sob o plano */
.hero__strip{
  position:relative;z-index:3;background:var(--obsidian);
  border-top:1px solid var(--fog-soft);
  padding-block:clamp(1.1rem,2.2vw,1.5rem);
}
.hero__strip-in{display:grid;gap:1.2rem}
.hero__tag{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--silver);
}
.hero__tag .dot{
  width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(201,162,39,.18);
}
.hero__meta{display:grid;gap:1.1rem}
.hero__meta dt{font-size:.56rem;line-height:1;color:var(--gold-label);margin-bottom:.35rem}
.hero__meta dd{font-size:.82rem;line-height:1.45;color:var(--steel);max-width:26ch}

/* Fica na margem direita, na altura do olho — longe da ficha técnica
   que ancora o rodapé do plano. */
.hero__scroll{
  position:absolute;right:calc(var(--gut) - .4rem);top:50%;translate:0 -50%;z-index:3;
  display:none;flex-direction:column;align-items:center;gap:.9rem;
  font-size:.56rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--silver);
  writing-mode:vertical-rl;
}
.hero__scroll:hover{color:var(--gold-lite)}
.hero__scroll-line{display:block;width:1px;height:58px;background:rgba(199,203,209,.3);overflow:hidden}
.hero__scroll-line i{display:block;width:100%;height:40%;background:var(--gold);animation:drip 2.6s var(--ease-io) infinite}
@keyframes drip{0%{translate:0 -100%}55%,100%{translate:0 250%}}

/* ── 7b. COREOGRAFIA DE ABERTURA ───────────────────────────────────
   Não há mais cortina bloqueando a página: a entrada acontece sobre
   o conteúdo já pintado, em CSS puro, e termina em ~1,4 s. Cada
   elemento tem o seu próprio gesto — a marca se revela de baixo, as
   linhas do título sobem de máscaras individuais, a ficha técnica
   entra pela lateral.                                              */
@media (prefers-reduced-motion:no-preference){
  /* O retrato assenta: parte levemente ampliado e já visível (não de
     opacidade zero, para não atrasar a pintura principal da página). */
  html.js .hero__img{animation:retratoIn 1.7s var(--ease) both}
  html.js .hero__logo{animation:brandIn 1s var(--ease-io) .1s both}
  html.js .hero__kicker{animation:softIn .9s var(--ease) .2s both}
  html.js .hero__title .ln>span{animation:lineIn 1.05s var(--ease-io) both}
  html.js .hero__title .ln:nth-child(1)>span{animation-delay:.28s}
  html.js .hero__title .ln:nth-child(2)>span{animation-delay:.37s}
  html.js .hero__title .ln:nth-child(3)>span{animation-delay:.46s}
  html.js .hero__lede   {animation:softIn .9s var(--ease) .68s both}
  html.js .hero__actions{animation:softIn .9s var(--ease) .8s both}
  html.js .hero__strip  {animation:stripIn 1s var(--ease) .92s both}
  html.js .hero__scroll {animation:softIn .9s var(--ease) 1.1s both}
}
@keyframes retratoIn{from{opacity:.45;scale:1.035} to{opacity:1;scale:1}}
@keyframes brandIn{from{opacity:0;clip-path:inset(0 0 100% 0);translate:0 12px}
                   to  {opacity:1;clip-path:inset(0 0 0 0);  translate:0 0}}
@keyframes lineIn {from{translate:0 106%} to{translate:0 0}}
@keyframes softIn {from{opacity:0;translate:0 14px} to{opacity:1;translate:0 0}}
@keyframes stripIn{from{opacity:0;translate:0 18px} to{opacity:1;translate:0 0}}

/* MOBILE — composição própria: o retrato ocupa uma faixa real no topo,
   com o rosto inteiro, em vez de virar um recorte atrás do texto. */
@media (max-width:767px){
  .hero__meta{grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
  .hero__meta>div:first-child{grid-column:1/-1}
}

/* MOBILE — a barra ganha fundo próprio e a faixa do retrato começa
   abaixo dela. A faixa é quadrada, mas nunca passa de 46% da altura da
   tela: o título precisa aparecer sem rolar. O véu só apaga a base —
   ombros e mãos se desfazem no fundo, o rosto fica intacto. */
@media (max-width:899px){
  .hero{display:grid;grid-template-rows:auto 1fr auto}
  .nav{background:rgba(10,10,12,.96);border-bottom-color:var(--fog-soft)}
  .hero__media{aspect-ratio:1/1;max-height:46vh;max-height:46svh;width:100%;margin-top:var(--nav-h)}
  .hero__veil{background:linear-gradient(180deg,rgba(10,10,12,0) 0%,rgba(10,10,12,0) 56%,rgba(10,10,12,.86) 92%,var(--obsidian) 100%)}
  .hero__body{padding:0 var(--gut) clamp(2.4rem,7vw,3.4rem);margin-top:-1.6rem}
  .hero__actions .btn{flex:1 1 15rem}
}
/* Telefone deitado: entra o plano largo (o <picture> troca o arquivo),
   numa faixa baixa. O enquadramento desce para pegar o rosto. */
@media (max-width:899px) and (orientation:landscape){
  .hero__media{aspect-ratio:auto;height:62vh;height:62svh;max-height:none}
  .hero__img{object-position:50% 18%}
}

/* DESKTOP — plano cheio, texto ancorado embaixo à esquerda.
   O arquivo já é escuro onde o texto fica; os três degradês são
   reforço: topo (para a barra de navegação), base (para o retrato
   entrar na ficha técnica sem degrau) e esquerda (para janelas
   estreitas, em que o retrato avança sobre a coluna do texto). */
@media (min-width:900px){
  .hero{min-height:100svh;display:flex;flex-direction:column}
  .hero__media{position:absolute;inset:0;z-index:-1}
  .hero__img{object-position:72% 28%}
  .hero__veil{
    background:
      linear-gradient(180deg,rgba(10,10,12,.5) 0%,rgba(10,10,12,0) 15%),
      linear-gradient(0deg,rgba(10,10,12,.92) 0%,rgba(10,10,12,0) 22%),
      linear-gradient(90deg,rgba(10,10,12,.84) 0%,rgba(10,10,12,.62) 26%,rgba(10,10,12,0) 56%);
  }
  .hero__plate{max-width:min(620px,100%)}
  .hero__body{
    flex:1;display:flex;align-items:flex-end;
    width:100%;max-width:var(--max);margin-inline:auto;
    padding:clamp(6.5rem,11vh,8.5rem) var(--gut) clamp(2.6rem,5vh,4rem);
  }
  .hero__strip-in{
    display:grid;grid-template-columns:auto 1fr;align-items:center;
    gap:clamp(1.5rem,4vw,3.5rem);
  }
  .hero__meta{grid-template-columns:repeat(3,auto);justify-content:end;gap:clamp(1.4rem,3.5vw,3rem)}
  .hero__scroll{display:flex}
}

/* Notebooks de tela baixa (1366×768 e afins): sem este ajuste a ficha
   técnica ficava ~22 px abaixo da dobra e o `100svh` do hero deixava
   de ser verdade. */
@media (min-width:900px) and (max-height:780px){
  .hero__body{padding-top:clamp(5rem,9vh,6.5rem);padding-bottom:clamp(1.6rem,3vh,2.4rem)}
  .hero__logo{width:clamp(150px,min(18vw,17vh),220px);margin-bottom:clamp(.7rem,1.6vh,1.2rem)}
  .hero__lede{font-size:1rem;line-height:1.55}
  .hero__actions{margin-top:clamp(1rem,2vh,1.6rem)}
  .hero__strip{padding-block:clamp(.9rem,1.6vw,1.2rem)}
}
/* Monitores ultralargos: a fotografia é cortada em cima e embaixo. O
   enquadramento sobe para o cabelo não entrar sob a barra de navegação. */
@media (min-width:900px) and (min-aspect-ratio:2/1){
  .hero__img{object-position:72% 13%}
}
/* Janelas quase quadradas ou em pé (tablet deitado estreito, janela
   reduzida): a fotografia é cortada nas laterais. O corte passa para o
   ombro direito e o rosto se afasta da coluna do texto. */
@media (min-width:900px) and (max-aspect-ratio:5/4){
  .hero__img{object-position:62% 28%}
}

/* ── 10. SOBRE — mantida (DARK + SILVER) ───────────────────────── */
.sobre{background:var(--slate);padding-block:var(--sec-y);position:relative;overflow:clip}
.sobre::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 55% at 88% 6%,rgba(199,203,209,.063),transparent 60%),
    radial-gradient(70% 45% at 6% 96%,rgba(201,162,39,.04),transparent 62%);
}
.sobre__wrap{position:relative;display:grid;gap:clamp(2.5rem,6vw,4.5rem)}
.sobre .dataset,.sobre .dataset li{border-color:rgba(199,203,209,.15)}
.sobre__figure figcaption .rule{background:var(--steel-dim)}

.sobre__figure{position:relative}
.sobre__mask{position:relative;overflow:hidden;background:var(--obsidian)}
.sobre__mask img{width:100%;height:auto;object-fit:cover}
.sobre__mask::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(199,203,209,.14);
  background:linear-gradient(180deg,transparent 55%,rgba(10,10,12,.55));
}
.sobre__figure figcaption{
  margin-top:1rem;display:flex;align-items:center;
  font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-dim);
}

.sobre__body .eyebrow{margin-bottom:1.6rem}
.sobre__title{
  font-family:var(--display);font-weight:600;font-size:clamp(1.75rem,3.7vw,3.05rem);line-height:1.1;
  letter-spacing:-.03em;color:var(--platinum);margin-bottom:clamp(2rem,4vw,3rem);
}
.sobre__title em{font-style:italic;color:var(--silver)}

.sobre__cols{display:grid;gap:2.4rem}
.sobre__col h3{font-size:.66rem;line-height:1;color:var(--gold-label);margin-bottom:1.1rem}
.sobre__col h3.mt{margin-top:2.2rem}
.sobre__col p{color:var(--silver);margin-bottom:1rem;max-width:44ch}
.sobre__col p:last-child{margin-bottom:0}

.dataset{display:grid;gap:0;border-top:1px solid var(--fog-soft)}
.dataset li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--fog-soft)}
.dataset span{font-size:.85rem;color:var(--steel)}
.dataset b{font-weight:400;text-align:right}

.sobre__quote{margin-top:clamp(2.5rem,5vw,3.6rem);padding-left:clamp(1.2rem,2.5vw,2rem);border-left:1px solid var(--gold-deep)}
.sobre__quote p{
  font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,2.4vw,1.8rem);line-height:1.3;letter-spacing:-.02em;
  color:var(--platinum);
}
.sobre__quote em{font-style:italic;color:var(--gold-lite)}
.sobre__quote cite{
  display:block;margin-top:1.1rem;font-size:.66rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel-dim);font-style:normal;
}

@media (min-width:900px){
  .sobre__wrap{grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);align-items:start}
  .sobre__figure{position:sticky;top:clamp(6rem,14vh,9rem)}
}
@media (min-width:1200px){
  .sobre__cols{grid-template-columns:1fr 1fr;gap:clamp(1.8rem,3.4vw,3rem)}
}

/* ── 11. ÁREAS — lista editorial assimétrica ───────────────────── */
.areas{
  background:
    radial-gradient(85% 50% at 100% 0%,rgba(199,203,209,.05),transparent 58%),
    radial-gradient(60% 40% at 0% 100%,rgba(201,162,39,.035),transparent 60%),
    linear-gradient(180deg,var(--graphite),var(--slate));
  padding-block:var(--sec-y);position:relative;overflow:clip;
}
/* Marca d'água ao fundo: o escudo em escala grande, quase invisível. */
.areas::after{
  content:"";position:absolute;right:-7%;top:12%;z-index:0;pointer-events:none;
  width:min(46vw,560px);aspect-ratio:400/420;opacity:.035;
  background:url("../assets/logo/mark.webp") center/contain no-repeat;
}
.areas .wrap{position:relative;z-index:1}

.areas__head{display:grid;gap:1.4rem;margin-bottom:clamp(2.2rem,4.5vw,3.4rem)}
.areas__title{
  font-family:var(--display);font-weight:600;font-size:var(--fs-h2);line-height:1.04;
  letter-spacing:-.03em;color:var(--platinum);
}
.areas__title em{font-style:italic;color:var(--gold-lite)}
.areas__intro{max-width:50ch;color:var(--steel);font-size:var(--fs-lede)}
@media (min-width:1024px){
  .areas__head{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);align-items:end;column-gap:clamp(2rem,5vw,4.5rem)}
  .areas__head .eyebrow{grid-column:1;grid-row:1}
  .areas__title{grid-column:1;grid-row:2}
  .areas__intro{grid-column:2;grid-row:2;padding-bottom:.4rem}
}

/* Instrução de uso, acima da lista. Uma frase para mouse, outra para
   toque — nunca as duas. */
.frentes__dica{
  display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;
  font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-dim);
}
.frentes__dica::before{content:"";width:18px;height:1px;background:var(--gold-deep);flex:0 0 auto}
.frentes__dica .so-mouse{display:none}
@media (hover:hover) and (pointer:fine){
  .frentes__dica .so-mouse{display:inline}
  .frentes__dica .so-toque{display:none}
}
html:not(.js) .frentes__dica{display:none}

/* Índice navegável, no lugar de oito blocos de texto abertos.
   No computador: passar o mouse (ou navegar por teclado) em cada frente
   troca a descrição num painel ao lado — explorar sem clicar.
   No telefone, onde não existe ponteiro: toca e a descrição desce.
   Todas as oito descrições continuam no HTML, para o Google ler. */
.frentes{display:grid;gap:0;border-top:1px solid var(--fog-soft);position:relative}
/* O item NÃO pode virar bloco de referência: no computador o painel é
   posicionado em relação à LISTA inteira, na coluna reservada à
   direita. Bloco de referência não nasce só de `position` — nasce
   também de transform, translate, scale, rotate, filter, perspective,
   contain e will-change. Foi o `translate:0 0` da revelação
   ([data-rv].in), aplicado ao <li> depois de rolar a página, que fez o
   painel voltar a cair sobre os títulos mesmo com `position` removido.
   As propriedades abaixo travam isso de vez: se alguém um dia puser
   uma animação no item, ela simplesmente não pega. O filete dourado é
   um fundo que cresce em largura, não um ::before posicionado. */
.frente{
  position:static !important;
  transform:none !important;translate:none !important;scale:none !important;rotate:none !important;
  filter:none !important;perspective:none !important;contain:none !important;will-change:auto !important;
  border-bottom:1px solid var(--fog-soft);
  background-image:linear-gradient(90deg,var(--gold),var(--gold-deep));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .55s var(--ease-io);
}
.frente.is-on,.frente:hover,.frente:focus-within{background-size:100% 1px}

.frente__q{margin:0}
.frente__btn{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:clamp(.9rem,2.4vw,1.8rem);padding:clamp(1rem,1.9vw,1.4rem) 0;text-align:left;
}
.frente__num{
  font-family:var(--sans);font-weight:500;font-size:.62rem;letter-spacing:.24em;
  font-variant-numeric:tabular-nums;color:var(--gold-label);transition:color .3s;
}
.frente.is-on .frente__num,.frente__btn:hover .frente__num{color:var(--gold)}
.frente__nome{
  font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.85vw,1.5rem);
  line-height:1.2;letter-spacing:-.025em;color:var(--silver);
  transition:color .35s var(--ease),translate .4s var(--ease);
}
.frente.is-on .frente__nome,.frente__btn:hover .frente__nome{color:var(--platinum)}
.frente.is-on .frente__nome{translate:6px 0}

/* Seta: aponta para baixo no telefone (abre), para a direita no
   computador (leva o olho ao painel ao lado). */
.frente__seta{
  position:relative;width:12px;height:12px;align-self:center;
  border-right:1px solid var(--steel);border-bottom:1px solid var(--steel);
  rotate:45deg;transition:rotate .4s var(--ease-io),border-color .3s,translate .4s var(--ease);
}
.frente.is-on .frente__seta{border-color:var(--gold);rotate:225deg}

/* Etiqueta "Vídeo" ao lado do nome: avisa, antes de qualquer gesto,
   que aquela frente tem algo a mais para mostrar. */
.frente__tag{
  display:inline-flex;align-items:center;gap:.4rem;vertical-align:middle;
  margin-left:.7rem;padding:.28rem .55rem .26rem;
  border:1px solid var(--gold-deep);border-radius:2px;
  font-family:var(--sans);font-size:.56rem;font-weight:500;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lite);
  position:relative;top:-.12em;white-space:nowrap;
}
.frente__tag svg{width:7px;height:7px;flex:0 0 auto}

/* Acordeão (telefone). O conteúdo de um painel fechado fica com
   `visibility:hidden`: além de não aparecer, sai da ordem do teclado e
   do leitor de tela — sem isso, os botões do vídeo receberiam foco
   dentro de um painel recolhido. O texto continua no HTML. */
.frente__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-io)}
.frente.is-on .frente__panel{grid-template-rows:1fr}
.frente__panel>div{overflow:hidden;visibility:hidden;transition:visibility 0s linear .5s}
.frente.is-on .frente__panel>div{visibility:visible;transition-delay:0s}
.frente__panel p,.frente__panel .clipe{
  opacity:0;translate:0 6px;transition:opacity .4s var(--ease),translate .45s var(--ease);
}
.frente__panel p{color:var(--steel);max-width:62ch;padding-bottom:clamp(1rem,2vw,1.4rem)}
.frente.is-on .frente__panel p,.frente.is-on .frente__panel .clipe{opacity:1;translate:0 0;transition-delay:.1s}
.frente.is-on .frente__panel .clipe{transition-delay:.18s}

html:not(.js) .frente__panel{grid-template-rows:1fr}
html:not(.js) .frente__panel>div{visibility:visible}
html:not(.js) .frente__panel p,html:not(.js) .frente__panel .clipe{opacity:1;translate:0}
html:not(.js) .frente__seta{display:none}

@media (min-width:900px){
  /* A coluna da direita é reservada ao painel; os painéis se empilham
     no mesmo ponto e só o ativo aparece. A altura da lista não muda ao
     trocar de frente — nada salta sob o ponteiro. A altura mínima da
     lista é medida pelo JS: a do painel mais alto (o do Júri, por
     causa do vídeo), para que nenhum painel passe do fim da seção. */
  .frentes{padding-right:calc(42% + clamp(1.5rem,3.5vw,3.5rem))}
  .frente__panel{
    position:absolute;top:0;right:0;width:42%;display:block;
    padding:1.6rem 0 1.6rem clamp(1.2rem,2vw,1.8rem);
    border-left:1px solid var(--gold-deep);
    opacity:0;visibility:hidden;translate:0 10px;
    transition:opacity .4s var(--ease),translate .45s var(--ease),visibility .4s;
  }
  .frente__panel>div{overflow:visible;visibility:inherit;transition:none}
  .frente__panel p,.frente__panel .clipe{opacity:1;translate:0;transition:none}
  .frente__panel p{padding-bottom:0;font-size:1.02rem}
  .frente.is-on .frente__panel{opacity:1;visibility:visible;translate:0 0}
  .frente__seta{rotate:-45deg}
  .frente.is-on .frente__seta{rotate:-45deg;translate:4px 0}
}

/* ── 11b. VÍDEOS DAS FRENTES ───────────────────────────────────────
   Recorte 3:4 de vídeos verticais (9:16): a janela mostra 75% da
   altura do quadro. Onde ela começa é medido vídeo a vídeo e informado
   em `--foco` no HTML — cada gravação tem o rosto, a legenda gravada
   na imagem e, às vezes, um cartão com a pergunta em alturas
   diferentes. Exemplo, Tribunal do Júri: o cabelo começa a ~6% e a
   legenda fica a ~73%; `--foco:12.5%` recorta de 3% a 78%. Em tela
   cheia o quadro volta inteiro.
   Controles próprios, todos <button> e <input> de verdade: teclado e
   leitor de tela funcionam sem truque. Nada aqui anima por conta
   própria — só o vídeo, e só depois de um gesto do visitante.       */
.clipe{margin:0;display:grid;gap:.9rem;max-width:22rem}
.clipe__tela{
  --fr:0;
  position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--graphite);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.16);
}
.clipe__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% var(--foco,12.5%);cursor:pointer;background:#08080A;
}
/* Moldura dourada e uma sombra leve no topo (chão para o aviso de som). */
.clipe__tela::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.2);
  background:linear-gradient(180deg,rgba(8,8,10,.4) 0%,rgba(8,8,10,0) 20%);
  opacity:0;transition:opacity .3s linear;
}
.clipe.is-js .clipe__tela::after{opacity:1}
/* Fio de progresso: enquanto o vídeo toca e a barra de controles está
   recolhida, ele é tudo o que fica sobre a imagem — 2 px na base, sem
   encostar na legenda. Cresce por `scale`, no compositor. */
.clipe__tela::before{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;height:2px;pointer-events:none;
  background:var(--gold);transform-origin:left;scale:var(--fr) 1;
  opacity:0;transition:opacity .3s linear;
}
.clipe.is-playing:not(.is-ativo) .clipe__tela::before{opacity:1}

/* Play central: aparece enquanto o vídeo está parado. */
.clipe__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:rgba(10,10,12,.62);border:1px solid var(--gold);color:var(--gold-lite);
  transition:opacity .3s var(--ease),scale .3s var(--ease),background-color .3s,color .3s;
}
.clipe__play svg{width:26px;height:26px;translate:2px 0}
.clipe__play:hover,.clipe__play:focus-visible{background:var(--gold);color:#0A0A0A;scale:1.06}
.clipe.is-playing .clipe__play{opacity:0;scale:.8;pointer-events:none;visibility:hidden}

/* Aviso de som: o vídeo começa mudo (é a única forma que os
   navegadores permitem sem clique). O aviso é o convite para ouvir. */
.clipe__som-aviso{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .7rem;
  background:rgba(10,10,12,.72);border:1px solid var(--gold-deep);color:var(--gold-lite);
  font-size:.6rem;font-weight:500;line-height:1;letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .3s,color .3s,border-color .3s;
}
.clipe__som-aviso svg{width:15px;height:15px;flex:0 0 auto}
.clipe__som-aviso:hover,.clipe__som-aviso:focus-visible{background:var(--gold);color:#0A0A0A;border-color:var(--gold)}
.clipe:not(.is-playing) .clipe__som-aviso,.clipe:not(.is-muted) .clipe__som-aviso{display:none}

/* Barra de controles. Parado, fica à mostra. Tocando, recolhe depois de
   alguns segundos para não cobrir a legenda, e volta quando o ponteiro
   passa pelo vídeo, quando um controle recebe foco ou num toque. */
.clipe__barra{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:.35rem;padding:1.6rem .5rem .45rem;
  background:linear-gradient(0deg,rgba(8,8,10,.9) 0%,rgba(8,8,10,.62) 55%,rgba(8,8,10,0) 100%);
  transition:opacity .3s var(--ease);
}
/* Recolhida por opacidade, não por `visibility`: os botões continuam
   alcançáveis pelo Tab, e ao receber foco a barra reaparece. */
.clipe.is-playing:not(.is-ativo) .clipe__barra{opacity:0;pointer-events:none}
.clipe .clipe__barra:focus-within{opacity:1;pointer-events:auto}
/* `hidden` precisa vencer o display:flex / grid / inline-flex acima. */
.clipe__barra[hidden],.clipe__play[hidden],.clipe__som-aviso[hidden],.clipe__btn[hidden]{display:none}
.clipe__btn{
  display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:2px;
  color:var(--platinum);transition:color .25s,background-color .25s;
}
.clipe__btn svg{width:20px;height:20px}
.clipe__btn:hover,.clipe__btn:focus-visible{color:var(--gold-lite);background:rgba(239,240,242,.1)}
.clipe__pp .ic-pause,.clipe.is-playing .clipe__pp .ic-play{display:none}
.clipe.is-playing .clipe__pp .ic-pause{display:block}
.clipe__som .ic-som,.clipe.is-muted .clipe__som .ic-mudo{display:block}
.clipe__som .ic-mudo,.clipe.is-muted .clipe__som .ic-som{display:none}
.clipe__tempo{
  flex:0 0 auto;min-width:2.4em;text-align:right;
  font-size:.68rem;font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--silver);
}

/* Linha do tempo: um <input type="range"> de verdade, redesenhado. A
   parte já vista é pintada pela variável --p, que o JS atualiza. */
.clipe__pos{
  --p:0%;
  flex:1 1 auto;min-width:0;height:36px;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;
}
.clipe__pos::-webkit-slider-runnable-track{
  height:2px;border-radius:0;
  background:linear-gradient(90deg,var(--gold) var(--p),rgba(239,240,242,.32) var(--p));
}
.clipe__pos::-moz-range-track{height:2px;background:rgba(239,240,242,.32)}
.clipe__pos::-moz-range-progress{height:2px;background:var(--gold)}
.clipe__pos::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:11px;height:11px;margin-top:-4.5px;
  border-radius:50%;background:var(--gold-lite);border:0;
}
.clipe__pos::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--gold-lite);border:0}
.clipe__pos:focus-visible{outline:1px solid var(--gold);outline-offset:0}

/* Tela cheia: o quadro vertical volta inteiro, centralizado. */
.clipe__tela:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;background:#000}
.clipe__tela:fullscreen .clipe__video{object-fit:contain}
.clipe__tela:fullscreen .clipe__barra{padding:2.4rem 1rem 1rem;gap:.6rem}
.clipe__tela:fullscreen .clipe__btn{width:44px;height:44px}

.clipe__legenda{display:grid;gap:.45rem;align-content:start}
.clipe__rotulo{
  display:flex;align-items:center;gap:.6rem;
  font-size:.58rem;font-weight:500;line-height:1;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-label);
}
.clipe__rotulo::before{content:"";width:16px;height:1px;background:var(--gold-deep);flex:0 0 auto}
.clipe__rotulo span{white-space:nowrap}
.clipe__dur::before{content:"·";margin-right:.6rem}
.clipe__legenda strong{
  font-family:var(--display);font-weight:600;font-size:1.02rem;line-height:1.25;letter-spacing:-.018em;color:var(--platinum);
}
.clipe__txt{font-size:.86rem;line-height:1.55;color:var(--steel)}

/* Telefone: alvos de toque de 44 px e vídeo na largura do painel. */
@media (max-width:899px){
  .clipe{margin-bottom:clamp(1.2rem,4vw,1.8rem)}
  .clipe__btn{width:44px;height:44px}
  .clipe__pos{height:44px}
}
/* Computador: o vídeo entra abaixo do texto do painel, com a legenda ao
   lado, alinhada à base. Em painel estreito (900–1279 px) a legenda
   fica só com rótulo e título — a frase explicativa volta quando há
   largura para ela não virar uma coluna de uma palavra por linha. */
@media (min-width:900px){
  .clipe{
    margin-top:1.3rem;max-width:none;align-items:end;
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:1rem;
  }
  .clipe__legenda strong{font-size:.92rem}
  .clipe__txt{display:none}
  /* Coluna estreita: rótulo e duração em duas linhas, sem filete. */
  .clipe__rotulo{display:grid;gap:.4rem}
  .clipe__rotulo::before,.clipe__dur::before{content:none}
}
@media (min-width:1280px){
  .clipe{grid-template-columns:minmax(0,18rem) minmax(0,1fr);column-gap:1.3rem}
  .clipe__legenda{padding-bottom:.3rem}
  .clipe__legenda strong{font-size:1.02rem}
  .clipe__txt{display:block}
  .clipe__rotulo{display:flex;gap:.6rem}
  .clipe__rotulo::before{content:""}
  .clipe__dur::before{content:"·"}
}
/* ── 12. MÉTODO — percurso ─────────────────────────────────────── */
.metodo{
  background:
    radial-gradient(70% 45% at 50% 0%,rgba(201,162,39,.042),transparent 62%),
    linear-gradient(180deg,var(--slate),var(--graphite) 55%,var(--obsidian));
  padding-block:var(--sec-y);overflow:clip;position:relative;
}
.metodo__head{display:grid;gap:1.4rem;margin-bottom:clamp(3rem,6vw,5rem)}
.metodo__title{
  font-family:var(--display);font-weight:600;font-size:var(--fs-h2);line-height:1.04;
  letter-spacing:-.03em;color:var(--platinum);
}
.metodo__title em{font-style:italic;color:var(--silver)}
.metodo__intro{max-width:46ch;color:var(--steel);font-size:var(--fs-lede)}
@media (min-width:1024px){
  .metodo__head{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);align-items:end;column-gap:clamp(2rem,5vw,4.5rem)}
  .metodo__head .eyebrow{grid-column:1;grid-row:1}
  .metodo__title{grid-column:1;grid-row:2}
  .metodo__intro{grid-column:2;grid-row:2;padding-bottom:.4rem}
}

.percurso{position:relative;display:grid;gap:0}
.percurso::before{
  content:"";position:absolute;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-deep));
  left:0;top:0;width:100%;height:1px;
}
.etapa{position:relative;padding:1.9rem 0 1.7rem;border-bottom:1px solid var(--fog-soft)}
.etapa:last-child{border-bottom:0}
.etapa__mark{
  position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--gold);
  rotate:45deg;translate:0 0;
}
.etapa__num{display:block;font-size:.62rem;color:var(--gold-label);margin-bottom:.8rem}
.etapa h3{
  font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.1vw,1.55rem);line-height:1.18;letter-spacing:-.022em;
  color:var(--platinum);margin-bottom:.65rem;
}
.etapa p{color:var(--steel);max-width:54ch}

/* Desktop: as cinco etapas viram um percurso horizontal sob um fio
   único de ouro — gesto diferente da lista de áreas. */
@media (min-width:900px){
  .percurso{grid-template-columns:repeat(5,1fr);column-gap:clamp(1.2rem,2.5vw,2.4rem);padding-top:2.4rem}
  .etapa{padding:0;border-bottom:0}
  .etapa__mark{top:-2.4rem}
  .etapa p{max-width:none;font-size:.9rem}
  .etapa h3{min-height:2.4em}
}

.metodo__nota{
  margin-top:clamp(2.8rem,5vw,4rem);max-width:60ch;
  font-size:.9rem;color:var(--steel-dim);display:flex;align-items:flex-start;
}
.metodo__nota .rule{margin-top:.7rem}

/* ── 12a. ATMOSFERA ────────────────────────────────────────────────
   Superfícies chapadas em preto parecem mortas e achatam a leitura.
   A profundidade vem de três camadas baratas, todas estáticas:
   1. uma textura de filme sobre a página inteira (`.ambiente`);
   2. poças de luz por seção — degradês radiais de baixíssima opacidade
      que sugerem uma fonte de luz fora de quadro;
   3. uma escada de tom entre seções vizinhas, para nenhuma encostar na
      outra com exatamente a mesma cor.
   Nada aqui anima, desfoca ou mistura camadas.                      */
.ambiente{
  position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
html.lite .ambiente{display:none}

/* Uma linha de prata quase invisível separa seções vizinhas. */
main > section + section{border-top:1px solid rgba(199,203,209,.06)}

/* ── O BRASÃO COMO ASSINATURA ──────────────────────────────────────
   O escudo LS aparece em três registros diferentes, sempre discreto:
   marca d'água gigante ao fundo, ornamento que separa seções e selo
   pequeno junto de blocos de destaque. Todos usam `mark.webp`, o mesmo
   arquivo de 22 KB que a barra de navegação já baixou — nenhuma
   requisição a mais, e nenhum deles anima. */
.brasao-fundo{
  position:absolute;pointer-events:none;z-index:0;
  background:url("../assets/logo/mark.webp") center/contain no-repeat;
  aspect-ratio:400/420;
}
.selo{
  display:block;width:clamp(26px,3vw,34px);aspect-ratio:400/420;
  background:url("../assets/logo/mark.webp") center/contain no-repeat;
  opacity:.75;
}

/* Ornamento entre seções: um filete que se abre para o escudo no meio. */
.divisa{
  display:flex;align-items:center;justify-content:center;gap:clamp(.9rem,2vw,1.4rem);
  padding-block:clamp(1.6rem,3vw,2.4rem);
}
.divisa::before,.divisa::after{
  content:"";height:1px;flex:1 1 auto;max-width:min(26vw,220px);
}
.divisa::before{background:linear-gradient(90deg,transparent,var(--gold-deep))}
.divisa::after{background:linear-gradient(90deg,var(--gold-deep),transparent)}
.divisa .selo{opacity:.55;width:clamp(22px,2.4vw,28px)}

/* ── 12b. CÍRCULO DO MOUSE ─────────────────────────────────────────
   O cursor da v1 pesava por dois motivos: mix-blend-mode (uma mistura
   de camadas por quadro) e um requestAnimationFrame que nunca parava.
   Este não tem nenhum dos dois: é um anel com borda, movido só por
   transform, e o JS para o laço assim que o anel alcança o mouse.
   Ao clicar ele fecha (encolhe e fica dourado); ao soltar, reabre.   */
.cursor{
  position:fixed;top:0;left:0;z-index:950;pointer-events:none;
  width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  border:1px solid rgba(199,203,209,.75);
  opacity:0;
  /* `translate` fica fora da transição de propósito: quem move o anel é
     o JS, quadro a quadro; uma transição por cima atrasaria o anel. */
  transition:opacity .2s linear,scale .18s var(--ease),border-color .2s linear,background-color .2s linear;
}
html.cursor-on .cursor{opacity:1}
.cursor.is-hot{scale:1.6;border-color:var(--gold-lite)}
.cursor.is-down{scale:.3;border-color:var(--gold);background-color:var(--gold)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ── 13. PERGUNTAS FREQUENTES ──────────────────────────────────────
   Seção em eixo central: cabeçalho centralizado e a lista de perguntas
   numa coluna de leitura no meio da página — conversa com o escudo
   centralizado que abre a seção (.divisa). Dentro da lista, perguntas e
   respostas seguem alinhadas à esquerda: texto corrido centralizado
   cansa a leitura. A poça de luz também foi para o centro.          */
.faq{
  background:
    radial-gradient(70% 45% at 50% 0%,rgba(199,203,209,.05),transparent 62%),
    linear-gradient(180deg,var(--obsidian),var(--slate));
  padding-block:var(--sec-y);position:relative;
  overflow:clip;
}
.faq::after{
  content:"";position:absolute;right:-6%;bottom:6%;z-index:0;pointer-events:none;
  width:min(34vw,380px);aspect-ratio:400/420;opacity:.03;
  background:url("../assets/logo/mark.webp") center/contain no-repeat;
}
.faq .wrap{position:relative;z-index:1}
.faq__head{
  display:grid;gap:1.4rem;justify-items:center;text-align:center;
  max-width:58rem;margin:0 auto clamp(2.5rem,5vw,4rem);
}
/* Rótulo centralizado: o filete dourado aparece dos dois lados. */
.faq__head .eyebrow{justify-content:center}
.faq__head .eyebrow::after{content:"";width:clamp(20px,3vw,40px);height:1px;background:var(--gold-deep);flex:0 0 auto}
.faq__title{
  font-family:var(--display);font-weight:600;font-size:var(--fs-h2);line-height:1.04;
  letter-spacing:-.03em;color:var(--platinum);
}
.faq__title em{font-style:italic;color:var(--silver)}
.faq__intro{color:var(--steel);font-size:var(--fs-lede);max-width:58ch}
/* Acordeão. As respostas continuam no HTML — não são carregadas por
   clique —, então o Google lê todas; o visitante é que escolhe qual
   abrir. A altura anima por grid-template-rows (0fr → 1fr), que o
   compositor resolve sem precisar medir o texto em JavaScript. */
.faq__list{display:grid;gap:0;border-top:1px solid var(--fog-soft);max-width:82ch;margin-inline:auto}
.faq__item{position:relative;border-bottom:1px solid var(--fog-soft)}
.faq__item::before{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
  scale:0 1;transform-origin:left;transition:scale .55s var(--ease-io);
}
.faq__item:hover::before,.faq__item.is-open::before,.faq__item:focus-within::before{scale:1 1}

.faq__q{margin:0}
.faq__btn{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:clamp(.9rem,2.2vw,1.6rem);padding:clamp(1.1rem,2vw,1.5rem) 0;text-align:left;
}
.faq__num{
  font-family:var(--sans);font-weight:500;font-size:.62rem;letter-spacing:.24em;
  font-variant-numeric:tabular-nums;color:var(--gold-label);transition:color .3s;
}
.faq__item.is-open .faq__num,.faq__btn:hover .faq__num{color:var(--gold)}
.faq__txt{
  font-family:var(--display);font-weight:600;font-size:clamp(1.02rem,1.5vw,1.25rem);
  line-height:1.3;letter-spacing:-.02em;color:var(--silver);
  transition:color .3s var(--ease),translate .4s var(--ease);
}
.faq__btn:hover .faq__txt,.faq__item.is-open .faq__txt{color:var(--platinum)}
.faq__btn:hover .faq__txt{translate:4px 0}

/* Sinal de + que gira até virar − ao abrir. */
.faq__sign{position:relative;width:14px;height:14px;align-self:center;flex:0 0 auto}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:var(--steel);
  transition:transform .4s var(--ease-io),background-color .3s;
}
.faq__sign::after{transform:rotate(90deg)}
.faq__item.is-open .faq__sign::before,.faq__item.is-open .faq__sign::after{background:var(--gold)}
.faq__item.is-open .faq__sign::after{transform:rotate(0)}

.faq__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-io)}
.faq__item.is-open .faq__panel{grid-template-rows:1fr}
.faq__panel>div{overflow:hidden}
.faq__panel p{
  color:var(--steel);max-width:70ch;padding-bottom:clamp(1.2rem,2.2vw,1.7rem);
  opacity:0;translate:0 6px;transition:opacity .4s var(--ease),translate .45s var(--ease);
}
.faq__item.is-open .faq__panel p{opacity:1;translate:0 0;transition-delay:.12s}

/* Sem JavaScript, o acordeão não abriria: aí tudo fica aberto. */
html:not(.js) .faq__panel{grid-template-rows:1fr}
html:not(.js) .faq__panel p{opacity:1;translate:0}
html:not(.js) .faq__sign{display:none}

/* ── 14. CONTATO — mantida ─────────────────────────────────────── */
.contato{background:var(--obsidian);padding-block:var(--sec-y);position:relative;overflow:clip}
.contato::after{
  content:"";position:absolute;left:-8%;bottom:-6%;z-index:0;pointer-events:none;
  width:min(40vw,460px);aspect-ratio:400/420;opacity:.03;
  background:url("../assets/logo/mark.webp") center/contain no-repeat;
}
.contato__wrap{z-index:1}
.contato::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(75% 48% at 18% 0%,rgba(201,162,39,.14),transparent 62%),
    radial-gradient(60% 45% at 100% 90%,rgba(199,203,209,.042),transparent 62%);
}
.contato__wrap{position:relative;display:grid;gap:clamp(3rem,7vw,5rem)}
.contato__left .eyebrow{margin-bottom:1.6rem}
.contato__title{
  font-family:var(--display);font-weight:600;font-size:var(--fs-h2);line-height:1.04;
  letter-spacing:-.03em;color:var(--platinum);margin-bottom:1.4rem;
}
.contato__title em{font-style:italic;color:var(--gold-lite)}
.contato__lede{max-width:42ch;color:var(--steel);font-size:var(--fs-lede);margin-bottom:2.2rem}

.contato__dl{margin-top:2.8rem;display:grid;gap:0;border-top:1px solid var(--fog-soft)}
.contato__dl>div{display:grid;grid-template-columns:minmax(90px,.4fr) 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--fog-soft)}
.contato__dl dt{font-size:.58rem;line-height:1.6;color:var(--gold-label)}
.contato__dl dd{color:var(--silver);font-size:.92rem;line-height:1.55}
.contato__dl a{transition:color .3s}
.contato__dl a:hover{color:var(--gold-lite)}

.form{display:grid;gap:1.4rem;border:1px solid var(--fog-soft);padding:clamp(1.4rem,3.5vw,2.4rem);background:rgba(20,20,24,.55)}
.form__title{font-size:.66rem;line-height:1;color:var(--gold-label);margin-bottom:.3rem}
.field{position:relative;display:grid;gap:.4rem}
.field label{font-size:.78rem;letter-spacing:.04em;color:var(--steel)}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--fog);
  padding:.6rem 0;font-size:.98rem;color:var(--platinum);border-radius:0;
  transition:border-color .3s;
}
.field textarea{resize:vertical;min-height:96px}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--steel-dim) 50%),linear-gradient(135deg,var(--steel-dim) 50%,transparent 50%);background-position:calc(100% - 12px) 1.15rem,calc(100% - 7px) 1.15rem;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:1.6rem}
.field select option{background:var(--slate);color:var(--platinum)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none}
.field__line{position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);scale:0 1;transform-origin:left;transition:scale .45s var(--ease-io)}
.field:focus-within .field__line{scale:1 1}
.field__err{font-size:.72rem;line-height:1.4;color:#D98A7A;min-height:0}
.field.is-bad input,.field.is-bad textarea,.field.is-bad select{border-bottom-color:#8E4F44}

.check{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;font-size:.8rem;color:var(--steel);line-height:1.55}
.check input{width:16px;height:16px;margin-top:.22rem;accent-color:var(--gold)}
.form__status{font-size:.8rem;line-height:1.5;color:var(--gold-lite);min-height:1.2em}
.form__note{font-size:.72rem;color:var(--steel-dim);line-height:1.5}

.mapa{margin-top:1.4rem;border:1px solid var(--fog-soft);background:var(--graphite)}
/* Cores originais do Google Maps, sem filtro: o mapa existe para o
   visitante achar o escritório, e legibilidade vale mais que tom. */
.mapa__frame{display:block;width:100%;height:clamp(220px,28vw,300px);border:0}
.mapa__link{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1rem;border-top:1px solid var(--fog-soft);
  font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--silver);
  transition:color .3s,background-color .3s;
}
.mapa__link svg{width:16px;height:16px;flex:0 0 auto;transition:translate .3s var(--ease)}
.mapa__link:hover{color:var(--gold-lite);background:rgba(201,162,39,.05)}
.mapa__link:hover svg{translate:2px -2px}

@media (min-width:980px){
  .contato__wrap{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2.5rem,5vw,5rem)}
}

/* ── 15. RODAPÉ ────────────────────────────────────────────────── */
.rodape{background:#060607;border-top:1px solid var(--fog-soft)}
.rodape__wrap{display:grid;gap:clamp(2.5rem,5vw,4rem);padding-block:clamp(3rem,6vw,5rem)}
.rodape__brand img{width:clamp(190px,20vw,260px);height:auto;margin-bottom:1.2rem}
.rodape__brand p{font-size:.82rem;color:var(--steel-dim);line-height:1.6}
.rodape__nav{display:grid;gap:2.2rem}
.rodape__nav h4{font-size:.58rem;line-height:1;color:var(--gold-label);margin-bottom:1rem}
.rodape__nav a,.rodape__nav span{display:block;font-size:.85rem;color:var(--steel);padding-block:.32rem;transition:color .3s}
.rodape__nav a:hover{color:var(--gold-lite)}

.rodape__legal{border-top:1px solid var(--fog-soft);padding-block:1.6rem}
.rodape__legal p{font-size:.72rem;color:var(--steel-dim);line-height:1.6}
.rodape__disc{margin-top:.6rem;max-width:88ch;opacity:.82}

.rodape__credito{border-top:1px solid var(--fog-soft);padding-block:1.1rem}
.rodape__credito p{font-size:.68rem;letter-spacing:.06em;color:var(--steel-dim)}
.rodape__credito a{
  color:var(--silver);border-bottom:1px solid rgba(199,203,209,.25);padding-bottom:1px;
  transition:color .3s,border-color .3s;
}
.rodape__credito a:hover{color:var(--gold-lite);border-bottom-color:var(--gold-deep)}

@media (min-width:768px){
  .rodape__wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start}
  .rodape__nav{grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem)}
}

/* ── 16. WHATSAPP FLUTUANTE ────────────────────────────────────── */
.wa-float{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:80;
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--slate);color:var(--gold-lite);border:1px solid var(--fog);
  opacity:0;translate:0 14px;pointer-events:none;
  transition:opacity .4s var(--ease),translate .4s var(--ease),background-color .3s,color .3s,border-color .3s;
}
.wa-float.is-on{opacity:1;translate:0 0;pointer-events:auto}
.wa-float:hover{background:var(--gold);color:#0A0A0A;border-color:var(--gold)}
.wa-float svg{width:24px;height:24px}

/* ── 17. MODO LEVE ─────────────────────────────────────────────────
   Conexão econômica, 2G ou máquina de baixíssimo recurso: o filme
   dá lugar ao pôster e as revelações passam a ser instantâneas.   */
html.lite [data-rv]{opacity:1 !important;translate:none !important;clip-path:none !important;transition:none !important}
html.lite [data-rv="zoom"] img{scale:1 !important;transition:none !important}
html.lite [data-rv="mask"] h3 span{translate:0 !important;transition:none !important}
html.lite [data-rv="mask"] p{opacity:1 !important}
html.lite [data-rv="line"]::before{scale:1 1 !important}
html.lite .hero__scroll-line i{animation:none;height:100%}
html.lite .hero__noise{display:none}
html.lite .hero__img,html.lite .hero__logo,html.lite .hero__kicker,html.lite .hero__title .ln>span,html.lite .hero__lede,
html.lite .hero__actions,html.lite .hero__strip,html.lite .hero__scroll{animation:none}

/* ── 18. REDUÇÃO DE MOVIMENTO ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-rv]{opacity:1 !important;translate:none !important;clip-path:none !important}
  [data-rv="zoom"] img{scale:1 !important}
  [data-rv="mask"] h3 span{translate:0 !important}
  [data-rv="mask"] p{opacity:1 !important}
  [data-rv="line"]::before{scale:1 1 !important}
  .hero__scroll-line i{animation:none;height:100%}
  .hero__noise{display:none}
}

/* ── 19. AJUSTES FINOS ─────────────────────────────────────────── */
@media (max-width:520px){
  .dataset li{flex-direction:column;align-items:flex-start;gap:.15rem}
  .dataset b{text-align:left}
}

@media (max-width:420px){
  :root{--gut:1.15rem}
  .hero__logo{width:min(210px,60vw)}
  .btn{padding:.86rem 1.15rem;font-size:.7rem;letter-spacing:.08em}
  .hero__actions{gap:.6rem}
  .hero__actions .btn{flex:1 1 100%}
  .contato__dl>div{grid-template-columns:1fr;gap:.3rem}
  .hero__meta dd{max-width:none}
}