/* ==========================================================================
   LS Lumys — folha única.
   Ordem: fontes, tokens, reset, primitivos, chrome (cursor/nav/ruído),
   depois cada seção na ordem em que aparece na página.
   ========================================================================== */

@font-face { font-family:'Space Grotesk'; src:url('../fonts/space-grotesk-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('../fonts/space-grotesk-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('../fonts/space-grotesk-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/jetbrains-mono-500.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root {
  --void:    #070B14;
  --graph:   #0B1120;
  --indigo:  #1F2E8C;
  --spark:   #1FD1F0;
  --mist:    #F5F7FC;
  --fog:     #8B93A8;
  --linha:   rgba(245, 247, 252, 0.12);

  --display: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --body:    'Inter', 'Segoe UI', Arial, sans-serif;
  --mono:    'JetBrains Mono', 'Consolas', monospace;

  /* trocado por JS conforme o sistema visível na vitrine */
  --acento: var(--spark);

  --gutter: clamp(20px, 5vw, 80px);
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  background:var(--void); color:var(--mist);
  font:400 clamp(0.95rem, 0.88rem + 0.3vw, 1rem)/1.65 var(--body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; }
ul { list-style:none; }
::selection { background:var(--spark); color:var(--void); }

/* Scroll nativo: nada de transformar o wrapper — `position:sticky` (usado nas
   seções presas) não sobrevive dentro de um ancestral transformado.
   `trava` só segura a página enquanto o preloader está na tela. */
body.trava { overflow:hidden; height:100vh; }

/* ---------- primitivos ---------- */
.wrap { width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--gutter); }
.mono {
  font:500 clamp(0.66rem, 0.6rem + 0.2vw, 0.78rem)/1.4 var(--mono);
  letter-spacing:0.18em; text-transform:uppercase;
}
.acento { color:var(--acento); transition:color 600ms var(--ease); }
.fog { color:var(--fog); }

.titulo {
  font-family:var(--display); font-weight:700; line-height:1.02;
  letter-spacing:-0.035em;
  font-size:clamp(1.9rem, 1rem + 3.2vw, 4.2rem);
}
.titulo--md { font-size:clamp(1.55rem, 1.1rem + 2.6vw, 2.5rem); line-height:1.12; }
.lead {
  font-size:clamp(1rem, 0.9rem + 0.55vw, 1.15rem);
  line-height:1.6; color:rgba(245,247,252,0.72); max-width:52ch;
}

/* rótulo de seção: número + nome, alinhado à esquerda da grade */
.rotulo {
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:18px; margin-bottom:clamp(36px, 5vw, 72px);
  border-bottom:1px solid var(--linha);
}
.rotulo b { color:var(--acento); font-weight:500; transition:color 600ms var(--ease); }

/* ---------- reveal: cada linha sobe de dentro de uma máscara ----------
   Só esconde quando há JS para revelar. Sem JS, tudo nasce no lugar. */
.linha { display:block; overflow:hidden; }
.linha > * { display:block; }
.js .linha > * { transform:translateY(105%); transition:transform 1s var(--ease); }
.js .visivel .linha > * { transform:none; }
.linha:nth-child(2) > * { transition-delay:70ms; }
.linha:nth-child(3) > * { transition-delay:140ms; }
.linha:nth-child(4) > * { transition-delay:210ms; }

.js .sobe { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .visivel .sobe, .js .sobe.visivel { opacity:1; transform:none; }
.sobe[data-atraso="1"] { transition-delay:90ms; }
.sobe[data-atraso="2"] { transition-delay:180ms; }
.sobe[data-atraso="3"] { transition-delay:270ms; }
.sobe[data-atraso="4"] { transition-delay:360ms; }

/* ---------- ruído: tira o aspecto “gradiente limpo demais” ---------- */
.ruido {
  position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- cursor ---------- */
.cursor, .cursor-anel { position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; }
.cursor { width:6px; height:6px; background:var(--acento); margin:-3px 0 0 -3px; }
.cursor-anel {
  width:38px; height:38px; margin:-19px 0 0 -19px;
  border:1px solid rgba(245,247,252,0.35);
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease),
             border-color .3s var(--ease), background-color .3s var(--ease);
}
.cursor-anel.grande {
  width:76px; height:76px; margin:-38px 0 0 -38px;
  border-color:var(--acento); background:rgba(31,209,240,0.08);
}
.cursor-anel.arrasta::after {
  content:'arraste'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font:500 9px/1 var(--mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--acento);
}
@media (hover:none), (pointer:coarse) { .cursor, .cursor-anel { display:none; } }

/* ---------- preloader ---------- */
.pre {
  position:fixed; inset:0; z-index:1000; background:var(--void);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:36px;
  transition:opacity .8s var(--ease), visibility .8s;
}
.pre.saiu { opacity:0; visibility:hidden; }
.pre svg { width:88px; height:88px; }
.pre-traco { fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:60; stroke-dashoffset:60; animation:traca 1.4s var(--ease) forwards; }
.pre-traco.b { stroke:var(--spark); animation-delay:.25s; }
.pre-traco.a { stroke:var(--mist); }
@keyframes traca { to { stroke-dashoffset:0; } }
.pre-barra { width:min(220px, 50vw); height:1px; background:var(--linha); position:relative; overflow:hidden; }
.pre-barra i { position:absolute; inset:0 100% 0 0; background:var(--spark); transition:right .2s linear; }
.pre-num { font:500 12px/1 var(--mono); letter-spacing:0.2em; color:var(--fog); }

/* ---------- topo ---------- */
.topo {
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  transition:transform .5s var(--ease), background-color .5s var(--ease), backdrop-filter .5s;
}
.topo.escondido { transform:translateY(-110%); }
.topo.solido { background:rgba(7,11,20,0.72); backdrop-filter:blur(14px); }
.topo img { height:26px; }
.topo-acoes { display:flex; align-items:center; gap:22px; }

.btn-zap {
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px; border-radius:999px;
  border:1px solid var(--linha);
  font:600 0.82rem/1 var(--display); letter-spacing:0.01em;
  overflow:hidden; position:relative; isolation:isolate;
}
.btn-zap::before {
  content:''; position:absolute; inset:0; z-index:-1; background:var(--acento);
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn-zap:hover { color:var(--void); border-color:var(--acento); }
.btn-zap:hover::before { transform:none; }
.btn-zap i { width:6px; height:6px; border-radius:50%; background:var(--acento); animation:pisca 2.4s ease-in-out infinite; }
.btn-zap:hover i { background:var(--void); }
@keyframes pisca { 0%,100% { opacity:1; } 50% { opacity:.25; } }

/* menu lateral de seções */
.indice { position:fixed; right:var(--gutter); top:50%; transform:translateY(-50%); z-index:55;
  display:flex; flex-direction:column; gap:16px; align-items:flex-end; }
.indice a { display:flex; align-items:center; gap:10px; opacity:.4; transition:opacity .4s var(--ease); }
.indice a span { font:500 10px/1 var(--mono); letter-spacing:0.14em; opacity:0; transform:translateX(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease); }
.indice a b { display:block; width:22px; height:1px; background:currentColor; transition:width .4s var(--ease); }
.indice a:hover, .indice a.ativo { opacity:1; }
.indice a:hover span, .indice a.ativo span { opacity:1; transform:none; }
.indice a.ativo { color:var(--acento); }
.indice a.ativo b { width:38px; }
@media (max-width: 1100px) { .indice { display:none; } }

/* progresso da leitura */
.progresso { position:fixed; top:0; left:0; height:2px; z-index:70; background:var(--acento); width:0; }

/* ==========================================================================
   00 — HERO
   ========================================================================== */
.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:clamp(40px, 8vh, 90px); overflow:hidden; }
#teia { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-brilho {
  position:absolute; z-index:0; width:min(900px, 90vw); aspect-ratio:1;
  right:-14%; top:-22%; border-radius:50%;
  background:radial-gradient(circle, rgba(31,46,140,.5) 0%, rgba(31,46,140,0) 62%);
  filter:blur(10px);
}
.hero .wrap { position:relative; z-index:2; width:100%; }

.hero-eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:clamp(18px, 3vh, 34px); }
.hero-eyebrow b { display:block; flex:0 0 auto; width:clamp(28px, 5vw, 64px); height:1px; background:var(--acento); }

/* Em tela estreita o traço decorativo empurra a linha do eyebrow para uma
   segunda linha com uma palavra órfã. Some com ele e aperta o espaçamento. */

@media (max-width: 620px) {
  .hero-eyebrow b { display:none; }
  .mono { letter-spacing:0.12em; }
}

.hero h1 {
  font-family:var(--display); font-weight:700; letter-spacing:-0.04em; line-height:0.95;
  /* o teto é o que faz a linha mais longa ("que transforma") caber inteira */
  font-size:clamp(2.1rem, 1.2rem + 5.2vw, 3.9rem);
  text-transform:none;
}
.hero h1 .linha > span { white-space:nowrap; }
.hero h1 em { font-style:normal; color:var(--acento); }

.hero-rodape {
  margin-top:clamp(30px, 5vh, 60px);
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end;
  padding-top:26px; border-top:1px solid var(--linha);
}
@media (max-width: 800px) { .hero-rodape { grid-template-columns:1fr; } }

.desce { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.desce b { display:block; width:1px; height:44px; background:var(--linha); position:relative; overflow:hidden; }
.desce b::after { content:''; position:absolute; inset:0; background:var(--acento); animation:escorre 2.2s var(--ease) infinite; }
@keyframes escorre { 0% { transform:translateY(-100%); } 60%,100% { transform:translateY(100%); } }

/* faixa rolante */
.faixa { border-block:1px solid var(--linha); padding:20px 0; overflow:hidden; white-space:nowrap; }
.faixa-trilho { display:inline-flex; gap:56px; will-change:transform; }
.faixa span { font-family:var(--display); font-weight:500; font-size:clamp(0.85rem, 0.75rem + 0.4vw, 1.1rem);
  color:rgba(245,247,252,0.4); display:inline-flex; align-items:center; gap:56px; }
.faixa span::after { content:''; width:7px; height:7px; background:var(--acento); transform:rotate(45deg); }

/* ==========================================================================
   01 — MÉTODO (texto que “acende” conforme o scroll)
   ========================================================================== */
.secao { padding-block:clamp(90px, 14vh, 190px); position:relative; }

.manifesto {
  font-family:var(--display); font-weight:700; letter-spacing:-0.03em; line-height:1.16;
  font-size:clamp(1.3rem, 1rem + 2.1vw, 2.05rem);
  max-width:34ch;
}
.js .manifesto .p { color:rgba(245,247,252,0.14); transition:color .4s linear; }
.manifesto .p.on { color:var(--mist); }

.metodo-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1px;
  background:var(--linha); margin-top:clamp(50px, 8vh, 100px); }
.metodo-item { background:var(--void); padding:clamp(26px, 3vw, 42px); position:relative; overflow:hidden; }
.metodo-item::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:var(--acento);
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease); }
.metodo-item.visivel::before { transform:none; }
.metodo-item h3 { font:600 1.02rem/1.35 var(--display); margin:22px 0 10px; }
.metodo-item p { color:var(--fog); font-size:0.88rem; }
.metodo-num { font:700 clamp(1.7rem,1.4rem + 1vw,2.3rem)/1 var(--display);
  color:transparent; -webkit-text-stroke:1px rgba(31,209,240,.5); }

/* ==========================================================================
   02 — SERVIÇOS (rolagem horizontal presa)
   ========================================================================== */
.pin { position:relative; }
.pin-palco { position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.trilho { display:flex; gap:clamp(16px, 2vw, 28px); padding-inline:var(--gutter); will-change:transform; }

.card {
  flex:0 0 clamp(260px, 30vw, 400px);
  border:1px solid var(--linha); border-radius:4px;
  padding:clamp(26px, 2.4vw, 40px);
  min-height:clamp(300px, 42vh, 420px);
  display:flex; flex-direction:column;
  background:linear-gradient(160deg, rgba(31,46,140,.12), transparent 60%);
  transition:border-color .5s var(--ease), background-color .5s var(--ease), transform .5s var(--ease);
}
.card:hover { border-color:rgba(31,209,240,.45); transform:translateY(-6px); }
.card-num { font:500 11px/1 var(--mono); letter-spacing:.18em; color:var(--acento); }
.card h3 { font:700 clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem)/1.3 var(--display); letter-spacing:-0.015em; margin:auto 0 14px; }
.card p { color:var(--fog); font-size:0.86rem; }
.card ul { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.card li { font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--linha); border-radius:999px; padding:7px 12px; color:var(--fog); }

.pin-topo { display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  padding:0 var(--gutter) clamp(28px, 4vh, 52px); }
.pin-barra { width:clamp(80px, 14vw, 200px); height:2px; background:var(--linha); position:relative; }
.pin-barra i { position:absolute; inset:0 auto 0 0; width:20%; background:var(--acento); }

/* ==========================================================================
   03 — SISTEMAS (vitrine presa, fundo muda por produto)
   ========================================================================== */
.vitrine { position:relative; background:var(--fundo, var(--void)); transition:background-color .9s var(--ease); }
.vitrine-palco { position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; }
.vitrine-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 5vw, 90px); align-items:center; width:100%; }
@media (max-width: 900px) { .vitrine-grid { grid-template-columns:1fr; gap:26px; } }

.js .sis { position:absolute; inset:auto; opacity:0; pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease); transform:translateY(24px); }
.sis.on { opacity:1; pointer-events:auto; transform:none; position:relative; }
.sis-selo { display:inline-flex; align-items:center; gap:10px; border:1px solid currentColor;
  border-radius:999px; padding:8px 16px; margin-bottom:26px; color:var(--acento); }
.sis h3 { font-family:var(--display); font-weight:700; letter-spacing:-0.03em; line-height:1.04;
  font-size:clamp(1.45rem, 1.1rem + 2.4vw, 2.15rem); margin-bottom:18px; }
.sis p { color:rgba(245,247,252,0.66); max-width:44ch; }
.sis ul { margin:30px 0 34px; display:flex; flex-direction:column; gap:12px; }
.sis li { display:flex; gap:14px; align-items:flex-start; font-size:0.9rem; color:rgba(245,247,252,0.8); }
.sis li::before { content:''; flex:0 0 auto; width:8px; height:8px; margin-top:8px;
  background:var(--acento); transform:rotate(45deg); }
.sis-acoes { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* o número gigante do produto ao fundo */
.vitrine-marca { position:relative; display:grid; place-items:center; min-height:min(52vh, 420px); }
.vitrine-marca svg { width:min(58%, 300px); height:auto; }
.vitrine-marca .aro { position:absolute; width:min(90%, 460px); aspect-ratio:1; border:1px solid var(--linha);
  border-radius:50%; animation:gira 26s linear infinite; }
.vitrine-marca .aro::after { content:''; position:absolute; top:-4px; left:50%; width:8px; height:8px;
  margin-left:-4px; background:var(--acento); transform:rotate(45deg); }
.vitrine-marca .aro.b { width:min(70%, 340px); animation-duration:18s; animation-direction:reverse; opacity:.5; }
@keyframes gira { to { transform:rotate(360deg); } }

.vitrine-abas { display:flex; gap:10px; flex-wrap:wrap; margin-top:clamp(24px,4vh,46px); }
.vitrine-abas button { padding:10px 18px; border:1px solid var(--linha); border-radius:999px;
  font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fog);
  transition:color .4s var(--ease), border-color .4s var(--ease); }
.vitrine-abas button.on { color:var(--acento); border-color:currentColor; }

/* ==========================================================================
   04 — SOBRE
   ========================================================================== */
.sobre-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(36px, 6vw, 110px); align-items:start; }
@media (max-width: 900px) { .sobre-grid { grid-template-columns:1fr; } }

.principios { display:flex; flex-direction:column; }
.principio { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:baseline;
  padding:26px 0; border-bottom:1px solid var(--linha); }
.principio:first-child { border-top:1px solid var(--linha); }
.principio h4 { font:600 0.98rem/1.35 var(--display); }
.principio p { color:var(--fog); font-size:0.86rem; margin-top:5px; }
.principio i { width:9px; height:9px; background:var(--acento); transform:rotate(45deg); }

.numeros { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--linha); margin-top:clamp(50px,8vh,100px); }
.numeros div { background:var(--void); padding:clamp(24px,3vw,38px); }
.numeros b { display:block; font:700 clamp(1.55rem,1.25rem + 1.2vw,2.35rem)/1 var(--display);
  letter-spacing:-0.04em; color:var(--acento); }
.numeros span { display:block; margin-top:10px; color:var(--fog); font-size:0.82rem; }

/* ==========================================================================
   05 — CONTATO + RODAPÉ
   ========================================================================== */
.contato { position:relative; overflow:hidden; }
.contato-titulo { font-family:var(--display); font-weight:700; letter-spacing:-0.04em; line-height:0.96;
  font-size:clamp(1.95rem, 1.2rem + 4.4vw, 4rem); }

.imã { display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:clamp(16px,1.6vw,22px) clamp(28px,3vw,44px); border-radius:999px;
  background:var(--acento); color:var(--void);
  font:700 clamp(0.88rem,0.84rem + 0.22vw,1rem)/1 var(--display);
  will-change:transform; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.imã:hover { box-shadow:0 0 0 1px var(--acento), 0 22px 60px rgba(31,209,240,.28); }

.canais { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px;
  background:var(--linha); margin-top:clamp(50px,8vh,96px); }
.canal { background:var(--void); padding:clamp(24px,3vw,38px); display:block; position:relative; overflow:hidden; }
.canal strong { display:block; font:600 1.02rem/1.35 var(--display); margin-top:10px; }
.canal span { color:var(--fog); font-size:0.82rem; }
.canal::after { content:'↗'; position:absolute; top:clamp(24px,3vw,38px); right:clamp(24px,3vw,38px);
  color:var(--acento); opacity:0; transform:translate(-6px,6px); transition:.4s var(--ease); }
.canal:hover::after { opacity:1; transform:none; }

.rodape { border-top:1px solid var(--linha); padding:40px 0; }
.rodape .wrap { display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center; }
.rodape img { height:24px; opacity:.75; }
.rodape p { color:var(--fog); font-size:0.8rem; }

/* link com sublinhado que corre */
.link-corre { position:relative; display:inline-block; }
.link-corre::after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.link-corre:hover::after { transform:none; transform-origin:left; }

/* =========================================================================
   TELA PEQUENA — vem no fim de propósito: em CSS quem decide é a ordem,
   não a media query. Estas regras precisam vir depois das que sobrescrevem.
   ========================================================================= */
@media (max-width: 900px) {
  /* Sem isto sobra um vão enorme acima do texto em tela de celular. */
  .hero { align-items:center; padding-top:104px; padding-bottom:56px; }

  /* Seção presa não cabe em tela de celular: o conteúdo é bem mais alto que a
     viewport e o `overflow:hidden` do palco corta o texto em cima e embaixo.
     Em tela pequena as duas voltam a ser seções normais, com rolagem natural. */
  .pin, .vitrine { height:auto; }
  .pin-palco, .vitrine-palco {
    position:static; height:auto; overflow:visible;
    padding-block:clamp(70px, 10vh, 110px);
  }

  /* serviços: em vez de rolagem horizontal comandada pelo scroll vertical,
     uma faixa que se arrasta com o dedo, com encaixe por cartão */
  .trilho {
    transform:none;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:16px; scrollbar-width:none;
  }
  .trilho::-webkit-scrollbar { display:none; }
  .card { scroll-snap-align:start; flex-basis:min(78vw, 340px); min-height:0; }
  .pin-barra { display:none; }
  .pin-topo { padding-bottom:clamp(24px, 4vh, 40px); }

  /* sistemas: todos em sequência, um abaixo do outro */
  .js .sis, .sis {
    position:relative; opacity:1; transform:none; pointer-events:auto;
  }
  .sis + .sis {
    margin-top:clamp(44px, 7vh, 66px);
    padding-top:clamp(40px, 6vh, 60px);
    border-top:1px solid var(--linha);
  }
  .vitrine-abas, .vitrine-marca { display:none; }
}

/* ---------- respeito a quem pediu menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .linha > *, .sobe { transform:none !important; opacity:1 !important; }
  .manifesto .p { color:var(--mist); }
  .sis { position:relative; opacity:1; transform:none; }
  .cursor, .cursor-anel { display:none; }
}