/* ══════════════════════════════════════════
   BASE — tokens e elementos comuns a todas as páginas
   (cores, tipografia, botões, wrapper, rodapé)
══════════════════════════════════════════ */
:root{
  --raio:3px; /* raio único para caixas, campos e botões */
  color-scheme:dark; /* controles nativos (selects, barras de rolagem padrão) no tema escuro */
  --bg:#161513;
  --bg-alt:#1E1C19;
  --surface:#242220;
  --rust:#D4AF37;
  --sand:#D8CCB8;
  --text:#EDE7DC;
  --text-dim:rgba(237,231,220,0.58);
  --line: rgba(237,231,220,0.12);
  /* dourado metálico: gradiente com um brilho suave, deslocado no hover (sem imagem nem JS) */
  --ouro-metal:linear-gradient(115deg,#a8801f 0%,#d4af37 22%,#f3dc8a 38%,#e2c25a 50%,#c99f2e 66%,#f0d57c 82%,#b38a24 100%);
  /* verde esmeralda: preço e simulação (sóbrio, conversa com o preto e o dourado) */
  --verde-preco:#8FCFAE;          /* verde claro, para texto sobre fundo escuro */
  --verde-preco-texto:#F3F0E6;    /* texto sobre o verde */
  --verde-base:#2A7556;
  --verde-fundo:linear-gradient(180deg,#2E7F5E 0%,#1F5C44 100%);
  --verde-borda:rgba(143,207,174,0.32);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Source Serif 4',serif;font-weight:500;margin:0;}
p{margin:0;}
a{text-decoration:none;color:inherit;}
.wrap{max-width:1220px;margin:0 auto;padding:0 32px;}
.eyebrow{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--rust);font-weight:600;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 26px;font-size:13px;font-weight:600;letter-spacing:0.02em;border-radius:var(--raio);transition:transform .2s ease, box-shadow .2s ease, background-position .6s ease, background-color .2s ease, border-color .2s ease, color .2s ease;cursor:pointer;}
.btn-rust{background:var(--ouro-metal);background-size:220% 100%;background-position:0% 50%;color:#161513;border:none;box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.25), 0 2px 10px rgba(0,0,0,0.35);text-shadow:0 1px 0 rgba(255,255,255,0.25);}
.btn-rust:hover{background-position:100% 50%;transform:translateY(-2px) scale(1.02);box-shadow:inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.25), 0 10px 26px rgba(212,175,55,0.32);}
.btn-rust:active{transform:translateY(0) scale(0.99);}
.btn-line{border:1px solid rgba(237,231,220,0.32);color:var(--text);background:transparent;}
.btn-line:hover{border-color:var(--rust);color:var(--rust);transform:translateY(-1px);background:rgba(212,175,55,0.06);}

.brand{font-family:'Source Serif 4',serif;font-weight:600;font-size:20px;}
.brand em{font-style:normal;color:var(--rust);}

/* Logo oficial (imagem real, fundo preto). height fixa + width:auto mantém a proporção 1683×935;
   width/height no HTML reservam o espaço (sem CLS). mix-blend-mode:lighten faz o preto da arte
   se fundir ao fundo escuro do site, sem "caixa" preta visível — as cores da arte não mudam. */
.brand{display:inline-flex;align-items:center;line-height:0;flex-shrink:0;isolation:isolate;background:var(--bg);margin:-18px 0;}
/* isolation+background: o header é translúcido com blur, então o blend precisa de um fundo opaco do mesmo tom.
   margem negativa: a logo avança sobre o padding do header (a faixa preta da própria arte some no blend),
   então ela cresce sem o header crescer na mesma proporção. */
.brand-logo{display:block;height:96px;width:auto;mix-blend-mode:lighten;}
.wrap.nav{padding-left:32px;padding-right:32px;} /* o padding vertical do .nav zerava o lateral do .wrap: logo e botão encostavam na borda abaixo de ~1220px */
.footer-logo{display:block;height:40px;width:auto;mix-blend-mode:lighten;}
@media (max-width:900px){
  .wrap.nav{padding-left:20px;padding-right:20px;}
  .brand{margin:-16px 0;}
  .brand-logo{height:76px;}
}
@media (max-width:600px){
  .brand{margin:-8px 0;}
  .brand-logo{height:60px;}
}
@media (max-width:359px){
  .brand{margin:-3px 0;}
  .brand-logo{height:50px;}
}

/* ══════════════════════════════════════════
   Estrutura comum às páginas: header, seções e rodapé
══════════════════════════════════════════ */
header{position:sticky;top:0;z-index:50;background:rgba(22,21,19,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px;}
.navlinks{display:flex;gap:30px;font-size:14px;}
.navlinks a{color:var(--text);opacity:0.8;transition:color .15s, opacity .15s;}
.navlinks a:hover,.navlinks a.active{color:var(--rust);opacity:1;}
.navlinks a.active{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;}

.section{padding:60px 0;}
.section-head{margin-bottom:28px;}
.section-head h2{font-size:28px;max-width:22ch;}
.section-head p{font-size:14px;color:var(--text-dim);margin-top:10px;max-width:50ch;}

/* link de texto com seta (ex.: "Ver todo o estoque") */
.menu-toggle{display:none;}
.nav-whats{gap:0;}
.link-seta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--rust);}
.link-seta::after{content:'→';transition:transform .15s ease;}
.link-seta:hover::after{transform:translateX(3px);}

footer{padding:22px 0;border-top:1px solid var(--line);font-size:12px;color:var(--text-dim);}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;}
.footer-info{display:flex;flex-direction:column;gap:4px;line-height:1.5;}
.footer-info a:hover{color:var(--rust);}

/* ══════════════════════════════════════════
   Foto do veículo (cards da home e do estoque)
   Caixa 4:5 (as fotos da loja são quase todas em pé, 3:4 e 9:16).
   Foto inteira (contain) com a própria foto desfocada nas sobras (--foto);
   se o formato for quase igual ao da caixa, preenche (.foto-cheia, js/fotos.js).
══════════════════════════════════════════ */
.veic-media{isolation:isolate;}
.veic-media::before{content:'';position:absolute;inset:-12%;background:var(--foto, none) center/cover no-repeat;filter:blur(18px) brightness(0.45) saturate(0.9);z-index:0;}
.veic-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center;display:block;transition:filter .3s ease;}
.veic-card:hover .veic-media img{filter:brightness(1.06);}
/* formato da foto quase igual ao da moldura: preenche (js/fotos.js decide; nunca estica) */
.veic-media img.foto-cheia,.modal-stage img.foto-cheia{object-fit:cover;}
@media (max-width:600px){
  .footer-inner{align-items:flex-end;}
  .so-desktop{display:none;}
  .nav-whats{padding:0 16px;}
}

/* Celular/tablet: seções mais compactas e menu no botão (fica no fim para vencer as regras gerais acima) */
@media (max-width:900px){
  .section{padding:48px 0;}
  .section-head{margin-bottom:22px;}
  .section-head h2{font-size:25px;}
  .nav{gap:10px;}
  .nav-whats{margin-left:auto;}
  .menu-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:46px;background:transparent;border:1px solid var(--line);border-radius:var(--raio);cursor:pointer;}
  .menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{display:block;width:18px;height:1.5px;background:var(--text);position:relative;transition:transform .2s ease, background .2s ease;}
  .menu-toggle span::before,.menu-toggle span::after{content:'';position:absolute;left:0;}
  .menu-toggle span::before{top:-6px;}
  .menu-toggle span::after{top:6px;}
  header.menu-aberto .menu-toggle span{background:transparent;}
  header.menu-aberto .menu-toggle span::before{transform:translateY(6px) rotate(45deg);}
  header.menu-aberto .menu-toggle span::after{transform:translateY(-6px) rotate(-45deg);}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:6px 20px 14px;background:var(--bg);border-bottom:1px solid var(--line);}
  header.menu-aberto .navlinks{display:flex;}
  .navlinks a{padding:14px 0;font-size:15px;border-bottom:1px solid var(--line);opacity:1;}
  .navlinks a:last-child{border-bottom:none;}
}

/* Foco visível nos cartões clicáveis (teclado) e aviso de veículo sem foto */
.veic-card:focus-visible,.cond-card:focus-visible{outline:2px solid var(--rust);outline-offset:2px;}
.sem-foto{position:relative;z-index:1;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-dim);}

/* ══════════════════════════════════════════
   Preço em destaque (verde esmeralda) — cards e ficha
══════════════════════════════════════════ */
.preco-tag{display:inline-flex;align-items:baseline;gap:2px;background:var(--verde-fundo);color:var(--verde-preco-texto);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;line-height:1;padding:8px 12px;border-radius:var(--raio);letter-spacing:0;border:1px solid var(--verde-borda);box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 8px rgba(0,0,0,0.25);}
.preco-tag.consulta{background:rgba(42,117,86,0.14);color:var(--verde-preco);font-size:13px;font-weight:600;box-shadow:none;border:1px solid var(--verde-borda);}

/* ══════════════════════════════════════════
   Botão flutuante "Estoque" (home)
══════════════════════════════════════════ */
.flutuante-estoque{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-size:14px;font-weight:700;letter-spacing:0.02em;color:#161513;background:var(--ouro-metal);background-size:220% 100%;box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 30px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.25);transition:transform .2s ease, background-position .6s ease, box-shadow .2s ease;white-space:nowrap;}
.flutuante-estoque:hover{background-position:100% 50%;transform:translateX(-50%) translateY(-3px) scale(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 16px 36px rgba(0,0,0,0.6), 0 0 24px rgba(212,175,55,0.3);}
.flutuante-estoque svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.flutuante-estoque .qtd{font-size:12px;font-weight:600;background:rgba(22,21,19,0.14);padding:3px 8px;border-radius:999px;}
.flutuante-estoque .qtd:empty{display:none;}
body.tem-flutuante footer{padding-bottom:96px;} /* o botão fixo não cobre o rodapé */
@media (prefers-reduced-motion:reduce){
  .btn,.flutuante-estoque{transition:none;}
}

/* texto só para leitores de tela */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.section-head-linha{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* ══════════════════════════════════════════
   Carrossel de avaliações (home, Diferenciais, Consignação) — js/avaliacoes.js
══════════════════════════════════════════ */
.aval-carrossel{position:relative;margin-top:36px;}
.aval-carrossel[hidden]{display:none;}
.aval-trilho{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:rgba(212,175,55,0.35) transparent;}
.aval-trilho:focus-visible{outline:2px solid rgba(212,175,55,0.6);outline-offset:4px;}
.aval-trilho::-webkit-scrollbar{height:6px;}
.aval-trilho::-webkit-scrollbar-track{background:transparent;}
.aval-trilho::-webkit-scrollbar-thumb{background:rgba(237,231,220,0.16);border-radius:6px;}
.aval-trilho::-webkit-scrollbar-thumb:hover{background:rgba(212,175,55,0.65);}
/* cada print mantém a própria proporção, com a mesma altura: parece uma vitrine */
.aval-print{--altura:250px;flex:0 0 auto;height:var(--altura);width:calc(var(--altura) * var(--proporcao, 1.9));max-width:min(560px, 86vw);margin:0;scroll-snap-align:start;background:#fff;border:1px solid rgba(212,175,55,0.25);border-radius:var(--raio);overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,0.35);}
.aval-print img{display:block;width:100%;height:100%;object-fit:contain;}
.aval-controles{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}
.aval-carrossel.cabe-tudo .aval-controles{display:none;}
.aval-nav{width:42px;height:42px;border-radius:50%;background:transparent;border:1px solid rgba(237,231,220,0.25);color:var(--text);font-size:20px;line-height:1;cursor:pointer;transition:border-color .2s, color .2s, background .2s;}
.aval-nav:hover{border-color:var(--rust);color:var(--rust);background:rgba(212,175,55,0.06);}
.aval-nav:focus-visible{outline:2px solid rgba(212,175,55,0.6);outline-offset:2px;}
.aval-carrossel.unico .aval-controles{display:none;}
.aval-carrossel.unico .aval-trilho{overflow:visible;padding-bottom:4px;}
@media (max-width:900px){
  .aval-print{--altura:210px;}
  .aval-carrossel{margin-top:26px;}
}
@media (max-width:600px){
  .aval-print{--altura:190px;}
}
@media (prefers-reduced-motion:reduce){
  .aval-trilho{scroll-behavior:auto;}
}

/* Card de veículo com link real para a página do carro (/veiculo/...): o link do título
   cobre o card inteiro (clique em qualquer ponto), e o botão "Financiar" fica por cima. */
.veic-card{position:relative;}
.veic-link{color:inherit;text-decoration:none;}
.veic-link::after{content:'';position:absolute;inset:0;z-index:2;}
.veic-link:focus-visible{outline:none;}
.veic-link:focus-visible::after{outline:2px solid var(--rust);outline-offset:2px;}
.veic-simular{position:relative;z-index:3;}

/* Instagram: botão flutuante discreto no canto direito (menor que o botão de WhatsApp do topo) */
.flutuante-instagram{position:fixed;right:max(16px, env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:45;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(22,21,19,0.92);border:1px solid rgba(212,175,55,0.55);color:var(--rust);box-shadow:0 8px 22px rgba(0,0,0,0.45);backdrop-filter:blur(6px);transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;}
.flutuante-instagram svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;}
.flutuante-instagram svg .ponto{fill:currentColor;stroke:none;}
.flutuante-instagram:hover{transform:translateY(-2px);border-color:var(--rust);color:#f3dc8a;background:rgba(22,21,19,0.98);}
.flutuante-instagram:focus-visible{outline:2px solid rgba(212,175,55,0.7);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){ .flutuante-instagram{transition:none;} .flutuante-instagram:hover{transform:none;} }
@media print{ .flutuante-instagram{display:none;} }
/* celular: na home o botão "Ver estoque" fica centralizado embaixo; o Instagram sobe um pouco para não encostar nele */
@media (max-width:600px){
  body:has(.flutuante-estoque) .flutuante-instagram{bottom:calc(84px + env(safe-area-inset-bottom));}
}
/* cada card isola as próprias camadas (o link que cobre o card não escapa para cima de outros blocos) */
.veic-card{isolation:isolate;}
/* atributo hidden sempre esconde, mesmo em elementos com display próprio (ex.: .btn) */
[hidden]{display:none !important;}
/* flutuantes recolhidos (js/menu.js): saem de cena sem pular nem piscar */
.flutuante-instagram,.flutuante-estoque{transition:opacity .25s ease, transform .25s ease, visibility .25s;}
.flutuante-instagram.recolhido{opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;}
.flutuante-estoque.recolhido{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(16px);pointer-events:none;}
@media (min-width:901px){ .flutuante-estoque{display:none;} body.tem-flutuante footer{padding-bottom:22px;} }
@media (max-width:1299px){ footer{padding-bottom:84px !important;} }
@media (prefers-reduced-motion:reduce){ .flutuante-instagram,.flutuante-estoque{transition:none;} }