/* =============================================================
   COSER PREMIUM CARS — camada visual "Graphite"
   Carregada DEPOIS do style.css: só sobrepõe. Para voltar ao visual do
   template, basta remover o <link> deste arquivo no includes/head.php.

   Direção: premium + tecnológico, na linha dos sites de marca automotiva.
   - Grotesca firme (Geist) nos títulos e textos; Geist Mono nos dados
     (preço, ano, km, rótulos). Nada de serifa nem itálico decorativo.
   - Grafite e branco; o dourado da logo é acento pontual (indicadores,
     foco, hover), nunca superfície.
   - Cantos retos, fios de 1px, grade técnica sutil nas áreas escuras.
   ============================================================= */

:root {
  --noir:    #0A0A0B;
  --noir-2:  #111113;
  --noir-3:  #19191C;
  --paper:   #F4F4F2;
  --paper-2: #EAEAE7;
  --ink:     #0A0A0B;
  --mute:    #6B6B70;
  --mute-d:  rgba(255, 255, 255, 0.56);
  --line-l:  rgba(10, 10, 11, 0.12);
  --line-d:  rgba(255, 255, 255, 0.09);
  --gold:    #C8A063;   /* acento da logo — só em detalhes */

  /* Tokens do template */
  --brand-700: #0A0A0B;           /* botões cheios no claro: preto */
  --brand-750: #26262A;
  --brand-800: #0A0A0B;
  --brand-400: #C8A063;
  --on-brand:  #FFFFFF;
  --brand-gradient: none;
  --white:    #FFFFFF;
  --gray-50:  #F4F4F2;
  --gray-100: #F4F4F2;

  /* Cantos levemente arredondados: firmes, sem cara de "bolha" */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px;
  --radius-btn: 8px; --radius-pill: 999px;
  --shadow-sm: none; --shadow-md: none;
  --shadow-lg: 0 24px 48px -28px rgba(0, 0, 0, 0.35);

  --font-display: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-sans:    'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --section-y: 104px;
  --focus-ring: 0 0 0 2px rgba(200, 160, 99, 0.6);
}
@media (max-width: 768px) { :root { --section-y: 68px; } }

body { background: var(--paper); color: var(--ink); font-size: 15px; letter-spacing: -0.003em; }

/* Raio padrão para o que esta camada desenhou por conta própria */
.search-input-wrap, .btn-busca, .loja-card-mapa { border-radius: var(--radius-btn); }
.kicker::before, .search-title::before, .phero__kicker::before { border-radius: 2px; }

::selection { background: var(--gold); color: var(--noir); }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
h3, h4 { letter-spacing: -0.02em; }
.section-header h2,
.localizacao-head h2,
.pserv__head h2,
.cta-card-text h2 {
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 600;
}
/* Rótulo técnico: mono, marcador quadrado dourado */
.kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 16px;
  gap: 10px;
}
.kicker::before { width: 6px; height: 6px; background: var(--gold); }

/* ---------- Botões ---------- */
.btn, .btn-busca, .vkintegradora-btn-estoque,
.btn-enviar, .btn-enviar-sidebar, .btn-aplicar, .btn-limpar, .btn-abrir-filtros {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.btn { padding: 16px 26px; gap: 10px; }
.btn svg { transition: transform .25s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary:hover, .btn:hover, .btn-busca:hover,
.btn-enviar:hover, .btn-enviar-sidebar:hover { background-color: var(--gold) !important; color: var(--noir) !important; border-color: var(--gold) !important; }
.btn-ghost { color: var(--ink); border-color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: #fff; }

/* ---------- Topbar ---------- */
.vkintegradora-topbar {
  background: var(--noir) !important;
  border-bottom: 1px solid var(--line-d);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* ---------- Header ---------- */
.vkintegradora-header { background: var(--noir) !important; border-bottom: 1px solid var(--line-d); }
.vkintegradora-header-content { padding: 16px 0; }
.vkintegradora-logo img { height: 46px; }
.vkintegradora-nav { gap: 6px; }
.vkintegradora-nav > a:not(.vkintegradora-btn-phone) {
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.6);
}
/* Indicador do item ativo: ponto dourado, não sublinhado */
.vkintegradora-nav > a:not(.vkintegradora-btn-phone)::before {
  left: 50%; right: auto; bottom: -6px; width: 4px; height: 4px;
  background: var(--gold); transform: translateX(-50%) scale(0);
}
.vkintegradora-nav > a:not(.vkintegradora-btn-phone):hover::before,
.vkintegradora-nav > a.active:not(.vkintegradora-btn-phone)::before { transform: translateX(-50%) scale(1); }
.vkintegradora-btn-estoque {
  padding: 12px 18px;
  background: #fff;
  color: var(--noir);
  border: 1px solid #fff;
}
.vkintegradora-btn-estoque:hover { background: var(--gold); border-color: var(--gold); color: var(--noir); }

/* =============================================================
   HERO ANIMADO — "ignição" do showroom
   Foto: Audi Q3 de frente no showroom (foto principal do anúncio).
   Sequência: cena no escuro → faróis acendem (com tremida de LED) →
   luzes do showroom sobem → texto entra → reflexo de luz varre a lataria
   (e repete a cada ~9s). Depois os faróis "respiram" devagar.
   As posições dos faróis são % da foto (1371×1028).
   Sem parallax de mouse: o Chrome dispara mousemove durante a rolagem e o
   carro deslizava de lado no meio do scroll.
   ============================================================= */
.phero {
  position: relative;
  height: min(76vh, 720px);
  min-height: 540px;
  background: var(--noir);
  overflow: hidden;
  isolation: isolate;
}
.phero__stage {
  position: absolute; top: 0; right: -7%; bottom: 0;   /* empurra a grade do carro para longe do título */
  aspect-ratio: 1371 / 1028;
  height: 100%;
  z-index: 0;          /* o degradê (::after) fica preso aqui, abaixo do texto */
  overflow: hidden;
}
.phero__stage::after {
  content: ""; position: absolute; inset: -2px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to right, var(--noir) 0%, rgba(10,10,11,.7) 9%, rgba(10,10,11,0) 30%),
    linear-gradient(to top, var(--noir) 0%, rgba(10,10,11,0) 30%);
}
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(10,10,11,.8) 0%, rgba(10,10,11,.35) 38%, transparent 60%);
}
/* Grade técnica sutil sobre o lado do texto */
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 55%);
  mask-image: linear-gradient(to right, #000 0%, transparent 55%);
}
.phero__car { position: absolute; inset: 0; }
.phero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero__img--off { animation: phero-lights 2.6s cubic-bezier(.4,0,.2,1) 1.1s both; }
.phero__img--on {
  -webkit-mask-image:
    radial-gradient(ellipse 15% 9.5% at 56.2% 47.2%, #000 55%, transparent 100%),
    radial-gradient(ellipse 4.5% 6.5% at 6.7% 41.6%, #000 50%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-image:
    radial-gradient(ellipse 15% 9.5% at 56.2% 47.2%, #000 55%, transparent 100%),
    radial-gradient(ellipse 4.5% 6.5% at 6.7% 41.6%, #000 50%, transparent 100%);
  mask-repeat: no-repeat;
  opacity: 0;
  animation: phero-ignite 1.1s steps(1, end) .45s forwards, phero-lights 2.6s cubic-bezier(.4,0,.2,1) 1.1s both;
}
@keyframes phero-lights { from { filter: brightness(.16) saturate(.6); } to { filter: brightness(1) saturate(1); } }
/* Ignição de LED: duas piscadas curtas e acende de vez ("welcome light") */
@keyframes phero-ignite {
  0% { opacity: 0; } 12% { opacity: 1; } 20% { opacity: .15; } 34% { opacity: 1; }
  42% { opacity: .4; } 55%, 100% { opacity: 1; }
}
.phero__glow {
  position: absolute; border-radius: 50% !important; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214, 232, 255, .55), rgba(170, 205, 255, .16) 55%, transparent);
  mix-blend-mode: screen; filter: blur(6px); opacity: 0;
  animation: phero-glow-in 1.2s ease-out 1.1s forwards, phero-breathe 4.5s ease-in-out 2.4s infinite;
}
.phero__glow--l { left: 57%; top: 47.5%; width: 38%; height: 22%; transform: translate(-50%, -50%); }
.phero__glow--r { left: 6.7%; top: 41.6%; width: 11%; height: 14%; transform: translate(-50%, -50%); }
@keyframes phero-glow-in { to { opacity: 1; } }
@keyframes phero-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.phero__sweep {
  position: absolute; inset: -10% -30%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(240, 246, 255, .12) 48%, rgba(240, 246, 255, .26) 50%, rgba(240, 246, 255, .12) 52%, transparent 58%);
  mix-blend-mode: soft-light;
  transform: translateX(-60%);
  animation: phero-sweep 9s cubic-bezier(.45,0,.25,1) 3.2s infinite;
}
@keyframes phero-sweep { 0% { transform: translateX(-60%); } 22%, 100% { transform: translateX(60%); } }

.phero__content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  max-width: var(--container-max);
}
.phero__content > * { max-width: 540px; opacity: 0; transform: translateY(18px); animation: phero-up .9s var(--ease-out) forwards; }
.phero__kicker {
  animation-delay: 2.0s !important;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute-d); display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
}
.phero__kicker::before { content: ""; width: 6px; height: 6px; background: var(--gold); }
.phero__title {
  animation-delay: 2.2s !important;
  font-size: clamp(42px, 4.5vw, 66px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.02;
  color: #fff; margin-bottom: 22px; max-width: 680px !important;
}
.phero__title span { display: block; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
@media (max-width: 340px) { .phero__title span { white-space: normal; } }
.phero__sub { animation-delay: 2.4s !important; color: var(--mute-d); font-size: 16px; line-height: 1.65; max-width: 440px; margin-bottom: 32px; }
.phero__ctas { animation-delay: 2.6s !important; display: flex; gap: 12px; flex-wrap: wrap; }
.phero .btn-primary { background: #fff; color: var(--noir); }
.phero__ghost { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important; }
.phero__ghost:hover { border-color: #fff !important; background: transparent !important; color: #fff !important; }
@keyframes phero-up { to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .phero { height: auto; min-height: 0; }
  .phero::before, .phero::after { display: none; }
  .phero__stage { position: relative; width: 100%; height: auto; }
  .phero__stage::after { background: linear-gradient(to top, var(--noir) 0%, rgba(10,10,11,0) 38%); }
  .phero__content { height: auto; margin-top: -56px; padding-bottom: 40px; }
  .phero__title { font-size: clamp(36px, 10.6vw, 60px); }
  .phero__sub { font-size: 15px; }
  .phero__ctas { flex-direction: column; width: 100%; max-width: none !important; }
  .phero__ctas .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .phero__img--off, .phero__img--on, .phero__glow, .phero__content > * { animation: none !important; opacity: 1; transform: none; filter: none; }
  .phero__sweep { display: none; }
}

/* ---------- Busca da home: painel flutuante sobre a base do banner ---------- */
.search-section { margin-top: -44px; padding: 0 var(--container-pad); background: transparent; position: relative; z-index: 5; }
/* O fundo claro da seção seguinte sobe por trás do painel */
.home-carousel + .search-section, .phero + .search-section { margin-top: -44px; }
.sbox {
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 1.6fr auto; align-items: stretch;
  background: #fff; border: 1px solid var(--line-l); border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 24px 48px -24px rgba(16,24,40,.28);
  padding: 8px; gap: 0;
}
.sbox__campo {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 12px 22px; position: relative; cursor: pointer; border-radius: var(--radius-md);
  transition: background-color .2s var(--ease-out);
}
.sbox__campo + .sbox__campo::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--line-l);
}
.sbox__campo:hover, .sbox__campo:focus-within { background: var(--paper); }
.sbox__campo:hover::before, .sbox__campo:focus-within::before,
.sbox__campo:hover + .sbox__campo::before, .sbox__campo:focus-within + .sbox__campo::before { opacity: 0; }
.sbox__rotulo {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute);
}
.sbox select, .sbox input {
  appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent;
  font-family: var(--font-sans); font-size: 15.5px; font-weight: 500; color: var(--ink);
  padding: 2px 22px 2px 0; width: 100%; cursor: pointer; letter-spacing: -0.01em;
}
.sbox input { cursor: text; padding-right: 0; }
.sbox input::placeholder { color: #9A9AA0; font-weight: 400; }
.sbox select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B70' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
.sbox__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; cursor: pointer; padding: 0 34px; min-height: 64px;
  background: var(--noir); color: #fff; border-radius: var(--radius-lg);
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  transition: background-color .25s var(--ease-out);
}
.sbox__btn:hover { background: #2A2A2E; }
.sbox__curto { display: none; }
.sbox__btn:focus-visible, .sbox select:focus-visible, .sbox input:focus-visible { outline: none; }
.sbox__btn:focus-visible { box-shadow: var(--focus-ring); }
.sbox__campo:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
/* A seção de estoque logo abaixo não precisa do respiro inteiro no topo */
.search-section + .vehicles-section { padding-top: 72px; }
@media (max-width: 900px) {
  .search-section { margin-top: -28px !important; }
  /* Celular: uma coluna. Cada campo é uma linha — rótulo à esquerda,
     valor à direita — separadas por fios, como uma ficha. */
  .sbox { grid-template-columns: 1fr; padding: 6px; border-radius: var(--radius-lg); }
  .sbox__campo {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 16px;
    padding: 0 14px; min-height: 54px; border-radius: var(--radius-sm);
  }
  .sbox__campo + .sbox__campo::before { left: 14px; right: 14px; top: 0; bottom: auto; width: auto; height: 1px; }
  .sbox__rotulo { flex-shrink: 0; width: 78px; }
  .sbox__longo { display: none; }
  .sbox__curto { display: inline !important; }
  .sbox select, .sbox input { font-size: 16px; text-align: right; text-align-last: right; padding-right: 20px; }
  .sbox input { padding-right: 0; }
  .sbox select { background-position: right 0 center; }
  .sbox__campo:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .sbox__btn { min-height: 52px; margin-top: 6px; border-radius: var(--radius-md); }
  .search-section + .vehicles-section { padding-top: 48px; }
}

/* ---------- Vitrine (home): fundo claro, igual à página de estoque ---------- */
.vehicles-section { background: var(--paper); color: var(--ink); }
.vehicles-section .section-header { border-bottom: 1px solid var(--line-l); margin-bottom: 40px; }
.vehicles-section .section-header h2 { color: var(--ink); }
.vehicles-section .aviso { color: var(--mute); }

.vehicles-cta { margin-top: 48px; }
.vehicles-section .vehicles-cta .btn { background: var(--noir); color: #fff; border: 1px solid var(--noir); }

/* ---------- Cards (todas as listas): ficha técnica ---------- */
.card-marca {
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0 0 6px;
}
.card-info h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  letter-spacing: -0.02em; text-transform: none;
}
.card-versao { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--mute); }
.card-specs span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; color: var(--mute); }
.card-info .preco, .preco-detalhe, .preco-bloco .preco, .info-titulo-preco .preco {
  font-family: var(--font-mono) !important; font-weight: 500 !important; letter-spacing: -0.02em !important;
}
.card-veiculo { border-color: var(--line-l); }
/* Hover sem contorno: a borda fica igual; quem reage é a foto (zoom leve) */
.card-veiculo:hover { transform: none; box-shadow: none; border-color: var(--line-l); }
.card-detalhes { font-family: var(--font-mono); font-weight: 500; letter-spacing: .04em; }

/* ---------- Serviços (home) ---------- */
.pserv { background: var(--paper); padding: var(--section-y) 0; border-top: 1px solid var(--line-l); }
.pserv__head { max-width: 720px; margin-bottom: 56px; }
.pserv__head h2 { color: var(--ink); }
.pserv__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-l); border-left: 1px solid var(--line-l); border-radius: var(--radius-lg); overflow: hidden; }
.pserv__item {
  padding: 32px 28px 36px; border-right: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l);
  background: transparent; transition: background-color .3s var(--ease-out);
}
.pserv__item:hover { background: #fff; }
.pserv__item svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; margin-bottom: 44px; }
.pserv__item h3 { font-size: 20px; margin-bottom: 10px; color: var(--ink); }
.pserv__item p { color: var(--mute); font-size: 14px; line-height: 1.6; }
@media (max-width: 1000px) { .pserv__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pserv__grid { grid-template-columns: 1fr; } .pserv__item svg { margin-bottom: 24px; } }

/* ---------- Localização ---------- */
.localizacao-section { background: var(--paper); padding-top: 0; }
.localizacao-head { border-bottom: 1px solid var(--line-l); margin-bottom: 40px; }
.localizacao-head h2 { color: var(--ink); }
.loja-card { background: var(--noir) !important; border: 1px solid var(--noir) !important; color: #fff; }
.loja-card:hover { transform: none !important; box-shadow: none !important; }
.loja-card-foto img { transition: transform 1s var(--ease-out); }
.loja-card:hover .loja-card-foto img { transform: scale(1.03); }
.loja-card-endereco { font-family: var(--font-display); font-size: 28px !important; font-weight: 600; letter-spacing: -0.03em; color: #fff !important; }
.loja-card-cidade, .loja-card-horario { color: var(--mute-d) !important; font-family: var(--font-mono); font-size: 12.5px !important; }
.loja-card-horario strong { color: #fff !important; font-weight: 500; }
.loja-card-tel a { color: #fff !important; font-family: var(--font-mono); }
.loja-card-tel svg, .loja-card-horario svg { color: var(--gold) !important; }
.loja-card-mapa { color: #fff !important; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; font-size: 11px !important; border: 1px solid rgba(255,255,255,.28); padding: 10px 14px; }
.loja-card-mapa:hover { border-color: var(--gold); text-decoration: none !important; color: #fff !important; }
.loja-card-local, .loja-card-horario, .loja-card-tel { border-color: var(--line-d) !important; }
.localizacao-section .loja-card-local { flex-direction: column; align-items: flex-start; gap: 16px; }
@media (min-width: 901px) {
  .localizacao-section .loja-card:only-child { min-height: 440px; }
  .localizacao-section .loja-card:only-child .loja-card-info { padding: 48px 52px; }
}

/* ---------- CTA ---------- */
.cta-section-vkintegradora { background: var(--paper); }
.cta-card { background: var(--noir); padding: 64px 64px; border: 0; }
.cta-card::before { display: block; inset: 0 auto auto 0; width: 64px; height: 2px; background: var(--gold); }
.cta-card-text h2 { color: #fff; margin-bottom: 14px; }
.cta-card-text p { color: var(--mute-d); font-size: 15px; max-width: 560px; }
.cta-card .btn-primary { background: #fff; color: var(--noir); }
@media (max-width: 900px) { .cta-card { padding: 44px 28px; } }

/* ---------- Rodapé ---------- */
.vkintegradora-footer { background: var(--noir) !important; border-top: 1px solid var(--line-d); }

/* ---------- Páginas internas ---------- */
.contato-hero, .page-hero, .estoque-hero { background: var(--noir) !important; }
.contato-hero h1, .page-hero h1, .estoque-hero h1 { color: #fff !important; font-size: clamp(38px, 4.6vw, 60px); }
.contato-hero .kicker { color: var(--mute-d); }
.contato-cards-section, .contato-lojas-section, .estoque-section, .detalhe-section, .sobre { background: var(--paper) !important; }
input, select, textarea { border-radius: var(--radius-btn); }
.btn-enviar, .btn-enviar-sidebar { background: var(--noir) !important; color: #fff !important; }

/* Numerais tabulares onde há dados */
.card-specs, .preco, .preco-detalhe, .loja-card-horario { font-variant-numeric: tabular-nums; }

/* Entrada suave das seções */
@media (prefers-reduced-motion: no-preference) {
  .premium-reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
  .premium-reveal.is-in { opacity: 1; transform: none; }
}

/* Onde o template usava a cor da marca sobre fundo PRETO (cookies, rodapé),
   o preto da marca sumiria: lá o acento é branco/dourado. */
.cookie-btn-primary { background: #fff !important; color: var(--noir) !important; border-color: #fff !important; }
.cookie-btn-primary:hover { background: var(--gold) !important; border-color: var(--gold) !important; }
.vkintegradora-social-btn:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--noir) !important; }
.vkintegradora-footer-links a::before { background: var(--gold) !important; }
.sobre-filete { background: var(--gold) !important; }

/* =============================================================
   CARD VERTICAL (mesmo formato do site da BH)
   Foto 4:3 inteira em cima (as fotos do feed são 4:3, então não há corte),
   e embaixo: marca, modelo, versão, ano · km · câmbio, um fio e o preço.
   Home: 4 por linha. Estoque: 3 por linha ao lado dos filtros.
   ============================================================= */
.slider-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.grid-veiculos,
.estoque-layout .grid-veiculos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1200px) {
  .slider-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .estoque-layout .grid-veiculos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .grid-veiculos, .estoque-layout .grid-veiculos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .slider-track,
  .grid-veiculos, .estoque-layout .grid-veiculos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .slider-track,
  .grid-veiculos, .estoque-layout .grid-veiculos { grid-template-columns: 1fr; }
}

.card-veiculo,
.grid-veiculos .card-veiculo,
.slider-track .card-veiculo {
  --card-foto-w: 100%; --card-alt: 0px;
  background: #fff;
  contain-intrinsic-size: auto 420px;
}
.card-veiculo > a { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; height: 100%; }
.card-veiculo .card-foto { aspect-ratio: 4 / 3; }
.card-veiculo .card-info,
.slider-track .card-info {
  padding: 20px 20px 22px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto auto;
  grid-template-areas: "titulo" "versao" "specs" "." "preco" "detalhes";
  align-content: stretch;
  column-gap: 0;
}
.card-veiculo .card-info h3 { font-size: 20px; margin-bottom: 4px; }
.card-veiculo .card-versao { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-veiculo .card-specs { margin: 14px 0 0 !important; padding: 0; border: 0; gap: 2px 6px; }
/* Specs na grotesca (mais estreita que a mono): "2021 · 79.000 km · Automatizada DCT"
   cabe numa linha no card de 4 colunas */
.card-veiculo .card-specs span { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: #3A3A3F; letter-spacing: -0.005em; }
.card-veiculo .card-info .preco {
  grid-area: preco;
  margin: 16px 0 0 !important; padding-top: 16px; border-top: 1px solid var(--line-l);
  text-align: left; justify-self: stretch; align-self: end;
  font-size: 22px;
}
.card-veiculo .card-loja { display: none !important; }

/* Marca e modelo na mesma linha: "AUDI Q3" — a marca em versalete mono,
   menor e cinza, alinhada pela base do modelo. */
.card-veiculo .card-marca {
  display: inline; margin: 0 8px 0 0; vertical-align: baseline;
  font-size: 12px; letter-spacing: .06em;
}
.card-veiculo .card-info h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Botão "Ver veículo" no pé do card. É um <span>: o card inteiro já é o
   link, e <a> dentro de <a> é inválido. Visualmente é um botão cheio. */
.card-veiculo .card-detalhes {
  grid-area: detalhes;
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  justify-self: stretch; align-self: end;
  margin-top: 16px; padding: 13px 16px;
  background: var(--noir); color: #fff;
  border-radius: var(--radius-btn);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em; text-transform: none;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.card-veiculo .card-detalhes svg { transition: transform .25s var(--ease-out); }
/* Hover: cinza quase preto (sutil, sem trocar de cor) */
.card-veiculo:hover .card-detalhes { background: #2A2A2E; color: #fff; }
.card-veiculo:hover .card-detalhes svg { transform: translateX(3px); }