/* Prime Automóveis — direção "Céu da Sibipirunas"
   Geologica (eixos wght + slnt, o itálico do "prime") + Golos Text.
   Azul-noite do logo, vermelho do traço, prata do cromado, céu real da loja.
   Ver docs/COMPARACAO.md e docs/MOTION.md. */

@font-face {
  font-family: "Geologica";
  src: url("../fonts/geologica-var.woff2") format("woff2-variations"), url("../fonts/geologica-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: oblique 0deg 12deg;
  font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-var.woff2") format("woff2-variations"), url("../fonts/golos-text-var.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --noite: #0a003c;
  --noite-2: #150b55;
  --noite-3: #07002a;
  --fachada: #0f1014;
  --vermelho: #e0141f;
  --vermelho-escuro: #b30f19;
  --azul: #4f86ea;
  --azul-claro: #a9bdf0;
  --nuvem: #f2f4f9;
  --branco: #ffffff;
  --tinta: #12112b;
  --tinta-2: #4a4c66;
  --linha: #dde1ec;
  --verde: #12884a;
  --verde-2: #0e733e;
  --cromo: linear-gradient(180deg, #ffffff 0%, #e4e8ef 38%, #9aa3b4 52%, #d9dee7 70%, #ffffff 100%);
  --raio: 6px;
  --max: 1240px;
  --lado: clamp(16px, 4vw, 40px);
  --menu: 72px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-saida: cubic-bezier(.7, 0, .84, 0);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--nuvem);
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
.so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.envolve { width: min(100% - var(--lado) * 2, var(--max)); margin-inline: auto; }

/* ---------- títulos: a palavra ganha arrancada (eixos da Geologica) ---------- */
.titulo {
  font-family: "Geologica", sans-serif;
  font-weight: 800;
  font-style: oblique 12deg;
  font-variation-settings: "wght" 820, "slnt" -12;
  letter-spacing: -.012em;
  line-height: .98;
  margin: 0;
  text-wrap: balance;
}
.js [data-arranque] {
  font-variation-settings: "wght" 260, "slnt" 0;
  letter-spacing: .03em;
  opacity: .15;
  transition: font-variation-settings 1.1s var(--ease), letter-spacing 1.1s var(--ease), opacity .7s var(--ease);
}
.js [data-arranque].is-pronto { font-variation-settings: "wght" 820, "slnt" -12; letter-spacing: -.012em; opacity: 1; }
.rotulo {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6em;
  font: 600 13px/1.2 "Golos Text", sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--vermelho-escuro);
  margin: 0 0 14px;
}
.rotulo::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; transform: skewX(-24deg); }

/* ---------- botões: o traço vermelho passa inclinado ---------- */
.botao {
  --cor: var(--branco);
  --fundo: var(--vermelho);
  --passa: var(--vermelho-escuro);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px; padding: 12px 24px;
  border: 0; border-radius: 6px;
  font: 650 16px/1.1 "Golos Text", sans-serif;
  color: var(--cor); background: var(--fundo);
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.botao::after {
  content: ""; position: absolute; inset: 0 -30%; z-index: -1;
  background: var(--passa);
  transform: translateX(-105%) skewX(-24deg);
  transition: transform .45s var(--ease);
}
.botao:hover::after, .botao:focus-visible::after { transform: translateX(0) skewX(-24deg); }
.botao:active { transform: scale(.98); }
.botao--zap { --fundo: var(--verde); --passa: var(--verde-2); }
.botao--claro { --cor: var(--noite); --fundo: var(--branco); --passa: #dfe5f3; }
.botao--contorno { --cor: var(--noite); --fundo: var(--branco); --passa: #dfe5f3; }
.botao--contorno-escuro { --cor: var(--branco); --fundo: var(--noite); --passa: #1c1170; }
.botao--pequeno { min-height: 42px; padding: 9px 16px; font-size: 15px; }
.link-seta { display: inline-flex; align-items: center; gap: .45em; font-weight: 650; color: var(--noite); text-decoration: none; border-bottom: 2px solid rgba(224,20,31,.35); padding-bottom: 2px; transition: border-color .25s; }
.link-seta:hover { border-color: var(--vermelho); }

/* ---------- abertura (vídeo do logo, só na entrada direta ou no refresh) ---------- */
.abertura { display: none; }
/* sai para cima com a borda de baixo reta e o risco vermelho */
.com-abertura .abertura { display: block; position: fixed; inset: 0; z-index: 100; background: #0a003c; box-shadow: 0 3px 0 var(--vermelho), 0 0 24px 2px rgba(224,20,31,.45), 0 30px 60px -20px rgba(7,0,42,.7); cursor: pointer; overflow: hidden; transition: transform .9s cubic-bezier(.7, 0, .2, 1); will-change: transform; }
.abertura.is-saindo { transform: translateY(-104%); pointer-events: none; }
.abertura__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.7, 0, .2, 1), opacity .9s ease; }
.abertura.is-saindo .abertura__video { transform: translateY(14vh) scale(.96); opacity: .5; }
html.abertura-ativa, html.abertura-ativa body { overflow: hidden; }

/* ---------- menu ---------- */
.menu {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--menu);
  color: var(--branco);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.menu.is-solido { background: var(--noite); box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 10px 30px -18px rgba(0,0,0,.6); }
.menu__dentro { height: 100%; display: flex; align-items: center; gap: 24px; }
.menu__logo { display: block; flex: none; }
.menu__logo img { height: 50px; width: auto; }
.menu nav { margin-left: auto; }
.menu__links { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.menu__links a { position: relative; display: block; padding: 10px 14px; font-weight: 550; font-size: 15.5px; color: rgba(255,255,255,.86); text-decoration: none; transition: color .2s; }
.menu__links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--vermelho); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.menu__links a:hover, .menu__links a[aria-current="page"] { color: var(--branco); }
.menu__links a:hover::after, .menu__links a[aria-current="page"]::after { transform: scaleX(1); }
.menu__simular { flex: none; }
/* Instagram colorido ao lado do Simular (regra do projeto, 04/11/2026) */
.menu__insta { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 6px; margin-left: 4px; transition: transform .25s var(--ease), background-color .25s; }
.menu__insta svg { width: 28px; height: 28px; display: block; }
.menu__insta:hover { transform: translateY(-2px); }
.menu__insta:focus-visible { outline-offset: 4px; }
/* Cartão digital colado ao Instagram (pedido de Edelson, 07/11/2026) */
.menu__cartao { margin-left: -18px; }
.menu__abrir { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; background: none; color: var(--branco); cursor: pointer; align-items: center; justify-content: center; }
.menu__abrir .ico { width: 28px; height: 28px; }
@media (max-width: 900px) {
  .menu__links, .menu__simular--largo { display: none; }
  .menu__abrir { display: inline-flex; margin-left: 10px; }
  .menu__insta { margin-left: auto; }
  .menu__cartao { margin-left: -24px; }
  .menu__logo img { height: 42px; }
}
.gaveta-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--noite);
  color: var(--branco);
  display: flex; flex-direction: column;
  padding: 16px var(--lado) 32px;
  visibility: hidden; opacity: 0;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.gaveta-menu.is-aberta { visibility: visible; opacity: 1; transition: opacity .3s var(--ease); }
.gaveta-menu__topo { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.gaveta-menu__topo img { height: 42px; width: auto; }
.gaveta-menu__fechar { width: 46px; height: 46px; border: 0; background: none; color: var(--branco); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.gaveta-menu__fechar .ico { width: 26px; height: 26px; }
.gaveta-menu ul { list-style: none; margin: 28px 0 0; padding: 0; }
.gaveta-menu li { overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.1); }
.gaveta-menu li a {
  display: block; padding: 16px 0;
  font-family: "Geologica", sans-serif; font-size: 34px; line-height: 1.1;
  font-variation-settings: "wght" 780, "slnt" -12;
  color: var(--branco); text-decoration: none;
  transform: translateY(105%);
  transition: transform .55s var(--ease);
}
.gaveta-menu.is-aberta li a { transform: none; }
.gaveta-menu.is-aberta li:nth-child(2) a { transition-delay: .05s; }
.gaveta-menu.is-aberta li:nth-child(3) a { transition-delay: .1s; }
.gaveta-menu.is-aberta li:nth-child(4) a { transition-delay: .15s; }
.gaveta-menu .botao { margin-top: 28px; }

/* ---------- topo ---------- */
.topo {
  position: relative;
  background: radial-gradient(120% 90% at 85% 0%, #1e1170 0%, var(--noite) 48%, var(--noite-3) 100%);
  color: var(--branco);
  padding-top: var(--menu);
  overflow: clip;
}
.topo__grade {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  align-items: end;
  min-height: calc(100svh - var(--menu));
  max-height: 900px;
}
.topo__texto { position: relative; z-index: 2; text-shadow: 0 2px 18px rgba(7,0,42,.6); padding: clamp(32px, 6vh, 72px) 0 clamp(36px, 7vh, 80px); }
.topo__olho { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--azul-claro); }
.topo__olho::before { content: ""; width: 34px; height: 2px; background: var(--vermelho); transform: skewX(-24deg); }
.topo h1 { font-size: clamp(50px, 6.6vw, 104px); color: var(--branco); text-shadow: none; }
.topo h1 .ponto { color: var(--vermelho); }
.topo__lead { max-width: 46ch; margin: 26px 0 0; font-size: clamp(17px, 1.35vw, 20px); color: #cfd5ea; }
.topo__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.janela { position: relative; align-self: stretch; margin-top: 28px; }
.janela__foto {
  position: absolute; inset: 0;
  background: #18142e url("../img/fachada-g-1280.webp") 50% 40% / cover no-repeat;
}
.janela__foto::after { content: ""; position: absolute; inset: 0; }
/* computador: a fachada ocupa o topo inteiro, na largura toda; o texto fica embaixo à esquerda, longe do letreiro */
@media (min-width: 961px) {
  .janela { position: absolute; inset: 0; margin: 0; z-index: 0; }
  /* foto ampliada a partir da esquerda: o letreiro vai para a direita e não fica atrás do título */
  .janela__foto { background-size: max(118%, 140vh) auto; background-position: 0% 38%; }
  .janela__foto::after { background:
    linear-gradient(90deg, rgba(10,0,60,.8) 0%, rgba(10,0,60,.66) 36%, rgba(10,0,60,.34) 58%, rgba(10,0,60,0) 82%),
    linear-gradient(180deg, rgba(10,0,60,.5) 0%, rgba(10,0,60,0) 18%),
    linear-gradient(0deg, rgba(10,0,60,.4) 0%, rgba(10,0,60,0) 24%); }
  .topo__grade { grid-template-columns: minmax(0, 780px); }
  .topo__texto { padding-bottom: clamp(24px, 5vh, 56px); }
  .topo h1 { font-size: clamp(46px, min(5.6vw, 10vh), 94px); }
  .topo__lead { max-width: 44ch; }
  .topo .janela__placa { bottom: 24px; right: max(var(--lado), calc((100vw - var(--max)) / 2)); }
}
.janela__placa { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 4px; background: rgba(15,16,20,.78); font-size: 14px; font-weight: 550; }
.janela__placa .ico { color: var(--vermelho); }
.js .janela__foto { transform: scale(1.06); opacity: 0; }
.js .is-carregado .janela__foto { transform: none; opacity: 1; transition: transform 1.6s var(--ease), opacity .9s var(--ease); }

.status-ponto { width: 9px; height: 9px; border-radius: 50%; background: #8b90a3; flex: none; }
.is-aberto .status-ponto { background: #2fd27a; box-shadow: 0 0 0 4px rgba(47,210,122,.18); }

@media (max-width: 960px) {
  .topo__grade { grid-template-columns: 1fr; min-height: 0; max-height: none; }
  .janela { order: -1; height: min(54svh, 460px); margin: 0 calc(var(--lado) * -1); }
  .janela__foto { background-image: url("../img/fachada-g-1000.webp"); background-position: 50% 42%; }
  .janela__foto::after { background: linear-gradient(0deg, var(--noite) 0%, rgba(10,0,60,0) 38%), linear-gradient(180deg, rgba(10,0,60,.75) 0%, rgba(10,0,60,0) 30%); }
    .janela__placa { right: auto; left: 16px; bottom: 20px; }
  .topo h1 { margin-right: 0; }
  .topo__texto { padding-top: 8px; }
}
@media (max-width: 600px) {
  .janela { height: 46svh; }
  .janela__foto { background-image: url("../img/fachada-g-700.webp"); background-position: 50% 40%; }
  .topo__acoes .botao { flex: 1 1 100%; }
}

/* ---------- linha de chegada: risco vermelho que atravessa a borda da seção ---------- */
.com-linha { position: relative; }
/* a entrada pela direita não pode alargar a página */
main > section, .rodape { overflow-x: clip; }
.chegada { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 2; pointer-events: none; }
.chegada__risco { position: absolute; left: 0; top: -1px; width: 100%; height: 3px; background: var(--vermelho); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 12px rgba(224, 20, 31, .55); }
.chegada__rastro { position: absolute; left: 0; width: 100%; height: 1px; transform: translate3d(-100%, 0, 0); }
.chegada__rastro--1 { top: 9px; background: linear-gradient(90deg, rgba(224,20,31,0) 0%, rgba(224,20,31,.55) 70%, rgba(255,255,255,.9) 100%); }
.chegada__rastro--2 { top: -11px; background: linear-gradient(90deg, rgba(169,189,240,0) 20%, rgba(169,189,240,.6) 85%, rgba(255,255,255,.8) 100%); }
.chegada__cabeca { position: absolute; left: 0; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle, #fff 0 30%, rgba(255, 190, 190, .9) 45%, rgba(224, 20, 31, 0) 72%);
  box-shadow: 0 0 16px 6px rgba(224, 20, 31, .55), 0 0 44px 16px rgba(224, 20, 31, .2); }

/* ---------- passagem: blocos chegam da direita saindo de um desfoque de velocidade ---------- */
.js [data-passa] { opacity: 0; transform: translate3d(64px, 0, 0); filter: blur(8px); transition: opacity .7s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s), filter .8s var(--ease) var(--d, 0s); }
.js [data-passa].is-visto { opacity: 1; transform: none; filter: none; }

/* ---------- rastros de luz contínuos nas áreas escuras ---------- */
[data-rastros] { position: relative; isolation: isolate; }
.rastros { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.rastros span { position: absolute; left: 0; width: var(--larg, 30%); height: 1px; background: linear-gradient(90deg, rgba(224,20,31,0), rgba(224,20,31,.5) 75%, rgba(255,255,255,.75)); opacity: .55; transform: translate3d(120vw, 0, 0); animation: rastro var(--dur, 7s) linear var(--atraso, 0s) infinite; animation-play-state: paused; }
.rastros span.frio { background: linear-gradient(90deg, rgba(169,189,240,0), rgba(169,189,240,.45) 75%, rgba(255,255,255,.7)); }
.is-tela > .rastros span { animation-play-state: running; }
@keyframes rastro { from { transform: translate3d(120vw, 0, 0); } to { transform: translate3d(-60vw, 0, 0); } }

/* ---------- vitrine (estoque da home) ---------- */
.vitrine { background: var(--nuvem); padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); }
.secao-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: 28px; }
.secao-topo h2 { font-size: clamp(38px, 5.2vw, 72px); color: var(--noite); }
.secao-topo__lado { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.selo-atualizado { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 4px; background: #e6eaf5; color: var(--tinta-2); font-size: 13.5px; font-weight: 550; }
.selo-atualizado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }

.filtros { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.chips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 8px; background: #e5e9f4; width: fit-content; max-width: 100%; }
.chips[hidden] { display: none; }
.chips__marca { position: absolute; top: 0; left: 0; height: 0; border-radius: 5px; background: var(--noite); box-shadow: 0 6px 16px -8px rgba(10,0,60,.6); transition: transform .45s var(--ease), width .45s var(--ease), height .45s var(--ease); pointer-events: none; }
.chip { position: relative; z-index: 1; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 5px; background: transparent; font-weight: 600; font-size: 15px; color: var(--tinta-2); cursor: pointer; transition: color .3s; white-space: nowrap; }
.chip[aria-pressed="true"] { color: var(--branco); }
.chip:hover:not([aria-pressed="true"]) { color: var(--noite); }
.chip__qtd { font-weight: 500; opacity: .6; margin-left: 4px; font-size: 13px; }
@media (max-width: 700px) {
  .chips { border-radius: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .chips::-webkit-scrollbar { display: none; }
}

.trilho-moldura { position: relative; }
.vitrine-barra { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.vitrine-barra .chips { min-width: 0; }
@media (max-width: 700px) { .vitrine-barra { flex-wrap: wrap; } .vitrine-barra .trilho-setas { margin-left: auto; } }
.trilho { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 2px 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
.trilho::-webkit-scrollbar { display: none; }
.trilho > .carro { flex: 0 0 calc((100% - 18px * 3) / 4); scroll-snap-align: start; }
@media (max-width: 1180px) { .trilho > .carro { flex-basis: calc((100% - 18px * 2) / 3); } }
@media (max-width: 820px) { .trilho > .carro { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 560px) { .trilho > .carro { flex-basis: 86%; } }
.trilho-setas { display: flex; gap: 8px; }
.seta { width: 46px; height: 46px; border-radius: 4px; border: 0; background: var(--noite); color: var(--branco); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.seta:hover { background: var(--vermelho); }
.seta .ico { width: 20px; height: 20px; }
.seta--volta .ico { transform: rotate(180deg); }
.vazio { padding: 40px 24px; border-radius: var(--raio); background: var(--branco); text-align: center; color: var(--tinta-2); }

/* card do carro */
.carro { position: relative; display: flex; flex-direction: column; background: var(--branco); border-radius: var(--raio); box-shadow: 0 1px 0 var(--linha), 0 18px 40px -30px rgba(10,0,60,.45); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.carro:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--linha), 0 26px 50px -28px rgba(10,0,60,.55); }
.carro__foto { position: relative; aspect-ratio: 4 / 3; background: var(--noite); overflow: hidden; }
.carro__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.carro:hover .carro__foto img { transform: scale(1.04); }
.carro__tipo { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--linha); color: #7a7f96; font-weight: 600; letter-spacing: .1em; }
.sem-foto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(100% 80% at 50% 0%, #1d1269, var(--noite)); color: #c3cbe6; font-size: 14px; font-weight: 550; }
.sem-foto img { width: 46%; height: auto; opacity: .9; }
.carro__corpo { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; flex: 1; }
.carro__marca { margin: 0; font-size: 12.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--vermelho-escuro); }
.carro__nome { margin: -4px 0 0; font-family: "Geologica", sans-serif; font-variation-settings: "wght" 780, "slnt" -12; font-size: 25px; line-height: 1.05; color: var(--noite); }
.carro__versao { margin: -4px 0 0; font-size: 14.5px; color: var(--tinta-2); }
.carro__dados { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 10px 0 0; border-top: 1px dashed var(--linha); font-size: 14px; color: var(--tinta-2); }
.carro__dados div { display: flex; gap: 5px; align-items: baseline; }
.carro__dados dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: #8a8ea4; }
.carro__dados dd { margin: 0; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.carro__preco { margin: auto 0 0; padding-top: 6px; font-family: "Geologica", sans-serif; font-variation-settings: "wght" 800, "slnt" -10; font-size: 28px; line-height: 1; color: var(--noite); font-variant-numeric: tabular-nums; }
.carro__preco small { display: block; margin-bottom: 4px; font-family: "Golos Text", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8a8ea4; }
.carro__acoes { display: flex; gap: 8px; }
.carro__acoes .botao { flex: 1; min-height: 44px; padding: 10px 12px; font-size: 15px; }
.carro__acoes .botao--simular { flex: 0 0 auto; --cor: var(--noite); --fundo: #eef1f8; --passa: #dfe5f3; }

/* hodômetro: os números do km rodam como no painel */
.odo { display: inline-flex; overflow: hidden; height: 1.2em; line-height: 1.2em; vertical-align: bottom; }
.odo__col { display: flex; flex-direction: column; transition: transform 1.3s var(--ease); }
.odo__col span { height: 1.2em; }
.odo__sep { display: inline-block; }

/* ---------- tem um modelo em mente: card sólido ---------- */
.mente { background: var(--nuvem); padding: clamp(16px, 3vw, 40px) 0 clamp(72px, 9vw, 120px); }
.mente__dentro { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; padding: clamp(32px, 5vw, 64px); border-radius: var(--raio); background: var(--noite); color: var(--branco); box-shadow: 0 30px 60px -40px rgba(10, 0, 60, .7); }
.mente h2 { font-size: clamp(34px, 4.6vw, 64px); }
.mente p { margin: 16px 0 0; font-size: clamp(17px, 1.3vw, 19px); color: #d3d9ee; max-width: 52ch; }
@media (max-width: 760px) { .mente__dentro { grid-template-columns: 1fr; } .mente .botao { width: 100%; } }

/* ---------- além da compra ---------- */
.caminhos { background: var(--noite); color: var(--branco); padding: clamp(64px, 9vw, 120px) 0; }
.caminhos .rotulo { color: #ff6b72; }
.caminhos__grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.caminhos h2 { font-size: clamp(38px, 5vw, 70px); position: sticky; top: calc(var(--menu) + 32px); }
.caminhos h2 + p { color: #c7cee6; max-width: 40ch; margin-top: 18px; }
.caminho { position: relative; padding: 34px 0 38px; }
.caminho::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--vermelho); transform-origin: 0 50%; transform: scaleX(var(--linha-x, 1)); transition: transform 1s var(--ease); }
.caminho::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.14); z-index: -1; }
.js .caminho { --linha-x: 0; }
.js .caminho.is-visto { --linha-x: 1; }
.caminho__num { font-family: "Geologica", sans-serif; font-variation-settings: "wght" 300, "slnt" -12; font-size: 15px; letter-spacing: .1em; color: #ff8a90; }
.caminho h3 { margin: 8px 0 10px; font-family: "Geologica", sans-serif; font-variation-settings: "wght" 760, "slnt" -12; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; }
.caminho p { margin: 0 0 22px; color: #c7cee6; max-width: 52ch; }
@media (max-width: 860px) { .caminhos__grade { grid-template-columns: 1fr; } .caminhos h2 { position: static; } }

/* ---------- avaliações ---------- */
.avaliar { background: var(--branco); padding: clamp(64px, 8vw, 110px) 0; }
.avaliar__caixa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.avaliar h2 { font-size: clamp(36px, 4.8vw, 66px); color: var(--noite); }
.avaliar__nota { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 20px 0 0; color: var(--tinta-2); font-size: 16px; }
.avaliar__nota strong { font-family: "Geologica", sans-serif; font-variation-settings: "wght" 800, "slnt" -10; font-size: 40px; line-height: 1; color: var(--noite); }
.estrelas { display: inline-flex; gap: 3px; color: #f2b01e; }
.estrelas .ico { width: 22px; height: 22px; }
/* carrossel das avaliações: leque 3D. O relato da vez de frente; os vizinhos girados para os lados, mais fundos */
.leque-barra { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 2px solid var(--linha); }
html:not(.js) .leque-barra { display: none; }
.leque-conta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; color: #7a7f96; font-weight: 600; font-size: 15px; }
.leque-conta strong { font-family: "Geologica", sans-serif; font-variation-settings: "wght" 800, "slnt" -10; font-size: 44px; line-height: 1; color: var(--vermelho); font-variant-numeric: tabular-nums; }
.leque-conta__nome { margin-left: 10px; font-family: "Geologica", sans-serif; font-variation-settings: "wght" 650, "slnt" -10; font-size: 19px; color: var(--noite); }
.relatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.relato { display: flex; }
.js .relatos { display: block; position: relative; height: var(--alto, 420px); perspective: 1500px; perspective-origin: 50% 45%; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.js .relatos.is-arrasto { cursor: grabbing; }
.js .relato { --w: min(580px, 46%); position: absolute; top: 0; left: 50%; width: var(--w); margin-left: calc(var(--w) / -2); min-height: var(--alto, 0); backface-visibility: hidden; transition: transform .9s var(--ease), opacity .4s var(--ease); }
.js .relato:not(.is-atual) { cursor: pointer; }
.relato__in { position: relative; flex: 1; display: flex; flex-direction: column; padding: 34px 32px 28px; border-radius: var(--raio); background: var(--nuvem); overflow: hidden; transition: background-color .5s var(--ease); }
.relato.is-atual .relato__in { background: var(--noite); box-shadow: 0 30px 60px -30px rgba(10,0,60,.55); }
.relato.is-atual blockquote p { color: #eef1fb; }
.relato.is-atual .relato__autor { color: var(--branco); }
.relato.is-atual .relato__autor span { color: #a7aec8; }
.relato .relato__in::before { content: "\201C"; position: absolute; right: 22px; top: 4px; font-family: "Geologica", sans-serif; font-variation-settings: "wght" 800, "slnt" -12; font-size: 110px; line-height: 1; color: var(--vermelho); opacity: .14; pointer-events: none; }
.relato.is-atual .relato__in::before { opacity: .5; }
.relato blockquote { flex: 1; }
@media (max-width: 960px) { .js .relato { --w: min(520px, 62%); } }
@media (max-width: 700px) { .js .relato { --w: 84%; } .relato__in { padding: 28px 24px 24px; } .leque-conta strong { font-size: 36px; } .leque-conta__nome { font-size: 17px; } }
.relato__linha { position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--vermelho); transform-origin: 0 50%; }
.relato__estrelas { display: inline-flex; gap: 2px; color: #f2b01e; }
.relato__estrelas .ico { width: 17px; height: 17px; }
.relato blockquote { margin: 10px 0 14px; }
.relato blockquote p { margin: 0; font-size: 17.5px; line-height: 1.6; color: var(--tinta); transition: color .4s; }
.relato__autor { margin: 0; font-weight: 700; color: var(--noite); transition: color .4s; }
.relato__autor span { margin-left: 8px; font-weight: 500; font-size: 13.5px; color: #7a7f96; }
.js .relato .relato__linha { transform: scaleX(0); transition: transform 1s var(--ease) calc(var(--d, 0s) + .3s); }
.js .relato .relato__estrelas .ico { opacity: .2; transform: translateY(5px) rotate(-14deg); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .relato.is-visto .relato__linha { transform: none; }
.js .relato.is-visto .relato__estrelas .ico { opacity: 1; transform: none; }
.js .relato.is-visto .relato__estrelas .ico:nth-child(2) { transition-delay: .45s; }
.js .relato.is-visto .relato__estrelas .ico:nth-child(3) { transition-delay: .52s; }
.js .relato.is-visto .relato__estrelas .ico:nth-child(4) { transition-delay: .59s; }
.js .relato.is-visto .relato__estrelas .ico:nth-child(5) { transition-delay: .66s; }
.js .relato.is-visto .relato__estrelas .ico:nth-child(1) { transition-delay: .38s; }
@media (max-width: 760px) { .avaliar__caixa { grid-template-columns: 1fr; } .avaliar__caixa .botao { width: 100%; } }

/* ---------- onde fica ---------- */
.onde { background: var(--nuvem); padding: clamp(64px, 8vw, 110px) 0; }
.onde__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.onde h2 { font-size: clamp(36px, 4.8vw, 66px); color: var(--noite); }
.onde__endereco { margin: 18px 0 24px; font-size: 19px; color: var(--tinta); font-style: normal; }
.horario { margin: 0 0 26px; padding: 0; list-style: none; max-width: 420px; }
.horario li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: 15.5px; color: var(--tinta-2); }
.horario li span:last-child { font-variant-numeric: tabular-nums; text-align: right; color: var(--tinta); font-weight: 550; }
.horario li.is-hoje { color: var(--noite); font-weight: 700; }
.horario li.is-hoje span:first-child::after { content: " · hoje"; color: var(--vermelho-escuro); font-weight: 600; }
.status { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 7px 13px; border-radius: 4px; background: #e6eaf5; font-weight: 600; font-size: 14.5px; color: var(--tinta); }
.onde__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.mapa { position: relative; aspect-ratio: 4 / 3; border-radius: var(--raio); overflow: hidden; background: #dfe3ee; box-shadow: 0 30px 60px -40px rgba(10,0,60,.6); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa__pino { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 6px 12px; border-radius: 3px; background: var(--noite); color: var(--branco); font-size: 13px; font-weight: 600; pointer-events: none; }
@media (max-width: 860px) { .onde__grade { grid-template-columns: 1fr; } .mapa { max-width: 520px; } .onde__acoes .botao { flex: 1 1 100%; } }

/* ---------- rodapé ---------- */
.rodape { background: var(--noite-3); color: #c4cae0; padding: 64px 0 28px; font-size: 15.5px; }
.rodape__grade { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.rodape img { height: 64px; width: auto; margin-bottom: 14px; }
.rodape h3 { margin: 0 0 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #8e95b3; font-weight: 600; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rodape a { color: #e2e6f3; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 30px; }
.rodape a:hover { color: var(--branco); text-decoration: underline; text-underline-offset: 3px; }
.rodape address { font-style: normal; }
.rodape__redes { display: flex; gap: 6px; margin: 10px 0 0 -10px; }
.rodape__redes a { width: 44px; height: 44px; justify-content: center; color: #e2e6f3; transition: color .2s, transform .2s; }
.rodape__redes a .ico { width: 24px; height: 24px; }
.rodape__redes a:hover { color: var(--branco); transform: translateY(-2px); text-decoration: none; }
.rodape__fim { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 14px; color: #8e95b3; }
@media (max-width: 900px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rodape__grade { grid-template-columns: 1fr; } }

/* ---------- voltar ao topo e guia de rolagem ---------- */
.ao-topo { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 50px; height: 50px; border-radius: 4px; border: 0; background: var(--vermelho); color: var(--branco); box-shadow: 0 12px 28px -12px rgba(224,20,31,.7); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .2s; }
.ao-topo.is-visivel { opacity: 1; transform: none; pointer-events: auto; }
.ao-topo:hover { background: var(--vermelho-escuro); }
.ao-topo .ico { width: 22px; height: 22px; transform: rotate(-90deg); }
.guia { position: fixed; top: 0; right: 3px; z-index: 70; width: 7px; border-radius: 99px; background: linear-gradient(180deg, var(--vermelho), #9aa3b4); opacity: .78; cursor: grab; touch-action: none; transition: opacity .2s, width .2s; }
.guia:hover, .guia.is-arrastando { opacity: 1; width: 9px; }
.guia.is-arrastando { cursor: grabbing; }
@media (pointer: coarse) { .guia { display: none; } }

/* ---------- simular (gaveta) ---------- */
.simular { width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--branco); color: var(--tinta); box-shadow: -20px 0 60px -20px rgba(7,0,42,.6); }
.simular::backdrop { background: rgba(7,0,42,.6); }
.simular[open] { animation: entra-lado .45s var(--ease); }
@keyframes entra-lado { from { transform: translateX(100%); } to { transform: none; } }
.simular__form { display: flex; flex-direction: column; min-height: 100%; }
.simular__cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 26px 6px; }
.simular__cabeca h2 { font-size: 34px; color: var(--noite); }
.simular__cabeca p { margin: 8px 0 0; color: var(--tinta-2); font-size: 15px; }
.simular__fechar { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--noite); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.simular__campos { display: grid; gap: 16px; padding: 18px 26px; }
.campo { display: grid; gap: 6px; }
.campo label, .campo legend { font-size: 14px; font-weight: 650; color: var(--noite); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid #cfd5e5; border-radius: 6px; background: var(--branco); font-size: 16px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(79,134,234,.25); }
.campo small { color: var(--tinta-2); font-size: 13px; }
.campo fieldset, fieldset.campo { border: 0; padding: 0; margin: 0; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes label { position: relative; }
.opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.opcoes span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border-radius: 4px; background: #eef1f8; font-weight: 600; font-size: 15px; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.opcoes input:checked + span { background: var(--noite); border-color: var(--noite); color: var(--branco); }
.opcoes input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }
.simular__pe { margin-top: auto; padding: 18px 26px 26px; border-top: 1px solid var(--linha); background: #f7f8fc; }
.simular__pe .botao { width: 100%; }
.simular__pe small { display: block; margin-top: 10px; color: var(--tinta-2); font-size: 13px; text-align: center; }

/* ---------- páginas internas ---------- */
.pagina-topo { background: radial-gradient(110% 120% at 90% 0%, #1e1170 0%, var(--noite) 55%, var(--noite-3) 100%); color: var(--branco); padding: calc(var(--menu) + clamp(40px, 6vw, 72px)) 0 clamp(64px, 8vw, 104px); }
.pagina-topo h1 { font-size: clamp(44px, 6.4vw, 92px); color: transparent; background: var(--cromo); -webkit-background-clip: text; background-clip: text;  background-size: 100% .98em; background-repeat: repeat-y;}
.pagina-topo p { margin: 18px 0 0; max-width: 56ch; color: #cfd5ea; font-size: 18px; }
.pagina-topo .rotulo { color: #ff8a90; }
.estoque-pagina { background: var(--nuvem); padding: 40px 0 80px; }
.busca { position: relative; max-width: 560px; margin-bottom: 18px; }
.busca input { width: 100%; min-height: 54px; padding: 12px 18px 12px 50px; border: 1.5px solid #cfd5e5; border-radius: 6px; background: var(--branco); font-size: 16.5px; }
.busca input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(79,134,234,.25); }
.busca .ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #8a8ea4; width: 20px; height: 20px; }
.barra-estoque { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 6px 0 22px; }
.barra-estoque__qtd { font-weight: 600; color: var(--tinta-2); }
.ordem { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--tinta-2); }
.ordem select { min-height: 44px; padding: 8px 36px 8px 14px; border: 1.5px solid #cfd5e5; border-radius: 6px; background: var(--branco); font-weight: 600; color: var(--noite); }
.grade-carros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1020px) { .grade-carros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grade-carros { grid-template-columns: 1fr; } }
.mente--fim { padding-top: 0; }

/* ---------- card inteiro leva à página do carro; botões ficam por cima ---------- */
.carro__link { color: inherit; text-decoration: none; }
.carro__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.carro__link:focus-visible { outline: none; }
.carro:has(.carro__link:focus-visible) { outline: 3px solid var(--azul); outline-offset: 3px; }
.carro__acoes { position: relative; z-index: 2; }

/* ---------- página do carro ---------- */
.ficha-topo { background: radial-gradient(110% 120% at 90% 0%, #1e1170 0%, var(--noite) 55%, var(--noite-3) 100%); color: var(--branco); padding: calc(var(--menu) + 28px) 0 clamp(48px, 6vw, 80px); }
.trilha { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 14px; color: #a9b2d4; }
.trilha li + li::before { content: "/"; margin-right: 6px; color: #5d6290; }
.trilha a { color: #cfd5ea; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.2); }
.trilha a:hover { border-color: var(--vermelho); }
.trilha [aria-current] { color: var(--branco); font-weight: 600; }
.ficha { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ficha__vazio { grid-column: 1 / -1; padding: 40px 0; }
.ficha__vazio h1 { font-size: clamp(34px, 5vw, 60px); }
.ficha__vazio p { margin: 14px 0 26px; color: #cfd5ea; font-size: 18px; }

.galeria { min-width: 0; }
.galeria__palco { position: relative; aspect-ratio: 4 / 3; border-radius: var(--raio); overflow: hidden; background: var(--noite-3); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 70px -40px rgba(0,0,0,.9); }
/* risco vermelho inclinado no canto, como o fio das outras peças da Prime */
.galeria__palco::before { content: ""; position: absolute; left: 18px; top: 0; z-index: 3; width: 64px; height: 4px; background: var(--vermelho); transform: skewX(-24deg); box-shadow: 0 0 14px rgba(224,20,31,.5); pointer-events: none; }
.galeria__trilho { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.galeria__trilho::-webkit-scrollbar { display: none; }
.galeria__trilho:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; }
.galeria__trilho img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; scroll-snap-stop: always; }
.galeria__seta { position: absolute; top: 50%; right: 12px; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px; border: 0; border-radius: 50%; background: rgba(7,0,42,.72); color: var(--branco); cursor: pointer; transition: background .2s; }
.galeria__seta:hover { background: var(--vermelho); }
.galeria__seta:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.galeria__seta--volta { right: auto; left: 12px; }
.galeria__seta--volta .ico { transform: scaleX(-1); }
.galeria__conta { position: absolute; right: 12px; bottom: 12px; z-index: 2; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(7,0,42,.72); font-size: 14px; font-variant-numeric: tabular-nums; color: #cfd5ea; }
.galeria__conta b { color: var(--branco); }
.galeria__miniaturas { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.galeria__miniaturas button { flex: 0 0 auto; width: 84px; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--noite-2); opacity: .55; cursor: pointer; box-shadow: inset 0 -3px 0 transparent; transition: opacity .2s, box-shadow .2s; }
.galeria__miniaturas button:hover { opacity: .85; }
.galeria__miniaturas button[aria-current] { opacity: 1; box-shadow: 0 0 0 2px var(--vermelho); }
.galeria__miniaturas button:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.galeria__miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.ficha__info { min-width: 0; }
.ficha__info .carro__marca { color: #ff8a90; }
.ficha__nome { margin: 6px 0 0; font-size: clamp(40px, 5vw, 68px); color: transparent; background: var(--cromo); -webkit-background-clip: text; background-clip: text; background-size: 100% .98em; background-repeat: repeat-y; overflow-wrap: anywhere; }
.ficha__versao { margin: 10px 0 0; font-size: 18px; color: #cfd5ea; }
.ficha__preco { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.14); font-size: clamp(34px, 4vw, 44px); color: var(--branco); }
.ficha__preco small { color: #a9b2d4; }
.ficha__dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px 18px; margin: 22px 0 0; }
.ficha__dados dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a9b2d4; }
.ficha__dados dd { margin: 3px 0 0; font-size: 17px; font-weight: 650; color: var(--branco); font-variant-numeric: tabular-nums; }
.ficha__botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ficha__botoes .botao { flex: 1 1 180px; }
.ficha__botoes .botao--contorno-escuro { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.ficha__nota { margin: 12px 0 0; font-size: 14px; color: #a9b2d4; }
.ficha__sub { margin: 30px 0 12px; font: 600 13px/1.2 "Golos Text", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #ff8a90; }
.ficha__opcionais { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ficha__opcionais li { padding: 7px 12px; border-radius: 4px; background: rgba(255,255,255,.07); box-shadow: inset 2px 0 0 var(--vermelho); font-size: 14.5px; color: #e4e8f5; }
.ficha-outros { padding-top: clamp(48px, 6vw, 72px); }
.ficha-outros__titulo { margin-bottom: 26px; font-size: clamp(32px, 4vw, 48px); color: var(--noite); }
.ficha-outros__pe { margin: 28px 0 0; }
@media (max-width: 900px) {
  .ficha { grid-template-columns: 1fr; }
  .galeria { margin-inline: calc(var(--lado) * -1); }
  .galeria__palco { border-radius: 0; }
  .galeria__miniaturas { padding-inline: var(--lado); }
}
@media (max-width: 560px) { .galeria__seta { display: none; } .ficha__botoes .botao { flex-basis: 100%; } }

.canais { background: var(--nuvem); padding: 48px 0 72px; }
.canais__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.canal { display: flex; align-items: center; gap: 16px; height: 100%; padding: 20px 22px; border-radius: var(--raio); background: var(--branco); text-decoration: none; box-shadow: 0 1px 0 var(--linha); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.canal:hover { transform: translateY(-3px); box-shadow: 0 1px 0 var(--linha), 0 20px 40px -28px rgba(10,0,60,.5); }
.canal__ico { display: inline-flex; flex: none; color: var(--vermelho); }
.canal__ico .ico { width: 28px; height: 28px; }
.canal--zap .canal__ico { color: var(--verde); }
.canal strong { display: block; font-size: 17px; color: var(--noite); }
.canal span { font-size: 14.5px; color: var(--tinta-2); overflow-wrap: anywhere; min-width: 0; }
.canal > span:last-child { min-width: 0; }
@media (max-width: 900px) { .canais__lista { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .canais__lista { grid-template-columns: 1fr; } }

.erro { min-height: 100svh; display: grid; place-items: center; text-align: center; background: var(--noite); color: var(--branco); padding: 120px var(--lado) 60px; }
.erro h1 { font-size: clamp(48px, 9vw, 120px); color: transparent; background: var(--cromo); -webkit-background-clip: text; background-clip: text;  background-size: 100% .98em; background-repeat: repeat-y;}
.erro p { color: #cfd5ea; margin: 16px auto 28px; max-width: 40ch; }

/* ---------- textos que sobem de dentro de uma máscara ---------- */
.mascara { display: block; overflow: hidden; padding-bottom: .08em; }
.mascara__dentro { display: block; }
.avaliar__nota .mascara__dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.js .mascara .mascara__dentro { transform: translate3d(0, 110%, 0); transition: transform 1s var(--ease) .15s; }
.js .mascara.is-visto .mascara__dentro { transform: none; }

/* ---------- carros chegando na vitrine (um atrás do outro, da direita) ---------- */
@keyframes carro-chega { from { opacity: 0; transform: translate3d(64px, 0, 0); } to { opacity: 1; transform: none; } }
.js .vitrine:not(.is-visto) .trilho > .carro, .js .estoque-pagina:not(.is-visto) .grade-carros > .carro { opacity: 0; }
.js .vitrine.is-visto .trilho > .carro, .js .estoque-pagina.is-visto .grade-carros > .carro { animation: carro-chega .85s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }

/* ---------- entregas: grid de largada ----------
   Fotos reais de clientes (09/11/2026) em vagas inclinadas no ângulo do itálico do logo, desencontradas
   duas a duas como num grid de largada. Cada foto é revelada por um risco
   vermelho que varre da esquerda para a direita (photo finish), uma depois da outra.
   Ref. Mask Reveal (balick, 21st.dev), refeito em CSS + JS do site. */
.largada { background: var(--noite-3); color: var(--branco); padding: clamp(64px, 8vw, 112px) 0 clamp(56px, 7vw, 96px); }
.largada .rotulo { color: #ff6b72; }
.largada__cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; margin-bottom: clamp(28px, 4vw, 48px); }
.largada h2 { font-size: clamp(36px, 4.8vw, 66px); max-width: 15ch; }
.largada__texto { color: #c7cee6; max-width: 46ch; margin: 18px 0 0; }
.largada__barra { display: flex; align-items: center; gap: 22px; }
.largada__conta { display: flex; align-items: baseline; gap: 10px; margin: 0; color: #a7aecb; font-weight: 600; font-size: 15px; }
.largada__conta strong { font-family: "Geologica", sans-serif; font-variation-settings: "wght" 800, "slnt" -10; font-size: 44px; line-height: 1; color: var(--vermelho); }
.seta--clara { background: rgba(255,255,255,.1); }
.seta--clara:hover { background: var(--vermelho); }
.seta:disabled { opacity: .35; cursor: default; background: rgba(255,255,255,.1); }

.largada__pista { --vaga: clamp(220px, 21vw, 280px); --desce: 64px; --inclina: -8deg; }
.largada__grid {
  display: flex; gap: clamp(18px, 2vw, 30px); margin: 0; list-style: none;
  padding: 18px max(var(--lado), (100% - var(--max)) / 2 + 24px) calc(var(--desce) + 48px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--lado), (100% - var(--max)) / 2 + 24px);
  scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab;
}
.largada__grid::-webkit-scrollbar { display: none; }
.largada__grid.is-arrastando { cursor: grabbing; scroll-snap-type: none; }
.largada__grid.is-arrastando a { pointer-events: none; }
.vaga { position: relative; flex: 0 0 var(--vaga); scroll-snap-align: start; }
.vaga:nth-child(even) { transform: translateY(var(--desce)); }
/* marca da vaga no asfalto: o "colchete" branco do grid de largada */
.vaga::after { content: ""; position: absolute; left: 6%; right: 30%; bottom: -26px; height: 14px; border: 2px solid rgba(255,255,255,.55); border-top: 0; transform: skewX(var(--inclina)); }
.vaga__foto { position: relative; display: block; aspect-ratio: 4 / 5; transform: skewX(var(--inclina)); border-radius: 4px; overflow: hidden; outline-offset: 5px; background: var(--noite-2); }
.vaga__janela { position: absolute; inset: 0; overflow: hidden; }
.vaga__janela img { width: 100%; height: 100%; object-fit: cover; transform: skewX(calc(var(--inclina) * -1)) scale(1.16); transition: transform .8s var(--ease), filter .6s; }
.vaga__foto:hover img, .vaga__foto:focus-visible img { transform: skewX(calc(var(--inclina) * -1)) scale(1.24); }
.vaga__foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7,0,42,0) 55%, rgba(7,0,42,.55)); pointer-events: none; }
.vaga__varre { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translate3d(-100%, 0, 0); opacity: 0; }
.vaga__varre::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: var(--vermelho); box-shadow: 0 0 14px 3px rgba(224,20,31,.6), 0 0 40px 8px rgba(224,20,31,.22); }
.largada__pe { display: flex; justify-content: flex-start; }

/* photo finish: a janela abre junto com o risco que varre */
.js .largada .vaga__janela { clip-path: inset(0 100% 0 0); }
.js .largada.is-visto .vaga__janela { animation: largada-abre .95s var(--ease) both; animation-delay: calc(var(--i) * 110ms + .15s); }
.js .largada.is-visto .vaga__varre { animation: largada-varre .95s var(--ease) both; animation-delay: calc(var(--i) * 110ms + .15s); }
@keyframes largada-abre { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes largada-varre { 0% { transform: translate3d(-100%, 0, 0); opacity: 1; } 82% { opacity: 1; } 100% { transform: translate3d(0, 0, 0); opacity: 0; } }

@media (max-width: 760px) {
  .largada__cab { grid-template-columns: 1fr; }
  .largada__barra { justify-content: space-between; }
  .largada__pista { --vaga: 64vw; --desce: 36px; --inclina: -6deg; }
  .largada__conta strong { font-size: 36px; }
  .largada__pe .botao { width: 100%; }
}

/* visor: a foto inteira, aberta pelo mesmo risco */
.visor { width: min(100vw - 24px, 760px); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 6px; background: var(--noite-3); color: var(--branco); overflow: hidden; }
.visor::backdrop { background: rgba(4, 0, 24, .86); }
.visor[open] { display: flex; flex-direction: column; }
.visor__palco { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #000; }
.visor__foto { display: block; width: 100%; height: auto; max-height: calc(100dvh - 24px - 78px); object-fit: contain; }
.visor__palco.is-troca .visor__foto { animation: largada-abre .7s var(--ease) both; }
.visor__varre { position: absolute; inset: 0; pointer-events: none; transform: translate3d(-100%, 0, 0); opacity: 0; }
.visor__varre::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: var(--vermelho); box-shadow: 0 0 14px 3px rgba(224,20,31,.6); }
.visor__palco.is-troca .visor__varre { animation: largada-varre .7s var(--ease) both; }
.visor__barra { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; }
.visor__conta { margin: 0; color: #a7aecb; font-weight: 600; }
.visor__conta strong { font-family: "Geologica", sans-serif; font-variation-settings: "wght" 800, "slnt" -10; font-size: 28px; color: var(--vermelho); }
.visor__fechar { position: absolute; top: 10px; right: 10px; width: 46px; height: 46px; border: 0; border-radius: 4px; background: rgba(7,0,42,.7); color: var(--branco); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.visor__fechar:hover { background: var(--vermelho); }
.visor__fechar .ico { width: 22px; height: 22px; }
body.visor-aberto { overflow: hidden; }

/* ---------- entradas genéricas ---------- */
.js [data-entra] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-entra].is-visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-passa] { filter: none; transform: translate3d(24px, 0, 0); }
  .js [data-passa].is-visto { transform: none; }
  .trilho { scroll-behavior: auto; }
  .js [data-entra] { transform: none; transition-duration: .4s; }
  .js .janela__foto { transform: none; }
  .simular[open] { animation-duration: .2s; }
  .js .relato { transition-duration: .01s; }
  .js .largada .vaga__janela, .js .largada.is-visto .vaga__janela { clip-path: none; animation: none; }
  .js .largada .vaga__varre, .visor__varre { display: none; }
  .visor__palco.is-troca .visor__foto { animation: none; }
  .vaga__janela img { transition: none; }
}