/* Shox Garagem: a vitrine pública. Mesmos espaços, raios, sombras e letras do app.css; a cor vem da loja (--marca...). */
body.vitrine { margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
.vit-largura { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.vit-demo { margin: 0; padding: 9px 16px; text-align: center; font-size: 14px; font-weight: 600; background: var(--azul); color: #1D4E9E; } .vit-demo a { color: #1D4E9E; text-decoration: underline; }
/* topo com a marca da loja */
.vit-topo { background: #fff; border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 20; }
.vit-topo .vit-largura { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.vit-marca { display: flex; align-items: center; gap: 12px; color: var(--tinta); min-width: 0; }
.vit-marca b { display: block; font-size: 17px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vit-marca small { display: block; font-size: 13px; color: var(--fraco); font-weight: 500; }
.vit-marca > span:last-child { min-width: 0; }
.vit-logo { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .02em; background: linear-gradient(145deg, var(--marca-escuro), var(--marca-forte)); }
.btn.whats { background: #0B6B3A; color: #fff; box-shadow: 0 8px 20px rgba(11,107,58,.25); text-align: center; } .btn.whats svg { flex: none; width: 20px; height: 20px; }
.vit-corpo { flex: 1; padding-top: 26px; padding-bottom: 56px; }
/* destaque */
.vit-heroi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 34px; margin-bottom: 22px; border-radius: 28px; border: 1px solid var(--linha); box-shadow: var(--sombra); background: linear-gradient(135deg, #fff 0%, var(--marca-claro) 100%); }
.vit-heroi h1 { font-size: clamp(28px, 4.4vw, 42px); line-height: 1.1; letter-spacing: -.03em; margin: 4px 0 10px; } .vit-heroi .lead { margin: 0 0 16px; max-width: 54ch; }
.vit-conta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0; font-size: 14px; color: var(--fraco); } .vit-conta strong { background: var(--marca-forte); color: #fff; padding: 6px 14px; border-radius: 99px; font-size: 14px; }
.vit-heroi-acao { display: grid; gap: 8px; justify-items: center; } .vit-heroi-acao small { color: var(--fraco); font-size: 13px; }
.vit-filtros { margin-bottom: 18px; } .vit-ordem { align-items: center; } .vit-rotulo { font-size: 13px; font-weight: 700; color: var(--fraco); }
/* cartões */
.vit-grade { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.vit-veic .veic-foto { aspect-ratio: 4 / 3; } .vit-veic h3 { color: var(--tinta); letter-spacing: -.01em; }
.vit-versao { margin: 0; color: var(--fraco); font-size: 14px; font-weight: 500; }
.vit-detalhes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; } .vit-detalhes span { background: var(--fundo); border-radius: 99px; padding: 4px 10px; font-size: 13px; font-weight: 600; color: var(--texto); }
.vit-ver { margin-top: 8px; font-weight: 700; font-size: 14px; color: var(--marca-escuro); }
.vit-veic:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; }
/* página do veículo */
.vit-volta { margin: 0 0 14px; font-weight: 700; } .vit-volta a { color: var(--marca-escuro); }
.vit-duas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 22px; align-items: start; }
.vit-esq, .vit-dir { display: grid; gap: 20px; min-width: 0; } .vit-dir { position: sticky; top: 88px; } .vit-duas .cartao { margin: 0; }
.vit-foto-grande { aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, #F8FAFC, #E3E9EF); border: 1px solid var(--linha); display: grid; place-items: center; box-shadow: var(--sombra); }
.vit-foto-grande img { width: 100%; height: 100%; object-fit: cover; display: block; } .vit-foto-grande .desenho-veic { width: 70%; }
.vit-legenda { margin: 8px 2px 0; font-size: 13px; color: var(--fraco); }
.vit-minis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; }
.vit-minis a { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: var(--fundo); display: block; } .vit-minis a.on { border-color: var(--marca-escuro); }
.vit-minis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vit-compra { display: grid; gap: 10px; } .vit-compra h1 { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; letter-spacing: -.02em; margin: 0; } .vit-compra p { margin: 0; }
.vit-preco { font-size: clamp(30px, 4vw, 38px); font-weight: 800; color: var(--tinta); letter-spacing: -.03em; margin: 4px 0 6px !important; }
.vit-compra .btn, .vit-largo, .vit-enviar { width: 100%; box-sizing: border-box; }
.vit-nota { font-size: 13px; color: var(--fraco); margin: 0; line-height: 1.5; } .vit-nota a { color: var(--marca-escuro); text-decoration: underline; }
.vit-dados { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .vit-dados > div { background: var(--fundo); border-radius: 14px; padding: 12px 14px; } .vit-dados dd { font-weight: 700; color: var(--tinta); font-size: 16px; margin-top: 2px; }
.vit-obs { white-space: pre-line; margin: 14px 0 0; line-height: 1.6; }
/* formulário e sucesso */
.vit-form form { display: grid; gap: 14px; margin-top: 4px; } .vit-form h2, .vit-sucesso h2 { font-size: 20px; margin: 0 0 4px; } .vit-form .dica { margin: 0 0 12px; }
.vit-form label { display: grid; gap: 6px; font-weight: 700; color: var(--tinta); font-size: 14px; } .vit-form label.marcar { display: flex; font-weight: 600; padding: 4px 0; }
.vit-form input:not([type=checkbox]), .vit-form textarea { font: inherit; font-size: 16px; padding: 13px 14px; border-radius: 14px; border: 1px solid #B8C4BE; background: #fff; color: var(--tinta); width: 100%; box-sizing: border-box; }
.vit-form input:focus, .vit-form textarea:focus { outline: 3px solid color-mix(in srgb, var(--marca) 35%, transparent); border-color: var(--marca-escuro); }
.vit-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vit-sucesso { display: grid; gap: 12px; border-color: #BFE5CD; background: linear-gradient(180deg, #F2FBF5, #fff 60%); } .vit-sucesso p { margin: 0; }
.vit-check { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #166534; color: #fff; font-size: 28px; font-weight: 800; animation: vit-pop .45s ease-out; }
@keyframes vit-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.vit-passos { margin: 0; padding-left: 22px; display: grid; gap: 6px; color: var(--texto); }
.vit-fim { max-width: 560px; margin: 40px auto; }
#interesse { scroll-margin-top: 92px; } .vit-form label > span { display: block; }
/* rodapé */
.vit-rodape { background: #fff; border-top: 1px solid var(--linha); padding: 26px 0 30px; font-size: 14px; color: var(--fraco); }
.vit-rodape .vit-largura { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .vit-rodape b { color: var(--tinta); font-size: 16px; } .vit-rodape p { margin: 6px 0 0; } .vit-rodape a { color: var(--marca-escuro); font-weight: 700; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .vit-check { animation: none; } .veic { transition: none; } }
@media (max-width: 860px) {
  .vit-duas { display: flex; flex-direction: column; } .vit-esq, .vit-dir { display: contents; } .vit-dir { position: static; }
  .vit-galeria { order: 1; } .vit-compra { order: 2; } .vit-esq > .cartao { order: 3; } .vit-form, .vit-sucesso { order: 4; } .vit-duas > * , .vit-duas .cartao, .vit-galeria { width: 100%; box-sizing: border-box; }
  .vit-sucesso { order: 2; } .vit-heroi { grid-template-columns: 1fr; padding: 24px 20px; border-radius: 22px; } .vit-heroi-acao { justify-items: stretch; text-align: center; } .vit-rodape .vit-largura { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .vit-largura { padding: 0 14px; } .vit-topo .btn.whats span { display: none; } .vit-topo .btn.whats { padding: 11px 13px; } .vit-grade { grid-template-columns: 1fr; }
  .vit-minis { grid-template-columns: repeat(4, 1fr); } .vit-duas .cartao { padding: 20px 16px; }
}