/* ============================================================
   MES Advogados — folha compartilhada pelas DUAS landing pages
   (direito-imobiliario/ e credito-rural/). As duas são a mesma
   marca: qualquer mudança aqui vale para as duas.

   Paleta e tipografia extraídas do manual da marca (logotipo
   oficial: #192847 / #ece3d2 / #868887) e das peças de novembro
   (dourado #c5a852). Serifada nos títulos, sans no corpo.

   Contraste: todos os pares texto/fundo usados aqui foram
   medidos e passam WCAG AA (4.5 texto normal, 3.0 texto grande).
   Por isso existem --gold-ink e --grey-dim: o dourado da marca
   reprova sobre fundo claro (2.10) e o cinza da marca reprova
   sobre o navy (4.10). Não troque por --gold / --grey nesses usos.
   ============================================================ */
:root{
  --navy:#192847;
  --navy-deep:#0d1527;
  --ink:#070c17;
  --gold:#c5a852;        /* dourado da marca: só sobre fundo escuro */
  --gold-ink:#7d6228;    /* dourado legível sobre papel/creme (AA) */
  --gold-soft:#d8c48a;
  --cream:#ece3d2;
  --cream-dim:#ded3bd;
  --grey:#868887;        /* cinza da marca: só sobre o ink do rodapé */
  --grey-dim:#9aa09d;    /* cinza legível sobre o navy (AA) */
  --paper:#f7f4ee;
  --line-dark:rgba(236,227,210,.20);
  --line-light:rgba(25,40,71,.16);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gutter:clamp(20px,5vw,64px);
  --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--navy);color:var(--cream);
  font:400 clamp(16px,1.05vw,17px)/1.65 var(--sans);
  letter-spacing:.005em;overflow-x:hidden;
}
/* height:auto não é enfeite: sem ele, o atributo height="" do HTML vale como
   altura definitiva e o aspect-ratio das regras abaixo é simplesmente
   ignorado — era por isso que o retrato saía com 1344 px de altura no
   celular, cortado num talho vertical do rosto (print do André, 13/11). */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;line-height:1.1}
p{margin:0}
::selection{background:var(--gold);color:var(--ink)}

.wrap{width:min(100% - calc(var(--gutter) * 2),var(--maxw));margin-inline:auto}

/* pula para o conteúdo: fora da tela, mas sem jogar a caixa para -9999px */
.skip{
  position:absolute;top:12px;left:12px;z-index:100;
  display:inline-flex;align-items:center;min-height:44px;
  background:var(--gold);color:var(--ink);padding:12px 20px;text-decoration:none;
  font:500 .8125rem/1 var(--sans);
  clip-path:inset(50%);white-space:nowrap;
}
.skip:focus{clip-path:none}

/* ---------- eyebrow / rótulo editorial ---------- */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font:500 .6875rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:28px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.eyebrow .num{font-variant-numeric:tabular-nums;opacity:.85}

/* ---------- losango: motivo do logotipo ---------- */
.diamond{width:7px;height:7px;background:currentColor;transform:rotate(45deg);flex:none}
.dot-gold{color:var(--gold)}
.dot-grey{color:var(--grey-dim)}

/* ---------- cabeçalho ---------- */
header{
  position:fixed;inset:0 0 auto;z-index:60;
  padding:18px 0;transition:background .4s ease,padding .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
header[data-stuck]{background:rgba(13,21,39,.92);backdrop-filter:blur(14px);padding:12px 0;border-bottom-color:var(--line-dark)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--cream);min-height:44px}
.brand img{width:104px;height:auto}
.brand .oab{
  font:500 .625rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);padding-left:14px;border-left:1px solid var(--line-dark);
}
@media (max-width:720px){.brand .oab{display:none}}
@media (max-width:560px){
  header .btn{padding:11px 14px;font-size:.6875rem;letter-spacing:.06em;white-space:nowrap}
  .brand img{width:86px}
}

/* ---------- botões ----------
   O preenchimento não troca de cor: ele sobe. O fundo de repouso fica no
   próprio botão (se o ::before não pintar, o botão continua legível) e o
   de hover vem no ::before, que cresce de baixo para cima por trás do texto. */
.btn{
  --bg:var(--gold);--fg:var(--ink);--bg2:var(--navy-deep);--fg2:var(--cream);--bd:var(--gold);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:14px 26px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font:500 .8125rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border-radius:1px;cursor:pointer;transition:color .35s ease,border-color .35s ease,transform .35s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--bg2);
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.btn:hover{color:var(--fg2);transform:translateY(-1px)}
.btn:hover::before{transform:scaleY(1)}
.btn--ghost{--bg:transparent;--fg:var(--cream);--bg2:var(--cream);--fg2:var(--ink);--bd:var(--line-dark)}
.btn--ghost:hover{border-color:var(--cream)}
:where(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ícone do WhatsApp dentro de botão e link (sprite <use> no topo do HTML) */
.ico{flex:none;color:currentColor}

/* ---------- trilho lateral de seções ---------- */
.rail{
  position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:50;
  display:none;flex-direction:column;gap:6px;
}
@media (min-width:1180px){.rail{display:flex}}
.rail a{
  display:flex;align-items:center;gap:10px;text-decoration:none;padding:11px 8px;min-height:44px;
  font:500 .625rem/1 var(--sans);letter-spacing:.16em;color:var(--cream);
  opacity:.62;transition:opacity .3s,color .3s;
}
.rail a::before{content:"";width:14px;height:1px;background:currentColor;transition:width .3s}
.rail a:hover,.rail a[aria-current]{opacity:1;color:var(--gold)}
.rail a[aria-current]::before{width:28px}
.rail span{font-variant-numeric:tabular-nums}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(600px,100svh,920px);display:flex;align-items:flex-end;padding:150px 0 64px;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;background:
  radial-gradient(120% 90% at 85% 8%,rgba(197,168,82,.10) 0%,transparent 55%),
  linear-gradient(180deg,var(--navy-deep) 0%,var(--navy) 55%,var(--navy) 100%)}
/* filete vertical discreto: o "papel pautado" do dossiê */
.hero__bg::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:calc((min(100vw - var(--gutter) * 2,var(--maxw))) / 6) 100%;
  background-position:center;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 35%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 35%,#000 70%,transparent);
}
.hero .wrap{position:relative;z-index:1}
.hero h1{
  font-size:clamp(2.45rem,6.6vw,5.1rem);line-height:1.03;letter-spacing:-.015em;
  max-width:16ch;margin-bottom:30px;
}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero__lead{max-width:58ch;font-size:clamp(1rem,1.35vw,1.1875rem);color:var(--cream-dim);margin-bottom:40px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:56px}
/* em tela estreita os dois botões empilham com a mesma largura: lado a lado
   com larguras diferentes eles leem como um principal e um acessório */
@media (max-width:430px){.hero__cta{display:grid;grid-template-columns:1fr}}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:12px 34px;padding-top:26px;border-top:1px solid var(--line-dark);
  font:400 .75rem/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--grey-dim);
}
.hero__meta span{display:flex;align-items:center;gap:10px}
.hero__meta span::before{content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}

/* faixa cinematográfica full-bleed entre blocos
   A imagem é maior que a faixa (124%) e sobra em cima e embaixo: é essa
   sobra que o paralaxe consome. Sem ela, deslocar a imagem mostraria o
   fundo. O deslocamento vem de --py, escrito pelo JS a cada quadro. */
.band{position:relative;margin:0;height:clamp(220px,32vw,420px);overflow:hidden;background:var(--navy-deep)}
.band img{
  position:absolute;inset:-12% 0;width:100%;height:124%;
  object-fit:cover;object-position:center 60%;
  transform:translate3d(0,var(--py,0px),0);will-change:transform;
}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,40,71,.55),rgba(25,40,71,.15) 45%,rgba(25,40,71,.75))}
.band figcaption{
  position:absolute;left:0;right:0;bottom:26px;z-index:2;
  font:500 .6875rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cream);
}
.band figcaption span{display:flex;align-items:center;gap:14px;width:min(100% - calc(var(--gutter) * 2),var(--maxw));margin-inline:auto}
.band figcaption span::after{content:"";flex:1;height:1px;background:var(--gold);opacity:.6}
/* No celular a legenda quebrava em duas linhas e espremia o filete até sumir.
   Abaixo de 620 px ela fica menor, sem filete, e o pé da faixa escurece mais
   para o texto não disputar legibilidade com o claro da foto. */
@media (max-width:620px){
  .band figcaption{bottom:18px;font-size:.625rem;letter-spacing:.13em}
  .band figcaption span::after{display:none}
  .band::after{background:linear-gradient(180deg,rgba(25,40,71,.5),rgba(25,40,71,.2) 38%,rgba(13,21,39,.9))}
}

/* ---------- blocos ---------- */
section{padding:clamp(72px,10vw,132px) 0;position:relative}
.sec--paper{background:var(--paper);color:var(--navy)}
.sec--cream{background:var(--cream);color:var(--navy)}
.sec--paper .eyebrow,.sec--cream .eyebrow{color:var(--navy);opacity:.75}
.sec--deep{background:var(--navy-deep)}
.sec__head{max-width:62ch;margin-bottom:clamp(44px,5vw,68px)}
.sec__head h2{font-size:clamp(1.85rem,4vw,3.1rem);letter-spacing:-.01em;margin-bottom:22px}
.sec__head h2 em{font-style:italic;color:var(--gold)}
.sec__head p{font-size:clamp(1rem,1.25vw,1.125rem);color:var(--cream-dim)}
.sec--paper .sec__head p,.sec--cream .sec__head p{color:#44506b}
.sec--paper .sec__head h2 em,.sec--cream .sec__head h2 em,
.sec--paper .feature h2 em,.sec--cream .feature h2 em{color:var(--gold-ink)}

/* ---------- dores: lista editorial numerada ---------- */
.pains{display:grid;gap:0;border-top:1px solid var(--line-light)}
.sec--deep .pains{border-top-color:var(--line-dark)}
.pain{
  display:grid;grid-template-columns:1fr;gap:10px;align-items:start;
  padding:28px 0;border-bottom:1px solid var(--line-light);
}
.sec--deep .pain{border-bottom-color:var(--line-dark)}
@media (min-width:820px){.pain{grid-template-columns:72px 30ch 1fr;gap:34px}}
.pain__n{font:500 .75rem/1 var(--sans);letter-spacing:.12em;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.sec--deep .pain__n{color:var(--gold)}
@media (min-width:820px){.pain__n{padding-top:7px}}
.pain h3{font-size:clamp(1.1rem,1.7vw,1.4rem)}
.pain p{color:#44506b;font-size:.9375rem}
.sec--deep .pain p{color:var(--cream-dim)}

/* ---------- frentes de atuação ---------- */
.fronts{display:grid;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
@media (min-width:760px){.fronts{grid-template-columns:repeat(2,1fr)}}
.front{background:var(--navy);padding:clamp(28px,3.4vw,42px)}
.sec--deep .front{background:var(--navy-deep)}
.front__n{font:500 .6875rem/1 var(--sans);letter-spacing:.2em;color:var(--gold);margin-bottom:20px;display:block}
.front h3{font-size:clamp(1.2rem,2vw,1.55rem);margin-bottom:14px}
.front > p{color:var(--cream-dim);font-size:.9375rem;margin-bottom:22px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tags li{
  font:400 .75rem/1 var(--sans);letter-spacing:.04em;color:var(--cream);
  padding:7px 12px;border:1px solid var(--line-dark);border-radius:1px;
}

/* ---------- destaque com imagem ---------- */
.feature{display:grid;gap:clamp(32px,4vw,64px);align-items:center}
@media (min-width:900px){.feature{grid-template-columns:1fr 1fr}}
.feature__media{position:relative}
.feature__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:1px}
.feature__media::after{
  content:"";position:absolute;inset:0;border:1px solid var(--gold);opacity:.5;
  transform:translate(14px,14px);pointer-events:none;
}
.feature h2{font-size:clamp(1.7rem,3.2vw,2.6rem);margin-bottom:22px}
.feature h2 em{font-style:italic;color:var(--gold)}
.feature p + p{margin-top:16px}
.feature p{color:var(--cream-dim)}
.sec--paper .feature p,.sec--cream .feature p{color:#44506b}
.note-light{margin-top:22px;font-size:.875rem;color:#6b6250}

/* ---------- método ---------- */
.steps{display:grid;gap:0}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
  padding:28px 0;border-top:1px solid var(--line-light);
}
.step:last-child{border-bottom:1px solid var(--line-light)}
.step__n{
  width:46px;height:46px;flex:none;display:grid;place-items:center;
  border:1px solid var(--gold-ink);color:var(--gold-ink);border-radius:50%;
  font:500 .8125rem/1 var(--sans);font-variant-numeric:tabular-nums;
}
.sec--deep .step__n{border-color:var(--gold);color:var(--gold)}
.step h3{font-size:1.125rem;margin-bottom:8px}
.step p{color:#44506b;font-size:.9375rem;max-width:62ch}

/* ---------- perfil do advogado ---------- */
.lawyer{display:grid;gap:clamp(32px,4.5vw,72px);align-items:center}
@media (min-width:900px){.lawyer{grid-template-columns:minmax(260px,.75fr) 1fr}}
.lawyer__photo{position:relative;max-width:420px}
.lawyer__photo img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:center top;filter:saturate(.92)}
.lawyer__photo::after{content:"";position:absolute;inset:0;border:1px solid var(--gold);opacity:.55;transform:translate(16px,16px)}
/* No celular o retrato em 2/3 ocupava ~530 px de altura: um rosto sozinho
   tomava dois terços da tela antes do nome aparecer. Vira um retrato de
   coluna — menor, em 4/5 — e o texto volta a abrir a seção. */
@media (max-width:719px){
  .lawyer__photo{max-width:216px}
  .lawyer__photo img{aspect-ratio:4/5}
  .lawyer__photo::after{transform:translate(11px,11px)}
}
.lawyer p{color:var(--cream-dim)}
.lawyer p + p{margin-top:14px}
.lawyer .sec__head + p,.lawyer h2 + p{margin-top:18px}
.creds{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-dark)}
.creds li{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line-dark);font-size:.9375rem;color:var(--cream-dim);
}
.creds .y{font:500 .75rem/1 var(--sans);letter-spacing:.1em;color:var(--gold);font-variant-numeric:tabular-nums;min-width:68px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-light)}
.faq details{border-bottom:1px solid var(--line-light)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:clamp(1.0625rem,1.6vw,1.3rem);line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:12px;height:12px;margin:-6px 4px 0 0;
  border-right:1px solid var(--gold-ink);border-bottom:1px solid var(--gold-ink);
  transform:rotate(45deg);transition:transform .3s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq .a{padding:0 0 26px;max-width:72ch;color:#44506b;font-size:.9375rem}
.faq .a p + p{margin-top:12px}

/* ---------- escopo (atende / não atende) ---------- */
.scope{display:grid;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
@media (min-width:820px){.scope{grid-template-columns:1fr 1fr}}
.scope > div{background:var(--navy-deep);padding:clamp(26px,3.2vw,40px)}
.scope h3{font-size:1.25rem;margin-bottom:20px;display:flex;align-items:center;gap:12px}
.scope ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.scope li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:.9375rem;color:var(--cream-dim)}
.scope li::before{content:"";width:6px;height:6px;margin-top:9px;transform:rotate(45deg);background:var(--gold)}
.scope .no li::before{background:var(--grey-dim)}
.scope__hint{margin-top:22px;font-size:.875rem;color:var(--grey-dim)}

/* ---------- contato ---------- */
.contact{display:grid;gap:clamp(36px,4vw,72px)}
@media (min-width:940px){.contact{grid-template-columns:1fr 1fr}}

/* ---------- bloco de WhatsApp (substituiu o formulário) ----------
   Decisão do André em 13/11/2026: a página não tem formulário, o contato
   é todo por WhatsApp. Os "assuntos" não coletam nada — cada um é só um
   link que abre a conversa já com a primeira linha escrita. */
.zap{border:1px solid var(--line-dark);padding:clamp(26px,3.4vw,40px);background:rgba(236,227,210,.035)}
.zap__kicker{font:500 .6875rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.zap h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:14px}
.zap__lead{color:var(--cream-dim);font-size:.9375rem;margin-bottom:26px;max-width:46ch}
.zap__ask{font:500 .6875rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim);margin-bottom:14px}
.zap__chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 28px;padding:0}
.chip{
  display:inline-flex;align-items:center;min-height:44px;padding:11px 15px;
  font:400 .8125rem/1.2 var(--sans);letter-spacing:.02em;color:var(--cream);text-decoration:none;
  border:1px solid var(--line-dark);border-radius:1px;
  transition:background .3s,border-color .3s,color .3s,transform .3s;
}
.chip:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-2px)}
.btn--zap{width:100%;--bg:var(--gold)}
.zap__note{font-size:.8125rem;color:var(--grey-dim);margin-top:20px;max-width:52ch}
.channels{margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-dark)}
.channels > div{padding:20px 0;border-bottom:1px solid var(--line-dark)}
.channels dt{font:500 .6875rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.channels dd{margin:0;font-size:1rem}
.channels a{display:inline-block;min-height:44px;padding:9px 0;text-decoration:none;border-bottom:1px solid var(--line-dark)}
.channels a:hover{border-bottom-color:var(--gold)}

/* ---------- rodapé ---------- */
footer{background:var(--ink);padding:clamp(56px,6vw,84px) 0 40px;color:var(--grey);font-size:.8125rem}
.foot__top{display:grid;gap:34px;padding-bottom:36px;border-bottom:1px solid var(--line-dark)}
@media (min-width:860px){.foot__top{grid-template-columns:1fr 1fr;align-items:start}}
.foot__top img{width:132px;height:auto;margin-bottom:20px}
.foot__legal{max-width:68ch;line-height:1.7}
.foot__legal strong{color:var(--cream-dim);font-weight:500}
.foot__legal p + p{margin-top:14px}
.foot__bottom{padding-top:28px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}

/* ---------- animação de entrada (contida) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .btn:hover,.float:hover{transform:none}
}

/* ---------- WhatsApp sempre à mão ----------
   No desktop é uma pílula flutuante. No celular era um círculo que ficava
   POR CIMA do texto (o André mandou print disso): virou uma barra de
   rodapé dentro do fluxo — o body reserva a altura dela, então não cobre
   mais nada e o canal fica explícito, que é o pedido. */
.float{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 20px;min-height:48px;
  background:var(--gold);color:var(--ink);text-decoration:none;border-radius:999px;
  font:500 .8125rem/1 var(--sans);letter-spacing:.06em;
  box-shadow:0 10px 32px rgba(7,12,23,.45);
  transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .4s,bottom .3s;
}
.float:hover{transform:translateY(-2px)}
/* escondido enquanto o herói está na tela e quando o bloco de contato chega:
   ali já existe um botão grande, e dois ao mesmo tempo leem como erro */
.js .float[data-off]{opacity:0;transform:translateY(130%);pointer-events:none}
@media (max-width:620px){
  body{padding-bottom:62px}
  .float{
    right:0;left:0;bottom:0;border-radius:0;padding:19px 20px;
    box-shadow:0 -8px 28px rgba(7,12,23,.5);
  }
  .js .float[data-off]{opacity:1;transform:none;pointer-events:auto}
}

/* ---------- aviso de cookies ---------- */
#cc{
  position:fixed;left:18px;right:18px;bottom:18px;z-index:70;max-width:540px;
  background:var(--navy-deep);border:1px solid var(--line-dark);padding:20px 22px;
  display:none;gap:14px;flex-wrap:wrap;align-items:center;font-size:.8125rem;color:var(--cream-dim);
}
#cc[data-open]{display:flex}
#cc p{flex:1 1 240px;margin:0}
#cc button{font:500 .75rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:11px 18px;min-height:44px;cursor:pointer;border-radius:1px;border:1px solid var(--line-dark);background:transparent;color:var(--cream)}
#cc button.ok{background:var(--gold);border-color:var(--gold);color:var(--ink)}
/* com o aviso aberto, a pílula flutuante sobe para não cobri-lo */
@media (min-width:621px){body:has(#cc[data-open]) .float{bottom:110px}}
/* no celular quem sobe é o aviso: a barra do WhatsApp é fixa no rodapé */
@media (max-width:620px){#cc{bottom:74px}}

/* ============================================================
   MOVIMENTO — pedido do André em 13/11/2026 ("o site está bem
   sem efeitos"), na linguagem do site da Chronos: abertura,
   texto que entra em camadas, paralaxe e microinteração.

   Três regras que valem para tudo aqui:
   1. só transform e opacity — nada que force layout a cada quadro;
   2. nada é pré-requisito para ler a página: sem JS, tudo nasce visível;
   3. prefers-reduced-motion desliga o conjunto (bloco no fim).
   ============================================================ */

/* ---------- 1 · abertura (cortina de marca) ----------
   Sai sozinha pela animação CSS mesmo que o JS não rode; o JS só
   antecipa a saída assim que o primeiro quadro é pintado. */
html:not(.js) .boot{display:none}
.boot{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--navy-deep);
  animation:boot-out .55s cubic-bezier(.22,.61,.36,1) .9s forwards;
  transition:opacity .45s ease,visibility .45s ease;
}
/* o JS cancela a animação e deixa a transição levar a cortina embora */
html[data-booted] .boot{animation:none;opacity:0;visibility:hidden;pointer-events:none}
.boot__mark{
  width:10px;height:10px;background:var(--gold);transform:rotate(45deg);
  animation:boot-pulse 1.1s ease-in-out infinite;
}
.boot__rule{
  position:absolute;left:50%;bottom:clamp(60px,14vh,140px);translate:-50% 0;
  width:min(180px,40vw);height:1px;background:var(--line-dark);overflow:hidden;
}
.boot__rule::after{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform-origin:0 50%;animation:boot-fill 1.25s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes boot-out{to{opacity:0;visibility:hidden}}
@keyframes boot-pulse{0%,100%{opacity:1;scale:1}50%{opacity:.45;scale:.72}}
@keyframes boot-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 2 · régua de progresso da leitura ---------- */
.prog{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:80;
  background:var(--gold);transform:scaleX(var(--p,0));transform-origin:0 50%;
}

/* ---------- 3 · texto que entra palavra a palavra ----------
   O JS envolve cada palavra num <span class="w">. Enquanto não envolve,
   não existe .w na página e o título aparece normalmente. */
h1 .w,h2 .w{
  display:inline-block;opacity:0;transform:translateY(.42em);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);
}
h1 .w.on,h2 .w.on{opacity:1;transform:none}

/* ---------- 3b · a etiqueta do herói é datilografada ----------
   O texto nunca sai do DOM: as letras só nascem transparentes. Quem lê
   por leitor de tela recebe a etiqueta inteira desde o primeiro quadro. */
[data-type] .c{opacity:0}
[data-type] .c.on{opacity:1}
[data-type][data-typing]::after{
  content:"";display:inline-block;width:.5em;height:.95em;vertical-align:-.1em;
  margin-left:.18em;background:currentColor;animation:caret .72s steps(1) infinite;
}
@keyframes caret{50%{opacity:0}}

/* ---------- 4 · revelação com direção ----------
   O bloco de texto sobe; a mídia ao lado entra deslizando e já estava
   um pouco ampliada, o que dá profundidade sem mexer no layout. */
.js [data-reveal]{opacity:0;transform:translateY(22px)}
.js .feature__media[data-reveal],.js .lawyer__photo[data-reveal]{transform:translateY(22px) scale(1.04)}
.js .feature__media[data-reveal].is-in,.js .lawyer__photo[data-reveal].is-in{transform:none}
.feature__media::after,.lawyer__photo::after{transition:transform .9s cubic-bezier(.22,.61,.36,1) .15s}
.js .feature__media[data-reveal]:not(.is-in)::after,
.js .lawyer__photo[data-reveal]:not(.is-in)::after{transform:translate(0,0)}

/* ---------- 5 · paralaxe das imagens em caixa ---------- */
.feature__media img,.lawyer__photo img{
  transform:translate3d(0,var(--py,0px),0) scale(1.06);will-change:transform;
}

/* ---------- 6 · microinteração nos blocos ---------- */
.front{position:relative;transition:transform .45s cubic-bezier(.22,.61,.36,1),background .45s}
.front::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.front:hover{transform:translateY(-5px)}
.front:hover::before{transform:scaleX(1)}
.front:hover .tags li{border-color:rgba(197,168,82,.45)}
.tags li{transition:border-color .45s}

.pain{transition:background .4s}
.pain__n,.step__n{transition:transform .45s cubic-bezier(.22,.61,.36,1),color .3s,border-color .3s}
.pain:hover{background:rgba(25,40,71,.035)}
.sec--deep .pain:hover{background:rgba(236,227,210,.03)}
.pain:hover .pain__n{transform:translateX(5px)}
.step:hover .step__n{transform:rotate(45deg) scale(1.06)}

.faq summary{transition:color .3s}
.faq summary:hover{color:var(--gold-ink)}
.sec--deep .faq summary:hover{color:var(--gold)}

/* sublinhado que corre, no lugar da borda estática */
.channels a{position:relative;border-bottom-color:transparent}
.channels a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.channels a:hover::after{transform:scaleX(1)}

/* a legenda da faixa desenha o próprio filete quando entra */
.js .band figcaption span::after{transform:scaleX(0);transform-origin:0 50%;transition:transform 1s cubic-bezier(.22,.61,.36,1) .2s}
.band figcaption.is-in span::after{transform:scaleX(1)}

/* ---------- 7 · trilho lateral ---------- */
.rail a::before{transition:width .45s cubic-bezier(.22,.61,.36,1),background .3s}
.rail a[aria-current]{letter-spacing:.2em}

/* ---------- 8 · quem pediu menos movimento recebe menos ---------- */
@media (prefers-reduced-motion:reduce){
  .boot{animation:none;opacity:0;visibility:hidden}
  .boot__mark,.boot__rule::after{animation:none}
  .prog{display:none}
  h1 .w,h2 .w,[data-type] .c{opacity:1;transform:none;transition:none}
  [data-type][data-typing]::after{display:none}
  [data-reveal],.feature__media[data-reveal],.lawyer__photo[data-reveal]{opacity:1;transform:none;transition:none}
  .band img,.feature__media img,.lawyer__photo img{transform:none;will-change:auto}
  .front:hover,.chip:hover,.btn:hover{transform:none}
  .front::before,.channels a::after,.btn::before{transition:none}
  .band figcaption span::after{transform:scaleX(1);transition:none}
  .feature__media::after,.lawyer__photo::after{transition:none}
}

/* ============================================================
   MOVIMENTO v4 — 13/11/2026, auditoria contra a referência.

   A primeira rodada entregou abertura, revelação e paralaxe. A
   auditoria contra o site da Chronos (a referência que o André
   citou, e que vive em deliverables/site-chronos/) mostrou quatro
   coisas que lá existem e aqui não existiam:

     1. texto que DIGITA AO ROLAR (lá é o bloco "MEDIR CRIAR
        VEICULAR ESCALAR"; aqui a datilografia só rodava uma vez,
        no carregamento, por temporizador);
     2. o anel que segue o ponteiro, trocando de cor com a seção;
     3. cabeçalho que INVERTE com a seção que passa por baixo;
     4. paralaxe com amplitude que dá para ver.

   Mesmas três regras de sempre: só transform e opacity, nada é
   pré-requisito para ler, e prefers-reduced-motion desliga tudo.
   ============================================================ */

/* ---------- 1 · digitação ao rolar ----------
   Cada letra é um <i> que já nasce no lugar e só acende. Acender
   por opacidade, em vez de inserir texto, evita que a quebra de
   linha seja reescrita a cada letra. */
.js [data-type-scroll] .tw{display:inline}
.js [data-type-scroll] i{opacity:.16;font-style:normal;transition:opacity .18s linear}
.js [data-type-scroll] i.on{opacity:1}
.js [data-type-scroll] i.cur{position:relative}
.js [data-type-scroll] i.cur::after{
  content:"";position:absolute;right:-.34em;top:.04em;width:.5em;height:.92em;
  background:currentColor;animation:caret .72s steps(1) infinite;
}

/* ---------- 2 · anel que segue o ponteiro ----------
   1 px atrás do cursor nativo, que continua visível de propósito:
   anel sozinho custa precisão para quem depende do ponteiro. */
.anel{
  position:fixed;left:0;top:0;z-index:90;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:1px solid var(--cream);border-radius:50%;pointer-events:none;
  opacity:0;transition:opacity .3s,width .25s,height .25s,margin .25s,border-color .3s,background .3s;
}
.anel.on{opacity:.55}
.anel[data-t="claro"]{border-color:var(--navy)}
.anel.clicavel{
  width:44px;height:44px;margin:-22px 0 0 -22px;opacity:.9;
  border-color:var(--gold);background:rgba(197,168,82,.12);
}
@media (pointer:coarse){.anel{display:none}}

/* ---------- 3 · cabeçalho que inverte com a seção ----------
   As páginas alternam navy, papel e creme. Antes o cabeçalho era
   sempre a barra escura, e sobre os blocos claros ele pousava como
   um corpo estranho. Agora ele veste a seção que passa por baixo. */
header[data-tema="claro"][data-stuck]{background:rgba(247,244,238,.93);border-bottom-color:var(--line-light)}
header[data-tema="claro"] .brand{color:var(--navy)}
header[data-tema="claro"] .brand .oab{color:var(--gold-ink);border-left-color:var(--line-light)}
header[data-tema="claro"] .btn--ghost{--fg:var(--navy);--bg2:var(--navy);--fg2:var(--cream);--bd:var(--line-light)}
header[data-tema="claro"] .btn--ghost:hover{border-color:var(--navy)}
/* o logotipo tem duas versões; troca-se qual delas aparece */
.brand__navy{display:none}
header[data-tema="claro"] .brand__cream{display:none}
header[data-tema="claro"] .brand__navy{display:block}

/* ---------- 4 · paralaxe com amplitude visível ----------
   A sobra precisa crescer junto, senão o deslocamento mostra o
   fundo: a faixa vai de 124% para 136% e as caixas de 1.06 para
   1.12 de escala. */
.band img{inset:-18% 0;height:136%}
.feature__media img,.lawyer__photo img{transform:translate3d(0,var(--py,0px),0) scale(1.12)}

/* A foto ampliada precisa de uma caixa que a recorte, e essa caixa não pode
   ser a .feature__media: a moldura dourada vive no ::after dela, 14 px para
   fora, e seria cortada junto. Por isso existe o .shot em volta da imagem. */
.shot{display:block;position:relative;overflow:hidden}

/* a moldura dourada anda ao contrário da foto: é o que dá camada */
.feature__media::after,.lawyer__photo::after{transform:translate(14px,14px) translateY(var(--pyc,0px))}
@media (max-width:719px){.lawyer__photo::after{transform:translate(11px,11px) translateY(var(--pyc,0px))}}

/* ---------- 5 · filete que abre cada seção ---------- */
.js section[data-edge]::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--gold);
  opacity:.5;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.js section[data-edge].edge-in::before{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .js [data-type-scroll] i{opacity:1;transition:none}
  .js [data-type-scroll] i.cur::after{display:none}
  .anel{display:none}
  .js section[data-edge]::before{transform:scaleX(1);transition:none}
  .feature__media::after,.lawyer__photo::after{transform:translate(14px,14px)}
}

/* ---------- ponte entre as duas páginas ----------
   Com domínio próprio, a menção à "página própria do escritório" virou link
   de verdade. É link inline dentro de parágrafo, caso que a WCAG 2.5.8
   isenta do alvo mínimo — mas ganha sublinhado e área clicável maior do que
   o texto puro, para não depender só da cor. */
.scope__hint a{
  display:inline-block;padding:5px 1px;color:var(--gold);
  text-decoration:none;border-bottom:1px solid currentColor;
  transition:color .3s,border-color .3s;
}
.scope__hint a:hover{color:var(--gold-soft)}