/* 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: 16px;
  --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: 999px;
  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(--branco); --fundo: transparent; --passa: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.botao--contorno-escuro { --cor: var(--noite); --fundo: transparent; --passa: rgba(10,0,60,.07); box-shadow: inset 0 0 0 1.5px rgba(10,0,60,.35); }
.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; }
.com-abertura .abertura { display: block; position: fixed; inset: 0; z-index: 100; background: radial-gradient(80% 80% at 50% 44%, #1e1170 0%, var(--noite) 55%, var(--noite-3) 100%); cursor: pointer; transition: opacity .6s var(--ease); }
.abertura.is-saindo { opacity: 0; pointer-events: none; }
.abertura__video { width: 100%; height: 100%; object-fit: cover; }
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 { display: block; padding: 10px 14px; font-weight: 550; font-size: 15.5px; color: rgba(255,255,255,.86); text-decoration: none; border-radius: 999px; transition: background-color .2s, color .2s; }
.menu__links a:hover, .menu__links a[aria-current="page"] { color: var(--branco); background: rgba(255,255,255,.1); }
.menu__simular { flex: none; }
.menu__abrir { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; border-radius: 12px; background: rgba(255,255,255,.1); color: var(--branco); cursor: pointer; align-items: center; justify-content: center; }
.menu__abrir .ico { width: 24px; height: 24px; }
@media (max-width: 900px) {
  .menu__links, .menu__simular--largo { display: none; }
  .menu__abrir { display: inline-flex; }
  .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; border-radius: 12px; background: rgba(255,255,255,.1); color: var(--branco); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.gaveta-menu__fechar .ico { width: 22px; height: 22px; }
.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, 1.08fr) minmax(0, .92fr);
  align-items: end;
  min-height: calc(100svh - var(--menu) - 104px);
  max-height: 900px;
}
.topo__texto { position: relative; z-index: 2; 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, 7.4vw, 118px);
  margin-right: -14vw;
  color: transparent;
  background: var(--cromo);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 18px rgba(7, 0, 42, .55));
 background-size: 100% .98em; background-repeat: repeat-y;}
.topo h1 .ponto { color: var(--vermelho); -webkit-text-fill-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 0 0 0;
  clip-path: url(#arco-janela);
  background: #18142e url("../img/fachada-janela-900.webp") center 28% / cover no-repeat;
}
.janela__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,0,60,.72) 0%, rgba(10,0,60,0) 34%), linear-gradient(0deg, rgba(15,16,20,.55) 0%, rgba(15,16,20,0) 30%); }
.janela__traco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.janela__traco path { fill: none; stroke: var(--vermelho); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.js .janela__traco { clip-path: inset(-20% 100% -20% -30%); }
.js .is-carregado .janela__traco { clip-path: inset(-20% -2% -20% -30%); transition: clip-path 1.5s var(--ease) .35s; }
.janela__placa { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(15,16,20,.78); font-size: 14px; font-weight: 550; }
.janela__placa .ico { color: var(--vermelho); }
.js .janela__foto { transform: translateY(6%); opacity: 0; }
.js .is-carregado .janela__foto { transform: none; opacity: 1; transition: transform 1.2s var(--ease), opacity .9s var(--ease); }

/* ficha: a faixa preta do letreiro */
.ficha { position: relative; z-index: 3; background: var(--fachada); border-top: 1px solid rgba(255,255,255,.06); }
.ficha::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--vermelho) 22%, var(--vermelho) 60%, transparent 100%); }
.ficha__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 0; list-style: none; }
.ficha__item { padding: 22px 22px 22px 0; min-height: 104px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.ficha__item + .ficha__item { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.1); }
.ficha__rotulo { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9aa1b8; }
.ficha__valor { font-family: "Geologica", sans-serif; font-variation-settings: "wght" 700, "slnt" -8; font-size: 20px; line-height: 1.2; color: var(--branco); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
a.ficha__valor:hover { color: #c9f5da; }
.ficha__valor .ico { color: #2fd27a; }
.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-faixa-900.webp"); background-position: center 40%; clip-path: none; }
  .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__traco { display: none; }
  .janela__placa { right: auto; left: 16px; bottom: 20px; }
  .topo h1 { margin-right: 0; }
  .topo__texto { padding-top: 8px; }
  .ficha__lista { grid-template-columns: 1fr 1fr; }
  .ficha__item, .ficha__item + .ficha__item { padding: 18px 14px; border-left: 0; min-height: 0; }
  .ficha__item:nth-child(odd) { padding-left: 0; }
  .ficha__item:nth-child(even) { border-left: 1px solid rgba(255,255,255,.1); }
  .ficha__item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
  .ficha__valor { font-size: 16px; }
  a.ficha__valor[href^="https://wa.me"] { white-space: nowrap; font-size: 15.5px; }
}
@media (max-width: 600px) {
  .janela { height: 46svh; }
  .janela__foto { background-image: url("../img/fachada-faixa-600.webp"); }
  .topo__acoes .botao { flex: 1 1 100%; }
}

/* ---------- arco: o teto do carro do logo, que assenta ao chegar ---------- */
.com-arco { position: relative; }
.arco { position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(34px, 6vw, 92px); margin-bottom: -1px; pointer-events: none; transform-origin: 50% 100%; will-change: transform; z-index: 1; }
.arco svg { width: 100%; height: 100%; }
.arco .arco__fundo { fill: var(--cor-arco, var(--nuvem)); }
.arco .arco__risco { fill: none; stroke: var(--vermelho); stroke-width: 2.5; vector-effect: non-scaling-stroke; opacity: var(--risco, 1); }

/* ---------- 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: 999px; 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: 999px; background: #e5e9f4; width: fit-content; max-width: 100%; }
.chips[hidden] { display: none; }
.chips__marca { position: absolute; top: 0; left: 0; height: 0; border-radius: 999px; 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: 999px; 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: 18px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .chips::-webkit-scrollbar { display: none; }
}

.trilho-moldura { position: relative; }
.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: 50%; border: 1.5px solid rgba(10,0,60,.25); background: var(--branco); color: var(--noite); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.seta:hover { background: var(--noite); color: var(--branco); border-color: var(--noite); }
.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 { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 11px; border-radius: 999px; background: rgba(10,0,60,.82); color: var(--branco); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
.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__gaveta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; padding: 28px 12px 12px; background: linear-gradient(0deg, rgba(10,0,60,.92) 0%, rgba(10,0,60,.7) 60%, rgba(10,0,60,0) 100%); transform: translateY(101%); transition: transform .45s var(--ease); }
.carro__gaveta span { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: var(--branco); font-size: 12.5px; font-weight: 550; }
@media (hover: hover) { .carro:hover .carro__gaveta, .carro:focus-within .carro__gaveta { transform: none; } }
@media (hover: none) { .carro__gaveta { display: none; } }
.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 (céu real da loja) ---------- */
.mente { position: relative; overflow: hidden; color: var(--branco); padding: clamp(64px, 9vw, 120px) 0; background: var(--noite); }
.mente__ceu { position: absolute; inset: -18% 0; background: url("../img/ceu-1440.webp") center / cover no-repeat; will-change: transform; }
.mente::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,0,60,.86) 0%, rgba(10,0,60,.55) 55%, rgba(10,0,60,.2) 100%); }
.mente__dentro { position: relative; z-index: 1; max-width: 720px; }
.mente h2 { font-size: clamp(38px, 5.4vw, 74px); }
.mente p { margin: 18px 0 30px; font-size: clamp(17px, 1.4vw, 20px); color: #dbe2f5; max-width: 52ch; }
@media (max-width: 600px) { .mente__ceu { background-image: url("../img/ceu-800.webp"); } .mente .botao { width: 100%; } }

/* ---------- além da compra ---------- */
.caminhos { --cor-arco: var(--noite); 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; }
.js .caminho > *:not(.caminho__num) { opacity: 0; transform: translateX(-18px); transition: opacity .7s var(--ease) .25s, transform .7s var(--ease) .25s; }
.js .caminho.is-visto > * { opacity: 1; transform: none; }
@media (max-width: 860px) { .caminhos__grade { grid-template-columns: 1fr; } .caminhos h2 { position: static; } }

/* ---------- avaliações ---------- */
.avaliar { --cor-arco: var(--branco); 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; }
.relatos { list-style: none; margin: 0; padding: 0; columns: 3 300px; column-gap: 20px; }
.relato { position: relative; break-inside: avoid; margin: 0 0 20px; padding: 30px 24px 22px; border-radius: var(--raio); background: var(--nuvem); }
.relato__arco { position: absolute; left: 18px; right: 18px; top: 10px; width: calc(100% - 36px); height: 14px; overflow: visible; }
.relato__arco path { fill: none; stroke: var(--vermelho); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.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: 16.5px; line-height: 1.6; color: var(--tinta); }
.relato__autor { margin: 0; font-weight: 700; color: var(--noite); }
.relato__autor span { margin-left: 8px; font-weight: 500; font-size: 13.5px; color: #7a7f96; }
.js .relato { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .relato .relato__arco { clip-path: inset(-50% 100% -50% -2%); transition: clip-path 1.1s var(--ease) .25s; }
.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 { opacity: 1; transform: none; }
.js .relato.is-visto .relato__arco { clip-path: inset(-50% -2% -50% -2%); }
.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 { --cor-arco: var(--nuvem); 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: 999px; 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: 999px; background: var(--noite); color: var(--branco); font-size: 13px; font-weight: 600; pointer-events: none; }
.js .mapa { clip-path: inset(0 0 0 100% round var(--raio)); transition: clip-path 1.1s var(--ease); }
.js .is-visto .mapa { clip-path: inset(0 0 0 0 round var(--raio)); }
@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: 10px; margin-top: 14px; }
.rodape__redes a { width: 44px; height: 44px; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.08); }
.rodape__redes a:hover { background: rgba(255,255,255,.16); 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: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--noite); color: var(--branco); box-shadow: 0 0 0 1.5px rgba(255,255,255,.25), 0 12px 30px -10px rgba(10,0,60,.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); }
.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; border-radius: 12px; background: #eef1f8; 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: 12px; 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: 999px; border: 1.5px solid #cfd5e5; 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 { --cor-arco: var(--nuvem); 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: 999px; 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: 999px; 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 { margin-top: 0; }

.canais { --cor-arco: var(--nuvem); 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 { width: 50px; height: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: #eef1f8; color: var(--noite); flex: none; }
.canal__ico .ico { width: 24px; height: 24px; }
.canal--zap .canal__ico { background: var(--verde); color: var(--branco); }
.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; }

/* ---------- 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) {
  .trilho { scroll-behavior: auto; }
  .js [data-entra] { transform: none; transition-duration: .4s; }
  .js .caminho > *:not(.caminho__num) { transform: none; }
  .js .janela__foto { transform: none; }
  .simular[open] { animation-duration: .2s; }
}