/* =====================================================================
   ITURAMA VEÍCULOS — folha de estilo do site público
   Paleta tirada do logotipo: preto perfurado + dourado escovado.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root {
  /* dourado do logo, do brilho ao fundo da gravação */
  --ouro-luz:    #F7E3A6;
  --ouro-claro:  #EFCE7E;
  --ouro:        #D6A340;
  --ouro-medio:  #BC8A2E;
  --ouro-fundo:  #8E651C;
  --ouro-verniz: linear-gradient(135deg, var(--ouro-luz) 0%, var(--ouro) 44%, var(--ouro-fundo) 100%);

  /* pretos da chapa perfurada */
  --tinta:       #0A0A0B;
  --tinta-90:    #101012;
  --tinta-80:    #16161A;
  --tinta-70:    #1E1E23;
  --tinta-60:    #2A2A30;
  --tinta-50:    #3A3A42;

  /* neutros claros */
  --papel:       #F7F6F3;
  --papel-2:     #EFEDE8;
  --papel-3:     #E2DFD8;
  --cinza:       #8E8A82;
  --cinza-forte: #5A564F;

  /* sinalização */
  --verde:       #3F7D55;
  --verde-luz:   #E6F1E9;
  --tijolo:      #A53F2B;
  --tijolo-luz:  #F7E9E6;

  /* superfícies */
  --fundo:       var(--papel);
  --superficie:  #FFFFFF;
  --borda:       rgba(10,10,11,.10);
  --borda-forte: rgba(10,10,11,.18);
  --borda-ouro:  rgba(214,163,64,.38);

  /* tipografia */
  --fonte:       'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* medidas */
  --largura:     1280px;
  --gutter:      clamp(1.25rem, 4vw, 3.5rem);
  --raio:        3px;
  --raio-md:     6px;
  --raio-pill:   999px;

  /* movimento */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --ease-saida:  cubic-bezier(.4, 0, .2, 1);

  /* profundidade — sombras curtas e densas, não difusas */
  --sombra-1:    0 1px 2px rgba(10,10,11,.06), 0 2px 8px rgba(10,10,11,.04);
  --sombra-2:    0 2px 4px rgba(10,10,11,.08), 0 8px 24px rgba(10,10,11,.07);
  --sombra-3:    0 4px 8px rgba(10,10,11,.10), 0 18px 48px rgba(10,10,11,.12);

  /* texturas do logo */
  --furos:       radial-gradient(circle at center, rgba(255,255,255,.055) 1.5px, transparent 1.7px);
  --furos-claro: radial-gradient(circle at center, rgba(10,10,11,.045) 1.5px, transparent 1.7px);
  --grao:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   2. Reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

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

/* O navegador esconde [hidden] com display:none, mas essa regra é da
   folha padrão e perde para qualquer display declarado aqui — foi assim
   que o aviso "nenhum favorito" aparecia junto com os cards. Declarando
   como autor, hidden volta a valer em qualquer elemento. */
[hidden] { display: none !important; }

/* Ícones ficam na mesma linha do texto, inclusive dentro de títulos
   (o reset acima deixa svg como block e quebraria a linha). */
.ico { display: inline-block; vertical-align: middle; flex: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

ul, ol { list-style: none; padding: 0; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--ouro); color: var(--tinta); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------
   3. Tipografia
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .96;
}

.titulo-secao {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -.035em;
}

/* o toque editorial: uma palavra em serifa itálica dentro do título */
.serif {
  font-family: var(--fonte-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}

.ouro { color: var(--ouro); }

.ouro-verniz {
  background: var(--ouro-verniz);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* etiqueta de ficha técnica */
.rotulo {
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cinza);
}

.rotulo-ouro { color: var(--ouro-medio); }

.olho {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ouro-medio);
}

.olho::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.texto-apoio {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.68;
  color: var(--cinza-forte);
  max-width: 56ch;
  text-wrap: pretty;
}

.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   4. Estrutura
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-largo { max-width: 1560px; }

/* Ritmo vertical.
   Seções claras encostam umas nas outras, então o vão visível é a soma
   de dois paddings — por isso o valor é contido. As faixas escuras têm
   respiro próprio: ali o padding é o miolo do bloco colorido, não vão. */
.secao { padding-block: clamp(2.75rem, 4.5vw, 4rem); }
.secao-compacta { padding-block: clamp(2rem, 3.5vw, 3.25rem); }
.secao.secao-escura { padding-block: clamp(3.5rem, 6vw, 5.5rem); }

/* Vitrine e atalhos tratam do mesmo assunto — um respiro só entre os dois.
   O carrossel já carrega o próprio espaçamento embaixo. */
.secao-vitrine { padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(.5rem, 1.5vw, 1rem); }

.secao-escura {
  position: relative;
  background: var(--tinta);
  color: var(--papel);
  isolation: isolate;
}

/* a chapa perfurada do logotipo, bem discreta */
.secao-escura::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--furos);
  background-size: 14px 14px;
  opacity: .6;
  pointer-events: none;
  z-index: -1;
}

.secao-escura .texto-apoio { color: rgba(247,246,243,.66); }
.secao-escura .rotulo { color: rgba(247,246,243,.5); }

/* grão fino: tira o aspecto "chapado" das áreas escuras */
.grao::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grao);
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.cabecalho-secao {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.cabecalho-secao > div { max-width: 46rem; }
.cabecalho-secao .olho { margin-bottom: 1rem; }
.cabecalho-secao .texto-apoio { margin-top: 1rem; }

/* fio dourado que separa blocos */
.fio-ouro {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--borda-ouro) 18%, var(--borda-ouro) 82%, transparent);
}

/* ---------------------------------------------------------------------
   5. Botões
   --------------------------------------------------------------------- */
.btn {
  --btn-fundo: var(--tinta);
  --btn-cor: var(--papel);
  --btn-borda: var(--tinta);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .875rem 1.5rem;
  border: 1px solid var(--btn-borda);
  border-radius: var(--raio);
  background: var(--btn-fundo);
  color: var(--btn-cor);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); }
.btn:active { transform: translateY(0); }

.btn .ico { flex: none; position: relative; z-index: 1; }

/* Um foco de luz acompanha o cursor dentro do botão.
   As coordenadas vêm do JS em --mx/--my; sem JS o botão fica normal. */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(9rem circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,.22), transparent 62%);
  opacity: 0;
  transition: opacity .28s var(--ease);
  pointer-events: none;
}

.btn { position: relative; overflow: hidden; }
.btn:hover::after { opacity: 1; }

/* no dourado a luz branca lava demais; o brilho vem do próprio verniz */
.btn-ouro::after {
  background: radial-gradient(9rem circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,.38), transparent 58%);
}

/* o texto do botão fica acima do foco de luz */
.btn > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
}

/* dourado: a cor da marca, sempre com texto escuro como no logo */
.btn-ouro {
  --btn-fundo: var(--ouro);
  --btn-cor: var(--tinta);
  --btn-borda: var(--ouro);
  background: var(--ouro-verniz);
}

.btn-ouro:hover { filter: brightness(1.06); }

.btn-contorno {
  --btn-fundo: transparent;
  --btn-cor: var(--tinta);
  --btn-borda: var(--borda-forte);
}

.btn-contorno:hover { --btn-borda: var(--tinta); }

.secao-escura .btn-contorno,
.btn-contorno-claro {
  --btn-fundo: transparent;
  --btn-cor: var(--papel);
  --btn-borda: rgba(247,246,243,.28);
}

.secao-escura .btn-contorno:hover,
.btn-contorno-claro:hover { --btn-borda: var(--ouro); --btn-cor: var(--ouro-claro); }

.btn-zap {
  --btn-fundo: #1FA855;
  --btn-cor: #fff;
  --btn-borda: #1FA855;
}

.btn-zap:hover { --btn-fundo: #17904a; --btn-borda: #17904a; }

.btn-grande { padding: 1.0625rem 2rem; font-size: .9375rem; }
.btn-pequeno { padding: .625rem 1rem; font-size: .8125rem; }
.btn-bloco { width: 100%; }

.btn[disabled] { opacity: .45; pointer-events: none; }

/* link com seta que anda no hover */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--tinta);
  border-bottom: 1px solid var(--borda-ouro);
  padding-bottom: .25rem;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.link-seta .ico { transition: transform .25s var(--ease); }
.link-seta:hover { color: var(--ouro-medio); border-color: var(--ouro); }
.link-seta:hover .ico { transform: translateX(4px); }
.secao-escura .link-seta { color: var(--papel); }
.secao-escura .link-seta:hover { color: var(--ouro-claro); }

/* ---------------------------------------------------------------------
   6. Selos e etiquetas
   --------------------------------------------------------------------- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .625rem;
  border-radius: var(--raio);
  font-size: .688rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.selo-ouro    { background: var(--ouro-verniz); color: var(--tinta); }
.selo-escuro  { background: rgba(10,10,11,.82); color: var(--papel); backdrop-filter: blur(6px); }
.selo-claro   { background: rgba(255,255,255,.92); color: var(--tinta); backdrop-filter: blur(6px); }
.selo-verde   { background: var(--verde-luz); color: var(--verde); }
.selo-tijolo  { background: var(--tijolo-luz); color: var(--tijolo); }
.selo-vendido { background: var(--tijolo); color: #fff; }

.selo-contorno {
  background: transparent;
  border: 1px solid var(--borda-ouro);
  color: var(--ouro-medio);
}

/* pill de status da loja (aberto / fechado) */
.status-loja {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.status-bolinha {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--cinza);
  flex: none;
}

.status-loja.aberta .status-bolinha {
  background: #46C271;
  box-shadow: 0 0 0 0 rgba(70,194,113,.7);
  animation: pulso 2.4s ease-out infinite;
}

@keyframes pulso {
  70%  { box-shadow: 0 0 0 7px rgba(70,194,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(70,194,113,0); }
}

/* ---------------------------------------------------------------------
   7. Cabeçalho
   --------------------------------------------------------------------- */
/* O topo é um bloco só: faixa de utilidades + barra de navegação.
   Ao rolar, a faixa recolhe e a barra encosta no alto da tela. */
.topo {
  --h-faixa: 38px;
  position: sticky;
  top: calc(-1 * var(--h-faixa));
  z-index: 60;
}

/* na home o topo flutua sobre o hero */
.topo.sobreposto {
  position: fixed;
  inset-inline: 0;
  top: 0;
  transition: transform .34s var(--ease);
}

.topo.sobreposto.colado { transform: translateY(calc(-1 * var(--h-faixa))); }

/* fio dourado que acompanha o quanto da página já foi lida */
.progresso-leitura {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--progresso, 0));
  transform-origin: left;
  background: var(--ouro-verniz);
  opacity: .9;
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 860px) {
  .topo { --h-faixa: 0px; }
}

.faixa-topo {
  background: var(--tinta);
  color: rgba(247,246,243,.72);
  font-size: .75rem;
  border-bottom: 1px solid rgba(247,246,243,.08);
}

.faixa-topo .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 38px;
}

.faixa-topo-itens { display: flex; align-items: center; gap: 1.5rem; }
.faixa-topo a { transition: color .2s var(--ease); }
.faixa-topo a:hover { color: var(--ouro-claro); }
.faixa-topo .ico { opacity: .6; }

.faixa-item { display: inline-flex; align-items: center; gap: .5rem; }

@media (max-width: 860px) {
  .faixa-topo { display: none; }
}

.cabecalho {
  background: var(--tinta);
  border-bottom: 1px solid rgba(247,246,243,.08);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}

/* na home começa transparente, deixando o hero aparecer por baixo */
.topo.sobreposto .cabecalho {
  background: transparent;
  border-color: transparent;
}

.topo.sobreposto.colado .cabecalho {
  background: rgba(10,10,11,.92);
  backdrop-filter: blur(14px) saturate(1.3);
  border-color: rgba(247,246,243,.08);
}

.cabecalho .container {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.75rem);
  height: 76px;
}

.marca { flex: none; display: flex; align-items: center; }
.marca img { height: 46px; width: auto; }

.nav-principal { display: flex; align-items: center; gap: clamp(.75rem, 1.8vw, 1.75rem); margin-inline-start: auto; }

.nav-link {
  position: relative;
  padding: .5rem 0;
  font-size: .875rem;
  font-weight: 500;
  color: rgba(247,246,243,.78);
  transition: color .2s var(--ease);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: var(--ouro-verniz);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .32s var(--ease);
}

.nav-link:hover { color: var(--papel); }
.nav-link:hover::after,
.nav-link.is-ativo::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-ativo { color: var(--ouro-claro); }

.cabecalho-acoes { display: flex; align-items: center; gap: .625rem; flex: none; }

/* contador de favoritos / comparador */
.acao-icone {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(247,246,243,.16);
  border-radius: var(--raio);
  color: rgba(247,246,243,.8);
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}

.acao-icone:hover { border-color: var(--ouro); color: var(--ouro-claro); }

.acao-contador {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 1.125rem;
  height: 1.125rem;
  padding-inline: .25rem;
  display: grid;
  place-items: center;
  border-radius: var(--raio-pill);
  background: var(--ouro);
  color: var(--tinta);
  font-size: .625rem;
  font-weight: 700;
  line-height: 1;
}

.acao-contador[hidden] { display: none; }

.btn-menu { display: none; }

@media (max-width: 1040px) {
  .nav-principal { display: none; }
  .btn-menu { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--papel); margin-inline-start: auto; }
  .cabecalho-acoes .btn { display: none; }
}

/* Em telas bem estreitas (320px) a logo e os três botões não cabiam
   depois que a busca entrou no cabeçalho. Tudo encolhe um pouco em vez
   de esconder qualquer atalho. */
@media (max-width: 420px) {
  .cabecalho .container { gap: .5rem; }
  .marca img { height: 34px; }
  .cabecalho-acoes { gap: .375rem; }
  .acao-icone { width: 2.25rem; height: 2.25rem; }
  .btn-menu { width: 2.25rem; height: 2.25rem; }
}

/* menu mobile em tela cheia */
.menu-movel {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--tinta);
  display: flex;
  flex-direction: column;
  padding: 1.25rem var(--gutter) 2rem;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .42s var(--ease), visibility .42s;
  overflow-y: auto;
}

.menu-movel.aberto { transform: translateY(0); visibility: visible; }

.menu-movel-topo { display: flex; align-items: center; justify-content: space-between; height: 56px; margin-bottom: 1.5rem; }
.menu-movel-topo button { color: var(--papel); }

.menu-movel-lista { display: flex; flex-direction: column; }

.menu-movel-lista a {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(247,246,243,.08);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--papel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(12px);
}

.menu-movel.aberto .menu-movel-lista a {
  animation: entraMenu .45s var(--ease) forwards;
  animation-delay: calc(var(--i) * 45ms + 120ms);
}

@keyframes entraMenu { to { opacity: 1; transform: translateY(0); } }

.menu-movel-lista a .ico { color: var(--ouro); opacity: .45; }
.menu-movel-rodape { margin-top: auto; padding-top: 2rem; display: grid; gap: .75rem; }

/* ---------------------------------------------------------------------
   8. Hero
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--tinta);
  color: var(--papel);
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(3rem, 5vw, 4.25rem);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--furos);
  background-size: 15px 15px;
  opacity: .55;
  z-index: -2;
}

/* halo dourado atrás do carro */
.hero::after {
  content: '';
  position: absolute;
  top: 8%;
  right: -12%;
  width: min(72vw, 900px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(214,163,64,.20) 0%, rgba(214,163,64,.07) 42%, transparent 68%);
  z-index: -1;
  pointer-events: none;
}

.hero-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.hero-texto { position: relative; z-index: 2; max-width: 34rem; }
.hero-texto .olho { margin-bottom: 1.5rem; }

.hero h1 { margin-bottom: 1.5rem; }
.hero h1 .serif { color: var(--ouro-claro); }

.hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.66;
  color: rgba(247,246,243,.66);
  max-width: 44ch;
  margin-bottom: 2.25rem;
  text-wrap: pretty;
}

.hero-botoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; }

/* três números que provam o que o texto promete */
.hero-provas {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(247,246,243,.1);
}

.hero-prova strong {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--ouro-claro);
  font-variant-numeric: tabular-nums;
}

.hero-prova span {
  display: block;
  margin-top: .4375rem;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(247,246,243,.44);
}

/* a foto sangra para fora da coluna */
.hero-figura { position: relative; }

.hero-palco {
  position: relative;
  border-radius: var(--raio-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--tinta-80);
  box-shadow: 0 32px 60px rgba(0,0,0,.55);
}

.hero-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .55s var(--ease), transform 8s linear;
}

/* respiro lento na foto: dá vida sem chamar atenção para si */
.hero-palco img { transform: scale(1.04); }
.hero-palco.trocando img { opacity: 0; transition-duration: .28s; }
.hero-palco.entrando img { transform: scale(1); }

/* marcadores dos destaques, com a barra que conta o tempo */
.hero-marcadores {
  position: absolute;
  left: clamp(.875rem, 2vw, 1.25rem);
  top: clamp(.875rem, 2vw, 1.25rem);
  z-index: 3;
  display: flex;
  gap: .375rem;
}

.hero-marcador {
  width: 2.25rem;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.3);
  overflow: hidden;
  padding: 0;
  transition: background-color .25s var(--ease);
}

.hero-marcador:hover { background: rgba(255,255,255,.5); }

.hero-marcador span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--ouro-verniz);
  transform: scaleX(0);
  transform-origin: left;
}

.hero-marcador.ativo span { animation: contaHero var(--duracao-hero, 5s) linear forwards; }
.hero-marcador.ativo.pausado span { animation-play-state: paused; }

@keyframes contaHero { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .hero-palco img { transform: none; }
  .hero-marcador.ativo span { animation: none; transform: scaleX(1); }
}

/* etiqueta flutuante sobre a foto */
.hero-etiqueta {
  position: absolute;
  left: clamp(-1rem, -2vw, -2.5rem);
  bottom: clamp(1rem, 4vw, 2.5rem);
  background: rgba(16,16,18,.86);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(247,246,243,.12);
  border-radius: var(--raio-md);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--sombra-3);
}

.hero-etiqueta .rotulo { color: rgba(247,246,243,.5); margin-bottom: .25rem; display: block; }
.hero-etiqueta strong { display: block; font-size: 1.0625rem; letter-spacing: -.02em; }
.hero-etiqueta .preco { color: var(--ouro-claro); font-variant-numeric: tabular-nums; }
.hero-etiqueta-divisa { width: 1px; align-self: stretch; background: rgba(247,246,243,.14); }

@media (max-width: 960px) {
  .hero-grade { grid-template-columns: 1fr; }
  .hero-texto { max-width: none; }
  .hero-figura { order: -1; margin-inline: calc(var(--gutter) * -1); }
  .hero-palco { border-radius: 0; aspect-ratio: 4 / 5; max-height: 70vh; }
  .hero-etiqueta { left: var(--gutter); right: var(--gutter); }
}

/* ---------------------------------------------------------------------
   9. Busca rápida (barra que encosta no fim do hero)
   --------------------------------------------------------------------- */
/* a barra monta na divisa entre o hero escuro e o corpo claro */
.faixa-busca {
  position: relative;
  z-index: 20;
  margin-top: clamp(-4.5rem, -6vw, -3.25rem);
}

.busca-rapida {
  position: relative;
  z-index: 10;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 2px solid transparent;
  border-image: var(--ouro-verniz) 1;
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-3);
  padding: 1.25rem;
}

.busca-rapida-grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: .75rem;
  align-items: end;
}

@media (max-width: 900px) {
  .busca-rapida-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .busca-rapida-grade > *:last-child { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .busca-rapida-grade { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   10. Campos de formulário
   --------------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: .4375rem; min-width: 0; align-self: start; }

.campo > label {
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cinza);
}

.campo-controle,
input[type="text"], input[type="tel"], input[type="email"],
input[type="number"], input[type="search"], input[type="password"],
select, textarea {
  width: 100%;
  padding: .8125rem .875rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--tinta);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
  appearance: none;
}

textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }

/* o seletor de arquivo tem largura mínima própria e não encolhe sozinho */
input[type="file"] { min-width: 0; max-width: 100%; }

/* O navegador dá min-inline-size: min-content ao fieldset e ele se recusa
   a encolher, estourando o layout no celular. Zerar resolve. */
fieldset { min-inline-size: 0; border: 0; padding: 0; margin: 0; }

input:hover, select:hover, textarea:hover { border-color: var(--borda-forte); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px rgba(214,163,64,.16);
}

input::placeholder, textarea::placeholder { color: var(--cinza); opacity: .75; }

/* A seta é imagem de fundo do próprio select: acompanha o campo em
   qualquer altura, sem depender de posicionamento absoluto. */
select {
  padding-right: 2.5rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235A564F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9375rem center;
  background-size: .75rem auto;
}

.campo-erro input, .campo-erro select, .campo-erro textarea { border-color: var(--tijolo); }

.mensagem-erro {
  font-size: .8125rem;
  color: var(--tijolo);
  display: flex;
  align-items: center;
  gap: .375rem;
}

.campo-ajuda { font-size: .8125rem; color: var(--cinza); }

/* caixa de seleção com visual de ficha técnica */
.opcao-caixa {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .6875rem .875rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: .875rem;
  cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
  user-select: none;
}

.opcao-caixa:hover { border-color: var(--borda-forte); background: var(--papel-2); }

.opcao-caixa input { position: absolute; opacity: 0; pointer-events: none; }

.opcao-marca {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  border: 1.5px solid var(--borda-forte);
  border-radius: 2px;
  display: grid;
  place-items: center;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}

.opcao-marca::after {
  content: '';
  width: .5rem;
  height: .3125rem;
  border-left: 2px solid var(--tinta);
  border-bottom: 2px solid var(--tinta);
  transform: rotate(-45deg) scale(0);
  transition: transform .18s var(--ease);
}

/* vale para a caixa de opção e para os itens do painel de filtros */
.opcao-caixa input:checked ~ .opcao-marca,
.filtro-item input:checked ~ .opcao-marca { background: var(--ouro); border-color: var(--ouro); }

.opcao-caixa input:checked ~ .opcao-marca::after,
.filtro-item input:checked ~ .opcao-marca::after { transform: rotate(-45deg) scale(1); }

.opcao-caixa:has(input:checked) { border-color: var(--borda-ouro); background: rgba(214,163,64,.06); }

/* ---------------------------------------------------------------------
   11. Card de veículo
   --------------------------------------------------------------------- */
.card-veiculo {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}

.card-veiculo:hover {
  border-color: var(--borda-ouro);
  box-shadow: var(--sombra-3);
  transform: translateY(-3px);
}

/* Brilho dourado acompanhando o cursor, só sobre a área de texto —
   sobre a foto ele sujaria a cor do carro. */
.card-corpo { position: relative; }

.card-corpo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(16rem circle at var(--mx, 50%) var(--my, 50%),
              rgba(214,163,64,.10), transparent 60%);
  opacity: 0;
  transition: opacity .32s var(--ease);
  pointer-events: none;
}

.card-veiculo:hover .card-corpo::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card-corpo::before { display: none; }
}

/* Moldura 4:5.
   As fotos da loja são tiradas em pé (3:4). Numa moldura 4:3 perdíamos
   44% da altura — cortava roda e teto. Em 4:5 sobra quase tudo (94%),
   e uma foto deitada ainda funciona. Se um dia a loja passar a
   fotografar na horizontal, esta é a medida a rever. */
.card-foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--papel-2);
  overflow: hidden;
}

.card-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), filter .4s var(--ease);
}

.card-veiculo:hover .card-foto img { transform: scale(1.045); }

.card-selos {
  position: absolute;
  top: .75rem;
  left: .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3125rem;
  max-width: calc(100% - 4.25rem);
  z-index: 2;
}

/* selos menores dentro do card: o espaço é disputado com a foto */
.card-selos .selo {
  padding: .25rem .4375rem;
  font-size: .625rem;
  letter-spacing: .06em;
}

.card-ferramentas {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  z-index: 3;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.card-veiculo:hover .card-ferramentas,
.card-ferramentas:focus-within { opacity: 1; transform: translateX(0); }

@media (hover: none) {
  .card-ferramentas { opacity: 1; transform: none; }
}

.btn-ferramenta {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--raio);
  background: rgba(255,255,255,.94);
  color: var(--tinta);
  backdrop-filter: blur(6px);
  box-shadow: var(--sombra-1);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

.btn-ferramenta:hover { transform: scale(1.08); }
.btn-ferramenta.ativo { background: var(--ouro); color: var(--tinta); }
.btn-ferramenta.ativo .ico path { fill: currentColor; }

/* Prévia das fotos dentro do card: o mouse varre a imagem e troca a foto,
   como nos portais de veículo. No toque, arrasta para o lado. */
.card-pontos {
  position: absolute;
  inset: auto .75rem .75rem .75rem;
  z-index: 2;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity .22s var(--ease);
  pointer-events: none;
}

.card-foto:hover .card-pontos,
.card-foto.tocando .card-pontos { opacity: 1; }

.card-pontos span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(2px);
  transition: background-color .22s var(--ease);
}

.card-pontos span.ativo { background: var(--ouro-claro); }

/* com a prévia ativa o zoom do hover atrapalha a leitura da foto */
.card-veiculo:hover .card-foto[data-previa-fotos] img { transform: none; }

@media (hover: none) {
  .card-pontos { opacity: 1; }
}

/* contador de fotos, canto inferior */
.card-fotos-total {
  position: absolute;
  bottom: .75rem;
  right: .75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .3125rem .5rem;
  border-radius: var(--raio);
  background: rgba(10,10,11,.7);
  backdrop-filter: blur(6px);
  color: var(--papel);
  font-size: .6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.card-corpo { display: flex; flex-direction: column; flex: 1; padding: 1.125rem 1.25rem 1.25rem; }

.card-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .375rem;
}

.card-marca {
  font-size: .688rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ouro-medio);
}

/* o código é a referência que o cliente anota e cita no WhatsApp */
.card-codigo {
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--cinza);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.card-titulo {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin-bottom: .25rem;
}

.card-titulo a::after { content: ''; position: absolute; inset: 0; z-index: 1; }

.card-versao {
  font-size: .8125rem;
  color: var(--cinza);
  line-height: 1.45;
  margin-bottom: .875rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.35em;
}

/* linha de especificações no formato de ficha */
.card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .875rem;
  padding-block: .75rem;
  border-top: 1px solid var(--borda);
  margin-bottom: .875rem;
}

.card-spec {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  color: var(--cinza-forte);
  font-variant-numeric: tabular-nums;
}

.card-spec .ico { width: 15px; height: 15px; color: var(--ouro-medio); opacity: .85; flex: none; }

/* preço em cima, parcela embaixo: lado a lado o preço quebrava em duas
   linhas assim que o card ficava mais estreito */
.card-preco-area { margin-top: auto; display: grid; gap: .1875rem; }

.card-preco {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.card-preco-anterior {
  font-size: .8125rem;
  color: var(--cinza);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.card-parcela {
  font-size: .8125rem;
  color: var(--cinza);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.card-parcela strong { color: var(--cinza-forte); font-weight: 600; }

/* veículo vendido fica visível, mas apagado */
.card-veiculo.vendido .card-foto img { filter: grayscale(1) brightness(.72); }
.card-veiculo.vendido .card-preco { color: var(--cinza); }

.faixa-vendido {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}

.faixa-vendido span {
  background: var(--tijolo);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .5rem 1.75rem;
  transform: rotate(-7deg);
  box-shadow: var(--sombra-2);
}

/* ---------------------------------------------------------------------
   12. Grades e carrossel
   --------------------------------------------------------------------- */
/* Cards em 4:5 são mais altos que os antigos 4:3, então a coluna encolhe
   um pouco para caber mais um por linha e não virar rolagem infinita. */
.grade-veiculos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(1rem, 1.75vw, 1.5rem);
}

.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.grade-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }

/* Campos curtos (marca, ano, km) lado a lado mesmo em coluna estreita. */
.grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: .75rem;
}

/* trilho arrastável — sem biblioteca, só scroll-snap */
.trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 1fr);
  gap: clamp(1rem, 1.6vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: .5rem 1.5rem;
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
  cursor: grab;
}

.trilho::-webkit-scrollbar { display: none; }
.trilho.arrastando { cursor: grabbing; scroll-snap-type: none; }
.trilho.arrastando * { pointer-events: none; }
.trilho > * { scroll-snap-align: start; }

@media (min-width: 1100px) {
  .trilho { grid-auto-columns: minmax(300px, 1fr); }
}

.trilho-controles { display: flex; gap: .5rem; }

.trilho-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  color: var(--tinta);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}

.trilho-btn:hover:not([disabled]) { border-color: var(--ouro); background: var(--ouro); color: var(--tinta); }
.trilho-btn[disabled] { opacity: .3; cursor: default; }

.secao-escura .trilho-btn { border-color: rgba(247,246,243,.2); color: var(--papel); }
.secao-escura .trilho-btn:hover:not([disabled]) { background: var(--ouro); color: var(--tinta); border-color: var(--ouro); }

/* ---------------------------------------------------------------------
   13. Atalhos de busca (tipo de carro e faixa de preço)
   Linhas com etiqueta à esquerda e chips à direita: fica equilibrado
   com dois ou com dez atalhos, sem coluna sobrando.
   --------------------------------------------------------------------- */
.atalhos-bloco {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  overflow: hidden;
}

.atalhos-linha {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 1.25rem 1.75rem;
  align-items: center;
  padding: clamp(1.125rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--borda);
}

.atalhos-linha:first-child { border-top: 0; }

@media (max-width: 720px) {
  .atalhos-linha { grid-template-columns: 1fr; gap: .875rem; }
}

.atalhos-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip-atalho {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .875rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}

.chip-atalho:hover {
  border-color: var(--borda-ouro);
  background: rgba(214,163,64,.07);
  transform: translateY(-1px);
}

.chip-atalho .ico { color: var(--ouro-medio); }

.chip-total {
  font-size: .75rem;
  color: var(--cinza);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   14. Passo a passo (numeração editorial, não cards iguais)
   --------------------------------------------------------------------- */
.passos { display: grid; gap: 0; counter-reset: passo; }

.passo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(247,246,243,.1);
  counter-increment: passo;
  align-items: start;
}

.passo:last-child { border-bottom: 1px solid rgba(247,246,243,.1); }

.passo::before {
  content: counter(passo, decimal-leading-zero);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--ouro-medio);
  font-variant-numeric: tabular-nums;
  transition: color .4s var(--ease);
}

.passo:hover::before { color: var(--ouro); }

.passo-conteudo { display: grid; gap: .5rem; padding-top: .25rem; }
.passo h3 { font-size: clamp(1.125rem, 1.8vw, 1.375rem); }
.passo p { color: rgba(247,246,243,.6); max-width: 60ch; line-height: 1.65; }

@media (min-width: 900px) {
  .passo { grid-template-columns: auto 1fr 1fr; }
  .passo-conteudo { grid-template-columns: subgrid; grid-column: 2 / -1; display: grid; gap: 0 clamp(1.5rem, 3vw, 3rem); align-items: start; }
  .passo h3 { grid-column: 1; }
  .passo p { grid-column: 2; }
}

/* ---------------------------------------------------------------------
   15. Simulador de financiamento
   --------------------------------------------------------------------- */
.simulador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  overflow: hidden;
  box-shadow: var(--sombra-2);
}

@media (max-width: 820px) { .simulador { grid-template-columns: 1fr; } }

.simulador-controles { padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1.75rem; align-content: start; }

.simulador-resultado {
  background: var(--tinta);
  color: var(--papel);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  align-content: center;
  gap: 1.25rem;
  position: relative;
  isolation: isolate;
}

.simulador-resultado::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--furos);
  background-size: 13px 13px;
  opacity: .5;
  z-index: -1;
}

.parcela-destaque { text-align: center; padding-block: .5rem; }
.parcela-destaque .rotulo { color: rgba(247,246,243,.5); margin-bottom: .625rem; display: block; }

.parcela-valor {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--ouro-verniz);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.parcela-valor small { font-size: .38em; font-weight: 600; letter-spacing: 0; }

.simulador-linhas { display: grid; gap: .625rem; padding-top: 1.25rem; border-top: 1px solid rgba(247,246,243,.12); }

.simulador-linha {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}

.simulador-linha span { color: rgba(247,246,243,.55); }
.simulador-linha strong { font-weight: 600; }

/* aviso legal: precisa ser lido, então nada de cinza quase invisível */
.simulador-aviso {
  font-size: .75rem;
  line-height: 1.6;
  color: rgba(247,246,243,.72);
  border-top: 1px solid rgba(247,246,243,.14);
  padding-top: .875rem;
}
.simulador-aviso p { margin: 0; }
.simulador-aviso p + p { margin-top: .5rem; }
.simulador-aviso-titulo {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-bottom: .375rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ouro, #d6a340);
}

/* slider dourado */
.faixa { display: grid; gap: .875rem; }

.faixa-topo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.faixa-topo-linha .rotulo { margin: 0; }
.faixa-valor { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: var(--raio-pill);
  background: var(--papel-3);
  cursor: pointer;
  padding: 0;
  border: 0;
}

input[type="range"]:focus { box-shadow: none; }

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--ouro-verniz);
  border: 2px solid var(--superficie);
  box-shadow: 0 1px 6px rgba(10,10,11,.28);
  cursor: grab;
  transition: transform .18s var(--ease);
}

input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.14); }

input[type="range"]::-moz-range-thumb {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--ouro);
  border: 2px solid var(--superficie);
  box-shadow: 0 1px 6px rgba(10,10,11,.28);
  cursor: grab;
}

.faixa-limites { display: flex; justify-content: space-between; font-size: .75rem; color: var(--cinza); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   16. Página de estoque
   --------------------------------------------------------------------- */
.estoque-topo { background: var(--tinta); color: var(--papel); padding-block: clamp(2.5rem, 5vw, 4rem); position: relative; isolation: isolate; }

.estoque-topo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--furos);
  background-size: 14px 14px;
  opacity: .5;
  z-index: -1;
}

.estoque-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

@media (max-width: 1040px) { .estoque-layout { grid-template-columns: minmax(0, 1fr); } }

/* Layout de duas colunas das páginas de conteúdo.
   Nunca use style inline aqui: a regra inline venceria a media query
   abaixo e a página deixaria de empilhar no celular. */
.colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.colunas-texto { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.colunas-form  { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }

/* minmax(0, 1fr) em vez de 1fr: sem isso um filho com largura mínima
   grande (input[type=file], tabela) empurra a coluna além da tela. */
@media (max-width: 1040px) {
  .colunas,
  .colunas-texto,
  .colunas-form { grid-template-columns: minmax(0, 1fr); }
}

.colunas > * { min-width: 0; }

.filtros {
  position: sticky;
  top: 96px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  overflow: hidden;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

@media (max-width: 1040px) {
  .filtros {
    position: fixed;
    inset: 0;
    z-index: 95;
    max-height: none;
    border-radius: 0;
    border: 0;
    transform: translateX(-100%);
    transition: transform .36s var(--ease);
  }
  .filtros.aberto { transform: translateX(0); }
}

.filtros-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--borda);
  flex: none;
}

.filtros-cabecalho h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.filtros-cabecalho h2 .ico { color: var(--ouro-medio); }

/* fechar o painel só faz sentido quando ele vira gaveta no celular */
.btn-fechar-filtros { display: none; place-items: center; width: 2rem; height: 2rem; color: var(--tinta); }

@media (max-width: 1040px) {
  .btn-fechar-filtros { display: grid; }
}
.filtros-corpo { overflow-y: auto; padding: 1.25rem; display: grid; gap: 1.5rem; flex: 1; }
.filtros-rodape { padding: 1rem 1.25rem; border-top: 1px solid var(--borda); display: grid; gap: .5rem; flex: none; }

.filtro-bloco { display: grid; gap: .75rem; }
.filtro-bloco > .rotulo { display: block; }

.filtro-lista { display: grid; gap: .375rem; max-height: 15rem; overflow-y: auto; margin-inline: -.25rem; padding-inline: .25rem; }

.filtro-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .4375rem .5rem;
  border-radius: var(--raio);
  font-size: .875rem;
  cursor: pointer;
  transition: background-color .15s var(--ease);
  user-select: none;
}

.filtro-item:hover { background: var(--papel-2); }
.filtro-item input { position: absolute; opacity: 0; pointer-events: none; }
.filtro-item-total { margin-left: auto; font-size: .75rem; color: var(--cinza); font-variant-numeric: tabular-nums; }
.filtro-item:has(input:checked) { background: rgba(214,163,64,.09); font-weight: 600; }

.faixa-dupla { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: center; }
.faixa-dupla span { color: var(--cinza); font-size: .8125rem; }

.btn-filtros-movel { display: none; }

@media (max-width: 1040px) {
  .btn-filtros-movel { display: inline-flex; }
}

/* barra de resultados */
.estoque-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.estoque-contagem { font-size: .9375rem; color: var(--cinza-forte); font-variant-numeric: tabular-nums; }
.estoque-contagem strong { color: var(--tinta); font-weight: 700; }

.estoque-ferramentas { display: flex; align-items: center; gap: .625rem; }

.alternar-visao { display: flex; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }

.alternar-visao button {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--cinza);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}

.alternar-visao button.ativo { background: var(--tinta); color: var(--papel); }

/* fichas dos filtros aplicados */
.filtros-aplicados { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }

.ficha-filtro {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .375rem .5rem .375rem .75rem;
  border: 1px solid var(--borda-ouro);
  border-radius: var(--raio-pill);
  background: rgba(214,163,64,.08);
  font-size: .8125rem;
  font-weight: 500;
}

.ficha-filtro button { display: grid; place-items: center; color: var(--cinza-forte); transition: color .18s var(--ease); }
.ficha-filtro button:hover { color: var(--tijolo); }

/* estado carregando */
.grade-veiculos.carregando { opacity: .4; pointer-events: none; transition: opacity .2s var(--ease); }

/* resultados entram em cascata quando o filtro muda */
@keyframes entraCard {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.grade-veiculos.entrando > .card-veiculo {
  animation: entraCard .42s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 38ms);
}

@media (prefers-reduced-motion: reduce) {
  .grade-veiculos.entrando > .card-veiculo { animation: none; }
}

/* visão em lista */
.grade-veiculos.lista { grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .grade-veiculos.lista .card-veiculo { flex-direction: row; }
  .grade-veiculos.lista .card-foto { width: 34%; max-width: 17rem; aspect-ratio: 4 / 5; flex: none; }
  .grade-veiculos.lista .card-versao { -webkit-line-clamp: 3; min-height: 0; }
}

/* vazio */
.vazio { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); display: grid; gap: 1rem; justify-items: center; }
.vazio .ico { color: var(--papel-3); }
.vazio h3 { font-size: 1.375rem; }
.vazio p { color: var(--cinza); max-width: 38ch; }

/* paginação */
.paginacao { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; margin-top: clamp(2.5rem, 5vw, 4rem); }

.paginacao a, .paginacao span {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: .75rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: .875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}

.paginacao a:hover { border-color: var(--ouro); color: var(--ouro-medio); }
.paginacao .atual { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.paginacao .reticencias { border-color: transparent; color: var(--cinza); }

/* ---------------------------------------------------------------------
   17. Página do veículo
   --------------------------------------------------------------------- */
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--cinza); padding-block: 1.25rem; }
.migalhas a:hover { color: var(--ouro-medio); }
.migalhas .separador { opacity: .5; }

.veiculo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: start;
}

@media (max-width: 1040px) { .veiculo-layout { grid-template-columns: 1fr; } }

/* galeria */
.galeria { display: grid; gap: .75rem; }

.galeria-principal {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio-md);
  overflow: hidden;
  background: var(--tinta);
  cursor: zoom-in;
}

.galeria-principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
  transform-origin: var(--mx, 50%) var(--my, 50%);
}

/* aproxima na direção do cursor: dá para conferir roda, farol, painel */
.galeria-principal:hover img { transform: scale(1.7); transition-duration: .32s; }

/* sobre as setas de navegação o zoom atrapalha — desliga */
.galeria-principal:has(.galeria-nav:hover) img,
.galeria-principal:has(.galeria-contador:hover) img { transform: none; }

@media (hover: none) {
  .galeria-principal:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .galeria-principal:hover img { transform: none; }
}

/* dica discreta de que dá para aproximar */
.galeria-lupa {
  position: absolute;
  top: .875rem;
  left: .875rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .625rem;
  border-radius: var(--raio);
  background: rgba(10,10,11,.7);
  backdrop-filter: blur(6px);
  color: var(--papel);
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 1;
  transition: opacity .25s var(--ease);
  pointer-events: none;
}

.galeria-principal:hover .galeria-lupa { opacity: 0; }

@media (hover: none) { .galeria-lupa { display: none; } }

.galeria-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--tinta);
  backdrop-filter: blur(8px);
  box-shadow: var(--sombra-2);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
  z-index: 2;
}

.galeria-nav:hover { background: #fff; transform: translateY(-1px) scale(1.05); }
.galeria-nav.anterior { left: .875rem; }
.galeria-nav.proxima { right: .875rem; }

.galeria-contador {
  position: absolute;
  bottom: .875rem;
  right: .875rem;
  z-index: 2;
  padding: .375rem .625rem;
  border-radius: var(--raio);
  background: rgba(10,10,11,.72);
  backdrop-filter: blur(6px);
  color: var(--papel);
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.galeria-miniaturas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.galeria-miniaturas::-webkit-scrollbar { display: none; }

.miniatura {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--papel-2);
  transition: border-color .2s var(--ease), opacity .2s var(--ease);
  opacity: .62;
}

.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura:hover { opacity: 1; }
.miniatura.ativa { border-color: var(--ouro); opacity: 1; }

/* cabeçalho do anúncio */
.veiculo-cabecalho { display: grid; gap: .625rem; margin-bottom: 1.5rem; }
.veiculo-selos { display: flex; flex-wrap: wrap; gap: .5rem; }
.veiculo-titulo { font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -.035em; }
.veiculo-versao { font-size: 1rem; color: var(--cinza-forte); line-height: 1.5; }
.veiculo-codigo { font-size: .75rem; color: var(--cinza); letter-spacing: .06em; }

/* Caixa de preço lateral.
   Nada de position: sticky aqui — ela tem irmãos embaixo (proposta,
   endereço) e ficaria grudada no topo com o conteúdo passando por baixo.
   Quem garante o CTA sempre à mão é a .barra-veiculo do rodapé. */
.painel-compra {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}

.painel-preco { padding: 1.5rem; border-bottom: 1px solid var(--borda); }
.painel-preco .rotulo { display: block; margin-bottom: .375rem; }

.painel-preco-valor {
  font-size: clamp(2rem, 3.4vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.painel-preco-parcela { margin-top: .625rem; font-size: .875rem; color: var(--cinza-forte); font-variant-numeric: tabular-nums; }
.painel-preco-parcela strong { color: var(--tinta); font-weight: 600; }

.painel-acoes { padding: 1.5rem; display: grid; gap: .625rem; }
.painel-vantagens { padding: 0 1.5rem 1.5rem; display: grid; gap: .625rem; }

.vantagem { display: flex; align-items: center; gap: .625rem; font-size: .8125rem; color: var(--cinza-forte); }
.vantagem .ico { color: var(--verde); flex: none; }

/* Ficha técnica em grade.
   O fundo é branco (não a cor da borda): quando a última linha fica
   incompleta, o espaço que sobra some em vez de virar um bloco cinza.
   As divisórias vêm do outline de cada item, que preenche o gap de 1px. */
.ficha-tecnica {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  overflow: hidden;
}

.ficha-item {
  background: var(--superficie);
  outline: 1px solid var(--borda);
  padding: 1rem 1.125rem;
  display: grid;
  gap: .375rem;
  align-content: start;
}
.ficha-item .rotulo { font-size: .625rem; letter-spacing: .14em; }
.ficha-item strong { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ficha-item .ico { color: var(--ouro-medio); margin-bottom: .125rem; }

/* blocos de conteúdo do anúncio */
.bloco-veiculo { padding-block: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--borda); }
.bloco-veiculo:first-child { border-top: 0; padding-top: 0; }
.bloco-veiculo h2 { font-size: 1.25rem; margin-bottom: 1.25rem; letter-spacing: -.025em; }

.descricao-veiculo { font-size: 1rem; line-height: 1.75; color: var(--cinza-forte); max-width: 68ch; }
.descricao-veiculo p + p { margin-top: 1rem; }

/* opcionais agrupados */
.opcionais-grupo { margin-bottom: 1.5rem; }
.opcionais-grupo:last-child { margin-bottom: 0; }
.opcionais-grupo > .rotulo { display: block; margin-bottom: .75rem; }
.opcionais-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: .5rem .875rem; }

.opcional {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--cinza-forte);
}

.opcional .ico { color: var(--ouro-medio); flex: none; }

/* barra fixa do rodapé na página do veículo (aparece ao rolar o preço) */
.barra-veiculo {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem var(--gutter);
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--borda);
  box-shadow: 0 -4px 24px rgba(10,10,11,.09);
  transform: translateY(110%);
  transition: transform .34s var(--ease);
}

.barra-veiculo.visivel { transform: translateY(0); }
.barra-veiculo-preco { line-height: 1.2; }
.barra-veiculo-preco .rotulo { font-size: .625rem; }
.barra-veiculo-preco strong { display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* no desktop a barra fica centrada na largura do conteúdo */
.barra-veiculo .barra-veiculo-conteudo {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.barra-veiculo .btn { flex: none; }

@media (max-width: 680px) {
  .barra-veiculo .barra-veiculo-conteudo { gap: .875rem; }
  .barra-veiculo .btn { flex: 1; }
}

/* ---------------------------------------------------------------------
   18. Lightbox
   --------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(8,8,9,.97);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}

.lightbox.aberto { opacity: 1; visibility: visible; }

.lightbox-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem var(--gutter); color: var(--papel); }
.lightbox-topo strong { font-size: .9375rem; font-weight: 600; }
.lightbox-topo span { font-size: .8125rem; color: rgba(247,246,243,.5); font-variant-numeric: tabular-nums; }
.lightbox-fechar { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(247,246,243,.2); border-radius: var(--raio); color: var(--papel); transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.lightbox-fechar:hover { border-color: var(--ouro); color: var(--ouro-claro); }

.lightbox-palco { position: relative; display: grid; place-items: center; padding-inline: var(--gutter); min-height: 0; }
.lightbox-palco img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--raio); }

.lightbox-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(247,246,243,.1);
  border: 1px solid rgba(247,246,243,.16);
  color: var(--papel);
  backdrop-filter: blur(8px);
  transition: background-color .2s var(--ease);
}

.lightbox-nav:hover { background: rgba(247,246,243,.2); }
.lightbox-nav.anterior { left: max(1rem, calc(var(--gutter) / 2)); }
.lightbox-nav.proxima { right: max(1rem, calc(var(--gutter) / 2)); }

.lightbox-fita { display: flex; gap: .5rem; overflow-x: auto; padding: 1.25rem var(--gutter); scrollbar-width: none; }
.lightbox-fita::-webkit-scrollbar { display: none; }
.lightbox-fita img { width: 62px; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; opacity: .45; cursor: pointer; border: 2px solid transparent; transition: opacity .2s var(--ease), border-color .2s var(--ease); flex: none; }
.lightbox-fita img.ativa { opacity: 1; border-color: var(--ouro); }

/* ---------------------------------------------------------------------
   18b. Busca global (abre de qualquer página)
   --------------------------------------------------------------------- */
.acao-busca { position: relative; }

.acao-atalho {
  position: absolute;
  right: -.375rem;
  bottom: -.375rem;
  min-width: 1rem;
  height: 1rem;
  padding-inline: .1875rem;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: rgba(247,246,243,.12);
  color: rgba(247,246,243,.6);
  font: inherit;
  font-size: .625rem;
  font-weight: 600;
  line-height: 1;
}

@media (max-width: 1040px) { .acao-atalho { display: none; } }

.busca-painel {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  align-content: start;
  padding: clamp(.75rem, 6vh, 5rem) var(--gutter) var(--gutter);
}

.busca-fundo {
  position: absolute;
  inset: 0;
  background: rgba(8,8,9,.72);
  backdrop-filter: blur(6px);
  animation: entraFundoBusca .25s var(--ease);
}

@keyframes entraFundoBusca { from { opacity: 0; } }

.busca-caixa {
  position: relative;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  background: var(--superficie);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(34rem, 82vh);
  animation: entraCaixaBusca .28s var(--ease);
}

@keyframes entraCaixaBusca {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
}

.busca-campo {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--borda);
  flex: none;
}

.busca-campo > .ico { color: var(--ouro-medio); flex: none; }

.busca-campo input {
  flex: 1;
  border: 0;
  padding: .25rem 0;
  font-size: 1.0625rem;
  background: none;
  min-width: 0;
}

.busca-campo input:focus { outline: none; box-shadow: none; }
.busca-campo input::-webkit-search-cancel-button { display: none; }

.busca-limpar,
.busca-sair {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--cinza);
  border-radius: var(--raio);
  transition: color .18s var(--ease), background-color .18s var(--ease);
}

.busca-limpar { width: 1.75rem; height: 1.75rem; }
.busca-limpar:hover { color: var(--tinta); background: var(--papel-2); }

.busca-sair kbd {
  font: inherit;
  font-size: .688rem;
  font-weight: 600;
  padding: .25rem .4375rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--cinza);
}

.busca-sair:hover kbd { border-color: var(--borda-forte); color: var(--tinta); }

@media (max-width: 680px) { .busca-sair { display: none; } }

.busca-corpo { overflow-y: auto; flex: 1; }

/* ---- estado inicial ---- */
.busca-sugestoes { padding: 1.25rem; display: grid; gap: .875rem; }
.busca-atalhos { display: flex; flex-wrap: wrap; gap: .5rem; }

.busca-dica {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--cinza);
  line-height: 1.55;
  padding-top: .625rem;
  border-top: 1px solid var(--borda);
}

.busca-dica .ico { color: var(--ouro-medio); margin-top: .3125rem; }
.busca-dica strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* ---- resultados ---- */
.busca-resultado {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: .875rem;
  align-items: center;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--borda);
  transition: background-color .15s var(--ease);
}

.busca-resultado:last-child { border-bottom: 0; }
.busca-resultado:hover,
.busca-resultado.marcado { background: var(--papel); }

.busca-resultado img {
  width: 4rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--raio);
  background: var(--papel-2);
}

.busca-resultado-texto { min-width: 0; }

.busca-resultado-titulo {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.busca-resultado-meta {
  font-size: .8125rem;
  color: var(--cinza);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: .125rem;
}

.busca-resultado-codigo {
  display: inline-block;
  font-weight: 600;
  color: var(--ouro-medio);
  font-variant-numeric: tabular-nums;
}

.busca-resultado-preco {
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex: none;
}

@media (max-width: 480px) {
  .busca-resultado { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .busca-resultado img { width: 3.25rem; }
  .busca-resultado-preco { grid-column: 2; text-align: left; font-size: .875rem; }
}

.busca-rodape {
  padding: .875rem 1rem;
  border-top: 1px solid var(--borda);
  background: var(--papel);
  position: sticky;
  bottom: 0;
}

.busca-nada { padding: 2.25rem 1.25rem; text-align: center; display: grid; gap: .625rem; justify-items: center; }
.busca-nada .ico { color: var(--papel-3); }
.busca-nada h3 { font-size: 1.0625rem; }
.busca-nada p { font-size: .875rem; color: var(--cinza); max-width: 36ch; }

@media (prefers-reduced-motion: reduce) {
  .busca-fundo, .busca-caixa { animation: none; }
}

/* ---------------------------------------------------------------------
   19. Comparador
   --------------------------------------------------------------------- */
.barra-comparar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 75;
  background: var(--tinta);
  color: var(--papel);
  border-top: 1px solid var(--borda-ouro);
  transform: translateY(110%);
  transition: transform .36s var(--ease);
  box-shadow: 0 -8px 40px rgba(10,10,11,.35);
}

.barra-comparar.visivel { transform: translateY(0); }

.barra-comparar .container { display: flex; align-items: center; gap: 1rem; padding-block: .875rem; }
.barra-comparar-itens { display: flex; gap: .625rem; flex: 1; overflow-x: auto; scrollbar-width: none; }
.barra-comparar-itens::-webkit-scrollbar { display: none; }

.comparar-chip { position: relative; flex: none; width: 72px; }
.comparar-chip img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; }

.comparar-chip button {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta);
}

.comparar-vazio { width: 58px; aspect-ratio: 4/5; flex: none; border: 1px dashed rgba(247,246,243,.25); border-radius: 2px; display: grid; place-items: center; color: rgba(247,246,243,.3); }

/* tabela de comparação */
.tabela-comparar { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio-md); background: var(--superficie); }
.tabela-comparar table { min-width: 44rem; }

.tabela-comparar th, .tabela-comparar td {
  padding: .875rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--borda);
  font-size: .875rem;
  vertical-align: middle;
}

.tabela-comparar tr:last-child th, .tabela-comparar tr:last-child td { border-bottom: 0; }
.tabela-comparar th { font-weight: 600; color: var(--cinza-forte); width: 11rem; background: var(--papel); position: sticky; left: 0; z-index: 1; }
.tabela-comparar td { font-variant-numeric: tabular-nums; }
.tabela-comparar .destaque td { font-weight: 700; font-size: 1.0625rem; }
.tabela-comparar .melhor { color: var(--verde); font-weight: 700; }

/* ---------------------------------------------------------------------
   20. Blocos de conteúdo do site
   --------------------------------------------------------------------- */

/* avaliação do usado — divide a tela */
.bloco-troca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }

@media (max-width: 900px) { .bloco-troca { grid-template-columns: 1fr; } }

.bloco-troca-figura { position: relative; min-height: 22rem; overflow: hidden; }
.bloco-troca-figura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bloco-troca-conteudo { padding: clamp(2rem, 5vw, 4.5rem) var(--gutter); display: grid; align-content: center; gap: 1.5rem; max-width: 40rem; }

/* compromissos da loja (página "A loja") */
.compromissos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: .875rem;
}

.compromisso {
  display: grid;
  gap: .5rem;
  align-content: start;
  padding: 1.25rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  background: var(--superficie);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.compromisso:hover { border-color: var(--borda-ouro); transform: translateY(-2px); }
.compromisso .ico { color: var(--ouro-medio); }
.compromisso strong { font-size: .9375rem; letter-spacing: -.015em; }
.compromisso p { font-size: .8125rem; line-height: 1.6; color: var(--cinza-forte); }

/* cidades atendidas */
.cidades { display: flex; flex-wrap: wrap; gap: .5rem; }

.cidade {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .5rem .8125rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  font-size: .875rem;
  color: var(--cinza-forte);
}

.cidade .ico { color: var(--ouro-medio); opacity: .8; }
.cidade.principal { border-color: var(--borda-ouro); background: rgba(214,163,64,.07); color: var(--tinta); font-weight: 600; }

/* números de confiança — alinhados ao container, separados por fio */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  border-top: 1px solid rgba(247,246,243,.14);
  border-bottom: 1px solid rgba(247,246,243,.14);
}

.numero-item {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  gap: .625rem;
  align-content: start;
  border-left: 1px solid rgba(247,246,243,.14);
}

/* sem fio na primeira coluna de cada fileira */
.numero-item:first-child { border-left: 0; padding-left: 0; }

@media (max-width: 860px) {
  .numero-item { border-left: 0; padding-left: 0; padding-right: 0; border-top: 1px solid rgba(247,246,243,.14); }
  .numero-item:first-child { border-top: 0; }
}

.numero-valor {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--ouro-verniz);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.numero-rotulo { font-size: .8125rem; color: rgba(247,246,243,.55); line-height: 1.45; }

/* depoimentos */
.depoimento {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  align-content: start;
}

.depoimento-estrelas { display: flex; gap: .125rem; color: var(--ouro); }
.depoimento-estrelas .ico path { fill: currentColor; }
.depoimento-texto { font-size: 1rem; line-height: 1.7; color: var(--cinza-forte); }
.depoimento-autor { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.depoimento-avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; background: var(--papel-2); flex: none; }
.depoimento-nome { font-weight: 600; font-size: .9375rem; }
.depoimento-meta { font-size: .8125rem; color: var(--cinza); }

/* mapa e horários */
.bloco-local { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 0; border: 1px solid var(--borda); border-radius: var(--raio-md); overflow: hidden; background: var(--superficie); }

@media (max-width: 900px) { .bloco-local { grid-template-columns: 1fr; } }

.bloco-local iframe { width: 100%; height: 100%; min-height: 24rem; border: 0; display: block; filter: grayscale(.35) contrast(1.05); }
.bloco-local-info { padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1.5rem; align-content: start; }

.info-linha { display: grid; grid-template-columns: auto 1fr; gap: .875rem; align-items: start; }
.info-linha .ico { color: var(--ouro-medio); margin-top: .1875rem; }
.info-linha .rotulo { display: block; margin-bottom: .25rem; }
.info-linha strong { font-weight: 600; font-size: .9375rem; line-height: 1.5; }
.info-linha a:hover { color: var(--ouro-medio); }

.horarios-lista { display: grid; gap: .4375rem; }
.horario-linha { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.horario-linha span:first-child { color: var(--cinza-forte); }
.horario-linha span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.horario-linha.hoje { color: var(--ouro-medio); }
.horario-linha.hoje span { color: inherit; }

/* faixa de chamada final */
.chamada-final { position: relative; overflow: hidden; isolation: isolate; }
.chamada-final::before { content: ''; position: absolute; inset: 0; background-image: var(--furos); background-size: 16px 16px; opacity: .55; z-index: -1; }
.chamada-final-conteudo { display: grid; gap: 1.75rem; justify-items: center; text-align: center; max-width: 44rem; margin-inline: auto; }
.chamada-final h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); letter-spacing: -.04em; }
.chamada-final-botoes { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ---------------------------------------------------------------------
   21. Rodapé
   --------------------------------------------------------------------- */
.rodape { background: var(--tinta); color: rgba(247,246,243,.6); position: relative; isolation: isolate; }
.rodape::before { content: ''; position: absolute; inset: 0; background-image: var(--furos); background-size: 15px 15px; opacity: .45; z-index: -1; }

.rodape-topo { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); padding-block: clamp(3rem, 6vw, 4.5rem); }

@media (max-width: 900px) { .rodape-topo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rodape-topo { grid-template-columns: 1fr; } }

.rodape-marca { display: grid; gap: 1.25rem; align-content: start; }
.rodape-marca img { height: 62px; width: auto; }
.rodape-marca p { font-size: .875rem; line-height: 1.65; max-width: 34ch; }

.rodape-redes { display: flex; gap: .5rem; }

.rodape-rede {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(247,246,243,.16);
  border-radius: var(--raio);
  color: rgba(247,246,243,.72);
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}

.rodape-rede:hover { border-color: var(--ouro); color: var(--tinta); background: var(--ouro); }

.rodape-coluna h3 { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--papel); margin-bottom: 1.125rem; }
.rodape-coluna ul { display: grid; gap: .625rem; }
.rodape-coluna a { font-size: .875rem; transition: color .2s var(--ease); }
.rodape-coluna a:hover { color: var(--ouro-claro); }
.rodape-coluna li { font-size: .875rem; line-height: 1.55; }

.rodape-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(247,246,243,.1);
  font-size: .8125rem;
}

.rodape-base a:hover { color: var(--ouro-claro); }

/* ---------------------------------------------------------------------
   Botão flutuante do WhatsApp

   Pulsa devagar para chamar atenção sem virar pisca-pisca: uma onda que
   sai de trás do botão a cada 2,8s e, de tempos em tempos, um repuxo
   curto. Para de pulsar assim que o mouse chega perto — já cumpriu o
   papel — e some inteiro para quem pediu menos movimento no sistema.
   --------------------------------------------------------------------- */
.zap-flutuante {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 65;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1.125rem;
  border-radius: var(--raio-pill);
  background: #1FA855;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(31,168,85,.42);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
  isolation: isolate;
}

/* a onda */
.zap-flutuante::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #1FA855;
  animation: ondaZap 2.8s cubic-bezier(.22,.61,.36,1) infinite;
}

@keyframes ondaZap {
  0%        { transform: scale(1);    opacity: .5; }
  60%, 100% { transform: scale(1.38); opacity: 0; }
}

/* o repuxo, de vez em quando */
.zap-flutuante .ico { animation: acenoZap 7s ease-in-out infinite; transform-origin: 50% 70%; }

@keyframes acenoZap {
  0%, 82%, 100%   { transform: rotate(0) scale(1); }
  86%             { transform: rotate(-11deg) scale(1.1); }
  90%             { transform: rotate(9deg) scale(1.1); }
  94%             { transform: rotate(-5deg) scale(1.04); }
}

.zap-flutuante:hover {
  transform: translateY(-2px) scale(1.03);
  background: #17904a;
  box-shadow: 0 12px 34px rgba(31,168,85,.55);
}

/* chegou perto: para de pedir atenção */
.zap-flutuante:hover::before,
.zap-flutuante:focus-visible::before { animation-play-state: paused; opacity: 0; }
.zap-flutuante:hover .ico { animation: none; }

.zap-flutuante span { display: none; }

@media (min-width: 760px) { .zap-flutuante span { display: block; } }

/* some quando a barra do veículo ou do comparador aparece */
.zap-flutuante.recuado { transform: translateY(-4.5rem); }
.zap-flutuante.recuado:hover { transform: translateY(-4.75rem) scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .zap-flutuante::before,
  .zap-flutuante .ico { animation: none; }
  .zap-flutuante::before { opacity: 0; }
}

/* ---------------------------------------------------------------------
   22. Avisos e mensagens
   --------------------------------------------------------------------- */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.125rem;
  border-radius: var(--raio);
  border: 1px solid;
  font-size: .875rem;
  line-height: 1.55;
}

.aviso .ico { flex: none; margin-top: .0625rem; }
.aviso-sucesso { background: var(--verde-luz); border-color: rgba(63,125,85,.28); color: #2C5A3C; }
.aviso-erro    { background: var(--tijolo-luz); border-color: rgba(165,63,43,.28); color: #7E2E1F; }
.aviso-neutro  { background: var(--papel-2); border-color: var(--borda); color: var(--cinza-forte); }

/* toast */
.toasts { position: fixed; bottom: 1.25rem; left: 50%; translate: -50% 0; z-index: 130; display: grid; gap: .5rem; justify-items: center; pointer-events: none; width: min(92vw, 26rem); }

.toast {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1.125rem;
  border-radius: var(--raio);
  background: var(--tinta);
  color: var(--papel);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--sombra-3);
  animation: entraToast .3s var(--ease);
  pointer-events: auto;
  width: 100%;
}

.toast .ico { color: var(--ouro); flex: none; }
.toast.saindo { animation: saiToast .28s var(--ease-saida) forwards; }

@keyframes entraToast { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes saiToast   { to   { opacity: 0; transform: translateY(10px) scale(.97); } }

/* ---------------------------------------------------------------------
   23. Revelação no scroll
   --------------------------------------------------------------------- */
[data-revelar] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--atraso, 0ms);
}

[data-revelar].revelado { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-revelar] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   24. Utilitários
   --------------------------------------------------------------------- */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pular-para {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--ouro);
  color: var(--tinta);
  font-weight: 600;
  border-radius: var(--raio);
  transition: top .2s var(--ease);
}

.pular-para:focus { top: 1rem; }

.sem-scroll { overflow: hidden; }

.pilha { display: grid; gap: var(--espaco, 1rem); }
.linha { display: flex; align-items: center; gap: var(--espaco, .75rem); flex-wrap: wrap; }
.entre { justify-content: space-between; }
.centro { justify-content: center; }
.crescer { flex: 1; }
.texto-centro { text-align: center; }
.esconder { display: none !important; }

@media (max-width: 680px) { .esconder-movel { display: none !important; } }
@media (min-width: 681px) { .so-movel { display: none !important; } }