/* ══════════════════════════════════════════════════════════════════════
   NAVRIDE® — o palco, o device e as sete cenas
   ══════════════════════════════════════════════════════════════════════ */

.ride{position:relative; z-index:1}
.stage{position:relative; overflow:hidden}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}

html.js-motion .ride{height:calc((var(--beats,12) + 1) * 100svh)}
html.js-motion .stage{
  position:sticky; top:0; height:100svh;
  display:grid; place-items:center;
}
html.js-motion .scene{
  position:absolute; inset:0; z-index:7;
  display:grid; align-content:center;
  padding:calc(var(--hdr-h) + 3vh) 0 8vh;
  pointer-events:none; opacity:0;
}
html.js-motion .scene a,html.js-motion .scene button{pointer-events:auto}
html.js-motion .scene.is-live{pointer-events:auto}
html.js-motion .static-only{display:none}

/* ── glows ambiente ─────────────────────────────────────────────────── */
.glows{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.glow{
  position:absolute; border-radius:50%;
  will-change:opacity; transform:translateZ(0);
}
/* glow/violet · glow/blue · glow/white do DS. O "Layer Blur" do Figma vira
   falloff no próprio gradiente — mesmo resultado, sem re-raster por frame. */
.glow--violet{
  width:104vw; height:78vw; left:-28vw; top:-30vw; opacity:.34;
  background:radial-gradient(closest-side,
    rgba(224,222,255,.62) 0%, rgba(224,222,255,.34) 26%,
    rgba(224,222,255,.14) 52%, rgba(224,222,255,.04) 74%, rgba(224,222,255,0) 100%);
}
.glow--blue{
  width:88vw; height:74vw; right:-24vw; bottom:-26vw; opacity:.42;
  background:radial-gradient(closest-side,
    rgba(81,69,241,.72) 0%, rgba(81,69,241,.40) 26%,
    rgba(81,69,241,.16) 54%, rgba(81,69,241,.04) 76%, rgba(81,69,241,0) 100%);
}
.glow--white{
  width:58vw; height:44vw; left:24vw; top:18vh; opacity:.16;
  background:radial-gradient(closest-side,
    rgba(255,255,255,.5) 0%, rgba(255,255,255,.22) 32%,
    rgba(255,255,255,.06) 64%, rgba(255,255,255,0) 100%);
}

/* ── inversão para o bloco de dados ─────────────────────────────────── */
.invert{
  position:absolute; inset:-2px; z-index:5; background:var(--ice);
  clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
  will-change:clip-path;
}

/* ══════════════════════════════════════════════════════════════════════
   O DEVICE — composição de camadas do Figma.
   Chassi 546,1 × 478,3 (aspect 1,1417). Tela útil 490,9 × 318,7 dentro dele.
   Nenhum pixel do aparelho é desenhado aqui: tudo vem de assets/hero/.
   ══════════════════════════════════════════════════════════════════════ */
.device-wrap{
  position:absolute; inset:0; z-index:6;
  display:grid; place-items:center;
  pointer-events:none;
}
.device{
  --dw:42.66vw;                    /* 546,1 / 1280 */
  --sw:calc(var(--dw) * .89892);   /* largura da tela útil, 490,9 */
  /* radial exato do Figma, em vetor. Usado pelo painel do hero, pelo
     slot do Main Video e pelos três cartões de formato. */
  --grad:var(--gradient-radial);
  position:relative; width:var(--dw); aspect-ratio:546.1 / 478.3;
  will-change:transform,opacity;
}

/* recorte da tela: 27 / 26,7 / 490,9 / 318,7 sobre a caixa do device.
   Envolve o furo alfa do chassi com 1–3px de sangria em cada lado. */
.device__screen{
  position:absolute;
  left:4.944%; top:5.582%; width:89.892%; height:66.632%;
  overflow:hidden; z-index:1; background:#000;
}
.device__chassis{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none;
}

/* ── camadas de tela ─────────────────────────────────────────────────
   Régua interna 490,9 × 318,7. Slots da seção 2.3 do brief.          */
.scr{position:absolute; display:block; will-change:transform,opacity}
/* Main Video: mesmo gradiente vetorial do painel. O criativo real
   (screen-main.png) foi removido dos assets e precisa ser reexportado
   quando a cena de Formatos for tratada. */
.scr--main {left:0; top:0; width:67.610%;   height:68.654%;   z-index:1;
            object-fit:cover; display:block;
            background:var(--grad) no-repeat 0 0/100% 100%;}
.scr--guide{left:0; top:0; width:67.610%;   height:93.819%;   z-index:3;
            object-fit:cover; object-position:0 0}
.scr--side {left:67.610%; top:0; width:32.410%; height:100%;  z-index:1; opacity:0}
/* Side Banner da dobra FINAL: mesmo slot, uma camada acima do guia. */
.scr--sidead{left:67.610%; top:0; width:32.410%; height:100%; z-index:4;
            object-fit:cover; opacity:0}

/* ── painel "this is IDOOH Media" ────────────────────────────────────
   Nó 619:1088 da timeline. Gradiente e frase são UM grupo: o grupo
   escala de tela cheia (1) para o slot do main (.67610 × .68654) e o
   texto encolhe junto. Origem no canto superior esquerdo, que é o ponto
   que não se move entre os dois estados (-3,4 / -4,6 no Figma).
   O gradiente é o radial exato do Figma, em vetor: escala sem perder
   nitidez e não custa request.                                        */
/* z-index 7: acima da BAR (6). A BAR não anima, mas no ato 0 o painel
   ocupa a tela inteira e passa por cima dela, como no frame 0 do Figma.
   Quando o painel encolhe para o slot do main, a BAR reaparece sozinha,
   sem nunca ter se mexido. */
.scr__idooh{
  position:absolute; left:0; top:0; width:100%; height:100%; z-index:7;
  transform-origin:0 0; will-change:transform,opacity;
  background:var(--grad) no-repeat 0 0/100% 100%;
}

/* Tipografia medida no nó 619:845: Plus Jakarta Sans, itálico 400 a 45px
   e ExtraBold 800 a 52,097px, ambos com line-height 54 e tracking -2,6048,
   na régua de tela de 490,9. Tudo em fração de --sw para escalar junto.  */
.scrh{
  position:absolute; inset:0; z-index:1; margin:0;
  display:grid; align-content:center; justify-items:center;
  text-align:center; color:#FAFAFA;
  letter-spacing:calc(var(--sw) * -.0053);
}
.scrh__l{
  display:block; white-space:nowrap;
  line-height:calc(var(--sw) * .11); min-height:calc(var(--sw) * .11);
}
.scrh__l1{font-style:italic; font-weight:400; font-size:calc(var(--sw) * .09166)}
.scrh__l2{font-weight:800;                    font-size:calc(var(--sw) * .10612)}

/* cursor do typewriter: só existe na linha que está sendo digitada */
.scrh__caret{
  display:inline-block; width:.055em; height:.74em; margin-left:.045em;
  background:currentColor; vertical-align:-.05em; opacity:0; border-radius:1px;
}
.scrh__l.is-typing .scrh__caret{animation:caret .82s steps(1,end) infinite}
@keyframes caret{0%,49.9%{opacity:1} 50%,100%{opacity:0}}

/* Sem motion (JS desligado ou prefers-reduced-motion) o typewriter não roda:
   a frase aparece inteira, lida do próprio data-type. */
html:not(.js-motion) .scrh__l::after{content:attr(data-type)}
html:not(.js-motion) .scrh__caret{display:none}

.scrfmt-bg{
  position:absolute; inset:0; z-index:4; opacity:0;
  background:var(--dark-violet); will-change:opacity;
}

/* ── cartões de formato dentro da tela (dobra 3) ─────────────────────
   Medidas do Figma na régua daquela dobra (tela de 473,80) convertidas
   para a régua sem escala (490,94) pelo fator 1,03618, e então escritas
   como fração de --sw para escalar junto com o device.                */
.scrfmt{
  position:absolute; z-index:6; opacity:0;
  background:var(--light-violet);   /* chapado, não o gradiente */
  color:var(--dark-violet); will-change:opacity;
  display:grid; align-content:start;
}
.scrfmt h3{
  margin:0; font-weight:800; letter-spacing:-.05em;
  font-size:calc(var(--sw) * .04919); line-height:calc(var(--sw) * .0527);
}
.scrfmt p{
  margin:0; font-weight:500; letter-spacing:-.05em;
  font-size:calc(var(--sw) * .04074); line-height:calc(var(--sw) * .04277);
}
.scrfmt p b{font-weight:700}
.scrfmt__note{
  display:flex; align-items:center; gap:calc(var(--sw) * .012);
  font-weight:700; font-style:italic; letter-spacing:-.05em; opacity:.5;
  font-size:calc(var(--sw) * .02852); line-height:calc(var(--sw) * .03093);
  white-space:nowrap;   /* o rodapé é sempre uma linha só */
}
.scrfmt__note img{width:auto; height:calc(var(--sw) * .0245)}

/* Main Video: slot do main, 320,21 × 215,56 em 0 / -4,43 */
.scrfmt--main{
  left:0; top:-1.441%; width:67.583%; height:70.089%;
  padding:calc(var(--sw) * .07385) calc(var(--sw) * .06034);
  row-gap:calc(var(--sw) * .02075);
}
.scrfmt--main p{max-width:calc(var(--sw) * .54812)}
.scrfmt--main .scrfmt__note{margin-top:calc(var(--sw) * .02)}

/* Slide Banner: cobre main + faixa, 319,1 × 289,0. Só a BAR sobra. */
.scrfmt--slide{
  left:0; top:-.195%; width:67.610%; height:93.970%;
  padding:calc(var(--sw) * .07385) calc(var(--sw) * .06034);
  row-gap:calc(var(--sw) * .02075);
}
.scrfmt--slide p{max-width:calc(var(--sw) * .54812)}
.scrfmt--slide .scrfmt__note{margin-top:calc(var(--sw) * .02)}

/* Side Banner: dentro do painel lateral, e centrado (o Figma alinha ao
   centro só neste, os outros dois são à esquerda). */
.scrfmt--side{
  left:67.610%; top:0; width:32.410%; height:100%;
  padding:0; text-align:center; justify-items:center;
}
.scrfmt--side h3{
  position:absolute; left:50%; translate:-50% 0; top:10.09%;
  width:64.14%; line-height:calc(var(--sw) * .03799);
}
.scrfmt--side p{
  position:absolute; left:50%; translate:-50% 0; top:27.54%;
  width:79.85%; font-weight:400;
  font-size:calc(var(--sw) * .03432); line-height:calc(var(--sw) * .03432);
}
.scrfmt--side .scrfmt__note{
  position:absolute; left:50%; translate:-50% 0; top:84.34%; opacity:1;
}

/* ── faixa de menu: trilho de tiles + BAR roxa ───────────────────────
   Régua da faixa 331,9 × 99,9 (seção 2.4).                            */
.scr-menu{
  position:absolute; left:0; top:68.654%; width:67.610%; height:31.346%;
  z-index:5; will-change:transform,opacity;
  /* Sem background: a tela já é preta, e uma caixa preta aqui só criava
     borda visível. E sem overflow:hidden, que cortava o tile no quique.
     O clip-path recorta esquerda, direita e base (o trilho precisa sumir
     nas laterais) mas deixa o topo livre para o tile crescer e pular. */
  clip-path:inset(-40% 0 0 0);
}
.scr-menu__track{
  position:absolute; inset:0; will-change:transform;
}
/* A BAR não é filha da faixa: é irmã, ancorada na base da tela, e por
   cima de tudo (faixa 5, guia 3). Largura 67,667% faz a barra roxa do
   arquivo cair exatamente sobre a caixa da BAR do Figma (326,7 de 490,9,
   descontando os 21px de folga transparente do export). */
.scr-menu__bar{
  position:absolute; left:0; bottom:0; width:67.667%; height:auto;
  z-index:6; pointer-events:none;
}
/* tile: 50,4 × 52 na faixa; passo 63,9 a partir de x=19,3; y=11,8 */
.tile{
  position:absolute; top:11.812%; width:15.185%; height:52.047%;
  will-change:transform; pointer-events:auto;
}
/* canvas dos SVGs novos é 51×52, o tile ocupa tudo e não tem sombra assada:
   nada de normalizar offset, o img só preenche a caixa. */
.tile img{position:absolute; inset:0; width:100%; height:100%; max-width:none}
.tile[data-tile="home"] img{left:0; top:0; width:100%}
.tile[data-i="0"]{left:5.815%}
.tile[data-i="1"]{left:25.068%}
.tile[data-i="2"]{left:44.320%}
.tile[data-i="3"]{left:63.573%}
.tile[data-i="4"]{left:82.826%}
.tile[data-i="5"]{left:102.079%}
.tile[data-i="6"]{left:121.332%}
.tile[data-i="7"]{left:140.584%}

/* ── tiles caindo ────────────────────────────────────────────────────
   Vivem no palco, por cima do device e das cenas. A sombra é CSS de
   propósito: os SVGs novos vêm sem sombra assada, então ela acompanha
   a rotação em vez de girar junto com o desenho.                      */
.drops{position:absolute; inset:0; z-index:8; overflow:hidden; pointer-events:none}
.drop{
  position:absolute; left:0; top:0; will-change:transform;
  pointer-events:auto; cursor:grab; touch-action:none;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.55));
}
.drop img{display:block; width:100%; height:100%; user-select:none; -webkit-user-drag:none}
.drop.is-held{cursor:grabbing; filter:drop-shadow(0 26px 42px rgba(0,0,0,.62))}
@media (prefers-reduced-motion:reduce){ .drops{display:none} }

/* ── badges do ato 1, ancorados na caixa do device ───────────────────*/
.badges{position:absolute; inset:0; z-index:4; pointer-events:none}
.badge{
  position:absolute; display:flex; align-items:center; gap:11px;
  height:57px; padding:0 20px; border-radius:28.5px; white-space:nowrap;
  font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--white);
  background:rgba(var(--white-rgb),.10);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(var(--white-rgb),.16), 0 14px 40px -18px rgba(0,0,0,.9);
  will-change:transform,opacity,filter;
}
.badge i{width:17.8px; height:17.8px; border-radius:50%; flex:none}
.badge--a{left:-28.07%; top:14.20%}
.badge--a i{background:var(--violet-blue); box-shadow:0 0 14px rgba(var(--violet-blue-rgb),.9)}
.badge--b{left:81.21%; top:8.24%}
.badge--b i{background:var(--gold); box-shadow:0 0 14px rgba(255,176,32,.9)}
.badge--c{left:77.62%; top:53.00%; color:var(--gold); padding:0 20px}

/* Slide Pages */
.slides{position:absolute; z-index:7; left:0; width:67.610%; top:0; height:68.654%; transform-style:preserve-3d; opacity:0}
.slide{
  position:absolute; inset:0; border-radius:6px; will-change:transform,opacity;
  background:linear-gradient(150deg,rgba(46,40,88,.99),rgba(16,14,30,.99));
  box-shadow:0 0 0 1px rgba(var(--lavander-rgb),.6), 0 0 34px -6px rgba(var(--violet-blue-rgb),.5), 0 22px 50px -22px rgba(0,0,0,.95);
  padding:7%; display:grid; align-content:start; gap:7%;
  backdrop-filter:blur(6px);
}
.slide b{font-weight:700; font-size:clamp(7px,calc(var(--dw) * 0.01),12px); color:var(--lavander); letter-spacing:.2em}
.slide i{display:block; height:5px; border-radius:3px; background:rgba(var(--white-rgb),.3)}
.slide i:last-child{width:56%; background:rgba(var(--violet-blue-rgb),.7)}

/* POVs do ecossistema */
.pov{
  position:absolute; z-index:7; left:0; width:67.610%; top:0; height:68.654%;
  border-radius:6px; opacity:0; will-change:opacity,transform;
  background:linear-gradient(150deg,#16132b,#08070f);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  display:grid; align-content:center; justify-items:start; gap:2%;
  padding:0 7%;
}
.pov__ttl{font-weight:700; font-size:clamp(6px,calc(var(--dw) * 0.008),10px); letter-spacing:.2em; color:var(--lavander)}
.pov__big{font-size:clamp(20px,calc(var(--dw) * 0.044),54px); font-weight:800; letter-spacing:-.04em; line-height:1; color:#fff}
.pov__big i{font-style:normal; font-size:.42em; color:var(--lavander); margin-left:.1em}
.pov--drv .pov__big{color:var(--gold)}
.pov__sub{font-size:clamp(7px,calc(var(--dw) * 0.01),13px); color:var(--muted)}
.pov__spark{display:flex; align-items:flex-end; gap:4%; width:64%; height:22%; margin-top:3%}
.pov__spark i{flex:1; background:linear-gradient(180deg,var(--lavander),var(--violet-blue)); border-radius:2px; transform-origin:bottom; height:100%}
.pov__spark i:nth-child(1){scale:1 .3}.pov__spark i:nth-child(2){scale:1 .55}.pov__spark i:nth-child(3){scale:1 .42}
.pov__spark i:nth-child(4){scale:1 .78}.pov__spark i:nth-child(5){scale:1 .62}.pov__spark i:nth-child(6){scale:1 .9}
.pov__spark i:nth-child(7){scale:1 .74}.pov__spark i:nth-child(8){scale:1 1}
.pov__bar{width:64%; height:6px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:3%}
.pov__bar i{display:block; height:100%; width:72%; background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}
.pov__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:5%; width:74%; margin-bottom:3%}
.pov__grid i{aspect-ratio:1.5; border-radius:4px; background:linear-gradient(140deg,rgba(var(--lavander-rgb),.5),rgba(var(--violet-blue-rgb),.22))}
.pov__grid i:nth-child(2){background:linear-gradient(140deg,rgba(255,176,32,.55),rgba(255,176,32,.14))}
.pov__grid i:nth-child(5){background:linear-gradient(140deg,rgba(2,210,89,.5),rgba(2,210,89,.14))}

/* ── feixes do ecossistema ──────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════
   CENAS
   ══════════════════════════════════════════════════════════════════════ */
.scene__head{display:grid; gap:18px; justify-items:start}
.scene__head--center{justify-items:center; text-align:center}
.scene__head--center .lead{margin-inline:auto}

/* ── 1 · HERO ───────────────────────────────────────────────────────
   O texto da dobra vive fora do device: legenda, rótulo lateral e display.
   Coordenadas do Figma na régua 1280 × 800.
   ─────────────────────────────────────────────────────────────────── */
html.js-motion .scene--hero{z-index:8; padding:0}

/* legenda do ato 0: x=165,4 y=675,8 w=954,4, duas linhas, centralizada */
.hero__cap{
  position:absolute; left:12.922%; top:84.475%; width:74.563%;
  margin:0; text-align:center; text-wrap:balance;
  font-size:18px; line-height:1.42; font-weight:500; color:var(--muted);
  will-change:transform,opacity,filter;
}

/* rótulo lateral do ato 2: x=187,5 y=404,5 w=145, 3 linhas, à direita */
.hero__side{
  position:absolute; left:14.648%; top:50.563%; width:11.328%;
  margin:0; text-align:right; font-size:20.7px; line-height:1.22;
  font-weight:400; color:var(--gray-2); opacity:0;
  will-change:transform,opacity;
}

/* display do ato 2: x=260 y=675,8 w=760 h=59, ~48px bold */
.hero__display{
  position:absolute; left:20.313%; top:84.475%; width:59.375%;
  margin:0; text-align:center; white-space:nowrap; opacity:0;
  font-size:52.2px; font-weight:700; letter-spacing:-.03em; line-height:1.22;
  will-change:transform,opacity;
}
/* medido no frame-2: o display é marca d'água escura, não headline clara */
.hero__display b{font-weight:800; color:#414151}
.hero__display span{color:#3D3D40}

/* Atalho da dobra 1: só existe no telefone, onde o CTA do header some e
   sobra o hambúrguer. No desktop ele viraria um item solto no meio do
   palco, esticado pelo grid da cena. */
.hero__cta{display:none}

.scrollhint{
  position:absolute; left:50%; bottom:clamp(12px,2vh,20px); translate:-50% 0;
  display:grid; justify-items:center; gap:9px;
  font-size:10px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--faint); will-change:opacity;
  --fall:23px;
}
@media (max-width:1200px),(max-height:820px){ .scrollhint span{display:none} }

/* a cápsula: mesmo vidro dos badges flutuantes, para o indicador
   pertencer à dobra em vez de ser um traço solto. */
.scrollhint i{
  position:relative; display:block; overflow:hidden;
  width:24px; height:38px; border-radius:13px;
  background:rgba(var(--white-rgb),.05);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(var(--white-rgb),.2),
             0 14px 28px -18px rgba(0,0,0,.9);
}
/* halo lavanda no topo, de onde o ponto nasce. A parada final cai
   dentro da caixa, senao a borda do gradiente vira um corte reto. */
.scrollhint i::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(118% 76% at 50% -8%,
    rgba(var(--lavander-rgb),.5) 0%, rgba(var(--lavander-rgb),.17) 40%,
    rgba(var(--lavander-rgb),0) 76%);
}
/* o ponto de luz: cai, se estica no meio do curso e apaga embaixo */
.scrollhint b{
  position:absolute; left:50%; top:8px;
  width:3.5px; height:3.5px; margin-left:-1.75px;
  border-radius:2px; background:var(--lavander);
  box-shadow:0 0 9px rgba(var(--lavander-rgb),.95);
  animation:hintdot 2.1s var(--e-inout) infinite;
}
@keyframes hintdot{
  0%  {transform:translateY(0) scaleY(1);                  opacity:0}
  14% {opacity:1}
  52% {transform:translateY(calc(var(--fall) * .6)) scaleY(2.1); opacity:1}
  84% {transform:translateY(var(--fall)) scaleY(1);        opacity:0}
  100%{transform:translateY(var(--fall)) scaleY(1);        opacity:0}
}
/* as duas setas piscam em cascata, na mesma volta do ponto */
.scrollhint__ch{
  display:block; width:15px; height:12px; overflow:visible;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.scrollhint__ch path{opacity:.16; animation:hintch 2.1s var(--e-inout) infinite}
.scrollhint__ch path + path{animation-delay:.17s}
@keyframes hintch{0%,100%{opacity:.16} 46%{opacity:.95}}

/* ── 2 · ECOSSISTEMA ──────────────────────────────────────────────────
   Composição do frame 604:1077, régua 1280 × 800. --u é 1 px de design,
   igual à régua do device (42,66vw = 546,06/1280), então a coluna e o
   tablet escalam juntos e a proporção do Figma se mantém em qualquer
   largura.                                                             */
.eco{
  --u:.078125vw;                      /* 100vw / 1280 */
  position:absolute; inset:0;
}
.eco__col{
  position:absolute; left:5.690%;     /* 72,83 / 1280 */
  /* centro em 54,1% e não em 50%: no Figma a coluna é centrada na área
     abaixo do header, não no frame inteiro. Sem isso o título encosta
     na barra. */
  top:54.1%; translate:0 -50%;
  width:33.725%;                      /* 431,68 / 1280 */
  display:grid; gap:calc(var(--u) * 28);
}
.eco__ttl{
  /* mais largo que a coluna dos cards: a quebra pedida é em duas linhas,
     "A connected media network" / "that moves with the city.", e em
     inglês a primeira não cabe nos 378 do Figma. */
  margin:0 0 calc(var(--u) * 6); max-width:calc(var(--u) * 500); width:max-content;
  font-size:calc(var(--u) * 31); line-height:1.14;
  font-weight:800; letter-spacing:-.03em; color:var(--white);
}
/* "moves with the city." é itálico regular, não bold: só o "that" antes
   dele é que fica no peso do título. */
.eco__ttl em{font-style:italic; font-weight:400}

.sides{display:grid; gap:calc(var(--u) * 21)}     /* 144,20 de passo menos 120,20 */

/* card: 431,68 × 120,20, raio 19,166, fundo rgba(217,217,217,.05) */
.side{
  position:relative; min-height:calc(var(--u) * 120.2);
  /* direita mais folgada que o Figma (57,5): a copy aprovada em inglês é
     mais longa que o lorem do arquivo e precisa da largura. */
  padding:calc(var(--u) * 19) calc(var(--u) * 12) calc(var(--u) * 21) calc(var(--u) * 23.3);
  border-radius:calc(var(--u) * 19.166);
  background:rgba(217,217,217,.05);
  box-shadow:inset 0 0 0 1px rgba(var(--white-rgb),.06);
  display:grid; grid-template-columns:auto 1fr; align-content:start;
  column-gap:calc(var(--u) * 15.9); row-gap:calc(var(--u) * 11.5);
  will-change:transform,opacity,filter;
}
/* barra de destaque: 66,13 de altura colada na borda esquerda, com brilho */
.side::before{
  content:""; position:absolute; left:0; top:50%;
  width:calc(var(--u) * 4.8); height:calc(var(--u) * 66.13); translate:0 -50%;
  border-radius:calc(var(--u) * 4.8);
  background:var(--c); box-shadow:0 0 calc(var(--u) * 22) var(--c);
  transform:scaleY(0); transform-origin:center;
  transition:transform .5s var(--e-expo);
}
.side.on::before{transform:scaleY(1)}

.side__ico{
  grid-row:1; width:calc(var(--u) * 28); height:calc(var(--u) * 26);
  object-fit:contain; object-position:left center; align-self:center;
}
.side h3{
  grid-row:1; margin:0; align-self:center;
  font-size:calc(var(--u) * 24.15); line-height:calc(var(--u) * 25.9);
  font-weight:800; letter-spacing:-.05em; color:#fff;
}
.side p{
  grid-column:1 / -1; grid-row:2; margin:0;
  /* Duas linhas, sempre. A maior descrição mede 783px numa linha só; com
     396 de coluna e corpo 17 ela cai para ~739, ou 370 por linha, o que
     deixa 7% de folga para a quebra de palavra. O Figma pede 19,17 num
     lorem de 77 caracteres, mas a copy aprovada tem até 110. */
  max-width:calc(var(--u) * 396);
  font-size:calc(var(--u) * 17); line-height:calc(var(--u) * 20);
  font-weight:400; letter-spacing:-.05em; color:var(--gray-2);
}

/* Legenda sob o device: 641,26 de esquerda, 547,13 de largura, centrada.
   O topo é escrito pelo JS a partir da base real do aparelho (30px de
   respiro); a % aqui é só o valor de partida antes do primeiro refresh.
   text-wrap:balance distribui as três linhas em vez de deixar a última
   sobrando curta. */
.eco__cap{
  position:absolute; left:50.098%; top:83.747%; width:42.744%;
  margin:0; text-align:center; text-wrap:balance;
  font-size:calc(var(--u) * 16); line-height:calc(var(--u) * 20.5);
  font-weight:500; letter-spacing:-.03em; color:var(--gray-2);
}
.eco__cap b{font-weight:700; color:var(--white)}

/* ── 3 · FORMATOS ─────────────────────────────────────────────────────
   Frames 640:1971 / 642:2708 / 642:2916, régua 1280 × 800. O device vai
   para a ESQUERDA nesta dobra e a coluna de texto para a direita, com o
   conteúdo de cada formato aparecendo dentro da tela.
   Coluna toda centrada em x=947,28 (74,006% de 1280).                 */
.fmt{
  --u:.078125vw;                       /* 100vw / 1280 */
  position:absolute; inset:0;
}
.fmt__ttl{
  position:absolute; left:74.006%; translate:-50% 0; top:19.795%;
  margin:0; text-align:center; white-space:nowrap;
  font-size:calc(var(--u) * 36.5); line-height:calc(var(--u) * 36.5);
  font-weight:800; letter-spacing:-.05em; color:#E4E4E4;
}
.fmt__ttl em{font-style:italic; font-weight:500}
.fmt__lead{
  position:absolute; left:74.006%; translate:-50% 0; top:32.300%;
  width:42.744%; margin:0; text-align:center; text-wrap:balance;
  font-size:calc(var(--u) * 16); line-height:calc(var(--u) * 20);
  font-weight:500; letter-spacing:-.05em; color:#E4E4E4;
}

.fmts{
  position:absolute; left:74.006%; translate:-50% 0; top:47.424%;
  width:36.593%; display:grid; gap:calc(var(--u) * 16);
}
/* linha: 468,40 × 76,61, raio 19,166, fundo rgba(217,217,217,.05).
   A borda de 2px existe sempre, transparente, para a seleção não
   empurrar o layout quando acende.                                    */
.fmt-row{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:calc(var(--u) * 16); white-space:nowrap;
  min-height:calc(var(--u) * 76.61);
  padding:calc(var(--u) * 23) calc(var(--u) * 28);
  border:2px solid transparent; border-radius:calc(var(--u) * 19.166);
  background:rgba(217,217,217,.05);
}
.fmt-row__k{
  font-weight:800; letter-spacing:-.05em; color:var(--gray-3);
  font-size:calc(var(--u) * 24.15); line-height:calc(var(--u) * 25.87);
}
.fmt-row__s{
  font-weight:600; letter-spacing:-.05em; color:var(--gray-3);
  font-size:calc(var(--u) * 21); line-height:calc(var(--u) * 25.87);
}
.fmt-row__s i{font-style:normal; color:inherit}

/* ── 4 · ALCANCE — frame 649:3650, régua 1280 × 800 ──────────────────
   --u é 1 px de design. O device fica à esquerda em tamanho cheio e toda
   a leitura vai para a coluna da direita.                              */
.reach{
  --u:.078125vw;                       /* 100vw / 1280 */
  position:absolute; inset:0; color:var(--black);
}
/* nó 649:3776 — 51,205 / lh 51,205 / -0,05em, preto, centrado em 563 */
.reach__ttl{
  position:absolute; left:calc(var(--u) * 665.783); top:calc(var(--u) * 216.786);
  width:calc(var(--u) * 563); margin:0; text-align:center; white-space:nowrap;
  font-weight:800; letter-spacing:-.05em;
  font-size:calc(var(--u) * 51.205); line-height:calc(var(--u) * 51.205);
  color:var(--black);
}
/* nó 649:4346 — 44,349 / lh 44,349 / -0,05em, gray 2 */
.reach__big{
  position:absolute; left:calc(var(--u) * 721.783); top:calc(var(--u) * 355.320);
  margin:0; white-space:nowrap;
  font-weight:800; letter-spacing:-.05em;
  font-size:calc(var(--u) * 44.349); line-height:calc(var(--u) * 44.349);
  color:var(--gray-2);
}
/* nó 649:4174 — 30,703 bold + " Passengers" 25,047 medium itálico */
.reach__sub{
  position:absolute; left:calc(var(--u) * 747.283); top:calc(var(--u) * 411.292);
  margin:0; white-space:nowrap; color:var(--gray-2);
  font-weight:700; letter-spacing:-.05em;
  font-size:calc(var(--u) * 30.703); line-height:calc(var(--u) * 39);
}
.reach__sub em{font-weight:500; font-style:italic; font-size:calc(var(--u) * 25.047)}

/* nós 649:3773 e 655:5479 — cartões chapados, 168,36 de altura, gap 20 */
.rcards{
  position:absolute; left:calc(var(--u) * 708.918); top:calc(var(--u) * 484.802);
  display:flex; gap:calc(var(--u) * 20);
}
.rcard{
  min-height:calc(var(--u) * 168.365);
  padding:calc(var(--u) * 26.819) calc(var(--u) * 32.182);
  display:flex; flex-direction:column; align-items:flex-start;
  gap:calc(var(--u) * 10.727);
  border-radius:calc(var(--u) * 20.56);
  white-space:nowrap; will-change:transform,opacity;
}
.rcard--main{width:calc(var(--u) * 226.365); background:var(--violet-blue)}
.rcard--side{width:calc(var(--u) * 230.365); background:var(--lavander)}
.rcard h3{
  margin:0; font-weight:800; letter-spacing:-.05em; color:#fff;
  font-size:calc(var(--u) * 25.903); line-height:calc(var(--u) * 27.756);
}
/* nós 655:5477 / 655:5481 — número e legenda colados, sem o gap do cartão */
.rcard__fig{display:block; color:var(--light-violet)}
.rcard__n{
  display:block; font-weight:800; letter-spacing:-.05em;
  font-size:calc(var(--u) * 40); line-height:calc(var(--u) * 50);
}
.rcard__k{
  display:block; font-weight:600; letter-spacing:-.05em;
  font-size:calc(var(--u) * 21); line-height:calc(var(--u) * 26);
}

/* ── 5 · DASHBOARD — frames 650:4778 · 651:5052 · 651:5168 ───────────── */
.dashf{
  --u:.078125vw;
  position:absolute; inset:0;
}
/* nó 650:4868 — o borrão roxo atrás do MacBook, exportado com a sangria
   do blur: 1103 × 800 a partir de 404,3 / -127,9. */
.dashf__glow{
  position:absolute; left:31.586%; top:-15.986%;
  width:85.938%; height:100%; max-width:none;
  pointer-events:none; z-index:0;
}
/* nó 650:4954 — 47,132 / lh 47,132 / -0,05em, #E4E4E4. Sobe para a mesma
   linha do texto que fica em cima do computador. */
.dashf__ttl{
  position:absolute; left:calc(var(--u) * 94.761); top:calc(var(--u) * 152.054);
  margin:0; z-index:2; white-space:nowrap; color:#E4E4E4;
  font-weight:800; letter-spacing:-.05em;
  font-size:calc(var(--u) * 47.132); line-height:calc(var(--u) * 47.132);
}
.dashf__ttl em{font-weight:400; font-style:italic}
/* nó 650:4958 — 20 / lh 20 / -0,05em, centrado, 653,83 de largura */
.dashf__lead{
  position:absolute; left:calc(var(--u) * 534.10); top:calc(var(--u) * 162.054);
  width:calc(var(--u) * 653.826); margin:0; z-index:2; text-align:center;
  font-weight:500; letter-spacing:-.05em; color:#E4E4E4;
  font-size:calc(var(--u) * 20); line-height:calc(var(--u) * 20);
}
/* nó 650:4956 — o fio que liga o número ao MacBook. Três camadas: o
   trilho apagado, o preenchimento que corre a cada passo e o ponto de luz
   que chega na tela no instante em que o mockup troca. */
.dashf__wire{
  position:absolute; left:calc(var(--u) * 210.23); top:calc(var(--u) * 363.4);
  width:calc(var(--u) * 389.638); height:calc(var(--u) * 2); z-index:2;
  border-radius:2px; opacity:0;
  background:rgba(var(--violet-blue-rgb),.20);
}
.dashf__wire i{position:absolute; display:block}
.dashf__wire-fill{
  inset:0; border-radius:inherit; transform-origin:0 50%;
  background:linear-gradient(90deg,#1A1452 0%,#5145F1 46%,#9973F9 100%);
  box-shadow:0 0 calc(var(--u) * 10) rgba(var(--violet-blue-rgb),.55);
  will-change:transform;
}
.dashf__wire-dot{
  left:0; top:50%;
  width:calc(var(--u) * 9); height:calc(var(--u) * 9);
  margin:calc(var(--u) * -4.5) 0 0 calc(var(--u) * -4.5);
  border-radius:50%; background:var(--light-violet);
  box-shadow:0 0 calc(var(--u) * 18) calc(var(--u) * 2) rgba(var(--lavander-rgb),.9);
  will-change:transform,opacity;
}
/* nós 650:4886 · 651:5095 · 651:5260 — a caixa muda de altura a cada passo */
.dashf__mac{position:absolute; inset:0; z-index:1}
.mac{
  position:absolute; left:calc(var(--u) * 555.128);
  width:calc(var(--u) * 611.772); max-width:none;
  opacity:0; will-change:opacity,transform;
}
.mac[data-mac="1"]{top:calc(var(--u) * 247.054); height:calc(var(--u) * 415.469)}
.mac[data-mac="2"]{top:calc(var(--u) * 254.352); height:calc(var(--u) * 417.296)}
.mac[data-mac="3"]{top:calc(var(--u) * 267.429); height:calc(var(--u) * 407.141)}

/* cartão do passo — auto-layout 296,37 de largura, gap 23,064 */
.dsteps{position:absolute; inset:0; z-index:2}
/* Cartão de vidro: o fundo da dobra passa por dentro, desfocado, e o
   radial da marca entra como tingimento por cima. */
.dstep{
  position:absolute; left:calc(var(--u) * 101.902); top:calc(var(--u) * 305);
  width:calc(var(--u) * 296.369); min-height:calc(var(--u) * 300.982);
  padding:calc(var(--u) * 23.064) calc(var(--u) * 28.830);
  display:flex; flex-direction:column; align-items:flex-start;
  gap:calc(var(--u) * 23.064);
  border:1px solid rgba(var(--white-rgb),.16);
  border-radius:calc(var(--u) * 34.596);
  background:linear-gradient(155deg,
    rgba(var(--white-rgb),.11) 0%, rgba(var(--white-rgb),.035) 46%, rgba(var(--white-rgb),.07) 100%);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95),
             inset 0 1px 0 rgba(var(--white-rgb),.18);
  overflow:hidden; opacity:0; will-change:opacity,transform;
}

.dstep > *{position:relative; z-index:1}
/* nó 650:4897 — 72,651 quadrado, raio 23,064. O preenchimento é o radial
   da marca, o mesmo do painel do hero e do slot do Main Video. */
.dstep__n{
  display:grid; place-items:center; flex:none;
  width:calc(var(--u) * 72.651); height:calc(var(--u) * 72.651);
  border-radius:calc(var(--u) * 23.064);
  background:var(--gradient-radial) no-repeat 0 0/100% 100%;
  box-shadow:0 calc(var(--u) * 14) calc(var(--u) * 30) calc(var(--u) * -12) rgba(var(--violet-blue-rgb),.75),
             inset 0 1px 0 rgba(var(--white-rgb),.28);
  font-weight:800; letter-spacing:-.05em; color:#fff;
  font-size:calc(var(--u) * 35.613); line-height:1;
  padding-bottom:calc(var(--u) * 3);
}
.dstep h3{
  margin:0; width:calc(var(--u) * 245.629);
  font-weight:800; letter-spacing:-.05em; color:#fff;
  font-size:calc(var(--u) * 24.217); line-height:calc(var(--u) * 31);
}
.dstep h3 em{font-weight:700; font-style:italic}
.dstep__list{display:grid; gap:calc(var(--u) * 12.06)}
.dstep__list li{
  display:flex; align-items:center; gap:calc(var(--u) * 6);
  height:calc(var(--u) * 26); white-space:nowrap;
  font-weight:500; letter-spacing:-.05em; color:var(--gray-1);
  font-size:calc(var(--u) * 20.757); line-height:calc(var(--u) * 26);
}
.dstep__list img{width:calc(var(--u) * 18.451); height:calc(var(--u) * 18.451); flex:none}

/* ── 6 · DOBRA FINAL — frame 652:5264 ────────────────────────────────
   O véu é o fundo da dobra: radial da marca + banco do carro. Ele abre
   a partir da caixa do device, como já fazia, mas agora chega ao frame
   completo do Figma.                                                   */
.veil{
  position:absolute; inset:0; z-index:8; overflow:hidden; opacity:0;
  /* fora da caixa girada do gradiente vale a última parada dele, que é
     exatamente o que o radial entregaria ali. */
  background:var(--dark-violet);
  clip-path:inset(50% 50% 50% 50% round 14px);
  will-change:clip-path;
}
/* O radial do frame é uma elipse GIRADA: centro (865,18 · -331,18), eixos
   1584 e 902, o maior a -73,1°. CSS não gira um radial-gradient, então a
   elipse mora numa caixa girada 16,9° — os pontos conferem com o Figma
   dentro de 1-2 níveis por canal. */
.veil::before{
  content:""; position:absolute; left:67.592%; top:-41.398%;
  width:140.94%; height:396%;
  transform:translate(-50%,-50%) rotate(16.9deg);
  background:radial-gradient(closest-side ellipse at 50% 50%,
    #E0DEFF 0%, #BDA9FC 20.729%, #9973F9 41.458%, #755CF5 59.19%,
    #5145F1 76.923%, #4339C9 82.692%, #362DA2 88.462%, #28207A 94.231%, #1A1452 100%);
}
/* nó 652:5319 — caixa 892,26 × 1367,96 em -33,89 / 0, imagem 1950 × 1950
   deslocada -516,08 / -131,46 dentro dela, com 2,29px de blur. */
.veil__seat{
  position:absolute; left:-2.647%; top:0;
  width:69.708%; height:170.995%;
  overflow:hidden; filter:blur(2.3px);
}
.veil__seat img{
  position:absolute; left:-57.84%; top:-9.61%;
  width:218.57%; height:142.56%; max-width:none;
}

/* o texto da dobra final vive ACIMA do véu (8); o device sobe para 10 no
   momento em que o véu abre, para ficar sobre o banco como no frame. */
html.js-motion .scene--cta{z-index:9}
.cta{--u:.078125vw; position:absolute; inset:0; color:#fff}
/* nó 652:5390 — 63,099 / lh 67 / -0,05em, 2ª linha itálica regular */
.cta__ttl{
  position:absolute; left:calc(var(--u) * 673.215); top:calc(var(--u) * 152);
  margin:0; white-space:nowrap; color:var(--ice);
  font-weight:800; letter-spacing:-.05em;
  font-size:calc(var(--u) * 63.099); line-height:calc(var(--u) * 67);
}
.cta__ttl em{font-weight:400; font-style:italic; background:none; color:inherit}
/* nó 652:5392 — 24 / -0,05em / 475,39 de largura */
.cta__lead{
  position:absolute; left:calc(var(--u) * 687.568); top:calc(var(--u) * 322);
  width:calc(var(--u) * 475.386); margin:0; color:var(--ice);
  font-weight:500; letter-spacing:-.05em;
  font-size:calc(var(--u) * 24); line-height:calc(var(--u) * 30);
}
/* nós 652:5393 · 652:5394 · 652:5402 — pílula 356,65 × 90,23.
   A régua --u é medida na LARGURA (1280 de projeto). Numa janela mais
   larga que 16:10 os 800 de altura do frame não cabem, e a pílula, que é
   o elemento mais baixo, era a primeira a sair da tela. O min() prende o
   botão a uma folga de 110u da base sempre que isso acontece. */
.cta__btn{
  position:absolute; left:calc(var(--u) * 838.283);
  /* piso em 470u para nunca encostar na última linha do parágrafo (que
     termina em 442u), teto na posição do frame. */
  top:clamp(calc(var(--u) * 470), calc(100% - var(--u) * 200), calc(var(--u) * 596));
  width:calc(var(--u) * 356.652); height:calc(var(--u) * 90.226);
  display:flex; align-items:center;
  padding-left:calc(var(--u) * 35.82);
  border-radius:calc(var(--u) * 50);
  background:rgba(217,217,217,.2);
  will-change:transform;
  transition:background var(--d-base) var(--e-out);
}
.cta__btn:hover,.cta__btn:focus-visible{background:rgba(217,217,217,.32)}
.cta__btn span{
  font-weight:800; letter-spacing:-.05em; color:var(--white);
  font-size:calc(var(--u) * 38.364); line-height:1;
}
.cta__btn img{
  position:absolute; left:calc(var(--u) * 260.702); top:calc(var(--u) * 7.955);
  width:calc(var(--u) * 86.884); height:calc(var(--u) * 74.316);
  transition:transform var(--d-base) var(--e-out);
}
.cta__btn:hover img{transform:translate3d(calc(var(--u) * 6),0,0)}

/* ══════════════════════════════════════════════════════════════════════
   TELEFONE — outra arquitetura, não a mesma encolhida.

   No desktop o palco é fixo e as dobras trocam por scrub. Num telefone
   isso obriga cada dobra a caber numa janela de ~430px, e era daí que
   vinham os cortes e o aperto. Aqui a página volta a ser FLUXO NORMAL:
   cada seção tem a altura do próprio conteúdo, a rolagem é a nativa do
   aparelho, e a coreografia acontece em duas camadas —

     · entradas por IntersectionObserver (título, cartões, números);
     · momentos-chave por ScrollTrigger com scrub (a virada para o bloco
       claro, a abertura da dobra final, o parallax do banco).

   O device continua sendo UM só: o JS o muda de casa (hero → ecossistema
   → formatos → alcance → dobra final) conforme a seção entra em cena, e
   troca o conteúdo da tela junto — é ele que carrega a narrativa, como
   no desktop.
   ══════════════════════════════════════════════════════════════════════ */

/* rótulo de seção: só existe no telefone, onde não há menu à vista e a
   leitura é linear. Reaproveita as palavras do próprio menu. */
.seclabel{display:none}
/* A casa do device, o rótulo de seção e o stepper só existem no
   telefone. Fora dele precisam sair do FLUXO: .eco__col é um grid, e um
   div vazio ali abriria mais uma linha de 28u entre o título e os
   cartões. */
.mslot,.dnav,.cta__seat{display:none}
/* a caixa que ancora o banco no aparelho não existe no desktop: lá o
   véu do palco é que abre com a foto dentro. */
.cta__mount{display:contents}

@media (max-width:860px){
  :root{
    /* ── A ESCALA DE RESPIRO ──────────────────────────────────────
       Quatro medidas, e só elas, governam o espaçamento do telefone:
         --gutter    margem lateral da página
         --sec-y     intervalo entre dobras (vale dos DOIS lados)
         --blk       intervalo entre blocos dentro de uma dobra
         --card-gap  intervalo entre cartões irmãos
       Mexer aqui muda a página inteira de uma vez e mantém a razão
       entre os níveis — que é o que faz o conjunto parecer harmônico
       em vez de uma soma de decisões avulsas. */
    --gutter:clamp(29px,calc(6.8vw + 5px),37px);
    --sec-y:clamp(66px,15vw,92px);
    --blk:clamp(30px,7.6vw,40px);
    --card-gap:15px;
    --card-r:22px;
    --slab-r:clamp(22px,6vw,30px);
    --hdr-top:12px; --hdr-pill-h:56px; --hdr-h:68px;
  }

  /* ── fim do palco fixo ────────────────────────────────────────────── */
  html.js-motion .ride{height:auto}
  html.js-motion .stage{position:static; display:block; height:auto; overflow:visible}
  html.js-motion .scene{
    scroll-margin-top:calc(var(--hdr-h) + 10px);
    position:relative; inset:auto; z-index:auto; opacity:1;
    width:100%;
    display:grid; align-content:start; justify-items:stretch;
    pointer-events:auto;
    padding:var(--sec-y) var(--gutter);
    -webkit-mask-image:none; mask-image:none;
    /* clip e não hidden: hidden viraria contexto de rolagem e mataria o
       position:sticky do device dos formatos e do MacBook. */
    overflow-x:clip;
  }

  /* camadas que só existem para a coreografia do palco */
  html.js-motion .device-wrap,
  html.js-motion .invert,
  html.js-motion .veil,
  .drops,.slides,.pov{display:none}

  /* ── ambiente: os glows respiram, o asfalto continua correndo ─────── */
  .glows{position:fixed; z-index:0}
  .glow--white{display:none}
  .glow--violet{width:150vw; height:120vw; left:-46vw; top:-42vw; opacity:.30}
  .glow--blue{width:135vw; height:115vw; right:-42vw; bottom:auto; top:46vh; opacity:.34}
  html.js-motion .glow{animation:glowdrift 22s var(--e-inout) infinite alternate}
  html.js-motion .glow--blue{animation-duration:29s; animation-delay:-7s}
  @keyframes glowdrift{
    from{transform:translate3d(0,0,0) scale(1)}
    to{transform:translate3d(4vw,-3vh,0) scale(1.1)}
  }
  .road{opacity:.32}
  .road__tape{height:min(62vh,560px)}

  /* ── rótulo de seção ──────────────────────────────────────────────── */
  .seclabel{
    display:flex; align-items:baseline; gap:11px; margin:0 0 2px;
    font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
    color:var(--lavander);
  }
  .seclabel b{font-weight:700; color:rgba(var(--light-violet-rgb),.42)}
  .seclabel span{color:inherit}
  .seclabel--dark{color:var(--violet-blue)}
  .seclabel--dark b{color:rgba(var(--violet-blue-rgb),.45)}
  /* sobre a lâmina roxa o lilás some: ali o rótulo é branco. */
  .seclabel--on{color:#fff}
  .seclabel--on b{color:rgba(255,255,255,.55)}

  /* ── a casa do device em cada seção ───────────────────────────────── */
  /* O slot RESERVA a caixa do aparelho mesmo vazio, na proporção do
     chassi. Sem isso a seção encolhia no instante em que o device saía
     para outra casa e a página inteira dava um pulo. */
  .mslot{
    --dw:min(calc(100vw - var(--gutter) * 2), 430px);
    display:block; position:relative; margin-inline:auto;
    width:var(--dw); aspect-ratio:546.1 / 478.3;
  }
  .mslot .device{
    /* em vw e não em %: --dw também alimenta --sw, que dita o corpo do
       texto DENTRO da tela. Percentual não resolve num calc de fonte. */
    --dw:inherit;
    position:absolute; inset:0; width:100%;
    filter:drop-shadow(0 30px 56px rgba(0,0,0,.6));
    transition:opacity .22s linear;
  }
  /* o pulo de uma casa para outra acontece com o aparelho apagado */
  .mslot .device.is-moving{opacity:0}

  /* nos formatos o aparelho fica preso no topo enquanto os cartões
     passam: é ele que mostra o formato que você está lendo. Limitado
     pela ALTURA, senão sobra pouca tela para o cartão. */
  .mslot--sticky{
    --dw:min(calc(100vw - var(--gutter) * 2), calc(41svh * 1.1417), 430px);
    position:sticky; top:calc(var(--hdr-h) + 10px); z-index:3;
    margin-bottom:6px; padding-bottom:14px;
  }
  /* fundo do bloco preso: sem ele o texto que passa por baixo aparece
     em volta do aparelho e vira sujeira. Máscara em vez de corte seco. */
  .mslot--sticky::before,
  .dashf__mac::before{
    content:""; position:absolute;
    /* passa 30px ABAIXO do aparelho: o leito terminava rente ao chassi e
       sobrava uma tira do cartão seguinte aparecendo entre os dois. */
    inset:calc(var(--hdr-h) * -1 - 18px) calc(var(--gutter) * -1) -30px;
    z-index:-1; pointer-events:none; opacity:0;
    transition:opacity .3s var(--e-out);
    background:linear-gradient(180deg,
      var(--black) 0, var(--black) 88%,
      rgba(var(--black-rgb),.72) 95%, rgba(var(--black-rgb),0) 100%);
  }
  /* is-pin é escrito pelo JS no instante em que o bloco encosta no topo:
     em fluxo o leito cobriria a linha de texto logo acima dele. */
  .mslot--sticky.is-pin::before,
  .dashf__mac.is-pin::before{opacity:1}

  /* ── estados da tela do aparelho, dirigidos por classe ────────────
     As mesmas medidas do nó 619:1088 do Figma, só que em CSS: o painel
     encolhe para o slot do Main Video, a faixa de menu sobe e o painel
     lateral entra. Transição declarativa, sem tween por frame.

       st-hero  a frase em tela cheia (ato 0)
       st-live  o aparelho de verdade: vídeo, painel lateral e faixa
       st-fmt   a tela dos formatos, um cartão por vez
       st-cta   Main Video + o Side Banner da dobra final              */
  .device .scr,
  .device .scr__idooh,
  .device .scr-menu,
  .device .scrh,
  .device .badges,
  .device .scrfmt,
  .device .scrfmt-bg{
    transition:opacity .3s var(--e-out), transform .5s var(--e-expo);
  }
  .device .scr--guide{transform:translateY(-101.48%)}
  .device .scrfmt,.device .scrfmt-bg{opacity:0}
  .device .scrfmt.on{opacity:1}
  /* os cartões de formato precisam ficar ACIMA do painel roxo, senão o
     gradiente do hero (z 7) cobre o cartão (z 6) e a tela do formato
     nunca aparece. */
  .device .scrfmt{z-index:8}

  /* hero: a frase ocupa a tela toda */
  .device.st-hero .scr__idooh{transform:none; opacity:1}
  .device.st-hero .scrh{opacity:1}
  .device.st-hero .scr--side,
  .device.st-hero .scr--sidead,
  .device.st-hero .scr--main{opacity:0}
  .device.st-hero .scr-menu{opacity:0; transform:translateY(100%)}
  .device.st-hero .badges{opacity:1}

  /* o aparelho de verdade — ecossistema e alcance */
  .device.st-live .scr__idooh{transform:scale(.6761,.68654); opacity:0}
  .device.st-live .scrh{opacity:0}
  .device.st-live .scr--main{opacity:1}
  .device.st-live .scr--side{opacity:1}
  .device.st-live .scr--sidead{opacity:0}
  .device.st-live .scr-menu{opacity:1; transform:none}
  .device.st-live .badges{opacity:0}

  /* formatos: fundo roxo escuro e um cartão por vez */
  .device.st-fmt .scr__idooh{transform:scale(.6761,.68654); opacity:0}
  .device.st-fmt .scrh{opacity:0}
  .device.st-fmt .scr--main,
  .device.st-fmt .scr--side,
  .device.st-fmt .scr--sidead{opacity:0}
  .device.st-fmt .scr-menu{opacity:1; transform:none}
  .device.st-fmt .badges{opacity:0}
  .device.st-fmt .scrfmt-bg{opacity:1}
  /* no Slide Banner o cartão cobre main + faixa: só a BAR roxa sobra */
  .device.st-fmt.fmt-slide .scr-menu{transform:translateY(100%)}

  /* dobra final: o vídeo roda e o Side Banner da campanha entra */
  .device.st-cta .scr__idooh{transform:scale(.6761,.68654); opacity:0}
  .device.st-cta .scrh{opacity:0}
  .device.st-cta .scr--main{opacity:1}
  .device.st-cta .scr--side{opacity:0}
  .device.st-cta .scr--sidead{opacity:1}
  .device.st-cta .scr-menu{opacity:1; transform:none}
  .device.st-cta .badges{opacity:0}

  /* ── O TOQUE NO TOURISM ────────────────────────────────────────────
     A cena que no desktop é o ato 3 da timeline do Figma: o trilho de
     categorias corre e volta, o Tourism é tocado, o guia da cidade desce
     para dentro do slot, o tile quica e a faixa cai até sobrar só a BAR.
     Aqui ela é uma sequência de classes com transição declarativa — os
     mesmos percentuais do arquivo (FIG no scenes.js), sem tween por
     frame nem rAF, que num telefone é o que importa.                  */
  .device .scr-menu__track{transition:transform .92s var(--e-inout)}
  .device .tile[data-tile="tourism"]{transition:transform .3s var(--e-back)}
  .device.dm-track .scr-menu__track{transform:translateX(-61.107%)}
  .device.dm-back  .scr-menu__track{transform:translateX(-.27%)}
  .device.dm-tap   .tile[data-tile="tourism"]{transform:scale(1.2)}
  .device.dm-hop   .tile[data-tile="tourism"]{transform:translateY(-16.873%)}
  .device.dm-guide .scr--guide{transform:translateY(0)}
  .device.dm-menu  .scr-menu{transform:translateY(80.195%)}

  /* Dentro da tela fica só o nome do formato e a nota: a descrição já
     está no cartão abaixo, em corpo legível, e repeti-la aqui em 11px
     era a mesma frase duas vezes na mesma dobra. */
  .device .scrfmt p{display:none}
  .device .scrfmt--main,
  .device .scrfmt--slide{align-content:center; row-gap:calc(var(--sw) * .022)}
  .device .scrfmt h3{font-size:calc(var(--sw) * .066); line-height:1.05}
  .device .scrfmt__note{font-size:calc(var(--sw) * .036); opacity:.62}
  .device .scrfmt__note img{height:calc(var(--sw) * .032)}
  .device .scrfmt--side h3{top:34%; width:82%; line-height:1.1}
  .device .scrfmt--side .scrfmt__note{top:58%; opacity:.62}

  /* ── os chips do ato 1 ───────────────────────────────────────────
     No Figma mobile eles não moram DENTRO do aparelho: flutuam por fora,
     alternando os lados — um no alto à direita, um no meio à esquerda, o
     terceiro embaixo à direita. É essa alternância que dá profundidade e
     faz o aparelho parecer suspenso, em vez de um retângulo com adesivos
     colados em cima.

     A medida acompanha o aparelho, mas com piso e teto: sem eles o chip
     virava texto de 10px quando o device encolheu para dois terços da
     tela. */
  .badge{
    height:clamp(28px, calc(var(--dw) * .118), 36px);
    padding:0 clamp(11px, calc(var(--dw) * .046), 16px);
    gap:clamp(7px, calc(var(--dw) * .028), 10px);
    border-radius:clamp(14px, calc(var(--dw) * .059), 18px);
    font-size:clamp(11px, calc(var(--dw) * .047), 13.5px);
    font-weight:600; letter-spacing:-.01em;
    background:rgba(var(--white-rgb),.11);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    box-shadow:inset 0 0 0 1px rgba(var(--white-rgb),.18),
               0 16px 34px -18px rgba(0,0,0,.95);
    will-change:auto;
  }
  .badge i{
    width:clamp(9px, calc(var(--dw) * .042), 13px);
    height:clamp(9px, calc(var(--dw) * .042), 13px);
  }
  .badge--a{left:auto; right:calc(var(--dw) * -.13); top:8%}
  .badge--b{left:calc(var(--dw) * -.20); right:auto; top:22%}
  .badge--c{left:auto; right:calc(var(--dw) * -.17); top:55%}

  /* ══ TIPOGRAFIA ═══════════════════════════════════════════════════
     Uma escala só para o site inteiro. O tracking -0,05em das dobras do
     desktop é medida de Figma em corpo grande: herdado num corpo de 14px
     ele espremia a linha inteira. Aqui todo texto corrido volta para um
     tracking de leitura.                                              */
  .eco__ttl,.fmt__ttl,.reach__ttl,.dashf__ttl,.cta__ttl{
    margin:0; max-width:16ch; width:auto; white-space:normal;
    position:static; left:auto; top:auto; translate:none; text-align:left;
    font-size:clamp(31px,8.4vw,44px); line-height:1.06; letter-spacing:-.038em;
  }
  /* A quebra do Figma vale nos outros títulos ("Three ways to" / "show
     up inside the ride."). Neste não: "A connected media network" sozinho
     já ocupa duas linhas na coluna do telefone, e o <br> depois dele
     deixava "city." órfã numa quarta linha. Solto, o balance distribui
     as quatro linhas por igual. */
  .eco__ttl br{display:none}
  .eco__ttl{text-wrap:balance}
  .eco__ttl em,.fmt__ttl em,.dashf__ttl em,.cta__ttl em{font-weight:400}

  .eco__cap,.fmt__lead,.dashf__lead,.cta__lead{
    position:static; left:auto; top:auto; translate:none;
    width:auto; max-width:40ch; text-align:left; text-wrap:pretty;
    font-size:16.5px; line-height:1.55; letter-spacing:-.006em;
    font-weight:450;
  }
  /* no telefone as quebras do Figma viram um parágrafo só */
  .dashf__lead br,.cta__lead br{display:none}

  /* ── 1 · HERO ─────────────────────────────────────────────────────
     Composição do Figma mobile: o aparelho ocupa cerca de dois terços da
     largura em vez de sangrar até as margens, o texto é centrado e mais
     curto, e o botão não encosta nas bordas. Sobra ar em volta do
     objeto — que é o que faz a dobra parecer um pôster e não uma tela
     cheia de conteúdo empurrado para os cantos. */
  /* A dobra 1 fica FORA do acréscimo de margem lateral do resto do
     telefone: aqui a largura útil também define o tamanho do aparelho,
     e apertar as laterais encolheria o device junto. Este é o valor
     anterior ao +5px, mantido só para esta cena. */
  .scene--hero{--gutter:clamp(24px,6.8vw,32px)}
  html.js-motion .scene--hero{
    /* +60 sobre a folga anterior: o aparelho desce e a pill deixa de
       disputar espaço com o topo do chassi. A conta é sobre --hdr-h,
       então o valor aqui é a distância real da base da pill até o
       aparelho. */
    padding-top:calc(var(--hdr-h) + clamp(86px,calc(6.6vw + 60px),96px));
    padding-bottom:var(--sec-y);
    gap:clamp(36px,8.8vw,44px); justify-items:center; text-align:center;
    isolation:isolate;
  }
  /* A LUZ. Duas fontes, como no arquivo: uma lâmpada branca fria vindo
     de cima, que bate no topo do chassi, e o roxo da marca por TRÁS do
     aparelho, que o descola do fundo. Sem elas o device flutuava num
     preto chapado. */
  html.js-motion .scene--hero::before{
    content:""; position:absolute; z-index:-1; pointer-events:none;
    /* ancorada no TOPO da dobra e aberta para baixo: é uma lâmpada
       acima do aparelho, não um halo centrado nele. */
    left:50%; top:0; translate:-50% 0;
    width:min(185%,900px); height:64%;
    background:radial-gradient(ellipse 60% 100% at 50% 0%,
      rgba(255,255,255,.28) 0%, rgba(255,255,255,.14) 24%,
      rgba(255,255,255,.055) 48%, rgba(255,255,255,0) 76%);
  }
  .scene--hero .mslot{
    /* dois terços da largura útil, com teto para não virar um tablet
       gigante num telefone grande. */
    --dw:min(calc((100vw - var(--gutter) * 2) * .74), 300px);
  }
  .scene--hero .mslot::before{
    content:""; position:absolute; z-index:-1; pointer-events:none;
    left:50%; top:54%; translate:-50% -50%;
    width:215%; aspect-ratio:1;
    background:radial-gradient(closest-side,
      rgba(var(--violet-blue-rgb),.70) 0%, rgba(var(--violet-blue-rgb),.36) 30%,
      rgba(var(--violet-blue-rgb),.13) 54%, rgba(var(--violet-blue-rgb),0) 78%);
  }
  /* Medium 14 / 15,5 / -5% em #9CA3AF a 50%. A entrelinha vem em px e
     não em múltiplo, e acompanha a proporção original do arquivo
     (13,3 sobre 12 = 1,108) agora que o corpo subiu para 14. */
  .hero__cap{
    position:static; width:auto; margin-inline:auto;
    text-align:center;
    font-weight:500; font-size:14px; line-height:15.5px;
    letter-spacing:-.05em;
    color:rgba(var(--gray-2-rgb),.5);
    /* px e não ch: o "0" da Plus Jakarta mede .72em, então 31ch dava
       348px — a largura inteira da coluna, e o limite não limitava
       nada. A legenda fica um pouco mais estreita que o botão, como no
       arquivo. */
    max-width:min(100%,282px); text-wrap:pretty;
  }
  .hero__side,.hero__display{display:none}
  /* Botão da dobra 1, medidas do Figma: 20 de padding horizontal, 15 de
     vertical, texto 16 e 60 de distância até a seta. A altura sai do
     conteúdo em vez de ser fixa — é o padding que manda.

     O vão de 60 entra por min(): a partir de 375 de tela ele vale os
     60px do arquivo, e abaixo disso encolhe junto com a largura em vez
     de empurrar o botão para fora da coluna. */
  .hero__cta{
    display:inline-flex; width:auto; max-width:100%; height:auto;
    align-items:center; justify-content:center;
    gap:min(60px,16vw); padding:15px 20px;
    font-size:16px; font-weight:700; line-height:1.25; letter-spacing:-.015em;
    order:8;
    box-shadow:0 18px 44px -18px rgba(var(--violet-blue-rgb),.95);
  }
  .hero__cta .hero__cta-arrow{width:16px; height:14px; flex:none}
  /* a dica de rolagem vai para DEPOIS do botão: no fluxo ela caía entre
     a legenda e o CTA e abria um buraco no meio da dobra. */
  .scrollhint{
    order:9; position:static; translate:none; justify-self:center;
    gap:8px; margin-top:4px; font-size:9.5px; letter-spacing:.26em;
    color:var(--faint); --fall:20px;
  }
  .scrollhint span{display:block}
  .scrollhint i{width:22px; height:34px; border-radius:12px}
  .scrollhint b{top:7px}
  .scrollhint__ch{width:14px; height:11px}

  /* ── 2 · ECOSSISTEMA ──────────────────────────────────────────────── */
  .eco{position:static; display:grid; gap:var(--blk)}
  .eco__col{position:static; width:auto; translate:none; display:grid; gap:var(--blk)}
  .eco__col .mslot{margin-block:2px}
  .sides{display:grid; gap:var(--card-gap)}
  .side{
    min-height:0; border-radius:var(--card-r);
    padding:21px 20px 22px 26px;
    column-gap:14px; row-gap:10px;
    background:rgba(217,217,217,.045);
    box-shadow:inset 0 0 0 1px rgba(var(--white-rgb),.07);
    will-change:auto;
    transition:background .45s var(--e-out), box-shadow .45s var(--e-out);
  }
  .side::before{
    width:3px; height:calc(100% - 34px); border-radius:3px;
    box-shadow:0 0 16px var(--c);
    transform:scaleY(0); transition:transform .6s var(--e-expo) .1s;
  }
  .side.in::before,.side.on::before{transform:scaleY(1)}
  .side.in{background:rgba(217,217,217,.055)}
  .side__ico{width:23px; height:21px}
  .side h3{font-size:18.5px; line-height:1.2; letter-spacing:-.03em}
  .side p{
    max-width:none; font-size:15px; line-height:1.55;
    letter-spacing:-.005em; color:var(--gray-2); font-weight:400;
  }
  .eco__cap{
    font-size:15.5px; color:var(--gray-2); line-height:1.55;
    padding-top:var(--blk); border-top:1px solid var(--hairline);
  }
  .eco__cap b{color:var(--white); font-weight:700}

  /* ── 3 · FORMATOS ─────────────────────────────────────────────────── */
  .fmt{position:static; display:grid; gap:var(--blk)}
  /* o HTML traz o aparelho entre o título e o lead (é a ordem do
     desktop). No telefone a leitura pede o texto inteiro antes do
     objeto que ele explica. */
  .fmt .seclabel{order:1}
  .fmt__ttl{order:2}
  .fmt__lead{order:3}
  .fmt .mslot--sticky{order:4}
  .fmts{order:5; position:static; translate:none; width:auto; display:grid; gap:var(--card-gap)}
  /* cada formato é um cartão de verdade, com a descrição que no desktop
     mora dentro da tela. O aparelho preso acima mostra o que se lê, e o
     cartão é tocável: tocar nele leva o aparelho para aquele formato. */
  .fmt-row{
    display:grid; grid-template-columns:1fr auto; align-items:center;
    min-height:0; white-space:normal; gap:5px 14px;
    padding:19px 20px 20px; border-radius:var(--card-r);
    border:1.5px solid transparent;
    background:rgba(217,217,217,.045);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:border-color .4s var(--e-out), background .4s var(--e-out),
               box-shadow .4s var(--e-out);
  }
  .fmt-row__k{
    font-size:18px; line-height:1.2; color:var(--white);
    letter-spacing:-.03em;
    transition:color .35s var(--e-out);
  }
  .fmt-row__s{
    grid-column:2; grid-row:1; justify-self:end; text-align:right;
    font-size:12px; font-weight:600; line-height:1.2; letter-spacing:.01em;
    color:var(--gray-3); white-space:nowrap;
    transition:color .35s var(--e-out);
  }
  .fmt-row__s i{font-style:normal}
  .fmt-row__d{
    grid-column:1 / -1; margin:3px 0 0;
    font-size:15px; line-height:1.55; letter-spacing:-.005em; color:var(--gray-2);
  }
  .fmt-row__d b{font-weight:700; color:var(--white)}
  .fmt-row.on{
    border-color:rgba(var(--lavander-rgb),.55);
    background:rgba(var(--violet-blue-rgb),.13);
    box-shadow:0 18px 44px -26px rgba(var(--violet-blue-rgb),.95);
  }
  .fmt-row.on .fmt-row__k{color:#fff}
  .fmt-row.on .fmt-row__s{color:var(--lavander)}
  .fmt-row.on .fmt-row__d{color:var(--gray-1)}

  /* ── 4 · ALCANCE ──────────────────────────────────────────────────
     A virada para o bloco claro é a mesma do desktop, só que aqui ela é
     um limpa-vidro preso ao scroll: o ice cresce do topo da seção para
     baixo, com uma aresta acesa na frente. --rev é escrito pelo JS.   */
  html.js-motion .scene--reach{
    background:transparent; color:var(--black);
    isolation:isolate;
  }
  html.js-motion .scene--reach::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:var(--ice);
    /* Painel de dados, e não uma faixa: arredondado nos quatro cantos, o
       preto da página aparece em volta e a inversão vira um objeto — que
       é a regra do DS para o slide claro de métricas.
       E ele ABRE: entra como uma coluna estreita e ganha a largura toda
       conforme sobe, que é a leitura da varredura do desktop num
       aparelho onde a dobra não cabe inteira na tela. */
    border-radius:var(--slab-r);
    clip-path:inset(0 calc((1 - var(--rev,1)) * 27%) 0 calc((1 - var(--rev,1)) * 27%)
                    round var(--slab-r));
  }
  /* a aresta que pega luz enquanto o painel abre */
  html.js-motion .scene--reach::after{
    content:""; position:absolute; z-index:-1; top:0; height:2px;
    left:calc((1 - var(--rev,1)) * 27%); right:calc((1 - var(--rev,1)) * 27%);
    opacity:calc(1 - var(--rev,1));
    background:linear-gradient(90deg,transparent,var(--light-violet) 30%,var(--lavander) 70%,transparent);
    box-shadow:0 0 26px rgba(var(--lavander-rgb),.9);
  }
  /* O conteudo so aparece depois que o painel ja ganhou largura: senao
     o titulo e o aparelho ficam para fora da lamina enquanto ela abre.
     opacity trunca sozinha fora de 0-1, entao a conta basta. */
  html.js-motion .reach,
  html.js-motion .cta{opacity:calc((var(--rev,1) - .5) * 2)}
  .reach{position:static; display:grid; gap:var(--blk)}
  .reach .mslot{margin-block:2px}
  .reach__ttl{color:var(--black); max-width:14ch}
  .reach__big,.reach__sub{
    position:static; left:auto; top:auto; white-space:normal;
    color:var(--gray-3); letter-spacing:-.03em;
  }
  .reach__big{
    font-size:clamp(27px,7.4vw,36px); line-height:1.1; color:var(--black-light);
    margin-bottom:-14px;
  }
  .reach__sub{
    font-size:clamp(16px,4.4vw,20px); line-height:1.3;
    letter-spacing:-.02em; font-weight:600;
  }
  .reach__sub em{font-size:.88em}
  .rcards{
    position:static; left:auto; top:auto;
    display:grid; grid-template-columns:1fr 1fr; gap:var(--card-gap);
  }
  .rcard,.rcard--main,.rcard--side{
    width:auto; min-height:0; gap:8px;
    padding:22px 18px 23px; border-radius:var(--card-r);
    white-space:normal; will-change:auto;
  }
  .rcard--main{box-shadow:0 20px 46px -26px rgba(var(--violet-blue-rgb),.9)}
  .rcard--side{box-shadow:0 20px 46px -26px rgba(var(--lavander-rgb),.9)}
  .rcard h3{font-size:15.5px; line-height:1.2; letter-spacing:-.03em}
  .rcard__n{font-size:clamp(28px,7.8vw,36px); line-height:1.08; letter-spacing:-.04em}
  .rcard__k{font-size:12.5px; line-height:1.35; letter-spacing:-.005em; font-weight:500}

  /* ── 5 · DASHBOARD ────────────────────────────────────────────────
     O fio do desktop nasce do número e corre até a tela. No telefone
     não existe essa diagonal para percorrer: o aparelho está EM CIMA e
     os cartões embaixo. A tentativa de traduzir o fio como um trilho
     vertical atrás dos cartões passava por dentro deles e lia como
     falha de render.

     O que substitui é o próprio produto: o painel do NavRide mostra um
     stepper 1—2—3 no topo da tela de campanha. Repetir esse stepper
     logo abaixo do MacBook amarra as duas coisas — o que está na tela é
     o passo que está aceso aqui — e ainda vira atalho: tocar num número
     leva ao cartão daquele passo.                                     */
  .dashf{position:static; display:grid; gap:var(--blk)}
  .dashf__glow{
    left:50%; top:0; translate:-50% 0; width:170%; height:auto;
    opacity:.85; z-index:-1;
  }
  .dashf__wire{display:none}
  /* o MacBook fica preso no topo e troca conforme o passo que você lê */
  .dashf__mac{
    /* inset:auto ANTES do top. O shorthand escreve os quatro lados, e
       vindo depois ele apagava o offset do sticky — o bloco continuava
       em fluxo, o MacBook subia junto com a página e o passo aceso
       deixava de ter relação com o cartão que estava sendo lido. */
    position:sticky; inset:auto; top:calc(var(--hdr-h) + 10px); z-index:3;
    display:grid; justify-items:center;
    margin-bottom:6px; padding-bottom:16px;
  }
  .mac{transition:opacity .3s var(--e-out), transform .48s var(--e-expo)}
  .mac,.mac[data-mac]{
    position:relative; grid-area:1/1; left:auto; top:auto;
    width:100%; max-width:min(460px, calc(34svh * 1.47)); height:auto;
    opacity:0; transform:scale(.985) translateY(6px);
  }
  .mac.on{opacity:1; transform:none}

  /* ── o stepper ─────────────────────────────────────────────────── */
  .dnav{
    position:relative; z-index:1;
    display:flex; align-items:center; justify-content:space-between;
    width:min(100%,236px); margin-top:16px;
  }
  /* trilho e preenchimento vivem entre os CENTROS dos nós */
  .dnav::before,.dnav::after{
    content:""; position:absolute; left:16px; right:16px; top:50%;
    height:2px; margin-top:-1px; border-radius:2px;
  }
  .dnav::before{background:rgba(var(--violet-blue-rgb),.28)}
  .dnav::after{
    background:linear-gradient(90deg,var(--violet-blue),var(--lavander));
    box-shadow:0 0 12px rgba(var(--violet-blue-rgb),.75);
    transform-origin:left; transform:scaleX(var(--step,0));
    transition:transform .6s var(--e-expo);
  }
  .dnav__b{
    position:relative; z-index:1;
    width:32px; height:32px; flex:none; border-radius:50%;
    display:grid; place-items:center;
    font-size:13px; font-weight:800; letter-spacing:-.02em;
    color:var(--gray-3); background:var(--black);
    box-shadow:inset 0 0 0 1.5px rgba(var(--violet-blue-rgb),.4);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:color .4s var(--e-out), background .4s var(--e-out),
               box-shadow .4s var(--e-out), transform .5s var(--e-back);
  }
  .dnav__b.is-past{
    color:#fff; background:var(--violet-blue);
    box-shadow:inset 0 0 0 1.5px rgba(var(--lavander-rgb),.6);
  }
  .dnav__b.is-on{
    color:#fff; transform:scale(1.16);
    background:linear-gradient(180deg,#8D70F7 0%,#7059F5 45%,#5346F0 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),
               0 0 0 5px rgba(var(--violet-blue-rgb),.16),
               0 8px 20px -6px rgba(var(--violet-blue-rgb),1);
  }
  .dnav__b:active{transform:scale(.94)}
  .dnav__b.is-on:active{transform:scale(1.06)}

  /* ── os cartões ────────────────────────────────────────────────── */
  .dsteps{position:relative; inset:auto; display:grid; gap:var(--card-gap)}
  .dstep{
    position:relative; inset:auto; grid-area:auto; width:auto; min-height:0;
    /* número e título na MESMA linha: o cartão fica com a altura do que
       ele diz, e não com a de um bloco vertical de três andares. */
    display:grid; grid-template-columns:auto 1fr; align-items:center;
    column-gap:14px; row-gap:14px;
    padding:21px 22px 22px; border-radius:var(--card-r);
    opacity:1; overflow:hidden; will-change:auto;
    /* no telefone o vidro sai: backdrop-filter em três cartões grandes
       custa caro e a leitura melhora sem ele. */
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border-color:rgba(var(--white-rgb),.10);
    background:linear-gradient(155deg,
      rgba(var(--white-rgb),.07) 0%, rgba(var(--white-rgb),.022) 48%, rgba(var(--white-rgb),.045) 100%),
      rgba(13,13,13,.72);
    box-shadow:0 26px 60px -40px rgba(0,0,0,.95),
               inset 0 1px 0 rgba(var(--white-rgb),.1);
    transition:border-color .45s var(--e-out), box-shadow .45s var(--e-out),
               background .45s var(--e-out);
  }
  /* barra de destaque na borda, igual à dos cartões do ecossistema */
  .dstep::after{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:linear-gradient(180deg,var(--violet-blue),var(--lavander));
    box-shadow:0 0 18px rgba(var(--violet-blue-rgb),.9);
    transform:scaleY(0); transform-origin:center;
    transition:transform .55s var(--e-expo);
  }
  .dstep.on{
    border-color:rgba(var(--lavander-rgb),.42);
    background:linear-gradient(155deg,
      rgba(var(--violet-blue-rgb),.16) 0%, rgba(var(--white-rgb),.03) 52%, rgba(var(--white-rgb),.05) 100%),
      rgba(13,13,13,.72);
    box-shadow:0 26px 60px -34px rgba(var(--violet-blue-rgb),.85),
               inset 0 1px 0 rgba(var(--white-rgb),.18);
  }
  .dstep.on::after{transform:scaleY(1)}

  .dstep__n{
    grid-row:1; width:42px; height:42px; border-radius:13px;
    font-size:19px; padding-bottom:2px;
    box-shadow:0 10px 22px -12px rgba(var(--violet-blue-rgb),.9),
               inset 0 1px 0 rgba(var(--white-rgb),.28);
    filter:saturate(.3) brightness(.62);
    transition:filter .45s var(--e-out), transform .55s var(--e-back);
  }
  .dstep.on .dstep__n{filter:none; transform:scale(1.04)}
  .dstep h3{
    grid-row:1; width:auto; font-size:17.5px; line-height:1.25;
    letter-spacing:-.03em; color:rgba(var(--white-rgb),.66);
    transition:color .45s var(--e-out);
  }
  .dstep.on h3{color:#fff}
  .dstep__list{grid-column:1 / -1; grid-row:2; gap:10px}
  .dstep__list li{
    height:auto; font-size:15px; line-height:1.5; letter-spacing:-.005em;
    white-space:normal; gap:10px; align-items:flex-start; font-weight:450;
    color:var(--gray-3);
    transition:color .45s var(--e-out);
  }
  .dstep.on .dstep__list li{color:var(--gray-1)}
  .dstep__list img{width:15px; height:15px; margin-top:4px; flex:none; opacity:.55}
  .dstep.on .dstep__list img{opacity:.85}

  /* ── 6 · DOBRA FINAL ──────────────────────────────────────────────
     O véu do palco não existe aqui: a própria seção é o fundo, e ele
     abre de baixo para cima preso ao scroll (--rev, escrito pelo JS). */
  html.js-motion .scene--cta{
    position:relative; overflow:hidden; color:#fff; isolation:isolate;
    background:transparent;
    padding-bottom:calc(var(--sec-y) + 10px);
  }
  html.js-motion .scene--cta::before{
    content:""; position:absolute; inset:0; z-index:-2;
    border-radius:var(--slab-r) var(--slab-r) 0 0;
    background:
      /* a última faixa apaga para o preto do rodapé: sem ela o roxo
         cortava seco na costura e a página parecia dois documentos. */
      linear-gradient(180deg,
        transparent 74%, rgba(var(--black-rgb),.5) 90%, var(--black) 100%),
      radial-gradient(150% 82% at 50% 2%,
        #BDA9FC 0%, #9973F9 21%, #755CF5 39%, #5145F1 58%,
        #362DA2 79%, #1A1452 100%),
      var(--dark-violet);
    clip-path:inset(0 calc((1 - var(--rev,1)) * 27%) 0 calc((1 - var(--rev,1)) * 27%)
                    round var(--slab-r) var(--slab-r) 0 0);
  }
  .cta{position:relative; z-index:1; display:grid; gap:var(--blk)}

  /* ── O ENCAIXE ──────────────────────────────────────────────────
     Antes o banco era o fundo da seção inteira: uma foto enorme e
     desfocada atrás do texto, sem relação com o aparelho. Mas o device
     não flutua sobre um banco — ele é PARAFUSADO no encosto de cabeça,
     e é esse encaixe que a dobra final precisa mostrar.

     Então a foto passa a ser ancorada na caixa do aparelho: a largura
     do banco é escrita em múltiplos de --dw, e o deslocamento vertical
     coloca a base do apoio de cabeça (31,4% da altura do arquivo) logo
     acima do topo do chassi. O aparelho encolhe um pouco nesta dobra
     para o encosto caber em volta dele — aqui o argumento é o encaixe,
     não ler a tela.                                                  */
  .cta__mount{
    /* --dw mora AQUI e não no slot: o banco é irmão do slot, não filho,
       e precisa da mesma medida para se ancorar nele. A cadeia vira
       mount → mslot → device, todos com o mesmo --dw. */
    --dw:min(calc((100vw - var(--gutter) * 2) * .8), 340px);
    display:block; position:relative;
    /* z-index próprio: o banco vive em -1 DENTRO desta caixa, e não
       atrás da lâmina roxa da seção. */
    isolation:isolate; z-index:0;
    margin-block:2px;
    /* espaço reservado ACIMA do aparelho para o apoio de cabeça caber
       inteiro. Sem ele a seção cortava o apoio pela metade e voltava a
       ser "um banco qualquer atrás". */
    padding-top:calc(var(--dw) * .72);
    /* O PARALLAX MORA AQUI, e não no banco. Antes a foto tinha
       movimento próprio e o aparelho ficava parado: os dois deslizavam
       um sobre o outro e o encaixe se desfazia conforme o scroll. Agora
       o par inteiro anda junto, como um objeto só.

       translate e não transform: a entrada por IntersectionObserver usa
       transform nesta mesma caixa, e as duas propriedades compõem em
       vez de uma sobrescrever a outra. */
    translate:0 var(--seat,0px);
  }
  .cta .mslot{--dw:inherit; margin-block:0}
  .cta__seat{
    display:block; position:absolute; left:50%; z-index:-1; pointer-events:none;
    width:calc(var(--dw) * 3.5); aspect-ratio:1;
    /* No arquivo a base do apoio de cabeça está a 31,4% da altura. Com a
       foto a 3,2 --dw de largura isso dá 1,005 --dw do topo da imagem —
       então recuar a imagem em .379 põe essa base exatamente nos .72 de
       folga do mount, ou seja, encostando no topo do chassi. O apoio
       inteiro fica visível 24px abaixo do topo da caixa. */
    top:calc(var(--dw) * -.379);
    translate:-50% 0;
    background:url(../assets/cta/car-seat.webp) no-repeat center top/100% auto;
    /* o banco só materializa depois que a lâmina já abriu: no meio da
       varredura ele aparecia como um vulto claro sobre o roxo. */
    opacity:calc((var(--rev,1) - .62) * 2.7);
    /* o banco é contexto, não assunto: ele se apaga na altura do queixo
       do aparelho em vez de mostrar a base e a sombra do estúdio. */
    -webkit-mask-image:linear-gradient(180deg,#000 0 46%,transparent 74%);
            mask-image:linear-gradient(180deg,#000 0 46%,transparent 74%);
  }
  .cta__ttl{color:var(--ice); text-shadow:0 6px 34px rgba(26,20,82,.45)}
  /* o texto passa sobre a foto do banco: um leito escuro devolve o
     contraste sem chapar a imagem. */
  .cta__lead{
    color:#fff; opacity:.96; max-width:36ch;
    text-shadow:0 2px 18px rgba(26,20,82,.65);
  }
  .cta__btn{
    position:static; width:100%; height:66px;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 9px 0 26px; border-radius:var(--r-pill);
    background:rgba(250,250,250,.18);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),
               0 20px 46px -22px rgba(13,13,13,.7);
    will-change:auto;
  }
  .cta__btn span{font-size:21px; letter-spacing:-.025em}
  .cta__btn img{position:static; width:48px; height:48px; margin:0}

  /* ── header: fixo, ponto ─────────────────────────────────────────
     Ele escondia ao descer e voltava ao subir. Num telefone o polegar
     corrige o scroll o tempo todo, e a pill ficava subindo e descendo a
     cada correção — lê como falha, não como espaço ganho.            */
  .hdr{padding-inline:var(--gutter)}
  .hdr__bar{
    padding:0 10px 0 20px;
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  }
  .hdr.is-stuck .hdr__bar{background:rgba(26,26,26,.62)}
  .hdr.is-stuck.is-light .hdr__bar{background:rgba(250,250,250,.72)}
  .hdr__brand img{width:132px}
  .hdr__burger{width:44px; height:44px}

  /* ── entradas ─────────────────────────────────────────────────────
     Um sistema só: opacidade, um passo de 22px e um véu de desfoque. O
     --i escalona irmãos sem precisar de um tween por elemento.        */
  .rv{
    opacity:0;
    transform:translate3d(0,22px,0);
    filter:blur(7px);
  }
  html.js-motion .rv{
    transition:opacity .66s var(--e-out), transform .8s var(--e-expo),
               filter .66s var(--e-out);
    transition-delay:calc(var(--i,0) * 78ms);
  }
  html.js-motion .rv.in{opacity:1; transform:none; filter:blur(0)}
  /* títulos entram com um pouco mais de percurso e sem desfoque: em
     corpo grande o blur lê como texto fora de foco, não como entrada. */
  html.js-motion .rv--ttl{transform:translate3d(0,30px,0); filter:none}
  /* o rótulo da seção entra pelo lado, junto com o traço */
  html.js-motion .rv--label{transform:translate3d(-14px,0,0); filter:none}
  /* cartões chegam com um leve avanço de escala */
  html.js-motion .rv--card{transform:translate3d(0,26px,0) scale(.975)}
  html.js-motion .rv--card.in{transform:none}

  /* ── rodapé ───────────────────────────────────────────────────────── */
  /* a arquitetura das três faixas vive em base.css; aqui só o que muda
     por causa do fluxo do telefone. */
  .ftr{padding-top:clamp(64px,14vw,90px)}
  .ftr__claim{font-size:17px; max-width:28ch}
  .ftr__c a{overflow-wrap:anywhere}
}

/* ══ TABLET EM PÉ · 601–860 ══════════════════════════════════════════
   Abaixo de 861 vale a arquitetura de fluxo do telefone — num iPad em
   pé o palco fixo do desktop não caberia. Mas 744 de largura viram
   linhas de 690px, que é o dobro do que se lê confortável. Aqui o
   conteúdo volta para uma coluna, o aparelho cresce e a escala de
   tipo sobe junto: é a mesma página, no corpo certo.               */
@media (min-width:601px) and (max-width:860px){
  :root{
    --gutter:clamp(35px,calc(5.4vw + 5px),53px);
    --sec-y:clamp(96px,11.5vw,132px);
    --blk:clamp(30px,4.4vw,40px);
    --card-r:26px;
    --hdr-pill-h:62px; --hdr-h:74px;
  }
  .mslot{--dw:min(calc(100vw - var(--gutter) * 2), 540px)}
  .mslot--sticky{--dw:min(calc(100vw - var(--gutter) * 2), calc(44svh * 1.1417), 540px)}
  /* na dobra 1 o teto de 300 do telefone deixaria o aparelho pequeno
     demais para segurar uma tela de 744. */
  .scene--hero{--gutter:clamp(30px,5.4vw,48px)}
  .scene--hero .mslot{--dw:min(calc((100vw - var(--gutter) * 2) * .62), 400px)}
  .mac,.mac[data-mac]{max-width:min(560px, calc(42svh * 1.47))}

  /* uma coluna de leitura, centrada */
  .eco,.eco__col,.sides,.fmt,.fmts,.reach,.rcards,.dashf,.dsteps,.cta,
  .seclabel,.hero__cap,.hero__cta,.scrollhint,
  .eco__cap,.fmt__lead,.dashf__lead,.cta__lead,
  .eco__ttl,.fmt__ttl,.reach__ttl,.dashf__ttl,.cta__ttl,
  .reach__big,.reach__sub,.cta__btn,.dashf__mac{
    max-width:620px; margin-inline:auto; width:100%;
  }
  .eco__ttl,.fmt__ttl,.reach__ttl,.dashf__ttl,.cta__ttl{
    max-width:620px; font-size:clamp(42px,5.9vw,54px); letter-spacing:-.04em;
  }
  .eco__cap,.fmt__lead,.dashf__lead,.cta__lead,.hero__cap{
    max-width:620px; font-size:18px; line-height:1.6;
  }
  .side p,.fmt-row__d,.dstep__list li{font-size:16px}
  .side h3,.fmt-row__k,.dstep h3{font-size:20px}
  .rcard__n{font-size:40px}
  .rcard h3{font-size:17px}
  .rcard__k{font-size:13.5px}
  .reach__big{font-size:38px}
  .reach__sub{font-size:22px}
  .seclabel{font-size:11.5px}
  .hero__cta,.cta__btn{max-width:420px; margin-inline:0}
  .cta__btn{height:72px}
  .cta__btn span{font-size:24px}
  /* o leito dos blocos presos sangra só até a borda da coluna */
  .mslot--sticky::before,.dashf__mac::before{
    inset:calc(var(--hdr-h) * -1 - 18px) -24px -30px;
  }
  /* depois da lista acima, que joga tudo para 620: a legenda da dobra 1
     é a única que fica mais estreita que a coluna, para acompanhar a
     largura do aparelho. */
  .hero__cap{max-width:min(100%,460px)}
}

/* ══ TELEFONE DEITADO ═══════════════════════════════════════════════
   Com a página em fluxo, deitar o aparelho não quebra mais nada. Só
   duas coisas mudam: o aparelho passa a ser limitado pela ALTURA, senão
   um slot de 700px de largura viraria 610 de altura numa tela de 380; e
   a linha de texto para de esticar até virar leitura de jornal.      */
@media (max-width:860px) and (orientation:landscape){
  :root{--sec-y:clamp(48px,9vw,72px); --blk:clamp(20px,4vw,28px)}
  .mslot{--dw:min(calc(100vw - var(--gutter) * 2), calc(64svh * 1.1417), 430px)}
  .mslot--sticky{--dw:min(calc(100vw - var(--gutter) * 2), calc(52svh * 1.1417), 430px)}
  /* a dobra 1 deitada: o aparelho passa a ser limitado pela ALTURA,
     senão ele sozinho ocuparia a tela inteira e a legenda e o botão
     nasceriam fora dela. */
  .scene--hero .mslot{
    --dw:min(calc((100vw - var(--gutter) * 2) * .74), calc(46svh * 1.1417), 300px);
  }
  .mslot--sticky,.dashf__mac{top:calc(var(--hdr-h) + 8px)}
  .mac,.mac[data-mac]{max-width:min(460px, calc(50svh * 1.47))}
  .eco__col,.sides,.fmts,.dsteps,
  .eco__cap,.fmt__lead,.dashf__lead,.cta__lead,
  .eco__ttl,.fmt__ttl,.reach__ttl,.dashf__ttl,.cta__ttl,
  .reach__big,.reach__sub,.rcards,.hero__cap,.hero__cta,
  .seclabel,.scrollhint{
    max-width:640px; margin-inline:auto; width:100%;
  }
  .hero__cap{max-width:52ch}
  .eco__ttl,.fmt__ttl,.reach__ttl,.dashf__ttl,.cta__ttl{max-width:20ch}
}

/* ══ TELEFONE ESTREITO ══════════════════════════════════════════════
   iPhone SE e afins: 375 de largura com 320 de conteúdo útil. O que
   quebra primeiro são os dois cartões de números lado a lado.       */
/* Telas abaixo de 344 (SE de 1ª geração e afins): com o vão de 60 o
   rótulo do botão quebrava em duas linhas. Aqui ele encolhe o bastante
   para a frase caber inteira — acima de 344 o valor do arquivo vale. */
@media (max-width:344px){
  .hero__cta{gap:min(60px,11vw)}
}

@media (max-width:360px){
  /* alivia a margem, mas dentro da escala: 18px punha esta faixa fora
     do ritmo do resto. */
  :root{--gutter:26px}
  .scene--hero{--gutter:21px}
  .rcards{grid-template-columns:1fr}
  .fmt-row__s{font-size:10px}
}

/* ══════════════════════════════════════════════════════════════════════
   ESTÁTICO — sem JS ou com prefers-reduced-motion.
   Página inteira legível, em fluxo normal, sem pin e sem scrub.
   ══════════════════════════════════════════════════════════════════════ */
html:not(.js-motion) .stage{display:block}
html:not(.js-motion) .device-wrap,
html:not(.js-motion) .invert,
html:not(.js-motion) .veil,
html:not(.js-motion) .scrollhint{display:none}
html:not(.js-motion) .scene{
  position:relative; padding:var(--section-y) 0; opacity:1;
  border-top:1px solid var(--hairline);
}
html:not(.js-motion) .scene--hero{border-top:0; padding-top:calc(var(--hdr-h) + var(--section-y))}
html:not(.js-motion) .static-only{
  display:block; width:min(760px,100%); margin:clamp(28px,5vw,56px) auto 0;
  border-radius:var(--r-20);
  filter:drop-shadow(0 40px 90px rgba(var(--violet-blue-rgb),.35));
}
html:not(.js-motion) .side::before{transform:none}
/* Sem JS as dobras absolutas viram caixas com a proporção do frame do
   Figma (1280 × 800): a composição continua exata, só que em fluxo. */
html:not(.js-motion) .eco,
html:not(.js-motion) .reach,
html:not(.js-motion) .dashf,
html:not(.js-motion) .cta{position:relative; inset:auto; width:100%; padding-top:62.5%}
/* sem motion o texto do hero volta a ser fluxo normal */
html:not(.js-motion) .hero__cap,
html:not(.js-motion) .hero__display,
html:not(.js-motion) .hero__side{
  position:static; width:auto; opacity:1; margin:0 auto;
  max-width:62ch; text-align:center;
}
html:not(.js-motion) .hero__side{display:none}
html:not(.js-motion) .fmt{opacity:1}
html:not(.js-motion) .scene--reach{background:var(--ice); color:var(--black)}
html:not(.js-motion) .mac,
html:not(.js-motion) .dstep,
html:not(.js-motion) .rcard{opacity:1}
/* A dobra 4 tem três estados sobrepostos; sem scrub eles viram três
   cartões lado a lado, com o MacBook do passo 1 acima. */
html:not(.js-motion) .dashf{padding-top:0; display:grid; gap:calc(var(--u) * 40); padding-bottom:calc(var(--u) * 40)}
html:not(.js-motion) .dashf__glow{display:none}
html:not(.js-motion) .dashf__wire{display:none}
html:not(.js-motion) .dashf__ttl,
html:not(.js-motion) .dashf__lead{position:static; left:auto; top:auto; padding:0 var(--gutter)}
html:not(.js-motion) .dashf__lead{width:min(100%,calc(var(--u) * 653.826)); text-align:left}
html:not(.js-motion) .dashf__mac{position:relative; inset:auto; height:calc(var(--u) * 420)}
html:not(.js-motion) .mac{left:50%; translate:-50% 0; top:0}
html:not(.js-motion) .mac:not([data-mac="1"]){display:none}
html:not(.js-motion) .dsteps{
  position:static; inset:auto; display:grid; gap:calc(var(--u) * 24);
  grid-template-columns:repeat(3,minmax(0,1fr)); padding:0 var(--gutter);
}
html:not(.js-motion) .dstep{position:static; width:auto}
html:not(.js-motion) .scene--cta{
  background:
    radial-gradient(1580px 906px at 67.6% -41.4%,
      #E0DEFF 0%, #9973F9 41.458%, #5145F1 76.923%, #1A1452 100%),
    var(--black);
  color:#fff;
}
html:not(.js-motion) .glows{position:fixed}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .road{display:none}
  /* sem o loop, as setas ficariam no estado apagado do repouso */
  .scrollhint__ch path{opacity:.55}
}

/* Telefone COM reduced-motion: o bloco estático acima foi desenhado para
   o desktop (caixas na proporção 1280 × 800). Aqui vale a mesma
   diagramação de fluxo do telefone, só que sem as entradas. */
@media (max-width:860px){
  html:not(.js-motion) .scene{
    padding:var(--sec-y) var(--gutter); border-top:0;
  }
  /* a dobra 1 continua precisando descontar a pill fixa, senao a
     primeira linha nasce por baixo dela. */
  html:not(.js-motion) .scene--hero{
    padding-top:calc(var(--hdr-h) + clamp(18px,5vw,30px));
    display:grid; gap:clamp(22px,5.6vw,30px); justify-items:start;
  }
  /* e o texto acompanha o alinhamento do resto da pagina */
  html:not(.js-motion) .hero__cap{
    text-align:left; margin:0; max-width:34ch;
    font-size:17px; line-height:1.55; letter-spacing:-.006em;
  }
  html:not(.js-motion) .static-only{margin:0; width:100%}
  html:not(.js-motion) .eco,
  html:not(.js-motion) .reach,
  html:not(.js-motion) .dashf,
  html:not(.js-motion) .cta{padding-top:0; position:static}
  html:not(.js-motion) .mslot{display:none}
  html:not(.js-motion) .rv{opacity:1; transform:none}
  html:not(.js-motion) .scene--reach{background:var(--ice)}
}

/* Estados iniciais do motion — evitam o flash antes do primeiro frame do
   GSAP. Só valem no desktop: a timeline com scrub é de lá. No telefone a
   página é fluxo e quem revela é o IntersectionObserver, então zerar tudo
   aqui deixaria a dobra 1 vazia. */
@media (min-width:861px){
  html.js-motion .device,
  html.js-motion .badge,
  html.js-motion .scr--side,
  html.js-motion .scr-menu,
  html.js-motion .hero__cap,
  html.js-motion .hero__side,
  html.js-motion .hero__display,
  html.js-motion .scrollhint{opacity:0}
}