/* ═══════════════════════════════════════════════════════════
   FERREIRA REPAROS — cinematic scroll landing
   ═══════════════════════════════════════════════════════════ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}

/* ---------- lenis ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- tokens ---------- */
:root{
  --g-950:#08090B;
  --g-900:#0B0C0E;
  --g-850:#101216;
  --g-800:#15181D;
  --g-750:#1B1F25;
  --g-700:#232830;
  --g-600:#333A45;
  --ink:#F3EDE3;
  --ink-2:#B7B0A4;
  --ink-3:#7E786E;
  --amber:#F2A93B;
  --amber-hi:#FFC554;
  --amber-dim:#8A6520;
  --wa:#25D366;
  --line:color-mix(in srgb, var(--ink) 11%, transparent);
  --line-2:color-mix(in srgb, var(--ink) 6%, transparent);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(1.15rem,4.5vw,4.5rem);
  --maxw:1280px;
  --r:14px;
  --ease:cubic-bezier(.22,.61,.28,1);
}

html{background:var(--g-900)}
body{
  font-family:var(--f-display);
  background:var(--g-900);
  color:var(--ink);
  font-size:clamp(15px,.55vw + 13.4px,17px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-loading{overflow:hidden}
::selection{background:var(--amber);color:#141414}
:focus-visible{outline:2px solid var(--amber-hi);outline-offset:3px;border-radius:4px}

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

/* ---------- tipografia ---------- */
.display{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(2.5rem,7.2vw,6.2rem);
  line-height:.94;
  letter-spacing:-.038em;
  text-wrap:balance;
}
.display--sm{font-size:clamp(2rem,4.6vw,3.9rem);line-height:1.0;letter-spacing:-.032em}
.display em{font-style:normal;color:var(--amber);}
/* A máscara da animação por linha precisa ser mais alta que a caixa de texto:
   com line-height .94 os descendentes (g, j, q, ç) e os acentos altos ficam
   fora da linha e eram cortados pelo overflow. O padding aumenta a máscara e a
   margem negativa devolve a entrelinha original — nada muda de posição. */
.display .ln{
  display:block;overflow:hidden;
  padding-block:.14em .26em;
  margin-block:-.14em -.26em;
}
.display .ln > span{display:block}

.eyebrow{
  flex-wrap:wrap;row-gap:.25em;
  font-family:var(--f-mono);
  font-size:clamp(.63rem,.9vw,.72rem);
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--amber);
  display:flex;align-items:center;gap:.7em;
  margin-bottom:1.35rem;
}
.eyebrow .num{
  color:var(--g-900);background:var(--amber);
  padding:.28em .5em .22em;border-radius:3px;letter-spacing:.1em;font-weight:500;
}
.eyebrow .tick{width:26px;height:1px;background:var(--amber);flex:none;opacity:.8;
  align-self:flex-start;margin-top:.52em}

.lede{
  color:var(--ink-2);
  font-size:clamp(1rem,1.15vw + .62rem,1.22rem);
  line-height:1.62;
  max-width:44ch;
  text-wrap:pretty;
}
.lede--wide{max-width:60ch}

.dot{width:9px;height:9px;border-radius:2px;background:var(--amber);flex:none;
     box-shadow:0 0 14px color-mix(in srgb,var(--amber) 70%,transparent)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.62em;
  font-weight:600;font-size:.95rem;letter-spacing:-.005em;
  padding:.85em 1.35em;border-radius:100px;
  border:1px solid transparent;
  transition:transform .35s var(--ease),background-color .3s,box-shadow .35s,border-color .3s,color .3s;
  will-change:transform;
}
.btn svg{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.btn--wa{background:var(--wa);color:#06281A;box-shadow:0 6px 26px -10px rgba(37,211,102,.85)}
.btn--wa:hover{background:#31e874;transform:translateY(-2px);box-shadow:0 12px 34px -10px rgba(37,211,102,.9)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,transparent);backdrop-filter:blur(8px)}
.btn--ghost:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-2px)}
.btn--lg{font-size:1rem;padding:1em 1.6em}
.btn--xl{font-size:clamp(1rem,1.5vw,1.25rem);padding:1.05em 2rem;font-weight:700}
.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.actions--center{justify-content:center}

/* ═══════════ LOADER ═══════════ */
.loader{
  position:fixed;inset:0;z-index:9000;background:var(--g-950);
  display:grid;place-items:center;
  transition:opacity .7s var(--ease),visibility .7s;
}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader__inner{width:min(360px,72vw);text-align:left}
.loader__mark{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.42em;color:var(--ink);
  display:flex;align-items:center;gap:.8em;margin-bottom:1.4rem;
}
.loader__bar{height:2px;background:var(--g-750);border-radius:2px;overflow:hidden}
.loader__bar i{display:block;height:100%;width:0%;background:var(--amber);
  box-shadow:0 0 12px var(--amber);transition:width .28s var(--ease)}
.loader__pct{font-family:var(--f-mono);font-size:.68rem;color:var(--ink-3);margin-top:.85rem;
  display:flex;justify-content:space-between;letter-spacing:.14em}
.loader__pct em{font-style:normal;text-transform:uppercase;letter-spacing:.24em}

/* ═══════════ HEADER ═══════════ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:400;
  display:flex;align-items:center;gap:1.5rem;
  padding:1rem var(--pad);
  transition:background-color .45s var(--ease),border-color .45s,padding .45s var(--ease),backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:color-mix(in srgb,var(--g-900) 78%,transparent);
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line-2);
  padding-block:.7rem;
}
.hdr__logo{display:flex;align-items:baseline;gap:.55rem;flex:none}
.hdr__name{font-weight:800;letter-spacing:.02em;font-size:1.02rem}
.hdr__sub{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.3em;color:var(--ink-3);
  position:relative;top:-1px}
.hdr__nav{display:flex;gap:1.6rem;margin-left:auto;font-size:.88rem;color:var(--ink-2)}
.hdr__nav a{position:relative;padding-block:.25rem;transition:color .3s}
.hdr__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--amber);transition:right .4s var(--ease)}
.hdr__nav a:hover{color:var(--ink)}
.hdr__nav a:hover::after{right:0}
.hdr__cta{padding:.62em 1.1em;font-size:.86rem}

/* ═══════════ STORY / CANVAS ═══════════ */
.story{position:relative;z-index:1}
/* o palco fica colado no topo mas NÃO ocupa altura antes dos beats:
   assim o beat 0 começa exatamente em scroll 0 e cada capítulo de texto
   cobre exatamente a faixa de rolagem dos seus quadros */
.beats{position:relative;margin-top:-100svh;margin-top:-100dvh}
.beat{height:100vh}
.beat--tail{height:100svh;height:100dvh}

.stage{
  position:sticky;top:0;height:100svh;height:100dvh;width:100%;
  overflow:hidden;background:var(--g-950);
  z-index:2;
}
.stage__canvas,.stage__static{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.stage__static{display:none}
body.mode-static .stage__canvas{display:none}
body.mode-static .stage__static{display:block}

.stage__grade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(8,9,11,.92) 0%,rgba(8,9,11,.45) 26%,rgba(8,9,11,0) 55%),
    linear-gradient(to right,rgba(8,9,11,.86) 0%,rgba(8,9,11,.32) 42%,rgba(8,9,11,0) 72%);
}
.stage__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 85% at 62% 42%,transparent 38%,rgba(6,7,9,.72) 100%);
}
.stage__grain{
  position:absolute;inset:-50%;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}
}

/* painéis */
.panels{position:absolute;inset:0;pointer-events:none}
.panel{
  position:absolute;left:var(--pad);bottom:clamp(3.5rem,9vh,6.5rem);
  width:min(640px,calc(100% - var(--pad)*2));
  opacity:0;visibility:hidden;
  pointer-events:none;
}
.panel.is-live{pointer-events:auto}
.panel--hero{bottom:auto;top:50%;transform:translateY(-50%);width:min(760px,calc(100% - var(--pad)*2))}
.panel--final{width:min(560px,calc(100% - var(--pad)*2))}
.panel .display + .lede{margin-top:1.5rem}
.still .display + .lede{margin-top:1.5rem}
.hero__meta{
  margin-top:2.1rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:.85em;flex-wrap:wrap;
}
.hero__meta b{color:var(--ink);font-weight:500}
.hero__meta i{width:3px;height:3px;border-radius:50%;background:var(--amber);display:inline-block}

.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.8rem;max-width:34rem}
.chips li{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;
  padding:.5em .85em;border:1px solid var(--line);border-radius:100px;
  color:var(--ink-2);background:color-mix(in srgb,var(--g-900) 55%,transparent);
  backdrop-filter:blur(6px);
}

.scrollhint{
  position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-3);transition:opacity .5s;
}
.scrollhint i{width:1px;height:34px;background:linear-gradient(var(--amber),transparent);
  animation:hint 1.9s var(--ease) infinite}
@keyframes hint{0%{transform:scaleY(.2);transform-origin:top;opacity:0}
  45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);transform-origin:bottom;opacity:0}}
.scrollhint.is-hidden{opacity:0}

/* barra de capítulos */
.chapterbar{
  position:absolute;right:calc(var(--pad) * .62);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.55rem;align-items:flex-end;
}
.chapterbar b{
  display:block;width:22px;height:2px;background:var(--g-600);border-radius:2px;
  transition:background-color .4s,width .4s var(--ease);
}
.chapterbar b.on{background:var(--amber);width:38px}

/* ═══════════ SEÇÕES ═══════════ */
.sec{position:relative;z-index:3;background:var(--g-900);padding-block:clamp(5rem,11vh,9rem)}
.sec--services{
  background:
    radial-gradient(90% 60% at 50% -10%,rgba(242,169,59,.07),transparent 60%),
    var(--g-900);
  border-top:1px solid var(--line-2);
}
.sechead{margin-bottom:clamp(2.5rem,5vw,4rem);max-width:52rem}
.sechead .lede{margin-top:1.5rem}

.grid{display:grid;gap:1px;background:var(--line-2)}
.grid--services{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.card{
  background:var(--g-850);padding:clamp(1.6rem,2.4vw,2.2rem);
  transition:background-color .45s var(--ease),transform .45s var(--ease);
  position:relative;
}
.card::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover{background:var(--g-800)}
.card:hover::after{transform:scaleX(1)}
.card__n{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;color:var(--amber);display:block;margin-bottom:1.5rem}
.card h3{font-size:1.22rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.6rem}
.card p{color:var(--ink-2);font-size:.94rem;line-height:1.58}

/* história */
.sec--story{background:linear-gradient(180deg,var(--g-900),var(--g-850) 45%,var(--g-900))}
.wrap--split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,5rem);align-items:center}
.split__media{position:relative;border-radius:var(--r);overflow:hidden;background:var(--g-800);
  border:1px solid var(--line-2)}
.split__media img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;
  filter:saturate(.9) contrast(1.05) brightness(.95)}
.split__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,9,11,.85),transparent 45%),
             linear-gradient(115deg,rgba(242,169,59,.1),transparent 45%)}
.split__media figcaption{
  position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);display:flex;align-items:center;gap:.6em;
}
.prose{margin-top:1.8rem;display:grid;gap:1.05rem;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.prose strong{color:var(--ink);font-weight:600}
.prose em{color:var(--amber);font-style:italic}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1.2rem;
  margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line-2)}
.stats b{display:block;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1}
.stats span{display:block;margin-top:.4rem;font-family:var(--f-mono);font-size:.63rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}

/* ═══════════ PASSOS DO ATENDIMENTO ═══════════ */
.sec--how{
  background:
    radial-gradient(78% 52% at 50% 0%,rgba(242,169,59,.09),transparent 62%),
    linear-gradient(180deg,var(--g-900),var(--g-850) 52%,var(--g-900));
  border-top:1px solid var(--line-2);
}

.steps{
  --step-pad:clamp(1.7rem,2.5vw,2.3rem);
  --badge:2.9rem;
  position:relative;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1px;
  background:var(--line-2);border:1px solid var(--line-2);
  border-radius:var(--r);overflow:hidden;
}

/* trilho que atravessa os quatro passos e é "desenhado" com a rolagem */
.steps__track{
  position:absolute;z-index:2;pointer-events:none;
  left:0;right:0;
  top:calc(var(--step-pad) + var(--badge) / 2);
  height:2px;
  background:linear-gradient(90deg,transparent,var(--g-700) 6%,var(--g-700) 94%,transparent);
}
.steps__track i{
  position:absolute;inset:0;display:block;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--amber) 25%,transparent),
    var(--amber) 18%,var(--amber-hi) 82%,var(--amber-hi));
  box-shadow:0 0 16px color-mix(in srgb,var(--amber) 62%,transparent);
  clip-path:inset(0 100% 0 0);
}
body.no-anim .steps__track i{clip-path:none}

.step{
  background:var(--g-850);padding:var(--step-pad);position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:background-color .45s var(--ease);
}
/* numeral fantasma no alto, atrás do badge: dá profundidade editorial sem
   disputar espaço com a tag que fica ancorada na base do cartão */
.step::after{
  content:attr(data-n);position:absolute;right:.7rem;top:-.85rem;
  font-size:clamp(4.2rem,6.4vw,5.8rem);font-weight:800;letter-spacing:-.05em;line-height:1;
  color:color-mix(in srgb,var(--ink) 3.4%,transparent);
  pointer-events:none;transition:color .5s var(--ease),transform .6s var(--ease);
}
.step:hover{background:var(--g-800)}
.step:hover::after{color:color-mix(in srgb,var(--amber) 12%,transparent);transform:translateY(3px)}

.step__n{
  position:relative;z-index:3;
  width:var(--badge);height:var(--badge);
  display:grid;place-items:center;border-radius:50%;
  margin-bottom:1.6rem;
  font-family:var(--f-mono);font-size:.9rem;font-weight:500;
  color:var(--ink-3);
  background:var(--g-900);
  border:1px solid var(--g-600);
  transition:color .45s var(--ease),background-color .45s var(--ease),
             border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.step__n b{font-weight:500;display:block;transition:transform .5s var(--ease)}
/* anel que pulsa quando o trilho chega no passo */
.step__n::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--amber);
  opacity:0;transform:scale(.72);
  transition:opacity .5s var(--ease),transform .55s var(--ease);
}
.step__n.is-on{
  color:var(--g-900);background:var(--amber);border-color:var(--amber);
  box-shadow:0 0 22px -4px color-mix(in srgb,var(--amber) 78%,transparent);
}
.step__n.is-on::before{opacity:.42;transform:scale(1)}
.step__n.is-on b{transform:scale(1.06)}
.step:hover .step__n.is-on{box-shadow:0 0 30px -3px color-mix(in srgb,var(--amber) 88%,transparent)}

.step h3{font-size:1.1rem;font-weight:700;letter-spacing:-.018em;margin-bottom:.6rem;
  position:relative;z-index:2}
.step p{color:var(--ink-2);font-size:.93rem;line-height:1.6;position:relative;z-index:2}
.step__tag{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:.5em;
  margin-top:auto;padding-top:1.6rem;align-self:flex-start;white-space:nowrap;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);transition:color .4s var(--ease);
}
.step__tag::before{
  content:"";width:5px;height:5px;border-radius:1px;background:var(--g-600);
  transition:background-color .45s var(--ease),box-shadow .45s var(--ease);
}
.step:hover .step__tag{color:var(--ink-2)}
.step__n.is-on ~ .step__tag::before{
  background:var(--amber);box-shadow:0 0 8px color-mix(in srgb,var(--amber) 70%,transparent);
}

/* depoimentos */
.sec--voices{background:var(--g-850);border-block:1px solid var(--line-2)}
.grid--voices{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  background:transparent;gap:1rem}
.quote{
  background:var(--g-900);border:1px solid var(--line-2);border-radius:var(--r);
  padding:clamp(1.5rem,2.3vw,2rem);display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem;
  transition:border-color .4s,transform .4s var(--ease);
}
.quote:hover{border-color:color-mix(in srgb,var(--amber) 35%,transparent);transform:translateY(-3px)}
.quote p{font-size:1.02rem;line-height:1.55;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}
.quote footer{display:flex;flex-direction:column;gap:.15rem;padding-top:1rem;border-top:1px solid var(--line-2)}
.quote footer b{font-size:.88rem;font-weight:600}
.quote footer span{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}

/* faq */
.wrap--faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.sec--faq .sechead{margin-bottom:0;position:sticky;top:6rem}
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.3rem 2.5rem 1.3rem 0;position:relative;
  font-size:clamp(1rem,1.3vw,1.1rem);font-weight:600;letter-spacing:-.018em;
  transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--amber)}
.faq summary i{position:absolute;right:.35rem;top:50%;width:13px;height:13px;margin-top:-6px}
.faq summary i::before,.faq summary i::after{
  content:"";position:absolute;left:0;top:6px;width:13px;height:1.5px;background:var(--amber);
  transition:transform .4s var(--ease);
}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details[open] summary{color:var(--amber)}
.faq details > div{overflow:hidden}
.faq details p{color:var(--ink-2);font-size:.97rem;line-height:1.65;padding-bottom:1.5rem;max-width:62ch;text-wrap:pretty}

/* cta final */
.sec--cta{padding:0;background:var(--g-900)}
.cta{position:relative;padding-block:clamp(6rem,16vh,11rem);text-align:center;overflow:hidden;
  border-top:1px solid var(--line-2)}
.cta__glow{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:min(1100px,140vw);aspect-ratio:2/1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,169,59,.2),rgba(242,169,59,.05) 46%,transparent 72%);
  filter:blur(28px);
}
.cta .eyebrow{justify-content:center}
.cta .display{margin-inline:auto}
.cta .lede{margin:1.6rem auto 0}
.cta__note{margin-top:2rem;font-family:var(--f-mono);font-size:.65rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}

/* rodapé */
.ft{background:var(--g-950);border-top:1px solid var(--line-2);padding-block:2.6rem}
.ft__in{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;justify-content:space-between}
.ft__nav{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.85rem;color:var(--ink-2)}
.ft__nav a:hover{color:var(--amber)}
.ft__meta{width:100%;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding-top:1.6rem;border-top:1px solid var(--line-2)}

/* fab mobile */
.fab{
  position:fixed;right:1rem;bottom:1rem;z-index:390;
  display:none;align-items:center;gap:.55em;
  background:var(--wa);color:#06281A;font-weight:700;font-size:.92rem;
  padding:.85em 1.25em;border-radius:100px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.7),0 0 0 6px rgba(37,211,102,.12);
  opacity:0;transform:translateY(20px);transition:opacity .4s,transform .4s var(--ease);
}
.fab svg{width:1.25em;height:1.25em;fill:currentColor}
.fab.is-on{opacity:1;transform:none}
/* evita dois CTAs iguais na mesma tela durante a história */
.fab.is-muted{opacity:0;transform:translateY(14px);pointer-events:none}

/* reveal */
.reveal{opacity:0;transform:translateY(24px)}
body.no-anim .reveal{opacity:1;transform:none}

/* ═══════════ RESPONSIVO ═══════════ */
@media (max-width:1080px){
  .wrap--split{grid-template-columns:1fr}
  .split__media{max-width:420px}
  .wrap--faq{grid-template-columns:1fr}
  .sec--faq .sechead{position:static;margin-bottom:2.5rem}
}
@media (max-width:860px){
  /* empilhado vira linha do tempo vertical: o badge sai do fluxo e ocupa uma
     coluna própria à esquerda, para o trilho nunca cruzar o texto */
  .steps{--badge:2.6rem}
  .step{padding-left:calc(var(--step-pad) + var(--badge) + 1.1rem)}
  .step__n{
    position:absolute;left:var(--step-pad);top:var(--step-pad);margin-bottom:0;
  }
  .step::after{right:.8rem;top:-.7rem;font-size:clamp(3.6rem,15vw,5rem)}
  .steps__track{
    left:calc(var(--step-pad) + var(--badge) / 2 - 1px);right:auto;
    top:calc(var(--step-pad) + var(--badge) / 2);
    bottom:calc(var(--step-pad) + var(--badge) / 2);
    width:2px;height:auto;
    background:linear-gradient(180deg,transparent,var(--g-700) 3%,var(--g-700) 97%,transparent);
  }
  .steps__track i{
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--amber) 25%,transparent),
      var(--amber) 14%,var(--amber-hi) 86%,var(--amber-hi));
    box-shadow:0 0 14px color-mix(in srgb,var(--amber) 55%,transparent);
    clip-path:inset(0 0 100% 0);
  }
  .hdr__nav{display:none}
  .hdr__cta{display:none}
  .hdr{padding-block:.85rem}
  .fab{display:inline-flex}
  .chapterbar{display:none}
  .panel{bottom:clamp(4.5rem,12vh,7rem);width:calc(100% - var(--pad)*2)}
  .panel--hero{top:auto;bottom:clamp(4.5rem,12vh,7rem);transform:none}
  .panel .lede{font-size:1rem;max-width:36ch}
  .chips{margin-top:1.2rem;max-width:none}
  .chips li{font-size:.63rem;padding:.42em .7em}
  .chips li:nth-child(n+5){display:none}
  .hero__meta{margin-top:1.4rem;font-size:.6rem;gap:.6em}
  .actions{margin-top:1.4rem}
  .stage__grade{background:
    linear-gradient(to top,rgba(8,9,11,.95) 0%,rgba(8,9,11,.62) 40%,rgba(8,9,11,.1) 74%),
    linear-gradient(to bottom,rgba(8,9,11,.55) 0%,rgba(8,9,11,0) 26%)}
  .scrollhint{display:none}
  .ft__in{flex-direction:column;align-items:flex-start}
}
@media (max-width:860px){
  /* Dentro da história o CTA não precisa dominar a tela: fica em uma linha só,
     em tamanho contido — o botão flutuante assume a conversão principal. */
  .panel .actions{flex-direction:row;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
  .panel .btn{width:auto;font-size:.86rem;padding:.72em 1.05em;font-weight:600}
  .panel .btn--lg{font-size:.86rem;padding:.72em 1.05em}
  .panel .btn--wa{box-shadow:0 4px 16px -8px rgba(37,211,102,.7)}
  .panel .btn--ghost{background:transparent;border-color:color-mix(in srgb,var(--ink) 18%,transparent)}
}

@media (max-width:520px){
  .eyebrow{letter-spacing:.17em;font-size:.6rem;gap:.55em}
  .display{font-size:clamp(2.1rem,10vw,3rem)}
  .display--sm{font-size:clamp(1.7rem,8vw,2.3rem)}
  /* fora da história (CTA final) o botão segue cheio */
  .sec .btn{width:100%;justify-content:center}
  .sec .actions{flex-direction:column}
  .grid--services,.steps{border-radius:10px}
}

/* ═══════════ REDUÇÃO DE MOVIMENTO ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .stage__grain{display:none}
}
/* ═══════════ MODO ESTÁTICO (mobile leve / reduced-motion) ═══════════ */
body.mode-static .stage,
body.mode-static .beats{display:none}

.stills{position:relative;z-index:1}
.still{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:var(--pad);padding-block:clamp(4rem,10vh,7rem) clamp(3.5rem,9vh,6rem);
  overflow:hidden;background:var(--g-950);
  border-bottom:1px solid var(--line-2);
}
.still__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.still::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(8,9,11,.95) 0%,rgba(8,9,11,.6) 34%,rgba(8,9,11,.08) 70%),
    radial-gradient(120% 85% at 62% 40%,transparent 40%,rgba(6,7,9,.6) 100%);
}
.still .panel{
  position:relative;inset:auto;transform:none!important;
  opacity:1!important;visibility:visible!important;pointer-events:auto;
  z-index:2;width:min(640px,100%);
}
.still .panel--hero{width:min(760px,100%)}
.still--hero{min-height:100svh}