/* Ápice · supercarros
   Sem JS ou com "reduzir movimento": a abertura vira cartazes empilhados.
   Com JS: o palco fica preso na tela e cada capítulo nasce de um ponto do anterior. */

:root {
  --nevoa: #d5d8e5;
  --tinta: #0b0b0e;
  --papel: #f1f1ee;
  --quente: #cbc7c0;
  --frio: #b4bcc6;
  --noite: #0e0f13;
  --noite-2: #17181e;
  --corrida: #e2261b;
  --corrida-escura: #c81e14;
  --cinza: #5d6068;
  --linha: rgba(11, 11, 14, .14);
  --cond: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --g: 16px;
  --folga: 0px;
  --topo-alt: 76px;
  --pw: 100vw;
  --ph: 100vh;
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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)' opacity='.6'/%3E%3C/svg%3E");
}
@supports (height: 100svh) { :root { --folga: calc(100vh - 100svh); } }
@media (min-width: 700px) { :root { --g: 32px; --topo-alt: 84px; } }
@media (min-width: 1100px) { :root { --g: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--corrida); outline-offset: 3px; }

.salto { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 12px 16px; border-radius: 12px; background: var(--tinta); color: #fff; text-decoration: none; font-weight: 600; }
.salto:focus { top: 12px; }

/* ---------- topo ---------- */
.topo {
  position: fixed; z-index: 60; left: 10px; right: 10px; top: calc(env(safe-area-inset-top) + 10px);
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; min-height: 52px;
  border-radius: 999px; color: var(--tinta);
  transition: background-color .4s, box-shadow .4s, color .4s;
}
.topo[data-tom="claro"] { color: #fff; }
.marca { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 800 16px/1 var(--sans); font-stretch: 125%; letter-spacing: .05em; white-space: nowrap; }
.marca svg { width: 28px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.6; flex: none; }
.marca svg circle { fill: var(--corrida); stroke: none; }
.menu { display: none; margin-left: auto; }
.menu a { padding: 10px 9px; font: 600 13.5px/1 var(--sans); text-decoration: none; border-radius: 999px; }
.menu a:hover { background: rgba(11, 11, 14, .07); }
.topo-acao { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.pular { margin-left: auto; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; background: rgba(11, 11, 14, .08); }
.topo[data-tom="claro"] .pular { background: rgba(255, 255, 255, .16); }
.agendar { display: none; background: var(--tinta); color: #fff; font: 600 14px/1 var(--sans); }
.agendar:hover { background: var(--corrida-escura); }

.topo.na-pagina, html:not(.js) .topo, .calmo .topo {
  color: var(--tinta); background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
}
.topo.na-pagina .menu, html:not(.js) .menu, .calmo .menu { display: flex; }
.topo.na-pagina .pular, html:not(.js) .pular, .calmo .pular { display: none; }
@media (min-width: 760px) {
  .topo { left: 50%; right: auto; width: min(980px, calc(100% - 40px)); transform: translateX(-50%); padding-left: 20px; }
  .topo.na-pagina .agendar, html:not(.js) .agendar, .calmo .agendar { display: inline-flex; margin-left: 8px; }
  .menu a { padding: 10px 14px; font-size: 14px; }
}
@media (max-width: 359px) { .marca span { display: none; } }

/* ---------- abertura: modo empilhado (padrão) ---------- */
.abertura { position: relative; background: var(--noite); }
.palco { position: relative; }
.cena { position: relative; overflow: hidden; height: 100vh; height: 100svh; }
.cena2, .cena3 { height: auto; }
.trilho { display: block; }
.poster, .painel { position: relative; overflow: hidden; height: 100vh; height: 100svh; }
.pixel, .hud, .tela3d, .cartaz2d, .dica-rolar { display: none; }
.ancora-garagem { position: absolute; left: 0; top: calc(100% - 100vh); width: 1px; height: 1px; }

/* ---------- abertura: palco preso (JS + movimento) ---------- */
.js:not(.calmo) .abertura { height: calc(var(--unidades, 11.6) * 100vh + 100vh); }
.js:not(.calmo) .palco { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--nevoa); }
.js:not(.calmo) .cena { position: absolute; inset: 0; height: auto; visibility: hidden; transform-origin: 50% 50%; }
.js:not(.calmo) .cena.ativa { visibility: visible; will-change: transform; }
.js:not(.calmo) .cena1 { z-index: 1; }
.js:not(.calmo) .cena2 { z-index: 2; }
.js:not(.calmo) .cena3 { z-index: 3; }
.js:not(.calmo) .cena4 { z-index: 4; }
.js:not(.calmo) .trilho { display: flex; width: 200%; height: 100%; will-change: transform; }
.js:not(.calmo) .poster, .js:not(.calmo) .painel { flex: 0 0 50%; height: 100%; }
.js:not(.calmo) .pixel { display: block; position: absolute; inset: 0; z-index: 40; opacity: 0; pointer-events: none; }
.js:not(.calmo) .hud, .js:not(.calmo) .dica-rolar { display: block; }
.js:not(.calmo) .cartaz2d, .js:not(.calmo) .tela3d { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.js:not(.calmo) .cartaz-estatico { display: none; }
.js:not(.calmo) .cena1.sem3d .cartaz-estatico { display: block; }
.js:not(.calmo) .cena1.sem3d canvas { display: none; }

/* ---------- cena 1 ---------- */
.cena1 { background: var(--nevoa); color: var(--tinta); }
.cartaz-estatico, .cartaz-estatico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cartaz2d { opacity: 0; transition: opacity .35s; }
.cartaz2d.pronto { opacity: 1; }
.tela3d { opacity: 0; transition: opacity .8s; }
.tela3d.pronto { opacity: 1; }
.cartaz-titulo { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.rotulos {
  position: absolute; z-index: 3; top: calc(env(safe-area-inset-top) + var(--topo-alt)); left: var(--g); right: var(--g);
  display: flex; justify-content: space-between; gap: 12px;
  font: 500 10.5px/1.35 var(--mono); text-transform: uppercase; letter-spacing: .05em;
}
.rotulos p:nth-child(2) { display: none; }
.rotulos p:last-child { text-align: right; }
@media (min-width: 700px) { .rotulos p:nth-child(2) { display: block; } }
.ficha-458 {
  position: absolute; z-index: 3; left: var(--g); bottom: calc(var(--folga) + 28px);
  display: grid; gap: 4px; font: 500 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em;
}
.ficha-458 b { font: 800 20px/1 var(--sans); font-stretch: 125%; text-transform: none; letter-spacing: 0; }
.js:not(.calmo) .ficha-458 { opacity: 0; }
.dica-rolar {
  position: absolute; z-index: 3; right: var(--g); bottom: calc(var(--folga) + 28px);
  font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
}
.dica-rolar i { display: block; width: 1px; height: 44px; margin: 10px auto 0; background: currentColor; transform-origin: top; animation: dica 1.8s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes dica { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- cena 2: pôsteres com moldura nítida ---------- */
.poster {
  color: #fff; background: #3a332e;
  --fx: calc(var(--pw) * .14); --fy: calc(var(--ph) * .2); --fw: calc(var(--pw) * .54); --fh: calc(var(--ph) * .5);
  --pos: 50% 50%;
}
.poster-fundo { position: absolute; inset: 0; background-size: cover; background-position: var(--pos); filter: saturate(1.15) brightness(.88); }
.moldura {
  position: absolute; z-index: 2; left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); overflow: hidden;
  outline: 2px solid rgba(255, 255, 255, .95); outline-offset: -1px;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .55);
  transform: translate3d(var(--dx, 0px), 0, 0) perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.nitida {
  position: absolute; max-width: none; left: calc(var(--fx) * -1); top: calc(var(--fy) * -1);
  width: var(--pw); height: var(--ph); object-fit: cover; object-position: var(--pos);
  transform: translate3d(calc(var(--dx, 0px) * -1), 0, 0);
}
.capitulo {
  position: absolute; z-index: 3; left: var(--g); top: calc(env(safe-area-inset-top) + var(--topo-alt));
  font: 500 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em;
}
.vertical-grupo {
  --vs: calc(var(--fh) / 9.4);
  position: absolute; z-index: 3; top: var(--fy); left: calc(var(--fx) + var(--fw) - var(--vs) * .36);
  display: flex; align-items: flex-start; gap: 10px;
  transform: translate3d(calc(var(--dx, 0px) * .55), 0, 0);
}
.marca-v { writing-mode: vertical-rl; font: 800 var(--vs)/.84 var(--sans); font-stretch: 125%; letter-spacing: -.01em; text-transform: uppercase; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.legenda-v { writing-mode: vertical-rl; font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; padding-top: 4px; }
.poster-pe { position: absolute; z-index: 3; left: var(--g); right: var(--g); bottom: calc(var(--folga) + 30px); }
.numero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .14em; font: 800 30px/.9 var(--sans); font-size: clamp(28px, 8vw, 60px); font-stretch: 125%; letter-spacing: -.02em; }
.numero b { font: 900 96px/.78 var(--cond); font-size: clamp(88px, 27vw, 210px); color: var(--corrida); letter-spacing: -.01em; }
.mote { margin-top: 12px; font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.poster-huracan { --pos: 50% 74%; }
.poster-huracan .poster-pe, .poster-huracan .capitulo { text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }

.poster-m4 { color: var(--tinta); background: #e9e9ea; --pos: 50% 68%; --fx: calc(var(--pw) * .1); --fy: calc(var(--ph) * .37); --fw: calc(var(--pw) * .8); --fh: calc(var(--ph) * .37); }
.poster-m4 .moldura { outline-color: var(--tinta); }
.m4-titulo { position: absolute; z-index: 3; left: var(--g); right: var(--g); top: calc(env(safe-area-inset-top) + var(--topo-alt) + 4px); font: 800 calc(var(--pw) * .165)/.8 var(--sans); font-stretch: 125%; letter-spacing: -.035em; text-transform: uppercase; }
.m4-titulo small { display: block; margin-top: .22em; text-align: right; font-size: .34em; font-weight: 250; letter-spacing: -.01em; text-transform: none; }
.poster-specs { position: absolute; z-index: 3; left: var(--g); right: var(--g); bottom: calc(var(--folga) + 28px); display: flex; justify-content: space-between; font: 500 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.poster-m4 .poster-specs { color: #fff; text-shadow: 0 1px 20px rgba(0, 0, 0, .4); }
.poster-specs b { display: block; font: 900 64px/.85 var(--cond); font-size: clamp(56px, 15vw, 104px); letter-spacing: 0; }
.legenda-m4 { position: absolute; z-index: 3; left: calc(var(--fx) - 22px); top: var(--fy); transform: rotate(180deg); }

@media (min-aspect-ratio: 1/1) and (min-width: 760px) {
  .poster { --fx: calc(var(--pw) * .31); --fy: calc(var(--ph) * .13); --fw: calc(var(--pw) * .23); --fh: calc(var(--ph) * .72); }
  .poster-huracan { --pos: 50% 70%; }
  .poster-pe { right: auto; max-width: 30vw; bottom: calc(var(--folga) + 44px); }
  .numero { font-size: clamp(30px, 3.4vw, 56px); }
  .numero b { font-size: clamp(110px, 13vw, 230px); }
  .poster-m4 { color: #fff; --fx: calc(var(--pw) * .355); --fy: calc(var(--ph) * .13); --fw: calc(var(--pw) * .29); --fh: calc(var(--ph) * .74); --pos: 50% 62%; }
  .poster-m4 .moldura { outline-color: rgba(255, 255, 255, .95); }
  .m4-titulo { right: auto; width: 30vw; top: 30vh; font-size: calc(var(--pw) * .062); text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
  .m4-titulo small { text-align: left; font-size: .4em; }
  .poster-specs { left: auto; right: var(--g); width: 28vw; bottom: calc(var(--folga) + 44px); }
  .poster-specs b { font-size: clamp(56px, 5.6vw, 104px); }
  .legenda-m4 { left: calc(var(--fx) + var(--fw) + 14px); transform: none; }
}

/* ---------- cena 3: painéis ---------- */
.painel::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: var(--grao); opacity: .07; mix-blend-mode: multiply; pointer-events: none; }
.painel > * { z-index: 1; }
.painel-gt3 { background: #f6f6f4; color: #14161c; }
.painel-marca { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + var(--topo-alt) + 8px); text-align: center; font: 600 15px/1 var(--sans); font-stretch: 125%; letter-spacing: .62em; text-indent: .62em; color: #3b3d42; }
.laminas { position: absolute; left: 5vw; right: 5vw; top: 21%; height: 33%; perspective: 900px; }
.lamina {
  position: absolute; overflow: hidden; background: #8a8a8a;
  opacity: var(--p, 1);
  transform: rotateY(calc(var(--r) + (1 - var(--p, 1)) * 80deg)) translate3d(0, 0, calc((1 - var(--p, 1)) * -180px));
}
.lamina img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.05); }
.lamina::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36, 36, 40, 0) 40%, rgba(36, 36, 40, .35)); }
.l1 { left: 0; top: 14%; width: 31%; height: 70%; --r: 24deg; transform-origin: 100% 50%; clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); }
.l2 { left: 30.5%; top: 0; width: 41%; height: 100%; --r: 0deg; clip-path: polygon(12% 0, 100% 4%, 88% 100%, 0 96%); }
.l3 { left: 70%; top: 8%; width: 30%; height: 80%; --r: -22deg; transform-origin: 0 50%; clip-path: polygon(0 0, 100% 12%, 100% 88%, 0 100%); }
.l1 img { object-position: 40% 50%; }
.l2 img { object-position: 45% 40%; }
.l3 img { object-position: 35% 50%; }
.carro-lado { position: absolute; left: 3vw; right: 3vw; top: 49%; transform: translate3d(calc((1 - var(--c, 1)) * -120vw), 0, 0); }
.carro-lado img { width: 100%; height: auto; position: relative; z-index: 1; }
.carro-lado::after { content: ''; position: absolute; left: 7%; right: 4%; bottom: -5%; height: 22%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
.painel-texto { position: absolute; left: var(--g); right: var(--g); bottom: calc(var(--folga) + 24px); text-align: center; opacity: var(--tx, 1); transform: translate3d(0, calc((1 - var(--tx, 1)) * 24px), 0); }
.painel-texto .capitulo { position: static; display: block; margin-bottom: 8px; color: #4a4c52; }
.painel-texto h2 { font: 800 34px/.95 var(--sans); font-size: clamp(30px, 9vw, 72px); font-stretch: 125%; letter-spacing: -.02em; color: #1b2233; }
.painel-texto p { max-width: 30em; margin: 12px auto; padding: 10px 0; border-top: 1px solid rgba(20, 22, 28, .3); border-bottom: 1px solid rgba(20, 22, 28, .3); font-size: 14px; line-height: 1.45; }
.specs-linha { display: flex; justify-content: center; gap: 20px; font: 500 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.specs-linha b { font: 900 24px/1 var(--cond); margin-right: 3px; }

.painel-f8 { background: #f3f4f6; color: #14161c; }
.faixa { position: absolute; inset: 0; clip-path: polygon(58% 0, 98% 0, 50% 74%, 10% 74%); transform: translate3d(calc((1 - var(--b, 1)) * 40vw), calc((1 - var(--b, 1)) * -30vh), 0); }
.faixa img { width: 100%; height: 100%; object-fit: cover; }
.faixa-2 { position: absolute; inset: 0; background: #59626d; clip-path: polygon(98% 0, 100% 0, 100% 4%, 56% 74%, 50% 74%); transform: translate3d(calc((1 - var(--b, 1)) * 60vw), calc((1 - var(--b, 1)) * -45vh), 0); }
.nome-fino { position: absolute; left: var(--g); top: 25%; color: #fff; mix-blend-mode: difference; font: 200 calc(var(--pw) * .19)/.86 var(--sans); font-stretch: 100%; letter-spacing: -.02em; text-transform: uppercase; opacity: var(--nf, 1); transform: translate3d(calc((1 - var(--nf, 1)) * -8vw), 0, 0); }
.nome-fino span { display: block; }
.carro-f8 { position: absolute; left: -7vw; width: 114vw; top: 47%; transform: translate3d(calc((1 - var(--c2, 1)) * 120vw), 0, 0); }
.carro-f8 img { width: 100%; height: auto; position: relative; z-index: 1; }
.carro-f8::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -3%; height: 20%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
.lista-mini { display: none; }
.painel-marca-2 { position: absolute; right: var(--g); top: calc(env(safe-area-inset-top) + var(--topo-alt) + 6px); font: 600 13px/1 var(--sans); font-stretch: 125%; letter-spacing: .5em; }
.contador { position: absolute; left: var(--g); bottom: calc(var(--folga) + 112px); font: 200 66px/1 var(--sans); letter-spacing: -.03em; }
.contador span { margin-left: 8px; font-size: 14px; letter-spacing: 0; }
.specs-icones { position: absolute; left: var(--g); right: var(--g); bottom: calc(var(--folga) + 26px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; opacity: var(--sp, 1); transform: translate3d(0, calc((1 - var(--sp, 1)) * 20px), 0); }
.specs-icones li { display: grid; gap: 3px; font: 500 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.specs-icones svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.specs-icones b { font: 900 24px/1 var(--cond); letter-spacing: .01em; }

@media (min-aspect-ratio: 1/1) and (min-width: 760px) {
  .painel-marca { left: 5vw; right: auto; width: 56vw; font-size: 22px; }
  .laminas { left: 6vw; right: auto; width: 54vw; top: 19%; height: 50%; }
  .carro-lado { left: 5vw; right: auto; width: 57vw; top: 53%; }
  .painel-texto { left: auto; right: 6vw; width: 29vw; top: 50%; bottom: auto; text-align: left; transform: translate3d(0, calc(-50% + (1 - var(--tx, 1)) * 24px), 0); }
  .painel-texto p { margin: 16px 0; }
  .specs-linha { justify-content: flex-start; }
  .painel-texto h2 { font-size: clamp(40px, 4.6vw, 84px); }
  .faixa { clip-path: polygon(52% 0, 74% 0, 46% 100%, 24% 100%); }
  .faixa-2 { clip-path: polygon(74% 0, 79% 0, 51% 100%, 46% 100%); }
  .nome-fino { left: 15vw; top: 15%; font-size: 10.5vw; white-space: nowrap; }
  .nome-fino span { display: inline; }
  .carro-f8 { left: 17vw; width: 62vw; top: 33%; }
  .lista-mini { display: grid; gap: 14px; position: absolute; left: var(--g); top: 30%; font: 500 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: #3e444c; }
  .lista-mini li { display: flex; gap: 10px; align-items: center; }
  .lista-mini span { opacity: .6; }
  .lista-mini .atual { color: #14161c; }
  .lista-mini .atual::before { content: ''; width: 22px; height: 1px; background: currentColor; order: 2; }
  .contador { bottom: calc(var(--folga) + 40px); font-size: 96px; }
  .specs-icones { left: auto; right: 5vw; width: 40vw; bottom: calc(var(--folga) + 46px); }
}

/* ---------- cena 4: a garagem ---------- */
.cena4 { background: var(--noite); color: #fff; }
.capa-foto, .capa-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.capa-video { opacity: 0; transition: opacity .8s; }
/* celular: foto inteira na largura, presa embaixo; o céu continua na cor de fundo */
.cena4 { background: #0b1322; }
.capa-foto { top: auto; bottom: 0; height: auto; min-height: 72%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%); mask-image: linear-gradient(180deg, transparent 0, #000 14%); }
.capa-video.tocando { opacity: 1; }
/* celular: céu livre em cima para o texto, carro embaixo */
.cena4::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 14, 24, .55) 0%, rgba(10, 14, 24, .2) 40%, rgba(10, 14, 24, 0) 58%, rgba(10, 14, 24, .1) 80%, rgba(10, 14, 24, .75) 100%); }
.capa-conteudo { position: absolute; z-index: 2; left: var(--g); right: var(--g); top: calc(env(safe-area-inset-top) + var(--topo-alt) + 28px); opacity: var(--in, 1); transform: translate3d(0, calc((1 - var(--in, 1)) * 28px), 0); }
.rotulo-claro { font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .07em; opacity: .82; }
.capa-titulo { margin: 10px 0 12px; font: 900 72px/.8 var(--cond); font-size: clamp(56px, 19vw, 230px); text-transform: uppercase; white-space: nowrap; }
.capa-texto { max-width: 30em; font-size: 17px; line-height: 1.45; opacity: .92; }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.capa-numeros { position: absolute; z-index: 2; left: var(--g); right: var(--g); bottom: calc(var(--folga) + 26px); display: flex; gap: 26px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .22); font: 500 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; opacity: var(--in, 1); }
.capa-numeros b { display: block; font: 900 28px/1 var(--cond); }
@media (min-width: 900px) {
  .capa-foto, .capa-video { top: 0; height: 100%; min-height: 0; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
  /* computador: escurece só a esquerda, onde fica o texto; o carro fica limpo */
  .cena4::after { background: linear-gradient(90deg, rgba(10, 14, 24, .7) 0%, rgba(10, 14, 24, .35) 32%, rgba(10, 14, 24, 0) 52%), linear-gradient(180deg, rgba(10, 14, 24, .5) 0%, rgba(10, 14, 24, 0) 18%, rgba(10, 14, 24, 0) 72%, rgba(10, 14, 24, .7) 100%); }
  .capa-conteudo { top: auto; right: auto; max-width: 46vw; bottom: calc(var(--folga) + 56px); }
  .capa-titulo { font-size: clamp(84px, 10.5vw, 200px); }
  .capa-numeros { left: auto; right: var(--g); width: 30vw; bottom: calc(var(--folga) + 64px); justify-content: space-between; }
}

/* ---------- HUD da abertura ---------- */
.hud { position: absolute; z-index: 55; left: 0; right: 0; bottom: var(--folga); height: 3px; color: #fff; mix-blend-mode: difference; font: 500 10px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; transition: opacity .4s; }
.hud ol { display: none; gap: 14px; justify-items: end; }
.hud li { opacity: .45; transition: opacity .3s; }
.hud li span { display: none; margin-right: 6px; }
.hud li.atual { opacity: 1; }
.hud-barra { position: absolute; inset: 0; background: rgba(255, 255, 255, .25); }
.hud-barra i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--hud, 0)); }
.hud.some { opacity: 0; }
@media (min-width: 900px) {
  .hud { left: auto; right: 22px; bottom: auto; top: 50%; height: auto; transform: translateY(-50%); }
  .hud ol { display: grid; }
  .hud li.atual span { display: inline; }
  .hud-barra { inset: 0 -8px 0 auto; width: 1px; background: rgba(255, 255, 255, .35); }
  .hud-barra i { transform-origin: top; transform: scaleY(var(--hud, 0)); }
}

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid transparent; font: 600 15px/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .2s, background-color .2s, color .2s, border-color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-claro { background: #fff; color: var(--tinta); }
.btn-claro:hover { background: var(--nevoa); }
.btn-contorno { border-color: rgba(255, 255, 255, .6); color: #fff; }
.btn-contorno:hover { background: rgba(255, 255, 255, .12); }
.btn-escuro { background: var(--tinta); color: #fff; }
.btn-vermelho { background: var(--corrida); color: #fff; }
.btn-vermelho:hover { background: var(--corrida-escura); }
.btn-contorno-escuro { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.btn-contorno-escuro:hover { background: var(--tinta); color: #fff; }

/* ---------- seções da página ---------- */
.secao-cab { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 24px; padding: 0 var(--g); margin-bottom: 22px; }
.secao-cab h2 { flex: 1 1 auto; font: 800 40px/.95 var(--sans); font-size: clamp(36px, 8vw, 76px); font-stretch: 112%; letter-spacing: -.03em; }
.secao-cab p { max-width: 26em; color: var(--cinza); font-size: 15px; }

.marcas { padding: 96px 0 36px; }
.setas { display: none; gap: 8px; }
.seta { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linha); background: #fff; display: grid; place-items: center; cursor: pointer; }
.seta:hover { background: var(--tinta); color: #fff; }
.seta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (min-width: 900px) { .setas { display: flex; } }
.trilho-marcas { display: flex; gap: 12px; overflow-x: auto; padding: 4px var(--g) 16px; scroll-snap-type: x mandatory; scroll-padding: 0 var(--g); scrollbar-width: none; overscroll-behavior-x: contain; }
.trilho-marcas::-webkit-scrollbar { display: none; }
.trilho-marcas li { flex: 0 0 auto; scroll-snap-align: start; }
.cartao-marca { position: relative; display: block; width: 62vw; max-width: 270px; height: 340px; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #24252b; color: #fff; text-align: left; cursor: pointer; }
.cartao-marca img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.cartao-marca::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 14, .55), rgba(10, 10, 14, 0) 42%, rgba(10, 10, 14, 0) 70%, rgba(10, 10, 14, .5)); }
.cartao-marca:hover img { transform: scale(1.06); }
.cartao-marca .nome, .cartao-marca .qtd, .cartao-marca .ir { position: absolute; z-index: 1; }
.cartao-marca .nome { left: 18px; right: 18px; top: 16px; font: 700 26px/1.02 var(--sans); font-stretch: 110%; letter-spacing: -.01em; }
.cartao-marca .qtd { left: 18px; bottom: 22px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.cartao-marca .ir { right: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--tinta); display: grid; place-items: center; transition: background-color .2s, color .2s; }
.cartao-marca .ir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.cartao-marca:hover .ir, .cartao-marca[aria-pressed="true"] .ir { background: var(--corrida); color: #fff; }
.cartao-marca[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--papel), 0 0 0 5px var(--corrida); }
@media (min-width: 900px) { .cartao-marca { width: 250px; height: 380px; } }

.colecao { padding: 48px 0 96px; }
.contagem { font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.contagem b { font: 900 30px/1 var(--cond); color: var(--tinta); }
.filtros { display: flex; gap: 8px; overflow-x: auto; padding: 0 var(--g) 20px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linha); background: #fff; font: 600 14px/1 var(--sans); cursor: pointer; transition: background-color .2s, color .2s; }
.chip:hover { border-color: var(--tinta); }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip-n { font: 500 11px/1 var(--mono); opacity: .6; }
.chip-marca, .chip-marca:hover { background: var(--corrida); border-color: var(--corrida); color: #fff; }
.chip[hidden] { display: none; }
.grade { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0 var(--g); }
@media (min-width: 620px) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) { .grade { grid-template-columns: repeat(4, 1fr); } }
.carro[hidden] { display: none; }
.carro article { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid rgba(11, 11, 14, .06); }
.carro.destaque article { background: #e3e6f1; }
.carro-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #d9d9dc; }
.carro-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.carro:hover .carro-foto img { transform: scale(1.045); }
.selo { position: absolute; z-index: 1; left: 12px; top: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(11, 11, 14, .82); color: #fff; font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.carro-info { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.carro-marca { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--cinza); }
.carro h3 { margin: 6px 0 4px; font: 700 23px/1.08 var(--sans); font-stretch: 108%; letter-spacing: -.01em; }
.carro-meta { font-size: 14px; color: var(--cinza); }
.carro-specs { display: flex; gap: 18px; margin: 14px 0 16px; font: 500 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--cinza); }
.carro-specs b { display: block; margin-bottom: 2px; font: 900 26px/1 var(--cond); color: var(--tinta); letter-spacing: 0; }
.carro-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linha); }
.preco { font-weight: 600; font-size: 15px; }
.btn-ficha { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--tinta); background: transparent; font: 600 14px/1 var(--sans); cursor: pointer; transition: background-color .2s, color .2s; }
.btn-ficha:hover { background: var(--tinta); color: #fff; }
@media (max-width: 619px) {
  .grade { grid-template-columns: 1fr 1fr; gap: 10px; }
  .carro article { border-radius: 14px; }
  .carro-info { padding: 12px 12px 12px; }
  .carro-marca { font-size: 9.5px; }
  .carro h3 { font-size: 16.5px; }
  .carro-meta { font-size: 12.5px; }
  .carro-specs { gap: 10px; margin: 10px 0 12px; font-size: 9px; }
  .carro-specs b { font-size: 21px; }
  .carro-pe { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; }
  .preco { font-size: 12.5px; }
  .btn-ficha { min-height: 40px; padding: 0 10px; font-size: 13.5px; }
  .selo { left: 8px; top: 8px; font-size: 9px; padding: 5px 8px; }
}
.vazio { padding: 48px var(--g); text-align: center; }
.vazio[hidden] { display: none; }
.vazio p { margin-bottom: 16px; color: var(--cinza); }

.vantagens { background: var(--noite); color: #fff; }
.vantagens ul { display: grid; grid-template-columns: 1fr; }
.vantagens li { display: flex; align-items: center; gap: 16px; padding: 24px var(--g); border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, .86); }
.vantagens li:nth-child(3) { background: var(--noite-2); }
.vantagens svg { flex: 0 0 34px; width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
@media (min-width: 560px) { .vantagens ul { grid-template-columns: 1fr 1fr; } .vantagens li:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .08); } }
@media (min-width: 1000px) { .vantagens ul { grid-template-columns: repeat(4, 1fr); } .vantagens li { padding: 34px 28px; border-right: 1px solid rgba(255, 255, 255, .08); border-bottom: 0; } }

.visita { position: relative; overflow: hidden; padding: 96px var(--g); background: var(--noite); color: #fff; }
.visita-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.visita::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14, 15, 19, .82), rgba(14, 15, 19, .55) 45%, rgba(14, 15, 19, .9)); }
.visita-grade { position: relative; z-index: 2; display: grid; gap: 36px; max-width: 1240px; margin: 0 auto; }
.visita h2 { margin: 12px 0 14px; font: 900 76px/.82 var(--cond); font-size: clamp(72px, 19vw, 170px); text-transform: uppercase; }
.visita-txt p:last-child { max-width: 28em; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.visita-form { display: grid; gap: 14px; padding: 24px; border-radius: 22px; background: rgba(255, 255, 255, .97); color: var(--tinta); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.campo label { display: block; margin-bottom: 6px; font: 600 13.5px/1.2 var(--sans); }
.campo input, .campo select { width: 100%; min-height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid #c4c6cd; background: #fff; font-size: 16px; -webkit-appearance: none; appearance: none; }
.campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230b0b0e' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.campo input:focus, .campo select:focus { border-color: var(--tinta); outline: 2px solid var(--tinta); outline-offset: 0; }
.campo [aria-invalid="true"] { border-color: var(--corrida-escura); background-color: #fff6f5; }
.erro { margin-top: 5px; font-size: 13px; color: #b3170e; }
.erro:empty { display: none; }
.campo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.visita-form .btn { width: 100%; margin-top: 4px; }
.form-status { font-size: 14px; line-height: 1.4; }
.form-status:empty { display: none; }
@media (min-width: 900px) {
  .visita { padding: 130px var(--g); }
  .visita-grade { grid-template-columns: 1fr 440px; align-items: center; }
  .visita::before { background: linear-gradient(90deg, rgba(14, 15, 19, .9) 20%, rgba(14, 15, 19, .35)); }
}

.rodape { padding: 56px var(--g) 30px; background: var(--noite); color: rgba(255, 255, 255, .74); border-top: 1px solid rgba(255, 255, 255, .08); }
.marca-clara { color: #fff; }
.rodape-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 26px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.rodape-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; padding: 28px 0; }
.rodape h3 { margin-bottom: 10px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: rgba(255, 255, 255, .5); }
.rodape-colunas a { display: block; padding: 5px 0; text-decoration: none; }
.rodape-colunas a:hover { color: #fff; }
.rodape-colunas p + p { margin-top: 8px; }
.rodape-nota { max-width: 72em; font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, .5); }

/* ---------- ficha (dialog) ---------- */
.ficha { width: min(940px, calc(100vw - 20px)); max-width: none; max-height: calc(100vh - 20px); padding: 0; border: 0; border-radius: 22px; background: #fff; color: var(--tinta); overflow: auto; overscroll-behavior: contain; }
@supports (height: 100dvh) { .ficha { max-height: calc(100dvh - 20px); } }
.ficha::backdrop { background: rgba(11, 11, 14, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ficha[open] { display: grid; animation: ficha-entra .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.ficha form { position: absolute; top: 10px; right: 10px; z-index: 2; }
.fechar { width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .15); }
.fechar svg { width: 20px; height: 20px; fill: none; stroke: var(--tinta); stroke-width: 2; }
.ficha-foto { aspect-ratio: 4 / 3; background: #ddd; }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-corpo { padding: 22px 22px 24px; }
.ficha-marca { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--cinza); }
.ficha h2 { margin: 6px 0 4px; font: 800 32px/1.02 var(--sans); font-stretch: 110%; letter-spacing: -.02em; }
.ficha-meta { color: var(--cinza); }
.ficha-dados { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin: 18px 0; padding: 16px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.ficha-dados dt { align-self: center; font: 500 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--cinza); }
.ficha-dados dd { font-weight: 600; }
.ficha-preco { margin-bottom: 16px; font-size: 14px; color: var(--cinza); }
.ficha-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 760px) {
  .ficha[open] { grid-template-columns: 1.15fr 1fr; }
  .ficha-foto { aspect-ratio: auto; min-height: 100%; }
  .ficha-corpo { padding: 34px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- cena 2 em painéis brancos (mesmo modelo da cena 3) ---------- */
.painel-huracan { background: #f6f6f4; color: #14161c; }
.painel-m4 { background: #eef0f3; color: #14161c; }
.numero-fundo { position: absolute; left: 0; right: 0; top: 17%; text-align: center; font: 900 calc(var(--pw) * .6)/.8 var(--cond); color: #e8e7e3; letter-spacing: -.02em; opacity: var(--nf2, 1); transform: translate3d(0, calc((1 - var(--nf2, 1)) * 6vh), 0); }
.carro-huracan { top: 40%; }
.carro-huracan::after { left: 10%; right: 12%; bottom: 0; }
/* carros que olham para a esquerda entram pela direita (de frente) */
.carro-m4, .carro-f8b { transform: translate3d(calc((1 - var(--c, 1)) * 120vw), 0, 0); }
.carro-m4 { top: 44%; }
.painel-f8 .l1 img { object-position: 50% 45%; }
.painel-f8 .l2 img { object-position: 30% 40%; }
.painel-f8 .l3 img { object-position: 75% 50%; }
.carro-f8b { top: 47%; }
@media (min-aspect-ratio: 1/1) and (min-width: 760px) {
  .numero-fundo { left: 3vw; right: auto; top: 8%; text-align: left; font-size: 46vw; }
  .carro-huracan { left: 4vw; width: 56vw; top: 33%; }
  .carro-m4 { left: 3vw; width: 56vw; top: 44%; }
  .painel-m4 .painel-texto h2 { font-size: clamp(32px, 3.1vw, 60px); }
  .carro-f8b { left: 3vw; width: 60vw; top: 46%; }
}
/* a foto da Huracán vem com o bico caído: endireita um pouco */
.carro-huracan img { transform: rotate(-7deg); transform-origin: 40% 70%; }