/* PG Automóveis
   Estrutura, medidas, efeitos e os dois temas vêm do modelo de referência.
   A cor primária do modelo (vermelho 6 100% 50%) foi trocada pelo azul do
   logotipo da PG (#1347f1 = 226 89% 51%). O resto da escala é o mesmo. */

/* ------------------------------------------------------- tokens · tema claro */
:root {
  --background: 0 0% 98%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --secondary: 0 0% 94%;
  --muted: 0 0% 92%;
  --muted-foreground: 0 0% 40%;
  --border: 0 0% 88%;
  --input: 0 0% 96%;

  /* azul do logotipo: um tom para preencher, outro para texto */
  --primary: 226 89% 45%;
  --primary-cheio: 226 89% 51%;
  --accent: 215 95% 40%;

  /* ouro do escudo do logotipo */
  --ouro: 45 92% 55%;
  --ouro-foreground: 40 85% 10%;

  --whats: 152 66% 27%;
  --alerta: 28 92% 38%;

  --radius: 0.75rem;

  --gradient-primary: linear-gradient(135deg, hsl(226 89% 51%) 0%, hsl(215 95% 40%) 100%);
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 100%);
  --gradient-glass: linear-gradient(135deg, hsla(0, 0%, 100%, 0.9) 0%, hsla(0, 0%, 100%, 0.7) 100%);

  --shadow-primary: 0 4px 30px -5px hsla(226, 89%, 51%, 0.3);
  --shadow-glow: 0 0 40px hsla(226, 89%, 51%, 0.25);
  --shadow-card: 0 4px 20px -5px hsla(0, 0%, 0%, 0.08);
  --shadow-card-hover: 0 12px 34px -8px hsla(0, 0%, 0%, 0.15);

  --container: 1400px;
  --gutter: 24px;
  --topo: 84px;

  --mov: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --mov-r: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --mov-l: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  --serif: "DM Sans", system-ui, sans-serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: light;
}

/* ------------------------------------------------------ tokens · tema escuro */
.escuro {
  --background: 0 0% 6%;
  --foreground: 0 0% 98%;
  --card: 0 0% 10%;
  --secondary: 0 0% 15%;
  --muted: 0 0% 18%;
  --muted-foreground: 0 0% 64%;
  --border: 0 0% 18%;
  --input: 0 0% 15%;

  /* o azul puro reprova em AA como texto sobre fundo escuro: clareia só o texto */
  --primary: 218 96% 68%;
  --primary-cheio: 226 89% 51%;
  --accent: 212 96% 60%;

  --ouro: 45 92% 58%;
  --ouro-foreground: 40 85% 8%;

  --whats: 152 66% 27%;
  --alerta: 38 92% 62%;

  --gradient-primary: linear-gradient(135deg, hsl(226 89% 53%) 0%, hsl(212 96% 44%) 100%);
  --gradient-card: linear-gradient(145deg, hsl(0 0% 12%) 0%, hsl(0 0% 8%) 100%);
  --gradient-glass: linear-gradient(135deg, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.02) 100%);

  --shadow-primary: 0 4px 30px -5px hsla(226, 89%, 51%, 0.45);
  --shadow-glow: 0 0 40px hsla(226, 89%, 51%, 0.35);
  --shadow-card: 0 10px 40px -10px hsla(0, 0%, 0%, 0.5);
  --shadow-card-hover: 0 18px 50px -12px hsla(0, 0%, 0%, 0.65);

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--mov), color var(--mov);
}

/* `hidden` precisa esconder, sempre.
 *
 * A regra do navegador para [hidden] é `display: none` com especificidade
 * zero: qualquer seletor de classe a vence. Como `.cartao` declara
 * `display: flex`, o filtro do estoque marcava os cartões como hidden e eles
 * continuavam na tela — o contador dizia "5 veículos encontrados" com os 19
 * aparecendo. Filtrar por marca ou por carroceria parecia não fazer nada.
 *
 * Isto já tinha sido remendado duas vezes em pontos específicos
 * (.aviso[hidden], .ficha-credito__campos[hidden]) sem resolver a origem. */
[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.12; }

:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 3px; border-radius: 4px; }
::selection { background: hsl(var(--primary-cheio) / 0.4); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; }
*::-webkit-scrollbar { width: 10px; height: 8px; }
*::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

.pular {
  position: fixed;
  top: -120px; left: 16px;
  z-index: 300;
  padding: 12px 20px;
  background: hsl(var(--primary-cheio));
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  transition: top var(--mov-r);
}
.pular:focus { top: 0; }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.oculto-visual input { width: 1px; height: 1px; min-height: 0; padding: 0; }

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

/* seções: py-16 e a mesma alternância de fundo do modelo */
.secao { padding-block: 64px; position: relative; }
.secao--muted { background: hsl(var(--muted)); }
.escuro .secao--muted { background: hsl(var(--card)); }
.secao--secondary { background: hsl(var(--secondary)); }
.escuro .secao--secondary { background: hsl(var(--card)); }
.secao--suave { background: hsl(var(--muted) / 0.35); }
.secao--fundo { background: hsl(var(--background)); }
.secao--financiamento { background: hsl(var(--muted)); }
.escuro .secao--financiamento { background: hsl(var(--background)); }
.secao--fina { padding-block: 48px; }
.secao--recorte { overflow: hidden; }

.faixa-topo { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); }

.orbe { position: absolute; border-radius: 50%; filter: blur(64px); pointer-events: none; }
.orbe--a { top: 25%; right: -128px; width: 256px; height: 256px; background: hsl(var(--primary-cheio) / 0.07); }
.orbe--b { bottom: 25%; left: -128px; width: 256px; height: 256px; background: hsl(var(--primary-cheio) / 0.07); }
.orbe--c { top: 0; left: 0; width: 384px; height: 384px; translate: -50% -50%; background: hsl(var(--primary-cheio) / 0.06); }
.orbe--d { bottom: 0; right: 0; width: 320px; height: 320px; translate: 50% 50%; background: hsl(var(--primary-cheio) / 0.1); }

.acima { position: relative; z-index: 10; }

.cabeca { text-align: center; margin-bottom: 48px; }
.cabeca--esq { text-align: left; }
.olho {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--primary));
}
.cabeca :is(h1, h2) {
  font-size: clamp(1.875rem, 5vw, 3rem);
  font-weight: 700;
  margin-block: 12px 16px;
  text-wrap: balance;
}
.cabeca p:not(.olho) {
  max-width: 672px;
  margin-inline: auto;
  font-size: 18px;
  color: hsl(var(--muted-foreground));
  text-wrap: pretty;
}
.cabeca--esq p:not(.olho) { margin-inline: 0; }

.realce {
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------------ botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding-inline: 28px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--mov);
}
.btn--g { height: 56px; padding-inline: 40px; font-size: 16px; }
.btn--p { height: 40px; padding-inline: 18px; font-size: 13px; border-radius: 8px; }
.btn--cheio { width: 100%; }
.btn svg { font-size: 1.15em; flex: none; }

.btn--primario { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-primary); }
.btn--primario:hover { box-shadow: var(--shadow-glow); transform: scale(1.05); }

.btn--contorno { background: transparent; border: 2px solid hsl(var(--primary)); color: hsl(var(--primary)); }
.btn--contorno:hover { background: hsl(var(--primary-cheio)); border-color: hsl(var(--primary-cheio)); color: #fff; }

.btn--vidro {
  background: hsl(0 0% 100% / 0.12);
  border-color: hsl(0 0% 100% / 0.35);
  color: #fff;
  backdrop-filter: blur(6px);
}
.btn--vidro:hover { background: hsl(0 0% 100% / 0.24); }

.btn--whats { background: hsl(var(--whats)); color: #fff; }
.btn--whats:hover { filter: brightness(1.12); transform: scale(1.04); }

.btn--neutro { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.btn--neutro:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }

/* -------------------------------------------------------------------- selos */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.selo--primario { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-primary); }
.selo--ouro { background: hsl(var(--ouro)); color: hsl(var(--ouro-foreground)); }
.selo--vidro {
  background: hsl(var(--background) / 0.92);
  backdrop-filter: blur(6px);
  color: hsl(var(--primary));
  box-shadow: 0 1px 4px hsl(0 0% 0% / 0.25);
}
.selo--alerta { background: hsl(var(--alerta)); color: hsl(40 60% 99%); }
.escuro .selo--alerta { color: hsl(40 60% 8%); }
.selo--claro {
  background: hsl(0 0% 100% / 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid hsl(0 0% 100% / 0.22);
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  padding: 7px 14px;
}
.selo svg { font-size: 1.15em; }

.ponto-vivo {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: hsl(212 96% 62%);
  animation: pulsa 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulsa { 50% { opacity: 0.35; } }

/* --------------------------------------------------------------- barra topo */
.barra-aviso {
  position: relative;
  z-index: 60;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
.barra-aviso .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 24px;
  padding-block: 7px;
  text-align: center;
}
.barra-aviso a, .barra-aviso span { display: inline-flex; align-items: center; gap: 6px; }
.barra-aviso a { padding-block: 4px; min-height: 24px; }
.barra-aviso a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- cabeçalho */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: hsl(var(--card) / 0.82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid hsl(var(--border));
  transition: background-color var(--mov), box-shadow var(--mov);
}
.topo[data-rolado] { background: hsl(var(--card) / 0.97); box-shadow: var(--shadow-card); }

.topo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  min-height: var(--topo);
}

.marca { display: flex; align-items: center; flex: none; }
/* O logotipo da PG é quase quadrado (1,59:1) e o do modelo é horizontal (4:1).
   Para ter a mesma presença na barra, a altura precisa ser bem maior. */
.marca img { width: auto; height: 58px; transition: transform var(--mov); }
.marca:hover img { transform: scale(1.04); }

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: 24px; list-style: none; padding: 0; }
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 6px;
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground) / 0.72);
  transition: color var(--mov);
}
.nav a svg { font-size: 15px; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: hsl(var(--primary-cheio));
  transition: width var(--mov);
}
.nav a:hover { color: hsl(var(--foreground)); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: hsl(var(--foreground)); }

.topo__acoes { display: flex; align-items: center; gap: 12px; }
.topo__tel { display: none; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: hsl(var(--foreground) / 0.72); }
.topo__tel:hover { color: hsl(var(--primary)); }
.topo__acoes .btn--primario { display: none; }

.tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: transparent;
  color: hsl(var(--foreground));
  font-size: 18px;
  cursor: pointer;
  transition: background-color var(--mov), border-color var(--mov);
}
.tema:hover { background: hsl(var(--secondary)); }
.tema .lua { display: none; }
.escuro .tema .sol { display: none; }
.escuro .tema .lua { display: block; }

.hamburguer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  color: hsl(var(--foreground));
  font-size: 20px;
  cursor: pointer;
}
.hamburguer .fechar { display: none; }
.hamburguer[aria-expanded="true"] .abrir { display: none; }
.hamburguer[aria-expanded="true"] .fechar { display: block; }

.gaveta {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: hsl(var(--card));
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--mov);
}
.gaveta[data-aberta] { grid-template-rows: 1fr; border-bottom: 1px solid hsl(var(--border)); }
.gaveta__interno { overflow: hidden; }
.gaveta ul { list-style: none; padding: 8px var(--gutter) 16px; margin: 0; }
.gaveta a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 4px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid hsl(var(--border));
  transition: color var(--mov), padding-left var(--mov);
}
.gaveta a:hover, .gaveta a[aria-current="page"] { color: hsl(var(--primary)); padding-left: 10px; }
.gaveta .btn { margin: 14px var(--gutter) 20px; width: calc(100% - var(--gutter) * 2); }

/* -------------------------------------------------------------------- herói */
.heroi {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72svh;
  overflow: hidden;
}
.heroi__fundo { position: absolute; inset: 0; }
.heroi__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.05) brightness(1.02) saturate(1.1);
}
/* z-index aqui não é enfeite.
   A imagem tem `filter`, e isso a promove a um contexto de empilhamento que
   pinta no mesmo nível dos elementos posicionados. Como ela vem depois do
   ::before na ordem do documento, estava passando por cima dele: só a camada
   de cima para baixo aparecia, e a faixa escura da esquerda — a que garante a
   leitura do texto — ficava escondida sob a foto. Medido: a manchete caía a
   2,6:1 sobre a vitrine clara. */
.heroi__fundo::before, .heroi__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* A fachada é uma foto clara; o texto fica sobre a metade esquerda, então
   essa faixa precisa de sobreposição forte o bastante para garantir AA. */
/* A fachada tem um letreiro amarelo com telefones em branco atravessando o
   terço superior. Medido na foto: sob a sobreposição anterior, a manchete
   caía a 1,0:1 em cima dos números — branco sobre branco — e a linha de apoio
   a 1,2:1. Daí a faixa esquerda ser quase opaca: ela apaga justamente a parte
   do letreiro que repete o telefone já presente no cabeçalho do site, e deixa
   a logo PG Automóveis, à direita, aparecendo. */
.heroi__fundo::before {
  background: linear-gradient(to right,
    hsl(0 0% 0% / 0.97) 0%,
    hsl(0 0% 0% / 0.94) 40%,
    hsl(0 0% 0% / 0.72) 60%,
    hsl(0 0% 0% / 0.34) 78%,
    hsl(0 0% 0% / 0.14) 100%);
}
/* Segunda camada, de cima para baixo: o letreiro é a parte mais clara da foto
   e fica no alto, bem onde começa o texto. */
.heroi__fundo::after {
  background: linear-gradient(to bottom,
    hsl(0 0% 0% / 0.50) 0%,
    hsl(0 0% 0% / 0.28) 38%,
    hsl(0 0% 0% / 0.18) 62%,
    hsl(0 0% 0% / 0.55) 100%);
}

/* No celular e no tablet o texto ocupa quase a largura inteira, então a parte
   clara do degradê — pensada para deixar a vitrine aparecer à direita — cai em
   cima dele. Medido antes desta regra: 4,5:1 cravado em 390px e 3,2:1 na
   manchete em 768px. A vitrine só aparece onde não disputa com texto. */
@media (max-width: 1023px) {
  .heroi__fundo::before {
    background: linear-gradient(to right,
      hsl(0 0% 0% / 0.88) 0%,
      hsl(0 0% 0% / 0.82) 55%,
      hsl(0 0% 0% / 0.70) 100%);
  }
  .heroi__fundo::after {
    background: linear-gradient(to bottom,
      hsl(0 0% 0% / 0.40) 0%,
      hsl(0 0% 0% / 0.22) 55%,
      hsl(0 0% 0% / 0.45) 100%);
  }
}

.heroi .container { position: relative; z-index: 10; padding-top: 48px; padding-bottom: 48px; }
.heroi__texto { max-width: 768px; }
.heroi__selos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }

/* Relevo do título: camadas de sombra descendo em cinza cada vez mais escuro
   dão a espessura, e a sombra difusa larga descola o texto da foto. */
.heroi h1 {
  font-size: clamp(2.25rem, 6.6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 24px;
  text-wrap: balance;
  text-shadow:
    0 1px 0 hsl(0 0% 72%),
    0 2px 0 hsl(0 0% 62%),
    0 3px 0 hsl(0 0% 52%),
    0 4px 0 hsl(0 0% 42%),
    0 5px 0 hsl(0 0% 32%),
    0 6px 1px hsl(0 0% 0% / 0.35),
    0 3px 6px hsl(0 0% 0% / 0.5),
    0 10px 24px hsl(0 0% 0% / 0.65),
    0 18px 48px hsl(0 0% 0% / 0.5);
}
/* a parte em gradiente é recortada no texto, então o relevo vai atrás, num
   pseudo-elemento com o mesmo conteúdo */
.heroi h1 .realce {
  position: relative;
  display: inline-block;
  text-shadow: none;
  /* Azul mais claro que o da marca, só aqui.
     O gradiente padrão rende 3,1:1 sobre a foto escurecida — passa no mínimo
     de texto grande e nada mais, logo na linha que mais importa da página.
     Este rende 7,4:1 na ponta mais escura, mantendo o tom da marca. Nas
     seções de fundo claro o realce continua com o azul original. */
  background-image: linear-gradient(135deg, hsl(217 95% 68%) 0%, hsl(205 100% 62%) 100%);
  filter: drop-shadow(0 3px 0 hsl(220 60% 22%))
          drop-shadow(0 6px 10px hsl(0 0% 0% / 0.55))
          drop-shadow(0 16px 36px hsl(0 0% 0% / 0.5));
}

/* Chapéu do hero: o sinal de confiança que vem antes do título.
   Discreto de propósito — quem decide é a manchete; isto só ancora a loja no
   tempo e no lugar antes de ela prometer qualquer coisa. */
.heroi__chapeu {
  margin-bottom: 14px;
  font-size: clamp(0.8125rem, 1.6vw, 0.9375rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(0 0% 100% / 0.72);
  text-shadow: 0 1px 2px hsl(0 0% 0% / 0.7), 0 4px 14px hsl(0 0% 0% / 0.6);
}

.heroi__lead {
  max-width: 576px;
  margin-bottom: 32px;
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.65;
  color: hsl(0 0% 100% / 0.92);
  text-shadow: 0 1px 2px hsl(0 0% 0% / 0.7), 0 4px 16px hsl(0 0% 0% / 0.6);
  text-wrap: pretty;
}
.heroi__chips { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.heroi__botoes { display: flex; flex-direction: column; gap: 16px; }

.heroi__numeros { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 40px; }
.heroi__numeros dt {
  font-size: clamp(1.75rem, 4.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  color: hsl(212 96% 70%);
}
.heroi__numeros dd { margin: 4px 0 0; font-size: 14px; color: hsl(0 0% 100% / 0.7); }

/* ------------------------------------------------------- carrossel premium */
.carrossel { position: relative; }
.carrossel__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.carrossel__contagem { font-size: 14px; font-weight: 600; color: hsl(var(--muted-foreground)); }

.carrossel__trilho {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho > * { flex: 0 0 min(280px, 80%); scroll-snap-align: start; }

.carrossel__setas { display: flex; gap: 8px; flex: none; }
.carrossel__setas button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: 50%;
  background: hsl(var(--card));
  box-shadow: var(--shadow-card);
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: all var(--mov);
}
.carrossel__setas button:hover:not(:disabled) {
  background: hsl(var(--primary-cheio));
  border-color: hsl(var(--primary-cheio));
  color: #fff;
}
.carrossel__setas button:disabled { cursor: default; }

/* ---------------------------------------- carrossel de destaques (home)
   Título à esquerda com o traço azul embaixo, link do estoque à direita e
   as setas redondas nas bordas do palco, sobre os cartões. */
.carrossel--destaques .carrossel__cabeca {
  align-items: flex-end;
  margin-bottom: 22px;
}
.carrossel__titulo {
  position: relative;
  padding-bottom: 10px;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.4px;
}
.carrossel__titulo::after {
  content: ;
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 3px;
  border-radius: 2px;
  background: hsl(var(--primary-cheio));
}
.carrossel__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding-block: 4px;
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--primary));
}
.carrossel__link:hover { text-decoration: underline; }

/* o palco tem respiro lateral para as setas não taparem os cartões */
.carrossel--destaques .carrossel__palco { position: relative; }
.carrossel--destaques .carrossel__setas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  pointer-events: none;
}
.carrossel--destaques .carrossel__setas button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  width: 42px; height: 42px;
}
.carrossel--destaques .carrossel__setas button:first-child { left: -21px; }
.carrossel--destaques .carrossel__setas button:last-child { right: -21px; }

/* --------------------------------------------------------- faixa de marcas */
.marcas-faixa { position: relative; }
/* Medidas tiradas da própria loja (pgautomoveis.com.br/Veiculos):
   card 97×73, padding 6px 10px, borda 1px, raio 5px, logo 40×40, nome 11px. */
.marcas-faixa__trilho {
  display: flex;
  gap: 10px;
  padding: 2px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.marcas-faixa__trilho::-webkit-scrollbar { display: none; }

.marca-item {
  position: relative;
  flex: 0 0 146px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  padding: 16px 12px;
  min-height: 138px;
  border: 1px solid hsl(var(--border));
  border-radius: 15px;
  background: hsl(var(--card));
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.04);
  cursor: pointer;
  transition: border-color var(--mov), box-shadow var(--mov), background-color var(--mov);
}
.marca-item:hover { border-color: hsl(var(--primary) / 0.55); }

/* indicador do item escolhido, centralizado na base do card */
.marca-item::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 10px;
  width: 22px; height: 3px;
  translate: -50% 0;
  border-radius: 3px;
  background: hsl(var(--primary-cheio));
  opacity: 0;
  transition: opacity var(--mov);
}
.marca-item:has(input:checked)::after, .marca-item[data-ativa]::after { opacity: 1; }

.marca-item__logo { position: relative; width: 56px; height: 44px; }
.marca-item__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.marca-item__logo .mono { display: none; }
.escuro .marca-item__logo .mono { display: block; }
.escuro .marca-item__logo .cor { display: none; }
.marca-item__logo--todas {
  display: grid;
  place-content: center;
  font-size: 26px;
  color: hsl(var(--primary));
}

.marca-item__nome {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.2;
  color: hsl(var(--muted-foreground));
}
/* a loja não mostra contagem nessa faixa */
.marca-item__conta { display: none; }
.marca-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* item escolhido: borda azul e fundo azul bem claro */
.marca-item:has(input:checked), .marca-item[data-ativa] {
  border-color: hsl(var(--primary-cheio));
  background: hsl(var(--primary-cheio) / 0.06);
}
.marca-item:has(input:checked) .marca-item__nome,
.marca-item[data-ativa] .marca-item__nome { color: hsl(var(--primary)); }
.marca-item:has(input:focus-visible) { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }

.marcas-faixa__seta {
  position: absolute;
  top: 50%;
  z-index: 3;
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: 50%;
  background: hsl(var(--card));
  box-shadow: 0 2px 8px -2px hsl(0 0% 0% / 0.12);
  color: hsl(var(--foreground));
  font-size: 19px;
  cursor: pointer;
  transition: border-color var(--mov), background-color var(--mov), color var(--mov), opacity var(--mov);
}
.marcas-faixa__seta--esq { left: -10px; }
.marcas-faixa__seta--dir { right: -10px; }
.marcas-faixa__seta:hover:not(:disabled) {
  background: hsl(var(--primary-cheio));
  border-color: hsl(var(--primary-cheio));
  color: #fff;
}
.marcas-faixa__seta:disabled { cursor: default; }

/* ------------------------------------------------------------ pílulas marca */
.marcas-filtro { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pilula {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  background: hsl(var(--secondary));
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--mov);
}
.pilula img { width: 20px; height: 20px; object-fit: contain; flex: none; }
/* a variante `-b` foi clareada para fundo escuro; no tema claro vale o colorido */
.pilula .cor { display: block; }
.pilula .mono { display: none; }
.escuro .pilula .cor { display: none; }
.escuro .pilula .mono { display: block; }
.pilula:hover { border-color: hsl(var(--primary) / 0.5); color: hsl(var(--foreground)); }
.pilula:has(input:checked), .pilula[data-ativa] {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-primary);
  border-color: transparent;
  color: #fff;
}
/* pílula ativa tem fundo azul: aí vale sempre a variante clara */
.pilula:has(input:checked) .mono, .pilula[data-ativa] .mono { display: block; }
.pilula:has(input:checked) .cor, .pilula[data-ativa] .cor { display: none; }

/* logotipo de marca solto (painel do veículo), mesma alternância */
.logo-marca { position: relative; width: 40px; height: 40px; flex: none; }
.logo-marca img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.logo-marca .mono { display: none; }
.escuro .logo-marca .mono { display: block; }
.escuro .logo-marca .cor { display: none; }
.pilula input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilula:has(input:focus-visible) { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }

/* ------------------------------------------- utilitários de alinhamento
   Substituem os `style="display:flex;..."` que antes ficavam soltos no HTML
   e desalinhavam em telas estreitas. */
.acoes-centro {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
.ligacao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: hsl(var(--primary));
  font-weight: 600;
  white-space: nowrap;
}
.ligacao:hover { text-decoration: underline; }
.ligacao svg { font-size: 1em; flex: none; }

.legenda-espera {
  margin-top: 12px;
  font-size: 12px;
  text-align: center;
  color: hsl(var(--muted-foreground));
}

.bloco--compacto { padding: 22px; }
.bloco--compacto h3 { font-size: 16px; margin-bottom: 6px; }
.bloco--compacto p { font-size: 14px; }
.bloco__icone--p { width: 44px; height: 44px; font-size: 20px; margin-bottom: 14px; border-radius: 12px; }

/* ----------------------------------------------- atalhos por carroceria */
/* eyebrow centralizado entre dois filetes */
.olho-linhas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}
.olho-linhas span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: hsl(var(--primary));
}
.olho-linhas::before, .olho-linhas::after {
  content: "";
  width: clamp(28px, 8vw, 96px);
  height: 1px;
  background: hsl(var(--primary) / 0.5);
}

.titulo-centro {
  text-align: center;
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.12;
  margin-bottom: 48px;
  text-wrap: balance;
}

.carrocerias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.carrocerias > * { min-width: 0; }

.carroceria {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  padding: 16px 18px 20px;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--card));
  transition: all var(--mov);
}
.carroceria:hover {
  transform: translateY(-6px);
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: var(--shadow-card-hover);
}

.carroceria__foto { display: block; width: 100%; aspect-ratio: 16 / 10; }
.carroceria__foto img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform var(--mov-l);
}
.carroceria:hover .carroceria__foto img { transform: scale(1.07); }

/* ícone ao lado do nome, na horizontal */
.carroceria__titulo { display: flex; align-items: center; gap: 10px; }
.carroceria__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: hsl(var(--primary-cheio) / 0.12);
  color: hsl(var(--primary));
  font-size: 19px;
  transition: background-color var(--mov), color var(--mov);
}
.carroceria:hover .carroceria__icone { background: hsl(var(--primary-cheio)); color: #fff; }

.carroceria__nome {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.carroceria__texto {
  font-size: 13px;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
  text-wrap: pretty;
}

.carroceria__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid hsl(var(--primary) / 0.4);
  border-radius: 50%;
  color: hsl(var(--primary));
  font-size: 16px;
  transition: background-color var(--mov), border-color var(--mov), color var(--mov), transform var(--mov);
}
.carroceria:hover .carroceria__seta {
  background: hsl(var(--primary-cheio));
  border-color: hsl(var(--primary-cheio));
  color: #fff;
  transform: translateX(2px);
}

.carroceria__conta {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: hsl(var(--primary-cheio) / 0.12);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: hsl(var(--primary));
}

/* --------------------------------------------- galeria de clientes em 3D */
.clientes {
  position: relative;
  perspective: 1400px;
  overflow: hidden;
  padding-block: 16px;
  /* esmaece as pontas para a faixa parecer infinita */
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.clientes__trilho {
  display: flex;
  gap: 20px;
  width: max-content;
  transform-style: preserve-3d;
  animation: desfila 56s linear infinite;
}
.clientes:hover .clientes__trilho,
.clientes:focus-within .clientes__trilho { animation-play-state: paused; }
@keyframes desfila { to { transform: translateX(calc(-50% - 10px)); } }

.cliente {
  position: relative;
  flex: none;
  width: 260px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--card));
  box-shadow: var(--shadow-card);
  transform: rotateY(9deg) scale(0.96);
  transition: transform var(--mov-l), box-shadow var(--mov-l), border-color var(--mov);
}
.cliente:nth-child(even) { transform: rotateY(-9deg) scale(0.96); }
.cliente:hover, .cliente:focus-within {
  transform: rotateY(0deg) scale(1.04);
  box-shadow: var(--shadow-card-hover), var(--shadow-glow);
  border-color: hsl(var(--primary) / 0.45);
  z-index: 2;
}
.cliente img { width: 100%; height: 100%; object-fit: cover; }
.cliente figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 32px 16px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px hsl(0 0% 0% / 0.9);
  background: linear-gradient(to top, hsl(0 0% 0% / 0.92) 0%, hsl(0 0% 0% / 0.55) 55%, transparent);
}

/* moldura de espera, enquanto a loja não envia as fotos */
.cliente--vazio {
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  border-style: dashed;
  border-color: hsl(var(--border));
  background: var(--gradient-card);
}
.cliente--vazio svg { font-size: 30px; color: hsl(var(--primary)); margin-inline: auto; }
.cliente--vazio b { font-size: 13px; font-weight: 700; }
.cliente--vazio span { font-size: 12px; color: hsl(var(--muted-foreground)); line-height: 1.45; }

/* ------------------------------------------------------------------ cartões */
.grade-veiculos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.grade-veiculos > * { min-width: 0; }

.cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--card));
  box-shadow: var(--shadow-card);
  transition: all var(--mov-l);
}
.cartao:hover { box-shadow: var(--shadow-card-hover); border-color: hsl(var(--primary) / 0.3); transform: translateY(-4px); }

.cartao__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: hsl(var(--muted)); }
.cartao__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1); }
.cartao:hover .cartao__foto img { transform: scale(1.1); }
.cartao__foto::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, hsl(0 0% 0% / 0.6) 0%, transparent 55%);
  opacity: 0.6;
  pointer-events: none;
}

.cartao__selos { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.cartao__marca { position: absolute; bottom: 16px; left: 16px; z-index: 2; }

.cartao__corpo { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.cartao__corpo > * { min-width: 0; }
.cartao__titulo { font-size: 18px; font-weight: 700; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cartao__versao {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-block: 16px; }
.ficha > * { min-width: 0; }
.ficha div { display: flex; align-items: center; gap: 7px; font-size: 13px; color: hsl(var(--muted-foreground)); min-width: 0; }
.ficha svg { font-size: 15px; flex: none; }
.ficha span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rodapé em duas linhas: o preço não divide espaço com os botões, então não
   quebra no meio nem corta o rótulo do botão. */
.cartao__rodape {
  display: grid;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid hsl(var(--border));
}
.cartao__rodape small { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); }
.cartao__preco {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cartao__acoes {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  position: relative;
  z-index: 2;
}
.cartao__acoes .btn { height: 40px; padding-inline: 12px; font-size: 13px; border-radius: 8px; }
.cartao__acoes .btn--redondo { width: 40px; padding: 0; }

/* -------------------------------------------------------------- diferenciais */
.grade-3, .grade-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.grade-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grade-3 > *, .grade-2 > *, .grade-4 > * { min-width: 0; }

.bloco {
  height: 100%;
  padding: 32px;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--card));
  transition: all var(--mov-l);
}
.bloco:hover { border-color: hsl(var(--primary) / 0.3); box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.bloco__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-primary);
  color: #fff;
  font-size: 26px;
  transition: transform var(--mov);
}
.bloco:hover .bloco__icone { transform: scale(1.08); }
.bloco h3 { font-size: 20px; margin-bottom: 10px; }
.bloco p { color: hsl(var(--muted-foreground)); text-wrap: pretty; }
.bloco small { display: block; margin-top: 12px; font-size: 12px; color: hsl(var(--muted-foreground)); }

.etapa__n {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 12px;
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.numero-cartao {
  padding: 24px 16px;
  text-align: center;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--card));
  transition: all var(--mov);
}
.numero-cartao:hover { border-color: hsl(var(--primary) / 0.3); transform: translateY(-3px); }
.numero-cartao dt {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.numero-cartao dd { margin: 6px 0 0; font-size: 13px; color: hsl(var(--muted-foreground)); }

/* --------------------------------------------------------------- quem somos */
.duas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.duas > * { min-width: 0; }

.retrato { position: relative; }
.retrato__moldura {
  position: absolute;
  top: -16px; left: -16px;
  width: 100%; height: 100%;
  border: 2px solid hsl(var(--primary) / 0.3);
  border-radius: 16px;
  z-index: -1;
}
/* retrato de pessoa: proporção vertical, para o enquadramento não cortar */
.retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 16px; box-shadow: var(--shadow-card); }

/* ------------------------------------------------ história (quem somos)
   Foto à esquerda, texto à direita e os marcos numa faixa embaixo. */
.historia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.historia__foto {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid hsl(var(--border));
}
.historia > * { min-width: 0; }
.historia__texto > p { color: hsl(var(--muted-foreground)); line-height: 1.7; margin-bottom: 16px; }
.historia__texto > p:last-child { margin-bottom: 0; }

.historia__olho {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--primary));
}
.historia__olho::before {
  content: ;
  flex: none;
  width: 26px; height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.historia__titulo {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.6px;
  margin-bottom: 20px;
}
.historia__titulo span { color: hsl(var(--primary)); }

/* marcos: ícone em quadro azul claro à esquerda, número e rótulo à direita */
.marcos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.marcos > * { min-width: 0; }
/* dentro da coluna da história o espaço é menor: cartão mais enxuto */
.marcos--historia { margin-top: 28px; gap: 12px; }
.marcos--historia .marco { padding: 16px; gap: 12px; }
.marcos--historia .marco__icone { width: 40px; height: 40px; font-size: 19px; }
.marcos--historia .marco dt { font-size: 1.125rem; }
.marcos--historia .marco dd { font-size: 12px; }
.marco {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--card));
  transition: border-color var(--mov), transform var(--mov);
}
.marco:hover { border-color: hsl(var(--primary) / 0.3); transform: translateY(-3px); }
.marco__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: hsl(var(--primary-cheio) / 0.1);
  color: hsl(var(--primary));
  font-size: 22px;
}
.marco dt {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2vw, 1.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: hsl(var(--foreground));
}
.marco dd { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: hsl(var(--muted-foreground)); }

/* ------------------------------------------- valores (quem somos) ---
   Título centralizado e quatro cartões com ícone em quadro azul claro. */
.centrado { text-align: center; margin-bottom: 32px; }
.historia__olho--centro { justify-content: center; }
.historia__olho--claro { color: hsl(212 96% 72%); }

.valores-pg { list-style: none; padding: 0; }
.valor-pg {
  padding: 24px;
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--card));
  transition: border-color var(--mov), transform var(--mov);
}
.valor-pg:hover { border-color: hsl(var(--primary) / 0.3); transform: translateY(-3px); }
.valor-pg__icone {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: hsl(var(--primary-cheio) / 0.1);
  color: hsl(var(--primary));
  font-size: 22px;
}
.valor-pg h3 { font-size: 16.5px; margin-bottom: 6px; }
.valor-pg p { font-size: 14px; line-height: 1.55; color: hsl(var(--muted-foreground)); }

/* --------------------------------------- painel de diferenciais -----
   Faixa escura com a foto à direita e o escurecimento vindo da esquerda,
   para o texto sempre cair sobre área calma da imagem. */
/* faixa de ponta a ponta: sem raio e sem container por fora */
.painel-dif {
  position: relative;
  overflow: hidden;
  background: hsl(222 47% 8%);
}
.painel-dif > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0.55;
}
.painel-dif__corpo {
  position: relative;
  z-index: 1;
  padding-block: 40px;
  color: #fff;
  background: linear-gradient(to bottom, hsl(222 47% 6% / 0.94), hsl(222 47% 6% / 0.88));
}
.painel-dif__titulo {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.6px;
  margin-bottom: 26px;
}
.painel-dif__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 32px;
  list-style: none;
  padding: 0;
  max-width: 720px;
}
.painel-dif__lista > * { min-width: 0; }
.painel-dif__lista li { display: flex; align-items: flex-start; gap: 14px; }
.painel-dif__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: hsl(var(--primary-cheio));
  color: #fff;
  font-size: 20px;
}
.painel-dif__lista b { display: block; font-size: 15.5px; margin-bottom: 3px; }
.painel-dif__lista p { font-size: 13.5px; line-height: 1.5; color: hsl(0 0% 100% / 0.75); }

.citacao {
  padding: 28px 28px 28px 32px;
  margin-block: 28px;
  border-left: 4px solid hsl(var(--primary-cheio));
  border-radius: 0 16px 16px 0;
  background: hsl(var(--primary-cheio) / 0.07);
}
.citacao p { font-family: var(--serif); font-size: clamp(1.05rem, 2.4vw, 1.375rem); line-height: 1.5; text-wrap: pretty; }
.citacao footer { margin-top: 14px; font-size: 14px; color: hsl(var(--muted-foreground)); }

.linha-tempo { display: grid; list-style: none; padding: 0; grid-template-columns: minmax(0, 1fr); }
.linha-tempo > * { min-width: 0; }
.linha-tempo li { position: relative; padding: 0 0 32px 36px; }
.linha-tempo li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gradient-primary);
  box-shadow: 0 0 0 4px hsl(var(--primary-cheio) / 0.16);
}
.linha-tempo li::after { content: ""; position: absolute; left: 6px; top: 24px; bottom: 0; width: 2px; background: hsl(var(--border)); }
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li:last-child::after { display: none; }
.linha-tempo b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: 4px;
}
.linha-tempo h3 { font-size: 18px; margin-bottom: 6px; }
.linha-tempo p { color: hsl(var(--muted-foreground)); }

/* ------------------------------------------------------------------ galeria */
.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.galeria > * { min-width: 0; }
.galeria figure { position: relative; margin: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; background: hsl(var(--muted)); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1); }
.galeria figure:hover img { transform: scale(1.08); }
.galeria figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 28px 14px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, hsl(0 0% 0% / 0.92) 0%, hsl(0 0% 0% / 0.6) 55%, transparent 100%);
  text-shadow: 0 1px 3px hsl(0 0% 0% / 0.9);
}

/* ---------------------------------------------------------------- simulador */
.simulador { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.simulador > * { min-width: 0; }

.painel-cartao {
  padding: 28px;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--card));
  box-shadow: var(--shadow-card);
}
.painel-cartao__titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  margin-bottom: 26px;
}
.painel-cartao__icone,
.resultado__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 12px;
  font-size: 19px;
}
.painel-cartao__icone {
  background: hsl(var(--primary-cheio) / 0.12);
  color: hsl(var(--primary));
}
.resultado__icone { background: hsl(0 0% 100% / 0.18); color: #fff; }

.faixa { display: grid; gap: 10px; margin-bottom: 26px; }
.faixa:last-of-type { margin-bottom: 0; }
.faixa__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faixa__topo output { font-family: var(--serif); font-size: 18px; font-weight: 700; color: hsl(var(--primary)); }

.faixa__rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--foreground));
}
.faixa__rotulo svg { font-size: 16px; color: hsl(var(--primary)); }
.faixa__destaque { font-size: 15px; font-weight: 700; color: hsl(var(--primary)); }

.faixa__valor {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--input));
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  transition: border-color var(--mov), box-shadow var(--mov);
}
.faixa__valor:focus {
  outline: none;
  border-color: hsl(var(--primary-cheio));
  box-shadow: 0 0 0 3px hsl(var(--primary-cheio) / 0.22);
}
.faixa__limites {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.prazos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.prazos > * { min-width: 0; }
.prazo {
  min-height: 44px;
  padding: 10px 6px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--secondary));
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--mov);
}
.prazo:hover { border-color: hsl(var(--primary) / 0.5); color: hsl(var(--foreground)); }
.prazo[aria-pressed="true"] {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-primary);
}

.taxa {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: 12px;
  background: hsl(var(--muted));
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}
.escuro .taxa { background: hsl(var(--secondary) / 0.6); }
.taxa svg { font-size: 16px; color: hsl(var(--primary)); flex: none; }
.taxa strong { color: hsl(var(--foreground)); }

.rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  padding-block: 9px;
  border: 0;
  border-radius: 99px;
  background: hsl(var(--muted));
  background-clip: content-box;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: hsl(var(--primary-cheio));
  border: 3px solid hsl(var(--card));
  box-shadow: var(--shadow-primary);
  transition: transform var(--mov-r);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: hsl(var(--primary-cheio));
  border: 3px solid hsl(var(--card));
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: hsl(var(--muted)); }

/* Cartão de resultado preenchido com a cor da marca, como no modelo.
   Tudo aqui é branco sobre azul, então o contraste não depende do tema. */
.resultado {
  padding: 28px;
  border: 0;
  border-radius: 16px;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-primary);
  color: #fff;
  text-align: center;
}
.resultado__titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  margin-bottom: 28px;
  text-align: left;
}
.resultado__rotulo { font-size: 14px; color: hsl(0 0% 100% / 0.85); }
.resultado__parcela {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin-block: 4px;
}
.resultado__prazo { font-size: 14px; color: hsl(0 0% 100% / 0.85); }

.resultado dl { display: grid; gap: 0; margin: 28px 0 24px; text-align: left; }
.resultado dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-block: 13px;
  font-size: 14px;
  border-bottom: 1px solid hsl(0 0% 100% / 0.22);
}
.resultado dt { color: hsl(0 0% 100% / 0.88); }
.resultado dd { margin: 0; font-weight: 700; color: #fff; }
.resultado__total { border-bottom: 0 !important; padding-top: 16px !important; }
.resultado__total dt, .resultado__total dd { font-size: 16px; font-weight: 700; color: #fff; }

.resultado__botao {
  background: #fff;
  color: hsl(226 89% 38%);
  border: 0;
  height: 52px;
  font-size: 16px;
}
.resultado__botao:hover { background: hsl(0 0% 96%); transform: scale(1.03); box-shadow: 0 10px 30px -8px hsl(0 0% 0% / 0.35); }
.resultado__nota { margin-top: 14px; font-size: 12px; line-height: 1.5; color: hsl(0 0% 100% / 0.85); }

/* o atributo hidden precisa vencer o display: flex, senão o aviso de
   "abrimos a conversa" aparece antes de a pessoa enviar qualquer coisa */
.aviso[hidden] { display: none; }
.aviso {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding: 16px;
  border-radius: 12px;
  background: hsl(var(--muted));
  font-size: 13px;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}
.escuro .aviso { background: hsl(var(--secondary) / 0.6); }
.aviso svg { font-size: 18px; color: hsl(var(--alerta)); flex: none; margin-top: 1px; }

/* ------------------------------------------------------------------ campos */
.campo { display: grid; gap: 7px; }
.campo > label, .campo .rotulo { font-size: 13px; font-weight: 600; color: hsl(var(--foreground)); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--input));
  transition: border-color var(--mov), box-shadow var(--mov);
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo select {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, hsl(var(--muted-foreground)) 50%),
                    linear-gradient(135deg, hsl(var(--muted-foreground)) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.campo :is(input, select, textarea):focus {
  outline: none;
  border-color: hsl(var(--primary-cheio));
  box-shadow: 0 0 0 3px hsl(var(--primary-cheio) / 0.22);
}
.campo small { font-size: 12px; color: hsl(var(--muted-foreground)); }

.formulario {
  display: grid;
  gap: 20px;
  padding: 32px;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--card));
  box-shadow: var(--shadow-card);
  grid-template-columns: minmax(0, 1fr);
}
.formulario > * { min-width: 0; }
.formulario__bloco { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.formulario__bloco > * { min-width: 0; }
.formulario :is(h2, h3) { font-size: 18px; padding-bottom: 12px; border-bottom: 1px solid hsl(var(--border)); }
.par { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.par > * { min-width: 0; }

/* ------------------------------------------------- ficha de financiamento
   Três grupos numerados em vez de quatro blocos iguais; os campos de
   documento e renda ficam recolhidos, já que não são enviados. */
.ficha-credito {
  max-width: 860px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.ficha-credito > * { min-width: 0; }

.ficha-credito__grupo {
  padding: 28px;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--card));
}
.ficha-credito__cabeca {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid hsl(var(--border));
}
.ficha-credito__cabeca h3 { font-size: 17px; margin-bottom: 4px; }
.ficha-credito__cabeca p { font-size: 13px; color: hsl(var(--muted-foreground)); text-wrap: pretty; }

.ficha-credito__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-primary);
  color: #fff;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
}
.ficha-credito__n--reservado { background: hsl(var(--secondary)); color: hsl(var(--primary)); box-shadow: none; font-size: 17px; }

.ficha-credito__selo {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 9px;
  border-radius: 9999px;
  background: hsl(var(--primary-cheio) / 0.12);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  vertical-align: middle;
}

.ficha-credito__abrir {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 9px 16px;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--primary));
  cursor: pointer;
  transition: all var(--mov);
}
.ficha-credito__abrir:hover { border-color: hsl(var(--primary)); background: hsl(var(--primary-cheio) / 0.08); }

.ficha-credito__campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ficha-credito__campos > * { min-width: 0; }
.ficha-credito__campos[hidden] { display: none; }
.campo--largo { grid-column: 1 / -1; }

.ficha-credito__grupo--reservado { background: hsl(var(--muted) / 0.4); }
.escuro .ficha-credito__grupo--reservado { background: hsl(var(--secondary) / 0.35); }

.ficha-credito__rodape { display: grid; justify-items: center; gap: 12px; padding-top: 4px; }
.ficha-credito__rodape .btn { min-width: 280px; }
.ficha-credito__rodape p { font-size: 12px; color: hsl(var(--muted-foreground)); text-align: center; }

/* ------------------------------------------------------------------ contato */
/* ------------------------------------------------------------ contato
   Faixa de três canais no topo, formulário à esquerda e foto + mapa
   à direita. */
.canais {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin-bottom: 28px;
}
.canais > * { min-width: 0; }
.canal {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--card));
  transition: border-color var(--mov), transform var(--mov);
}
.canal:hover { border-color: hsl(var(--primary) / 0.3); transform: translateY(-3px); }
.canal__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: hsl(var(--primary-cheio) / 0.1);
  color: hsl(var(--primary));
  font-size: 21px;
}
.canal b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.canal__destaque { font-size: 17px; font-weight: 700; line-height: 1.35; }
.canal__destaque--fino { font-size: 14px; font-weight: 600; color: hsl(var(--muted-foreground)); }
/* alvo de toque de 24px (WCAG 2.2 AA, 2.5.8): o texto sozinho dá 21-23px */
.canal__destaque a { display: inline-block; padding-block: 2px; min-height: 24px; color: inherit; }
.canal__destaque a:hover { color: hsl(var(--primary)); }
.canal small { display: block; margin-top: 4px; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.canal__link { display: inline-block; margin-top: 4px; padding-block: 4px; min-height: 24px; font-size: 13px; font-weight: 600; color: hsl(var(--primary)); }

.contato-titulo {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.6px;
  margin-bottom: 22px;
}
.contato-titulo span { color: hsl(var(--primary)); }

/* o asterisco marca o campo obrigatório sem gritar */
.formulario--contato .campo label i { font-style: normal; color: hsl(var(--primary)); }
.formulario__nota { margin-top: 4px; font-size: 12px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.formulario__nota i { font-style: normal; color: hsl(var(--primary)); }
.formulario__nota a { color: hsl(var(--primary)); font-weight: 600; }

.contato-lado { display: grid; gap: 16px; align-content: start; }
.contato-foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid hsl(var(--border));
}

.contato-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
.contato-grade > * { min-width: 0; }

.contato__titulo { font-size: clamp(1.875rem, 5vw, 3rem); margin-block: 12px 16px; }
.contato__apoio { font-size: 17px; color: hsl(var(--muted-foreground)); margin-bottom: 36px; max-width: 520px; text-wrap: pretty; }

.lista-contato { display: grid; gap: 22px; list-style: none; padding: 0; grid-template-columns: minmax(0, 1fr); }
.lista-contato > * { min-width: 0; }
.lista-contato li { display: flex; gap: 16px; }
.lista-contato .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: 12px;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-primary);
  color: #fff;
  font-size: 20px;
}
.lista-contato b { display: block; font-size: 13px; font-weight: 700; color: hsl(var(--foreground)); margin-bottom: 4px; }
.lista-contato p { font-size: 15px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.lista-contato a { display: inline-block; padding-block: 4px; min-height: 24px; }
.lista-contato a:hover { color: hsl(var(--primary)); }

.mapa { overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: 16px; aspect-ratio: 16 / 9; background: hsl(var(--muted)); }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------------ sanfona */
.sanfona { display: grid; gap: 12px; max-width: 800px; margin-inline: auto; grid-template-columns: minmax(0, 1fr); }
.sanfona > * { min-width: 0; }
.sanfona details { overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); transition: border-color var(--mov); }
.sanfona details[open] { border-color: hsl(var(--primary) / 0.4); }
.sanfona summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona summary:hover { color: hsl(var(--primary)); }
.sanfona summary::after {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--mov);
}
.sanfona details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.sanfona .conteudo { padding: 0 22px 22px; color: hsl(var(--muted-foreground)); text-wrap: pretty; }

/* ------------------------------------------------------- página do veículo */
.migalhas { font-size: 13px; color: hsl(var(--muted-foreground)); padding-block: 16px; }
.migalhas ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.migalhas li { display: flex; align-items: center; min-height: 24px; }
.migalhas li:not(:last-child)::after { content: "/"; margin-left: 8px; color: hsl(var(--border)); }
.migalhas a { display: inline-block; padding-block: 4px; min-height: 24px; }
.migalhas a:hover { color: hsl(var(--primary)); }

.veiculo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.veiculo > * { min-width: 0; }

.visor { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.visor > * { min-width: 0; }
.visor__principal { position: relative; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: 16px; aspect-ratio: 4 / 3; background: hsl(var(--muted)); }
.visor__principal img { width: 100%; height: 100%; object-fit: cover; }
.visor__contador {
  position: absolute;
  right: 14px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 9999px;
  background: hsl(var(--background) / 0.92);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 700;
}
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.miniaturas > * { min-width: 0; }
.miniaturas button {
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  background: hsl(var(--muted));
  cursor: pointer;
  opacity: 0.55;
  transition: all var(--mov);
}
.miniaturas button:hover { opacity: 1; }
.miniaturas button[aria-current="true"] { border-color: hsl(var(--primary-cheio)); opacity: 1; }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.painel {
  display: grid;
  gap: 20px;
  padding: 28px;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--card));
  box-shadow: var(--shadow-card);
  grid-template-columns: minmax(0, 1fr);
}
.painel > * { min-width: 0; }
.painel h1 { font-size: clamp(1.5rem, 4.2vw, 1.875rem); }
.painel__versao { font-size: 14px; color: hsl(var(--muted-foreground)); margin-top: 8px; }
.painel__preco {
  font-family: var(--serif);
  font-size: clamp(2rem, 5.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.painel__parcela { font-size: 14px; color: hsl(var(--muted-foreground)); margin-top: 8px; }
.painel__parcela b { color: hsl(var(--primary)); }
.painel__acoes { display: grid; gap: 10px; }

.especificacoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--border));
}
.especificacoes > * { min-width: 0; }
.especificacoes div { display: grid; gap: 6px; padding: 18px; background: hsl(var(--card)); }
.especificacoes dt { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.especificacoes dd { margin: 0; font-family: var(--serif); font-size: 17px; font-weight: 700; }

/* ==========================================================================
   PÁGINA DE ESTOQUE
   Carrossel de marcas, painel de filtros, cabeçalho de resultados e grade.
   Superfícies claras e borda fina, com os tokens dos dois temas.
   ========================================================================== */
.estoque { padding-block: 32px 64px; background: hsl(var(--background)); }
.estoque__titulo { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: 24px; }

.estoque-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 28px;
}
.estoque-grade > * { min-width: 0; }

/* barra de filtros/ordenação que só aparece em tela estreita */
.filtros-topo { display: flex; gap: 10px; align-items: center; }
.filtros-topo .campo { flex: 1; }

.botao-painel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding-inline: 16px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--card));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--mov);
}
.botao-painel:hover { border-color: hsl(var(--primary)); }

.campo--inline { display: flex; align-items: center; gap: 8px; }
.campo--inline label { font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.campo--inline select { min-height: 40px; min-width: 150px; }

.campo__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.campo__topo output { font-size: 13px; font-weight: 700; color: hsl(var(--primary)); }
.par-curto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.par-curto > * { min-width: 0; }

/* -------------------------------------------------------- cabeçalho dos resultados */
.resultados__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.resultados__conta { font-size: 14px; color: hsl(var(--muted-foreground)); }
.resultados__conta strong { font-size: 16px; color: hsl(var(--foreground)); }
.resultados__acoes { display: flex; align-items: center; gap: 12px; }
.resultados__acoes .campo--inline { display: none; }

.visao {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--card));
}
.visao button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding-inline: 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--mov), color var(--mov);
}
.visao button[aria-pressed="true"] { background: hsl(var(--primary-cheio)); color: #fff; }
.visao button svg { font-size: 15px; }

/* ------------------------------------------------------------ cartão do estoque */
.veiculo-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--card));
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.05);
  transition: border-color var(--mov), box-shadow var(--mov), transform var(--mov);
}
.veiculo-cartao:hover {
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: 0 6px 20px -6px hsl(0 0% 0% / 0.16);
  transform: translateY(-2px);
}

.veiculo-cartao__foto { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: hsl(var(--muted)); }
.veiculo-cartao__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--mov-l); }
.veiculo-cartao:hover .veiculo-cartao__foto img { transform: scale(1.05); }

.veiculo-cartao__selos { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 5px; }
.selo-estoque {
  padding: 4px 10px;
  border-radius: 5px;
  background: hsl(var(--primary-cheio));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* no tema claro o alerta é escuro (texto branco); no escuro é claro (texto escuro) */
.selo-estoque--alerta { background: hsl(28 92% 34%); color: #fff; }
.escuro .selo-estoque--alerta { background: hsl(var(--alerta)); color: hsl(40 60% 10%); }

.favorito {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: hsl(var(--card) / 0.92);
  backdrop-filter: blur(6px);
  color: hsl(var(--muted-foreground));
  font-size: 17px;
  cursor: pointer;
  transition: color var(--mov), background-color var(--mov), transform var(--mov-r);
}
.favorito:hover { transform: scale(1.1); color: hsl(var(--primary)); }
.favorito[aria-pressed="true"] { color: hsl(0 75% 55%); }
.favorito[aria-pressed="true"] svg { fill: currentColor; }

.veiculo-cartao__marca {
  position: absolute;
  bottom: 10px; left: 10px;
  z-index: 2;
  width: 34px; height: 24px;
  padding: 3px 5px;
  border-radius: 5px;
  background: hsl(var(--card) / 0.92);
  backdrop-filter: blur(6px);
}
.veiculo-cartao__marca img { width: 100%; height: 100%; object-fit: contain; }
.veiculo-cartao__marca .mono { display: none; }
.escuro .veiculo-cartao__marca .mono { display: block; }
.escuro .veiculo-cartao__marca .cor { display: none; }

.veiculo-cartao__corpo { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.veiculo-cartao__nome {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2px;
}
.veiculo-cartao__nome a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.veiculo-cartao__versao {
  font-size: 12px;
  line-height: 1.4;
  color: hsl(var(--muted-foreground));
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.veiculo-cartao__ficha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  margin: 14px 0;
}
.veiculo-cartao__ficha > * { min-width: 0; }
.veiculo-cartao__ficha > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.veiculo-cartao__ficha dt { display: flex; font-size: 14px; color: hsl(var(--muted-foreground)); flex: none; }
.veiculo-cartao__ficha dd {
  margin: 0;
  font-size: 12.5px;
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.veiculo-cartao__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid hsl(var(--border));
}
.veiculo-cartao__preco {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  color: hsl(var(--primary));
}
.veiculo-cartao__ir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 7px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  font-size: 15px;
  transition: background-color var(--mov), transform var(--mov);
}
.veiculo-cartao:hover .veiculo-cartao__ir { background: hsl(var(--primary-cheio)); color: #fff; transform: translateX(2px); }


/* ------------------------------------------------------------------ filtros */

.filtros {
  display: none;
  gap: 18px;
  padding: 16px;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--card));
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.04);
  grid-template-columns: minmax(0, 1fr);
}
.filtros[data-aberto] { display: grid; }
.filtros > * { min-width: 0; }
.filtros fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.filtros legend { padding: 0; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.filtros .campo > label, .filtros .campo .rotulo { font-size: 13px; font-weight: 600; }
.filtros .campo input, .filtros .campo select { min-height: 40px; font-size: 14px; }
.opcao { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; min-height: 32px; color: hsl(var(--muted-foreground)); }
.opcao input { width: 24px; height: 24px; accent-color: hsl(var(--primary-cheio)); flex: none; cursor: pointer; }

.btn-aplicar {
  height: 44px;
  width: 100%;
  border: 0;
  border-radius: 7px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--mov);
}
.btn-aplicar:hover { opacity: 0.88; }

.btn-limpar {
  height: 36px;
  width: 100%;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--mov);
}
.btn-limpar:hover { color: hsl(var(--primary)); }

.barra-resultado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.barra-resultado p { font-size: 14px; color: hsl(var(--muted-foreground)); }
.barra-resultado strong { color: hsl(var(--foreground)); }
.barra-resultado .campo { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.barra-resultado .campo select { min-height: 42px; }

.vazio { grid-column: 1 / -1; padding: 56px 24px; text-align: center; border: 1px dashed hsl(var(--border)); border-radius: 16px; }
.vazio h3 { font-size: 20px; margin-bottom: 8px; }
.vazio p { color: hsl(var(--muted-foreground)); margin-bottom: 20px; }

/* ------------------------------------------------------------------- rodapé */
.rodape {
  position: relative;
  overflow: hidden;
  background: hsl(var(--muted));
  border-top: 1px solid hsl(var(--border));
  padding-top: 64px;
}
.escuro .rodape { background: hsl(var(--card)); }
.rodape::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -12%;
  width: min(900px, 130%);
  aspect-ratio: 3 / 1;
  translate: -50% 0;
  background: url("/assets/img/silhueta.svg") center bottom / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
}
.escuro .rodape::after { opacity: 0.07; }

.rodape__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-bottom: 48px; position: relative; z-index: 1; }
.rodape__grade > * { min-width: 0; }
.rodape__marca { grid-column: 1 / -1; }
.rodape__marca img { height: 64px; width: auto; margin-bottom: 16px; }
.rodape__marca p { font-size: 14px; color: hsl(var(--muted-foreground)); max-width: 320px; text-wrap: pretty; }

.rodape h2 { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.rodape ul { display: grid; gap: 10px; list-style: none; padding: 0; }
.rodape li { font-size: 14px; color: hsl(var(--muted-foreground)); }

/* Bloco de contato do rodapé.
   Cada linha começa pelo ícone do que ela é — telefone, WhatsApp, e-mail,
   endereço, horário — alinhado pelo topo, porque endereço e horário ocupam
   mais de uma linha e o ícone precisa acompanhar a primeira, não centralizar
   no conjunto. */
.rodape__contato { gap: 14px; }
.rodape__contato li {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 10px;
  line-height: 1.5;
}
.rodape__icone {
  display: grid;
  place-items: center;
  margin-top: 2px;
  color: hsl(var(--primary));
}
.rodape__icone svg { width: 16px; height: 16px; }
.rodape__contato a:hover { color: hsl(var(--foreground)); }
.rodape__autoria { color: hsl(var(--muted-foreground)); }
.rodape__autoria a { text-decoration: underline; text-underline-offset: 3px; }
.rodape a { display: inline-block; padding-block: 4px; min-height: 24px; transition: color var(--mov); }
.rodape a:hover { color: hsl(var(--primary)); }

.redes { display: flex; gap: 10px; margin-top: 20px; }
.redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--card));
  font-size: 19px;
  transition: all var(--mov);
}
.escuro .redes a { background: hsl(var(--secondary)); }
.redes a:hover { background: var(--gradient-primary); border-color: transparent; color: #fff; transform: translateY(-3px); }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 20px;
  border-top: 1px solid hsl(var(--border));
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  position: relative;
  z-index: 1;
}
.rodape__base nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }

/* atalho para a área restrita */
.rodape__painel {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 14px !important;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  font-weight: 600;
  transition: border-color var(--mov), color var(--mov), background-color var(--mov);
}
.rodape__painel:hover { border-color: hsl(var(--primary)); background: hsl(var(--primary-cheio) / 0.08); }
.rodape__painel svg { font-size: 14px; }

/* --------------------------------------------------------------- flutuantes */
.whats-fixo {
  position: fixed;
  right: 16px; bottom: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding-inline: 16px;
  border-radius: 9999px;
  background: hsl(var(--whats));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 12px 34px -8px hsl(var(--whats) / 0.8);
  transition: transform var(--mov);
}
.whats-fixo:hover { transform: scale(1.05); }
.whats-fixo svg { font-size: 26px; flex: none; }
.whats-fixo span { display: none; }

/* ------------------------------------------------------ modal de boas-vindas */
.boas-vindas {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 0;
  background: transparent;
  overflow: auto;
}
.boas-vindas[open] { display: flex; animation: entra 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.boas-vindas::backdrop { background: hsl(0 0% 0% / 0.72); backdrop-filter: blur(4px); }
@keyframes entra { from { opacity: 0; transform: scale(0.94); } }

.boas-vindas__painel {
  position: relative;
  width: min(420px, 100%);
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: 20px;
  background: hsl(var(--card));
  box-shadow: 0 24px 70px -20px hsl(0 0% 0% / 0.6);
  text-align: center;
}
.boas-vindas__capa { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: hsl(var(--muted)); }
.boas-vindas__capa img { width: 100%; height: 100%; object-fit: cover; }
.boas-vindas__capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, hsl(var(--card)) 2%, transparent 62%); }
.boas-vindas__selo { position: absolute; top: 14px; left: 14px; z-index: 2; }
.boas-vindas__fechar {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: hsl(0 0% 0% / 0.6);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: background-color var(--mov);
}
.boas-vindas__fechar:hover { background: hsl(0 0% 0% / 0.85); }

.boas-vindas__corpo { padding: 0 28px 28px; }
.boas-vindas__logo { height: 64px; width: auto; margin: -36px auto 14px; position: relative; z-index: 2; }
.boas-vindas h2 { font-size: 21px; margin-bottom: 6px; }
.boas-vindas__lema { font-size: 14px; color: hsl(var(--muted-foreground)); margin-bottom: 22px; }
.boas-vindas__pergunta { font-size: 13px; color: hsl(var(--muted-foreground)); margin-bottom: 12px; }

.escolha-tema { display: flex; justify-content: center; gap: 12px; margin-bottom: 22px; }
.escolha-tema button {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 96px;
  padding: 14px 8px;
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--secondary));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--mov);
}
.escolha-tema button svg { font-size: 20px; }
.escolha-tema button:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.escolha-tema button[aria-pressed="true"] {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-primary);
}

.boas-vindas__nao { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: hsl(var(--muted-foreground)); cursor: pointer; min-height: 24px; }
.boas-vindas__nao input { width: 18px; height: 18px; accent-color: hsl(var(--primary-cheio)); }

/* ------------------------------------------------------------------ revelar */
[data-revelar] { opacity: 0; transform: translateY(24px); }
[data-revelar][data-visivel] {
  opacity: 1;
  transform: none;
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--atraso, 0ms);
}

/* -------------------------------------------------------------- breakpoints */
@media (min-width: 640px) {
  .par, .formulario__bloco, .ficha-credito__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heroi__botoes { flex-direction: row; flex-wrap: wrap; }
  .whats-fixo span { display: block; }
  .whats-fixo { right: 24px; }
  .carrossel__trilho > * { flex-basis: 300px; }
}

@media (min-width: 768px) {
  .secao { padding-block: 80px; }
  .carrocerias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prazos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cliente { width: 300px; }
  .grade-veiculos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-2, .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* o marco é ícone + texto lado a lado: em 4 colunas a 768px o rótulo
     quebraria feio. Só abre para quatro a partir de 1024. */
  .marcos, .valores-pg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marcos--historia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* dois cartões à mostra e as setas já cabem nas bordas */
  .carrossel--destaques .carrossel__trilho > * { flex: 0 0 calc((100% - 16px) / 2); }
  .carrossel--destaques .carrossel__setas { display: block; }
  .rodape__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape__marca { grid-column: auto; }
  .topo__acoes .btn--primario { display: inline-flex; }
  .marca img { height: 68px; }
  .olho { font-size: 16px; }
}

@media (min-width: 1024px) {
  .nav { display: block; }
  .hamburguer, .gaveta { display: none; }
  .topo__tel { display: inline-flex; }
  .grade-veiculos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .duas { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px; }
  .canais { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contato-grade { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; }
  .historia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; }
  /* no bloco de compromisso o texto vem primeiro e a foto fica à direita */
  .historia--invertida { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  /* só a partir daqui o texto ocupa metade da faixa, e aí dá para deixar
     a foto aparecer do meio para a direita */
  .painel-dif__corpo {
    padding-block: 64px;
    background: linear-gradient(to right, hsl(222 47% 6% / 0.95) 45%, hsl(222 47% 6% / 0.55) 75%, hsl(222 47% 6% / 0.25));
  }
  .painel-dif__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .valores-pg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .marcos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .marcos--historia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* quatro cartões, como no modelo */
  .carrossel--destaques .carrossel__trilho > * { flex: 0 0 calc((100% - 48px) / 4); }
  .simulador { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contato-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .estoque-grade { grid-template-columns: 268px minmax(0, 1fr); }
  .veiculo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape__grade { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; }
  .painel { position: sticky; top: calc(var(--topo) + 20px); }

  /* estoque: painel de filtros fixo à esquerda, resultados à direita */
  .estoque-grade { grid-template-columns: 220px minmax(0, 1fr); }
  .filtros-topo { display: none; }
  .filtros { display: grid; position: sticky; top: calc(var(--topo) + 20px); }
  .filtros[data-aberto] { display: grid; }
  .resultados__acoes .campo--inline { display: flex; }
  .grade-veiculos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

@media (min-width: 1280px) {
  .grade-veiculos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .carrocerias { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .secao { padding-block: 96px; }
}

/* na página de estoque a grade divide espaço com o painel de filtros */
@media (min-width: 1024px) and (max-width: 1439px) {
  .estoque .grade-veiculos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  .estoque .grade-veiculos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------- movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
  .carrossel__trilho { scroll-behavior: auto; }
  /* a faixa de clientes para de desfilar e vira uma lista rolável à mão */
  .clientes__trilho { animation: none; }
  .clientes { overflow-x: auto; }
  .cliente, .cliente:nth-child(even) { transform: none; }
}

/* ------------------------------------------------------------- modo lista
   Depois dos breakpoints de propósito: senão a grade de 3 ou 4 colunas do
   desktop vence e o cartão fica estreito, espremendo a foto na vertical.
   A foto mantém proporção de paisagem — com uma coluna estreita e
   `object-fit: cover`, a imagem perderia as laterais. */
.estoque .grade-veiculos[data-visao="lista"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.grade-veiculos[data-visao="lista"] .veiculo-cartao { flex-direction: row; align-items: stretch; }
/* a foto acompanha a altura do cartão e a largura sai da proporção, em vez
   do contrário — assim `cover` quase não tem o que descartar */
.grade-veiculos[data-visao="lista"] .veiculo-cartao__foto {
  flex: none;
  align-self: stretch;
  width: auto;
  aspect-ratio: 3 / 2;
  min-width: 170px;
  max-width: 42%;
}
.grade-veiculos[data-visao="lista"] .veiculo-cartao__corpo { flex: 1; padding: 18px 20px; }
.grade-veiculos[data-visao="lista"] .veiculo-cartao__nome { font-size: 18px; }
.grade-veiculos[data-visao="lista"] .veiculo-cartao__ficha { max-width: 460px; }

/* no celular a lista volta a empilhar: a foto de lado ficaria minúscula */
@media (max-width: 599px) {
  .grade-veiculos[data-visao="lista"] .veiculo-cartao { flex-direction: column; }
  .grade-veiculos[data-visao="lista"] .veiculo-cartao__foto {
    flex: none;
    align-self: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    aspect-ratio: 16 / 9;
  }
  .grade-veiculos[data-visao="lista"] .veiculo-cartao__corpo { padding: 14px 16px 16px; }
}

/* ---------------------------------------------------------------- impressão */
@media print {
  .topo, .barra-aviso, .whats-fixo, .rodape, .painel__acoes, .miniaturas, .pular, .boas-vindas { display: none !important; }
  body { background: #fff; color: #000; }
  .cartao, .painel, .bloco { border-color: #ccc; background: #fff; box-shadow: none; }
}

/* --- opcionais e texto da loja na ficha do veículo ------------------------ */
/* Dados que passaram a vir do painel: a lista de opcionais e o texto que a
   loja escreve sobre cada carro. */
.opcionais {
  display: grid;
  gap: 10px 24px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.opcionais li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.4;
}

.opcionais li svg {
  flex: none;
  color: hsl(var(--primary));
}

.texto-loja {
  max-width: 68ch;
  font-size: 15.5px;
  line-height: 1.75;
  white-space: normal;
}

/* ------------------------------------------------------- galeria circular
   Anel de fotos em 3D. Cada item fica numa fatia do círculo
   (rotateY) empurrada para fora do centro (translateZ); girar o anel inteiro
   é girar o contêiner, e o navegador faz o resto na GPU.

   O raio é variável porque ele precisa encolher junto com a tela: num celular
   o raio do desktop jogaria as fotos para fora da viewport. */
.anel-clientes {
  --raio: 520px;
  --largura-item: 280px;
  --altura-item: 370px;
  position: relative;
  margin-top: 8px;
  padding: 24px 0 8px;
}

.anelc__palco {
  position: relative;
  /* a perspectiva amplia o item da frente: com raio 520 e perspectiva 2000,
     ele sai 1,35× maior. O palco precisa caber isso, senão a foto da frente
     aparece cortada em cima e embaixo — foi o que aconteceu na primeira
     versão, com o palco na altura do item. */
  height: calc(var(--altura-item) * 1.5);
  perspective: 2000px;
  perspective-origin: 50% 45%;
  /* o anel passa das bordas da tela; cortar aqui evita rolagem lateral */
  overflow: hidden;
}

.anelc__anel {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
  transform: rotateY(var(--giro, 0deg));
  will-change: transform;
  cursor: grab;
}
.anelc__anel:active { cursor: grabbing; }

.anelc__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--largura-item);
  height: var(--altura-item);
  margin-left: calc(var(--largura-item) / -2);
  margin-top: calc(var(--altura-item) / -2);
  transform: rotateY(calc(var(--i) * (360deg / var(--total)))) translateZ(var(--raio));
  /* definida pelo script conforme o ângulo: o que está atrás recua */
  opacity: var(--brilho, 1);
  transition: opacity 0.25s linear;
}

.anelc__item figure {
  position: relative;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: var(--raio-cartao, 16px);
  background: hsl(var(--card));
  box-shadow: 0 24px 60px hsl(0 0% 0% / 0.45);
}

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

.anelc__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 16px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(to top, hsl(0 0% 0% / 0.85), transparent);
  text-shadow: 0 1px 3px hsl(0 0% 0% / 0.8);
}

.anelc__controles {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.anelc__seta {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: border-color var(--mov), background var(--mov);
}
.anelc__seta:hover { border-color: hsl(var(--primary)); background: hsl(var(--card-alto, var(--card))); }
.anelc__seta svg { width: 20px; height: 20px; }

@media (max-width: 1023px) {
  .anel-clientes { --raio: 380px; --largura-item: 230px; --altura-item: 310px; }
}
@media (max-width: 639px) {
  .anel-clientes { --raio: 240px; --largura-item: 180px; --altura-item: 244px; }
  .anelc__item figcaption { padding: 32px 12px 12px; font-size: 12.5px; }
}

/* Com "reduzir movimento" o anel não gira: vira uma faixa rolável comum.
   Giro automático em 3D é exatamente o tipo de coisa que essa preferência
   existe para desligar. */
@media (prefers-reduced-motion: reduce) {
  .anelc__palco { perspective: none; overflow-x: auto; overflow-y: hidden; height: auto; }
  .anelc__anel {
    position: static;
    display: flex;
    gap: 16px;
    padding: 0 16px 8px;
    transform: none;
    transform-style: flat;
    cursor: auto;
  }
  .anelc__item {
    position: static;
    flex: 0 0 var(--largura-item);
    margin: 0;
    transform: none;
    opacity: 1;
  }
  .anelc__controles { display: none; }
}