/* ============================================================
   SB DIGITAL — RESET + BASE + PRIMITIVOS
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 18px);
  background: var(--bg);
  color-scheme: dark;
  overflow-x: clip;
}

body{
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.68;
  color: var(--txt-2);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* navegadores sem overflow:clip (Safari < 16): evita rolagem lateral
   sem transformar o body em contêiner de rolagem (o que quebraria o sticky) */
@supports not (overflow-x: clip){
  html{ overflow-x: visible; }
  body{ overflow-x: hidden; }
}

/* Grão sutil sobre a página. Sem mix-blend-mode: uma camada fixa em
   tela cheia com blend obrigava o navegador a recompor a página inteira
   a cada quadro de rolagem — era uma das causas de travamento no desktop. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.026;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; padding:0; }

/* Hierarquia tipográfica intencional:
   — grotesca (Instrument Sans) para títulos de interface e cartões;
   — serifa (Fraunces) só onde a página "fala": manchetes, títulos de
     seção, citação e números grandes. */
h1,h2,h3,h4{
  font-family: var(--f-display);
  color: var(--txt);
  line-height:1.2;
  letter-spacing:-.012em;
  font-weight:600;
  text-wrap: balance;
}

.hero__title,
.sec__tit,
.finale__tit,
.path__tit,
.ad__tit,
.pipe__panelIn h3,
.proof__card h3,
.plats__tit{
  font-family: var(--f-serif);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing:-.012em;
  line-height:1.1;
}
/* números grandes também em serifa, com algarismos alinhados */
.hero__stats b,
.gscore__n,
.path__stat b,
.pipe__gauge span,
.review__av{
  font-family: var(--f-serif);
  font-weight:500;
  font-variant-numeric: lining-nums tabular-nums;
}

p{ text-wrap: pretty; }

a{ color:inherit; text-decoration:none; }

::selection{ background: var(--brand); color:#170800; }

:focus-visible{
  outline:2px solid var(--brand-hi);
  outline-offset:3px;
  border-radius:4px;
}

/* barra de rolagem discreta */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-track{ background:#0A0908; }
  ::-webkit-scrollbar-thumb{ background:#26221C; border-radius:99px; border:3px solid #0A0908; }
  ::-webkit-scrollbar-thumb:hover{ background:#35302A; }
}

.skip{
  position:fixed; top:10px; left:10px; z-index:10000;
  padding:12px 20px; border-radius:var(--r-sm);
  background:var(--brand); color:#140700;
  font-weight:600; transform:translateY(-160%);
  transition:transform .25s var(--ease);
}
.skip:focus{ transform:none; }

/* ---------- container ---------- */
.container{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
  z-index:2;
}

/* ---------- icones ---------- */
.ico{ width:1.25em; height:1.25em; flex:none; }

/* ---------- eyebrow ----------
   Rótulo de seção com um fio curto antes — detalhe editorial que
   substitui o "pontinho pulsante" de template. */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-sans);
  font-size:.78rem; font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--txt-3);
  margin-bottom:18px;
}
.eyebrow::before{
  content:""; flex:none;
  width:26px; height:1px; background:var(--brand);
}
@keyframes ringPulse{
  0%  { transform:scale(.6); opacity:.9; }
  80% { transform:scale(1.6); opacity:0; }
  100%{ transform:scale(1.6); opacity:0; }
}

/* ---------- destaque nos títulos ----------
   Sem degradê e sem cor: o destaque vem do contraste. Num título com
   destaque, o texto comum fica em cinza claro e a parte .hl em branco. */
.sec__tit:has(.hl),
.finale__tit:has(.hl){ color:var(--txt-2); }
.hl,
.grad{ color:var(--txt); }
.strike{
  position:relative; color:var(--txt-3);
  text-decoration:line-through;
  text-decoration-color:rgba(255,106,33,.8);
  text-decoration-thickness:2px;
}

/* ---------- botoes ---------- */
.btn{
  --btn-bg: transparent;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px;
  border-radius:var(--r-sm);
  font-family:var(--f-display);
  font-size:.9375rem; font-weight:600; letter-spacing:.005em;
  line-height:1.2;
  color:var(--txt);
  background:var(--btn-bg);
  border:1px solid transparent;
  cursor:pointer;
  isolation:isolate;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), opacity .7s var(--ease-out);
}
.btn > *{ position:relative; z-index:1; }
.btn .ico{ width:1.15em; height:1.15em; transition:transform .3s var(--ease-out); }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.99); }

.btn--primary{
  background:var(--brand);
  color:#170800;
  font-weight:600;
  overflow:hidden;
  box-shadow:0 8px 22px -14px rgba(0,0,0,.8);
}
.btn--primary::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:#FF7C3B;
  opacity:0; transition:opacity .35s var(--ease);
}
/* reflexo discreto que passa pelo botão de vez em quando — só transform */
.btn--primary::after{
  content:""; position:absolute; top:-20%; bottom:-20%; left:0; z-index:0;
  width:30%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform:translateX(-160%) skewX(-18deg);
  animation:sheen calc(9s * var(--motion-slow)) var(--ease) infinite;
  pointer-events:none;
}
@keyframes sheen{
  0%, 78% { transform:translateX(-160%) skewX(-18deg); }
  100%    { transform:translateX(380%) skewX(-18deg); }
}
.btn--primary:hover{ box-shadow:0 12px 28px -16px rgba(0,0,0,.9); }
.btn--primary:hover::before{ opacity:1; }
.btn--primary:hover .ico:last-child{ transform:translateX(3px); }

.btn--outline{
  border-color:var(--line-2);
  background:transparent;
  color:var(--txt);
}
.btn--outline:hover{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);
  color:#fff;
}
.btn--outline:hover .ico{ transform:translateX(3px); color:var(--brand-hi); }

.btn--ghost{
  padding:11px 18px; color:var(--txt-2);
  font-size:.875rem; font-weight:500;
}
.btn--ghost:hover{ color:var(--txt); background:rgba(255,255,255,.045); }

.btn--lg{ padding:18px 34px; font-size:1rem; }
.btn--block{ display:flex; width:100%; }

/* ---------- link com seta ----------
   Sublinhado fino e deslocado, como em revista. */
.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--txt); font-weight:500;
  padding-bottom:3px;
  border-bottom:1px solid var(--brand);
  transition:color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
}
.link-arrow .ico{ width:1.05em; height:1.05em; color:var(--brand); transition:transform .3s var(--ease-out); }
.link-arrow:hover{ color:var(--brand-hi); border-color:var(--brand-hi); }
.link-arrow:hover .ico{ transform:translateX(4px); }

/* ---------- placeholders de linha ---------- */
.ph-line{
  display:block; height:9px; border-radius:99px;
  background:linear-gradient(90deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  margin-bottom:8px;
}
.ph-line--t{ height:12px; width:62%; background:linear-gradient(90deg, rgba(92,156,255,.35), rgba(92,156,255,.1)); }
.ph-line--s{ width:44%; }
.ph-line--xs{ height:8px; width:70px; }

/* ---------- reveal ao rolar ----------
   Só opacity + transform (composição na GPU). O desfoque de entrada
   ficou restrito aos títulos: aplicado em dezenas de cards ao mesmo
   tempo, ele pesava na rolagem de telas grandes. */
[data-reveal]{
  opacity:0;
  transform:translate3d(0, var(--reveal-y), 0);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
/* o atraso em cascata (--d) é aplicado pelo JS no momento de adicionar
   .in — assim não interfere nas transições de hover dos componentes */
[data-reveal].in{ opacity:1; transform:none; }

.sec__tit[data-reveal],
.finale__tit[data-reveal]{
  filter:blur(5px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out);
}
.sec__tit[data-reveal].in,
.finale__tit[data-reveal].in{ filter:none; }

/* ---------- preloader ---------- */
#boot{
  transition:opacity .5s var(--ease), visibility .5s;
}
#boot.done{ opacity:0; visibility:hidden; pointer-events:none; }
.boot__inner{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.boot__mark{
  width:64px; height:auto;
  animation:bootIn .7s var(--ease-out) both;
  filter:drop-shadow(0 0 26px var(--brand-glow));
}
@keyframes bootIn{
  from{ opacity:0; transform:translateY(14px) scale(.9); }
  to  { opacity:1; transform:none; }
}
.boot__bar{
  width:150px; height:2px; border-radius:99px;
  background:rgba(255,255,255,.08); overflow:hidden;
}
.boot__bar span{
  display:block; height:100%; width:40%;
  background:var(--grad-brand);
  animation:bootBar 1.05s var(--ease) infinite;
}
@keyframes bootBar{
  0%  { transform:translateX(-100%); }
  100%{ transform:translateX(360%); }
}
.boot__txt{
  font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.42em; color:var(--txt-4); text-indent:.42em;
}

/* ---------- cursor custom (apenas desktop com mouse) ---------- */
.cursor{ display:none; }
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  .cursor{
    display:block; position:fixed; top:0; left:0; z-index:9998;
    pointer-events:none;
    transition:opacity .3s var(--ease);
  }
  .cursor__dot,.cursor__ring{
    position:absolute; top:0; left:0; border-radius:50%;
    transform:translate(-50%,-50%);
    will-change:transform;
  }
  .cursor__dot{
    width:5px; height:5px; background:var(--brand-hi);
    box-shadow:0 0 10px var(--brand-glow);
  }
  .cursor__ring{
    width:32px; height:32px;
    border:1px solid rgba(255,106,33,.42);
    transition:width .3s var(--ease-out), height .3s var(--ease-out), border-color .3s var(--ease), background .3s var(--ease);
  }
  .cursor.is-hot .cursor__ring{
    width:56px; height:56px; border-color:rgba(255,145,82,.75);
    background:rgba(255,106,33,.06);
  }
  .cursor.is-hidden{ opacity:0; }
}

/* ---------- utilitarios ---------- */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.viz__cap{
  margin-top:14px; text-align:center;
  font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--txt-4);
}

/* ponto "ao vivo" reutilizável */
.live-dot{
  position:relative; display:inline-block; flex:none;
  width:7px; height:7px; border-radius:50%;
  margin-right:9px; vertical-align:middle;
  background:var(--ok);
  box-shadow:0 0 10px rgba(53,211,153,.7);
  animation:blink calc(1.6s * var(--motion-slow)) var(--ease) infinite;
}
@keyframes blink{ 50%{ opacity:.3; } }

/* Loops fora da tela ficam pausados (o JS marca a seção com .is-paused).
   Economiza CPU/GPU sem desligar nada do que está à vista. */
.is-paused,
.is-paused::before,
.is-paused::after,
.is-paused *,
.is-paused *::before,
.is-paused *::after{ animation-play-state:paused !important; }

/* ---------- acessibilidade: movimento reduzido ----------
   Não desliga a página: mantém fades, loops sutis e contadores, e remove
   só o que tem movimento amplo (desfoque de entrada, rotações, cursor). */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .sec__tit[data-reveal],
  .finale__tit[data-reveal]{ filter:none; }
  .cursor{ display:none !important; }
}