/* ==========================================================================
   MultCar Veículos — Nova Andradina, MS
   Paleta: preto e branco com o vermelho da marca (#a71818), tirado do site
   antigo. A logo é branca de fundo transparente, feita pra fundo escuro —
   por isso o site inteiro é escuro, e não o contrário.
   Tipografia: Montserrat nos títulos (a do site antigo), Roboto no texto e
   Roboto Mono nos números (ano, km, preço) — número de estoque é dado, e
   dado alinha melhor em monoespaçada.
   ========================================================================== */

:root {
  --carvao: #0c0c0d;
  --grafite: #141518;
  --grafite-alto: #1b1d21;
  --linha: #26282e;
  --branco: #ffffff;
  --cinza: #9b9ea6;
  --cinza-claro: #d6d8dd;

  /* #a71818 é a cor da marca e vive nos preenchimentos (branco em cima dele
     passa folgado em contraste). Como TEXTO sobre o carvão ele fica baixo
     demais, então links e bordas usam o vermelho vivo. */
  --vermelho: #a71818;
  --vermelho-escuro: #8a1212;
  --vermelho-vivo: #e02424;
  --vermelho-veu: rgba(167, 24, 24, 0.16);

  --raio: 4px;
  --raio-grande: 10px;
  --largura: 1200px;
  --topo-altura: 76px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--carvao);
  color: var(--cinza-claro);
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.sem-rolagem {
  overflow: hidden;
}

h1, h2, h3, h4 {
  font-family: "Montserrat", "Roboto", sans-serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--branco);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0 0 1em;
}

:focus-visible {
  outline: 2px solid var(--vermelho-vivo);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 20px;
}

/* Olho: rótulo curto que abre seção. Serve pra dizer o que vem, não pra
   enfeitar — por isso sempre carrega informação (o tipo, o lugar, o ano). */
.olho {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermelho-vivo);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.olho::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--vermelho);
}

.secao {
  padding: 92px 0;
}

.secao-clara {
  background: var(--grafite);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

.secao-titulo {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 12px;
}

.secao-texto {
  color: var(--cinza);
  max-width: 62ch;
  margin-bottom: 0;
}

.secao-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

/* ============================== BOTÕES ============================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--raio);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  /* <button> herda o cinza-claro padrão do navegador se ninguém pintar o
     fundo — foi assim que "Filtros" e "Limpar" nasceram brancos. */
  background: transparent;
  color: var(--branco);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.btn-vermelho {
  background: var(--vermelho);
  color: var(--branco);
}

.btn-vermelho:hover {
  background: var(--vermelho-escuro);
}

.btn-contorno {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--branco);
}

.btn-contorno:hover {
  border-color: var(--branco);
  background: rgba(255, 255, 255, 0.07);
}

.btn-bloco {
  width: 100%;
}

/* ============================== TOPO ============================== */

/* Faixa de serviço: cidade e horário ficam visíveis antes de qualquer rolagem,
   porque quem chega de anúncio quer saber onde é e se está aberto. */
.faixa-servico {
  background: #000;
  border-bottom: 1px solid var(--linha);
  font-size: 13px;
  color: var(--cinza);
}

.faixa-servico .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 38px;
  flex-wrap: wrap;
}

.faixa-servico-itens {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.faixa-servico-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.faixa-servico-item svg {
  width: 14px;
  height: 14px;
  color: var(--vermelho-vivo);
  flex: none;
}

.faixa-servico a:hover {
  color: var(--branco);
}

.faixa-redes {
  display: flex;
  gap: 12px;
}

.faixa-redes a {
  display: inline-flex;
  color: var(--cinza);
  transition: color 0.18s ease;
}

.faixa-redes a:hover {
  color: var(--branco);
}

.faixa-redes svg {
  width: 17px;
  height: 17px;
}

.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(12, 12, 13, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.topo.solido {
  background: rgba(12, 12, 13, 0.97);
  border-bottom-color: var(--linha);
}

.topo .container {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--topo-altura);
}

.logo img {
  height: 40px;
  width: auto;
}

.menu {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
}

.menu a {
  color: var(--cinza-claro);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.menu a:hover {
  color: var(--branco);
}

.menu a.ativo {
  color: var(--branco);
  border-bottom-color: var(--vermelho);
}

.topo-zap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: var(--raio);
  background: var(--vermelho);
  color: var(--branco);
  font-family: "Roboto Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.18s ease;
}

.topo-zap:hover {
  background: var(--vermelho-escuro);
}

.topo-zap svg {
  width: 17px;
  height: 17px;
}

.menu-abrir {
  display: none;
  background: none;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--branco);
  width: 44px;
  height: 44px;
  margin-left: auto;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.menu-abrir svg {
  width: 22px;
  height: 22px;
}

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--carvao);
  padding: 22px 20px 32px;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-mobile.aberto {
  transform: translateX(0);
}

.menu-mobile-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.menu-mobile-topo img {
  height: 38px;
  width: auto;
}

.menu-mobile-fechar {
  background: none;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--branco);
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.menu-mobile-fechar svg {
  width: 22px;
  height: 22px;
  margin: auto;
}

.menu-mobile nav {
  display: flex;
  flex-direction: column;
}

.menu-mobile nav a {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--branco);
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
}

.menu-mobile .btn {
  margin-top: 24px;
}

/* ============================== CAPA ============================== */

.capa {
  position: relative;
  padding: clamp(84px, 11vw, 132px) 0 clamp(104px, 13vw, 148px);
  overflow: hidden;
}

/* A foto do pátio fica atrás, escurecida. Se o arquivo faltar, sobra o
   degradê e o layout não quebra. */
.capa-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.capa-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  opacity: 0.82;
}

.capa-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(12, 12, 13, 0.88) 0%, rgba(12, 12, 13, 0.7) 34%, rgba(12, 12, 13, 0.28) 68%, rgba(12, 12, 13, 0.1) 100%),
    linear-gradient(180deg, rgba(12, 12, 13, 0.3) 0%, transparent 30%, rgba(12, 12, 13, 0.72) 100%);
}

.capa .container {
  position: relative;
  z-index: 1;
}

.capa-texto {
  max-width: 760px;
}

.capa h1 {
  font-size: clamp(38px, 6.6vw, 68px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.capa h1 em {
  font-style: normal;
  color: var(--vermelho-vivo);
}

.capa-linha {
  font-size: 18px;
  color: var(--cinza-claro);
  max-width: 54ch;
  margin: 20px 0 0;
}

.capa-botoes {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}


/* ============================== BUSCA ==============================
   O cartão sobe por cima da capa: quem chega já escolhe tipo, marca, modelo e
   faixa de preço, e cai no estoque com o filtro pronto. As opções saem do
   próprio estoque — só aparece o que a loja tem. */

.busca {
  position: relative;
  z-index: 2;
  margin-top: -56px;
}

.busca-card {
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 16px;
  align-items: end;
}

.busca-campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.busca-campo label {
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza);
}

.busca-campo select {
  width: 100%;
  background: var(--carvao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--branco);
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  cursor: pointer;
  text-overflow: ellipsis;
}

.busca-card .btn {
  height: 46px;
  white-space: nowrap;
}

/* ============================== CONFIANÇA ============================== */

.confianca {
  padding: 54px 0 0;
}

.confianca-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}

.confianca-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.confianca-item svg {
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--vermelho-vivo);
}

.confianca-item strong {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 15.5px;
  color: var(--branco);
  margin-bottom: 3px;
}

.confianca-item span {
  font-size: 14px;
  color: var(--cinza);
  line-height: 1.5;
}

/* ============================== SOBRE (home) ============================== */

.sobre-home {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 52px;
  align-items: center;
}

.sobre-home-btn {
  margin-top: 28px;
}

.sobre-home-foto {
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--grafite-alto);
}

.sobre-home-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================== CHAMADA ============================== */

.chamada {
  background: var(--vermelho);
  color: var(--branco);
}

.chamada .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 46px;
  padding-bottom: 46px;
}

.chamada h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 6px;
}

.chamada p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

.chamada-acoes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Dentro da faixa vermelha o botão vermelho sumiria: inverte pra branco. */
.chamada .btn-vermelho {
  background: var(--branco);
  color: var(--vermelho);
}

.chamada .btn-vermelho:hover {
  background: rgba(255, 255, 255, 0.88);
}

.chamada .btn-contorno {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--branco);
}

.chamada .btn-contorno:hover {
  border-color: var(--branco);
  background: rgba(255, 255, 255, 0.14);
}

/* Assinatura do MotriX — mesma do site da JR Motors e da Xavier. */
.rodape-motrix {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.rodape-motrix img {
  height: 20px;
  width: auto;
  opacity: 0.8;
  transition: opacity 0.18s ease;
}

.rodape-motrix a:hover img {
  opacity: 1;
}

/* ============================== CARDS ============================== */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(276px, 100%), 1fr));
  gap: 22px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.card:hover {
  border-color: rgba(224, 36, 36, 0.55);
  transform: translateY(-3px);
}

/* `aspect-ratio` sozinho é só a proporção PREFERIDA: foto tirada em pé tem
   altura própria maior e empurra a caixa, e o card saía quase o dobro do
   vizinho. O `overflow: hidden` zera o mínimo automático da caixa, e aí a
   proporção manda — todas as fotos do mesmo tamanho, cortadas pelo centro. */
.card-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--grafite-alto);
}

.card-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-sem-foto {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--cinza);
  font-size: 14px;
}

.card-tipo,
.card-selo {
  position: absolute;
  top: 12px;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
}

.card-tipo {
  left: 12px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--branco);
  border: 1px solid var(--linha);
}

.card-selo {
  right: 12px;
  background: var(--vermelho);
  color: var(--branco);
}

.card-corpo {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.card-ano {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--vermelho-vivo);
}

.card h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.card-ficha {
  font-size: 13.5px;
  color: var(--cinza);
  margin: 0;
}

.card-rodape {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--linha);
}

.card-preco {
  font-family: "Roboto Mono", monospace;
  font-size: 19px;
  font-weight: 700;
  color: var(--branco);
}

.card-seta {
  color: var(--vermelho-vivo);
  font-size: 18px;
  transition: transform 0.18s ease;
}

.card:hover .card-seta {
  transform: translateX(4px);
}

.estado-vazio {
  grid-column: 1 / -1;
  padding: 56px 24px;
  text-align: center;
  color: var(--cinza);
  background: var(--grafite);
  border: 1px dashed var(--linha);
  border-radius: var(--raio-grande);
}

.estado-vazio a {
  color: var(--vermelho-vivo);
  font-weight: 700;
}

/* ============================== GRUPO ============================== */

.grupo-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  overflow: hidden;
}

.grupo-item {
  background: var(--carvao);
  padding: 32px 26px;
}

.grupo-item h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.grupo-item p {
  color: var(--cinza);
  font-size: 15px;
  margin: 0;
}

.grupo-item-marca {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  color: var(--vermelho-vivo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

/* ============================== TROCA ============================== */

.troca {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.troca-lista {
  list-style: none;
  padding: 0;
  margin: 26px 0 30px;
  display: grid;
  gap: 14px;
}

.troca-lista li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--cinza-claro);
}

.troca-lista svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  color: var(--vermelho-vivo);
}

.troca-caixa {
  background: var(--carvao);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--vermelho);
  border-radius: var(--raio-grande);
  padding: 34px 30px;
}

.btn-segundo {
  margin-top: 10px;
}

.troca-caixa h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.troca-caixa p {
  color: var(--cinza);
  font-size: 15px;
}

/* ============================== CONTATO ============================== */

.contato-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  margin-bottom: 34px;
}

.contato-item {
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  padding: 26px 24px;
}

.contato-item h3 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  color: var(--cinza);
  font-weight: 700;
}

.contato-item p,
.contato-item a {
  margin: 0;
  color: var(--branco);
  font-size: 16px;
  line-height: 1.5;
}

.contato-item a:hover {
  color: var(--vermelho-vivo);
}

.contato-item .mono {
  font-family: "Roboto Mono", monospace;
}

/* O mapa fica aceso, em cores. Ele estava em cinza pra combinar com o fundo
   escuro, mas quem procura a loja precisa reconhecer as ruas de relance. */
.mapa {
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  overflow: hidden;
}

.mapa iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
}

/* ============================== RODAPÉ ============================== */

.rodape {
  background: #000;
  border-top: 1px solid var(--linha);
  padding: 62px 0 26px;
}

.rodape-grade {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--linha);
}

.rodape-logo img {
  height: 42px;
  width: auto;
  margin-bottom: 18px;
}

.rodape p {
  color: var(--cinza);
  font-size: 14.5px;
}

.rodape h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--branco);
  margin-bottom: 16px;
}

.rodape-links {
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  color: var(--cinza);
}

.rodape-links a:hover {
  color: var(--branco);
}

/* O versículo estava no rodapé do site antigo. É identidade do dono, não
   enfeite — fica, com o mesmo peso de sempre. */
.versiculo {
  font-family: "Montserrat", sans-serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--cinza);
  border-left: 2px solid var(--vermelho);
  padding-left: 14px;
  margin: 0;
}

.rodape-fim {
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #6f727a;
}

.rodape-fim a:hover {
  color: var(--cinza-claro);
}

/* ============================== ESTOQUE ============================== */

.pagina-titulo {
  padding: 46px 0 30px;
  border-bottom: 1px solid var(--linha);
  background: var(--grafite);
}

.pagina-titulo h1 {
  font-size: clamp(28px, 4.4vw, 42px);
  text-transform: uppercase;
}

.migalha {
  font-family: "Roboto Mono", monospace;
  font-size: 12.5px;
  color: var(--cinza);
  margin-bottom: 12px;
}

.migalha a:hover {
  color: var(--vermelho-vivo);
}

.estoque-layout {
  display: grid;
  grid-template-columns: 272px 1fr;
  gap: 32px;
  padding: 36px 0 90px;
  align-items: start;
}

.filtros {
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  padding: 8px 20px 20px;
  position: sticky;
  top: calc(var(--topo-altura) + 16px);
}

/* O atributo `hidden` precisa vencer o display das regras acima. */
.filtros[hidden],
.btn-filtros[hidden] {
  display: none;
}

.filtro-bloco {
  border-bottom: 1px solid var(--linha);
  padding: 4px 0;
}

.filtro-bloco:last-of-type {
  border-bottom: 0;
}

.filtro-bloco-topo {
  width: 100%;
  background: none;
  border: 0;
  color: var(--branco);
  font-family: "Montserrat", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.filtro-bloco-topo::after {
  content: "+";
  font-family: "Roboto Mono", monospace;
  font-size: 17px;
  color: var(--vermelho-vivo);
}

.filtro-bloco.aberto .filtro-bloco-topo::after {
  content: "–";
}

.filtro-bloco-corpo {
  display: none;
  padding-bottom: 18px;
}

.filtro-bloco.aberto .filtro-bloco-corpo {
  display: block;
}

.filtro-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 14.5px;
  color: var(--cinza-claro);
  cursor: pointer;
}

.filtro-opcao-nome {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.filtro-opcao input {
  accent-color: var(--vermelho);
  width: 16px;
  height: 16px;
}

.filtro-opcao-total {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  color: var(--cinza);
}

.filtro-valor {
  font-family: "Roboto Mono", monospace;
  font-size: 13px;
  color: var(--vermelho-vivo);
  display: block;
  margin-bottom: 10px;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--vermelho);
}

.filtros-acoes {
  display: none;
  gap: 10px;
  margin-top: 18px;
}

/* No PC a lateral já está na página: sem cabeçalho de modal. */
.filtros-topo {
  display: none;
}

.filtros-fechar {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--branco);
  background: transparent;
  cursor: pointer;
}

.filtros-fechar svg {
  width: 20px;
  height: 20px;
}

/* Na página do estoque a grade divide a largura com a coluna de filtros, então
   o card cabe um pouco mais estreito — senão sobram só duas colunas num
   espaço que comporta três. Só no PC: no celular a lateral vira modal e quem
   manda na grade é a regra geral (duas colunas), que tem menos peso que esta
   e perderia a disputa se a regra valesse em toda largura. */
@media (min-width: 1001px) {
  .estoque-layout .grade {
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  }
}

.estoque-barra {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.busca-campo {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.busca-campo svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--cinza);
}

.busca-campo input,
.select {
  width: 100%;
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--branco);
  font-family: inherit;
  font-size: 15px;
  padding: 13px 16px;
}

.busca-campo input {
  padding-left: 42px;
}

.busca-campo input::placeholder {
  color: #74777e;
}

.select {
  width: auto;
  min-width: 190px;
  cursor: pointer;
}

.pills {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.pill {
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--cinza-claro);
  font-family: "Montserrat", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.pill:hover {
  border-color: var(--vermelho-vivo);
  color: var(--branco);
}

.pill.ativo {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: var(--branco);
}

.contador {
  font-family: "Roboto Mono", monospace;
  font-size: 13px;
  color: var(--cinza);
  margin-bottom: 18px;
}

.btn-filtros {
  display: none;
}

/* ============================== VEÍCULO ============================== */

/* `padding` inteiro aqui zeraria o respiro lateral do .container (mesma
   especificidade, e esta regra vem depois) — no celular o conteúdo encostava
   na borda da tela. Só o vertical. */
.veiculo {
  padding-top: 28px;
  padding-bottom: 100px;
}

.galeria-principal {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  overflow: hidden;
}

.galeria-principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.galeria-seta,
.galeria-ampliar {
  position: absolute;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--branco);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.16s ease;
}

.galeria-seta:hover,
.galeria-ampliar:hover {
  background: var(--vermelho);
  border-color: var(--vermelho);
}

.galeria-seta svg,
.galeria-ampliar svg {
  width: 21px;
  height: 21px;
}

.galeria-seta.esquerda {
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
}

.galeria-seta.direita {
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}

.galeria-ampliar {
  right: 14px;
  bottom: 14px;
}

.galeria-contador {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(0, 0, 0, 0.72);
  border-radius: var(--raio);
  font-family: "Roboto Mono", monospace;
  font-size: 12.5px;
  padding: 6px 11px;
  color: var(--branco);
}

.galeria-miniaturas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.galeria-miniatura {
  aspect-ratio: 4 / 3;
  background: none;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.16s ease, border-color 0.16s ease;
}

.galeria-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galeria-miniatura.ativa,
.galeria-miniatura:hover {
  opacity: 1;
  border-color: var(--vermelho-vivo);
}

/* Foto à esquerda, cartão de compra à direita — o cartão fica grudado na
   rolagem, então em anúncio longo o preço e o botão nunca saem da tela. */
.veiculo-layout {
  display: grid;
  grid-template-columns: 1.55fr 0.95fr;
  gap: 32px;
  align-items: start;
}

.veiculo-info {
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  padding: 28px 26px;
  position: sticky;
  top: calc(var(--topo-altura) + 16px);
}

.veiculo-info-olho {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vermelho-vivo);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.veiculo-info-olho::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--vermelho);
  flex: none;
}

.veiculo-info h1 {
  font-size: clamp(22px, 2.4vw, 28px);
}

.veiculo-valor-rotulo {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
  margin: 18px 0 2px;
}

.veiculo-valor {
  font-family: "Roboto Mono", monospace;
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  color: var(--branco);
  margin-bottom: 22px;
}

/* Ficha curta dentro do cartão: dois itens por linha, o bastante pra decidir
   sem precisar rolar até a ficha técnica. */
.keyspecs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.keyspecs li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px;
  background: var(--carvao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.keyspecs .ki {
  width: 31px;
  height: 31px;
  border-radius: var(--raio);
  background: var(--vermelho-veu);
  color: var(--vermelho-vivo);
  display: grid;
  place-items: center;
  margin-bottom: 7px;
}

.keyspecs .ki svg {
  width: 17px;
  height: 17px;
}

.keyspecs .kl {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cinza);
}

.keyspecs .kv {
  font-family: "Roboto Mono", monospace;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--branco);
}

.veiculo-info-nota {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--cinza);
  text-align: center;
}

.veiculo-confianca {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
}

/* Ficha técnica, equipamentos, descrição e vídeo: largura inteira, embaixo das
   duas colunas. */
.veiculo-detalhes {
  margin-top: 40px;
  display: grid;
  gap: 24px;
}

.veiculo-detalhes .bloco {
  margin-bottom: 0;
}

/* Quem chegou por um anúncio precisa de uma porta pro resto do pátio: sem ela
   a página do veículo é um beco sem saída. */
.veiculo-mais {
  margin-top: 56px;
}

.veiculo-mais[hidden] {
  display: none;
}

.veiculo-mais-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.veiculo-mais-topo h2 {
  font-size: 22px;
}

/* Quatro por linha no PC: com o mínimo da grade comum só entram três nessa
   largura, e o quarto card ficaria sozinho na linha de baixo. */
.veiculo-mais .grade {
  grid-template-columns: repeat(4, 1fr);
}

.bloco {
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  padding: 28px 26px;
  margin-bottom: 24px;
}

.bloco h2 {
  font-size: 19px;
  margin-bottom: 16px;
}

.bloco p {
  color: var(--cinza-claro);
  margin: 0;
  white-space: pre-line;
}

.especificacoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}

.especificacao {
  background: var(--carvao);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  font-size: 14.5px;
}

.especificacao span {
  color: var(--cinza);
}

.especificacao strong {
  color: var(--branco);
  font-weight: 500;
  text-align: right;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  background: var(--carvao);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--cinza-claro);
}

.chip-oculto {
  display: none;
}

.chip-oculto.mostrar {
  display: inline-block;
}

.btn-ver-opcionais {
  margin-top: 16px;
  background: none;
  border: 0;
  color: var(--vermelho-vivo);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--cinza-claro);
}

.selo svg {
  width: 15px;
  height: 15px;
  color: var(--vermelho-vivo);
}

/* Vídeo: capa com play. O arquivo (dezenas de MB) só carrega no clique. */
.veiculo-video {
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  overflow: hidden;
  background: var(--grafite);
}

.veiculo-video-capa {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
}

.veiculo-video-capa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.veiculo-video-play {
  position: relative;
  z-index: 1;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 0;
  background: var(--vermelho);
  color: var(--branco);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.veiculo-video-play svg {
  width: 30px;
  height: 30px;
  margin-left: 4px;
}

.veiculo-video video {
  width: 100%;
  display: block;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.94);
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-palco {
  grid-column: 2;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 0;
}

.lightbox-img {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
}

.lightbox-nav,
.lightbox-fechar {
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: var(--raio);
  color: var(--branco);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin: auto;
}

.lightbox-nav:hover,
.lightbox-fechar:hover {
  background: var(--vermelho);
}

.lightbox-nav svg,
.lightbox-fechar svg {
  width: 22px;
  height: 22px;
}

.lightbox-fechar {
  position: absolute;
  top: 20px;
  right: 20px;
  margin: 0;
}

.lightbox-contador {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Roboto Mono", monospace;
  font-size: 13px;
  color: var(--cinza-claro);
}

/* Barra fixa do celular: preço e WhatsApp sempre à mão na página do veículo. */
.barra-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(12, 12, 13, 0.97);
  border-top: 1px solid var(--linha);
}

.barra-fixa[hidden] {
  display: none;
}

.barra-fixa-preco {
  font-family: "Roboto Mono", monospace;
  font-size: 19px;
  font-weight: 700;
  color: var(--branco);
}

.barra-fixa small {
  display: block;
  font-family: "Roboto", sans-serif;
  font-size: 11.5px;
  color: var(--cinza);
  letter-spacing: 0.04em;
}

/* ============================== SOBRE ============================== */

.sobre-topo {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

/* Enquanto a foto da loja não chega, o texto ocupa a largura inteira em vez de
   deixar meia página vazia. */
.sobre-topo.sem-foto {
  grid-template-columns: 1fr;
}

.sobre-topo.sem-foto .sobre-foto {
  display: none;
}

.sobre-foto {
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--grafite);
}

.sobre-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  overflow: hidden;
  margin-top: 36px;
}

.numero {
  background: var(--carvao);
  padding: 26px 22px;
}

.numero strong {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-size: 30px;
  color: var(--branco);
  line-height: 1.1;
}

.numero span {
  font-size: 13.5px;
  color: var(--cinza);
}

.mvv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 22px;
}

.mvv-item {
  background: var(--carvao);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--vermelho);
  border-radius: var(--raio-grande);
  padding: 30px 26px;
}

.mvv-item h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.mvv-item p {
  color: var(--cinza);
  font-size: 15px;
  margin: 0;
}

/* Os valores são sete frases — em card viram parede de texto, em lista com
   marcador vermelho dá pra ler de relance. */
.valores {
  margin-top: 22px;
  background: var(--carvao);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  padding: 30px 26px;
}

.valores h3 {
  font-size: 18px;
  margin-bottom: 18px;
}

.valores-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 12px 32px;
}

.valores-lista li {
  position: relative;
  padding-left: 22px;
  color: var(--cinza);
  font-size: 15px;
  line-height: 1.55;
}

.valores-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 2px;
  background: var(--vermelho-vivo);
}

/* ============================== REVEAL ============================== */

.reveal-on .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-on .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ============================== RESPONSIVO ============================== */

@media (max-width: 1000px) {
  /* O formulário de busca não cabe em cinco colunas: vira duas, e o botão
     ocupa a linha inteira embaixo. */
  .busca-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .busca-card .btn {
    grid-column: 1 / -1;
  }

  .sobre-home {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .sobre-home-foto {
    max-width: 460px;
  }

  .estoque-layout {
    grid-template-columns: 1fr;
  }

  .filtros {
    position: fixed;
    inset: 0;
    z-index: 100;
    border-radius: 0;
    border: 0;
    overflow-y: auto;
    padding: 20px 20px 28px;
    display: none;
  }

  .filtros.aberto {
    display: block;
  }

  .filtros-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--linha);
  }

  .filtros-topo h2 {
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .filtros-acoes {
    display: flex;
  }

  .btn-filtros {
    display: inline-flex;
  }

  .veiculo-layout,
  .troca,
  .sobre-topo {
    grid-template-columns: 1fr;
  }

  /* Empilhado, o cartão grudado só atrapalharia a rolagem. */
  .veiculo-info {
    position: static;
  }

  .especificacoes {
    grid-template-columns: 1fr;
  }

  /* Em coluna única a célula de fechamento vira uma linha vazia. */
  .especificacao-vazia {
    display: none;
  }

  .veiculo-mais .grade {
    grid-template-columns: repeat(2, 1fr);
  }

  .rodape-grade {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .capa-fundo::after {
    background: linear-gradient(
      180deg,
      rgba(12, 12, 13, 0.74) 0%,
      rgba(12, 12, 13, 0.64) 42%,
      rgba(12, 12, 13, 0.88) 100%
    );
  }

  .menu,
  .topo-zap {
    display: none;
  }

  .menu-abrir {
    display: flex;
  }

  .faixa-servico-itens .so-pc {
    display: none;
  }
}

@media (max-width: 640px) {
  .secao {
    padding: 64px 0;
  }

  /* No celular o cartão de busca deixa de flutuar sobre a capa: empilhado, ele
     ficaria alto demais e empurraria o resto da página pra baixo da dobra. */
  .busca {
    margin-top: 0;
    padding-top: 28px;
  }

  .busca-card {
    grid-template-columns: 1fr;
    box-shadow: none;
    padding: 18px;
  }

  .capa {
    padding-bottom: 56px;
  }

  .capa-botoes .btn {
    flex: 1 1 auto;
    white-space: nowrap;
  }

  .confianca {
    padding-top: 44px;
  }

  .chamada .container {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .chamada-acoes .btn {
    flex: 1 1 auto;
    white-space: nowrap;
  }

  /* No celular é um veículo por linha, com o card no tamanho cheio — igual na
     JR. Dois lado a lado deixavam a foto com ~170px de largura e obrigavam a
     encolher título, preço e selos pra caber. */
  .grade,
  .veiculo-mais .grade {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Busca na linha de cima; ordenar e filtros dividem a de baixo meio a meio,
     em vez de sobrar um vão à direita do botão. */
  .busca-campo {
    flex: 1 1 100%;
    min-width: 0;
  }

  .estoque-barra {
    gap: 10px;
    margin-bottom: 18px;
  }

  /* Base igual (40%) e sobra dividida igual: as duas saem da mesma largura.
     Com base 0 o botão ficava maior, porque o padding dele conta no mínimo. */
  .estoque-barra .select,
  .estoque-barra .btn-filtros {
    flex: 1 1 40%;
    min-width: 0;
  }

  /* 16px é o mínimo pra o iPhone não dar zoom sozinho quando o campo ganha
     foco. */
  .busca-campo input,
  .busca-campo select,
  .select {
    font-size: 16px;
  }

  .pill {
    min-height: 44px;
  }

  .rodape-grade {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .barra-fixa {
    display: flex;
  }

  .veiculo {
    padding-bottom: 110px;
  }

  .galeria-miniaturas {
    grid-template-columns: repeat(4, 1fr);
  }

  .veiculo-info {
    padding: 22px 18px;
  }

  .lightbox {
    grid-template-columns: 1fr;
  }

  .lightbox-palco {
    grid-column: 1;
  }

  .lightbox-nav {
    position: absolute;
    bottom: 54px;
  }

  .lightbox-prev {
    left: 24px;
  }

  .lightbox-next {
    right: 24px;
  }
}