/* Site da loja — folha unica (spec 2026-09-22-site-da-loja, secao 7.3).
   Direcao C: fundo preto/grafite, acabamento prateado como o logo, cor de
   destaque da empresa em --site-destaque (vem no style do body, por empresa)
   e o verde do WhatsApp como unica cor forte. Sem framework: variaveis + BEM
   com prefixo site-. Unidades em px e clamp(); nada depende de JavaScript. */

@font-face {
  font-family: "Exo 2";
  src: url("fontes/exo-2-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Modernizacao de 26/09/2026 (spec 2026-09-26-modernizacao-site-publico):
   "premium industrial" -- preto de verdade, grafites frios em camadas
   (superficie < elevada < interativa) e duas linhas (a comum separa, a
   forte contorna controle). Um nome so por papel: os dois tons antigos de
   grafite viraram superficie e superficie-elevada. */
:root {
  --site-fundo: #080b0e;
  --site-superficie: #0f1419;
  --site-superficie-elevada: #151b21;
  --site-superficie-interativa: #1a2128;
  --site-linha: #2b343d;
  --site-linha-forte: #46515c;
  /* Contorno de campo: 3:1 contra as superficies (spec 10); nos filtros de
     faixa o rotulo e oculto e a borda e o que mostra o campo. */
  --site-linha-campo: #65717d;
  --site-texto: #f4f6f8;
  --site-texto-suave: #b2bac3;
  --site-texto-fraco: #7f8a95;
  --site-prata-claro: #ffffff;
  --site-prata-escuro: #c5cbd1;
  --site-destaque: #eef1f3;
  --site-destaque-texto: #090c0f;
  --site-whatsapp: #25d366;
  --site-whatsapp-texto: #062b14;
  --site-raio-pequeno: 8px;
  --site-raio: 12px;
  --site-raio-grande: 16px;
  --site-sombra-baixa: 0 12px 32px rgba(0, 0, 0, 0.24);
  --site-sombra-alta: 0 24px 64px rgba(0, 0, 0, 0.42);
  --site-largura: 1320px;
  --site-fonte-titulo: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --site-fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body.site {
  margin: 0;
  background: var(--site-fundo);
  color: var(--site-texto);
  font-family: var(--site-fonte-texto);
  font-size: 16px;
  line-height: 1.55;
  /* Rolagem lateral no celular e o defeito que mais aparece em site de loja. */
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

/* O atributo hidden tem de ganhar do display das classes (.site-botao e
   inline-flex): o Compartilhar da ficha nasce escondido e so o JS da 5b o
   mostra quando o navegador sabe compartilhar. */
[hidden] {
  display: none !important;
}

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

.site-largura {
  width: min(100% - 48px, var(--site-largura));
  margin-inline: auto;
}

.site-pular {
  position: absolute;
  left: -9999px;
}

.site-pular:focus {
  left: 16px;
  top: 16px;
  z-index: 50;
  padding: 12px 16px;
  border-radius: var(--site-raio-pequeno);
  font-weight: 700;
  background: var(--site-destaque);
  color: var(--site-destaque-texto);
}

.site-icone {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ------------------------------------------------------- faixa da previa */
.site-previa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  padding: 8px 16px;
  border-bottom: 1px solid #4a3d16;
  background: #2b2410;
  color: #f5d98b;
  font-size: 13px;
  text-align: center;
}

/* ------------------------------------------------------------- cabecalho */
/* Fundo solido de proposito (auditoria de design, 23/09): translucido com
   blur, o logo com fundo proprio "descolava" num retangulo escuro ao rolar
   (o mix-blend-mode do logo compunha com o que passava por baixo). */
.site-cabecalho {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--site-linha);
  background: var(--site-fundo);
}

.site-cabecalho__faixa {
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 24px;
}

.site-marca {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
}

.site-marca img {
  width: auto;
  height: 42px;
  max-width: 190px;
  object-fit: contain;
}

/* Logo enviado com fundo preto chapado (o PNG da Prado nao tem transparencia)
   aparecia como um retangulo sobre o grafite. "lighten" some com o preto e
   nao altera logo claro nem logo transparente, que e o que o site escuro pede. */
.site-marca img,
.site-rodape__marca img,
.site-aviso__logo {
  mix-blend-mode: lighten;
}

.site-marca span {
  overflow: hidden;
  font-family: var(--site-fonte-titulo);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-menu a,
.site-menu summary {
  color: var(--site-texto-suave);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Os tres itens do topo (dois links e o <summary> do "Categorias") com a
   mesma caixa: altura, padding e line-height iguais. Sem isso o <details>
   ficava 2 px abaixo dos links. 44 px: alvo de toque minimo da spec. O
   hover e um traco claro embaixo (conceito do estoque), sem brilho. */
.site-menu > a,
.site-menu__categorias > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--site-raio-pequeno);
  line-height: 1;
}

.site-menu a:hover,
.site-menu summary:hover,
.site-menu__categorias[open] summary {
  color: var(--site-texto);
  box-shadow: inset 0 -2px 0 var(--site-linha-forte);
}

.site-menu > a:focus-visible,
.site-menu__categorias > summary:focus-visible {
  outline: 2px solid var(--site-destaque);
  outline-offset: 2px;
}

/* Botao do WhatsApp do topo na mesma altura dos itens do menu. */
.site-cabecalho__whatsapp {
  min-height: 44px;
  margin-left: 12px;
  padding: 0 20px;
  font-size: 15px;
}

/* "Categorias" no desktop: <details> que abre um painel com as categorias
   com carro no ar (mockups aprovados). Sem JS ele so fecha no proprio
   botao; a 5b pode fechar ao clicar fora. */
.site-menu__categorias {
  position: relative;
  display: flex;
}

.site-menu__categorias summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
}

.site-menu__categorias summary::-webkit-details-marker {
  display: none;
}

.site-menu__categorias summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.75;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.site-menu__categorias[open] summary::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.site-menu__categorias .site-lista-categorias {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 25;
  min-width: 260px;
  padding: 8px;
  border: 1px solid var(--site-linha);
  border-radius: var(--site-raio);
  background: var(--site-superficie-elevada);
  box-shadow: var(--site-sombra-alta);
}

.site-lista-categorias {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-lista-categorias a {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 12px;
  border-radius: var(--site-raio-pequeno);
  color: var(--site-texto);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.site-lista-categorias a:hover,
.site-lista-categorias a[aria-current] {
  background: var(--site-superficie-interativa);
}

.site-lista-categorias a[aria-current] {
  font-weight: 700;
}

.site-lista-categorias small {
  color: var(--site-texto-fraco);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Menu ☰ do celular (mockups): escondido no desktop. */
.site-menu-celular {
  display: none;
}

.site-menu-celular summary {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--site-linha-forte);
  border-radius: var(--site-raio-pequeno);
  color: var(--site-texto);
  list-style: none;
  cursor: pointer;
}

.site-menu-celular summary::-webkit-details-marker {
  display: none;
}

/* Tres tracos; aberto, vira um X. */
.site-menu-celular__icone,
.site-menu-celular__icone::before,
.site-menu-celular__icone::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.site-menu-celular__icone {
  position: relative;
}

.site-menu-celular__icone::before,
.site-menu-celular__icone::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-menu-celular__icone::before {
  top: -6px;
}

.site-menu-celular__icone::after {
  top: 6px;
}

.site-menu-celular[open] .site-menu-celular__icone {
  background: transparent;
}

.site-menu-celular[open] .site-menu-celular__icone::before {
  transform: translateY(6px) rotate(45deg);
}

.site-menu-celular[open] .site-menu-celular__icone::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* O painel pende do cabecalho (sticky, entao posicionado) de ponta a ponta. */
.site-menu-celular__painel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: grid;
  max-height: calc(100vh - 62px);
  overflow-y: auto;
  padding: 8px 16px 20px;
  border-bottom: 1px solid var(--site-linha);
  background: var(--site-fundo);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5);
}

.site-menu-celular__painel > a {
  display: flex;
  min-height: 52px;
  align-items: center;
  border-bottom: 1px solid var(--site-linha);
  color: var(--site-texto);
  font-family: var(--site-fonte-titulo);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

.site-menu-celular__rotulo {
  margin: 16px 0 6px;
  color: var(--site-texto-fraco);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-menu-celular__painel .site-lista-categorias {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--site-linha);
}

.site-menu-celular__painel .site-lista-categorias a {
  min-height: 44px;
  padding: 0;
  font-size: 16px;
}

/* ---------------------------------------------------------------- botoes */
/* Raio de 10 px: entre o campo (8) e o cartao (12). Pilula ficou so para
   chip e categoria, onde a forma diz "selecao" (spec 6.4). */
.site-botao {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  /* <button> nao herda a fonte nem o cursor do link (Compartilhar, Enviar,
     Aplicar filtros saiam em Arial com cursor de seta). */
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.site-botao:hover {
  transform: translateY(-1px);
  box-shadow: var(--site-sombra-baixa);
}

.site-botao:active {
  transform: none;
  box-shadow: none;
}

/* Desabilitado perde a sombra e o movimento, nao so a opacidade. */
.site-botao:disabled,
:disabled .site-botao {
  opacity: 0.55;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.site-botao--destaque {
  background: var(--site-destaque);
  color: var(--site-destaque-texto);
}

.site-botao--destaque:hover {
  background: var(--site-prata-claro);
}

/* Texto escuro (branco sobre #25d366 da 2:1, abaixo de 4.5) e o glifo
   oficial em branco, como a marca do WhatsApp; o glifo e decorativo (o
   botao tem texto ou aria-label). */
.site-botao--whatsapp {
  background: var(--site-whatsapp);
  color: var(--site-whatsapp-texto);
}

.site-botao--whatsapp .site-icone,
.site-whatsapp-flutuante .site-icone {
  width: 20px;
  height: 20px;
  color: #fff;
}

.site-botao--contorno {
  /* Transparente de proposito: no <button> (Compartilhar) o fundo cinza do
     navegador aparecia no lugar do contorno do mockup. */
  background: transparent;
  border-color: var(--site-linha-forte);
  color: var(--site-texto);
}

.site-botao--contorno:hover {
  border-color: var(--site-prata-escuro);
  background: rgba(255, 255, 255, 0.04);
}

/* Botao com uma segunda linha menor (WhatsApp da ficha: "mensagem pronta com o carro"). */
.site-botao--duas-linhas {
  min-height: 60px;
  padding-block: 8px;
}

.site-botao__textos {
  display: grid;
  gap: 4px;
  text-align: center;
}

.site-botao__textos small {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}

/* ------------------------------------------------------------------ topo */
.site-topo {
  position: relative;
  display: flex;
  min-height: clamp(420px, 62vh, 640px);
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--site-linha);
  background: radial-gradient(120% 90% at 85% 0%, #22272d 0%, var(--site-fundo) 60%);
}

.site-topo__imagem {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A capa e foto da loja: o degrade garante leitura do titulo por cima dela. */
.site-topo--capa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 12, 14, 0.92) 0%, rgba(11, 12, 14, 0.7) 45%, rgba(11, 12, 14, 0.25) 100%),
    linear-gradient(0deg, var(--site-fundo) 0%, transparent 40%);
}

.site-topo > .site-largura {
  padding-block: 72px 56px;
}

.site-topo__texto {
  max-width: 760px;
}

.site-eyebrow {
  margin: 0 0 12px;
  color: var(--site-texto-suave);
  font-family: var(--site-fonte-titulo);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* Titulos em degrade prata, como o logo da Prado (identidade-cor, 22/09). */
.site-prata {
  background: linear-gradient(180deg, var(--site-prata-claro) 0%, var(--site-prata-escuro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-topo h1 {
  margin: 0;
  font-family: var(--site-fonte-titulo);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.site-topo__subtitulo {
  max-width: 56ch;
  margin: 16px 0 0;
  color: var(--site-texto-suave);
  font-size: clamp(16px, 1.6vw, 19px);
}

.site-topo__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---------------------------------------------------------------- secoes */
.site-secao {
  padding-block: clamp(56px, 7vw, 88px);
}

.site-secao + .site-secao {
  border-top: 1px solid var(--site-linha);
}

.site-secao__titulo {
  margin: 0 0 12px;
  font-family: var(--site-fonte-titulo);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.site-secao__legenda {
  max-width: 60ch;
  margin: 0 0 32px;
  color: var(--site-texto-suave);
  font-size: 17px;
}

/* ----------------------------------------------------------------- sobre */
.site-sobre__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}

.site-sobre--sem-foto .site-sobre__grade {
  grid-template-columns: minmax(0, 760px);
}

.site-sobre__texto p {
  margin: 0 0 16px;
  color: var(--site-texto-suave);
  font-size: 17px;
}

.site-sobre__foto {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--site-linha);
  border-radius: var(--site-raio-grande);
  box-shadow: var(--site-sombra-baixa);
}

.site-sobre__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------------------------------------------------------- lojas */
/* auto-fit (nao auto-fill): com 2 lojas elas dividem a largura toda em vez
   de deixar uma terceira coluna vazia (auditoria de design, 23/09). */
.site-lojas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-loja {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--site-linha);
  border-radius: var(--site-raio);
  background: var(--site-superficie);
}

.site-loja h3 {
  margin: 0;
  font-family: var(--site-fonte-titulo);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.site-loja__dado {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--site-texto-suave);
  font-size: 15px;
}

.site-loja__dado strong {
  color: var(--site-texto-fraco);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-loja__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

.site-loja__acoes .site-botao {
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
}

/* ---------------------------------------------------------------- rodape */
/* Rodape em duas faixas: colunas em cima e a base legal embaixo. O fundo e
   um degrau abaixo da pagina, para fechar a composicao. */
.site-rodape {
  padding-block: 56px 28px;
  border-top: 1px solid var(--site-linha);
  background: #05070a;
  color: var(--site-texto-suave);
  font-size: 14px;
}

.site-rodape__grade {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
}

.site-rodape__marca img {
  width: auto;
  height: 40px;
  max-width: 180px;
  object-fit: contain;
}

.site-rodape__marca p {
  max-width: 36ch;
  margin: 12px 0 0;
}

.site-rodape h2 {
  margin: 0 0 16px;
  color: var(--site-texto);
  font-family: var(--site-fonte-titulo);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.site-rodape ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-rodape li {
  display: grid;
  gap: 2px;
}

.site-rodape li strong {
  color: var(--site-texto);
}

.site-rodape a {
  color: var(--site-texto-suave);
  text-decoration: none;
}

.site-rodape a:hover {
  color: var(--site-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* O CNPJ nunca quebra no meio (controlador 5a-6, parte 2). */
.site-rodape__cnpj {
  white-space: nowrap;
}

.site-rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--site-linha);
  color: var(--site-texto-fraco);
  font-size: 13px;
}

.site-rodape__base a {
  color: var(--site-texto-suave);
}

/* "Desenvolvido por CarPilot" (pedido do Erick, 23/09): discreto, no pe. */
.site-rodape__credito {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
  margin-bottom: 0;
  color: var(--site-texto-fraco);
  font-size: 12px;
}

.site-rodape__credito svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.site-rodape__credito strong {
  color: var(--site-texto-suave);
  font-family: var(--site-fonte-titulo);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------- whatsapp flutuante */
.site-whatsapp-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  background: var(--site-whatsapp);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  color: var(--site-whatsapp-texto);
}

/* O glifo ocupa ~57% do circulo (antes ~30%, parecia perdido). */
.site-whatsapp-flutuante .site-icone {
  width: 32px;
  height: 32px;
}

/* ----------------------------------------------------------- privacidade */
/* Leitura longa (politica): ~72 caracteres por linha, paragrafos com ar e
   cada H2 abrindo um bloco com divisor. */
.site-texto-longo {
  max-width: 72ch;
}

.site-texto-longo h1 {
  margin: 0 0 24px;
  font-family: var(--site-fonte-titulo);
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.site-texto-longo h2 {
  margin: 40px 0 12px;
  padding-top: 28px;
  border-top: 1px solid var(--site-linha);
  color: var(--site-texto);
  font-family: var(--site-fonte-titulo);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.site-texto-longo p {
  margin: 0 0 16px;
  color: var(--site-texto-suave);
  font-size: 17px;
  line-height: 1.7;
}

.site-texto-longo strong {
  color: var(--site-texto);
}

.site-texto-longo a {
  color: var(--site-texto);
  text-decoration-color: var(--site-linha-forte);
  text-underline-offset: 4px;
}

.site-texto-longo a:hover {
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------- utilitarios */
.site-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------ avisos (em breve, 404, voltamos) */
.site-aviso {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 56px 16px;
  text-align: center;
}

.site-aviso--pagina {
  min-height: 60vh;
}

/* No 410 com semelhantes, o aviso nao ocupa meia tela: a lista vem logo abaixo. */
.site-aviso--com-lista {
  min-height: 0;
  padding-block: clamp(48px, 8vw, 96px) 0;
}

/* Mesma escala dos titulos das paginas internas; ate 20 caracteres por linha
   para "Este veiculo nao esta mais disponivel" quebrar em duas linhas iguais. */
.site-aviso h1 {
  max-width: 20ch;
  margin: 0;
  font-family: var(--site-fonte-titulo);
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

.site-aviso p {
  max-width: 48ch;
  margin: 0;
  color: var(--site-texto-suave);
  font-size: 17px;
}

.site-aviso .site-eyebrow {
  margin: 0;
}

.site-aviso .site-topo__acoes {
  justify-content: center;
  margin-top: 12px;
}

.site-aviso__logo {
  width: auto;
  max-width: 220px;
  height: 64px;
  object-fit: contain;
}

.site-aviso__nome {
  font-family: var(--site-fonte-titulo);
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------- chips */
.site-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.site-chip {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid var(--site-linha-forte);
  border-radius: 999px;
  background: var(--site-superficie);
  color: var(--site-texto);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.site-chip small {
  color: var(--site-texto-suave);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.site-chip:hover {
  border-color: var(--site-prata-escuro);
  background: var(--site-superficie-interativa);
}

.site-chip--ativo {
  border-color: var(--site-destaque);
  background: var(--site-destaque);
  color: var(--site-destaque-texto);
  font-weight: 700;
}

.site-chip--ativo small {
  color: inherit;
}

/* O contorno de foco na cor de destaque sumia sobre o proprio chip ativo. */
.site-chip--ativo:focus-visible {
  outline-color: var(--site-destaque-texto);
  outline-offset: -4px;
}

/* ---------------------------------------------------------------- cartao */
.site-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}

/* position: relative prende o texto .site-oculto (absoluto) dentro do card:
   sem isso, num card fora da tela de uma fileira que rola de lado, ele
   escapava do corte e alargava a pagina no celular. */
.site-cartao {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--site-linha);
  border-radius: var(--site-raio);
  background: var(--site-superficie);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.site-cartao:hover {
  border-color: var(--site-linha-forte);
  box-shadow: var(--site-sombra-baixa);
  transform: translateY(-2px);
}

.site-cartao__link {
  display: flex;
  height: 100%;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

/* O card corta o que passa da borda (overflow: hidden, por causa da foto) e
   a foto posicionada cobria o contorno: o foco do teclado vira uma moldura
   por cima de tudo, dentro do card. */
.site-cartao__link:focus-visible {
  outline: none;
}

.site-cartao__link:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 2px solid var(--site-destaque);
  border-radius: var(--site-raio);
  pointer-events: none;
}

.site-cartao__foto {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--site-superficie-elevada);
}

.site-cartao__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Zoom leve so no hover; o reduced-motion do fim da folha zera a transicao. */
.site-cartao:hover .site-cartao__foto img {
  transform: scale(1.03);
}

.site-selo {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-selo + .site-selo {
  top: 38px;
}

.site-selo--oferta {
  background: var(--site-destaque);
  color: var(--site-destaque-texto);
}

.site-selo--reservado {
  border: 1px solid #5b6570;
  background: #1a1e23;
  color: var(--site-texto);
}

.site-cartao__fotos {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(8, 11, 14, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.site-cartao__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 18px;
}

.site-cartao__marca {
  margin: 0;
  color: var(--site-texto-suave);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.site-cartao__titulo {
  margin: 0;
  font-family: var(--site-fonte-titulo);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
}

/* Ano, km/horas e cambio em etiquetas, como no mockup do estoque. */
.site-cartao__dados {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.site-cartao__dados li {
  padding: 3px 8px;
  border: 1px solid var(--site-linha);
  border-radius: 6px;
  background: var(--site-superficie-elevada);
  color: var(--site-texto-suave);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Motinha no site (spec 2026-10-02-mobilidade-no-site): as cores em amostras, o nome inteiro
   (quebra linha, nunca corta), e a amostra de duas cores em duas metades. */
.site-cartao__cores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.site-amostra {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--site-linha);
  border-radius: 6px;
  background: var(--site-superficie-elevada);
  color: var(--site-texto-suave);
  font-size: 13px;
}

.site-amostra__cor {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 1px solid var(--site-linha-forte);
  border-radius: 50%;
}

.site-amostra__nome {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A tabela de cores da pagina do modelo: uma linha por cor, que quebra no celular. */
.site-cores-do-modelo {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-cores-do-modelo li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 12px;
  border: 1px solid var(--site-linha);
  border-radius: var(--site-raio-pequeno);
  background: var(--site-superficie);
}

.site-cores-do-modelo__preco {
  color: var(--site-destaque);
  font-variant-numeric: tabular-nums;
}

.site-cores-do-modelo__disponiveis {
  color: var(--site-texto-suave);
  font-size: 14px;
}

.site-cores-do-modelo__lojas {
  flex-basis: 100%;
  color: var(--site-texto-fraco);
  font-size: 13px;
}

.site-cartao__disponiveis {
  margin: 8px 0 0;
  color: var(--site-texto-suave);
  font-size: 13px;
  font-weight: 600;
}

.site-cartao__preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 10px 0 14px;
}

.site-cartao__preco strong {
  color: var(--site-destaque);
  font-family: var(--site-fonte-titulo);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

.site-preco-de {
  color: var(--site-texto-fraco);
  font-size: 13px;
}

.site-preco-de s {
  white-space: nowrap;
}

/* A loja fica secundaria e separada do preco por uma linha (spec 7.3). */
.site-cartao__loja {
  position: relative;
  margin: auto 0 0;
  padding: 12px 0 0 18px;
  border-top: 1px solid var(--site-linha);
  color: var(--site-texto-fraco);
  font-size: 13px;
}

/* O alfinete da loja (mockup do estoque): desenho em CSS, sem imagem nem emoji. */
.site-cartao__loja::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 1px;

  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------- estoque */
.site-estoque {
  padding-block: 40px 72px;
}

.site-estoque__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

/* H1 e contagem na mesma linha de base (conceito do estoque). */
.site-estoque__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 0 0 20px;
  font-family: var(--site-fonte-titulo);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.site-estoque__titulo small {
  color: var(--site-texto-suave);
  font-family: var(--site-fonte-texto);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
}

.site-ordenar {
  position: absolute;
  right: 0;
  bottom: calc(100% + 102px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--site-texto-suave);
  font-size: 15px;
}

.site-ordenar select {
  min-width: 210px;
  padding-right: 36px;
  cursor: pointer;
}

/* Um contorno so para todo campo do site (busca, faixas, ordem e o
   formulario): 46 px, raio pequeno, fundo um nivel acima da pagina e tres
   estados distintos -- linha forte, hover mais claro e foco com halo. */
.site-campo input,
.site-ordenar select,
.site-faixa input,
.site-barra__busca input,
.site-form__campo input,
.site-form__campo textarea {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--site-linha-campo);
  border-radius: var(--site-raio-pequeno);
  background: var(--site-superficie-interativa);
  color: var(--site-texto);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-campo input:hover,
.site-ordenar select:hover,
.site-faixa input:hover,
.site-barra__busca input:hover,
.site-form__campo input:hover,
.site-form__campo textarea:hover {
  border-color: var(--site-texto-fraco);
}

.site-campo input:focus-visible,
.site-ordenar select:focus-visible,
.site-faixa input:focus-visible,
.site-barra__busca input:focus-visible,
.site-form__campo input:focus-visible,
.site-form__campo textarea:focus-visible {
  border-color: var(--site-destaque);
  outline: none;
  /* Anel solido de 2px colado na borda: foco de 2px da spec 10 sem o
     contorno global, que ficava 3px para fora do campo. */
  box-shadow: 0 0 0 2px var(--site-destaque);
}

.site-campo input::placeholder,
.site-faixa input::placeholder,
.site-barra__busca input::placeholder,
.site-form__campo input::placeholder,
.site-form__campo textarea::placeholder {
  color: var(--site-texto-fraco);
  opacity: 1;
}

.site-campo input {
  width: 100%;
}

.site-estoque__barra-celular {
  display: none;
}

/* No desktop o controle de ordem mora no formulario dos filtros (um so
   name="ordem") mas aparece no alto, na linha do titulo: posicao absoluta em
   relacao a grade -- 28 da grade + 54 do trilho + 20 do titulo -- e o H1
   guarda o espaco dele a direita. Ao lado do trilho ele roubava 310px e
   categorias ficavam cortadas (o Erick rejeita chip cortado). */

/* min-width 0: sem ele o trilho de categorias (que rola de lado) alargava o
   bloco do titulo e empurrava a pagina. */
.site-estoque__topo > div {
  min-width: 0;
  max-width: 100%;
}

/* Filtros numa coluna de 320 px (spec 8.2) e resultados no resto. */
.site-estoque__grade {
  position: relative;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: start;
  gap: 32px;
  margin-top: 28px;
}

.site-filtros__form {
  display: grid;
  gap: 18px;
}

/* No desktop os filtros sao uma caixa propria; no celular a mesma aside vira
   a gaveta de tela cheia (860 px), entao a caixa so vale acima dele. */
@media (min-width: 861px) {
  .site-estoque__titulo {
    padding-right: 310px;
  }

  .site-filtros {
    padding: 20px;
    border: 1px solid var(--site-linha);
    border-radius: var(--site-raio-grande);
    background: var(--site-superficie);
  }
}

.site-filtros__cabeca {
  display: none;
}

.site-filtros__grupo {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Divisor entre grupos. Todos continuam abertos (sem acordeao, spec 8.2). */
.site-filtros__grupo + .site-filtros__grupo {
  padding-top: 18px;
  border-top: 1px solid var(--site-linha);
}

/* float tira o legend do desenho especial do fieldset: ele vira um item
   comum da grade e a borda de cima do grupo nao passa por dentro dele. */
.site-filtros__grupo legend {
  float: left;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  color: var(--site-texto);
  font-family: var(--site-fonte-titulo);
  font-size: 16px;
  font-weight: 700;
}

/* Marca e modelo: ate 9 opcoes a lista fica inteira. A partir de 10 ela
   rola dentro do grupo com meia linha a mostra -- sem essa meia linha a
   lista parecia acabar na ultima opcao visivel. A barra fica fina. */
.site-filtros__lista {
  display: grid;
}

.site-filtros__lista:has(> :nth-child(10)) {
  max-height: calc(44px * 9.5);
  overflow-y: auto;
  margin-right: -8px;
  padding-right: 8px;
  scrollbar-color: var(--site-linha-forte) transparent;
  scrollbar-width: thin;
}

.site-filtros__opcao {
  display: grid;
  min-height: 44px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: var(--site-texto);
  font-size: 15px;
  cursor: pointer;
}

.site-filtros__opcao:hover span {
  text-decoration: underline;
  text-decoration-color: var(--site-linha-forte);
  text-underline-offset: 3px;
}

.site-filtros__opcao input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--site-destaque);
}

/* Dentro da lista que rola o contorno de foco por fora seria cortado. */
.site-filtros__lista .site-filtros__opcao input:focus-visible {
  outline-offset: 1px;
}

.site-filtros__opcao small {
  color: var(--site-texto-fraco);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.site-faixa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.site-faixa input {
  width: 100%;
  min-width: 0;
}

.site-filtros__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: 18px;
  border-top: 1px solid var(--site-linha);
}

.site-filtros__acoes .site-botao {
  flex: 1 1 auto;
}

.site-filtros__limpar,
.site-ativos__limpar {
  color: var(--site-texto-suave);
  font-size: 14px;
  font-weight: 600;
  text-underline-offset: 3px;
}

/* #resultado e alvo de "Pular para os veiculos", do "Fechar" da gaveta e do
   filtros.js ao aplicar: sem a folga, o cabecalho fixo cobria os filtros
   ativos (os chips com o x) no alto da lista. */
.site-estoque__resultado {
  scroll-margin-top: 80px;
}

.site-ativos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.site-ativos {
  align-items: center;
}

.site-ativos a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--site-linha-forte);
  border-radius: 999px;
  background: var(--site-superficie);
  color: var(--site-texto);
  font-size: 14px;
  text-decoration: none;
}

.site-ativos a:hover {
  border-color: var(--site-prata-escuro);
}

.site-ativos .site-ativos__limpar {
  border-color: transparent;
  background: transparent;
  color: var(--site-texto-suave);
  text-decoration: underline;
}

/* Duas colunas de cartoes grandes nos resultados (conceito do estoque): na
   largura maxima a coluna tem ~470 px; em 3 colunas os cartoes ficariam no
   limite de 300 px e a foto perdia a leitura. */
.site-grade--estoque {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.site-vazio {
  padding: 56px 24px;
  border: 1px dashed var(--site-linha-forte);
  border-radius: var(--site-raio-grande);
  background: var(--site-superficie);
  text-align: center;
}

.site-vazio h2 {
  margin: 0 0 8px;
  font-family: var(--site-fonte-titulo);
  font-size: 26px;
  font-weight: 800;
}

.site-vazio p {
  max-width: 52ch;
  margin: 0 auto 20px;
  color: var(--site-texto-suave);
}

.site-paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--site-linha);
  color: var(--site-texto-suave);
  font-size: 14px;
}

.site-paginacao .site-botao {
  min-width: 240px;
}

/* Resultados estreitos (desktop logo acima de 860 px, com a coluna de
   filtros ao lado): um cartao por linha em vez de dois espremidos. */
.site-estoque__resultado {
  container-type: inline-size;
}

@container (max-width: 560px) {
  .site-grade--estoque {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Categorias do estoque como trilho segmentado (conceito do estoque). No
   celular elas voltam a ser pilulas numa fileira que rola de lado. */
@media (min-width: 561px) {
  /* Uma linha so: quando as categorias nao cabem (desktop estreito, 1024 px)
     o trilho rola de lado em vez de quebrar em duas linhas. */
  .site-estoque__topo .site-chips {
    display: inline-flex;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid var(--site-linha);
    border-radius: var(--site-raio);
    background: var(--site-superficie);
    scrollbar-width: none;
  }

  .site-estoque__topo .site-chips::-webkit-scrollbar {
    display: none;
  }

  .site-estoque__topo .site-chip:focus-visible {
    outline-offset: -2px;
  }

  .site-estoque__topo .site-chip {
    border-color: transparent;
    border-radius: var(--site-raio-pequeno);
    background: transparent;
  }

  .site-estoque__topo .site-chip:hover {
    background: var(--site-superficie-interativa);
  }

  .site-estoque__topo .site-chip--ativo,
  .site-estoque__topo .site-chip--ativo:hover {
    background: var(--site-destaque);
    color: var(--site-destaque-texto);
  }
}

.site-paginacao a:not(.site-botao) {
  color: var(--site-texto-suave);
}

/* ---------------------------------------------------------------- vitrine */
/* Direcao C: carros reais passando no topo. Rolagem horizontal com snap:
   passa no dedo sem JS; o vitrine.js (5b) poe as setas e troca sozinho.
   Pedido do Erick (23/09): o carro aparece INTEIRO e sem escurecer -- a
   foto fica num quadro 4:3 com object-fit: contain e so o fundo (a mesma
   foto, pequena, desfocada e escurecida) da o impacto. Celular: foto em
   cima, texto embaixo; desktop (>= 900 px): texto a esquerda, foto a direita. */
/* Sem borda embaixo: o degrade ja leva o pe ao fundo da pagina e uma linha
   ali cortava a barra de categorias que atravessa a transicao. */
/* Piso de 560px: em notebook de tela baixa (1366x768, ~657px uteis) 76vh
   dava 499px e o texto, que encosta embaixo, era cortado no alto. */
.site-vitrine {
  --vitrine-altura: clamp(560px, 76vh, 640px);
  position: relative;
  overflow: hidden;
  background: var(--site-fundo);
}

.site-vitrine__trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.site-vitrine__trilho::-webkit-scrollbar {
  display: none;
}

.site-vitrine__slide {
  position: relative;
  display: flex;
  flex: 0 0 100%;
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
}

/* Fundo: a foto de 320 px esticada, desfocada e escurecida. O scale esconde
   a borda clara que o blur deixa nas beiradas. */
.site-vitrine__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(28px) brightness(0.35);
  transform: scale(1.15);
}

/* O degrade so escurece o fundo (a foto do carro fica por cima dele): mais
   denso a esquerda, onde mora o texto, e no pe da vitrine, onde a barra de
   categorias atravessa -- cabecalho, vitrine e barra viram uma composicao so. */
.site-vitrine__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, var(--site-fundo) 0%, rgba(8, 11, 14, 0) 42%),
    linear-gradient(90deg, rgba(8, 11, 14, 0.85) 0%, rgba(8, 11, 14, 0.35) 45%, rgba(8, 11, 14, 0) 80%);
}

.site-vitrine__conteudo {
  display: flex;
  flex-direction: column;
}

.site-vitrine__quadro {
  display: flex;
  aspect-ratio: 4 / 3;
  align-items: center;
  justify-content: center;
  margin-inline: -24px;
}

/* contain: se a foto vier fora do 4:3 sobra fundo, nunca corta o carro. */
.site-vitrine__foto {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Folga de baixo: as setas (44) e a barra de categorias, que sobe 56 px
   sobre o pe da vitrine. */
.site-vitrine__texto {
  padding-block: 20px 132px;
}

.site-vitrine__titulo {
  max-width: 16ch;
  margin: 0;
  font-family: var(--site-fonte-titulo);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

@media (min-width: 900px) {
  .site-vitrine__conteudo {
    display: grid;
    height: var(--vitrine-altura);
    grid-template-areas: "texto quadro";
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 56px;
    padding-block: 40px 136px;
  }

  /* O quadro tem a altura da faixa (menos as folgas de cima e de baixo) em
     4:3 e encosta a direita. Altura explicita: com height: 100% o quadro
     crescia com a foto e uma foto fora do 4:3 descia sobre as setas. Numa
     tela estreita o max-width corta a largura e o contain deixa sobra. */
  .site-vitrine__quadro {
    width: auto;
    height: calc(var(--vitrine-altura) - 176px);
    max-width: 100%;
    min-width: 0;
    grid-area: quadro;
    justify-self: end;
    margin: 0;
  }

  /* Moldura e sombra no proprio <img>: nada fica por cima da foto. Tamanho
     auto com teto de 100%: a caixa do <img> vira a foto desenhada, e sombra
     e raio acompanham uma foto 16:9 ou vertical em vez do quadro 4:3. */
  .site-vitrine__foto {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--site-raio-grande);
    box-shadow: var(--site-sombra-alta);
  }

  /* O texto encosta no pe da faixa, com o contador e as setas logo abaixo
     do "Ver detalhes", na coluna dele (conceito da home). */
  .site-vitrine__texto {
    grid-area: texto;
    align-self: end;
    padding: 0;
  }
}

.site-vitrine__dados {
  margin: 14px 0 0;
  color: var(--site-texto-suave);
  font-size: clamp(15px, 1.4vw, 18px);
}

.site-vitrine__preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 28px;
}

.site-vitrine__preco strong {
  color: var(--site-destaque);
  font-family: var(--site-fonte-titulo);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Tela baixa no desktop: titulo um degrau menor para tres linhas caberem
   na faixa de 560px sem cortar o eyebrow. */
@media (min-width: 900px) and (max-height: 760px) {
  .site-vitrine__titulo {
    font-size: clamp(34px, 4vw, 52px);
  }
}

.site-vitrine__texto .site-botao {
  min-height: 52px;
  padding: 0 28px;
  font-size: 16px;
}

.site-vitrine__controles {
  position: absolute;
  right: 0;
  bottom: 84px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  pointer-events: none;
}

.site-vitrine__controles > * {
  pointer-events: auto;
}

.site-vitrine__contador {
  margin-right: 6px;
  color: var(--site-texto-suave);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.site-vitrine__seta {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--site-linha-forte);
  border-radius: 50%;
  background: rgba(8, 11, 14, 0.72);
  color: var(--site-texto);
  font-size: 22px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.site-vitrine__seta:hover {
  border-color: var(--site-prata-escuro);
  background: var(--site-superficie-interativa);
}

@media (min-width: 900px) {
  .site-vitrine__controles {
    bottom: 72px;
    justify-content: flex-start;
  }
}

.site-vitrine__seta[hidden] {
  display: none;
}

/* Barra de categorias e busca "na borda" do topo (conceito da home): duas
   linhas -- categorias em cima, busca de ponta a ponta embaixo -- numa caixa
   que sobe 56 px sobre o pe da vitrine. */
.site-barra {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  margin-top: -56px;
  padding: 16px;
  border: 1px solid var(--site-linha);
  border-radius: var(--site-raio-grande);
  background: var(--site-superficie);
  box-shadow: var(--site-sombra-alta);
}

.site-barra .site-chips {
  min-width: 0;
  margin: 0;
}

.site-barra__busca {
  display: flex;
  gap: 12px;
}

/* A lupa e desenho em CSS (sem imagem nem fonte de icone): aro + cabo. */
.site-barra__busca label {
  position: relative;
  flex: 1;
  min-width: 0;
}

.site-barra__busca label::before,
.site-barra__busca label::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.site-barra__busca label::before {
  top: 50%;
  left: 16px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--site-texto-suave);
  border-radius: 50%;
  transform: translateY(-60%);
}

.site-barra__busca label::after {
  top: calc(50% + 4px);
  left: 28px;
  width: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--site-texto-suave);
  transform: rotate(45deg);
}

.site-barra__busca input {
  width: 100%;
  padding-left: 44px;
}

.site-barra__busca .site-botao {
  min-width: 120px;
}

.site-secao__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 28px;
}

.site-secao__cabeca .site-secao__titulo {
  margin: 0;
}

.site-link-seta {
  color: var(--site-texto);
  font-weight: 600;
  text-underline-offset: 5px;
  text-decoration-color: var(--site-linha-forte);
  transition: text-decoration-color 0.15s ease;
}

.site-link-seta:hover {
  text-decoration-color: currentColor;
}

/* Ate 8 recentes na inicio: 4 colunas no desktop largo, 3 e 2 nos
   breakpoints abaixo e 1 no celular (a regra de .site-grade em 599 px). */
.site-grade--quatro {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1180px) {
  .site-grade--quatro {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------ lojas com mapa */
/* O mapa acompanha a largura do cartao (auto-fit) em 2:1. Ele nasce como
   fachada: um link "Ver no mapa" (sem JS abre o Google Maps) que o
   mapa.js troca pelo iframe no clique -- dois iframes do Google na
   abertura derrubavam o Lighthouse do Contato para 72. */
.site-loja__mapa {
  display: block;
  width: calc(100% + 48px);
  aspect-ratio: 2 / 1;
  height: auto;
  margin: -24px -24px 4px;
  border: 0;
  border-radius: var(--site-raio) var(--site-raio) 0 0;
}

.site-loja__mapa--fachada {
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--site-linha);
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(255, 255, 255, 0.035) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(255, 255, 255, 0.035) 27px 28px),
    var(--site-superficie-elevada);
  color: var(--site-texto);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.site-loja__mapa--fachada span {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid var(--site-linha);
  border-radius: 999px;
  background: var(--site-fundo);
}

/* O mesmo alfinete so em CSS do cartao (site-cartao__loja). */
.site-loja__mapa--fachada span::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.site-loja__mapa--fachada:hover span {
  border-color: var(--site-prata-escuro);
}

.site-contato__titulo {
  margin: 0 0 12px;
  font-family: var(--site-fonte-titulo);
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Lojas e formulario lado a lado no desktop (spec 8.4), com o formulario
   alinhado ao topo das lojas; empilham em 860 px. */
.site-contato__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: 32px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--site-linha);
}

.site-contato__grade--sem-lojas {
  grid-template-columns: minmax(0, 560px);
}

/* ------------------------------------------------------------------ ficha */
.site-trilha ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 24px 0 16px;
  color: var(--site-texto-fraco);
  font-size: 14px;
  list-style: none;
}

.site-trilha li + li::before {
  content: "›";
  margin-right: 8px;
}

.site-trilha a {
  color: var(--site-texto-suave);
  text-decoration: none;
}

.site-trilha a:hover {
  color: var(--site-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Foto com ~63% e lateral com ~37% (spec 8.3): a galeria e o foco. */
.site-ficha__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-areas:
    "galeria lateral"
    "detalhes lateral";
  /* A lateral (preco, botoes e formulario) ocupa as duas linhas; com as duas
     em "auto" o navegador repartia a altura dela e esticava a linha da
     galeria, abrindo ~200 px de vazio entre a foto e a Ficha. A sobra vai
     para a ultima linha. */
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 32px 40px;
  padding-bottom: 40px;
}

.site-galeria {
  grid-area: galeria;
  min-width: 0;
}

/* Sem sticky (spec 8.3: "so onde nao encobrir"): com o formulario a lateral
   passa da altura da tela, e grudada o "Enviar" so aparecia no fim da
   ficha. Preco e acoes ja estao na primeira dobra, ao lado da foto. */
.site-ficha__lateral {
  display: grid;
  grid-area: lateral;
  gap: 24px;
  min-width: 0;
}

.site-ficha__detalhes {
  grid-area: detalhes;
  min-width: 0;
}

/* contain: foto fora do 4:3 (vertical, recortada) aparece inteira, com a
   sobra no grafite do quadro; nas 4:3 nao muda nada. */
.site-galeria__principal {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--site-linha);
  border-radius: var(--site-raio-grande);
  background: var(--site-superficie-elevada);
}

.site-galeria__principal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-galeria__contador {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 4px 12px;
  border-radius: var(--site-raio-pequeno);
  background: rgba(8, 11, 14, 0.78);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Uma fileira so, com 6 miniaturas a vista (mockup ficha-veiculo); as
   demais rolam de lado. Sem JS cada miniatura e o link da foto grande, entao
   todas continuam alcancaveis sem virar um mosaico de varias linhas. */
.site-galeria__miniaturas {
  display: grid;
  grid-auto-columns: calc((100% - 5 * 10px) / 6);
  grid-auto-flow: column;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0 0 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--site-linha) transparent;
  scrollbar-width: thin;
  list-style: none;
}

.site-galeria__miniaturas li {
  position: relative;
  scroll-snap-align: start;
}

/* "+N" sobre a 6a miniatura (mockup): so aviso; o clique passa para o link. */
.site-galeria__miniaturas li[data-mais]::after {
  content: attr(data-mais);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--site-raio-pequeno);
  background: rgba(8, 11, 14, 0.66);
  color: #fff;
  font-family: var(--site-fonte-titulo);
  font-size: 20px;
  font-weight: 800;
  pointer-events: none;
}

.site-galeria__miniaturas a {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 2px solid transparent;
  border-radius: var(--site-raio-pequeno);
  opacity: 0.78;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.site-galeria__miniaturas a:hover,
.site-galeria__miniatura--atual {
  opacity: 1;
}

.site-galeria__miniaturas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dentro da fileira que rola, o contorno de foco por fora seria cortado. */
.site-galeria__miniaturas a:focus-visible {
  outline-offset: -2px;
}

.site-galeria__miniatura--atual {
  border-color: var(--site-destaque) !important;
}

/* Sobre a borda clara da miniatura atual o foco claro nao aparecia. */
.site-galeria__miniatura--atual:focus-visible {
  outline-color: var(--site-destaque-texto);
}

/* Preco e acoes abertos, sem caixa (conceito da ficha): o formulario, logo
   abaixo, e que fica numa caixa propria -- parte da ficha, mas separado das
   acoes imediatas. */
.site-preco-box {
  display: grid;
  gap: 6px;
}

.site-ficha__titulo {
  margin: 0;
  font-family: var(--site-fonte-titulo);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.site-ficha__ano {
  margin: 0;
  color: var(--site-texto-suave);
  font-size: 17px;
}

.site-preco-box .site-eyebrow {
  margin: 0;
}

.site-preco-box__selos {
  display: flex;
  gap: 6px;
  margin: 4px 0 0;
}

.site-preco-box__selos .site-selo {
  position: static;
}

.site-preco-box .site-preco-de {
  margin: 4px 0 0;
}

.site-preco-box__preco {
  margin: 4px 0 0;
  color: var(--site-destaque);
  font-family: var(--site-fonte-titulo);
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.site-preco-box__acoes {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.site-preco-box__acoes .site-botao {
  min-height: 52px;
  font-size: 16px;
}

.site-preco-box__acoes .site-botao--duas-linhas {
  min-height: 64px;
}

.site-preco-box__loja {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  padding-block: 18px;
  border-block: 1px solid var(--site-linha);
  color: var(--site-texto-suave);
  font-size: 15px;
}

.site-preco-box__loja strong {
  color: var(--site-texto);
}

.site-preco-box__loja a {
  color: var(--site-texto);
}

/* Secoes abertas com divisor (spec 8.3): Ficha, Opcionais e Sobre. */
.site-ficha__secao {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--site-linha);
}

.site-ficha__secao:first-child {
  margin-top: 8px;
}

.site-ficha__secao h2 {
  margin: 0 0 20px;
  font-family: var(--site-fonte-titulo);
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.site-ficha__secao p {
  max-width: 72ch;
  color: var(--site-texto-suave);
  font-size: 16px;
  line-height: 1.65;
}

/* Os dados numa grade de celulas separadas por linhas finas (conceito da
   ficha), sem icones. As linhas sao sombras de 1 px cortadas pela lista, para
   nao dobrar na borda de fora. */
.site-etiquetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--site-linha);
  border-radius: var(--site-raio);
  background: var(--site-superficie);
  list-style: none;
}

.site-etiquetas li {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 14px 18px;
  box-shadow: 1px 0 0 var(--site-linha), 0 1px 0 var(--site-linha);
}

.site-etiquetas span {
  color: var(--site-texto-fraco);
  font-size: 13px;
  font-weight: 600;
}

.site-etiquetas strong {
  color: var(--site-texto);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.site-opcionais {
  columns: 2 220px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-opcionais li {
  padding: 6px 0;
  color: var(--site-texto);
  break-inside: avoid;
}

.site-opcionais li::before {
  content: "✓";
  margin-right: 10px;
  color: var(--site-texto-suave);
  font-weight: 800;
}

.site-opcionais__mais summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 8px;
  color: var(--site-destaque);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.site-barra-fixa {
  display: none;
}

/* ----------------------------------------------------- formulario (7.4) */
.site-interesse__caixa {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--site-linha);
  border-radius: var(--site-raio);
  background: var(--site-superficie);
}

/* #interesse e alvo do "Tenho interesse" (ficha e barra fixa): sem a folga,
   o cabecalho fixo cobria o titulo do formulario (igual ao #resultado). */
.site-interesse {
  scroll-margin-top: 80px;
}

.site-interesse--pagina {
  max-width: 560px;
}

.site-interesse__titulo {
  margin: 0;
  font-family: var(--site-fonte-titulo);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
}

.site-interesse__titulo:focus {
  outline: none;
}

.site-form .site-interesse__titulo {
  margin-bottom: 18px;
}

/* Aviso da previa e erro ficam entre o titulo e os campos: o <form> nao e
   grade, entao a folga vem daqui. */
.site-form > .site-form__erro,
.site-form > .site-form__aviso {
  margin-bottom: 16px;
}

.site-interesse__caixa p {
  margin: 0;
  color: var(--site-texto-suave);
}

.site-form fieldset {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}

.site-form__campo {
  display: grid;
  gap: 6px;
  color: var(--site-texto-suave);
  font-size: 14px;
}

/* Peso so no rotulo: o campo herda a fonte do label (font: inherit) e o
   texto digitado saia em negrito. */
.site-form__campo > span {
  font-weight: 600;
}

.site-form__campo input,
.site-form__campo textarea {
  width: 100%;
}

.site-form__campo textarea {
  padding-block: 12px;
  resize: vertical;
}

.site-form__marca {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--site-texto);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.site-form__marca input {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--site-destaque);
}

.site-form__marca a {
  color: var(--site-texto);
}

.site-form__erro {
  padding: 12px 14px;
  border: 1px solid #7a2e2e;
  border-radius: var(--site-raio-pequeno);
  background: #2a1414;
  color: #ffb4b4 !important;
}

.site-form__aviso {
  padding: 12px 14px;
  border: 1px solid #4a3d16;
  border-radius: var(--site-raio-pequeno);
  background: #2b2410;
  color: #f5d98b !important;
}

/* A armadilha para robo fica fora da tela, e nao display:none (robo le CSS simples). */
.site-form__armadilha {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.site-form fieldset:disabled {
  opacity: 0.6;
}

.site-interesse__voltar {
  margin-top: 16px;
}

/* -------------------------------------------- galeria em tela cheia (JS) */
.site-galeria__principal {
  cursor: zoom-in;
}

.site-tela-cheia {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  color: #fff;
}

.site-tela-cheia::backdrop {
  background: rgba(0, 0, 0, 0.92);
}

.site-tela-cheia__foto {
  width: 100%;
  height: 100%;
  object-fit: contain;
  touch-action: pan-y;
  user-select: none;
}

.site-tela-cheia__contador {
  position: absolute;
  bottom: 16px;
  left: 50%;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
}

.site-tela-cheia__botao {
  position: absolute;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.site-tela-cheia__fechar {
  top: 16px;
  right: 16px;
}

.site-tela-cheia__anterior {
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}

.site-tela-cheia__proxima {
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

/* ------------------------------------------------------------ responsivo */
@media (max-width: 860px) {
  /* O ☰ (mockups) entra em 860px, nao so no celular: com os tamanhos novos
     (logo ate 190px, itens de 15px, WhatsApp com texto) o cabecalho de
     desktop so cabe a partir de ~740px e cortava o WhatsApp no celular
     deitado e no tablet pequeno. Fica na ponta direita, depois do WhatsApp. */
  .site-menu {
    display: none;
  }

  .site-menu-celular {
    display: block;
    order: 2;
  }

  /* Aqui o botao do cabecalho vira so o icone: o flutuante ja chama. */
  .site-cabecalho__whatsapp {
    width: 46px;
    min-height: 46px;
    margin-left: auto;
    padding: 0;
  }

  .site-cabecalho__whatsapp span {
    display: none;
  }

  /* O glifo ocupa ~57% do botao (antes 18 px, ~40%). */
  .site-cabecalho__whatsapp .site-icone {
    width: 26px;
    height: 26px;
  }

  .site-sobre__grade,
  .site-rodape__grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-estoque__grade,
  .site-contato__grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-grade--quatro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Barra fixa embaixo, como no mockup do estoque e na ficha: Filtrar e
     WhatsApp ao alcance do polegar. O flutuante do WhatsApp sai para nao
     cobrir a barra, e o rodape ganha folga para nao ficar por baixo dela. */
  .site-estoque__barra-celular {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 8px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--site-linha);
    background: var(--site-fundo);
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.55);
  }

  .site--estoque .site-whatsapp-flutuante {
    display: none;
  }

  /* Folga do tamanho da barra (8 + 44 + 8 + borda, mais a area segura do
     iPhone) para o fim do rodape nunca ficar escondido atras dela. */
  .site--estoque .site-rodape {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  /* Gaveta de filtros sem JS: #filtros:target abre, "Fechar" leva a #resultado. */
  .site-filtros {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    overflow-y: auto;
    padding: 16px;
    background: var(--site-fundo);
  }

  /* "Ordenar" leva a #ordenar, que esta dentro da gaveta: :has abre a mesma gaveta. */
  .site-filtros:target,
  .site-filtros:has(:target) {
    display: block;
  }

  /* Na gaveta, "Filtros / Fechar" fica preso no alto e "Aplicar filtros"
     embaixo: quem entra por "Ordenar" (#ordenar) troca a ordem e aplica sem
     rolar a gaveta inteira, e o Fechar nunca some. */
  .site-filtros__cabeca {
    position: sticky;
    top: -16px;
    z-index: 2;
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    margin: -16px -16px 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--site-linha);
    background: var(--site-fundo);
  }

  .site-filtros__acoes {
    position: sticky;
    bottom: -16px;
    z-index: 2;
    margin: 0 -16px -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--site-linha);
    background: var(--site-fundo);
  }

  .site-filtros__cabeca h2 {
    margin: 0;
    font-family: var(--site-fonte-titulo);
  }

  .site-filtros__fechar {
    color: var(--site-texto);
  }

  .site-ordenar {
    position: static;
    width: 100%;
    scroll-margin-top: 72px;
  }

  /* Tres botoes na barra de baixo (Filtrar, Ordenar, WhatsApp), como no mockup. */
  .site-estoque__barra-celular .site-botao {
    padding: 0 8px;
    font-size: 14px;
    gap: 6px;
  }

  .site-ordenar select {
    flex: 1;
  }

  .site-ficha__grade {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "galeria"
      "lateral"
      "detalhes";
    grid-template-rows: none;
  }

  /* Barra fixa do celular (mockup ficha-veiculo): WhatsApp e Tenho interesse
     sempre a mao. Fundo solido com sombra para cima (conferencia do
     controlador, 23/09): translucida, o texto da pagina aparecia entre os
     botoes. */
  .site-barra-fixa {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--site-linha);
    background: var(--site-fundo);
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.55);
  }

  .site--ficha .site-rodape {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  /* Em 320 px cada botao tem ~140 px: "Tenho interesse" quebrava em duas
     linhas com o respiro de 20 px do botao padrao. */
  .site-barra-fixa .site-botao {
    padding: 0 10px;
    font-size: 14px;
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .site-largura {
    width: min(100% - 32px, var(--site-largura));
  }

  .site-cabecalho__faixa {
    min-height: 62px;
    gap: 10px;
  }

  .site-marca img {
    height: 32px;
    max-width: 128px;
  }

  .site-topo > .site-largura {
    padding-block: 48px 40px;
  }

  .site-topo__acoes .site-botao {
    flex: 1 1 100%;
  }

  .site-vitrine__controles {
    bottom: 60px;
  }

  .site-vitrine__quadro {
    margin-inline: -16px;
  }

  .site-vitrine__texto {
    padding-bottom: 108px;
  }

  .site-barra {
    margin-top: -48px;
    padding: 12px;
  }

  .site-barra__busca .site-botao {
    min-width: 0;
  }

  /* No celular os chips rolam de lado dentro da barra, sem quebrar a pagina. */
  .site-barra .site-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .site-whatsapp-flutuante {
    right: 16px;
    bottom: 16px;
  }

  /* Estoque no celular: as categorias numa fileira que rola de lado (mockup
     estoque.html), sem empurrar a lista duas linhas para baixo. */
  .site-estoque .site-chips {
    flex-wrap: nowrap;
    margin-inline: -16px;
    padding: 0 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-estoque .site-chips::-webkit-scrollbar {
    display: none;
  }

  .site-barra .site-chip:focus-visible,
  .site-estoque .site-chip:focus-visible {
    outline-offset: -2px;
  }

  /* Ficha no celular: a foto de ponta a ponta, como no mockup; as
     miniaturas continuam logo abaixo, com a folga lateral de sempre. */
  .site-galeria__principal {
    margin-inline: -16px;
    border: 0;
    border-radius: 0;
  }
}

/* Auditoria de design (23/09): no celular toda grade de cartoes e uma coluna
   de largura total -- inclusive "Voce tambem pode gostar", que era uma
   fileira de lado e, com um semelhante so, deixava o cartao estreito com
   vazio a direita. */
@media (max-width: 599px) {
  .site-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }

  /* Sem transicao o zoom e o deslocamento do hover viravam um salto: fora. */
  .site-cartao:hover,
  .site-cartao:hover .site-cartao__foto img,
  .site-botao:hover {
    transform: none;
  }
}