/* ══════════════════════════════════════════════════════════════════════
   NAVRIDE® — base
   Tokens do Design System NavRide (agosto/2026). Violet ramp + neutrals,
   dourado reservado a dado e dinheiro.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --beats:13.2;
  /* violet ramp */
  --light-violet:#E0DEFF; --lavander:#9973F9; --violet-blue:#5145F1; --dark-violet:#1A1452;
  --violet-blue-rgb:81,69,241; --lavander-rgb:153,115,249; --light-violet-rgb:224,222,255;
  /* neutrals */
  --white:#FAFAFA; --ice:#EDEDED; --gray-1:#DCDFE2; --gray-2:#9CA3AF;
  --gray-3:#656D7B; --gray-4:#333840; --black-light:#1A1A1A; --black:#0D0D0D;
  --white-rgb:250,250,250; --black-rgb:13,13,13; --gray-2-rgb:156,163,175;
  /* dado & dinheiro */
  --gold:#FFB020; --gold-lo:#C98A16; --gold-hi:#FFD98A;
  /* semantic */
  --canvas:var(--black); --surface:var(--black-light); --surface-2:#14141B;
  --ink:var(--white); --muted:rgba(var(--white-rgb),.62); --faint:rgba(var(--white-rgb),.38);
  --hairline:rgba(var(--white-rgb),.10); --hairline-2:rgba(var(--white-rgb),.18);
  --gradient-brand:linear-gradient(115deg,#E0DEFF 0%,#9973F9 34%,#5145F1 68%,#1A1452 100%);
  /* O radial da marca, vetorizado do Figma: é o mesmo do painel do hero,
     do slot do Main Video e dos cartões de formato. Vive aqui para poder
     ser reusado fora do device. preserveAspectRatio none: ele estica para
     a caixa que receber, como no arquivo. */
  --gradient-radial:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 495.39 324.64' preserveAspectRatio='none'><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-19.757 60.764 -32.312 -14.259 334.85 -134.39)'><stop stop-color='rgb(224,222,255)' offset='0'/><stop stop-color='rgb(189,169,252)' offset='.20729'/><stop stop-color='rgb(153,115,249)' offset='.41458'/><stop stop-color='rgb(117,92,245)' offset='.5919'/><stop stop-color='rgb(81,69,241)' offset='.76923'/><stop stop-color='rgb(67,57,201)' offset='.82692'/><stop stop-color='rgb(54,45,162)' offset='.88462'/><stop stop-color='rgb(40,32,122)' offset='.94231'/><stop stop-color='rgb(26,20,82)' offset='1'/></radialGradient></defs><rect width='495.39' height='324.64' fill='url(%23g)'/></svg>");
  --gradient-text:linear-gradient(100deg,#E0DEFF 0%,#9973F9 42%,#5145F1 100%);
  /* radii */
  --r-10:10px; --r-20:20px; --r-25:25px; --r-30:30px; --r-pill:100px;
  /* easing */
  --e-out:cubic-bezier(.165,.84,.44,1); --e-expo:cubic-bezier(.19,1,.22,1);
  --e-inout:cubic-bezier(.645,.045,.355,1); --e-back:cubic-bezier(.34,1.56,.64,1);
  --d-fast:.2s; --d-base:.32s; --d-slow:.6s;
  /* layout */
  --maxw:1400px;
  --gutter:clamp(20px,6.9px + 100vw * .0336,64px);
  --hdr-top:25px;
  --hdr-pill-h:69.5px;
  --hdr-h:94.5px;   /* top + altura da pill */
  --section-y:clamp(72px,44.8px + 100vw * .055,160px);
  /* type scale */
  --t-1:clamp(40px,23.7px + 100vw * .0298,78px);
  --t-2:clamp(31px,20.6px + 100vw * .0217,58px);
  --t-3:clamp(24px,18.7px + 100vw * .0131,40px);
  --t-5:clamp(18px,16.5px + 100vw * .0031,22px);
  --hero:clamp(44px,23px + 100vw * .0395,104px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.js-motion{scroll-behavior:auto}
html.is-static{scroll-behavior:smooth}

body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:400; font-size:16px; line-height:1.6; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;  /* clip, não hidden: hidden quebraria o position:sticky do palco */
}
img,svg{display:block; max-width:100%}
img{height:auto}
ul,ol,dl{margin:0; padding:0; list-style:none}
h1,h2,h3,p,dd,dt,figure{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0}
em{font-style:italic}

/* ── foco de teclado sempre visível ─────────────────────────────────── */
:focus-visible{
  outline:2px solid var(--lavander); outline-offset:3px;
  border-radius:6px;
}
.skip{
  position:fixed; left:50%; top:10px; translate:-50% -160%; z-index:999;
  background:var(--violet-blue); color:#fff; padding:12px 20px;
  border-radius:var(--r-pill); font-weight:600; font-size:14px;
  transition:translate var(--d-base) var(--e-out);
}
.skip:focus{translate:-50% 0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ══ TIPOGRAFIA ══════════════════════════════════════════════════════ */
.ttl-1{font-weight:800; font-size:var(--t-1); line-height:1; letter-spacing:-.03em}
.ttl-2{font-weight:800; font-size:var(--t-2); line-height:1.04; letter-spacing:-.025em}
.ttl-3{font-weight:800; font-size:var(--t-3); line-height:1.1; letter-spacing:-.02em}
.ttl-1 em,.ttl-2 em,.ttl-3 em{
  font-style:italic;
  background:var(--gradient-text); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.lead{
  font-weight:500; font-size:clamp(16px,14.9px + 100vw * .0023,20px);
  line-height:1.55; color:var(--muted); max-width:56ch;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--light-violet);
}
.mono{font-weight:600; letter-spacing:.06em}

/* ══ BOTÕES ══════════════════════════════════════════════════════════ */
.btn{
  --bg:var(--violet-blue); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:0 26px; height:52px; border-radius:var(--r-pill);
  background:var(--bg); color:var(--fg);
  font-weight:700; font-size:15px; letter-spacing:-.005em;
  isolation:isolate; overflow:hidden; will-change:transform;
  transition:box-shadow var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
  box-shadow:0 14px 40px -14px rgba(var(--violet-blue-rgb),.9);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(100deg,var(--lavander),var(--light-violet));
  transform:translate3d(0,101%,0); transition:transform .5s var(--e-expo);
}
.btn:hover::before,.btn:focus-visible::before{transform:translate3d(0,0,0)}
.btn:hover,.btn:focus-visible{color:var(--dark-violet); box-shadow:0 22px 60px -18px rgba(var(--lavander-rgb),.85)}
.btn svg{width:16px; height:16px; flex:none; transition:transform var(--d-base) var(--e-out)}
.btn:hover svg{transform:translate3d(4px,0,0)}
.btn span{position:relative}
.btn--lg{height:58px; padding:0 30px; font-size:16px}
.btn--sm{height:38px; padding:0 18px; font-size:13.5px; box-shadow:none}
.btn--on{--bg:var(--white); --fg:var(--dark-violet); box-shadow:0 18px 50px -18px rgba(0,0,0,.6)}
.btn--on::before{background:linear-gradient(100deg,var(--dark-violet),var(--violet-blue))}
.btn--on:hover,.btn--on:focus-visible{color:#fff}

/* ══ ASFALTO — chevron NAV em movimento ══════════════════════════════ */
.road{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden; opacity:.5;
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.road__tape{
  position:absolute; left:0; top:50%; width:300%; height:min(52vh,520px);
  translate:0 -50%; display:flex; will-change:transform;
}
.road__tape i{
  flex:0 0 33.3333%; height:100%;
  /* SVG já invertido no asset: filtro em runtime custava re-raster a cada frame.
     translateZ promove cada tile a camada própria — rasteriza uma vez só. */
  background:url(../assets/pattern-nav-light.svg) repeat-x center/auto 100%;
  opacity:.026; transform:translateZ(0);
}

/* ══ HEADER — pill flutuante ═════════════════════════════════════════
   Régua Figma 1280: pill x=68,5 y=25 w=1143,1 h=69,5 r=34,75.
   Margens laterais simétricas → left/right 5,35%.
   ══════════════════════════════════════════════════════════════════ */

/* rail de progresso: topo absoluto da janela, fora da pill */
.hdr__rail{
  position:fixed; left:0; top:0; z-index:90;
  width:100%; height:5.5px; pointer-events:none; overflow:hidden;
  transition:opacity var(--d-base) var(--e-out);
}
/* com a folha aberta o trilho nao tem o que reportar, e em z 90 ele
   ficaria por cima dela. */
body.is-menu .hdr__rail{opacity:0}
.hdr__rail span{
  display:block; height:100%; width:100%; border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--dark-violet),var(--violet-blue) 46%,var(--lavander) 80%,var(--light-violet));
  transform:scaleX(0); transform-origin:left; will-change:transform;
}

.hdr{
  position:fixed; left:0; right:0; top:0; z-index:80;
  padding:var(--hdr-top) 5.35% 0;
  pointer-events:none;           /* só a pill recebe clique */
}
/* A pill é vidro: o preenchimento do Figma é #D9D9D9 a 20%, e quem dá o
   volume é o backdrop-filter — o que passa por trás dela borra e satura.
   Sem cor chapada, então ela muda de tom sozinha em cada dobra. */
.hdr__bar{
  position:relative; display:flex; align-items:center;
  height:var(--hdr-pill-h); padding:0 22.3px 0 49.9px;
  border-radius:var(--hdr-pill-h); pointer-events:auto;
  background:rgba(217,217,217,.20);
  /* Sem saturate: era ele que puxava o roxo do fundo e deixava a pill
     lilás. Com blur alto o que passa por trás vira uma média, e o
     #D9D9D9 a 20% aparece como branco, que é a leitura do Figma. */
  -webkit-backdrop-filter:blur(40px);
          backdrop-filter:blur(40px);
  box-shadow:0 18px 50px -22px rgba(0,0,0,.9);
  transition:background var(--d-slow) var(--e-out), box-shadow var(--d-slow) var(--e-out);
}
/* Borda de 1px em degradê (#FFF → #FFF 0% → #FFF): a luz pega nas duas
   pontas e some no meio, que é o que faz a aresta parecer espessura de
   vidro e não um contorno. Feita com máscara para poder ser gradiente
   numa borda arredondada. */
.hdr__bar::before{
  content:""; position:absolute; inset:0; z-index:2;
  border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(160deg,
    rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 48%, rgba(255,255,255,.75) 100%);
  -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;
  transition:background var(--d-slow) var(--e-out);
}
.hdr__bar > *{position:relative; z-index:1}

/* logo: 191,2 × 24,9 na régua 1280 → 14,94% da largura da pill */
.hdr__brand{position:relative; display:block; flex:none; line-height:0}
.hdr__logo{display:block; width:191.2px; height:auto; transition:opacity var(--d-slow) var(--e-out)}
/* a versão para fundo claro fica empilhada sobre a escura e só acende no
   slide de dados. Duas cópias em vez de um invert(): o "NAV" é gradiente. */
.hdr__logo--l{position:absolute; left:0; top:0; opacity:0}

.hdr__nav{margin-left:auto}
.hdr__nav ul{display:flex; align-items:center; gap:35px}
.hdr__nav a{
  position:relative; display:block; padding:9px 0;
  font-size:20.7px; font-weight:400; line-height:22px; letter-spacing:-.005em;
  color:var(--white); white-space:nowrap;
  transition:color var(--d-base) var(--e-out);
}
.hdr__nav a span{position:relative; display:block}
.hdr__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:5px; height:1.5px;
  border-radius:2px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--e-expo);
}
.hdr__nav a:hover,.hdr__nav a:focus-visible{color:var(--light-violet)}
.hdr__nav a:hover::after{transform:scaleX(1); transform-origin:left}
.hdr__nav a[aria-current="true"]{color:var(--light-violet)}
.hdr__nav a[aria-current="true"]::after{transform:scaleX(1); transform-origin:left; opacity:.65}

/* CTA: 124,9 × 39,7, radius 19,85, padding lateral 19,9 */
.hdr__cta{
  flex:none; margin-left:35px;
  height:39.7px; padding:0 19.9px; gap:8px;
  border-radius:19.85px; font-size:15px; font-weight:600;
  /* amostrado no render: #8D70F7 no topo → #5346F0 na base */
  background:linear-gradient(180deg,#8D70F7 0%,#7059F5 42%,#5346F0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 0 0 1px rgba(var(--lavander-rgb),.5),
    0 8px 22px -8px rgba(var(--violet-blue-rgb),.95);
}
.hdr__cta svg{width:14px; height:14px}

/* sobre o slide claro de dados: mesmo vidro, só que a aresta que pega luz
   ali é escura, senão o branco no branco some. */
.hdr.is-light .hdr__bar{
  background:rgba(250,250,250,.55);
  box-shadow:0 18px 50px -24px rgba(13,13,13,.4);
}
.hdr.is-light .hdr__bar::before{
  background:linear-gradient(160deg,
    rgba(255,255,255,.95) 0%, rgba(13,13,13,.06) 48%, rgba(13,13,13,.14) 100%);
}
.hdr.is-light .hdr__logo--d{opacity:0}
.hdr.is-light .hdr__logo--l{opacity:1}
.hdr.is-light .hdr__nav a{color:rgba(13,13,13,.62)}
.hdr.is-light .hdr__nav a:hover,.hdr.is-light .hdr__nav a[aria-current="true"]{color:var(--dark-violet)}
.hdr.is-light .hdr__burger i{background:var(--black)}

/* sobre a dobra final: o botão inverte para a pílula branca com o texto
   dark violet do nó 652:5281. A barra e os itens do menu não mudam. */
.hdr.is-invert .hdr__cta{
  background:var(--white); color:var(--dark-violet);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.92),
    0 10px 26px -10px rgba(13,13,13,.55);
}
.hdr.is-invert .hdr__cta::before{background:linear-gradient(100deg,var(--dark-violet),var(--violet-blue))}
.hdr.is-invert .hdr__cta:hover,
.hdr.is-invert .hdr__cta:focus-visible{color:#fff}

/* com a folha aberta a pill volta ao vidro escuro, aconteca o que
   acontecer com o estado da dobra que ficou atras dela. */
.hdr.is-menu .hdr__bar{background:rgba(26,26,26,.62)}
.hdr.is-menu .hdr__logo--d{opacity:1}
.hdr.is-menu .hdr__logo--l{opacity:0}
.hdr.is-menu .hdr__burger i{background:var(--ink)}
.hdr.is-menu{translate:none}

/* ── HAMBURGER ────────────────────────────────────────────────────────
   As duas barras sao posicionadas em cima do CENTRO do botao e so
   trocam de transform: fechado elas se afastam 4px do centro, aberto
   voltam ao centro e giram, formando o X exato.

   Os seletores sao :first-of-type / :last-of-type e nao :first-child:
   o primeiro filho do botao e o <span class="sr-only">, entao nenhum <i>
   casava com :first-child — so a barra de baixo girava, e o icone aberto
   virava um traco com uma barra. */
.hdr__burger{
  display:none; position:relative; width:44px; height:44px;
  flex:none; margin-left:auto; place-items:center;
  border-radius:50%; -webkit-tap-highlight-color:transparent;
}
.hdr__burger i{
  position:absolute; left:50%; top:50%;
  width:20px; height:2px; margin:-1px 0 0 -10px;
  background:var(--ink); border-radius:2px;
  transition:transform .42s var(--e-back), background var(--d-base) var(--e-out);
}
.hdr__burger i:first-of-type{transform:translate3d(0,-4px,0)}
.hdr__burger i:last-of-type {transform:translate3d(0, 4px,0)}
.hdr__burger[aria-expanded="true"] i:first-of-type{transform:rotate(45deg)}
.hdr__burger[aria-expanded="true"] i:last-of-type {transform:rotate(-45deg)}
.hdr__burger:active i:first-of-type{transform:translate3d(0,-3px,0)}
.hdr__burger:active i:last-of-type {transform:translate3d(0, 3px,0)}
.hdr__burger[aria-expanded="true"]:active i:first-of-type{transform:rotate(45deg) scale(.9)}
.hdr__burger[aria-expanded="true"]:active i:last-of-type {transform:rotate(-45deg) scale(.9)}

/* ══ FOLHA DE MENU ═══════════════════════════════════════════════════
   Ela cobre a JANELA INTEIRA, e não a área abaixo do header: com o
   recorte em var(--hdr-h) o fundo atrás da pill continuava sendo o da
   página e o da folha começava logo abaixo, com o brilho da marca junto
   — a emenda aparecia como um corte horizontal atrás do header. Agora é
   uma superfície só, e a pill flutua por cima dela (z 80 contra 79).
   ══════════════════════════════════════════════════════════════════ */
.sheet{
  position:fixed; inset:0; z-index:79;
  overflow-y:auto; overscroll-behavior:contain;
  /* o brilho da marca faz parte do próprio fundo: assim ele passa por
     trás da pill sem nenhuma costura. */
  background:
    radial-gradient(128% 62% at 50% -12%,
      rgba(var(--violet-blue-rgb),.34) 0%,
      rgba(var(--violet-blue-rgb),.10) 46%,
      rgba(var(--violet-blue-rgb),0) 76%),
    radial-gradient(90% 46% at 50% 118%,
      rgba(var(--lavander-rgb),.14) 0%, rgba(var(--lavander-rgb),0) 70%),
    rgba(10,10,12,.975);
  -webkit-backdrop-filter:blur(28px) saturate(120%);
          backdrop-filter:blur(28px) saturate(120%);
  padding:
    calc(var(--hdr-top) + var(--hdr-pill-h) + clamp(20px,6vw,34px))
    var(--gutter)
    calc(26px + env(safe-area-inset-bottom));
  display:grid; grid-template-rows:1fr auto;
}
.sheet[hidden]{display:none}
/* a folha aparece; os itens chegam depois, um atrás do outro */
html.js-motion .sheet{opacity:0; transition:opacity .3s var(--e-out)}
html.js-motion .sheet.is-open{opacity:1}

/* a lista ocupa o miolo e fica centrada no espaço que sobra */
.sheet nav{
  position:relative; align-self:center;
  /* sangra até a borda da tela: a linha, o realce do item ativo e a
     barra do "você está aqui" vão de ponta a ponta. */
  margin-inline:calc(var(--gutter) * -1);
}
.sheet ul{counter-reset:sheet}
.sheet li{counter-increment:sheet; position:relative}

.sheet a{
  position:relative; display:flex; align-items:baseline; gap:16px;
  /* a linha sangra ate a borda, mas o conteudo dela fica numa coluna de
     620: num tablet a etiqueta ficava na esquerda e a seta perdida a
     700px de distancia. */
  padding:clamp(15px,3.4vw,19px) max(var(--gutter), calc((100vw - 620px) / 2));
  font-size:clamp(26px,7vw,38px); font-weight:800;
  letter-spacing:-.035em; line-height:1.08; color:var(--ink);
  border-bottom:1px solid var(--hairline);
  -webkit-tap-highlight-color:transparent;
  transition:color var(--d-base) var(--e-out), background var(--d-base) var(--e-out);
}
.sheet li:first-child a{border-top:1px solid var(--hairline)}

/* índice na mesma escala do rótulo de seção das dobras */
.sheet li a::before{
  content:counter(sheet,decimal-leading-zero);
  flex:none; width:22px;
  font-size:11.5px; font-weight:700; letter-spacing:.1em;
  color:rgba(var(--light-violet-rgb),.5);
  transition:color var(--d-base) var(--e-out);
}
/* seta à direita: fecha a linha e diz que o item leva a algum lugar */
.sheet li a::after{
  content:""; position:absolute; top:50%;
  right:max(var(--gutter), calc((100vw - 620px) / 2));
  width:9px; height:9px;
  border-right:1.6px solid currentColor; border-top:1.6px solid currentColor;
  transform:translate3d(0,-50%,0) rotate(45deg);
  opacity:.22;
  transition:opacity .35s var(--e-out), transform .5s var(--e-expo);
}
.sheet a:active{background:rgba(var(--white-rgb),.045)}
.sheet a:active::after,
.sheet a:focus-visible::after{opacity:.6; transform:translate3d(5px,-50%,0) rotate(45deg)}

/* entrada em cascata */
.sheet li{opacity:0; transform:translate3d(0,18px,0)}
html.js-motion .sheet.is-open li{
  opacity:1; transform:none;
  transition:opacity .5s var(--e-out), transform .6s var(--e-expo);
  transition-delay:calc(var(--i,0) * 50ms + 90ms);
}
html:not(.js-motion) .sheet li{opacity:1; transform:none}

/* o item da seção em que se está fica marcado, para o menu responder
   "você está aqui" e não só "existem estas páginas". */
.sheet a[aria-current="true"]{
  color:var(--light-violet);
  background:linear-gradient(90deg,
    rgba(var(--violet-blue-rgb),.26) 0%,
    rgba(var(--violet-blue-rgb),.06) 54%,
    rgba(var(--violet-blue-rgb),0) 90%);
  box-shadow:inset 3px 0 0 var(--lavander),
             inset 18px 0 30px -18px rgba(var(--lavander-rgb),.9);
}
.sheet a[aria-current="true"]::before{color:var(--lavander)}
.sheet a[aria-current="true"]::after{
  opacity:.9; transform:translate3d(5px,-50%,0) rotate(45deg);
}

/* Advertise é a ação principal, não mais um item da lista */
.sheet li:last-child a{
  margin:clamp(24px,6vw,34px) max(var(--gutter), calc((100vw - 620px) / 2)) 0;
  border-top:0; border-bottom:0; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center; gap:0;
  height:62px; padding:0 24px;
  font-size:19px; letter-spacing:-.015em;
  background:linear-gradient(180deg,#8D70F7 0%,#7059F5 42%,#5346F0 100%);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
             0 18px 48px -16px rgba(var(--violet-blue-rgb),.95);
}
.sheet li:last-child a::before,
.sheet li:last-child a::after{display:none}
.sheet li:last-child a[aria-current="true"]{color:#fff; box-shadow:
  inset 0 1px 0 rgba(255,255,255,.42),
  0 18px 48px -16px rgba(var(--violet-blue-rgb),.95)}
.sheet li:last-child a:active{background:linear-gradient(180deg,#9B80F9 0%,#7059F5 42%,#5346F0 100%)}

/* contato no pé da folha: fecha a navegação sem obrigar a rolar a página */
.sheet__foot{
  margin-top:auto; padding-top:30px;
  border-top:1px solid var(--hairline);
  display:grid; gap:6px;
  font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}
.sheet__foot a{
  display:inline; padding:0; border:0; font:inherit; letter-spacing:inherit;
  color:var(--muted);
}

/* ── a folha em tela baixa (telefone deitado) ──────────────────────
   Nao cabe tudo em 360 de altura, entao ela empilha a partir do topo e
   rola: melhor rolar uma lista compacta do que espremer o corpo do
   texto ate ele virar outra coisa. */
@media (max-width:860px) and (max-height:520px){
  .sheet{
    padding-top:calc(var(--hdr-top) + var(--hdr-pill-h) + 14px);
    grid-template-rows:auto auto; align-content:start;
  }
  .sheet nav{align-self:start}
  /* escopado no nav: `.sheet a` e `.sheet__foot a` tem a MESMA
     especificidade (uma classe + um tipo), entao um bloco escrito
     depois no arquivo levava junto os links de contato do rodape. */
  .sheet nav a{font-size:23px; padding-block:11px}
  .sheet nav li a::before{font-size:10px; width:19px}
  .sheet nav li:last-child a{height:52px; font-size:17px; margin-top:18px}
  .sheet__foot{margin-top:24px; padding-top:20px}
}

/* ── a folha no tablet em pe ───────────────────────────────────────── */
@media (min-width:601px) and (max-width:860px) and (min-height:521px){
  .sheet nav a{font-size:34px; padding-block:22px; gap:20px}
  .sheet nav li a::before{font-size:12px; width:26px}
  .sheet nav li:last-child a{height:70px; font-size:21px}
  .sheet__foot{font-size:12px; gap:8px}
}

/* ══ RODAPÉ ══════════════════════════════════════════════════════════
   Três faixas com pesos diferentes: identidade + ação, navegação, legal.
   A marca d'água gigante que fechava o rodapé saiu — ela só empurrava a
   linha legal para fora da tela no telefone e não dizia nada. */
.ftr{
  position:relative; z-index:2; background:var(--black);
  padding:clamp(52px,6.4vw,96px) var(--gutter) 22px;
  overflow:hidden;
}
/* faz a costura com a dobra final: o roxo do CTA não corta seco no preto,
   ele se apaga dentro do rodapé. */
.ftr::before{
  content:""; position:absolute; left:50%; top:0; translate:-50% -55%;
  width:min(1400px,130%); aspect-ratio:2.6 / 1; pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(var(--violet-blue-rgb),.22), rgba(var(--violet-blue-rgb),.06) 55%,
    rgba(var(--violet-blue-rgb),0) 100%);
}
.ftr::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,
    transparent, rgba(var(--lavander-rgb),.55) 22%, rgba(var(--lavander-rgb),.55) 78%, transparent);
}
.ftr__in{position:relative; max-width:var(--maxw); margin:0 auto}

/* ── corpo: identidade + ação | navegação ───────────────────────────── */
.ftr__body{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  align-items:start; gap:clamp(30px,4vw,72px);
  padding-bottom:clamp(32px,4vw,52px);
  border-bottom:1px solid var(--hairline);
}
.ftr__id{display:grid; gap:clamp(15px,1.8vw,22px); justify-items:start; align-content:start}
.ftr__brand{display:block; width:max-content; line-height:0}
.ftr__brand img{display:block; width:clamp(158px,15vw,206px); height:auto}
.ftr__claim{
  max-width:30ch; font-size:clamp(17px,1.5vw,21px); font-weight:500;
  line-height:1.35; letter-spacing:-.025em; color:var(--muted);
}

/* o bloco de ação: o rodapé passa a ter uma saída, não só uma lista */
.ftr__act{
  display:grid; gap:14px; justify-items:stretch;
  width:100%; max-width:430px; margin-top:clamp(2px,.8vw,8px);
  padding:clamp(20px,2.2vw,26px);
  border-radius:20px;
  background:
    linear-gradient(150deg, rgba(var(--violet-blue-rgb),.20) 0%,
      rgba(var(--violet-blue-rgb),.05) 52%, rgba(var(--violet-blue-rgb),0) 100%),
    rgba(var(--white-rgb),.03);
  box-shadow:inset 0 0 0 1px rgba(var(--white-rgb),.09);
}
.ftr__act-k{
  font-size:12px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--lavander);
}
.ftr__mail{
  /* o disco encosta na borda direita do cartão em vez de correr atrás do
     texto: assim a caixa tem duas âncoras, o rótulo e a seta. */
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-size:clamp(18px,1.7vw,23px); font-weight:700;
  letter-spacing:-.03em; line-height:1.15; color:var(--ink);
  overflow-wrap:anywhere;
  transition:color var(--d-base) var(--e-out);
}
/* a seta ganha corpo próprio: o traço fica dentro de um disco que desliza
   junto no hover, em vez de a seta escorregar solta do texto. */
.ftr__mail .ftr__arw{
  flex:none; width:34px; height:34px; padding:9px;
  border-radius:50%; background:rgba(var(--white-rgb),.08);
  box-shadow:inset 0 0 0 1px rgba(var(--white-rgb),.14);
  transition:transform .5s var(--e-expo), background var(--d-base) var(--e-out),
             box-shadow var(--d-base) var(--e-out);
}
.ftr__mail:hover,.ftr__mail:focus-visible{color:var(--light-violet)}
.ftr__mail:hover .ftr__arw,.ftr__mail:focus-visible .ftr__arw{
  transform:translateX(5px);
  background:var(--violet-blue);
  box-shadow:inset 0 0 0 1px rgba(var(--lavander-rgb),.7),
             0 10px 24px -10px rgba(var(--violet-blue-rgb),.95);
}
.ftr__arw{display:block; width:15px; height:13px; overflow:visible}

.ftr__soc{display:flex; flex-wrap:wrap; gap:8px}
.ftr__soc a{
  display:block; padding:7px 14px; border-radius:999px;
  font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--muted);
  box-shadow:inset 0 0 0 1px rgba(var(--white-rgb),.12);
  transition:color var(--d-base) var(--e-out), background var(--d-base) var(--e-out),
             box-shadow var(--d-base) var(--e-out);
}
.ftr__soc a:hover,.ftr__soc a:focus-visible{
  color:var(--ink); background:rgba(var(--white-rgb),.07);
  box-shadow:inset 0 0 0 1px rgba(var(--lavander-rgb),.5);
}

/* ── faixa 2: colunas de links ──────────────────────────────────────── */
.ftr__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,40px);
  /* alinha a primeira linha de links com a base do wordmark, em vez de
     começar colada no topo da faixa. */
  padding-top:clamp(4px,1vw,12px);
}
/* Plus Jakarta Sans, como o resto do site. O mono ficava para o rótulo
   legal, não para título de coluna. */
.ftr__c h2{
  font-size:12px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--lavander); margin-bottom:16px;
}
.ftr__c li+li{margin-top:11px}
.ftr__c a{
  position:relative; display:inline-block; font-size:15px; color:var(--muted);
  transition:color var(--d-base) var(--e-out);
}
.ftr__c a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:linear-gradient(90deg,var(--lavander),var(--light-violet));
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--e-expo);
}
.ftr__c a:hover,.ftr__c a:focus-visible{color:var(--ink)}
.ftr__c a:hover::after,.ftr__c a:focus-visible::after{transform:scaleX(1); transform-origin:left}

/* ── faixa 3: linha legal ───────────────────────────────────────────── */
.ftr__legal{
  display:flex; align-items:center; gap:10px 24px; flex-wrap:wrap;
  padding-top:clamp(20px,2.4vw,30px);
  font-size:11px; font-weight:600; letter-spacing:.1em;
  color:var(--faint); text-transform:uppercase;
}
/* o "voltar ao topo" fica no meio, com margem automática dos dois lados:
   os três itens se distribuem sozinhos e reempilham sem regra extra. */
.ftr__up{
  display:inline-flex; align-items:center; gap:8px; margin-inline:auto;
  color:var(--muted); transition:color var(--d-base) var(--e-out);
}
.ftr__up .ftr__arw{
  width:12px; height:11px; rotate:-90deg;
  transition:translate .5s var(--e-expo);
}
.ftr__up:hover,.ftr__up:focus-visible{color:var(--ink)}
.ftr__up:hover .ftr__arw{translate:0 -3px}
.ftr__tag{color:var(--lavander); letter-spacing:.14em}

@media (max-width:860px){
  :root{--hdr-top:12px; --hdr-pill-h:56px; --hdr-h:68px}
  .hdr{padding-inline:var(--gutter)}
  .hdr__bar{padding:0 10px 0 20px}
  .hdr__logo{width:132px}
  .hdr__nav{display:none}
  .hdr__cta{display:none}
  .hdr__burger{display:grid; margin-left:auto}
  /* as duas metades viram uma coluna só */
  .ftr__body{grid-template-columns:1fr; gap:34px; padding-bottom:30px}
  .ftr__act{max-width:none}
  /* duas colunas: em uma só o rodapé virava uma rolagem eterna, que era
     metade do problema do rodapé antigo no telefone. */
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 24px; padding-top:0}
  /* a terceira coluna ficaria sozinha na segunda linha com um vazio do
     lado: ela ocupa a largura e deita a lista. */
  .ftr__c--wide{grid-column:1 / -1}
  .ftr__c--wide ul{display:flex; flex-wrap:wrap; gap:8px 22px}
  .ftr__c--wide li+li{margin-top:0}
  /* copyright em cima, os dois marcadores dividindo a linha de baixo */
  .ftr__legal{gap:14px}
  .ftr__cr{width:100%; order:1}
  .ftr__up{order:2; margin-inline:0}
  .ftr__tag{order:3; margin-left:auto}
}
@media (max-width:400px){
  .ftr__mail{font-size:17px; gap:10px}
  .ftr__mail .ftr__arw{width:30px; height:30px; padding:8px}
  .ftr__grid{gap:26px 18px}
  .ftr__c a{font-size:14px}
}

/* ══ ODÔMETRO — dígitos em rolo, reversíveis no scrub ════════════════ */
.odo{display:inline-flex; align-items:flex-end; line-height:1; font-variant-numeric:tabular-nums}
.odo__c{display:block; height:1em; overflow:hidden}
.odo__r{display:block; will-change:transform}
.odo__r span{display:block; height:1em; line-height:1}
.odo__s{display:block; height:1em; line-height:1}