/* AUTO CENTER · site.css
   Direção: o mundo da hero (estúdio escuro, metal, luz vermelha controlada).
   Ordem: tokens · base · componentes · hero · seções · gates estáticos · movimento reduzido */

/* ---------- tokens ---------- */
:root{
  --canvas:#0A0E15;
  --canvas-deep:#080A0D;
  --panel:#101318;
  --line:#1D222C;
  --line-strong:#3A414D;
  --accent:#E10600;
  --accent-hover:#FF2416;
  --accent-muted:#8B0000;
  --metal:#8D939A;
  --text:#F4F4F4;

  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:clamp(20px,5.2vw,96px);
  --nav-h:76px;
  --tshadow:0 1px 2px rgba(5,7,12,.95),0 3px 12px rgba(5,7,12,.78),0 10px 44px rgba(5,7,12,.8);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;background:var(--canvas);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;animation:page-in .9s var(--ease-out) both}
@keyframes page-in{from{opacity:0}to{opacity:1}}
img,video,svg,picture{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,ol,ul,dl,dd{margin:0}
ol,ul{list-style:none;padding:0}
button{font:inherit;color:inherit}
main:focus{outline:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:var(--gutter);top:12px;z-index:100;padding:12px 18px;background:var(--accent);color:#fff;font:500 14px var(--f-body);transform:translateY(-200%);transition:transform .3s var(--ease-out)}
.skip:focus{transform:none}

.display{font-family:var(--f-display);font-weight:800;font-stretch:118%;text-transform:uppercase;letter-spacing:-.005em;line-height:.94;text-wrap:balance}
.statement,.lede,.lede-lg{text-wrap:pretty}
.mono{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;line-height:1.4}
.label{display:flex;align-items:center;gap:12px;color:var(--metal)}
.lede{color:var(--metal);font-size:clamp(17px,1.25vw,19px);line-height:1.6;max-width:40ch}
.lede-lg{font-family:var(--f-display);font-weight:700;font-stretch:112%;font-size:clamp(22px,2.1vw,32px);line-height:1.18;max-width:22ch}
.h-section{font-size:clamp(38px,4.6vw,78px)}

/* ---------- ambiente: uma camada fixa atrás de tudo ---------- */
.env{position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 30% at 22% 28%,rgba(92,110,150,.10),transparent 70%),
    radial-gradient(30% 26% at 78% 72%,rgba(141,147,154,.06),transparent 70%);
  animation:env-drift 70s ease-in-out -12s infinite alternate}
.env::after{content:"";position:absolute;inset:0;background:radial-gradient(34% 30% at 70% 55%,rgba(225,6,0,.14),transparent 70%);opacity:0;transition:opacity 1.6s var(--ease-out)}
body.warm .env::after{opacity:1}
@keyframes env-drift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.06)}}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- arco segmentado (assinatura) ---------- */
.arc{overflow:visible}
.arc .seg{fill:none;stroke:var(--line-strong);stroke-width:3.6;transition:stroke .35s var(--ease-out),opacity .35s var(--ease-out)}
.arc .seg.lit{stroke:#C9CDD2}
.arc .seg.tip{stroke:var(--accent)}
.arc .hair{fill:none;stroke:var(--metal);stroke-width:.8;opacity:.75}
.arc-brand{width:30px;height:30px}
.arc-brand .seg:nth-child(n+6){stroke:var(--accent)}
.arc-label{width:22px;height:22px;flex:none}

/* ---------- botões ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;white-space:nowrap;font:700 13px/1 var(--f-display);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;border-radius:2px;cursor:pointer;isolation:isolate;transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out),transform .35s var(--ease-out)}
.btn .ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .35s var(--ease-out)}
.btn .ico .fill{fill:currentColor;stroke:none}
.btn:hover .ico{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:0 0 0 1px rgba(255,36,22,.4),0 10px 34px -8px rgba(225,6,0,.6);opacity:0;transition:opacity .4s var(--ease-out)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:hover::after{opacity:1}
.btn-ghost{color:var(--text);border:1px solid var(--line-strong);background:rgba(10,14,21,.24)}
.btn-ghost::before{content:"";position:absolute;left:26px;right:26px;bottom:14px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.btn-ghost:hover{border-color:var(--metal)}
.btn-ghost:hover::before{transform:scaleX(1)}
.btn-sm{min-height:42px;padding:0 18px;font-size:12px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- navbar ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);display:flex;align-items:center;gap:32px;padding:0 var(--gutter);border-bottom:1px solid transparent;transition:background-color .5s var(--ease-out),border-color .5s var(--ease-out),-webkit-backdrop-filter .5s,backdrop-filter .5s}
.nav.scrolled{background:rgba(10,14,21,.62);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);border-bottom-color:rgba(244,244,244,.06)}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand-word{display:inline-block;white-space:nowrap;font:800 15px/1 var(--f-display);font-stretch:125%;letter-spacing:.06em;transform:skewX(-9deg)}
.nav-links{display:flex;gap:30px}
.nav-links a{position:relative;padding:8px 0;font:500 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--metal);transition:color .3s var(--ease-out)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.nav-links a:hover,.nav-links a[aria-current="true"]{color:var(--text)}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{transform:scaleX(1)}
.menu-btn{display:none;align-items:center;gap:12px;min-height:44px;padding:0 4px;background:none;border:0;cursor:pointer;font:500 12px var(--f-mono);letter-spacing:.18em;text-transform:uppercase}
.menu-btn i{position:relative;width:22px;height:10px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:transform .4s var(--ease-out)}
.menu-btn[aria-expanded="true"] i{transform:scaleX(.6)}
.menu{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:flex-end;gap:32px;padding:calc(var(--nav-h) + 24px) var(--gutter) calc(32px + env(safe-area-inset-bottom));background:rgba(8,10,13,.985);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility 0s .45s}
.menu.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease-out),visibility 0s}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column}
.menu nav a{display:flex;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font:800 clamp(30px,8.5vw,44px)/1.05 var(--f-display);font-stretch:118%;text-transform:uppercase;transform:translateY(16px);opacity:0;transition:transform .6s var(--ease-out),opacity .6s var(--ease-out)}
.menu nav a small{font:500 11px var(--f-mono);letter-spacing:.18em;color:var(--metal)}
.menu.open nav a{transform:none;opacity:1}
.menu.open nav a:nth-child(2){transition-delay:.05s}
.menu.open nav a:nth-child(3){transition-delay:.1s}
.menu.open nav a:nth-child(4){transition-delay:.15s}
.menu.open nav a:nth-child(5){transition-delay:.2s}
.menu .btn{align-self:flex-start}
.menu .menu-ig{margin-top:-20px}
.menu-info{color:var(--metal);font-size:14px}
/* Instagram: ícone ao lado do botão na navbar (no celular ele mora no menu) */
.ico-ig{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.ico-ig .fill{fill:currentColor;stroke:none}
.nav-ig{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin-right:-18px;border:1px solid var(--line-strong);border-radius:2px;color:var(--text);transition:border-color .3s var(--ease-out),color .3s var(--ease-out)}
.nav-ig:hover{border-color:var(--accent);color:#fff}

/* ---------- reveal ao entrar ---------- */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * 110ms)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal].in.settled{transition-delay:0s}

/* =========================================================
   HERO · o filme guiado pela rolagem
   ========================================================= */
.hero{position:relative;height:900vh}
/* svh: no celular a tela fixa nunca fica atrás da barra do navegador (no computador svh = vh) */
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas-deep)}
.hero-media{position:absolute;inset:0}
.hero-media>*,.hero-still img,.stills img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-still img{object-position:50% 50%}
.stills img{opacity:0;transition:opacity .45s var(--ease-out)}
.stills img.on{opacity:1}
.hero-video{opacity:0;transition:opacity .7s var(--ease-out);transform:translateZ(0);will-change:transform}
.stage.video-ready .hero-video{opacity:1}
.hold-loop{opacity:0;transition:opacity .6s var(--ease-out)}
.hold-loop.on{opacity:1}
.static-loop{display:none}
.scrim{background:
  radial-gradient(ellipse 120% 90% at 55% 45%,rgba(8,10,16,0) 38%,rgba(8,10,16,.55) 100%),
  linear-gradient(to bottom,rgba(8,10,13,.5) 0,rgba(8,10,13,0) 16%,rgba(8,10,13,0) 82%,var(--canvas) 100%);pointer-events:none}

/* abertura: a luz revela o velocímetro (vermelho primeiro, depois a cor real) */
html:not(.js) .reveal{display:none}
.reveal{pointer-events:none}
.js .stage:not(.go) .reveal>div{animation-play-state:paused}
.reveal>div{position:absolute;inset:0}
.reveal-red{background:url("../hero/poster-red.webp") center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 60%);mask-image:linear-gradient(90deg,transparent 40%,#000 60%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:0 0;mask-position:0 0;
  animation:sweep 1.9s var(--ease-io) 1.15s both}
.reveal-dark{background:#05070B;
  -webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 60%);mask-image:linear-gradient(90deg,transparent 40%,#000 60%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;
  animation:sweep 1.6s var(--ease-io) .45s both}
@keyframes sweep{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
.reveal.done{display:none}

/* faixas de texto sobre o filme */
.band{position:absolute;z-index:3;opacity:0;text-shadow:var(--tshadow)}
.band::before{content:"";position:absolute;inset:-34% -28%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75 * var(--k,1));
  background:radial-gradient(ellipse 62% 56% at 42% 50%,rgba(5,7,12,var(--scrim,.66)) 0%,rgba(5,7,12,calc(var(--scrim,.66) * .66)) 46%,rgba(5,7,12,0) 76%)}
.band .btn{text-shadow:none}
.statement{font-family:var(--f-display);font-weight:800;font-stretch:118%;text-transform:uppercase;font-size:clamp(30px,3.3vw,56px);line-height:.98;max-width:9ch}
/* faixa de abertura: o que é, o convite e onde fica, como créditos de filme */
.b1{left:var(--gutter);right:var(--gutter);bottom:clamp(28px,6vh,64px);display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:24px;color:var(--metal)}
.b1::before{display:none}
.b1>*{animation:cue-in 1.2s var(--ease-out) 2.3s both}
.strip-what{justify-self:start}
.strip-where{justify-self:end}
.b1 .mono{white-space:nowrap}
@media (max-width:1180px){.b1 .mono{font-size:11px;letter-spacing:.12em}}
.cue{display:flex;flex-direction:column;align-items:center;gap:12px}
@keyframes cue-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.arc-cue{width:38px;height:38px}
.arc-cue .seg.lit{stroke:var(--text)}
.arc-cue .seg.lit:nth-child(n+7){stroke:var(--accent)}
.arc-cue.failed .seg.lit{stroke:var(--line-strong)}
.b2,.b3{left:var(--gutter);top:50%;transform:translateY(-50%)}
/* véu lateral: escurece só a faixa do texto; o velocímetro e a roda seguem brilhando (auditoria: pior frame >= 9:1) */
.b2::before,.b3::before{inset:auto;left:calc(-1 * var(--gutter));top:-60vh;bottom:-60vh;width:52vw;opacity:calc(.35 + .65 * var(--k,1));
  background:linear-gradient(90deg,rgba(5,7,12,.9) 0,rgba(5,7,12,.84) 52%,rgba(5,7,12,.4) 76%,rgba(5,7,12,0) 100%)}
.b5{left:var(--gutter);top:50%;transform:translateY(-46%);--scrim:.6;max-width:min(46vw,760px)}
.hero-title{display:flex;flex-direction:column;gap:22px;margin:0}
.hero-title .kicker{color:var(--metal)}
.hero-title .display{font-size:clamp(44px,4.9vw,86px);max-width:9ch}
.b5 .lede{margin-top:24px;color:#C9CDD2;max-width:38ch}
.b5 .ctas{margin-top:34px}
.b6{left:var(--gutter);bottom:clamp(64px,13vh,140px);max-width:min(44vw,700px)}
.b6::before{inset:auto;left:calc(-1 * var(--gutter));bottom:calc(-1 * clamp(64px,13vh,140px));width:72vw;height:100vh;
  background:radial-gradient(ellipse 100% 100% at 0% 100%,rgba(5,7,12,.92) 0,rgba(5,7,12,.86) 55%,rgba(5,7,12,0) 96%)}
.h-detail{font-size:clamp(36px,3.6vw,64px);max-width:10ch}
.b6 .lede{margin-top:22px;color:#C9CDD2;max-width:32ch}

/* texto dividido em palavras e letras para as entradas */
.vis{display:block}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}
/* (a) impacto: palavra cresce além e assenta (ecoa o ponteiro subindo) */
[data-fx="punch"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - .12) * 3,1);opacity:var(--kc);transform:scale(calc(.62 + .5 * var(--kc) - .12 * var(--ks)));transform-origin:0 70%}
/* (b) profundidade: a linha vem de longe e do borrado ao nítido (ecoa o mergulho no cubo) */
[data-fx="depth"] .statement{position:relative;transform:scale(calc(.8 + .2 * var(--k,0)));transform-origin:0 50%}
[data-fx="depth"] .soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0))}
[data-fx="depth"] .sharp{opacity:var(--k,0)}
/* (c) subida em ordem com chegada escalonada (ecoa o carro pousando) */
[data-fx="rise"] .display .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3.2,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * 34px))}
[data-fx="rise"] .kicker{opacity:clamp(0,var(--k,0) * 3,1)}
[data-fx="rise"] .sub{--ks:clamp(0,(var(--k,0) - .62) * 4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 16px))}
[data-fx="rise"] .sub2{--kb:clamp(0,(var(--k,0) - .78) * 5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 14px))}
/* (d) deslize lateral letra a letra (ecoa a câmera indo até a roda) */
[data-fx="slide"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.6,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc)) * var(--jx,-40px)))}
[data-fx="slide"] .lede{opacity:clamp(0,(var(--k,0) - .55) * 3,1)}

/* =========================================================
   03 · SERVIÇOS · editorial
   ========================================================= */
/* índice editorial: título em cima, uma linha larga por serviço (nome | frase), a ação no fim da lista */
.services{position:relative;padding:clamp(120px,18vh,220px) var(--gutter) clamp(110px,16vh,200px)}
.services-head{display:flex;flex-direction:column;align-items:flex-start;gap:26px;margin-bottom:clamp(36px,6vh,72px)}
.services-head .h-section{max-width:14ch}
.service-list{border-top:1px solid var(--line)}
.service{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:baseline;gap:12px 48px;padding:clamp(26px,4vh,40px) 0}
/* a ação usa as mesmas colunas da lista: o botão alinha com as frases dos serviços */
.services-cta{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:24px 48px;margin-top:clamp(44px,7vh,80px)}
.services-cta .btn{justify-self:start}
.services-cta p{font-family:var(--f-display);font-weight:700;font-stretch:112%;font-size:clamp(20px,1.7vw,28px);line-height:1.22;max-width:30ch;text-wrap:balance}
/* 3,55vw: o nome mais longo ("Suspensão e freios") cabe numa linha da coluna em qualquer tela larga */
.service-name{font-size:clamp(30px,3.55vw,64px);transition:transform .5s var(--ease-out),color .5s var(--ease-out)}
.service-name a{background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat;transition:background-size .5s var(--ease-out)}
.service-name a:hover{background-size:100% 2px}
.service p{color:var(--metal);max-width:36ch}
.service:hover .service-name{transform:translateX(8px)}
.service-line{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.service-line i{position:absolute;left:0;top:0;width:100%;height:1px;background:var(--accent);transform:scaleX(.18);transform-origin:left;transition:transform .7s var(--ease-out)}
.js .service .service-line i{transform:scaleX(0);transition:transform 1.4s var(--ease-io) .25s}
.js .service.in .service-line i{transform:scaleX(.18)}
.js .service.in.settled .service-line i{transition-delay:0s;transition-duration:.7s}
.service:hover .service-line i,.js .service.in:hover .service-line i{transform:scaleX(1)}
/* o que a oficina também faz, numa linha só: mesma grade, tipo pequeno */
.service-more{padding:clamp(20px,3vh,30px) 0;border-bottom:1px solid var(--line)}
.service-more h3{color:var(--metal)}
.service-more p{color:#C9CDD2;max-width:none}

/* =========================================================
   04 · PNEUS · a roda domina a tela
   ========================================================= */
.tires{position:relative;height:270vh}
.tires-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;background:var(--canvas)}
/* a cena se dissolve no fundo em vez de terminar numa borda */
.tires-stage::after{content:"";position:absolute;inset:auto 0 0 0;height:16vh;z-index:1;pointer-events:none;background:linear-gradient(to top,var(--canvas),rgba(10,14,21,0))}
/* a imagem entra sozinha: surge do escuro enquanto a câmera assenta (escala 1,14 -> 1); depois o texto */
.tires-media{position:absolute;inset:0;opacity:var(--o,0)}
/* borda de cima dissolvida enquanto a cena sobe; some quando ela encosta no topo (--e) */
.tires-media::before{content:"";position:absolute;inset:0 0 auto 0;height:24vh;z-index:1;pointer-events:none;background:linear-gradient(var(--canvas),rgba(10,14,21,0));opacity:var(--e,1)}
/* a <picture> precisa preencher o contêiner, senão o "height:100%" da imagem não tem referência */
.tires-media picture,.oil-media picture,.about-media picture,.contact-media picture{position:absolute;inset:0;display:block}
.tires-media img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.14 - .14 * var(--p,0)));transform-origin:60% 55%}
.tires-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top,rgba(6,8,12,.92) 0,rgba(6,8,12,.55) 32%,rgba(6,8,12,0) 60%),
  linear-gradient(90deg,rgba(6,8,12,.55) 0,rgba(6,8,12,0) 45%);opacity:var(--t,0)}
.tires-copy{position:relative;z-index:2;width:100%;height:100%;display:grid;grid-template-rows:auto 1fr;padding:calc(var(--nav-h) + 6vh) var(--gutter) clamp(40px,8vh,90px);pointer-events:none}
.tires-copy .label{margin:0;font-weight:500;opacity:var(--o,0)}
.tires-text{align-self:end;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 48px;opacity:var(--t,0);transform:translateY(calc((1 - var(--t,0)) * 24px));text-shadow:var(--tshadow);pointer-events:auto}
.tires-award{grid-column:1;display:flex;align-items:center;gap:10px;color:#C9CDD2}
.tires-text .lede-lg{grid-column:1}
.tires-text .lede{grid-column:1;color:#C9CDD2}
.tires-text .btn{grid-column:2;grid-row:2/span 2;align-self:end;text-shadow:none}
.tires-text[data-hidden]{visibility:hidden}

/* =========================================================
   05 · TROCA DE ÓLEO · o momento comercial
   ========================================================= */
.oil{position:relative;height:300vh}
.oil-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;background:var(--canvas)}
.oil-media{position:absolute;inset:0}
.oil-media img,.oil-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.oil-video{opacity:0;transition:opacity .6s var(--ease-out);transform:translateZ(0)}
.oil-video.ready{opacity:1}
.oil-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to bottom,var(--canvas) 0,rgba(10,14,21,0) 16%,rgba(10,14,21,0) 80%,var(--canvas) 100%),
  linear-gradient(90deg,rgba(8,10,13,.9) 0,rgba(8,10,13,.62) 34%,rgba(8,10,13,0) 58%)}
.oil-copy{position:relative;z-index:2;padding:var(--nav-h) var(--gutter) 0;max-width:min(52vw,820px);text-shadow:var(--tshadow)}
.oil-title{margin-top:26px;font-size:clamp(30px,3.2vw,56px);max-width:21ch}
.oil-title span{display:block}
.oil-title .dim{color:var(--metal);margin-bottom:.12em}
.oil-copy .lede{margin-top:24px;color:#C9CDD2}
.oil-actions{display:flex;align-items:center;gap:28px;margin-top:40px}
.gauge{position:relative;flex:none;width:132px;height:132px;display:grid;place-items:center;border:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(16,19,24,.9) 0 54%,rgba(16,19,24,0) 55%);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.arc-gauge{position:absolute;inset:0;width:100%;height:100%}
.arc-gauge .seg{stroke-width:3.2}
.arc-gauge .seg.lit{stroke:var(--accent)}
.gauge-label{position:relative;color:var(--metal);font-size:11px;transition:color .4s var(--ease-out)}
.gauge.done .gauge-label{color:var(--text)}
.gauge-side{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.gauge-text{color:var(--metal);font-size:15px;max-width:30ch;min-height:2.6em}
.gauge.done+.gauge-side .gauge-text{color:var(--text)}
.oil-cta.lit{animation:cta-lit 1.4s var(--ease-out) 1}
@keyframes cta-lit{0%{box-shadow:0 0 0 0 rgba(225,6,0,.6)}100%{box-shadow:0 0 0 18px rgba(225,6,0,0)}}

/* =========================================================
   06 · A AUTO CENTER · silêncio
   ========================================================= */
.about{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,7vw,140px);align-items:center;padding:clamp(130px,20vh,240px) var(--gutter);background:linear-gradient(to bottom,var(--canvas),var(--canvas-deep) 30%,var(--canvas-deep) 70%,var(--canvas))}
.about-copy .h-section{margin-top:26px;max-width:12ch}
.about-copy .lede{margin-top:24px}
.ladder{margin-top:clamp(48px,8vh,90px);display:flex;flex-direction:column;gap:6px}
.ladder li{font-size:clamp(30px,3.6vw,58px);color:#4B525D;transition:color .6s var(--ease-out)}
.ladder li.lit{color:var(--text)}
.ladder li:last-child.lit{color:var(--accent)}
.about-figure{margin:0}
.about-media{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:2px}
.about-media img{width:100%;height:118%;object-fit:cover;transform:translateY(calc(var(--py,0) * -1%));will-change:transform}
/* a foto real entra no clima do site: topo e base assentam no escuro, fio fino de contorno */
.about-media::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(244,244,244,.06);background:linear-gradient(to bottom,rgba(8,10,13,.55) 0,rgba(8,10,13,0) 30%),linear-gradient(to top,rgba(8,10,13,.45) 0,rgba(8,10,13,0) 24%)}
.about-caption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.16em;color:var(--metal)}
.about-caption span:first-child{color:var(--text)}
/* selo Melhores do Ano: o arco da marca vira um medidor que chega ao máximo, ponta vermelha */
.award{display:flex;align-items:center;gap:18px;margin-top:24px}
.award-dial{position:relative;width:64px;height:64px;flex:none;display:grid;place-items:center}
.arc-award{position:absolute;inset:0;width:100%;height:100%}
.arc-award .seg{stroke-width:3.2;transition:stroke .18s var(--ease-out)}
.award-year{font-size:11px;letter-spacing:.06em;color:var(--text)}
.award-text{display:flex;flex-direction:column;gap:8px}
.award-text strong{font:800 clamp(20px,1.75vw,26px)/1 var(--f-display);font-stretch:112%;text-transform:uppercase}
.award-text .mono{font-size:11px;letter-spacing:.14em;color:var(--metal)}

/* =========================================================
   07 · CONTATO · o fechamento
   ========================================================= */
.contact{position:relative;min-height:100vh;display:flex;align-items:center;padding:clamp(130px,18vh,200px) var(--gutter);overflow:hidden}
.contact-media{position:absolute;inset:0;z-index:-1}
.contact-media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.contact-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--canvas) 0,rgba(10,14,21,0) 18%),linear-gradient(90deg,rgba(8,10,13,.94) 0,rgba(8,10,13,.78) 38%,rgba(8,10,13,.15) 70%),linear-gradient(to top,var(--canvas-deep) 0,rgba(8,10,13,0) 30%)}
.contact-copy{max-width:min(50vw,760px)}
.contact-copy .h-section{margin-top:26px;max-width:12ch}
.contact-copy .lede{margin-top:24px;color:#C9CDD2}
.info{margin-top:44px;display:grid;gap:0;border-top:1px solid var(--line-strong)}
.info>div{display:grid;grid-template-columns:150px 1fr;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.info dt{color:var(--metal)}
.info dd{font-size:18px}
.info dd a{background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:color .3s}
.info dd a:hover{color:#fff;background-size:100% 2px}
.contact .ctas{margin-top:40px}

/* ---------- rodapé ---------- */
.footer{display:grid;grid-template-columns:2fr 1fr 2fr;gap:40px;padding:72px var(--gutter) 40px;background:var(--canvas-deep);border-top:1px solid var(--line)}
.footer-brand p{margin-top:16px;color:var(--metal)}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a,.footer-info a{color:var(--metal);transition:color .3s}
.footer-links a:hover,.footer-info a:hover{color:var(--text)}
.footer-info{display:grid;grid-template-columns:repeat(2,auto);gap:24px 40px;color:var(--metal);font-size:15px}
.footer-legal{grid-column:1/-1;padding-top:28px;border-top:1px solid var(--line);color:#7A8088}
.nowrap{white-space:nowrap}

/* ---------- progresso da página (assinatura) ---------- */
.progress{position:fixed;left:var(--gutter);bottom:26px;z-index:40;display:flex;align-items:center;gap:12px;color:var(--metal);opacity:0;transition:opacity .6s var(--ease-out);pointer-events:none}
.progress.on{opacity:1}
.arc-progress{width:26px;height:26px}
.progress-num{font-size:11px}

/* =========================================================
   Responsivo (layout)
   ========================================================= */
@media (max-width:1100px){
  .nav-links{gap:20px}
  .footer{grid-template-columns:1fr 1fr}
  .footer-info{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--nav-h:64px}
  .nav-links,.nav-cta,.nav-ig{display:none}
  .menu-btn{display:inline-flex}
  .progress{display:none}
  .service,.services-cta{grid-template-columns:1fr}
  .service-name{font-size:clamp(30px,5.4vw,46px)}
  .services-cta .btn{width:100%}
  .about{grid-template-columns:1fr}
  .about-figure{max-width:520px}
  .about-media{aspect-ratio:4/5}
  .oil-copy,.contact-copy,.b5,.b6{max-width:none}
  .footer{grid-template-columns:1fr}
  .footer-info{grid-template-columns:1fr;gap:14px}
}
@media (max-width:560px){
  .service-name{font-size:clamp(26px,7.6vw,40px);font-stretch:112%}
  .tires-award,.award-text .mono{font-size:11px;letter-spacing:.08em}
  .info>div{grid-template-columns:1fr;gap:4px}
  .oil-actions{flex-direction:column;align-items:flex-start}
  .ctas .btn{flex:1 1 100%}
}
@media (max-width:400px){.btn{padding:0 18px;letter-spacing:.07em}.nav{gap:16px}}
/* celulares bem estreitos: "Menu/Fechar" vira só o ícone (o texto continua para leitores de tela) */
@media (max-width:350px){.menu-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (pointer:coarse){.btn{min-height:48px}.nav-links a{min-height:44px;display:inline-flex;align-items:center}}
@media (max-height:560px) and (min-width:721px){.progress,.b1{display:none}}

/* =========================================================
   HERO EM PÉ (celular e tablet em pé): o mesmo filme, na versão vertical (hero-scrub-v.mp4),
   com as faixas de texto recompostas para a tela alta. Só com movimento permitido (o resto é a hero estática).
   ========================================================= */
@media (orientation:portrait) and (prefers-reduced-motion:no-preference){
  /* imagens de apoio (antes do vídeo chegar): o recorte segue o carro como o vídeo em pé */
  .stills img:nth-child(3){object-position:74% 50%}
  .stills img:nth-child(4){object-position:66% 50%}
  /* abertura: o que é e onde fica empilhados, o convite embaixo */
  .b1{grid-template-columns:1fr;justify-items:center;gap:8px;text-align:center;bottom:calc(22px + env(safe-area-inset-bottom))}
  .strip-what,.strip-where{justify-self:center}
  .b1 .mono{white-space:normal;text-wrap:balance;font-size:11px;letter-spacing:.1em}
  .b1 .cue{order:3;margin-top:16px}
  /* frases de impacto no terço de baixo, com véu de baixo para cima */
  .b2,.b3{top:auto;right:var(--gutter);bottom:calc(15vh + env(safe-area-inset-bottom));transform:none}
  .b2::before,.b3::before{left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));width:auto;top:-28vh;bottom:calc(-15vh - env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(5,7,12,.9) 0,rgba(5,7,12,.72) 48%,rgba(5,7,12,0) 100%)}
  /* 9,4vw: "Velocidade," cabe na largura mesmo no pico do efeito de impacto (escala 1,12) */
  .statement{font-size:clamp(34px,9.4vw,60px)}
  /* pausa no carro: título em cima, botões embaixo, o carro no meio */
  .b5{top:calc(var(--nav-h) + 3vh);right:var(--gutter);bottom:calc(24px + env(safe-area-inset-bottom));transform:none;max-width:none;display:flex;flex-direction:column}
  .b5::before{inset:auto;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));top:calc(-1 * (var(--nav-h) + 3vh));bottom:calc(-24px - env(safe-area-inset-bottom));
    background:linear-gradient(to bottom,rgba(5,7,12,.88) 0,rgba(5,7,12,.55) 34%,rgba(5,7,12,0) 50%,rgba(5,7,12,0) 66%,rgba(5,7,12,.85) 100%)}
  .hero-title .display{font-size:clamp(44px,12.6vw,84px)}
  .b5 .lede{margin-top:18px;max-width:34ch}
  .b5 .ctas{margin-top:auto}
  /* detalhe final: texto embaixo, roda em cima */
  .b6{right:var(--gutter);bottom:calc(9vh + env(safe-area-inset-bottom));max-width:none}
  .b6::before{left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));width:auto;height:72vh;bottom:calc(-9vh - env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(5,7,12,.94) 0,rgba(5,7,12,.74) 46%,rgba(5,7,12,0) 100%)}
  .h-detail{font-size:clamp(40px,11vw,72px)}
}
/* telas estreitas: o texto dos pneus empilha e o botão vem embaixo */
@media (max-width:720px){
  .tires-text{grid-template-columns:1fr}
  .tires-text .btn{grid-column:1;grid-row:auto;justify-self:start}
}

/* =========================================================
   HERO ESTÁTICA · os gates (idênticos no hero.js)
   1 celular deitado (sem altura para o filme) · 2 movimento reduzido
   ========================================================= */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative;top:auto;height:auto;overflow:visible;display:grid;background:var(--canvas)}
  .hero-media{position:relative;inset:auto;grid-area:1/1;height:100vh;height:100svh;min-height:560px;overflow:hidden}
  .reveal,.stills,.hero-video,.hold-loop,.b1,.b2,.b3{display:none}
  .static-loop{display:block;opacity:0;transition:opacity .8s var(--ease-out)}
  .static-loop.ready{opacity:1}
  .band{position:relative;left:auto;top:auto;bottom:auto;transform:none;opacity:1;visibility:visible}
  .band::before{display:none}
  .b5{grid-area:1/1;align-self:center;z-index:3;padding:var(--nav-h) var(--gutter) 0;max-width:min(52vw,760px)}
  .b6{grid-area:2/1;display:flex;flex-direction:column;justify-content:flex-end;min-height:88vh;min-height:88svh;max-width:none;padding:0 var(--gutter) clamp(56px,10vh,110px);
    background:linear-gradient(90deg,rgba(8,10,13,.88) 0,rgba(8,10,13,.4) 46%,rgba(8,10,13,0) 70%),linear-gradient(to top,rgba(8,10,13,.85) 0,rgba(8,10,13,0) 45%),
      image-set(url("../hero/detail.avif") type("image/avif"),url("../hero/detail.webp") type("image/webp")) 70% 50%/cover no-repeat}
  .b6 .lede{opacity:1}
  .scrim{background:linear-gradient(90deg,rgba(8,10,13,.8) 0,rgba(8,10,13,.3) 45%,rgba(8,10,13,0) 65%),linear-gradient(to bottom,rgba(8,10,13,.55) 0,rgba(8,10,13,0) 20%,rgba(8,10,13,0) 78%,var(--canvas) 100%)}
  @media (orientation:portrait){
    .hero-media{height:100svh}
    .b5{align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start;max-width:none;padding:calc(var(--nav-h) + 4vh) var(--gutter) calc(28px + env(safe-area-inset-bottom))}
    .hero-title .display{font-size:clamp(44px,12.6vw,84px)}
    .b5 .lede{margin-top:18px;max-width:34ch}
    .b5 .ctas{margin-top:auto}
    .scrim{background:linear-gradient(to bottom,rgba(8,10,13,.85) 0,rgba(8,10,13,.45) 34%,rgba(8,10,13,0) 52%,rgba(8,10,13,0) 72%,rgba(8,10,13,.8) 100%)}
    .b6{background:linear-gradient(to top,rgba(8,10,13,.95) 0,rgba(8,10,13,.55) 40%,rgba(8,10,13,0) 70%),
      image-set(url("../hero/detail-v.avif") type("image/avif"),url("../hero/detail-v.webp") type("image/webp")) 50% 30%/cover no-repeat}
    .h-detail{font-size:clamp(40px,11vw,72px)}
    /* telas em pé mais baixas: o carro desce um pouco para o texto de apoio não ficar em cima dele */
    /* desloca pelo layout (top), nunca por transform: transform num vídeo tocando custa composição a cada quadro */
    @media (max-height:820px){.hero-still img,.static-loop{top:9%;bottom:auto;height:100%}}
  }
  /* seções com rolagem coreografada viram composições simples */
  .tires,.oil{height:auto}
  .tires-stage,.oil-stage{position:relative;height:auto;min-height:100svh}
  .tires-media,.tires-copy .label{opacity:1}
  /* parada, a foto pode usar máscara (custo único): o topo some no fundo da página sem emenda */
  .tires-stage{background:linear-gradient(rgba(10,14,21,0),var(--canvas) 24vh)}
  .tires-media::before{display:none}
  .tires-media{-webkit-mask-image:linear-gradient(transparent,#000 24vh);mask-image:linear-gradient(transparent,#000 24vh)}
  .tires-media img{transform:none}
  .tires-media::after{opacity:1}
  .tires-text{opacity:1;transform:none;grid-template-columns:1fr}
  .tires-text .btn{grid-column:1;grid-row:auto;justify-self:start}
  .oil-stage{align-items:flex-end;padding-bottom:clamp(48px,8vh,90px)}
  .oil-video{display:none}
}
@media (max-width:720px) and (orientation:portrait),(orientation:portrait) and (max-width:1024px){
  /* o fio de óleo corre pela direita, fora da coluna do texto */
  .oil-video{object-position:54% 50%}
  .oil-media::after{background:linear-gradient(to top,rgba(8,10,13,.96) 0,rgba(8,10,13,.75) 46%,rgba(8,10,13,.1) 75%)}
  .oil-copy{max-width:none;padding-top:45vh}
  .contact{align-items:flex-end;padding-top:52vh}
  /* o carro fica na metade de cima; o texto começa abaixo dele */
  .contact-media{bottom:auto;height:66vh;height:66svh}
  .contact-media img{object-position:50% 72%}
  .contact-media::after{background:linear-gradient(to bottom,var(--canvas) 0,rgba(10,14,21,0) 16%),linear-gradient(to top,var(--canvas) 0,rgba(10,14,21,.86) 26%,rgba(10,14,21,0) 56%)}
  .contact-copy{max-width:none}
}
/* óleo em pé, com movimento: cena fixa como nos pneus. Primeiro só o óleo descendo; depois o texto sobe (--ot).
   O texto fica compacto para caber numa tela de celular: medidor menor, frase ao lado, botão embaixo */
@media (orientation:portrait) and (max-width:1024px) and (prefers-reduced-motion:no-preference){
  .oil{height:340vh}
  .oil-stage{align-items:flex-end;padding-bottom:calc(clamp(24px,4vh,48px) + env(safe-area-inset-bottom))}
  .oil-media::after{opacity:calc(.3 + .7 * var(--ot,0))}
  .oil-copy{padding-top:0;opacity:var(--ot,0);transform:translateY(calc((1 - var(--ot,0)) * 28px))}
  .oil-copy[data-hidden]{visibility:hidden}
  .oil-title{margin-top:18px;font-size:clamp(28px,8vw,44px)}
  .oil-copy .lede{margin-top:14px}
  .oil-actions{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px 20px;margin-top:24px}
  .gauge-side{display:contents}
  .gauge{width:104px;height:104px}
  .gauge-text{min-height:0}
  .oil-cta{grid-column:1/-1;justify-self:stretch}
}
/* celular em pé: o filme e as cenas pedem um pouco mais de dedo (o arrasto do toque cobre muita distância) */
@media (orientation:portrait) and (pointer:coarse) and (prefers-reduced-motion:no-preference){
  .hero{height:1200vh}
  .tires{height:320vh}
}

/* =========================================================
   Movimento reduzido: tudo no estado final
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .env{animation:none}
  .js [data-reveal]{opacity:1;transform:none}
  .static-loop{display:none!important}
  .ladder li{color:var(--text)}
  .ladder li:last-child{color:var(--accent)}
  .about-media img{transform:none;height:100%}
  .service .service-line i{transform:scaleX(.18)}
}

/* modo leve (computadores modestos): mesma cara, menos trabalho de composição a cada quadro */
html.lite body::after{display:none}
html.lite .env{animation:none}
html.lite .nav.scrolled,html.lite .menu{-webkit-backdrop-filter:none;backdrop-filter:none}
html.lite .nav.scrolled{background:rgba(10,14,21,.9)}

/* painel de diagnóstico (?diag) */
.diag-panel{position:fixed;right:12px;bottom:12px;z-index:200;max-width:min(560px,calc(100vw - 24px));padding:10px 14px;background:rgba(8,10,13,.92);border:1px solid var(--line-strong);color:var(--text);font:500 12px/1.5 var(--f-mono);pointer-events:none}

/* pausa de tudo com a aba escondida */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}