/* ==========================================================================
   Landing page do veiculo — iBox Prime
   Tokens iguais aos de styles/main.css: mesma paleta, mesma fonte, mesmo
   raio de 4px. Este arquivo e independente do main.css e nao o sobrescreve.
   ========================================================================== */

:root{
  /* Mesma paleta clara das secoes .section-light do main.css: a ficha era a
     unica pagina preta do site, e quem vinha da vitrine branca sentia que
     tinha trocado de site ao abrir um carro.
     Tres dourados, porque um so nao cobre fundo claro:
       --gold      preenchimento e decoracao (ponto, faixa, icone)
       --gold-txt  texto grande, tipo o preco (3,4:1, suficiente acima de 24px)
       --gold-min  texto pequeno, rotulo e link (5,0:1, passa em qualquer tamanho)
     O visor de fotos continua preto e tem os proprios valores, no fim do
     arquivo: foto se ve melhor sobre preto. */
  --bg:#F7F5F1; --bg2:#FFFFFF; --bg3:#F0ECE3; --bg4:#E9E4DA;
  --gold:#F8C45B; --gold-l:#F9F295; --gold-d:#AB7C35;
  --gold-txt:#AB7C35; --gold-min:#8A6222;
  --gold-rgb:248,196,91;
  --white:#1A1A1A; --muted:#6B6B6B; --sub:#5A5854;
  --border:#E5E2DC; --border-soft:#E5E2DC;
  --wa:#25D366;
  --r:4px;
  /* Escala apertada em relacao a anterior (8/16/24/32/48/64): a ficha rolava
     demais no celular pra pouca informacao. */
  --sp-1:6px; --sp-2:12px; --sp-3:20px; --sp-4:26px; --sp-6:38px; --sp-8:52px;
  --wrap:1180px;
  --f:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.5,0,0,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--white);
  font-family:var(--f); font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--sp-3)}

/* ------------------------------------------------------------- cabecalho */
.hdr{
  position:sticky; top:0; z-index:30;
  background:rgba(247,245,241,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.hd{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0}
/* A logo é a mesma imagem do resto do site (o mesmo /logo.png que a home
   usa em .hdr-logo-img), no mesmo tamanho — antes a ficha tinha um
   logotipo de texto próprio, e o topo mudava de cara ao abrir um veículo. */
.logo{display:flex; align-items:center; text-decoration:none; flex:0 0 auto; transition:opacity .3s var(--ease)}
.logo:hover{opacity:.85}
.logo img{
  height:clamp(36px,5vh,48px); width:auto;
  filter:drop-shadow(0 0 8px rgba(var(--gold-rgb),.2));
  transition:filter .3s var(--ease);
}
.logo:hover img{filter:drop-shadow(0 0 16px rgba(var(--gold-rgb),.6))}
.hdr-nav{display:flex; gap:var(--sp-3); margin-left:auto}
.hdr-nav a{
  text-decoration:none; font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sub);
  transition:color .3s var(--ease);
}
.hdr-nav a:hover{color:var(--gold-min)}
.hdr-wa{
  text-decoration:none; background:var(--wa); color:#04220f;
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:10px 16px; border-radius:var(--r); flex:0 0 auto;
}
.hdr-wa:hover{filter:brightness(1.1)}

.ficha-wrap{padding-bottom:var(--sp-8)}

/* ------------------------------------------------------------ breadcrumb */
.trilha{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:var(--sp-4) 0 var(--sp-3);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.trilha a{display:inline-flex; align-items:center; gap:7px; color:var(--sub); text-decoration:none}
.trilha a:hover{color:var(--gold-min)}
.trilha svg{width:13px; height:13px}
.trilha .atual{color:var(--sub)}

/* --------------------------------------------------------------- galeria */
.galeria{display:grid; grid-template-columns:2fr 1fr; gap:var(--sp-1)}
.galeria button{padding:0; border:none; background:var(--bg3); cursor:pointer; font:inherit; color:inherit}
.g-main{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r); width:100%}
.g-main img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.g-main:hover img{transform:scale(1.03)}
/* A coluna das miniaturas precisa ter exatamente a altura da foto principal.
   Sem uma altura propria, as linhas 1fr caem para a altura natural das
   imagens e a coluna fica mais alta que a foto grande — era isso que abria
   o vazio embaixo dela. Com colunas 2fr/1fr, a principal mede o dobro da
   lateral em largura e 3/4 disso em altura, entao a lateral vale 1 : 1,5
   (independe do gap, porque os dois lados saem da mesma sobra). */
.g-lado{display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); gap:var(--sp-1); min-height:0; aspect-ratio:2/3}
/* minmax(0,1fr) e nao 1fr: o minimo de 1fr e auto, entao as linhas nao
   encolhiam abaixo da altura natural das fotos e os blocos vazavam a
   coluna. Sozinho ele nao basta — sem o aspect-ratio acima, a linha do
   grid cresce e quem fica menor e a foto principal. */
.g-tile{position:relative; overflow:hidden; border-radius:var(--r); width:100%; height:100%}
.g-tile img{width:100%; height:100%; object-fit:cover}
.contador{
  position:absolute; left:14px; bottom:14px;
  background:rgba(0,0,0,.72); backdrop-filter:blur(6px);
  border:1px solid var(--border); border-radius:999px;
  padding:6px 13px; font-size:11px; letter-spacing:.14em; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.g-todas{display:grid; place-items:center; align-content:center; gap:6px; border:1px solid var(--border)}
.g-todas img{position:absolute; inset:0; opacity:.26}
.g-todas .n{position:relative; font-size:23px; font-weight:600; color:var(--gold-txt); font-variant-numeric:tabular-nums}
.g-todas .t{
  position:relative; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sub); text-align:center; padding:0 10px; line-height:1.35;
}

/* ---------------------------------------------------------- identificacao */
.badges{display:flex; flex-wrap:wrap; gap:var(--sp-1); margin:var(--sp-4) 0 var(--sp-2)}
.badge{
  border-radius:999px; padding:5px 13px;
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px;
}
.badge.ok{background:rgba(var(--gold-rgb),.16); border:1px solid rgba(171,124,53,.35); color:var(--gold-min)}
.badge.ok .ponto{width:5px; height:5px; border-radius:50%; background:var(--gold)}
.badge.vendido{background:var(--bg3); border:1px solid var(--border-soft); color:var(--sub)}
.badge.cat{background:var(--bg3); border:1px solid var(--border-soft); color:var(--sub)}
.badge.cod{border:1px solid var(--border-soft); color:var(--muted); font-variant-numeric:tabular-nums}

h1{
  font-size:clamp(28px,4.4vw,44px); font-weight:600; line-height:1.08;
  letter-spacing:-.025em; margin:0; text-wrap:balance;
}
/* Versão do modelo (ALTIS PREMIUM HÍBRIDO, FREEDOM...) logo abaixo do nome:
   é o dado que diferencia duas unidades do mesmo carro, mas não faz parte do
   nome — por isso fica em linha própria, discreta. */
.versao{
  margin:10px 0 0; font-size:14px; font-weight:500; color:var(--gold-min);
  letter-spacing:.14em; text-transform:uppercase;
}
.linha-preco{display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); margin:var(--sp-2) 0 0}
.preco{
  font-size:clamp(28px,4.2vw,38px); font-weight:600; color:var(--gold-txt);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.preco.sob{font-size:clamp(20px,2.6vw,26px); color:var(--sub); font-weight:400}
.local{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--sub)}
.local svg{width:14px; height:14px; color:var(--gold); flex:0 0 auto}

/* ---------------------------------------------------------- regua specs */
.regua{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border-soft); border-radius:var(--r);
  background:var(--bg2); margin:var(--sp-4) 0 0;
}
.regua > div{
  padding:var(--sp-2) var(--sp-3); border-right:1px solid var(--border-soft);
  display:flex; gap:12px; align-items:center; min-width:0;
}
.regua > div:last-child{border-right:none}
.regua svg{width:19px; height:19px; color:var(--gold); flex:0 0 auto}
.regua .k{display:block; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.regua .v{font-size:15px; font-weight:500; font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- conteudo */
.corpo{display:grid; grid-template-columns:minmax(0,1fr) 348px; gap:var(--sp-6); margin:var(--sp-8) 0 0; align-items:start}
.col-texto{min-width:0}
.bloco + .bloco{margin-top:var(--sp-8)}

h2{
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-min); margin:0 0 var(--sp-2); padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
h2 .qtd{float:right; color:var(--muted); font-weight:400; letter-spacing:.1em}
h3{font-size:21px; font-weight:500; margin:0 0 var(--sp-2); letter-spacing:-.012em; text-wrap:balance}
h4{
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sub); margin:var(--sp-3) 0 0;
}
p{margin:0 0 var(--sp-2); color:var(--sub)}

.destaques{list-style:none; margin:var(--sp-2) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:9px var(--sp-3)}
.destaques li{position:relative; padding-left:var(--sp-2); font-size:15px; color:var(--sub)}
.destaques li::before{content:""; position:absolute; left:0; top:10px; width:5px; height:5px; background:var(--gold)}

.ficha{display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:0; margin:0; border-top:1px solid var(--border-soft)}
.ficha > div{padding:14px var(--sp-3) 14px 0; border-bottom:1px solid var(--border-soft)}
.ficha dt{font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:3px}
.ficha dd{margin:0; font-size:15px; font-weight:500; font-variant-numeric:tabular-nums}

/* -------------------------------------------------------- card de contato */
.contato{border:1px solid var(--border); border-radius:var(--r); background:var(--bg2); padding:var(--sp-3); position:sticky; top:96px}
.loja{display:flex; align-items:center; gap:12px; padding-bottom:var(--sp-2); border-bottom:1px solid var(--border-soft); margin-bottom:var(--sp-3)}
.loja .marca{
  width:42px; height:42px; border-radius:var(--r); flex:0 0 auto;
  background:rgba(var(--gold-rgb),.1); border:1px solid var(--border);
  /* Agora e o logo de verdade: contain para nao cortar o desenho, e um
     respiro interno para ele nao encostar na borda do quadrado. */
  object-fit:contain; padding:6px;
}
.loja .n{display:block; font-size:15px; font-weight:500}
.loja .s{display:block; font-size:11px; color:var(--muted); letter-spacing:.05em}
.btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:14px; border-radius:var(--r); border:1px solid transparent;
  font-family:var(--f); font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; cursor:pointer; transition:.25s var(--ease);
}
.btn-wa{background:var(--wa); color:#04220f}
.btn-wa:hover{filter:brightness(1.1)}
.btn-out{background:transparent; border-color:var(--gold-min); color:var(--gold-min); margin-top:10px}
.btn-out:hover{background:rgba(var(--gold-rgb),.08)}
.nota{font-size:12px; color:var(--muted); margin:var(--sp-2) 0 0; line-height:1.5}
.vendido-aviso{border-left:2px solid var(--gold-d); padding-left:var(--sp-2); margin-bottom:var(--sp-3)}
.vendido-aviso strong{display:block; font-weight:600; margin-bottom:5px}
.vendido-aviso p{margin:0; font-size:14px}
.compartilhar{margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--border-soft)}
.compartilhar .k{display:block; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.share-linha{display:flex; gap:8px; flex-wrap:wrap}
.share{
  border:1px solid var(--border-soft); border-radius:var(--r); background:transparent;
  padding:9px 13px; font-family:var(--f); font-size:10px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--sub);
  text-decoration:none; cursor:pointer; transition:.25s var(--ease);
}
.share:hover{border-color:var(--gold-min); color:var(--gold-min)}

/* ----------------------------------------------------------- semelhantes */
.semelhantes{margin:var(--sp-8) auto}
.sem-topo{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-3)}
.sem-topo h2{flex:1; margin:0}
.sem-topo a{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-min); text-decoration:none; white-space:nowrap; padding-bottom:10px}
.grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); gap:var(--sp-2)}
.card{border:1px solid var(--border-soft); border-radius:var(--r); overflow:hidden; background:var(--bg2); text-decoration:none; display:block; transition:border-color .3s var(--ease)}
.card:hover{border-color:var(--border)}
.card .foto{display:block; aspect-ratio:4/5; overflow:hidden; background:var(--bg3)}
.card .foto img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.card:hover .foto img{transform:scale(1.04)}
.card .txt{display:block; padding:var(--sp-2)}
.card .mk{display:block; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.card .nm{display:block; font-size:15px; font-weight:500; margin:3px 0 8px}
.card .meta{display:block; font-size:12px; color:var(--sub); font-variant-numeric:tabular-nums}
.card .pr{display:block; font-size:19px; font-weight:600; color:var(--gold-txt); margin-top:10px; font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- rodape */
.rodape{border-top:1px solid var(--border-soft); padding:var(--sp-4) 0 var(--sp-6); margin-top:var(--sp-8)}
.rodape a{color:var(--gold-min); text-decoration:none; font-size:13px; letter-spacing:.1em; text-transform:uppercase}
.rodape .end{font-size:12px; color:var(--muted); margin:var(--sp-2) 0 0}

/* ------------------------------------------------------------- lightbox */
/* O visor e a unica parte que segue preta: foto de carro se ve melhor sobre
   preto, e o resto da pagina fica coberto de qualquer jeito. Por isso ele nao
   usa os tokens claros da pagina — usaria texto escuro sobre fundo preto.
   dvh (e nao vh) porque no Safari do iPhone a barra de endereco recolhe e o
   vh continua contando a tela cheia: a foto ficava cortada embaixo. */
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.96);
  display:grid; place-items:center; padding:var(--sp-3);
  overscroll-behavior:contain;
}
.lightbox[hidden]{display:none}
.lightbox img{
  max-width:min(1200px,94vw);
  max-height:80vh; max-height:80dvh;
  object-fit:contain; border-radius:var(--r);
}
.lb-fechar,.lb-nav{
  position:absolute; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#fff; border-radius:var(--r); cursor:pointer; font-size:22px; line-height:1;
  width:46px; height:46px; display:grid; place-items:center; transition:.25s var(--ease);
}
.lb-fechar:hover,.lb-nav:hover{background:rgba(var(--gold-rgb),.18); color:var(--gold)}
.lb-fechar{top:var(--sp-3); right:var(--sp-3)}
.lb-nav.prev{left:var(--sp-3)}
.lb-nav.next{right:var(--sp-3)}
.lb-cont{
  position:absolute; bottom:var(--sp-3); left:50%; transform:translateX(-50%);
  font-size:12px; letter-spacing:.16em; color:rgba(255,255,255,.72);
  font-variant-numeric:tabular-nums;
}
/* No celular as setas roubam espaco da foto e o dedo ja passa arrastando. */
@media (max-width:620px){
  .lightbox{padding:var(--sp-2)}
  .lb-nav{display:none}
  .lightbox img{max-height:74vh; max-height:74dvh}
}

/* -------------------------------------------------------------- respiro */
@media (max-width:980px){
  .corpo{grid-template-columns:1fr; gap:var(--sp-6)}
  .contato{position:static}
}
@media (max-width:760px){
  body{font-size:16px}
  .hdr-nav{display:none}
  .regua{grid-template-columns:repeat(2,1fr)}
  .regua > div:nth-child(2n){border-right:none}
  .regua > div:nth-child(-n+2){border-bottom:1px solid var(--border-soft)}
}
@media (max-width:620px){
  .galeria{grid-template-columns:1fr}
  /* A coluna das miniaturas troca de eixo aqui, mas o aspect-ratio:2/3 dela
     continuava valendo: em largura cheia isso virava uma faixa altissima e
     as tres miniaturas esticavam pela tela toda. Some junto com as linhas. */
  .g-lado{grid-template-rows:none; grid-template-columns:repeat(3,1fr); aspect-ratio:auto}
  .g-tile{aspect-ratio:1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}