:root{
  --noite: oklch(0.11 0.01 25);
  --grafite: oklch(0.16 0.012 25);
  --vermelho: oklch(0.6 0.225 28);
  --osso: oklch(0.96 0.006 60);
  --cinza: oklch(0.74 0.01 40);
  --linha: oklch(1 0 0 / .12);
  --tinta: oklch(0.18 0.012 25);
  --tinta-2: oklch(0.45 0.01 40);
  --claro: oklch(0.955 0.004 250);
  --ease: cubic-bezier(.16,1,.3,1);
  --gut: clamp(16px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--noite);color:var(--osso);font-family:"Hanken Grotesk",system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
section{position:relative}
.kicker{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cinza)}
.kicker::before{content:"";border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid var(--vermelho)}
h2{font-family:"Saira";font-style:italic;font-weight:850;font-stretch:76%;text-transform:uppercase;font-size:clamp(38px,5vw,76px);line-height:.92;margin-top:14px}
h2 em{font-style:inherit;color:var(--vermelho)}
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:999px;font-weight:700;font-size:16px;padding:8px 8px 8px 24px;transition:transform .5s var(--ease)}
.btn .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:oklch(1 0 0 / .16);transition:transform .5s var(--ease)}
.btn:hover{transform:translateY(-2px)}.btn:hover .ic{transform:translateX(3px)}
.btn-zap{background:var(--vermelho);color:#fff;box-shadow:0 14px 40px -12px oklch(0.6 0.225 28 / .9)}
.btn-claro{background:var(--osso);color:var(--noite)}.btn-claro .ic{background:var(--vermelho);color:#fff}
.btn-contorno{border:1px solid oklch(1 0 0 / .3);padding:14px 24px;background:oklch(0.1 0.01 25 / .25)}
.btn-mini{padding:6px 6px 6px 18px;font-size:14px}.btn-mini .ic{width:32px;height:32px}
[data-rev]{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
[data-rev].on{opacity:1;transform:none}
[data-rev="2"]{transition-delay:.12s}[data-rev="3"]{transition-delay:.24s}[data-rev="4"]{transition-delay:.36s}

/* topo */
.topo{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px var(--gut);background:oklch(0.1 0.01 25 / .72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
.topo .marca img{height:44px;width:auto;display:block}
.topo nav{display:flex;align-items:center;gap:28px;font-weight:600;font-size:15px}
.topo nav a.l{position:relative;padding:4px 0}
.topo nav a.l::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--vermelho);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.topo nav a.l:hover::after,.topo nav a.l.ativo::after{transform:scaleX(1)}

/* hero do modelo */
.hero-m{min-height:100dvh;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;padding:110px var(--gut) 60px;gap:20px}
.hero-m .video{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.08) brightness(1.2)}
.hero-m .veu{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(50% 60% at 0% 100%, oklch(0.45 0.19 27 / .5), transparent 70%),
  linear-gradient(90deg, oklch(0.09 0.01 25 / .9) 0%, oklch(0.09 0.01 25 / .62) 40%, oklch(0.09 0.01 25 / .3) 70%, oklch(0.09 0.01 25 / .5) 100%),
  linear-gradient(180deg, oklch(0.09 0.01 25 / .5) 0%, transparent 25%, transparent 65%, oklch(0.09 0.01 25 / .95) 100%)}
.trilha{font-size:13px;font-weight:600;color:var(--cinza);display:flex;gap:8px;align-items:center}
.trilha a:hover{color:var(--osso)}
.hero-m h1{font-family:"Saira";font-style:italic;font-weight:900;font-stretch:72%;font-size:clamp(64px,9vw,150px);line-height:.85;margin-top:18px;animation:sobe 1.1s var(--ease) .15s both}
.hero-m h1 small{display:block;font-size:.26em;font-weight:800;color:var(--vermelho);letter-spacing:.02em;margin-top:10px}
.hero-m .frase{margin-top:18px;font-size:19px;line-height:1.5;color:oklch(0.9 0.008 60);max-width:36ch;animation:fade 1s var(--ease) .4s both}
.hero-m .acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;animation:fade 1s var(--ease) .55s both}
@keyframes sobe{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.palco-m{position:relative;height:min(64vh,620px);animation:chega 1.3s var(--ease) .3s both}
@keyframes chega{from{opacity:0;transform:translateX(18%);filter:blur(12px)}to{opacity:1;transform:none}}
.palco-m .moto{position:absolute;inset:0 0 70px;width:100%;height:calc(100% - 70px);object-fit:contain;object-position:bottom center;filter:drop-shadow(0 30px 30px oklch(0 0 0 / .6));transition:opacity .5s var(--ease),transform .8s var(--ease),filter .5s}
.palco-m .moto.troca{opacity:0;transform:translateX(10%);filter:blur(8px)}
.palco-m .sombra{position:absolute;left:14%;right:10%;bottom:58px;height:30px;background:radial-gradient(50% 50% at 50% 50%, oklch(0 0 0 / .7), transparent 70%);filter:blur(6px)}
.cores{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:12px}
.cores .nome-cor{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);margin-right:6px}
.cor{width:32px;height:32px;border-radius:50%;outline:2px solid transparent;outline-offset:4px;transition:outline-color .3s,transform .4s var(--ease);box-shadow:inset 0 0 0 1px oklch(0 0 0 / .2)}
.cor[aria-pressed="true"]{outline-color:oklch(1 0 0 / .85)}
.cor:hover{transform:scale(1.1)}

/* números (claro) */
.numeros{background:linear-gradient(180deg, var(--claro), oklch(0.92 0.005 250));color:var(--tinta);padding:110px var(--gut)}
.numeros .kicker{color:var(--tinta-2)}
.medidores{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,50px)}
.medidor{position:relative;text-align:center}
.medidor svg{width:100%;max-width:300px;display:block;margin:0 auto;overflow:visible}
.medidor .val{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);font-family:"Saira";font-style:italic;font-weight:900;font-stretch:78%;font-size:clamp(46px,5.4vw,82px);line-height:1}
.medidor .val small{font-size:.32em;font-weight:800;color:var(--vermelho);margin-left:4px}
.medidor .rot{margin-top:-10px;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-2)}
.medidor .obs{font-size:13px;color:var(--tinta-2);margin-top:6px}
.destaques{margin-top:60px;display:flex;flex-wrap:wrap;gap:10px 14px}
.destaques span{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:#fff;border:1px solid oklch(0.2 0.01 25 / .1);font-weight:700;font-size:15px;box-shadow:0 10px 30px -18px oklch(0.2 0.02 30 / .5)}
.destaques span::before{content:"";border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--vermelho)}

/* ficha (escuro) */
.ficha-sec{padding:110px var(--gut);background:var(--grafite);overflow:hidden;isolation:isolate}
.ficha-sec::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(oklch(1 0 0 / .04) 1px, transparent 1px),linear-gradient(90deg, oklch(1 0 0 / .04) 1px, transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 70% at 70% 40%, #000, transparent);mask-image:radial-gradient(70% 70% at 70% 40%, #000, transparent)}
.ficha-sec .grade{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(30px,5vw,80px);align-items:start}
.ficha-sec p.txt{margin-top:18px;font-size:16px;line-height:1.6;color:oklch(0.8 0.008 60);max-width:40ch}
.tabela{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;border-top:1px solid var(--linha)}
.tabela li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:18px 2px;border-bottom:1px solid var(--linha)}
.tabela li span{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);flex:0 0 auto}
.tabela li b{font-weight:700;font-size:16px;text-align:right}
.fonte{margin-top:22px;font-size:13px;line-height:1.5;color:var(--cinza)}

/* outros modelos (claro) */
.outros{background:linear-gradient(180deg, oklch(0.94 0.005 250), var(--claro));color:var(--tinta);padding:100px var(--gut)}
.outros .kicker{color:var(--tinta-2)}
.outros .lista-o{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.outros a{position:relative;display:block;padding:22px 22px 20px;border-radius:24px;background:#fff;border:1px solid oklch(0.2 0.01 25 / .08);box-shadow:0 30px 50px -36px oklch(0.2 0.02 30 / .5);overflow:hidden;transition:transform .6s var(--ease)}
.outros a:hover{transform:translateY(-6px)}
.outros a img{width:100%;height:150px;object-fit:contain;display:block;transition:transform .8s var(--ease)}
.outros a:hover img{transform:translateX(6px) scale(1.04)}
.outros a b{display:block;margin-top:12px;font-family:"Saira";font-style:italic;font-weight:850;font-stretch:78%;font-size:26px;line-height:1}
.outros a small{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2)}
.outros a::after{content:"→";position:absolute;right:22px;bottom:18px;width:36px;height:36px;border-radius:50%;background:var(--vermelho);color:#fff;display:grid;place-items:center;font-weight:700;transform:scale(.8);opacity:0;transition:.4s var(--ease)}
.outros a:hover::after{transform:none;opacity:1}

/* chamada troca */
.chamada{padding:90px var(--gut);background:radial-gradient(70% 90% at 80% 30%, oklch(0.62 0.23 28), oklch(0.5 0.2 27) 55%, oklch(0.34 0.13 25));display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;overflow:hidden}
.chamada h2{margin:0;font-size:clamp(36px,4.6vw,70px)}
.chamada .g3{position:absolute;right:-2vw;top:50%;transform:translateY(-50%);font-family:"Saira";font-style:italic;font-weight:900;font-stretch:62%;font-size:340px;line-height:.8;color:transparent;-webkit-text-stroke:2px oklch(1 0 0 / .14);pointer-events:none}

/* rodapé */
.rodape{padding:70px var(--gut) 40px;background:var(--noite);border-top:1px solid var(--linha)}
.rodape .topo-r{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.rodape .topo-r img{width:min(240px,64vw)}
.rodape .links{display:flex;gap:26px;flex-wrap:wrap;font-weight:600}
.rodape .base{margin-top:44px;padding-top:24px;border-top:1px solid var(--linha);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--cinza)}
.flutua{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;width:60px;height:60px;border-radius:50%;background:var(--vermelho);display:none;place-items:center;box-shadow:0 14px 34px -8px oklch(0.6 0.225 28 / .9)}

@media (max-width:860px){
  .topo{padding:10px 16px}.topo nav a.l{display:none}.topo .marca img{height:34px}
  .hero-m{grid-template-columns:1fr;padding:84px 16px 40px;min-height:auto;gap:0}
  .hero-m h1{font-size:68px}.hero-m .frase{font-size:16px}
  .palco-m{height:330px;margin-top:10px;order:2}
  .hero-m .acoes{order:3}
  .cores{left:0;right:auto}
  .numeros{padding:80px 16px}
  .medidores{grid-template-columns:1fr;gap:34px}
  .medidor svg{max-width:250px}
  .ficha-sec{padding:80px 16px}
  .ficha-sec .grade{grid-template-columns:1fr}
  .tabela{grid-template-columns:1fr}
  .tabela li b{font-size:15px}
  .outros{padding:80px 16px}
  .outros .lista-o{grid-template-columns:1fr 1fr;gap:10px}
  .outros a{padding:14px}.outros a img{height:90px}.outros a b{font-size:20px}
  .chamada{padding:70px 16px}
  .chamada .g3{display:none}
  .flutua{display:grid}
}

.nm{text-transform:none}

/* ===== Hero do modelo: vídeo só do lado do texto, moto em estúdio escuro (aprovado 24/09) ===== */
.hero-m{background:radial-gradient(40% 32% at 72% 86%, oklch(0.45 0.19 27 / .45), transparent 70%),radial-gradient(45% 55% at 72% 30%, oklch(0.22 0.012 25), oklch(0.08 0.008 25) 70%)}
.hero-m .video{-webkit-mask-image:linear-gradient(90deg,#000 22%,transparent 58%);mask-image:linear-gradient(90deg,#000 22%,transparent 58%)}
.hero-m .veu{background:radial-gradient(50% 60% at 0% 100%, oklch(0.45 0.19 27 / .5), transparent 70%),linear-gradient(90deg, oklch(0.09 0.01 25 / .82) 0%, oklch(0.09 0.01 25 / .5) 40%, transparent 70%),linear-gradient(180deg, oklch(0.09 0.01 25 / .5) 0%, transparent 25%, transparent 70%, oklch(0.09 0.01 25 / .95) 100%)}
.palco-m::after{content:"";position:absolute;left:8%;right:4%;bottom:44px;height:70px;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%, oklch(0.6 0.225 28 / .5), transparent 70%);filter:blur(12px)}
@media (max-width:860px){
  .hero-m{background:radial-gradient(70% 22% at 50% 70%, oklch(0.45 0.19 27 / .4), transparent 70%),oklch(0.08 0.008 25)}
  .hero-m .video{-webkit-mask-image:linear-gradient(180deg,#000 12%,transparent 40%);mask-image:linear-gradient(180deg,#000 12%,transparent 40%)}
}