/* =========================================================================
   BETO VELOCÍMETROS — demo scroll-driven
   Direção: instrumento noturno. Preto de cabine, azul de cluster, âmbar de
   alerta. Tipografia condensada em caixa alta + mono para números e rótulos,
   porque a página inteira imita a leitura de um painel.
   ========================================================================= */

:root{
  --bg:        #08090b;
  --bg-soft:   #0e1014;
  --ink:       #f2f4f7;
  --muted:     #98a2ad;
  --line:      #1e232b;
  --accent:    #5cc8ff;   /* azul do cluster aceso */
  --accent-dim:#2b6c8f;
  --warn:      #ffb020;   /* âmbar de alerta */
  --font-display:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-display); font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}

/* ---------- LOADER ---------- */
#loader{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .7s ease, visibility .7s ease;
}
#loader.done{opacity:0; visibility:hidden}
.loader-brand{
  font-weight:900; font-size:clamp(1.4rem,3vw,2rem); letter-spacing:.14em;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.loader-brand span{
  font-family:var(--font-mono); font-weight:400; font-size:.44em;
  letter-spacing:.42em; color:var(--accent); padding-left:.42em;
}
.loader-track{width:min(320px,62vw); height:2px; background:var(--line); overflow:hidden}
#loader-bar{width:0%; height:100%; background:var(--accent); transition:width .25s ease}
#loader-percent{font-family:var(--font-mono); font-size:.72rem; color:var(--muted); letter-spacing:.2em}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:90;
  padding:22px clamp(20px,4vw,52px);
  background:linear-gradient(to bottom, rgba(8,9,11,.92), rgba(8,9,11,0));
}
.site-header nav{display:flex; align-items:center; justify-content:space-between; gap:20px}
.logo{
  font-weight:900; font-size:1rem; letter-spacing:.1em; text-decoration:none;
  display:flex; flex-direction:column; line-height:1.05;
}
.logo span{
  font-family:var(--font-mono); font-weight:400; font-size:.5em;
  letter-spacing:.34em; color:var(--accent);
}
.nav-links{display:flex; align-items:center; gap:clamp(14px,2.4vw,30px)}
.nav-links a{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--muted);
  transition:color .25s ease;
}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  color:var(--bg) !important; background:var(--accent);
  padding:9px 16px; font-weight:700;
}
.nav-cta:hover{background:#8ad8ff}

/* ---------- HERO ---------- */
.hero-standalone{
  position:relative; z-index:60; min-height:100vh; background:var(--bg);
  display:flex; align-items:center; padding:0 clamp(20px,6vw,90px);
}
.hero-inner{max-width:1080px}
.section-label{
  display:block; font-family:var(--font-mono); font-size:.7rem; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase; color:var(--accent);
  margin-bottom:26px;
}
.hero-heading{
  font-size:clamp(2.2rem,7.6vw,8.2rem); font-weight:900; line-height:.9;
  letter-spacing:-.035em; margin:0 0 34px; text-transform:uppercase;
}
.hero-heading span{display:inline-block}
.hero-heading .em{color:var(--accent)}
.hero-tagline{
  max-width:44ch; font-size:clamp(1rem,1.5vw,1.28rem); line-height:1.6;
  color:var(--muted); margin:0;
}
.hero-tagline strong{color:var(--ink); font-weight:600}
.scroll-indicator{
  position:absolute; bottom:44px; left:clamp(20px,6vw,90px);
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
}
.arrow{width:1px; height:44px; background:linear-gradient(var(--accent), transparent); animation:drop 1.9s ease-in-out infinite}
@keyframes drop{0%,100%{transform:translateY(0); opacity:1} 50%{transform:translateY(9px); opacity:.35}}

/* ---------- CANVAS ---------- */
.canvas-wrap{
  position:fixed; inset:0; z-index:1;
  clip-path:circle(0% at 50% 50%);
  will-change:clip-path;
}
#canvas{width:100%; height:100%; display:block}
/* a borda do video e dissolvida no proprio desenho — ver featherEdges() em app.js */

/* ---------- OVERLAY ---------- */
#dark-overlay{
  position:fixed; inset:0; z-index:2; background:#000;
  opacity:0; pointer-events:none; will-change:opacity;
}

/* ---------- MARQUEE ---------- */
.marquee-wrap{
  position:fixed; top:50%; left:0; z-index:3; width:100%;
  transform:translateY(-50%); pointer-events:none; opacity:0;
  mix-blend-mode:overlay;
}
.marquee-text{
  font-size:13vw; font-weight:900; line-height:1; letter-spacing:-.03em;
  white-space:nowrap; color:rgba(255,255,255,.16); text-transform:uppercase;
  will-change:transform;
}

/* ---------- SEÇÕES DE SCROLL ---------- */
#scroll-container{position:relative; z-index:5; height:950vh}
.scroll-section{
  position:absolute; left:0; width:100%;
  transform:translateY(-50%); pointer-events:none;
}
.scroll-section a{pointer-events:auto}

/* texto só nas faixas laterais — o painel fica com o centro */
.align-left {padding-left:clamp(20px,5vw,72px); padding-right:68vw}
.align-right{padding-left:68vw; padding-right:clamp(20px,5vw,72px)}
.align-left .section-inner,
.align-right .section-inner{max-width:32vw}

.section-heading{
  font-size:clamp(1.5rem,2.9vw,3.2rem); font-weight:800; line-height:1.03;
  letter-spacing:-.028em; margin:0 0 22px; text-transform:uppercase;
}
.section-body{
  font-size:clamp(.95rem,1.12vw,1.1rem); line-height:1.68; color:var(--muted);
  margin:0 0 16px; max-width:52ch;
}
.section-body em{color:var(--ink); font-style:italic}
.section-note{
  font-family:var(--font-mono); font-size:.82rem; line-height:1.6;
  color:var(--warn); margin:22px 0 0; max-width:46ch;
}

.lista-tres{list-style:none; margin:0 0 22px; padding:0}
.lista-tres li{
  border-left:2px solid var(--accent-dim); padding:0 0 0 18px; margin-bottom:18px;
  font-size:clamp(.92rem,1.05vw,1.04rem); line-height:1.6; color:var(--muted);
}
.lista-tres strong{display:block; color:var(--ink); font-weight:700; margin-bottom:4px}

.passos{margin:0; padding:0; list-style:none; counter-reset:p}
.passos li{
  counter-increment:p; position:relative; padding-left:44px; margin-bottom:20px;
  font-size:clamp(.92rem,1.05vw,1.04rem); line-height:1.6; color:var(--muted);
}
.passos li::before{
  content:counter(p,decimal-leading-zero);
  position:absolute; left:0; top:1px;
  font-family:var(--font-mono); font-size:.8rem; color:var(--accent);
  border:1px solid var(--line); padding:3px 7px;
}
.passos strong{color:var(--ink); font-weight:600}

.caixa-risco{
  border:1px solid var(--accent-dim); border-left:3px solid var(--accent);
  padding:20px 22px; font-size:clamp(.92rem,1.05vw,1.04rem);
  line-height:1.62; color:var(--muted); background:rgba(92,200,255,.04);
}
.caixa-risco strong{display:block; color:var(--ink); font-size:1.08em; margin-bottom:8px}

/* ---------- NÚMEROS (única hora com texto centralizado) ---------- */
.section-stats{padding:0 clamp(20px,6vw,80px)}
.stats-inner{max-width:1180px; margin:0 auto; text-align:center}
.centered{text-align:center; margin-left:auto; margin-right:auto}
.stats-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,4vw,60px);
  margin-top:52px;
}
.stat{display:flex; flex-direction:column; align-items:center; gap:6px}
.stat-number{
  font-family:var(--font-mono); font-weight:700;
  font-size:clamp(2.2rem,5.4vw,5rem); line-height:1; letter-spacing:-.03em;
}
.stat.destaque .stat-number{color:var(--warn)}
.stat-prefix{font-family:var(--font-mono); font-size:.9rem; color:var(--warn); letter-spacing:.1em}
.stat-suffix{font-family:var(--font-mono); font-size:.86rem; color:var(--accent); letter-spacing:.2em; text-transform:uppercase}
.stat-label{
  font-size:.86rem; line-height:1.5; color:var(--muted); max-width:26ch; margin-top:8px;
}
.stat-label em{color:#6f7883; font-style:normal; font-size:.92em}
.stats-note{
  font-family:var(--font-mono); font-size:.84rem; color:var(--accent);
  margin-top:44px; letter-spacing:.06em;
}

/* ---------- CTA ---------- */
.section-cta{padding:0 clamp(20px,6vw,80px)}
.section-cta .section-inner{max-width:760px; margin:0 auto}
.cta-button{
  display:inline-block; margin:14px 0 26px; padding:19px 40px;
  background:var(--accent); color:#04121b; text-decoration:none;
  font-weight:800; font-size:clamp(.95rem,1.2vw,1.1rem);
  letter-spacing:.03em; text-transform:uppercase;
  transition:transform .25s ease, background .25s ease;
}
.cta-button:hover{background:#8ad8ff; transform:translateY(-2px)}
.section-cta .section-note{color:var(--muted); margin:18px auto 0}

/* ---------- EXPLODIDA (depois do canvas: o site NÃO congela no último frame) ---------- */
.section-explodida{
  position:relative; z-index:20; background:var(--bg-soft);
  border-top:1px solid var(--line);
  padding:clamp(70px,10vw,140px) clamp(20px,6vw,80px);
}
.explodida-head{max-width:680px; margin:0 auto clamp(40px,6vw,70px); text-align:center}
.explodida-head .section-label{color:var(--accent)}
.explodida-head .section-body{margin-left:auto; margin-right:auto}
.explodida-fig{margin:0; max-width:1400px; margin-inline:auto}
.explodida-fig img{
  width:100%; border:1px solid var(--line); background:#fff;
}

/* ---------- FOOTER ---------- */
.site-footer{
  position:relative; z-index:20; background:var(--bg);
  border-top:1px solid var(--line); padding:clamp(50px,7vw,90px) clamp(20px,6vw,80px);
}
.footer-inner{max-width:900px; margin:0 auto; text-align:center; display:grid; gap:14px}
.footer-brand{font-weight:900; letter-spacing:.1em; font-size:1.05rem}
.footer-brand span{
  font-family:var(--font-mono); font-weight:400; font-size:.5em;
  letter-spacing:.34em; color:var(--accent); display:block; margin-top:3px;
}
.site-footer p{margin:0; color:var(--muted); font-size:.92rem}
.footer-wa{
  font-family:var(--font-mono); font-size:clamp(1.2rem,2.4vw,1.8rem);
  color:var(--accent); text-decoration:none; letter-spacing:.04em;
}
.footer-wa:hover{color:#8ad8ff}
.footer-mini{font-size:.78rem !important; color:#6f7883 !important}

/* =========================================================================
   MOBILE — o painel é vertical, então no celular ele preenche a tela e o
   texto ganha um fundo escuro por trás para continuar legível.
   ========================================================================= */
@media (max-width:820px){
  #scroll-container{height:640vh}
  .align-left, .align-right{
    padding:0 22px; display:flex; align-items:center; min-height:auto;
  }
  .align-left .section-inner, .align-right .section-inner{
    max-width:100%;
    background:rgba(8,9,11,.86);
    backdrop-filter:blur(2px);
    padding:26px 22px; border-left:2px solid var(--accent-dim);
  }
  .stats-grid{grid-template-columns:1fr; gap:34px}
  .marquee-text{font-size:22vw}
  .nav-links a:not(.nav-cta){display:none}
  /* o hero estourava a largura no celular: FUNCIONANDO, a etiqueta e a tagline
     passavam da borda em 430px. 13vw dava 56px e a palavra nao cabia nos 378px uteis. */
  /* as secoes animadas entram deslizando de fora da tela e arrastavam 21px na horizontal.
     clip corta sem criar contexto de scroll — nao quebra o sticky nem o Lenis. */
  html, body{overflow-x:clip}
  .hero-standalone{overflow-x:hidden}
  .hero-inner{max-width:100%}
  .hero-heading{font-size:clamp(1.9rem,10.2vw,4rem); overflow-wrap:break-word}
  .hero-heading span{max-width:100%}
  .hero-standalone .section-label{
    font-size:.6rem; letter-spacing:.15em; line-height:1.7; margin-bottom:20px;
  }
  .hero-tagline{max-width:100%; overflow-wrap:anywhere}
  /* o botao do topo estourava a borda no celular */
  .site-header{padding:16px 16px}
  .logo{font-size:.82rem}
  .nav-cta{padding:8px 12px; font-size:.62rem; letter-spacing:.1em}
  .section-explodida, .site-footer{padding-left:16px; padding-right:16px}
}

@media (prefers-reduced-motion:reduce){
  .arrow{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- A PEÇA NO CARRO (material real) ---------- */
.section-real{
  position:relative; z-index:20; background:var(--bg);
  border-top:1px solid var(--line);
  padding:clamp(70px,10vw,130px) clamp(20px,6vw,80px);
}
.real-grid{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1fr minmax(240px,340px);
  gap:clamp(30px,5vw,70px); align-items:center;
}
.real-texto .section-body{max-width:46ch}
.real-video{margin:0}
.real-video video{
  width:100%; display:block; border:1px solid var(--line);
  background:#000;
}
@media (max-width:820px){
  .real-grid{grid-template-columns:1fr}
  .real-video{max-width:320px; margin-inline:auto}
}

/* video da peca no carro: teto de altura pra nao empurrar o texto pra fora da tela */
.real-video video{max-height:min(74vh,620px); object-fit:contain; margin-inline:auto}
@media (max-width:820px){
  .real-video{max-width:280px}
  .real-video video{max-height:56vh}
}


/* ---------- POR DENTRO: fotos reais da bancada ----------
   Substituiu a vista explodida de catálogo em 06/09/2026 — aquela imagem era de
   fornecedor e não era o painel que ele abre. Estas são do vídeo dele. */
.grade-bancada{
  max-width:1180px; margin:clamp(22px,3vw,36px) auto 0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,26px);
}
.bpeca{margin:0; opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease}
.bpeca.vista{opacity:1; transform:none}
.bpeca img{width:100%; height:auto; display:block; background:#101215; border:1px solid var(--line)}
.bpeca figcaption{padding:12px 2px 0}
.bpeca figcaption strong{
  display:block; font-size:clamp(14px,1.2vw,16px); color:var(--ink); font-weight:600; letter-spacing:.01em}
.bpeca figcaption span{
  display:block; font-size:12.5px; color:var(--muted); margin-top:3px; letter-spacing:.02em}
.bancada-nota{
  max-width:1180px; margin:clamp(24px,3vw,38px) auto 0; padding-top:18px;
  border-top:1px solid var(--line);
  font-size:13px; color:var(--accent); text-align:center; letter-spacing:.02em;
}
@media (max-width:760px){ .grade-bancada{grid-template-columns:1fr; gap:22px} }
@media (prefers-reduced-motion:reduce){ .bpeca{opacity:1; transform:none; transition:none} }


/* ---------- LIGANDO NA BANCADA (seção 9) ----------
   O vídeo aqui é HORIZONTAL (o painel foi girado para a posição em que fica no
   carro), ao contrário do vídeo vertical do carro que estava aqui antes. Por isso
   o grid empilha em vez de pôr lado a lado: assim a peça aparece grande. */
.real-grid-largo{max-width:1180px; margin:0 auto; display:block}
.real-texto{max-width:56ch; margin:0 auto clamp(26px,4vw,44px); text-align:center}
.real-texto .section-body{margin-inline:auto}
.real-texto .section-note{
  border-left:0; border-top:1px solid var(--line); padding:14px 0 0; margin:20px auto 0;
  max-width:48ch; text-align:center;
}
.real-video-largo{margin:0}
.real-video-largo video{
  width:100%; max-width:1180px; height:auto; display:block; margin-inline:auto;
  background:#0b0d10; border:1px solid var(--line);
}