/* ==========================================================================
   RENAN BARRETO — Advogado & Publicitário
   Design system proprietário · conceito "ROTA"
   --------------------------------------------------------------------------
   01 tokens          06 hero imersivo     11 consumidor
   02 primitivos      07 rota animada      12 como funciona
   03 atmosfera       08 triagem           13 prova social
   04 preloader       09 autoridade        14 conteúdos / faq
   05 header/menu     10 passageiro/sobre  15 cta / footer / responsivo
   ========================================================================== */

/* ==========================================================================
   01 · TOKENS
   ========================================================================== */
:root{
  /* base */
  --bg-0:#07090B;
  --bg-1:#0D1115;
  --bg-2:#151A1F;
  /* superfícies */
  --surf-1:#11161B;
  --surf-2:#1A2026;
  --surf-t:rgba(17,22,27,.72);
  --surf-t2:rgba(26,32,38,.66);
  /* texto */
  --ink:#F4F5F6;
  --ink-mut:#B7BFC7;
  --ink-dim:#828D99;
  /* linhas */
  --line:rgba(244,245,246,.105);
  --line-2:rgba(244,245,246,.175);
  --line-3:rgba(244,245,246,.30);
  /* accent — azul elétrico discreto + cyan de instrumento */
  --acc:#4DA9F7;
  --acc-ice:#8FE0FF;
  --acc-deep:#1E4E78;
  --acc-wash:rgba(77,169,247,.10);
  --acc-glow:rgba(77,169,247,.28);
  /* whatsapp (fora da paleta, de propósito) */
  --wa:#25D366;

  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  /* Jost: geométrica de traço fino, o tratamento clássico de wordmark de marca
     premium. Só na marca — a UI segue em Inter Tight. */
  --brand:'Jost','Futura','Century Gothic',var(--sans);

  --wrap:1280px;
  --pad:clamp(20px,5vw,52px);
  --hd-h:82px;

  /* escala de espaço */
  --s1:8px; --s2:16px; --s3:26px; --s4:38px; --s5:56px; --s6:82px;
  --sec-y:clamp(92px,11.5vw,168px);

  /* raio — uma escala só para todo o sistema de imagens e superfícies */
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd-h) + 20px)}

body{
  margin:0;position:relative;color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* 03 · ATMOSFERA — nebulosas amplas ancoradas na altura do documento.
     Percentuais resolvem contra a caixa do body, então elas passam pelo
     scroll naturalmente, sem JS e sem DOM extra. */
  background-color:var(--bg-0);
  background-image:
    radial-gradient(1150px 800px at 84% 1%,  rgba(44,104,158,.40), transparent 60%),
    radial-gradient(900px 700px  at 2% 13%,  rgba(28,68,108,.30),  transparent 58%),
    radial-gradient(1000px 820px at 98% 30%, rgba(38,92,140,.26),  transparent 60%),
    radial-gradient(950px 760px  at 0% 45%,  rgba(28,68,108,.24),  transparent 58%),
    radial-gradient(1050px 800px at 96% 60%, rgba(38,92,140,.24),  transparent 60%),
    radial-gradient(920px 740px  at 2% 76%,  rgba(28,68,108,.22),  transparent 58%),
    radial-gradient(1250px 820px at 54% 99%, rgba(54,118,172,.34), transparent 62%);
  background-repeat:no-repeat;
}
body.is-locked{overflow:hidden}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
::selection{background:var(--acc);color:#04070A}

.skip{
  position:fixed;top:10px;left:10px;z-index:9999;padding:10px 16px;
  background:var(--acc);color:#04070A;border-radius:8px;font-size:13px;font-weight:600;
  transform:translateY(-160%);transition:transform .25s var(--ease);
}
.skip:focus{transform:none}
:focus-visible{outline:2px solid var(--acc-ice);outline-offset:3px;border-radius:4px}

/* ==========================================================================
   02 · PRIMITIVOS
   ========================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.micro{
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  line-height:1.45;color:var(--ink-dim);font-variant-numeric:tabular-nums;margin:0;
}

.eyebrow{
  display:inline-flex;align-items:flex-start;gap:11px;
  font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-mut);font-variant-numeric:tabular-nums;margin-bottom:var(--s3);
}
.eyebrow__dot{
  width:6px;height:6px;border-radius:50%;background:var(--acc);flex:0 0 auto;margin-top:.42em;
  box-shadow:0 0 0 4px var(--acc-wash);animation:pulse 3.4s var(--ease-io) infinite;
}
.eyebrow__num{
  color:var(--acc);font-weight:600;padding-right:11px;
  border-right:1px solid var(--line-2);align-self:stretch;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--acc-wash)}50%{box-shadow:0 0 0 7px rgba(77,169,247,.04)}}

.dotp{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--acc-ice);margin-right:9px;vertical-align:middle;
  box-shadow:0 0 8px var(--acc-glow);
}

/* botões ---------------------------------------------------------------- */
.btn{
  --bh:54px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--bh);padding:0 28px;border-radius:calc(var(--bh)/2);
  font-size:14.5px;font-weight:600;letter-spacing:.005em;white-space:nowrap;
  transition:transform .45s var(--ease),background .3s,border-color .35s,color .3s,box-shadow .45s;
  overflow:hidden;isolation:isolate;
}
.btn svg{width:15px;height:15px;flex:0 0 auto;transition:transform .45s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(0)}

.btn--primary{
  background:linear-gradient(180deg,#FBFCFC,#DCE2E8);color:#06090C;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px -12px rgba(0,0,0,.9);
}
.btn--primary::after{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(180deg,#fff,#C6D4E2);transition:opacity .35s;
}
.btn--primary:hover::after{opacity:1}
.btn--primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 42px -14px rgba(77,169,247,.45)}

.btn--ghost{
  border:1px solid var(--line-2);color:var(--ink);
  background:rgba(255,255,255,.014);backdrop-filter:blur(8px);
}
.btn--ghost::after{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:linear-gradient(180deg,rgba(77,169,247,.10),rgba(77,169,247,0));
}
.btn--ghost:hover{border-color:rgba(143,224,255,.34);background:rgba(255,255,255,.03)}
.btn--ghost:hover::after{opacity:1}

.btn--wa{background:var(--wa);color:#04120A;box-shadow:0 12px 32px -14px rgba(37,211,102,.55)}
.btn--wa svg{width:19px;height:19px}
.btn--wa:hover{background:#2AE474;box-shadow:0 18px 40px -14px rgba(37,211,102,.62)}
.btn--wa:hover svg{transform:none}

.btn--sm{--bh:44px;padding:0 22px;font-size:13.5px}
.btn--lg{--bh:60px;padding:0 34px;font-size:15.5px}
.btn--block{width:100%}

.link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:600;color:var(--acc);
  padding-bottom:3px;border-bottom:1px solid rgba(77,169,247,.28);
  transition:border-color .3s,color .3s,gap .35s var(--ease);
}
.link svg{width:14px;height:14px}
.link:hover{color:var(--acc-ice);border-color:var(--acc-ice);gap:15px}

/* cabeçalho de seção ---------------------------------------------------- */
.sec{position:relative;padding:var(--sec-y) 0}
.sh{max-width:790px;margin-bottom:clamp(48px,6.5vw,86px)}
.sh--wide{max-width:960px}
.sh__h{
  font-size:clamp(30px,4.3vw,55px);line-height:1.04;letter-spacing:-.036em;font-weight:600;
  text-wrap:balance;
}
.sh__h--md{font-size:clamp(26px,3.3vw,41px);line-height:1.08}
.sh__p{
  margin-top:var(--s3);max-width:62ch;font-size:clamp(15.5px,1.3vw,18px);
  line-height:1.72;color:var(--ink-mut);
}
.sh__p--serif{
  font-family:var(--serif);font-size:clamp(17px,1.65vw,22px);
  line-height:1.62;font-weight:300;color:#C9CFD5;letter-spacing:-.006em;
}

/* ==========================================================================
   03 · ATMOSFERA — trilhos, grade técnica, grão
   ========================================================================== */
/* trilhos verticais marcando a coluna de conteúdo em toda a página */
/* Os trilhos ficam nas bordas EXTERNAS do container, nunca dentro da coluna de
   texto — antes encostavam no primeiro caractere e pareciam erro de formatacao.
   Agora sobra --pad de respiro entre o traco e o texto. */
.rails{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(100%,calc(var(--wrap) + var(--pad) * 1.1));pointer-events:none;z-index:1;
}
.rails i{
  position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(244,245,246,.10) 3%,
             rgba(244,245,246,.10) 97%,transparent);
}
.rails i:first-child{left:0}
.rails i:last-child{right:0}

/* grade técnica reutilizável, sempre com máscara para não virar papel de parede */
.gridfx{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(244,245,246,.026) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(244,245,246,.026) 1px,transparent 1px);
  background-size:78px 78px;
}
.gridfx--hero{
  mask-image:radial-gradient(ellipse 116% 78% at 34% 32%,#000 8%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 116% 78% at 34% 32%,#000 8%,transparent 72%);
}
.gridfx--soft{
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000,transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000,transparent 74%);
  opacity:.7;
}

.grain{
  position:fixed;inset:-50%;z-index:9990;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* DIVISÕES DE SEÇÃO — cada seção tem tom próprio e hairline no topo, para a
   página ler como capítulos e não como um bloco preto contínuo. Os tons são
   semitransparentes de propósito: a atmosfera do body atravessa. */
.sec::before,.cta::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,rgba(143,224,255,.45) 0%,rgba(143,224,255,.5) 5%,
             rgba(244,245,246,.20) 20%,rgba(244,245,246,.16) 78%,
             rgba(244,245,246,.07) 94%,transparent);
}
/* três tons alternados */
.tone-a{background:linear-gradient(180deg,rgba(14,19,25,.86),rgba(11,15,20,.78))}
.tone-b{background:linear-gradient(180deg,rgba(7,9,11,.34),rgba(7,9,11,.66))}
.tone-c{background:linear-gradient(180deg,rgba(17,23,30,.9),rgba(12,17,22,.82))}
/* halo largo por seção, agora perceptível */
.sec__halo{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.sec__halo::before{
  content:'';position:absolute;width:min(1100px,120vw);aspect-ratio:1.4;
  background:radial-gradient(ellipse,rgba(52,116,172,.24),rgba(30,78,120,.07) 46%,transparent 70%);
  filter:blur(30px);
}
.sec__halo--l::before{left:-24%;top:-18%}
.sec__halo--r::before{right:-24%;top:-14%}
.sec__halo--b::before{right:-14%;bottom:-30%}

/* ==========================================================================
   04 · PRELOADER — o logotipo se desenhando (mesma sensação, agora a marca real)
   ========================================================================== */
.preloader{
  position:fixed;inset:0;z-index:9998;background:var(--bg-0);
  display:grid;place-items:center;
  transition:opacity .72s var(--ease),visibility .72s;
}
.preloader.is-out{opacity:0;visibility:hidden}
.preloader__mark{display:flex;flex-direction:column;align-items:center;gap:30px}
.preloader__halo{
  position:absolute;width:min(680px,86vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(52,116,172,.3),transparent 62%);
  filter:blur(30px);opacity:0;animation:haloIn 1.6s var(--ease) .5s forwards;
}
@keyframes haloIn{to{opacity:1}}

/* O EMBLEMA SE MONTA: anel desenha, bezel aparece marca a marca em volta,
   anel interno fecha, RB é traçado, o arco de rota varre e o waypoint pousa. */
.preloader__emb{
  width:clamp(112px,20vw,158px);height:auto;color:var(--ink);overflow:visible;
  animation:embSettle 1.1s var(--ease) 2.05s both;
}
@keyframes embSettle{
  0%{transform:scale(.985)} 55%{transform:scale(1.012)} 100%{transform:scale(1)}
}
.preloader__emb .em-ring{stroke-dasharray:100;stroke-dashoffset:100;
  animation:draw .8s var(--ease) .05s forwards;transform:rotate(-90deg);transform-origin:60px 60px}
.preloader__emb .em-ring2{stroke-dasharray:100;stroke-dashoffset:100;
  animation:draw .62s var(--ease) .62s forwards;transform:rotate(-90deg);transform-origin:60px 60px}
.preloader__emb .em-tick{
  opacity:0;transform-box:fill-box;transform-origin:center;
  animation:tickIn .34s var(--ease) forwards;
  animation-delay:calc(.34s + var(--i) * .0155s);
}
@keyframes tickIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.preloader__emb .em-mono path{stroke-dasharray:100;stroke-dashoffset:100;
  animation:draw .6s var(--ease) forwards}
.preloader__emb .em-mono path:nth-of-type(1){animation-delay:.9s}
.preloader__emb .em-mono path:nth-of-type(2){animation-delay:1s}
.preloader__emb .em-mono path:nth-of-type(3){animation-delay:1.1s}
.preloader__emb .em-mono path:nth-of-type(4){animation-delay:1.02s}
.preloader__emb .em-mono path:nth-of-type(5){animation-delay:1.12s}
.preloader__emb .em-mono path:nth-of-type(6){animation-delay:1.22s}
.preloader__emb .em-mdot{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:pop .46s var(--ease) 1.5s forwards}
.preloader__emb .em-arc{stroke-dasharray:100;stroke-dashoffset:100;
  animation:draw .78s var(--ease) 1.32s forwards}
.preloader__emb .em-dot{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:pop .5s var(--ease) 1.98s forwards;filter:drop-shadow(0 0 10px var(--acc-glow))}

.preloader__word{
  font-family:var(--brand);font-size:clamp(14px,2.7vw,19px);font-weight:300;
  letter-spacing:.42em;color:var(--ink);white-space:nowrap;
  clip-path:inset(0 100% 0 0);
  animation:wipe 1.05s var(--ease) 1.72s forwards;
}
/* Entra quando o wipe do nome está em ~65%, não depois dele: a cascata
   tipográfica lê como uma coisa só. O hold do preloader subiu de 2 700 para
   3 050 ms em site.js para a linha caber inteira antes da cortina subir. */
.preloader__sub{
  margin-top:-16px;
  font-size:clamp(8.5px,1.35vw,10px);font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--acc-ice);white-space:nowrap;
  opacity:0;transform:translateY(9px);
  animation:subIn .62s var(--ease) 2.42s forwards;
}
@keyframes subIn{to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}

/* ==========================================================================
   05 · HEADER
   ========================================================================== */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:background .5s var(--ease),backdrop-filter .5s;
}
.hd__in{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  height:var(--hd-h);display:flex;align-items:center;gap:30px;
  transition:height .5s var(--ease);
}
.hd__line{
  height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 16%,var(--line-2) 84%,transparent);
  opacity:0;transition:opacity .5s;
}
.hd.is-stuck{background:rgba(7,9,11,.66);backdrop-filter:blur(20px) saturate(170%)}
.hd.is-stuck .hd__in{height:64px}
.hd.is-stuck .hd__line{opacity:1}
.hd.is-stuck .logo__word{opacity:.92}

/* logo ------------------------------------------------------------------ */
.logo{display:inline-flex;align-items:center;gap:15px;color:var(--ink);flex:0 0 auto}
.logo__emb{
  width:auto;height:40px;color:currentColor;flex:0 0 auto;overflow:visible;
  transition:height .5s var(--ease);
}
.logo__emb .em-arc,.logo__emb .em-dot{transition:transform .8s var(--ease)}
.logo__emb{transform-box:fill-box}
.logo:hover .em-arc,.logo:hover .em-dot{
  transform:rotate(14deg);transform-origin:60px 60px;
}
.logo__bar{
  width:1px;height:32px;background:var(--line-3);flex:0 0 auto;
  transition:height .5s var(--ease);
}
/* Duas linhas, não duas palavras a mais na mesma linha. A razão social
   inteira em fila única acrescentaria ~250 px ao cabeçalho, que em 1024 tinha
   9 px de folga. Empilhada, ela não custa NADA em largura: a segunda linha é
   dimensionada para ficar mais estreita que a primeira, então quem manda na
   largura do bloco continua sendo "RENAN BARRETO".
   Medido no navegador, com Range sobre o conteudo de cada linha:
     RENAN BARRETO         15,5px / .29em   ->  178 px
     ADVOGADOS ASSOCIADOS   8,6px / .205em  ->  144 px   (128 abaixo de 1120)
   O cabecalho continua pedindo exatamente 1085 px em 1440 e 913 em 1024,
   os mesmos numeros de antes da razao social entrar. */
.logo__txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.logo__word{
  font-family:var(--brand);font-size:15.5px;font-weight:400;letter-spacing:.29em;
  line-height:1;white-space:nowrap;color:currentColor;
  transition:font-size .5s var(--ease),opacity .4s;
}
.logo__sub{
  font-size:8.6px;font-weight:600;letter-spacing:.205em;text-transform:uppercase;
  line-height:1;white-space:nowrap;color:var(--ink-dim);
  transition:font-size .5s var(--ease),opacity .4s;
}
.hd.is-stuck .logo__emb{height:34px}
.hd.is-stuck .logo__bar{height:22px}
.hd.is-stuck .logo__word{font-size:14px}
.hd.is-stuck .logo__sub{font-size:7.8px}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{
  position:relative;padding:10px 14px;border-radius:9px;
  font-size:13.5px;font-weight:500;color:var(--ink-mut);
  transition:color .32s;
}
.nav a::after{
  content:'';position:absolute;left:14px;right:14px;bottom:5px;height:1px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.nav a.is-here{color:var(--ink)}
.nav a.is-here::after{transform:scaleX(1);background:var(--acc-ice)}

.hd__cta{flex:0 0 auto}

.burger{display:none;width:44px;height:44px;margin-left:auto;position:relative;flex:0 0 auto}
.burger span{
  position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .45s var(--ease),opacity .3s;
}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:25px}
.burger.is-x span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.is-x span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* menu mobile ----------------------------------------------------------- */
.menu{
  position:fixed;inset:0;z-index:890;background:rgba(7,9,11,.97);
  backdrop-filter:blur(24px);
  padding:calc(var(--hd-h) + 26px) var(--pad) 42px;
  display:flex;flex-direction:column;justify-content:space-between;gap:34px;
  opacity:0;transition:opacity .42s var(--ease);
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1}
/* O min-height:0 não é enfeite. Item de flex nasce com min-height:auto, que
   o impede de encolher abaixo do próprio conteúdo — e enquanto ele não
   encolhe, o overflow-y:auto nunca entra em ação. Com onze itens, num
   aparelho de 667 px de altura, a lista simplesmente vazava por baixo da
   tela: os últimos links ficavam inalcançáveis, sem barra de rolagem e sem
   nenhum sinal de que existiam. */
.menu__nav{display:flex;flex-direction:column;overflow-y:auto;min-height:0;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.menu__nav a{
  display:flex;align-items:baseline;gap:16px;padding:15px 0;
  border-bottom:1px solid var(--line);
  font-size:clamp(20px,5.6vw,28px);font-weight:600;letter-spacing:-.028em;
  opacity:0;transform:translateY(14px);
}
.menu.is-open .menu__nav a{animation:mIn .58s var(--ease) forwards}
.menu__nav a i{
  font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  color:var(--acc);font-variant-numeric:tabular-nums;
}
@keyframes mIn{to{opacity:1;transform:none}}
.menu__nav a:nth-child(1){animation-delay:.06s}
.menu__nav a:nth-child(2){animation-delay:.11s}
.menu__nav a:nth-child(3){animation-delay:.16s}
.menu__nav a:nth-child(4){animation-delay:.21s}
.menu__nav a:nth-child(5){animation-delay:.26s}
.menu__nav a:nth-child(6){animation-delay:.31s}
.menu__nav a:nth-child(7){animation-delay:.36s}
.menu__nav a:nth-child(8){animation-delay:.41s}
.menu__nav a:nth-child(9){animation-delay:.46s}
.menu__nav a:nth-child(10){animation-delay:.51s}
.menu__nav a:nth-child(11){animation-delay:.56s}
.menu__foot{display:flex;flex-direction:column;gap:18px;align-items:center;flex:0 0 auto}
/* telas baixas: onze itens só cabem se cada um ceder altura */
@media (max-height:770px){
  .menu{gap:20px;padding-top:calc(var(--hd-h) + 12px);padding-bottom:26px}
  .menu__nav a{padding:10px 0;font-size:clamp(16px,4.4vw,20px)}
  .menu__foot{gap:14px}
}
.menu__ig{font-size:13px;letter-spacing:.1em;color:var(--ink-dim)}

/* ==========================================================================
   06 · HERO IMERSIVO
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;
  padding-top:calc(var(--hd-h) + clamp(20px,3.4vw,46px));
  padding-bottom:clamp(20px,2.6vw,34px);
  display:grid;grid-template-rows:1fr auto;
  overflow:hidden;isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__bg::after{
  content:'';position:absolute;top:-16%;left:-14%;width:min(920px,86vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(36,88,134,.22),rgba(30,78,120,.05) 46%,transparent 68%);
  filter:blur(26px);
}

/* a fotografia nasce do próprio background: sem moldura, sem borda reta.
   Os degradês de vedação usam a cor exata do fundo, o que é visualmente
   idêntico a feather e não depende de mask-composite. */
/* A vedação é feita com MÁSCARA, não com scrim opaco. Um scrim na cor do
   fundo tapava as nebulosas do body dentro da caixa da foto e criava uma
   borda reta visível (medido: o azul caía de b=16 para b=12 em x=619).
   Máscara no <figure> (vertical) x máscara no <img> (horizontal) se
   multiplicam, então dá o feather 2D sem mask-composite. */
.hero__ph{
  position:absolute;top:0;right:0;bottom:0;width:55%;z-index:1;margin:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 64%,transparent 97%);
          mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 64%,transparent 97%);
}
.hero__ph picture,.hero__ph img{position:absolute;inset:0;width:100%;height:100%}
.hero__ph img{
  object-fit:cover;object-position:56% 24%;
  filter:contrast(1.05) saturate(.94);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 13%,
    rgba(0,0,0,.5) 29%,#000 47%,#000 87%,rgba(0,0,0,.8) 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 13%,
    rgba(0,0,0,.5) 29%,#000 47%,#000 87%,rgba(0,0,0,.8) 100%);
}
/* leve reforço de contraste só na faixa onde o texto cruza a imagem —
   transparente nas duas pontas, para não reintroduzir emenda */
.hero__ph::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(7,9,11,.30) 20%,
             rgba(7,9,11,.34) 36%,rgba(7,9,11,.06) 58%,transparent 72%);
}
.hero__cap{
  position:absolute;right:0;top:calc(var(--hd-h) + clamp(26px,4vw,58px));z-index:3;
  padding-right:var(--pad);text-align:right;
  opacity:0;transform:translateY(8px);
  transition:opacity .9s var(--ease) .9s,transform .9s var(--ease) .9s;
}
.hero.is-lit .hero__cap{opacity:1;transform:none}
.hero__cap b{
  display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink);
}
.hero__cap span{
  display:block;margin-top:3px;
  font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-ice);
}

.hero__in{position:relative;z-index:4;align-self:center}
.hero__text{max-width:min(640px,100%)}
.hero__h1{
  font-size:clamp(38px,5.7vw,74px);line-height:.99;letter-spacing:-.046em;font-weight:600;
}
.hero__h1 .hl{
  color:transparent;
  background:linear-gradient(96deg,var(--acc) 6%,var(--acc-ice) 58%,#E2F6FF 100%);
  -webkit-background-clip:text;background-clip:text;
}
.hero__sub{
  margin-top:clamp(18px,2.2vw,27px);max-width:46ch;
  font-size:clamp(15.5px,1.4vw,18.5px);line-height:1.64;color:var(--ink-mut);
  text-shadow:0 1px 22px rgba(7,9,11,.9);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.8vw,36px)}

.hero__trust{
  display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  margin-top:clamp(26px,3.2vw,40px);padding-top:var(--s3);
  border-top:1px solid var(--line-2);max-width:520px;
}
.trust__num{
  display:flex;align-items:flex-start;
  font-size:clamp(30px,3.6vw,44px);font-weight:600;letter-spacing:-.042em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.trust__num em{
  font-style:normal;font-size:.5em;color:var(--acc);margin-left:2px;margin-top:.1em;
}
.trust__txt{font-size:12.5px;line-height:1.44;color:var(--ink-mut);letter-spacing:.01em}
.trust__sep{width:1px;height:36px;background:var(--line-2);flex:0 0 auto}
.trust__txt--wide{color:var(--ink-dim)}

/* ==========================================================================
   07 · ROTA ANIMADA
   ========================================================================== */
.rota{
  position:relative;align-self:end;z-index:4;
  margin-top:clamp(24px,3.2vw,44px);
  height:clamp(90px,11vw,140px);pointer-events:none;
  padding-inline:var(--pad);
}
/* svg com viewBox é elemento substituído: em position:absolute, width:auto resolve
   pela proporção intrínseca (1000/150) e IGNORA o par left/right — o SVG nascia com
   61% da largura, a linha parava no meio e os waypoints saíam de cima dela.
   A largura tem de ser explícita. */
.rota__svg{
  position:absolute;top:0;left:var(--pad);
  width:calc(100% - var(--pad) * 2);height:100%;overflow:visible;
}
#rotaPath{stroke-dasharray:100;stroke-dashoffset:100;animation:draw 2.4s var(--ease) 1.5s forwards}
.jato{opacity:0}
.rota.is-off .jato{display:none}

.rota__wps{position:absolute;top:0;bottom:0;left:var(--pad);width:calc(100% - var(--pad) * 2)}
.rota__wps li{
  position:absolute;left:var(--x);top:var(--y);
  opacity:0;transform:translateY(6px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
.rota__wps li::before{
  content:'';position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:7px;height:7px;border-radius:50%;
  background:var(--bg-0);border:1px solid rgba(143,224,255,.6);
  box-shadow:0 0 0 3px rgba(77,169,247,.07);
}
.rota__wps li::after{
  content:'';position:absolute;left:0;bottom:5px;width:1px;height:9px;
  background:linear-gradient(to top,rgba(143,224,255,.45),transparent);
}
.rota__wps li span{
  position:absolute;left:0;bottom:16px;transform:translateX(-50%);white-space:nowrap;
  font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);
}
.rota__wps li:nth-child(1){--x:19%;--y:78.7%;transition-delay:1.85s}
.rota__wps li:nth-child(2){--x:38%;--y:65.3%;transition-delay:2.1s}
.rota__wps li:nth-child(3){--x:57%;--y:49.3%;transition-delay:2.35s}
.rota__wps li:nth-child(4){--x:76%;--y:32%;transition-delay:2.6s}
.rota__wps li:nth-child(5){--x:100%;--y:10.7%;transition-delay:2.95s}
.rota__wps.is-in li{opacity:1;transform:none}

/* especificidade tem de bater .rota__wps li::before (0,1,2), senão o destino
   herda o estilo de waypoint comum e o rótulo vaza pela borda direita */
.rota__wps li.rota__dest::before{
  width:11px;height:11px;background:var(--acc-ice);border-color:var(--acc-ice);
  box-shadow:0 0 0 5px rgba(77,169,247,.12),0 0 16px var(--acc-glow);
  animation:pulse2 3s var(--ease-io) infinite;
}
.rota__wps li.rota__dest::after{display:none}
.rota__wps li.rota__dest span{
  left:auto;right:0;bottom:auto;top:14px;transform:none;
  padding:5px 12px;border-radius:20px;
  background:rgba(77,169,247,.11);border:1px solid rgba(143,224,255,.3);
  backdrop-filter:blur(6px);
  color:var(--ink);font-weight:700;font-size:9px;letter-spacing:.2em;
}
@keyframes pulse2{
  0%,100%{box-shadow:0 0 0 5px rgba(77,169,247,.12),0 0 16px var(--acc-glow)}
  50%{box-shadow:0 0 0 11px rgba(77,169,247,.03),0 0 22px var(--acc-glow)}
}

/* ==========================================================================
   SISTEMA DE IMAGENS — uma linguagem só para toda foto do site
   ========================================================================== */
.ph{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line-2);background:var(--surf-1);
  box-shadow:0 40px 100px -46px rgba(0,0,0,.95);
}
/* O <picture> PRECISA PREENCHER A FIGURA.
   `.ph img{height:100%}` só funciona se o PAI do img tiver altura — e o
   <picture> não tem: ele se dimensiona pela proporção natural da imagem.
   Quando a figura pede uma proporção diferente da imagem (no celular a faixa
   vira 3:2 e a foto é 16:9), o picture fica MENOR que a figura e sobra caixa
   vazia embaixo. Foi essa a "barra" no pé da primeira foto do escritório:
   350x233 de figura contra 348x196 de picture — 38 px de nada.
   Com width/height 100% no picture, o object-fit:cover finalmente tem o que
   cobrir. Vale para toda foto do site, não só para essa. */
.ph picture{display:block;width:100%;height:100%}
.ph img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05)}
/* O DEGRADÊ DE RODAPÉ VALE PARA RETRATO, NÃO PARA LADRILHO.
   Ele nasceu para dar contraste às legendas. Quando elas saíram eu o aliviei
   em vez de separar os dois casos, e num ladrilho 4:5 o que sobrou leu como
   faixa cinza colada no pé da foto — a imagem ali tem luminância 72–81, igual
   à do meio: a barra era o degradê, não a fotografia.
   No retrato ele continua fazendo falta: é o que assenta o sujeito na base do
   quadro. Volta como era. */
.ph::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,9,11,.88),rgba(7,9,11,.12) 38%,transparent 58%),
             linear-gradient(115deg,rgba(30,78,120,.13),transparent 54%);
}
/* galeria do escritório: cinco fotos pequenas numa grade, sem texto por cima.
   Só o véu azulado que as liga ao fundo da seção. */
.esp__t::after{
  background:linear-gradient(to top,rgba(7,9,11,.20),transparent 16%),
             linear-gradient(115deg,rgba(30,78,120,.13),transparent 54%);
}
.ph figcaption{position:absolute;left:22px;right:22px;bottom:20px;z-index:1;max-width:24ch}
.ph figcaption .micro{color:var(--acc-ice)}
/* cantos de enquadramento — mesma marcação técnica em todas as fotos */
.ph__c{position:absolute;z-index:2;width:13px;height:13px;border-color:var(--acc-ice);opacity:.42;pointer-events:none}
.ph__c--tl{top:13px;left:13px;border-top:1px solid;border-left:1px solid}
.ph__c--br{bottom:13px;right:13px;border-bottom:1px solid;border-right:1px solid}

/* ==========================================================================
   08 · TRIAGEM
   ========================================================================== */
.tri{
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(20px,2.6vw,38px);align-items:start;
}
.tri__cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tri__card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:15px;
  padding:22px 20px;border-radius:var(--r);text-align:left;
  border:1px solid var(--line);background:var(--surf-t);
  backdrop-filter:blur(6px);
  transition:border-color .45s,background .45s,transform .55s var(--ease);
  overflow:hidden;
}
.tri__card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(130% 110% at 0% 0%,rgba(77,169,247,.13),transparent 62%);
}
.tri__card svg{width:26px;height:26px;color:var(--ink-dim);transition:color .45s,transform .55s var(--ease)}
.tri__card span{font-size:14.5px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.tri__card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.tri__card:hover svg{color:var(--ink-mut)}
.tri__card.is-on{border-color:rgba(77,169,247,.42);background:var(--surf-t2)}
.tri__card.is-on::before{opacity:1}
.tri__card.is-on svg{color:var(--acc-ice)}
/* microanimação de linha: o marcador do item ativo é desenhado, não aceso */
.tri__card::after{
  content:'';position:absolute;left:0;top:20px;bottom:20px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--acc),var(--acc-ice));
  transform:scaleY(0);transform-origin:top;
  transition:transform .55s var(--ease);
}
.tri__card.is-on::after{transform:scaleY(1)}

.tri__panel{
  position:relative;border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:linear-gradient(165deg,var(--surf-t2),rgba(17,22,27,.78) 58%);
  backdrop-filter:blur(10px);
  overflow:hidden;
}
.tri__panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(143,224,255,.42),transparent);
}
.tri__panel-in{padding:clamp(26px,3.2vw,44px)}
.tri__panel-in.is-swap{animation:swap .5s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
/* indicador de progresso da triagem */
.tri__prog{
  display:flex;align-items:center;gap:10px;margin-bottom:var(--s3);
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);
}
.tri__prog-bar{flex:1;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.tri__prog-bar i{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,.166));
  background:linear-gradient(90deg,var(--acc),var(--acc-ice));
  transition:transform .6s var(--ease);
}
.tri__tag{
  display:flex;align-items:center;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-ice);margin-bottom:var(--s2);
}
.tri__tag b{font-weight:600}
.tri__panel h3{
  font-size:clamp(20px,2.15vw,28px);line-height:1.18;letter-spacing:-.03em;font-weight:600;
  margin-bottom:15px;text-wrap:balance;
}
.tri__panel-in > p:not(.tri__tag):not(.tri__disc):not(.tri__prog){
  font-size:15.5px;line-height:1.7;color:var(--ink-mut);
}
.tri__docs{margin:var(--s3) 0 var(--s3);padding-top:var(--s2);border-top:1px solid var(--line)}
.tri__docs ul{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.tri__docs li{
  position:relative;padding-left:21px;font-size:14px;color:var(--ink-mut);line-height:1.52;
}
.tri__docs li::before{
  content:'';position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--acc);
}
.tri__disc{
  margin-top:var(--s2);font-size:11.5px;line-height:1.62;color:var(--ink-dim);max-width:52ch;
}

/* ==========================================================================
   09 · AUTORIDADE
   ========================================================================== */
.auth{
  display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);
  gap:clamp(40px,5.4vw,84px);align-items:start;
}
.auth__stat{display:flex;align-items:flex-start;line-height:.8}
.auth__plus{
  font-size:clamp(36px,4.6vw,62px);font-weight:500;color:var(--acc);
  margin-top:.08em;letter-spacing:-.03em;
}
.auth__count{
  font-size:clamp(78px,13.5vw,184px);font-weight:600;letter-spacing:-.058em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(172deg,#FFF 10%,#8FA3B4 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.auth__lab{
  margin-top:14px;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);
}
/* linha de trajetória sob o número: o dado vira parte do conceito */
.auth__traj{position:relative;margin-top:var(--s3);height:34px}
.auth__traj svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.auth__traj path{stroke-dasharray:100;stroke-dashoffset:100}
.auth.in .auth__traj path{animation:draw 1.8s var(--ease) .35s forwards}
.auth__traj i{
  position:absolute;right:1%;top:0;width:9px;height:9px;border-radius:50%;
  background:var(--acc-ice);opacity:0;box-shadow:0 0 14px var(--acc-glow);
}
.auth.in .auth__traj i{animation:pop .6s var(--ease) 1.9s forwards}
.auth__note{
  margin-top:var(--s3);max-width:40ch;font-size:14.5px;line-height:1.7;color:var(--ink-mut);
  padding-top:var(--s3);border-top:1px solid var(--line);
}
.auth__cards{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--line);
}
.pcard{
  position:relative;padding:clamp(26px,2.9vw,38px);background:rgba(13,17,21,.82);
  backdrop-filter:blur(6px);
  transition:background .5s;overflow:hidden;
}
.pcard::after{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .55s;pointer-events:none;
  background:radial-gradient(130% 110% at 100% 0%,rgba(77,169,247,.11),transparent 58%);
}
.pcard:hover{background:rgba(26,32,38,.9)}
.pcard:hover::after{opacity:1}
.pcard__i{
  display:grid;place-items:center;width:31px;height:31px;border-radius:9px;
  border:1px solid var(--line-2);
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--acc-ice);
  margin-bottom:var(--s3);transition:border-color .45s,background .45s;
}
.pcard:hover .pcard__i{border-color:rgba(143,224,255,.36);background:var(--acc-wash)}
.pcard h3{
  font-size:17.5px;font-weight:600;letter-spacing:-.022em;line-height:1.24;margin-bottom:11px;
}
.pcard p{font-size:14px;line-height:1.64;color:var(--ink-mut)}

/* ==========================================================================
   10 · PASSAGEIRO AÉREO + SOBRE
   ========================================================================== */
.pax{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,4.2vw,70px);align-items:start;
}
.pax__list{position:relative;display:flex;flex-direction:column}
.pax__item{
  position:relative;display:flex;align-items:baseline;gap:17px;
  padding:18px 16px 18px 0;text-align:left;
  border-bottom:1px solid var(--line);
  transition:padding-left .48s var(--ease);
}
.pax__item i{
  font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  color:var(--ink-dim);font-variant-numeric:tabular-nums;flex:0 0 auto;
  transition:color .35s;
}
.pax__item span{
  font-size:clamp(16px,1.7vw,21px);font-weight:500;letter-spacing:-.026em;
  color:var(--ink-mut);line-height:1.24;transition:color .35s;
}
.pax__item::before{
  content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--acc),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.pax__item:hover span{color:var(--ink)}
.pax__item:hover i{color:var(--acc)}
.pax__item.is-on{padding-left:17px}
.pax__item.is-on span{color:var(--ink);font-weight:600}
.pax__item.is-on i{color:var(--acc-ice)}
.pax__item.is-on::before{transform:scaleX(1)}
.pax__item.is-on::after{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:21px;border-radius:3px;
  background:linear-gradient(180deg,var(--acc),var(--acc-ice));
}

.pax__detail{
  position:relative;padding:clamp(28px,3.2vw,46px);border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:linear-gradient(160deg,var(--surf-t2),rgba(17,22,27,.8));
  backdrop-filter:blur(10px);
}
.pax__detail.is-swap{animation:swap .5s var(--ease)}
.pax__idx{
  display:flex;align-items:baseline;gap:7px;margin-bottom:var(--s3);
  font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--acc-ice);
  font-variant-numeric:tabular-nums;
}
.pax__idx em{font-style:normal;color:var(--ink-dim)}
.pax__detail h3{
  font-size:clamp(21px,2.35vw,31px);line-height:1.14;letter-spacing:-.032em;font-weight:600;
  margin-bottom:var(--s2);text-wrap:balance;
}
.pax__detail > p:not(.pax__idx){font-size:15.5px;line-height:1.7;color:var(--ink-mut)}
.pax__points{margin:var(--s3) 0 var(--s3);display:grid;gap:12px}
.pax__points li{
  position:relative;padding-left:23px;font-size:14px;line-height:1.56;color:#BFC6CD;
}
.pax__points li::before{
  content:'';position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;
  border:1px solid var(--acc);
}

/* sobre ----------------------------------------------------------------- */
.sobre{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(36px,5.4vw,88px);align-items:start;
}
.sobre__txt > p{margin-bottom:var(--s2);font-size:15.5px;line-height:1.76;color:var(--ink-mut)}
.sobre__txt .lead{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(19px,2.15vw,27px);line-height:1.48;letter-spacing:-.014em;
  color:var(--ink);margin-bottom:var(--s3);
}
.quote{
  position:relative;margin:var(--s3) 0 var(--s4);padding:28px 30px;
  border-radius:var(--r);border:1px solid var(--line-2);
  background:linear-gradient(150deg,rgba(77,169,247,.06),rgba(17,22,27,.62));
  backdrop-filter:blur(6px);
}
.quote::before{
  content:'';position:absolute;left:0;top:24px;bottom:24px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--acc),transparent);
}
.quote p{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(17px,1.85vw,22px);line-height:1.54;color:var(--ink);letter-spacing:-.009em;
}
.quote cite{
  display:block;margin-top:var(--s2);font-style:normal;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-ice);
}
.duo{
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,2.4vw,34px);
  padding-top:var(--s3);border-top:1px solid var(--line);
}
.duo__col p:not(.micro){margin-top:12px;font-size:13.5px;line-height:1.62;color:var(--ink-mut)}
.duo__line{width:1px;background:linear-gradient(180deg,transparent,var(--line-2),transparent)}

/* foto do sobre: composição editorial, transborda o grid e sobe além do texto */
.sobre__fig{
  /* sangra até a borda da viewport: distância da caixa de conteúdo do .wrap
     até a borda = metade da folga do container + o padding. Vale em qualquer
     largura, inclusive abaixo de --wrap. */
  --bleed:calc(max(0px,(100vw - var(--wrap)) / 2) + var(--pad));
  position:relative;aspect-ratio:4/5;
  margin-right:calc(var(--bleed) * -1);margin-top:calc(var(--s5) * -1);
  border-radius:var(--r-lg) 0 0 var(--r-lg);border-right:0;
}
.sobre__fig::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:26%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,9,11,.62),transparent);
}
.sobre__fig .ph__c--br{right:auto;left:13px;border-right:0;border-left:1px solid}

/* ==========================================================================
   EQUIPE
   ========================================================================== */
.equipe{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4.2vw,80px);align-items:start;
}
.equipe__r p{font-size:15.5px;line-height:1.76;color:var(--ink-mut)}
.equipe__note{
  display:flex;align-items:center;margin-top:var(--s3);padding-top:var(--s2);
  border-top:1px solid var(--line);
  font-size:12px !important;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink) !important;
}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:var(--s6)}
.team__card h3{margin-top:var(--s2);font-size:17px;font-weight:600;letter-spacing:-.022em}
.team__card .micro{margin-top:5px}
.team__card p:last-child{margin-top:12px;font-size:14px;line-height:1.62;color:var(--ink-mut)}
.team__ph{aspect-ratio:4/5}

/* ==========================================================================
   11 · CONSUMIDOR
   ========================================================================== */
.cons{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.ccard{
  position:relative;padding:clamp(26px,2.8vw,34px) clamp(20px,2.2vw,28px);
  border-radius:var(--r);border:1px solid var(--line);background:var(--surf-t);
  backdrop-filter:blur(6px);
  transition:border-color .48s,transform .58s var(--ease),background .48s;
  overflow:hidden;
}
.ccard::after{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);
  transform:scaleX(0);transition:transform .65s var(--ease);
}
.ccard:hover{transform:translateY(-5px);border-color:var(--line-2);background:var(--surf-t2)}
.ccard:hover::after{transform:scaleX(1)}
.ccard__n{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  color:var(--acc);font-variant-numeric:tabular-nums;margin-bottom:var(--s3);
}
.ccard h3{font-size:16.5px;font-weight:600;letter-spacing:-.022em;line-height:1.26;margin-bottom:11px}
.ccard p{font-size:13.8px;line-height:1.62;color:var(--ink-mut)}

/* ==========================================================================
   12 · COMO FUNCIONA
   ========================================================================== */
.proc__top{
  display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);
  gap:clamp(34px,4.8vw,74px);align-items:center;
  margin-bottom:clamp(52px,6.5vw,92px);
}
.proc__top .sh{margin-bottom:0}
.proc__fig{width:100%;max-width:340px;justify-self:end;aspect-ratio:868/1118}

.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,40px);padding-top:6px}
.steps__line{position:absolute;left:0;right:0;top:16px;height:1px;background:var(--line-2);z-index:0}
.steps__line i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--acc-deep),var(--acc),var(--acc-ice));
  transition:transform 1.9s var(--ease) .2s;
}
.steps.is-in .steps__line i{transform:scaleX(1)}
.step{position:relative;z-index:1;padding-top:50px}
.step__n{
  position:absolute;top:0;left:0;display:grid;place-items:center;
  width:33px;height:33px;border-radius:50%;
  background:var(--bg-0);border:1px solid var(--line-2);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--acc-ice);
  font-variant-numeric:tabular-nums;
  transition:border-color .55s,box-shadow .55s;
}
.step.in .step__n{border-color:rgba(143,224,255,.46);box-shadow:0 0 0 4px rgba(77,169,247,.07)}
.step h3{font-size:clamp(16px,1.55vw,19px);font-weight:600;letter-spacing:-.026em;line-height:1.24;margin-bottom:11px;text-wrap:balance}
.step p{font-size:13.8px;line-height:1.64;color:var(--ink-mut)}

/* ==========================================================================
   13 · PROVA SOCIAL — composição assimétrica
   ========================================================================== */
.sec--depo{overflow:hidden}
.depo{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(24px,3vw,44px);align-items:stretch;
}
/* depoimento principal, tratado como abertura editorial */
.dfeat{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(30px,3.4vw,46px);border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:linear-gradient(158deg,rgba(77,169,247,.07),rgba(17,22,27,.8) 52%);
  backdrop-filter:blur(10px);
  overflow:hidden;
}
.dfeat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(143,224,255,.42),transparent);
}
.dfeat__mark{
  font-family:var(--serif);font-size:70px;line-height:.52;height:.42em;color:var(--acc);
  opacity:.3;margin-bottom:var(--s3);
}
.dfeat__t{
  flex:1;font-family:var(--serif);font-weight:300;
  font-size:clamp(18px,1.9vw,23.5px);line-height:1.52;color:#DCE1E6;letter-spacing:-.008em;
}
.dfeat footer{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line-2)}
.dfeat footer strong{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em}
.dfeat footer .micro{margin-top:5px}

.depo__side{display:flex;flex-direction:column;min-width:0}
.depo__hd{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-bottom:var(--s2);
}
.depo__track{
  display:flex;gap:clamp(14px,1.6vw,20px);overflow-x:auto;flex:1;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 4px 10px;margin:-4px -4px 0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.depo__track::-webkit-scrollbar{display:none}
.dcard{
  flex:0 0 clamp(248px,25vw,320px);scroll-snap-align:start;
  display:flex;flex-direction:column;
  padding:clamp(22px,2.3vw,28px);border-radius:var(--r);
  border:1px solid var(--line);background:var(--surf-t);backdrop-filter:blur(6px);
  transition:border-color .48s,background .48s,transform .55s var(--ease);
}
.dcard:hover{border-color:var(--line-2);background:var(--surf-t2);transform:translateY(-4px)}
.stars{display:flex;gap:4px;margin-bottom:var(--s2)}
.stars i{
  width:12px;height:12px;background:var(--acc-ice);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.dfeat .stars i{width:14px;height:14px}
.dcard__t{
  flex:1;font-family:var(--serif);font-weight:300;
  font-size:15.5px;line-height:1.58;color:#CFD5DA;letter-spacing:-.005em;
}
.dcard footer{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line)}
.dcard footer strong{display:block;font-size:14px;font-weight:600;letter-spacing:-.012em}
.dcard footer .micro{margin-top:4px;font-size:9.5px}

.depo__ui{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:var(--s3)}
.depo__src{max-width:46ch;line-height:1.5}
.depo__btns{display:flex;gap:9px;flex:0 0 auto}
.rnd{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--ink-mut);
  transition:border-color .38s,color .38s,background .38s,transform .38s var(--ease);
}
.rnd svg{width:15px;height:15px}
.rnd:hover{border-color:var(--acc);color:var(--acc-ice);background:var(--acc-wash)}
.rnd:active{transform:scale(.94)}

/* ==========================================================================
   14 · CONTEÚDOS + FAQ
   ========================================================================== */
.cont{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.tcard{
  position:relative;display:flex;flex-direction:column;
  min-height:218px;padding:clamp(23px,2.4vw,30px);border-radius:var(--r);
  border:1px solid var(--line);background:var(--surf-t);backdrop-filter:blur(6px);
  overflow:hidden;
  transition:border-color .48s,background .48s,transform .58s var(--ease);
}
.tcard::after{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .55s;pointer-events:none;
  background:radial-gradient(120% 100% at 100% 100%,rgba(77,169,247,.11),transparent 60%);
}
.tcard:hover{transform:translateY(-5px);border-color:var(--line-2);background:var(--surf-t2)}
.tcard:hover::after{opacity:1}
.tcard .micro{color:var(--acc)}
.tcard h3{
  margin-top:var(--s2);font-size:clamp(17px,1.75vw,20px);font-weight:500;
  letter-spacing:-.028em;line-height:1.24;text-wrap:balance;
}
.tcard__tag{
  margin-top:auto;padding-top:var(--s3);
  font-size:10px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-dim);
}
.tcard__tag::before{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--ink-dim);margin-right:8px;vertical-align:middle;
}

.faq__wrap{max-width:1000px}
.faq{border-top:1px solid var(--line-2)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:26px 4px;text-align:left;
}
.faq__q span{
  font-size:clamp(16px,1.65vw,20px);font-weight:500;letter-spacing:-.026em;line-height:1.34;
  transition:color .32s;
}
.faq__q i{position:relative;width:17px;height:17px;flex:0 0 auto;transition:transform .48s var(--ease)}
.faq__q i::before,.faq__q i::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--acc-ice);border-radius:2px;
  transition:opacity .35s,transform .48s var(--ease);
}
.faq__q i::before{width:15px;height:1.4px;transform:translate(-50%,-50%)}
.faq__q i::after{width:1.4px;height:15px;transform:translate(-50%,-50%)}
.faq__q:hover span{color:#fff}
.faq__i.is-open .faq__q i{transform:rotate(180deg)}
.faq__i.is-open .faq__q i::after{opacity:0;transform:translate(-50%,-50%) scaleY(0)}
.faq__a{overflow:hidden;height:0;transition:height .52s var(--ease)}
.faq__a p{
  padding:0 60px 28px 4px;max-width:70ch;
  font-size:15px;line-height:1.76;color:var(--ink-mut);
}

/* ==========================================================================
   15 · CTA + FOOTER
   ========================================================================== */
.cta{
  position:relative;padding:clamp(92px,12.5vw,160px) 0 clamp(28px,3.4vw,44px);
  overflow:hidden;isolation:isolate;
}
.cta__glow{
  position:absolute;z-index:-2;top:-30%;right:-6%;width:min(980px,105vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(77,169,247,.17),rgba(30,78,120,.05) 44%,transparent 66%);
  filter:blur(26px);
}
.cta__dest{
  position:relative;margin-top:clamp(56px,7vw,100px);
  height:clamp(84px,10vw,120px);padding-inline:var(--pad);pointer-events:none;
}
.cta__dest svg{
  position:absolute;top:0;left:var(--pad);
  width:calc(100% - var(--pad) * 2);height:100%;overflow:visible;
}
#ctaPath{stroke-dasharray:100;stroke-dashoffset:100}
.cta.is-in #ctaPath{animation:draw 2.2s var(--ease) .2s forwards}
.cta__pts{position:absolute;inset:0 var(--pad)}
.cta__node{
  position:absolute;left:94%;top:18.3%;margin:-5.5px 0 0 -5.5px;
  width:11px;height:11px;border-radius:50%;background:var(--acc-ice);
  opacity:0;transform:scale(.2);
}
.cta.is-in .cta__node{animation:pop .7s var(--ease) 1.15s forwards,pulse2 3s var(--ease-io) 1.9s infinite}
.cta__lab{
  position:absolute;right:6%;top:calc(18.3% + 14px);
  padding:5px 12px;border-radius:20px;
  background:rgba(77,169,247,.11);border:1px solid rgba(143,224,255,.3);
  backdrop-filter:blur(6px);
  font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  opacity:0;transition:opacity .7s var(--ease) 1.35s;
}
.cta.is-in .cta__lab{opacity:1}

.cta__in{max-width:860px;position:relative;z-index:1}
.cta__h{
  font-size:clamp(32px,5.4vw,70px);line-height:1.02;letter-spacing:-.044em;font-weight:600;
  text-wrap:balance;
}
.cta__p{
  margin-top:var(--s3);max-width:48ch;font-size:clamp(16px,1.55vw,20px);line-height:1.64;
  color:var(--ink-mut);
}
.cta__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,3.6vw,46px)}
.cta__disc{margin-top:var(--s4);max-width:52ch;font-size:12px;line-height:1.64;color:var(--ink-dim)}

/* footer ---------------------------------------------------------------- */
/* A FAIXA DE BAIXO É DO BOTÃO FLUTUANTE.
   O botão de WhatsApp é fixo no canto inferior direito da JANELA, e a linha de
   CNPJ e OAB é a última coisa da PÁGINA: no fim da rolagem os dois disputam o
   mesmo lugar. Medido em 1280, 1100, 1024, 834, 430 e 375 px de largura, com
   a página rolada até o fim: o botão cobria o final da linha em todas — em
   1024 a linha terminava em x=973 e o botão comecava em x=946, e o "RS
   139.572A" ficava atrás dele. Reservar ~96 px no pé resolve de uma vez, em
   qualquer largura, sem depender de onde o texto quebra. */
.ft{position:relative;border-top:1px solid var(--line-2);
  padding:clamp(64px,8vw,104px) 0 clamp(96px,8vw,112px)}
.ft::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,17,21,0),rgba(13,17,21,.7));
}
.ft__mark{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;padding-bottom:clamp(36px,4.4vw,56px);
}
.ft__logo{display:flex;flex-direction:column;gap:var(--s3);color:var(--ink)}
.ft__lock{display:flex;align-items:center;gap:20px}
.ft__lock svg{width:auto;height:clamp(56px,7vw,74px);color:currentColor;overflow:visible;flex:0 0 auto}
.ft__lock .bar{width:1px;height:clamp(34px,4.4vw,44px);background:var(--line-3);flex:0 0 auto}
.ft__word{
  font-family:var(--brand);font-weight:300;letter-spacing:.3em;line-height:1;
  font-size:clamp(19px,2.6vw,29px);white-space:nowrap;
}
.ft__tag{
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acc-ice);
}
.ft__cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.ft__cta .micro{color:var(--ink-dim)}

.ft__cols{
  display:grid;grid-template-columns:minmax(0,1.15fr) repeat(3,minmax(0,.85fr));
  gap:clamp(30px,4vw,68px);
  padding:clamp(38px,4.6vw,58px) 0;
  border-top:1px solid var(--line);
}
.ft__col{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ft__col .micro{margin-bottom:6px}
.ft__col a,.ft__col span:not(.micro):not(.ft__ph){
  font-size:13.8px;color:var(--ink-mut);width:fit-content;
  transition:color .32s,transform .38s var(--ease);
}
.ft__col a:hover{color:var(--ink);transform:translateX(3px)}
.ft__col p{font-size:13.8px;line-height:1.72;color:var(--ink-mut)}
/* .ft__ph = PENDÊNCIA, some quando o dado chegar. .ft__lab = rótulo de
   verdade, fica. Mesma aparência, significados opostos — separar as duas
   evita que alguém apague os rótulos dos comerciais achando que são sobra. */
.ft__ph,.ft__lab{
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);opacity:.62;
}
.ft__legal{padding-top:var(--s4);border-top:1px solid var(--line)}
.ft__legal p{font-size:11.5px;line-height:1.78;color:var(--ink-dim);max-width:106ch}
.ft__meta{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:var(--s3);
  font-size:11.5px;color:var(--ink-dim);
}

/* whatsapp flutuante --------------------------------------------------- */
.wa{
  position:fixed;right:clamp(16px,2.2vw,28px);bottom:clamp(16px,2.2vw,28px);z-index:880;
  display:inline-flex;align-items:center;gap:0;
  height:54px;padding:0 15px;border-radius:27px;
  background:var(--wa);color:#04120A;
  box-shadow:0 14px 36px -12px rgba(37,211,102,.5),0 2px 8px rgba(0,0,0,.4);
  opacity:0;transform:translateY(18px) scale(.9);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),gap .42s var(--ease),padding .42s var(--ease);
}
.wa.is-on{opacity:1;transform:none;pointer-events:auto}
.wa svg{width:25px;height:25px;flex:0 0 auto}
.wa span{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:14px;font-weight:600;transition:max-width .45s var(--ease);
}
.wa:hover{gap:10px}
.wa:hover span{max-width:110px}

/* ==========================================================================
   REGISTRO E ALCANCE (05)
   ========================================================================== */
.reg{
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1fr);
  gap:clamp(34px,5vw,82px);align-items:start;
}

/* A MOLDURA DESLOCADA FICA NO ENVOLTÓRIO, NUNCA NA PRÓPRIA FOTO.
   Toda .ph deste site carrega clip-path — é assim que a foto entra, por wipe
   de baixo para cima — e clip-path recorta o ::before quer haja overflow:hidden
   ou não. Um ::before na figure simplesmente nunca apareceria.
   Mexer nisso saía ainda mais caro: ao devolver overflow e jogar o recorte
   para um <picture> absoluto, a imagem parava de carregar. Com o clip fechado
   em inset(0 0 100% 0) e o <picture> fora do fluxo, o Chromium tratava o
   loading="lazy" como fora de vista e adiava para sempre — a foto não
   aparecia, sem um único erro no console.
   Então a .ph fica intacta, e quem desenha a moldura é o pai. */
.reg__quadro{position:relative;z-index:0}
.reg__quadro::before{
  content:'';position:absolute;z-index:-1;border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  inset:clamp(13px,1.5vw,21px) calc(-1 * clamp(13px,1.5vw,21px))
        calc(-1 * clamp(13px,1.5vw,21px)) clamp(13px,1.5vw,21px);
}
.reg__fig{aspect-ratio:4/5;margin:0}

/* placa de identificação sobre a foto.
   `.ph figcaption` tem especificidade (0,1,1) e fixa left/right/bottom/max-width;
   uma classe sozinha (0,1,0) PERDE dela. Daí o seletor descendente. */
.ph .placa{
  left:0;right:0;bottom:0;z-index:3;max-width:none;
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:17px clamp(17px,1.9vw,23px);
  background:linear-gradient(100deg,rgba(7,9,11,.92),rgba(7,9,11,.44));
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-top:1px solid var(--line-2);
}
.placa__id strong{
  display:block;font-family:var(--brand);font-weight:400;
  font-size:clamp(16.5px,1.5vw,21px);letter-spacing:.012em;line-height:1.18;color:var(--ink);
}
.placa__id .micro{margin-top:7px}
.placa__ufs{display:flex;gap:5px;flex:0 0 auto}
.placa__ufs i{
  display:grid;place-items:center;width:27px;height:27px;border-radius:7px;
  border:1px solid var(--line-2);background:rgba(7,9,11,.55);
  font-family:var(--brand);font-style:normal;font-size:10.5px;font-weight:500;
  letter-spacing:.05em;color:var(--ink-mut);
}

.reg__txt .sh{margin-bottom:clamp(24px,2.8vw,34px)}
.reg__txt .lead{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(18px,2vw,25px);line-height:1.5;letter-spacing:-.014em;color:var(--ink);
}

.oabs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.2vw,15px);margin-top:clamp(26px,3vw,36px);
}
.oab{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:center;
  padding:clamp(15px,1.6vw,19px);border-radius:var(--r);
  border:1px solid var(--line-2);
  background:linear-gradient(150deg,rgba(77,169,247,.055),rgba(17,22,27,.55));
  transition:border-color .42s,transform .5s var(--ease),box-shadow .5s var(--ease);
}
.oab:hover{
  border-color:rgba(143,224,255,.34);transform:translateY(-2px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
}
.oab__uf{
  display:grid;place-items:center;width:50px;height:50px;border-radius:12px;
  border:1px solid var(--line-2);background:rgba(7,9,11,.55);
  font-family:var(--brand);font-weight:400;font-size:19px;letter-spacing:.05em;
  color:var(--acc-ice);
}
.oab__box{display:flex;flex-direction:column;gap:3px;min-width:0}
.oab__n{
  font-style:normal;font-size:17.5px;font-weight:600;letter-spacing:-.022em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.oab__nome{font-size:11.5px;line-height:1.4;color:var(--ink-dim)}

.reg__nota{
  margin-top:clamp(22px,2.6vw,30px);padding-left:19px;
  border-left:1px solid var(--line-2);max-width:66ch;
  font-size:13.5px;line-height:1.74;color:var(--ink-dim);
}

.alcance{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(16px,2.2vw,32px);
  margin-top:clamp(26px,3vw,36px);padding-top:var(--s3);border-top:1px solid var(--line-2);
}
.alcance__i p:not(.micro){
  margin-top:7px;font-size:14.5px;line-height:1.4;color:var(--ink);letter-spacing:-.008em;
}
.alcance__sep{width:1px;height:34px;background:var(--line-2);flex:0 0 auto}

/* ==========================================================================
   CONHEÇA NOSSO ESPAÇO (07)
   ========================================================================== */
.esp{
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.3vw,18px);
}
.esp__t{margin:0}
.esp__t--a{grid-column:1;grid-row:1 / span 2;aspect-ratio:4/5}
.esp__t--b{grid-column:2;grid-row:1}
.esp__t--c{grid-column:3;grid-row:1}
.esp__t--d{grid-column:2;grid-row:2}
.esp__t--e{grid-column:3;grid-row:2}

/* zoom no hover SEM matar a paralaxe: a escala vira variável, para os dois
   transforms (o simples e o com translate) continuarem coexistindo. */
.esp__t img{transform:scale(var(--sc,1));transition:transform 1.15s var(--ease)}
.esp__t.ph--px img{transform:translate3d(0,var(--py,0px),0) scale(var(--sc,1.06))}
.esp__t:hover{--sc:1.055}
.esp__t.ph--px:hover{--sc:1.10}
.esp__t figcaption{transform:translateY(7px);opacity:.8;
  transition:transform .6s var(--ease),opacity .5s var(--ease)}
.esp__t:hover figcaption{transform:none;opacity:1}

.esp .esp__t.reveal:nth-child(2){transition-delay:.08s}
.esp .esp__t.reveal:nth-child(3){transition-delay:.16s}
.esp .esp__t.reveal:nth-child(4){transition-delay:.24s}
.esp .esp__t.reveal:nth-child(5){transition-delay:.32s}

.esp__pe{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:22px 40px;margin-top:clamp(26px,3vw,38px);padding-top:var(--s3);
  border-top:1px solid var(--line-2);
}
.esp__dl{display:flex;flex-wrap:wrap;gap:20px clamp(26px,3.4vw,54px);margin:0}
.esp__dl dt{margin-bottom:7px}
.esp__dl dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink);letter-spacing:-.008em}
.esp__mapa{flex:0 0 auto}

/* ==========================================================================
   OS DOIS COMERCIAIS
   O número é o produto final de toda a página — não pode terminar como nota
   de rodapé em 13,5 px dentro de uma frase explicativa. Vira dado: rótulo
   pequeno em cima, número grande em tabular-nums embaixo, o glifo do
   WhatsApp no canto acendendo no hover.
   ========================================================================== */
.tels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.2vw,14px);margin-top:clamp(26px,3vw,34px);max-width:40rem}
.tel{position:relative;display:flex;flex-direction:column;gap:9px;
  padding:clamp(16px,1.8vw,20px) clamp(18px,2vw,24px);
  border-radius:var(--r);border:1px solid var(--linha-2);
  background:linear-gradient(150deg,rgba(77,169,247,.055),rgba(17,22,27,.5));
  transition:border-color .42s,transform .5s var(--ease),box-shadow .5s var(--ease);
}
.tel:hover{border-color:rgba(37,211,102,.42);transform:translateY(-2px);
  box-shadow:0 20px 44px -24px rgba(0,0,0,.95)}
.tel__k{color:var(--acc-ice)}
.tel__n{font-size:clamp(19px,2.1vw,26px);font-weight:600;letter-spacing:-.022em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
  transition:color .35s}
.tel:hover .tel__n{color:#fff}
.tel__i{position:absolute;top:clamp(14px,1.6vw,18px);right:clamp(16px,1.8vw,20px);
  width:19px;height:19px;color:var(--ink-dim);opacity:.5;
  transition:color .4s,opacity .4s,transform .5s var(--ease)}
.tel__i svg{width:100%;height:100%}
.tel:hover .tel__i{color:var(--wa);opacity:1;transform:scale(1.08)}
@media (max-width:560px){ .tels{grid-template-columns:1fr} }
.cta__disc{margin-top:var(--s3)}

/* rodapé: endereço e registros ------------------------------------------- */
.ft__end{font-style:normal;font-size:13.8px;line-height:1.74;color:var(--ink-mut)}
.ft__regs{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px 9px;
  font-variant-numeric:tabular-nums;
}
.ft__regs b{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);opacity:.75;
}
.ft__regs i{display:inline-block;width:1px;height:11px;background:var(--line-2)}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-line{display:block;overflow:hidden;padding-bottom:.04em}
.reveal-line > span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.reveal-line.in > span{transform:none}
.reveal-line:nth-child(2) > span{transition-delay:.09s}
.reveal-line:nth-child(3) > span{transition-delay:.18s}
.tri__cards .tri__card{opacity:0;transform:translateY(16px);
  transition:opacity .72s var(--ease),transform .72s var(--ease),border-color .45s,background .45s}
.tri.in .tri__card{opacity:1;transform:none}
.tri.in .tri__card:nth-child(1){transition-delay:.04s}
.tri.in .tri__card:nth-child(2){transition-delay:.09s}
.tri.in .tri__card:nth-child(3){transition-delay:.14s}
.tri.in .tri__card:nth-child(4){transition-delay:.19s}
.tri.in .tri__card:nth-child(5){transition-delay:.24s}
.tri.in .tri__card:nth-child(6){transition-delay:.29s}
.auth__cards .pcard{opacity:0;transform:translateY(18px);
  transition:opacity .85s var(--ease),transform .85s var(--ease),background .5s}
.auth__cards .pcard.in{opacity:1;transform:none}
.cons .ccard.reveal:nth-child(2),.cont .tcard.reveal:nth-child(2){transition-delay:.08s}
.cons .ccard.reveal:nth-child(3),.cont .tcard.reveal:nth-child(3){transition-delay:.16s}
.cons .ccard.reveal:nth-child(4),.cont .tcard.reveal:nth-child(4){transition-delay:.24s}
.cont .tcard.reveal:nth-child(5){transition-delay:.32s}
.cont .tcard.reveal:nth-child(6){transition-delay:.4s}
.steps .step.reveal:nth-child(3){transition-delay:.1s}
.steps .step.reveal:nth-child(4){transition-delay:.2s}
.steps .step.reveal:nth-child(5){transition-delay:.3s}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
/* seções novas ----------------------------------------------------------- */
@media (max-width:1020px){
  .reg{grid-template-columns:1fr;gap:clamp(32px,5vw,46px)}
  .reg__quadro{max-width:25rem}
}
@media (max-width:980px){
  .esp{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .esp__t--a{grid-column:1;grid-row:1 / span 2}
  .esp__t--b{grid-column:2;grid-row:1}
  .esp__t--c{grid-column:2;grid-row:2}
  .esp__t--d,.esp__t--e{grid-column:auto;grid-row:auto;aspect-ratio:3/2}
}
@media (max-width:620px){
  .esp{grid-template-columns:1fr}
  .esp__t--a,.esp__t--b,.esp__t--c{grid-column:auto;grid-row:auto}
  .esp__t--b,.esp__t--c{aspect-ratio:3/2}
  .esp__pe{align-items:flex-start}
}
@media (max-width:560px){
  .oabs{grid-template-columns:1fr}
  .reg__quadro{max-width:none;margin-right:clamp(13px,1.5vw,21px)}
  .placa__ufs{display:none}
  .alcance__sep{display:none}
  .alcance{gap:14px 26px}
}


/* notebooks de tela baixa: o hero tem de caber em 100svh junto com a rota,
   senão a faixa animada nasce abaixo da dobra (medido em 1180x820) */
@media (min-width:1021px) and (max-height:960px){
  .hero{padding-top:calc(var(--hd-h) + 16px)}
  .hero__h1{font-size:clamp(36px,4.9vw,64px)}
  .rota{height:clamp(78px,9vw,112px);margin-top:clamp(16px,2.2vw,30px)}
  .hero__trust{margin-top:clamp(20px,2.4vw,30px);padding-top:18px}
  .hero__acts{margin-top:clamp(20px,2.2vw,28px)}
}
@media (min-width:1021px) and (max-height:770px){
  .hero{padding-top:calc(var(--hd-h) + 8px)}
  .hero__h1{font-size:clamp(34px,4.2vw,55px)}
  .hero__sub{font-size:16px;margin-top:16px}
  .rota{height:clamp(68px,7.6vw,92px);margin-top:14px}
  .hero__trust{margin-top:18px;padding-top:16px}
  .trust__num{font-size:clamp(26px,2.6vw,34px)}
}

@media (max-width:1240px){
  .reg{gap:clamp(28px,3.6vw,52px)}
  .nav a{padding:10px 11px;font-size:13px}
}
@media (max-width:1120px){
  /* o sexto item da navegação só cabe entre 1021 e 1120 se o cabeçalho ceder
     nos dois lugares ao mesmo tempo: o respiro entre os blocos e o interior
     dos itens. Só um dos dois não fecha a conta. */
  .hd__in{gap:18px}
  .logo__sub{font-size:8px;letter-spacing:.17em}
  .nav a{padding:10px 6px;font-size:12.5px;letter-spacing:-.004em}
  .hd__cta .btn--sm{padding:0 17px}
  .logo{gap:12px}
}

@media (max-width:1120px){
  .hero__ph{width:62%}
  .hero__text{max-width:min(560px,100%)}
}

@media (max-width:1020px){
  :root{--hd-h:72px}
  .nav,.hd__cta{display:none}
  .burger{display:block}

  /* HERO MOBILE — composição própria: texto primeiro, foto full-bleed depois.
     A foto entra sem moldura, vedada em cima e embaixo, com o rosto no terço
     superior do recorte dedicado (renan-hero-mobile). */
  .hero{
    min-height:auto;display:flex;flex-direction:column;
    padding-bottom:clamp(24px,5vw,42px);
  }
  .hero__in{order:1;align-self:auto}
  .hero__ph{
    order:2;position:relative;inset:auto;width:100%;
    aspect-ratio:4/5;max-height:64svh;
    margin-top:clamp(30px,6vw,48px);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 76%,transparent 99%);
            mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 76%,transparent 99%);
  }
  .hero__ph img{
    object-position:50% 18%;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero__ph::before{display:none}
  .hero__cap{
    order:3;position:relative;top:auto;bottom:auto;right:auto;
    padding:0 var(--pad);text-align:left;
    margin-top:calc(var(--s3) * -1);
  }
  .hero__text{max-width:none}
  .hero__sub{max-width:52ch}
  /* align-self:stretch NÃO é redundante aqui.
     A regra base da .rota traz `align-self:end`, que no desktop não faz nada:
     o hero não é contêiner flex ali. A partir de 1020 px o hero VIRA coluna
     flex, e aí o align-self:end passa a valer no eixo transversal — que numa
     coluna é o horizontal. Resultado: a rota encolhia para a largura do
     conteúdo e ia para a direita. Como tudo dentro dela é position:absolute,
     essa largura era 40 px: os marcos ficavam empilhados na borda com o texto
     vazando para fora da tela.
     O `.hero__in` logo acima já tinha recebido `align-self:auto` pelo mesmo
     motivo; a .rota tinha ficado de fora. */
  .rota{order:4;align-self:stretch}

  .tri{grid-template-columns:1fr}
  .auth,.pax,.sobre,.proc__top,.equipe,.depo{grid-template-columns:1fr}
  .auth__cards{grid-template-columns:1fr 1fr}
  .cons{grid-template-columns:1fr 1fr}
  .cont{grid-template-columns:1fr 1fr}
  .proc__fig{max-width:min(360px,68vw);justify-self:start}
  .proc__top{align-items:start;margin-bottom:clamp(40px,6vw,60px)}
  .team{grid-template-columns:1fr 1fr}

  /* foto do sobre volta ao grid, mas segue full-bleed à direita */
  /* A CAIXA VOLTA À PROPORÇÃO EM QUE A IMAGEM FOI COMPOSTA.
     Em 16:11 sobre uma imagem 4:5, o cover jogava fora 45% pelo topo e pela
     base, centrado — e a cabeça está nos primeiros 23% (cabelo em y=38 de
     1026). Era a primeira coisa a sair.
     Com 4:5 não há corte nenhum no celular (370 x 462 cabe no teto). O teto
     existe para o tablet, onde 4:5 daria 1125 px de altura; e o
     `object-position:50% 0%` garante que, quando ele morder, quem sai é o
     rodapé — pernas e poltrona —, nunca o rosto. */
  .sobre__fig{margin-top:0;aspect-ratio:4/5;max-height:min(72svh,560px)}
  .sobre__fig img{object-position:50% 0%}

  /* timeline vira vertical já no tablet: linha horizontal em 2 colunas quebra */
  .steps{grid-template-columns:1fr;gap:0;padding-top:0;padding-left:46px}
  .steps__line{left:16px;right:auto;top:8px;bottom:8px;width:1px;height:auto}
  .steps__line i{width:100%;height:100%;transform:scaleY(0);transform-origin:top;
    background:linear-gradient(180deg,var(--acc-deep),var(--acc),var(--acc-ice))}
  .steps.is-in .steps__line i{transform:scaleY(1)}
  .step{padding:0 0 36px}
  .step:last-of-type{padding-bottom:0}
  .step__n{left:-46px;top:-3px}
  .step h3{font-size:19px}
  .step p{font-size:14.5px;max-width:56ch}

  .depo{gap:var(--s4)}
  .dcard{flex:0 0 clamp(248px,64vw,320px)}
  .ft__cols{grid-template-columns:1fr 1fr}
  .ft__col--brand{grid-column:1/-1}
}

@media (max-width:720px){
  .rota{height:clamp(84px,22vw,110px);margin-top:clamp(22px,5vw,34px)}
  .rota__wps li:nth-child(2) span,
  .rota__wps li:nth-child(3) span{display:none}
  .rota__wps li span{font-size:8.5px;letter-spacing:.13em}
  .hero__trust{flex-wrap:wrap;gap:14px 18px}
  .trust__txt--wide,.trust__sep{display:none}
  .tri__cards{grid-template-columns:1fr 1fr;gap:10px}
  .tri__card{padding:17px 15px;gap:12px}
  .tri__card svg{width:22px;height:22px}
  .tri__card span{font-size:13.2px}
  .auth__cards{grid-template-columns:1fr}
  .cons,.cont{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr;gap:24px}
  .duo__line{display:none}
  .duo__col + .duo__col{padding-top:24px;border-top:1px solid var(--line)}
  .depo__ui{flex-direction:column;align-items:flex-start}
  .depo__btns{align-self:flex-end}
  .faq__a p{padding-right:8px}
  .team{grid-template-columns:1fr}
  .ft__cols{grid-template-columns:1fr;gap:var(--s4)}
  .ft__mark{flex-direction:column;align-items:flex-start}
  .btn{--bh:52px}
  .hero__acts .btn,.cta__acts .btn{flex:1 1 100%}
  .cta__lab{right:14%}
  /* mantém 4:5: ver a nota em 1020 px */
}

@media (max-width:480px){
  .hero__ph{aspect-ratio:5/6;max-height:58svh}
  .pax__item span{font-size:15.5px}
  .wa{height:52px;padding:0 13px}
  .wa svg{width:24px;height:24px}
  .dfeat__mark{font-size:58px}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal,.reveal-line > span,.tri__cards .tri__card,.auth__cards .pcard{opacity:1;transform:none}
  #rotaPath,#ctaPath,.preloader__mono path,.auth__traj path{stroke-dashoffset:0}
  .rota__wps li,.preloader__mono circle,.cta__node,.auth__traj i,.hero__cap{opacity:1;transform:none}
  .preloader__word{clip-path:none}
  .preloader__sub{opacity:1;transform:none;animation:none}
  .steps__line i{transform:none}
  .jato{display:none}
  .depo__track{scroll-behavior:auto}
}

/* eyebrow do hero em duas linhas no mobile estreito: corta a segunda metade */
@media (max-width:600px){
  .hide-xs{display:none}
}

/* ==========================================================================
   16 · EFEITOS
   ========================================================================== */

/* barra de progresso de leitura ------------------------------------------ */
.prog{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:950;pointer-events:none;
  background:linear-gradient(90deg,var(--acc-deep),var(--acc) 45%,var(--acc-ice));
  transform:scaleX(var(--p,0));transform-origin:left;
  box-shadow:0 0 12px rgba(77,169,247,.5);
}

/* faixa marquee — divide seções fisicamente e dá movimento ---------------- */
.mq{
  position:relative;overflow:hidden;padding:clamp(16px,2vw,24px) 0;
  border-block:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(17,23,30,.72),rgba(9,12,16,.6));
}
.mq::before,.mq::after{
  content:'';position:absolute;top:0;bottom:0;width:clamp(60px,12vw,180px);z-index:2;
  pointer-events:none;
}
.mq::before{left:0;background:linear-gradient(90deg,var(--bg-0),transparent)}
.mq::after{right:0;background:linear-gradient(270deg,var(--bg-0),transparent)}
.mq__track{display:flex;width:max-content;animation:mq 42s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
.mq__grp{display:flex;align-items:center;flex:0 0 auto}
.mq__grp span{
  display:inline-flex;align-items:center;gap:clamp(22px,3vw,44px);
  padding-right:clamp(22px,3vw,44px);
  font-size:clamp(12px,1.35vw,16px);font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-mut);white-space:nowrap;
}
.mq__grp span::after{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--acc);
  flex:0 0 auto;box-shadow:0 0 9px var(--acc-glow);
}
.mq--rev .mq__track{animation-direction:reverse;animation-duration:52s}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}

/* spotlight seguindo o ponteiro dentro dos cards -------------------------- */
.tri__card,.pcard,.ccard,.tcard,.dcard{position:relative}
.tri__card > *,.pcard > *,.ccard > *,.tcard > *,.dcard > *{position:relative;z-index:1}
.spot::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
             rgba(120,196,255,.13),transparent 62%);
}
.spot:hover::after{opacity:1}

/* reveal palavra por palavra nos títulos de seção ------------------------- */
.js-split .w{
  display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;
}
.js-split .w > i{
  display:inline-block;font-style:normal;
  transform:translateY(108%);
  transition:transform .95s var(--ease);
  transition-delay:calc(var(--wi,0) * 55ms);
}
.reveal.in .js-split .w > i,.js-split.in .w > i{transform:none}

/* parallax suave nas fotos ------------------------------------------------ */
.ph img{will-change:transform}
.ph--px img{transform:translate3d(0,var(--py,0px),0) scale(1.06)}

/* borda viva no depoimento destaque -------------------------------------- */
.dfeat{isolation:isolate}
.dfeat::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  padding:1px;
  background:conic-gradient(from var(--a,0deg),transparent 0deg,
             rgba(143,224,255,.55) 42deg,rgba(77,169,247,.18) 92deg,transparent 150deg,
             transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 9s linear infinite;
}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}

/* linha viva sob os números de seção ------------------------------------- */
.eyebrow__num{position:relative}

/* botões: brilho que atravessa no hover ---------------------------------- */
.btn--primary::before,.btn--wa::before{
  content:'';position:absolute;top:0;bottom:0;width:42%;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-160%) skewX(-14deg);
  transition:transform .85s var(--ease);
}
.btn--primary:hover::before,.btn--wa:hover::before{transform:translateX(320%) skewX(-14deg)}
.btn--primary > *,.btn--wa > *{position:relative;z-index:2}

/* revelação das fotos por wipe -------------------------------------------
   QUEM RECORTA É O <picture>, NUNCA A PRÓPRIA .ph.

   O clip-path do elemento OBSERVADO zera o retângulo de interseção que o
   IntersectionObserver calcula no Chromium. Com o clip fechado em
   inset(0 0 100% 0), a razão de interseção é 0, nunca alcança o threshold de
   0,08 — o observador não dispara, a classe .in não entra, e o clip não abre.
   A animação tranca a si mesma: a foto fica invisível para sempre, e não há
   um único erro no console para denunciar.

   Medido nas duas pontas, rolando a página inteira:
       com clip-path na .ph   ->  0 de 8 fotos revelaram
       sem clip-path na .ph   ->  8 de 8

   Passar o recorte para o <picture> resolve porque o elemento observado volta
   a ter geometria própria. O resto da carta — cantos, legenda e o degradê do
   ::after — entra por opacidade, meio segundo depois, para a placa não ficar
   flutuando sobre uma caixa vazia enquanto a imagem sobe. */
.ph{clip-path:none}
.ph.reveal{opacity:1;transform:none}
.ph.reveal > picture{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease)}
.ph.reveal.in > picture{clip-path:inset(0 0 0 0)}
.ph.reveal > :not(picture),.ph.reveal::before,.ph.reveal::after{
  opacity:0;transition:opacity .8s var(--ease) .38s;
}
.ph.reveal.in > :not(picture),.ph.reveal.in::before,.ph.reveal.in::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  .mq__track{animation:none}
  .dfeat::after{animation:none}
  .js-split .w > i{transform:none}
  .ph--px img{transform:none}
  .ph.reveal > picture{clip-path:none}
  .ph.reveal > :not(picture),.ph.reveal::before,.ph.reveal::after{opacity:1}
  .prog{display:none}
}

/* ==========================================================================
   CELULAR ESTREITO E ALVOS DE TOQUE
   ========================================================================== */
/* 320 px: o bloco de marca pedia 307 numa caixa de 280 e empurrava o
   cabeçalho para 332, criando rolagem horizontal na página inteira. */
@media (max-width:370px){
  .logo{gap:11px}
  .logo__emb{height:34px}
  .logo__bar{display:none}
  .logo__word{font-size:13px;letter-spacing:.2em}
  .logo__sub{font-size:7.4px;letter-spacing:.14em}
  .ft__lock{gap:14px}
  .ft__lock svg{height:46px}
  .ft__word{font-size:17px;letter-spacing:.22em}
  .ft__lock .bar{display:none}
}
/* dedo, não cursor: 40 px de altura mínima nos links de texto */
@media (max-width:768px){
  .ft__col a,.link,.cta__linhas a{
    display:inline-flex;align-items:center;min-height:40px;
  }
  .ft__col a{align-items:center}
}