/* ============================================================
   GIOVANNI VEÍCULOS — folha de estilo
   O dourado vem do escudo da logo deles. Trocar as variáveis
   abaixo reveste o site inteiro.
   ============================================================ */

:root{
  --ouro:     #e0a92e;
  --ouro-2:   #f5cf6a;
  --ouro-esc: #9c5b07;
  --carvao:   #101216;
  --carvao-2: #171a1f;
  --tinta:    #14161a;
  --papel:    #ffffff;
  --papel-2:  #f4f5f7;
  --cinza:    #6a7079;
  --linha:    rgba(20,22,26,.12);
  --linha-esc:rgba(255,255,255,.13);

  --display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--texto); font-weight:300; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ouro); color:#101216; }

.wrap{ width:100%; max-width:1220px; margin-inline:auto; padding-inline:var(--gutter); }
.wrap--estreito{ max-width:820px; }
.pular{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ouro); color:#101216; padding:12px 20px; }
.pular:focus{ left:12px; top:12px; }

/* ---------- navegação ---------- */
/* Fica escura o site todo: a logo tem "GIOVANNI" em branco e sumiria
   sobre fundo claro. */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px var(--gutter); color:#fff;
  transition:background .45s ease, padding .45s ease, border-color .45s ease;
  border-bottom:1px solid transparent;
}
.nav.is-fixa{
  background:rgba(16,18,22,.8);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--linha-esc); padding-block:10px;
}
.nav__brand{ display:flex; align-items:center; flex:none; }
.nav__brand img{ height:56px; width:auto; transition:height .45s ease; }
.nav.is-fixa .nav__brand img{ height:42px; }
.nav__links{ display:flex; gap:30px; font-size:13.5px; }
.nav__links a{ opacity:.82; transition:opacity .3s; }
.nav__links a:hover{ opacity:1; }
.nav__cta{
  font-size:13px; font-weight:500; padding:11px 22px; border-radius:999px;
  background:var(--ouro); color:#101216; white-space:nowrap;
  transition:background .3s, transform .3s;
}
.nav__cta:hover{ background:var(--ouro-2); transform:translateY(-1px); }
@media (max-width:940px){ .nav__links{ display:none; } }
@media (max-width:520px){ .nav__brand img{ height:44px; } .nav.is-fixa .nav__brand img{ height:36px; } }

/* ============================================================
   VITRINE
   Fotografia real do pátio. A troca de veículo e a aproximação são
   dirigidas pelo scroll; nada aqui é gerado, é o acervo deles.
   ============================================================ */
.vitrine{ height:480vh; position:relative; background:var(--carvao); }
.vitrine__fixa{
  position:sticky; top:0; height:100svh; min-height:540px;
  overflow:hidden; display:grid; place-items:center; color:#fff;
}
.quadros{ position:absolute; inset:0; }
.quadro{
  position:absolute; inset:0; margin:0; opacity:0;
  background-image:var(--foto); background-size:cover; background-position:center 58%;
  will-change:opacity, transform;
}
/* véu: sem ele o texto branco não sobrevive em cima de foto clara */
.vitrine__veu{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(10,12,15,.94) 0%, rgba(10,12,15,.72) 34%, rgba(10,12,15,.16) 64%, rgba(10,12,15,.55) 100%),
    linear-gradient(180deg, rgba(10,12,15,.72) 0%, transparent 26%, transparent 62%, rgba(10,12,15,.86) 100%);
}
@media (max-width:940px){
  .vitrine__veu{
    background:linear-gradient(180deg, rgba(10,12,15,.8) 0%, rgba(10,12,15,.35) 34%, rgba(10,12,15,.92) 78%);
  }
}

/* ficha do veículo em cena */
.fichas{
  position:absolute; z-index:4; right:var(--gutter); top:50%; transform:translateY(-50%);
  width:min(370px,38vw); display:grid;
}
.ficha{
  grid-area:1 / 1; opacity:0; will-change:opacity, transform;
  background:rgba(16,18,22,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--linha-esc); border-radius:4px; padding:26px 24px 22px;
  transition:border-color .35s ease;
}
.ficha:hover{ border-color:var(--ouro); }
.ficha__tag{
  display:inline-block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#101216; background:var(--ouro); padding:4px 10px; border-radius:999px; margin-bottom:16px;
}
.ficha h2{ margin:0 0 10px; font-family:var(--display); font-weight:500; font-size:22px; line-height:1.2; letter-spacing:-.02em; }
.ficha__spec{ margin:0 0 16px; font-size:13px; color:rgba(255,255,255,.62); }
.ficha__preco{ margin:0 0 18px; font-family:var(--display); font-weight:600; font-size:30px; letter-spacing:-.03em; color:var(--ouro-2); }
.ficha__link{ font-size:12.5px; letter-spacing:.08em; color:rgba(255,255,255,.75); border-bottom:1px solid var(--ouro); padding-bottom:2px; }

/* marcadores de passo */
.pontos{ position:absolute; z-index:4; left:var(--gutter); top:50%; transform:translateY(-50%); display:grid; gap:10px; }
.pontos i{ display:block; width:2px; height:26px; background:var(--linha-esc); transition:background .4s ease; }
.pontos i.is-ativo{ background:var(--ouro); }

@media (max-width:940px){
  .vitrine{ height:420vh; }
  .fichas{ right:var(--gutter); left:var(--gutter); width:auto; top:auto; bottom:clamp(40px,8vh,80px); transform:none; }
  .ficha h2{ font-size:19px; }
  .ficha__preco{ font-size:26px; margin-bottom:14px; }
  .pontos{ display:none; }
}

.capa{
  position:absolute; z-index:3; inset:auto var(--gutter) clamp(46px,7vh,92px) var(--gutter);
  max-width:700px; will-change:opacity, transform;
}
.capa::before{
  content:""; position:absolute; z-index:-1; inset:-60px -40px -60px -40px;
  background:radial-gradient(70% 100% at 22% 60%, rgba(11,13,17,.94), rgba(11,13,17,.55) 55%, transparent 82%);
}
.capa__olho{ margin:0 0 16px; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ouro-2); }
.capa__titulo{
  margin:0; font-family:var(--display); font-weight:300;
  font-size:clamp(30px,4.3vw,56px); line-height:1.1; letter-spacing:-.03em;
}
.capa__titulo em{ font-style:normal; font-weight:700; color:var(--ouro-2); }
.capa__sub{ margin:18px 0 0; font-size:16px; color:rgba(255,255,255,.72); max-width:44ch; }
.capa__acoes{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }

.cue{
  position:absolute; z-index:4; right:var(--gutter); bottom:26px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.45);
}
.cue i{ display:block; width:1px; height:38px; background:linear-gradient(var(--ouro), transparent); }

@media (max-width:940px){
  .cue{ display:none; }
  .capa{ max-width:none; }
}

/* ============================================================
   SEÇÕES CLARAS
   ============================================================ */
.secao{ position:relative; z-index:5; background:var(--papel); padding-block:clamp(80px,11vh,140px); }
.olho{ margin:0 0 16px; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ouro-esc); }
.titulo{ margin:0 0 28px; font-family:var(--display); font-weight:300; font-size:clamp(28px,4.2vw,52px); line-height:1.14; letter-spacing:-.03em; max-width:22ch; }
.corpo{ margin:0 0 26px; color:var(--cinza); max-width:62ch; font-size:16px; }

/* ---------- estoque ---------- */
/* colunas fixas em vez de auto-fill: são 8 veículos, e 4/2/1 dividem
   exato — auto-fill deixava célula vazia mostrando a cor do vão */
.grade{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--linha); border:1px solid var(--linha); margin-top:44px; }
@media (max-width:1100px){ .grade{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:620px){ .grade{ grid-template-columns:1fr; } }
.carro{ background:var(--papel); display:flex; flex-direction:column; transition:background .35s ease; }
.carro:hover{ background:var(--papel-2); }
.carro__foto{ position:relative; overflow:hidden; aspect-ratio:4 / 3; background:var(--papel-2); }
.carro__foto img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.carro:hover .carro__foto img{ transform:scale(1.05); }
/* corpo cresce e empurra o preço para a base: com títulos de uma ou duas
   linhas, sem isso os preços dançam de altura dentro da mesma fileira */
.carro__corpo{ padding:20px 22px 26px; display:flex; flex-direction:column; gap:7px; flex:1; }
.carro__preco{ margin-top:auto; }
.carro__topo{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:4px; }
.carro__ano{ font-family:var(--display); font-weight:600; font-size:13px; color:var(--ouro-esc); letter-spacing:.06em; }
.carro__cambio{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cinza); text-align:right; }
.carro h3{ margin:0; font-family:var(--display); font-weight:500; font-size:16px; line-height:1.3; letter-spacing:-.01em; }
.carro__km{ margin:0; font-size:13.5px; color:var(--cinza); }
.carro__preco{ margin:8px 0 0; font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:-.02em; }
.carro__preco--ouro{ color:var(--ouro-esc); }
.estoque__nota{ margin-top:44px; }

/* ---------- faixa ---------- */
.faixa{ position:relative; z-index:5; background:var(--carvao); color:#fff; padding-block:22px; overflow:hidden; }
.faixa__trilho{ display:flex; align-items:center; width:max-content; will-change:transform; }
.faixa__trilho span{ font-family:var(--display); font-weight:300; font-size:clamp(17px,2vw,26px); letter-spacing:-.01em; padding-inline:24px; white-space:nowrap; }
.faixa__trilho i{ color:var(--ouro); font-style:normal; font-size:9px; }

/* ---------- por que ---------- */
.porque{ background:var(--papel-2); }
.cartoes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:1px; background:var(--linha); border:1px solid var(--linha); margin-top:44px; }
.cartao{ background:var(--papel-2); padding:32px 26px; transition:background .4s ease; }
.cartao:hover{ background:var(--papel); }
.cartao__num{ display:block; font-family:var(--display); font-size:12px; letter-spacing:.2em; color:var(--ouro-esc); margin-bottom:16px; }
.cartao h3{ margin:0 0 10px; font-family:var(--display); font-weight:500; font-size:18px; }
.cartao p{ margin:0; color:var(--cinza); font-size:14.5px; }

/* ---------- contato ---------- */
.contato__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:32px; margin-top:36px; padding-top:34px; border-top:1px solid var(--linha); }
.contato__bloco h3{ margin:0 0 12px; font-family:var(--display); font-weight:500; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ouro-esc); }
.contato__bloco p{ margin:0; color:var(--cinza); font-size:15px; }
.link{ color:var(--tinta); border-bottom:1px solid var(--ouro); padding-bottom:1px; transition:color .3s; }
.link:hover{ color:var(--ouro-esc); }

/* ---------- botões ---------- */
.botao{
  display:inline-block; position:relative; overflow:hidden; isolation:isolate;
  border:1px solid currentColor; border-radius:999px;
  font-family:var(--texto); font-size:13.5px; font-weight:500;
  padding:14px 28px; cursor:pointer; background:transparent; color:inherit; will-change:transform;
}
.botao--cheio{ border-color:var(--ouro); background:var(--ouro); color:#101216; }
.botao__fundo{
  position:absolute; z-index:-1; border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .55s cubic-bezier(.65,0,.35,1);
}
.botao--cheio .botao__fundo{ background:var(--carvao); }
.botao:not(.botao--cheio) .botao__fundo{ background:var(--ouro); }
.botao.is-dentro .botao__fundo{ transform:translate(-50%,-50%) scale(1); }
.botao__texto{ position:relative; transition:color .35s ease .06s; }
.botao--cheio.is-dentro .botao__texto{ color:#fff; }
.botao:not(.botao--cheio).is-dentro .botao__texto{ color:#101216; }

/* ---------- rodapé ---------- */
.rodape{ position:relative; z-index:5; background:var(--carvao); color:#fff; padding-top:64px; }
.rodape__grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:48px; }
.rodape__marca{ width:190px; height:auto; margin-bottom:16px; }
.rodape__end{ margin:0; font-size:14px; color:rgba(255,255,255,.6); max-width:44ch; }
.rodape__cols{ display:flex; gap:26px; flex-wrap:wrap; font-size:13.5px; color:rgba(255,255,255,.7); }
.rodape__cols a:hover{ color:#fff; }
.rodape__base{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--linha-esc); padding-block:22px;
  font-size:12.5px; color:rgba(255,255,255,.42);
}

.zap{
  position:fixed; right:20px; bottom:20px; z-index:40;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:#25d366;
  box-shadow:0 10px 26px rgba(0,0,0,.28); transition:transform .3s ease;
}
.zap svg{ width:28px; height:28px; }
.zap:hover{ transform:scale(1.07); }

/* ============================================================
   EFEITOS (portados da Originkit)
   ============================================================ */
.ok-palavra{ display:inline-block; white-space:nowrap; }
.ok-letra{ display:inline-block; will-change:transform, opacity; }
[data-ok]{ visibility:hidden; }
[data-ok].ok-pronto, [data-ok="mask"]{ visibility:visible; }

.cortina{
  position:fixed; inset:0; z-index:60; background:var(--carvao);
  display:grid; place-items:center;
  transition:transform 1.05s cubic-bezier(.76,0,.24,1), opacity .5s ease .55s;
}
.cortina.is-fora{ transform:translateY(-100%); opacity:0; pointer-events:none; }
.cortina__marca{ width:min(230px,54vw); height:auto; animation:pulsar 1.4s ease-in-out infinite; }
@keyframes pulsar{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

.nav__links a, .rodape__cols a{ position:relative; }
.nav__links a::after, .rodape__cols a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:var(--ouro); transform:scaleX(0); transform-origin:right;
  transition:transform .42s cubic-bezier(.65,0,.35,1);
}
.nav__links a:hover::after, .rodape__cols a:hover::after{ transform:scaleX(1); transform-origin:left; }

[data-revelar]{
  opacity:0; transform:translateY(20px);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
}
[data-revelar].is-visivel{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .cena{ height:380vh; }
  [data-revelar]{ opacity:1; transform:none; transition:none; }
  .cortina__marca{ animation:none; }
}