/* Vitrine pública das garagens — CSS próprio (sem build). As cores da marca entram por
   variáveis (--cor / --cor2 / --cor3) definidas inline no layout a partir do branding. */
:root { --cor:#e11d2a; --cor2:#0f172a; --cor3:#e11d2a; --bg:#f4f5f7; --card:#fff; --ink:#15181d; --muted:#697079; --line:#e6e8ec; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.vt-wrap { max-width:1200px; margin:0 auto; padding:0 20px; }

/* ---------- Header ---------- */
.vt-header { position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); }
.vt-header-in { display:flex; align-items:center; gap:16px; height:68px; }
.vt-brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; }
.vt-brand img { height:40px; width:auto; }
.vt-nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.vt-nav a { padding:9px 12px; border-radius:9px; font-size:14px; font-weight:600; color:#39414b; }
.vt-nav a:hover { background:var(--bg); }
.vt-nav a.on { color:var(--cor); }
.vt-cta { background:#22c55e!important; color:#fff!important; }
.vt-burger,.vt-burger-cb { display:none; }

/* ---------- Hero ---------- */
/* Fundo = foto de carro do estoque com overlay escuro FIXO (não usa a cor da marca, pra
   garantir contraste do texto). A cor da marca aparece só no botão de busca. */
.vt-hero { position:relative; background:#0b0f17; color:#fff; overflow:hidden; }
.vt-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.vt-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(8,11,18,.96) 0%, rgba(8,11,18,.82) 45%, rgba(8,11,18,.42) 100%); }
.vt-hero-in { position:relative; z-index:2; padding:64px 0 72px; }
.vt-hero h1 { font-size:40px; line-height:1.08; margin:0 0 12px; font-weight:800; text-shadow:0 2px 18px rgba(0,0,0,.4); }
.vt-hero p { font-size:17px; color:#e2e7ee; margin:0 0 26px; max-width:560px; }
.vt-search { display:flex; gap:8px; max-width:560px; background:#fff; padding:8px; border-radius:14px; }
.vt-search input { flex:1; border:0; outline:0; font-size:16px; padding:10px 12px; color:var(--ink); background:transparent; }
.vt-search button { border:0; cursor:pointer; background:var(--cor); color:#fff; font-weight:700; padding:0 22px; border-radius:10px; font-size:15px; }

/* ---------- Sections ---------- */
.vt-sec { padding:44px 0; }
.vt-sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.vt-sec-head h2 { font-size:24px; margin:0; font-weight:800; }
.vt-link { color:var(--cor); font-weight:700; font-size:14px; }

/* ---------- Grid de carros ---------- */
.vt-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.vt-card { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s; }
.vt-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.10); }
.vt-card-img { aspect-ratio:4/3; position:relative; overflow:hidden; background:#eceef1; }
.vt-card-img img { width:100%; height:100%; object-fit:cover; }
.vt-card-noimg { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#aab; font-size:13px; }
.vt-brandtag { position:absolute; top:8px; left:8px; background:#fff; border-radius:8px; padding:4px 8px; font-size:11px; font-weight:800; box-shadow:0 2px 8px rgba(0,0,0,.12); display:flex; align-items:center; gap:5px; }
.vt-brandtag img { height:16px; width:auto; }
.vt-card-body { padding:13px 14px 15px; display:flex; flex-direction:column; gap:8px; flex:1; }
.vt-card-title { font-weight:800; font-size:15px; line-height:1.25; }
.vt-card-sub { color:var(--muted); font-size:12.5px; }
.vt-specs { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.vt-spec { background:var(--bg); border-radius:7px; padding:3px 8px; font-size:11.5px; color:#3a424c; font-weight:600; }
.vt-card-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:6px; }
.vt-price { font-weight:800; font-size:18px; color:#15181d; }
.vt-whats { background:#22c55e; color:#fff; font-weight:700; font-size:13px; padding:8px 12px; border-radius:9px; white-space:nowrap; }

/* ---------- Estoque (sidebar de filtros) ---------- */
.vt-estoque { display:grid; grid-template-columns:264px 1fr; gap:24px; align-items:start; }
.vt-filtros { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:14px; position:sticky; top:84px; }
.vt-filtro { display:flex; flex-direction:column; gap:6px; }
.vt-filtro > label { font-size:12px; font-weight:700; color:#39414b; text-transform:uppercase; letter-spacing:.3px; }
.vt-filtro input[type=text],.vt-filtro input[type=number],.vt-filtro select { width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 10px; font-size:14px; background:#fff; color:var(--ink); outline:0; }
.vt-filtro input:focus,.vt-filtro select:focus { border-color:var(--cor); }
.vt-filtro-row { display:flex; gap:8px; }
.vt-checks { display:flex; flex-direction:column; gap:7px; max-height:170px; overflow:auto; padding-right:4px; }
.vt-check { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:#39414b; cursor:pointer; }
.vt-filtro-acoes { display:flex; gap:8px; margin-top:4px; }
.vt-btn-filtrar { flex:1; background:var(--cor); color:#fff; border:0; border-radius:10px; padding:11px; font-weight:700; font-size:14px; cursor:pointer; }
.vt-btn-limpar { padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-weight:600; font-size:14px; color:var(--muted); }
.vt-estoque-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; color:var(--muted); font-size:14px; }
.vt-ordenar { border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:14px; font-weight:600; background:#fff; color:var(--ink); }
.vt-grid-3 { grid-template-columns:repeat(3,1fr); }
.vt-filtros-cb,.vt-filtros-toggle { display:none; }
@media (max-width:980px){ .vt-grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:760px){
  .vt-estoque{grid-template-columns:1fr;}
  .vt-filtros-toggle{display:inline-block; background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 16px; font-weight:700; cursor:pointer; margin-bottom:14px;}
  .vt-filtros{display:none; position:static;}
  .vt-filtros-cb:checked ~ .vt-filtros{display:flex;}
}

/* ---------- Tags (marcas/modelos) ---------- */
.vt-tags { display:flex; flex-wrap:wrap; gap:8px; }
.vt-tag { background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13px; font-weight:600; }
.vt-tag:hover { border-color:var(--cor); color:var(--cor); }

/* ---------- Instagram ---------- */
.vt-ig { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.vt-ig-ph { aspect-ratio:1; background:#e9ebef; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#9aa3ad; font-size:22px; }

/* ---------- Footer ---------- */
.vt-footer { background:#0f172a; color:#cdd4de; margin-top:30px; border-top:3px solid var(--cor); }
.vt-footer a { color:#cdd4de; }
.vt-footer a:hover { color:#fff; }
.vt-foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:30px; padding:46px 0 34px; }
.vt-foot h4 { color:#fff; font-size:14px; margin:0 0 14px; text-transform:uppercase; letter-spacing:.4px; }
.vt-foot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14px; }
.vt-foot .vt-tags .vt-tag { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#dfe5ee; }
.vt-foot-brand img { height:46px; margin-bottom:12px; }
.vt-social { display:flex; gap:10px; }
.vt-social a { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.vt-foot-bottom { border-top:1px solid rgba(255,255,255,.1); padding:18px 0; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:#9aa3ad; }
.vt-foot-bottom a { color:#fff; font-weight:700; }

/* ---------- Página do veículo ---------- */
.vt-det { display:grid; grid-template-columns:1.6fr 1fr; gap:26px; margin-top:16px; }
.vt-det-main { background:#eceef1; border-radius:14px; overflow:hidden; aspect-ratio:4/3; }
.vt-det-main img { width:100%; height:100%; object-fit:cover; }
.vt-det-thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
.vt-det-thumbs img { aspect-ratio:1; object-fit:cover; border-radius:9px; background:#eceef1; cursor:pointer; border:2px solid transparent; transition:border-color .12s; }
.vt-det-thumbs img:hover { border-color:var(--line); }
.vt-det-thumbs img.on { border-color:var(--cor); }
.vt-det-info h1 { font-size:26px; margin:0 0 4px; }
.vt-det-price { font-size:28px; font-weight:800; color:#15181d; margin:14px 0; }
.vt-det-cta { display:block; text-align:center; padding:14px; font-size:15px; }
.vt-ficha { margin-top:18px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.vt-ficha-row { display:flex; justify-content:space-between; gap:12px; padding:11px 14px; font-size:14px; border-bottom:1px solid var(--line); }
.vt-ficha-row:last-child { border-bottom:0; }
.vt-ficha-row span { color:var(--muted); }
.vt-opc { margin-top:30px; }
.vt-opc h3 { font-size:18px; margin:0 0 12px; }
@media (max-width:680px){ .vt-det{grid-template-columns:1fr;} .vt-det-thumbs{grid-template-columns:repeat(4,1fr);} }

/* ---------- Formulários (lead) ---------- */
.vt-form-wrap { max-width:620px; }
.vt-form-sub { color:var(--muted); margin:0 0 24px; font-size:16px; }
.vt-form { background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:14px; }
.vt-form-row { display:flex; gap:14px; }
.vt-form-row .vt-field { flex:1; }
.vt-field { display:flex; flex-direction:column; gap:6px; }
.vt-field label { font-size:13px; font-weight:700; color:#39414b; }
.vt-field input,.vt-field textarea { border:1px solid var(--line); border-radius:9px; padding:11px 12px; font-size:15px; font-family:inherit; color:var(--ink); outline:0; background:#fff; }
.vt-field input:focus,.vt-field textarea:focus { border-color:var(--cor); }
.vt-field textarea { resize:vertical; }
.vt-form-btn { align-self:flex-start; background:var(--cor); color:#fff; border:0; border-radius:10px; padding:13px 28px; font-weight:700; font-size:15px; cursor:pointer; }
.vt-ok { background:#dcfce7; border:1px solid #86efac; color:#166534; border-radius:12px; padding:14px 16px; margin-bottom:18px; font-weight:600; }
.vt-err { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; border-radius:10px; padding:11px 13px; font-size:14px; }
.vt-contato { display:grid; grid-template-columns:1.7fr 1fr; gap:30px; align-items:start; }
.vt-contato-info { background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; }
.vt-contato-info h3 { margin:0 0 14px; font-size:16px; }
.vt-contato-info ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; font-size:15px; }
@media (max-width:760px){ .vt-form-row{flex-direction:column;} .vt-contato{grid-template-columns:1fr;} }

/* ---------- Páginas simples / em construção ---------- */
.vt-page { padding:48px 0 60px; min-height:40vh; }
.vt-page h1 { font-size:30px; margin:0 0 8px; }
.vt-soon { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; color:var(--muted); }
.vt-empty { background:var(--card); border:1px dashed var(--line); border-radius:14px; padding:40px; text-align:center; color:var(--muted); }

/* ---------- Paginação ---------- */
.vt-pag { display:flex; gap:6px; flex-wrap:wrap; margin-top:26px; }
.vt-pag a,.vt-pag span { padding:8px 12px; border-radius:9px; border:1px solid var(--line); background:#fff; font-size:14px; font-weight:600; }
.vt-pag .current { background:var(--cor); color:#fff; border-color:var(--cor); }

/* ---------- Responsivo ---------- */
@media (max-width:980px){ .vt-grid{grid-template-columns:repeat(3,1fr);} .vt-foot-grid{grid-template-columns:1fr 1fr;} .vt-ig{grid-template-columns:repeat(4,1fr);} }
@media (max-width:680px){
  .vt-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
  .vt-hero h1{font-size:28px;} .vt-hero-in{padding:38px 0 44px;}
  .vt-ig{grid-template-columns:repeat(3,1fr);}
  .vt-foot-grid{grid-template-columns:1fr; gap:24px;}
  .vt-burger{display:flex; margin-left:auto; width:42px;height:42px;align-items:center;justify-content:center;font-size:24px;cursor:pointer;}
  .vt-nav{position:fixed; inset:68px 0 auto 0; background:#fff; flex-direction:column; align-items:stretch; gap:0; padding:8px; border-bottom:1px solid var(--line); margin-left:0; display:none; box-shadow:0 12px 24px rgba(0,0,0,.08);}
  .vt-nav a{padding:13px 14px; border-radius:10px;}
  .vt-burger-cb:checked ~ .vt-nav{display:flex;}
}