/* ==========================================================================
   JF VEÍCULOS — jf.css
   Sistema visual único do site. Sem framework, sem build.

   Sumário
     01. Tokens
     02. Reset e base
     03. Tipografia
     04. Layout
     05. Botões e chips
     06. Campos de formulário
     07. Cabeçalho e navegação
     08. Palco cinematográfico (hero de rolagem)
     09. Blocos da home
     10. Card de veículo
     11. Estoque (busca, filtros, resultados)
     12. Veículo (detalhe)
     13. Financiamento e avaliação
     14. Rodapé e WhatsApp flutuante
     15. Estados de animação
     16. Responsivo
   ========================================================================== */

/* ============================== 01. TOKENS ============================== */
:root {
  /* tinta */
  --tinta-900: #08080A;
  --tinta-850: #0B0B0C;
  --tinta-800: #121214;
  --tinta-700: #1B1B1E;
  --tinta-600: #26262A;
  --tinta-500: #3A3A40;

  /* creme */
  --creme-50:  #FDFBF7;
  --creme-100: #F7F3EC;
  --creme-200: #EFE8DC;
  --creme-300: #E2D8C6;

  /* ouro da marca */
  --ouro-100: #F4E2B8;
  --ouro-200: #EBD4A0;
  --ouro-300: #D9B972;
  --ouro-400: #C9A24D;   /* cor-chave */
  --ouro-500: #B0873A;
  --ouro-600: #8F6A28;
  --ouro-700: #8A6626;   /* o mais escuro que ainda lê como dourado: 4,6:1 sobre creme */

  /* texto */
  --texto-forte:  #101012;
  --texto-medio:  #4A4A52;
  --texto-suave:  #7A7A85;
  --texto-claro:  #F7F3EC;
  --texto-claro-medio: rgba(247, 243, 236, 0.68);
  --texto-claro-suave: rgba(247, 243, 236, 0.42);

  /* apoio */
  --verde-500: #1F8A5B;
  --verde-100: #E4F4EC;
  --vermelho-500: #C0392B;
  --vermelho-100: #FBEAE8;
  --whats: #25D366;

  /* superfícies */
  --fundo: var(--creme-100);
  --cartao: #FFFFFF;
  --borda: rgba(16, 16, 18, 0.10);
  --borda-forte: rgba(16, 16, 18, 0.18);
  --borda-clara: rgba(247, 243, 236, 0.14);

  /* sombras — discretas, o ouro faz o destaque */
  --sombra-1: 0 1px 2px rgba(11, 11, 12, 0.05), 0 2px 8px rgba(11, 11, 12, 0.04);
  --sombra-2: 0 2px 6px rgba(11, 11, 12, 0.06), 0 12px 28px rgba(11, 11, 12, 0.08);
  --sombra-3: 0 8px 20px rgba(11, 11, 12, 0.10), 0 32px 64px rgba(11, 11, 12, 0.14);
  --sombra-ouro: 0 10px 30px rgba(201, 162, 77, 0.28);

  /* tipografia */
  --fonte-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --fonte-num: 'Manrope', system-ui, sans-serif;

  /* ritmo */
  --largura: 1280px;
  --largura-estreita: 940px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --seccao-y: clamp(4.5rem, 9vw, 8.5rem);
  --raio-p: 8px;
  --raio: 14px;
  --raio-g: 22px;
  --raio-pill: 999px;

  /* movimento — as curvas vêm das referências do MotionSites */
  --ease-entrada: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-cortina: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-suave:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* preenchido pelo motor de rolagem */
  --rolagem: 0;

  --altura-cabecalho: 76px;
}

/* ========================== 02. RESET E BASE =========================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

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

body {
  font-family: var(--fonte-ui);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--texto-forte);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  /* clip, não hidden: hidden em body cria um contexto que quebra o position:sticky
     do palco de rolagem em alguns navegadores. */
  overflow-x: clip;
}

body.sem-rolagem { overflow: hidden; }

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; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; }

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

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

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

/* Salta para o conteúdo — só aparece no teclado */
.pular {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 300; background: var(--tinta-900); color: var(--texto-claro);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--raio-p) var(--raio-p);
  font-size: 0.875rem; font-weight: 600; transition: transform 0.25s var(--ease-entrada);
}
.pular:focus { transform: translate(-50%, 0); }

/* =========================== 03. TIPOGRAFIA ============================ */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.t-xg { font-size: clamp(2.5rem, 6.4vw, 5rem); }
.t-g  { font-size: clamp(2rem, 4.4vw, 3.35rem); }
.t-m  { font-size: clamp(1.5rem, 2.8vw, 2.15rem); }
.t-p  { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -0.015em; }

/* A frase-chave em serifa itálica dourada — é a assinatura visual do site.
   Serifa e sans na mesma linha é o que separa isto de uma loja qualquer. */
.grifo {
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ouro-400);
  /* a serifa tem olho menor: sobe um pouco para alinhar com a sans */
  font-size: 1.14em;
  line-height: 0.9;
}

.sobretitulo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ouro-500);
}
.sobretitulo::before {
  content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.6;
}
.sobretitulo--centro { justify-content: center; }
.escuro .sobretitulo { color: var(--ouro-300); }

.chamada {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--texto-medio);
  max-width: 52ch;
  text-wrap: pretty;
}
.escuro .chamada { color: var(--texto-claro-medio); }

.mudo { color: var(--texto-suave); }
.escuro .mudo { color: var(--texto-claro-suave); }

/* números de preço, km, parcela */
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.legal {
  font-size: 0.75rem; line-height: 1.55; color: var(--texto-suave);
  max-width: 68ch;
}
.escuro .legal { color: var(--texto-claro-suave); }

/* ============================= 04. LAYOUT ============================== */
.env {
  width: 100%; max-width: var(--largura);
  margin-inline: auto; padding-inline: var(--gutter);
}
.env--estreito { max-width: var(--largura-estreita); }

.seccao { padding-block: var(--seccao-y); position: relative; }
.seccao--curta { padding-block: clamp(3rem, 6vw, 5rem); }

.escuro { background: var(--tinta-850); color: var(--texto-claro); }
.escuro h1, .escuro h2, .escuro h3, .escuro h4 { color: var(--texto-claro); }
/* ...menos dentro de um cartão claro. A regra acima mira o título direto, então
   ganha da cor que o próprio cartão define para si — e o nome do carro (um h3)
   saía creme sobre o branco do cartão na vitrine do vender.html. Qualquer
   superfície clara dentro de uma seção escura precisa entrar nesta lista. */
.escuro .carro h1, .escuro .carro h2,
.escuro .carro h3, .escuro .carro h4 { color: var(--texto-forte); }

.cabeca-seccao {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.cabeca-seccao__texto { display: grid; gap: 0.9rem; }
.cabeca-seccao--centro {
  flex-direction: column; align-items: center; text-align: center;
}
.cabeca-seccao--centro .chamada { margin-inline: auto; }

.linha-ouro {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--ouro-400), transparent);
  opacity: 0.5;
}

/* ========================= 05. BOTÕES E CHIPS ========================== */
.btn {
  --btn-fundo: var(--ouro-400);
  --btn-texto: var(--tinta-900);
  --btn-borda: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--raio-pill);
  border: 1px solid var(--btn-borda);
  background: var(--btn-fundo);
  color: var(--btn-texto);
  font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.35s var(--ease-entrada), box-shadow 0.35s var(--ease-entrada),
              background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-ouro); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--fantasma {
  --btn-fundo: transparent; --btn-texto: var(--texto-forte); --btn-borda: var(--borda-forte);
}
.btn--fantasma:hover { --btn-fundo: var(--texto-forte); --btn-texto: var(--creme-100); box-shadow: var(--sombra-2); }

/* O botão vazado não tem fundo próprio: quem decide se ele é legível é a
   superfície embaixo. Nem toda superfície escura do site usa a classe
   `.escuro` — a capa é escura pela foto e o `.resumo` pinta o próprio painel
   —, e nessas o vazado saía tinta sobre tinta, invisível. A lista abaixo é a
   de TODAS as superfícies escuras: superfície escura nova entra aqui. */
.escuro .btn--fantasma,
.capa .btn--fantasma,
.resumo .btn--fantasma { --btn-texto: var(--texto-claro); --btn-borda: rgba(247, 243, 236, 0.38); }
.escuro .btn--fantasma:hover,
.capa .btn--fantasma:hover,
.resumo .btn--fantasma:hover { --btn-fundo: var(--creme-100); --btn-texto: var(--tinta-900); }

.btn--escuro { --btn-fundo: var(--tinta-850); --btn-texto: var(--creme-100); }
.btn--escuro:hover { box-shadow: var(--sombra-3); }


.btn--whats { --btn-fundo: var(--whats); --btn-texto: #05270F; }
.btn--whats:hover { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.32); }

.btn--bloco { width: 100%; }
.btn--p { padding: 0.65rem 1.15rem; font-size: 0.875rem; }
.btn--g { padding: 1.1rem 2rem; font-size: 1rem; }

/* Link com seta que avança no hover */
.link-seta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 0.9375rem; color: var(--texto-forte);
  transition: color 0.25s ease;
}
.link-seta svg { width: 1.05em; height: 1.05em; transition: transform 0.35s var(--ease-entrada); }
.link-seta:hover { color: var(--ouro-500); }
.link-seta:hover svg { transform: translateX(5px); }
.escuro .link-seta { color: var(--texto-claro); }
.escuro .link-seta:hover { color: var(--ouro-300); }

/* Botão circular (setas de carrossel, fechar) */
.circulo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--borda-forte); background: var(--cartao);
  color: var(--texto-forte);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-entrada);
}
.circulo:hover { background: var(--tinta-850); color: var(--creme-100); border-color: var(--tinta-850); transform: scale(1.06); }
.circulo:disabled { opacity: 0.35; cursor: not-allowed; transform: none; background: var(--cartao); color: var(--texto-forte); }
.circulo svg { width: 18px; height: 18px; }
.escuro .circulo { background: transparent; border-color: var(--borda-clara); color: var(--texto-claro); }
.escuro .circulo:hover { background: var(--creme-100); color: var(--tinta-900); }

/* Selo sobre a foto do carro */
.selo {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.65rem; border-radius: var(--raio-pill);
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--tinta-850); color: var(--creme-100);
  backdrop-filter: blur(6px);
}
.selo--ouro { background: var(--ouro-400); color: var(--tinta-900); }
.selo--verde { background: var(--verde-500); color: #fff; }
.selo--claro { background: rgba(255, 255, 255, 0.92); color: var(--texto-forte); }

/* Etiqueta de dado (ano, km, câmbio) */
.tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.6rem; border-radius: var(--raio-p);
  background: var(--creme-200); color: var(--texto-medio);
  font-size: 0.75rem; font-weight: 600;
}
.escuro .tag { background: var(--tinta-700); color: var(--texto-claro-medio); }

/* ======================= 06. CAMPOS DE FORMULÁRIO ====================== */
.campo { display: grid; gap: 0.4rem; }
.campo__rotulo { font-size: 0.8125rem; font-weight: 700; color: var(--texto-medio); }
.escuro .campo__rotulo { color: var(--texto-claro-medio); }

.campo__ctrl {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  background: var(--cartao);
  color: var(--texto-forte);
  font-size: 0.9375rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.campo__ctrl::placeholder { color: var(--texto-suave); }
.campo__ctrl:focus {
  outline: none; border-color: var(--ouro-400);
  box-shadow: 0 0 0 3px rgba(201, 162, 77, 0.18);
}
.campo__ctrl:disabled { background: var(--creme-200); cursor: not-allowed; }
textarea.campo__ctrl { min-height: 118px; resize: vertical; line-height: 1.6; }

select.campo__ctrl {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7A85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
  cursor: pointer;
}

.escuro .campo__ctrl {
  background: var(--tinta-800); border-color: var(--borda-clara); color: var(--texto-claro);
}
.escuro .campo__ctrl::placeholder { color: var(--texto-claro-suave); }

.campo__erro { font-size: 0.75rem; font-weight: 600; color: var(--vermelho-500); }
.campo--invalido .campo__ctrl { border-color: var(--vermelho-500); }
.campo--invalido .campo__ctrl:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.16); }

.grade-campos { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-campos > .largo { grid-column: 1 / -1; }

/* caixa de consentimento LGPD */
.consentimento {
  display: flex; gap: 0.65rem; align-items: flex-start;
  font-size: 0.75rem; line-height: 1.5; color: var(--texto-suave);
}
.consentimento input { margin-top: 0.2rem; accent-color: var(--ouro-500); width: 16px; height: 16px; flex: none; }
.escuro .consentimento { color: var(--texto-claro-suave); }

/* aviso de retorno do formulário */
.aviso {
  display: none; gap: 0.6rem; align-items: flex-start;
  padding: 0.85rem 1rem; border-radius: var(--raio-p); font-size: 0.875rem; font-weight: 600;
}
.aviso.is-visivel { display: flex; }
.aviso--ok { background: var(--verde-100); color: #135437; }
.aviso--erro { background: var(--vermelho-100); color: #8C2318; }

/* ==================== 07. CABEÇALHO E NAVEGAÇÃO ======================== */
.cabecalho {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: var(--altura-cabecalho);
  display: flex; align-items: center;
  /* Aurevon: transparente até rolar, depois vidro escuro */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease-suave), backdrop-filter 0.5s var(--ease-suave),
              border-color 0.5s var(--ease-suave), height 0.4s var(--ease-suave);
}
.cabecalho.is-preso {
  background: rgba(8, 8, 10, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: rgba(201, 162, 77, 0.16);
  height: 66px;
}
/* Em páginas de fundo claro o cabeçalho já começa sólido */
.cabecalho--solido {
  background: rgba(8, 8, 10, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(201, 162, 77, 0.14);
}

.cabecalho__env {
  width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}

.marca { display: flex; align-items: center; flex: none; }
.marca img { height: 52px; width: auto; transition: height 0.4s var(--ease-suave); }
.cabecalho.is-preso .marca img { height: 44px; }

.nav { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.nav__link {
  position: relative; padding: 0.5rem 0.85rem; border-radius: var(--raio-p);
  font-size: 0.875rem; font-weight: 600; color: var(--texto-claro-medio);
  transition: color 0.25s ease;
}
.nav__link::after {
  content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.28rem;
  height: 1.5px; background: var(--ouro-400);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-entrada);
}
.nav__link:hover { color: var(--texto-claro); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ouro-300); }

.cabecalho__acoes { display: flex; align-items: center; gap: 0.75rem; flex: none; }

/* hambúrguer */
.hamburguer {
  display: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--borda-clara);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.hamburguer:hover { border-color: var(--ouro-400); }
.hamburguer span {
  display: block; width: 18px; height: 1.5px; background: var(--creme-100); border-radius: 2px;
  transition: transform 0.5s var(--ease-cortina), opacity 0.3s ease, width 0.4s var(--ease-cortina);
}
.hamburguer span:last-child { width: 12px; }
.hamburguer.is-aberto span:first-child { transform: translateY(3.25px) rotate(45deg); }
.hamburguer.is-aberto span:last-child { width: 18px; transform: translateY(-3.25px) rotate(-45deg); }

/* cortina de navegação (mobile) */
.cortina {
  position: fixed; inset: 0; z-index: 110;
  background: var(--tinta-900);
  padding: calc(var(--altura-cabecalho) + 2rem) var(--gutter) 2rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease-cortina), visibility 0.5s var(--ease-cortina);
}
.cortina.is-aberta { opacity: 1; visibility: visible; }
.cortina__nav { display: flex; flex-direction: column; gap: 0.15rem; }
.cortina__link {
  font-family: var(--fonte-display); font-size: clamp(2rem, 9vw, 2.9rem);
  line-height: 1.25; color: var(--texto-claro);
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s var(--ease-entrada), transform 0.6s var(--ease-entrada), color 0.25s ease;
}
.cortina.is-aberta .cortina__link { opacity: 1; transform: translateY(0); }
.cortina__link:hover { color: var(--ouro-300); }
.cortina__rodape { display: grid; gap: 1rem; }
.cortina__contato { display: grid; gap: 0.35rem; color: var(--texto-claro-medio); font-size: 0.9375rem; }

/* ========================= 08. CAPA DA HOME ============================ */
/* A capa é escura: a foto de noite ocupa a seção inteira e o texto vive em
   cima dela, do lado esquerdo, onde só há céu e cidade fora de foco.

   O <img> é elemento e não background-image por dois motivos: aceita
   `fetchpriority="high"` (é a maior imagem acima da dobra) e reserva a
   proporção pelo width/height, então nada pula quando ela chega. */
.capa {
  position: relative; isolation: isolate;
  background: var(--tinta-900);      /* pinta enquanto a foto não chegou */
  color: var(--texto-claro);
}

.capa__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  /* o carro está no terço direito; o corte segura ele lá e deixa a metade
     esquerda — céu, cidade, guard-rail — livre para o texto */
  object-position: 64% 58%;
}

/* O véu de legibilidade. A foto já é escura, mas "escura" não é "uniforme":
   os postes da cidade e o reflexo no asfalto passam de 100 de luminância bem
   onde ficam o parágrafo e os botões. Este véu achata a variação para o
   texto ter contraste previsível, e abre antes de chegar ao carro para não
   apagar o assunto da foto. */
.capa__veu {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(96deg,
      rgba(6, 6, 8, 0.92) 0%,
      rgba(6, 6, 8, 0.87) 26%,
      rgba(6, 6, 8, 0.68) 44%,
      rgba(6, 6, 8, 0.30) 60%,
      rgba(6, 6, 8, 0) 74%),
    /* escurece o pé, onde o asfalto molhado reflete a luz da cidade */
    linear-gradient(0deg, rgba(6, 6, 8, 0.55) 0%, transparent 30%);
}

.capa__env {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-content: center;
  min-height: min(88vh, 720px);
  padding-top: calc(var(--altura-cabecalho) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* O texto ocupa pouco mais de metade: o resto é a foto, que precisa
   respirar para o carro não virar recorte apertado. */
/* `minmax(0, 1fr)` e não o `auto` implícito: a coluna de um grid `auto`
   cresce até o min-content do item mais teimoso, e a linha de botões é
   `nowrap` — sem isto ela estica a coluna inteira e o título vaza da tela
   junto, num overflow que só aparece lá embaixo, em 320px. */
.capa__texto {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.15rem; justify-items: start; max-width: 34rem;
}

/* Sobre o escuro o dourado da marca volta ao tom claro: --ouro-300 dá 7,4:1
   contra o véu, e é ele que aparece nas outras seções escuras do site. */
.capa .sobretitulo { color: var(--ouro-300); }

.capa__titulo {
  font-size: clamp(2.5rem, 5.4vw, 4.2rem);
  line-height: 1.03; letter-spacing: -0.04em; font-weight: 800;
  color: var(--texto-claro);
  max-width: 13ch;
}
/* O secundário do site é branco a 68%. Sobre esta foto isso mede 4,39:1 no
   pior recorte (1201px) — abaixo dos 4,5 do WCAG para texto corrido. Na capa
   sobe para 82%: 5,55 no pior caso, e ainda lê como secundário ao lado do
   branco cheio do título. */
.capa__apoio {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(247, 243, 236, 0.82); max-width: 40ch;
}
.capa__acoes { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.6rem; }

/* ---- as três provas, no pé da capa ----
   Ficam dentro da capa e não numa faixa abaixo dela: são a resposta à
   pergunta que a pessoa faz enquanto lê o título, e chegar a elas não pode
   custar uma rolagem. */
.capa__provas {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.prova { display: flex; align-items: center; gap: 0.85rem; }
/* O filete que separa uma prova da outra nasce no ::before de cada uma,
   menos da primeira — assim ele acompanha a quebra de linha sozinho. */
.prova + .prova::before {
  content: ''; align-self: stretch; width: 1px;
  margin-right: clamp(0.25rem, 2vw, 1.25rem);
  background: rgba(247, 243, 236, 0.18);
}
.prova__icone { flex: none; color: var(--ouro-400); }
.prova__icone svg { width: 30px; height: 30px; stroke-width: 1.35; }
.prova__texto {
  font-size: 0.9375rem; line-height: 1.35; color: rgba(247, 243, 236, 0.82);
}
.prova__texto b { display: block; font-weight: 600; color: var(--texto-claro); }

/* ---- a capa no tablet e no celular ----
   A foto é 16:9. Conforme a tela estreita, o `cover` amplia e o carro sobe
   para dentro da coluna de texto — some o fundo escuro liso atrás das
   letras e o contraste vira loteria. Medido no pixel do fundo real, já com o
   véu lateral aplicado: 5,67:1 em 1280px, mas 2,71 em 1100 e 2,90 em 901 —
   os faróis e as luzes da cidade sobem para cima do parágrafo, e nada disso
   aparece olhando só no monitor grande.

   Abaixo de 1200px o véu fecha: deixa de ser lateral e cobre a foto inteira,
   com peso suficiente para o texto ler em qualquer recorte. Sobe para 8,1:1
   e para de depender de onde o carro caiu. A foto continua visível por trás,
   mais discreta. */
@media (max-width: 1200px) {
  .capa__foto { object-position: 68% 56%; }
  /* Dois véus somados, e não um só: o vertical segura o topo (título) e o pé
     (as provas), o diagonal segura a coluna de texto à esquerda. No meio da
     direita os dois abrem — é onde fica o carro, que precisa aparecer. Um véu
     chapado uniforme resolveria o contraste e apagaria a foto junto. */
  .capa__veu {
    background:
      linear-gradient(180deg, rgba(6, 6, 8, 0.82) 0%, rgba(6, 6, 8, 0.46) 48%,
                              rgba(6, 6, 8, 0.62) 82%, rgba(6, 6, 8, 0.70) 100%),
      linear-gradient(100deg, rgba(6, 6, 8, 0.82) 0%, rgba(6, 6, 8, 0.44) 55%,
                              rgba(6, 6, 8, 0) 88%);
  }
  /* `start` e não `center`: centralizado, o conteúdo ficava com uma faixa
     vazia em cima e outra embaixo, e a capa parecia oca. Encostando no
     cabeçalho ela fecha logo abaixo das provas, como na referência.

     A altura menor também melhora o recorte: a foto é 16:9 e o `cover` num
     quadro alto amplia até sobrar só o para-choque. Mais baixa, cabe o carro. */
  /* Coluna, e não grade: a capa fica com o texto ancorado em cima e o par
     botões + provas ancorado embaixo, com a foto respirando no meio. É o
     `margin-top: auto` do `.capa__acoes` que empurra os dois para o pé — e
     margem automática só absorve sobra em flex, por isso a troca.

     O `display: contents` do `.capa__texto` é o que torna isso possível: os
     botões moram DENTRO do bloco de texto no HTML, e sem dissolver essa caixa
     eles desceriam levando o título junto. Dissolvida, cada peça vira item da
     coluna e pode ser ancorada sozinha. O espaçamento passa a ser o `gap`
     daqui, já que a caixa que o tinha deixou de existir. */
  .capa__env {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0.65rem;
    min-height: min(72vh, 540px);
  }
  .capa__texto { display: contents; }
  .capa__acoes { margin-top: auto; padding-top: 1.5rem; }

  /* Largura de leitura, e não 100%: entre 768 e 1200px a coluna é larga o
     bastante para o parágrafo atravessar a foto e ir parar em cima do carro
     e do farol. Medido lá: 3,74:1 em 1024px e 3,97 em 900 — reprovado, numa
     faixa que eu vinha pulando por medir só celular e desktop. Contido em
     42ch ele fica no lado escuro e sobe para 6:1, e de quebra a linha para
     de ter 90 caracteres. */
  .capa__titulo { max-width: 16ch; }
  .capa__apoio { max-width: 42ch; }

  /* As provas continuam lado a lado, como na referência do celular — mas em
     grade de três colunas iguais, não em flex: assim o rótulo mais longo não
     rouba largura dos outros dois e as três colunas ficam do mesmo tamanho.
     O filete vertical sai: em coluna estreita ele só aperta mais. */
  .capa__provas {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem; align-items: start;
  }
  .prova + .prova::before { display: none; }
  .prova { gap: 0.5rem; align-items: flex-start; }
}

@media (max-width: 640px) {
  /* O texto encolheu para a foto aparecer, mas a capa NÃO encolhe junto: se
     ela seguisse a altura do conteúdo, o espaço liberado sumiria e a foto
     apareceria menos, não mais. Com o mínimo aqui, o que o texto devolve
     vira foto — e o estoque continua onde estava, logo abaixo. */
  .capa__env {
    min-height: min(76vh, 560px);
    padding-top: calc(var(--altura-cabecalho) + 1.35rem);
    padding-bottom: 1.75rem;
  }
  .capa__titulo { font-size: clamp(1.6rem, 7.2vw, 2rem); line-height: 1.1; }
  .capa__apoio { font-size: 0.875rem; line-height: 1.5; max-width: 34ch; }
  /* o sobretítulo cabia em duas linhas; menor e mais junto, fecha em uma */
  .capa .sobretitulo { font-size: 0.6875rem; letter-spacing: 0.16em; }

  /* Os dois botões ficam lado a lado, como no desktop, mas bem menores: no
     celular eles estavam com o corpo do desktop e dominavam a capa inteira.
     Ficam em 44px de altura — o piso da área de toque, não menos que isso,
     por menores que pareçam na referência.

     `nowrap` é obrigatório: sem ele o "Falar no WhatsApp" quebra em duas
     linhas antes de o flex decidir encolher, e os dois botões saem com
     alturas diferentes. */
  .capa__acoes {
    width: auto; flex-wrap: nowrap;
    align-items: center;
    gap: 0.55rem;
    /* `auto`, e não um número: é ele que ancora botões + provas no pé da
       capa. Um valor fixo aqui ganharia da regra de 1200px, por vir depois
       no arquivo, e o bloco voltaria a colar no parágrafo. */
    margin-top: auto; padding-top: 1.5rem;
  }
  .capa__acoes .btn {
    flex: 0 1 auto; min-width: 0; white-space: nowrap;
    /* A largura vem do corpo da letra, não do respiro: 12px encolhe os dois
       botões juntos e mantém a proporção entre eles. O respiro vertical sobe
       para segurar os 44px de área de toque mesmo com a letra menor. */
    padding: 0.7rem 0.9rem;
    /* O piso de toque é regra, não arredondamento: com o respiro sozinho a
       altura fechava em 43,4px e só PARECIA 44 ao arredondar. */
    min-height: 44px;
    gap: 0.4rem;
    font-size: 0.75rem; letter-spacing: 0.005em;
  }
  .capa__acoes .btn svg { width: 1em; height: 1em; }

  /* Três colunas numa tela de 335px dão ~105px cada: o texto encolhe junto,
     senão "100% verificada" quebra em três linhas e desalinha as colunas. */
  /* colada nos botões: os dois viraram um bloco só, ancorado embaixo */
  .capa__provas { margin-top: 0.85rem; gap: 0.45rem; }
  .prova { gap: 0.4rem; }
  .prova__icone svg { width: 19px; height: 19px; }
  .prova__texto { font-size: 0.6875rem; line-height: 1.3; }
  .prova__texto b { font-size: 0.75rem; }
}

/* Telas de 360px e menos — Galaxy A, iPhone SE. Aqui os dois botões lado a
   lado só cabem cedendo mais respiro lateral; a altura fica em 48px. */
@media (max-width: 365px) {
  .capa__acoes { gap: 0.4rem; }
  .capa__acoes .btn { padding: 0.7rem 0.65rem; gap: 0.35rem; font-size: 0.78125rem; }
}

/* ======================= 09. BLOCOS DA HOME ============================ */

/* barra de confiança — encosta na capa */
.garantias {
  position: relative; z-index: 2;
  margin-top: -3.5rem;
  background: var(--tinta-850);
  border: 1px solid rgba(201, 162, 77, 0.2);
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--sombra-3);
}
.garantias__grade {
  display: grid; gap: 1.5rem 1rem;
  /* auto-fit e nao um numero fixo: "procedencia" e "atendimento" mudaram-se
     para dentro da capa, e a faixa tem que fechar bem com quantos cards
     sobrarem — hoje dois, amanha os quatro de novo. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.garantia { display: flex; gap: 0.9rem; align-items: flex-start; }
.garantia__icone {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(201, 162, 77, 0.12); color: var(--ouro-300);
  border: 1px solid rgba(201, 162, 77, 0.22);
}
.garantia__icone svg { width: 20px; height: 20px; }
.garantia__texto { font-size: 0.875rem; line-height: 1.45; color: var(--texto-claro-medio); }
.garantia__texto b { display: block; color: var(--texto-claro); font-weight: 700; margin-bottom: 0.1rem; }

/* três caminhos: comprar / trocar / vender */
.caminhos { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.caminho {
  position: relative; overflow: hidden;
  display: grid; gap: 0.5rem; align-content: start;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--raio-g);
  background: var(--tinta-850); color: var(--texto-claro);
  border: 1px solid rgba(201, 162, 77, 0.16);
  min-height: 300px;
  transition: transform 0.5s var(--ease-entrada), box-shadow 0.5s var(--ease-entrada);
}
.caminho::after {
  /* brilho que segue o cursor (--mx/--my vêm do motion.js) */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(22rem 22rem at var(--mx, 50%) var(--my, 0%), rgba(201, 162, 77, 0.18), transparent 62%);
  opacity: 0; transition: opacity 0.4s ease;
}
.caminho:hover { transform: translateY(-6px); box-shadow: var(--sombra-3); }
.caminho:hover::after { opacity: 1; }
.caminho--destaque {
  background: linear-gradient(150deg, var(--ouro-400), var(--ouro-500) 62%, var(--ouro-600));
  color: var(--tinta-900); border-color: transparent;
}
.caminho__icone { width: 44px; height: 44px; color: var(--ouro-300); margin-bottom: 0.85rem; }
.caminho--destaque .caminho__icone { color: var(--tinta-900); }
.caminho__icone svg { width: 100%; height: 100%; }
.caminho__acao { font-size: 0.9375rem; font-weight: 600; opacity: 0.7; }
.caminho__titulo { font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ouro-300); }
.caminho--destaque .caminho__titulo { color: var(--tinta-900); }
.caminho__nota { font-size: 0.9375rem; opacity: 0.7; }
.caminho__seta {
  margin-top: auto; padding-top: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
}
.caminho__seta span {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--ouro-400); color: var(--tinta-900);
  transition: transform 0.4s var(--ease-entrada);
}
.caminho--destaque .caminho__seta span { background: var(--tinta-900); color: var(--ouro-300); }
.caminho:hover .caminho__seta span { transform: translateX(5px); }
.caminho__seta svg { width: 18px; height: 18px; }

/* busca por perfil */
.perfis { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.perfil {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.3rem; border-radius: var(--raio-pill);
  border: 1px solid var(--borda-forte); background: var(--cartao);
  font-size: 0.9375rem; font-weight: 600; color: var(--texto-forte);
  transition: transform 0.35s var(--ease-entrada), border-color 0.3s ease,
              background-color 0.3s ease, color 0.3s ease, box-shadow 0.35s var(--ease-entrada);
}
.perfil svg { width: 19px; height: 19px; color: var(--ouro-500); transition: color 0.3s ease; }
.perfil:hover {
  transform: translateY(-3px); border-color: var(--ouro-400);
  background: var(--tinta-850); color: var(--creme-100); box-shadow: var(--sombra-2);
}
.perfil:hover svg { color: var(--ouro-300); }

/* trilho horizontal de destaques */
.trilho { position: relative; }
.trilho__pista {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 1fr);
  gap: 1.25rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* respiro para a sombra dos cards não ser cortada */
  padding: 0.5rem 0.5rem 1.25rem;
  margin: -0.5rem -0.5rem -1.25rem;
}
.trilho__pista::-webkit-scrollbar { display: none; }
.trilho__pista > * { scroll-snap-align: start; }
.trilho__setas { display: flex; gap: 0.5rem; }

.lista-check { display: grid; gap: 0.7rem; margin-top: 0.35rem; }
/* A cor padrão é a do fundo CLARO. A lista nasceu dentro de um bloco escuro e
   ficou com o cinza-claro fixo aqui; como a regra é do `li`, ela ganhava do
   `color` herdado do `ul` e as três listas do site — procedência na ficha do
   carro, documentos no financiamento, etapas em vender — saíam creme sobre
   creme: os ícones apareciam e o texto não. Sobre escuro, quem troca é a
   regra de `.escuro` abaixo. */
.lista-check li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9375rem; color: var(--texto-medio); }
.escuro .lista-check li { color: var(--texto-claro-medio); }
.lista-check svg { width: 19px; height: 19px; flex: none; color: var(--ouro-400); margin-top: 0.15rem; }

/* entregas */
.entregas { display: grid; gap: 1rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Retrato, não paisagem. Foto de entrega é tirada no celular, em pé, com duas
   pessoas de corpo inteiro — num quadro 4/3 o `cover` corta exatamente a faixa
   onde estão os rostos, que é o conteúdo inteiro da foto. Em 3/4 as pessoas
   cabem, e o `object-position` puxa o recorte para cima porque sobra chão. */
.entrega {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--raio);
  overflow: hidden; background: var(--creme-200);
  display: grid; place-items: center; text-align: center;
  border: 1px solid var(--borda);
  transition: transform 0.5s var(--ease-entrada), box-shadow 0.5s var(--ease-entrada);
}
/* só o espaço reservado continua tracejado — foto de verdade não é lacuna */
.entrega:has(.entrega__vazio) { border-style: dashed; border-color: var(--borda-forte); }
.entrega:hover { transform: translateY(-5px) scale(1.015); box-shadow: var(--sombra-2); }
.entrega img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.entrega__vazio { padding: 1rem; font-size: 0.75rem; color: var(--texto-suave); display: grid; gap: 0.5rem; justify-items: center; }
.entrega__vazio svg { width: 24px; height: 24px; color: var(--ouro-400); }

/* ---- convite: o que ocupa o lugar da parede de entregas enquanto ela não
   existe. Precisa ler como peça desenhada, não como buraco: por isso vira o
   único bloco escuro da faixa clara, com o arco do logo em marca d'água. ---- */
.convite {
  display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: var(--raio-g);
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(201, 162, 77, 0.16) 0%, transparent 58%),
    var(--tinta-900);
  border: 1px solid var(--borda-clara);
  color: var(--texto-claro);
  box-shadow: var(--sombra-2);
  overflow: hidden;
  position: relative;
}
/* o brilho que segue o cursor (data-brilho) — mesmo recurso dos cards */
.convite::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 50%),
              rgba(201, 162, 77, 0.14), transparent 70%);
  opacity: 0; transition: opacity 0.35s var(--ease-suave);
}
.convite:hover::after { opacity: 1; }

.convite__marca {
  position: relative; display: grid; place-items: center;
  width: clamp(64px, 8vw, 88px); aspect-ratio: 1;
}
.convite__marca svg:first-child {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: var(--ouro-400); stroke-width: 2.4; stroke-linecap: round;
  opacity: 0.5;
}
.convite__marca i { display: grid; place-items: center; }
.convite__marca i svg { width: 30px; height: 30px; color: var(--ouro-300); }

.convite__texto { display: grid; gap: 0.5rem; }
.convite__texto h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em;
}
.convite__texto p { color: var(--texto-claro-medio); font-size: 0.9375rem; max-width: 58ch; }
.convite__texto b { color: var(--ouro-300); font-weight: 700; }
.convite > .btn { position: relative; z-index: 1; white-space: nowrap; }

/* loja: mapa + horário */
.loja { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.loja__mapa {
  border-radius: var(--raio-g); overflow: hidden; border: 1px solid var(--borda);
  background: var(--creme-200); min-height: 340px; box-shadow: var(--sombra-1);
}
.loja__mapa iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.horarios { display: grid; gap: 0.15rem; margin-top: 0.5rem; }
.horario {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--borda);
  font-size: 0.9375rem;
}
.horario:last-child { border-bottom: 0; }
.horario b { font-weight: 600; }
.horario span { color: var(--texto-medio); font-variant-numeric: tabular-nums; }
.horario--fechado span { color: var(--texto-suave); }

.contatos { display: grid; gap: 0.85rem; margin-top: 1.5rem; }
.contato { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 0.9375rem; }
/* `@jfrealizandosonhos` e o endereço são palavras longas sem espaço onde
   quebrar. Item de flex tem piso `min-width: auto`, então em coluna estreita
   ele não encolhe: empurra a linha inteira para fora da tela. */
.contato > span { min-width: 0; overflow-wrap: anywhere; }
.contato svg { width: 20px; height: 20px; flex: none; color: var(--ouro-500); margin-top: 0.15rem; }
.contato b { display: block; font-weight: 700; }
.contato span { color: var(--texto-medio); }
/* O bloco da loja mora numa `.seccao.escuro` na home e no sobre, e o cinza
   acima é token de fundo claro: dava 2,2:1 sobre a tinta. */
.escuro .contato span { color: var(--texto-claro-medio); }

/* FAQ */
.faq { display: grid; gap: 0.5rem; }
.faq__item { border-bottom: 1px solid var(--borda); }
.faq__botao {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0; text-align: left;
  font-size: clamp(1rem, 1.6vw, 1.125rem); font-weight: 700; letter-spacing: -0.015em;
  color: var(--texto-forte); transition: color 0.25s ease;
}
.faq__botao:hover { color: var(--ouro-500); }
.faq__mais { flex: none; width: 22px; height: 22px; position: relative; }
.faq__mais::before, .faq__mais::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--ouro-500);
  transform: translate(-50%, -50%); transition: transform 0.4s var(--ease-entrada), opacity 0.3s ease;
}
.faq__mais::before { width: 14px; height: 1.5px; }
.faq__mais::after { width: 1.5px; height: 14px; }
.faq__item.is-aberto .faq__mais::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-entrada); }
.faq__item.is-aberto .faq__corpo { grid-template-rows: 1fr; }
.faq__corpo > div { overflow: hidden; }
.faq__corpo p { padding-bottom: 1.35rem; color: var(--texto-medio); max-width: 74ch; }

/* números da loja (placeholders até a JF confirmar) */
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.numero {
  padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--raio);
  border: 1px solid rgba(201, 162, 77, 0.2); background: rgba(201, 162, 77, 0.05);
  display: grid; gap: 0.3rem;
}
.numero__valor {
  font-size: clamp(2.1rem, 4.5vw, 3.1rem); font-weight: 800; letter-spacing: -0.04em;
  color: var(--ouro-400); line-height: 1; font-variant-numeric: tabular-nums;
}
.numero__rotulo { font-size: 0.875rem; color: var(--texto-claro-medio); }

/* ======================= 10. CARD DE VEÍCULO =========================== */
/* O cartão pinta o próprio fundo, então tem que pintar a própria cor de texto
   também: em `.seccao.escuro` — a vitrine do vender.html — o nome e o preço
   herdavam o creme da seção e sumiam sobre o branco do cartão. Fundo próprio
   e cor herdada é uma combinação que só funciona por sorte. */
.carro {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--cartao); color: var(--texto-forte); border-radius: var(--raio);
  border: 1px solid var(--borda);
  overflow: hidden;
  transition: transform 0.45s var(--ease-entrada), box-shadow 0.45s var(--ease-entrada),
              border-color 0.35s ease;
}
.carro:hover { transform: translateY(-5px); box-shadow: var(--sombra-3); border-color: rgba(201, 162, 77, 0.4); }

.carro__foto {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--creme-200);
  flex: none;
}
.carro__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease-entrada), opacity 0.35s ease;
}
.carro:hover .carro__foto img { transform: scale(1.05); }

/* carrossel dentro do card, como na Webmotors */
.carro__slides { position: absolute; inset: 0; }
.carro__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease; }
.carro__slide.is-ativa { opacity: 1; }
.carro__pontos {
  position: absolute; left: 50%; bottom: 0.6rem; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 4px 7px; border-radius: var(--raio-pill);
  background: rgba(8, 8, 10, 0.45); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.3s ease;
}
.carro:hover .carro__pontos, .carro:focus-within .carro__pontos { opacity: 1; }
.carro__ponto { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.45); transition: background-color 0.25s ease, width 0.25s ease; }
.carro__ponto.is-ativa { background: var(--ouro-300); width: 14px; }
/* zonas invisíveis de avanço no hover */
.carro__zonas { position: absolute; inset: 0; display: flex; }
.carro__zona { flex: 1; }

.carro__selos {
  position: absolute; left: 0.7rem; top: 0.7rem; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 0.35rem; max-width: calc(100% - 4.4rem);
}
.carro__favorito {
  position: absolute; right: 0.7rem; top: 0.7rem; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92); color: var(--texto-medio);
  transition: color 0.25s ease, transform 0.3s var(--ease-entrada), background-color 0.25s ease;
}
.carro__favorito:hover { transform: scale(1.1); color: var(--vermelho-500); }
.carro__favorito svg { width: 17px; height: 17px; }
.carro__favorito[aria-pressed="true"] { color: var(--vermelho-500); }
.carro__favorito[aria-pressed="true"] svg { fill: currentColor; }

.carro__corpo { padding: 1rem 1.1rem 1.15rem; display: grid; gap: 0.55rem; flex: 1; align-content: start; }
.carro__marca { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); }
.carro__nome {
  font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.carro__versao {
  font-size: 0.8125rem; color: var(--texto-medio); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.carro__specs {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.65rem;
  font-size: 0.8125rem; color: var(--texto-medio); font-variant-numeric: tabular-nums;
}
.carro__specs li { display: flex; align-items: center; gap: 0.65rem; }
.carro__specs li + li::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--borda-forte); }

.carro__preco-linha { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.15rem; }
.carro__preco { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.carro__fipe { font-size: 0.75rem; font-weight: 700; color: var(--verde-500); }
.carro__parcela { font-size: 0.75rem; color: var(--texto-suave); }
.carro__parcela b { color: var(--texto-medio); font-weight: 700; }

.carro__pe { padding: 0 1.1rem 1.1rem; display: grid; gap: 0.5rem; }
.carro__local { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--texto-suave); }
.carro__local svg { width: 13px; height: 13px; }

/* link que cobre o card inteiro sem engolir os botões */
.carro__capa { position: absolute; inset: 0; z-index: 1; }
.carro__pe .btn, .carro__favorito, .carro__zonas { position: relative; z-index: 2; }

/* placeholder quando a loja ainda não subiu a foto */
.sem-foto {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(155deg, var(--tinta-800), var(--tinta-850) 60%, #000);
}
.sem-foto svg { width: 66%; max-width: 230px; height: auto; opacity: 0.9; }
.sem-foto__nome {
  position: absolute; left: 0; right: 0; bottom: 0.9rem; text-align: center;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(201, 162, 77, 0.6);
}

/* card em modo lista (alternância grade/lista do estoque) */
.resultados--lista .carro { flex-direction: row; }
.resultados--lista .carro__foto { width: 300px; aspect-ratio: 4 / 3; }
.resultados--lista .carro__corpo { flex: 1; padding: 1.25rem 1.5rem; }
.resultados--lista .carro__pe {
  padding: 1.25rem 1.5rem 1.25rem 0; align-content: center; width: 220px; flex: none;
  border-left: 1px solid var(--borda); padding-left: 1.5rem; margin: 1.25rem 0;
}

/* ===================== 11. ESTOQUE (padrão marketplace) ================= */
.pagina { padding-top: var(--altura-cabecalho); }

/* faixa superior escura com título e busca */
.capa-pagina {
  background: var(--tinta-850); color: var(--texto-claro);
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
  position: relative; overflow: hidden;
}
.capa-pagina::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 100% at 80% 0%, rgba(201, 162, 77, 0.16), transparent 60%);
  pointer-events: none;
}
.capa-pagina > * { position: relative; }
.capa-pagina h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }

.migalhas { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.8125rem; color: var(--texto-claro-suave); margin-bottom: 0.9rem; }
.migalhas a:hover { color: var(--ouro-300); }
.migalhas li + li::before { content: '/'; margin-right: 0.4rem; opacity: 0.5; }
.migalhas li { display: flex; gap: 0.4rem; }

/* busca livre */
.busca { display: flex; gap: 0.6rem; margin-top: 1.5rem; max-width: 620px; }
.busca__campo { position: relative; flex: 1; }
.busca__campo svg {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--texto-claro-suave); pointer-events: none;
}
.busca__input {
  width: 100%; padding: 0.95rem 1rem 0.95rem 2.9rem;
  border-radius: var(--raio-pill); border: 1px solid var(--borda-clara);
  background: rgba(255, 255, 255, 0.06); color: var(--texto-claro); font-size: 0.9375rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.busca__input::placeholder { color: var(--texto-claro-suave); }
.busca__input:focus { outline: none; border-color: var(--ouro-400); background: rgba(255, 255, 255, 0.1); }

/* corpo: filtros + resultados */
.estoque {
  display: grid; grid-template-columns: 288px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.75rem, 4vw, 2.75rem) var(--seccao-y);
}

/* --- coluna de filtros --- */
.filtros {
  position: sticky; top: calc(var(--altura-cabecalho) + 1rem);
  max-height: calc(100svh - var(--altura-cabecalho) - 2rem);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 0.35rem 1.15rem;
  scrollbar-width: thin;
}
.filtros__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0 0.85rem; border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; background: var(--cartao); z-index: 2;
}
.filtros__titulo { font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.02em; }
.filtros__limpar { font-size: 0.8125rem; font-weight: 700; color: var(--ouro-600); }
.filtros__limpar:hover { text-decoration: underline; }

.grupo { border-bottom: 1px solid var(--borda); }
.grupo:last-child { border-bottom: 0; }
.grupo__botao {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 0; font-size: 0.875rem; font-weight: 700; text-align: left;
}
.grupo__botao svg { width: 16px; height: 16px; color: var(--texto-suave); transition: transform 0.35s var(--ease-entrada); }
.grupo.is-aberto .grupo__botao svg { transform: rotate(180deg); }
.grupo__corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-entrada); }
.grupo.is-aberto .grupo__corpo { grid-template-rows: 1fr; }
.grupo__corpo > div { overflow: hidden; }
.grupo__lista { display: grid; gap: 0.1rem; padding-bottom: 0.95rem; max-height: 240px; overflow-y: auto; }

.opcao {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.35rem; border-radius: var(--raio-p);
  font-size: 0.875rem; cursor: pointer;
  transition: background-color 0.2s ease;
}
.opcao:hover { background: var(--creme-100); }
.opcao input { width: 16px; height: 16px; accent-color: var(--ouro-500); flex: none; cursor: pointer; }
.opcao__nome { flex: 1; }
.opcao__conta { font-size: 0.75rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.opcao:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }

/* faixa de preço / km / ano */
.faixa { display: grid; gap: 0.75rem; padding-bottom: 1rem; }
.faixa__campos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; }
.faixa__campos span { color: var(--texto-suave); font-size: 0.8125rem; }
.faixa__input {
  width: 100%; padding: 0.55rem 0.65rem; border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p); font-size: 0.8125rem; background: var(--cartao);
  font-variant-numeric: tabular-nums;
}
.faixa__input:focus { outline: none; border-color: var(--ouro-400); box-shadow: 0 0 0 3px rgba(201,162,77,0.15); }

/* --- barra de resultados --- */
.resultados__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.15rem;
}
.resultados__conta { font-size: 0.9375rem; }
.resultados__conta b { font-weight: 800; font-variant-numeric: tabular-nums; }
.resultados__ferramentas { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }

.ordenar {
  padding: 0.6rem 2.3rem 0.6rem 0.85rem; border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte); background: var(--cartao);
  font-size: 0.875rem; font-weight: 600; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7A85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 0.95rem;
}
.ordenar:focus { outline: none; border-color: var(--ouro-400); }

.visao { display: flex; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); overflow: hidden; }
.visao button {
  display: grid; place-items: center; width: 38px; height: 38px;
  color: var(--texto-suave); transition: background-color 0.25s ease, color 0.25s ease;
}
.visao button svg { width: 17px; height: 17px; }
.visao button[aria-pressed="true"] { background: var(--tinta-850); color: var(--creme-100); }

/* chips dos filtros aplicados */
.aplicados { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.15rem; }
.aplicados:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.55rem 0.4rem 0.8rem; border-radius: var(--raio-pill);
  background: var(--tinta-850); color: var(--creme-100);
  font-size: 0.8125rem; font-weight: 600;
}
.chip button {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.14); color: inherit;
  transition: background-color 0.2s ease;
}
.chip button:hover { background: var(--ouro-400); color: var(--tinta-900); }
.chip button svg { width: 10px; height: 10px; }
.chip--limpar { background: transparent; color: var(--ouro-600); border: 1px dashed var(--borda-forte); padding: 0.4rem 0.8rem; }
.chip--limpar:hover { border-color: var(--ouro-400); }

/* grade de resultados */
.resultados__grade { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resultados--lista .resultados__grade { grid-template-columns: 1fr; }

/* esqueleto de carregamento */
.esqueleto {
  border-radius: var(--raio); border: 1px solid var(--borda); overflow: hidden; background: var(--cartao);
}
.esqueleto__foto { aspect-ratio: 4 / 3; }
.esqueleto__linha { height: 12px; border-radius: 4px; margin: 0.75rem 1.1rem; }
.esqueleto__foto, .esqueleto__linha {
  background: linear-gradient(90deg, var(--creme-200) 25%, var(--creme-300) 50%, var(--creme-200) 75%);
  background-size: 200% 100%; animation: brilho 1.4s linear infinite;
}
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* estado vazio */
.vazio {
  grid-column: 1 / -1; text-align: center; padding: clamp(3rem, 8vw, 5rem) 1.5rem;
  border: 1px dashed var(--borda-forte); border-radius: var(--raio-g); background: var(--cartao);
  display: grid; gap: 1rem; justify-items: center;
}
.vazio svg { width: 46px; height: 46px; color: var(--ouro-400); }
.vazio h3 { font-size: 1.25rem; }
.vazio p { color: var(--texto-medio); max-width: 42ch; }

/* paginação */
.paginacao { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 2.5rem; flex-wrap: wrap; }
.paginacao button {
  min-width: 40px; height: 40px; padding: 0 0.6rem; border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte); background: var(--cartao);
  font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.paginacao button:hover:not(:disabled):not([aria-current="page"]) { border-color: var(--ouro-400); color: var(--ouro-600); }
.paginacao button[aria-current="page"] { background: var(--tinta-850); color: var(--creme-100); border-color: var(--tinta-850); }
.paginacao button:disabled { opacity: 0.35; cursor: not-allowed; }
.paginacao__reticencias { color: var(--texto-suave); padding: 0 0.35rem; }

/* botão que abre os filtros no mobile */
.abrir-filtros { display: none; }
.filtros__fechar { display: none; }

/* ==================== 12. VEÍCULO (página de detalhe) ================== */
.veiculo { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }

.galeria { display: grid; gap: 0.75rem; }
/* A foto grande usa `contain` sobre fundo escuro, não `cover`.
   Foto de carro chega em orientação mista: a volta externa vem deitada, e
   detalhe (chave, pneu, console) quase sempre vem em pé, do celular. Com
   `cover` num quadro 16/10 a foto em pé perde metade da altura — some
   justamente o que ela ia provar. Com `contain` a foto aparece inteira e a
   sobra vira moldura, que é como uma lightbox se comporta. As miniaturas
   seguem em `cover`: ali o corte é só para dar ritmo à fileira. */
.galeria__palco {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--raio);
  overflow: hidden; background: var(--tinta-900); border: 1px solid var(--borda);
}
.galeria__palco img { width: 100%; height: 100%; object-fit: contain; }
.galeria__foto { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s var(--ease-suave); }
.galeria__foto.is-ativa { opacity: 1; }
.galeria__seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: rgba(255,255,255,0.92);
}
.galeria__seta--ant { left: 0.85rem; }
.galeria__seta--prox { right: 0.85rem; }
.galeria__conta {
  position: absolute; right: 0.85rem; bottom: 0.85rem; z-index: 2;
  padding: 0.3rem 0.7rem; border-radius: var(--raio-pill);
  background: rgba(8,8,10,0.6); color: var(--creme-100);
  font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
}
.galeria__tiras { display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 0.6rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: 0.25rem; }
.galeria__tira {
  aspect-ratio: 4 / 3; border-radius: var(--raio-p); overflow: hidden;
  border: 2px solid transparent; background: var(--creme-200);
  transition: border-color 0.25s ease, opacity 0.25s ease; opacity: 0.6;
}
.galeria__tira.is-ativa { border-color: var(--ouro-400); opacity: 1; }
.galeria__tira:hover { opacity: 1; }
.galeria__tira img { width: 100%; height: 100%; object-fit: cover; }

/* ---- vídeo na galeria ----
   O vídeo entra como mais um item da fila. A miniatura reaproveita a foto de
   capa como pôster e ganha o distintivo de play, que é o que diz "aqui tem
   filme" sem precisar de legenda. */
.galeria__video {
  width: 100%; height: 100%; object-fit: contain;
  background: #000; display: block;
  /* O texto dentro de um <video> é o recado de quando o vídeo NÃO toca. Sem
     cor própria ele herdava a tinta escura e ficava preto sobre o preto do
     fundo: 1,1:1 — invisível justamente na hora em que precisa ser lido. */
  color: var(--texto-claro); font-size: 0.9375rem; padding: 1rem; text-align: center;
}
.galeria__video a { color: var(--ouro-300); text-decoration: underline; }
.galeria__tira--video { position: relative; }
.galeria__tira--video::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(8, 8, 10, 0.42);
}
.galeria__play {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  color: var(--creme-100);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}
.galeria__play svg { width: 26px; height: 26px; }
.galeria__tira--video.is-ativa::after { background: rgba(8, 8, 10, 0.22); }

.galeria__aviso {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.25rem;
}
.galeria__aviso svg { width: 16px; height: 16px; color: var(--ouro-500); flex: none; }

/* painel lateral de compra */
.painel {
  position: sticky; top: calc(var(--altura-cabecalho) + 1rem);
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.5rem; display: grid; gap: 1.1rem; box-shadow: var(--sombra-1);
}
.painel__preco { display: grid; gap: 0.3rem; }
.painel__valor { font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.painel__fipe { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.painel__acoes { display: grid; gap: 0.6rem; }
.painel__linha { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; padding: 0.55rem 0; border-bottom: 1px solid var(--borda); }
.painel__linha:last-of-type { border-bottom: 0; }
.painel__linha span { color: var(--texto-medio); }
.painel__linha b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ficha técnica */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--borda); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.ficha__item { background: var(--cartao); padding: 1rem 1.1rem; display: grid; gap: 0.25rem; }
.ficha__rotulo { font-size: 0.75rem; color: var(--texto-suave); font-weight: 600; }
.ficha__valor { font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.opcionais { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem 1.5rem; }
.opcionais li { display: flex; gap: 0.6rem; align-items: center; font-size: 0.9375rem; }
.opcionais svg { width: 17px; height: 17px; flex: none; color: var(--verde-500); }

.bloco { display: grid; gap: 1.15rem; margin-top: clamp(2rem, 4vw, 3rem); }
.bloco__titulo { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.025em; }

/* ================== 13. FINANCIAMENTO E AVALIAÇÃO ====================== */
.simulador {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
}
.simulador__controles { display: grid; gap: 1.35rem; }

.deslizante { display: grid; gap: 0.6rem; }
.deslizante__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.deslizante__rotulo { font-size: 0.875rem; font-weight: 700; color: var(--texto-medio); }
.deslizante__valor { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--ouro-400) var(--preenchido, 40%), var(--creme-300) var(--preenchido, 40%));
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--tinta-850);
  border: 3px solid var(--ouro-400); cursor: grab;
  transition: transform 0.2s var(--ease-entrada), box-shadow 0.2s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(201,162,77,0.18); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--tinta-850);
  border: 3px solid var(--ouro-400); cursor: grab;
}
.deslizante__limites { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

.prazos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* `color` explícito, e não herdado: a pílula tem fundo branco próprio, mas na
   ficha do veículo ela mora dentro do painel escuro `.resumo` — herdando dali
   ela saía creme sobre branco, ilegível até ser escolhida. */
.prazo {
  padding: 0.6rem 1.05rem; border-radius: var(--raio-pill);
  border: 1px solid var(--borda-forte); background: var(--cartao);
  color: var(--texto-forte);
  font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-entrada);
}
.prazo:hover { border-color: var(--ouro-400); transform: translateY(-2px); }
.prazo[aria-pressed="true"] { background: var(--tinta-850); color: var(--creme-100); border-color: var(--tinta-850); }

.resumo {
  background: var(--tinta-850); color: var(--texto-claro);
  border-radius: var(--raio-g); padding: clamp(1.6rem, 3vw, 2.25rem);
  display: grid; gap: 1.1rem; position: sticky; top: calc(var(--altura-cabecalho) + 1rem);
  border: 1px solid rgba(201, 162, 77, 0.22);
}
.resumo__parcela { display: grid; gap: 0.25rem; }
.resumo__valor {
  font-size: clamp(2.3rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -0.045em;
  color: var(--ouro-300); line-height: 1; font-variant-numeric: tabular-nums;
}
.resumo__linhas { display: grid; gap: 0.1rem; }
.resumo__linha {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0; border-bottom: 1px solid rgba(247,243,236,0.1); font-size: 0.875rem;
}
.resumo__linha:last-child { border-bottom: 0; }
.resumo__linha span { color: var(--texto-claro-medio); }
.resumo__linha b { font-variant-numeric: tabular-nums; }

/* passo a passo */
.passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; counter-reset: passo; }
.passo { display: grid; gap: 0.6rem; align-content: start; position: relative; padding-top: 2.5rem; }
.passo::before {
  counter-increment: passo; content: counter(passo, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-size: 1.5rem; font-weight: 800; color: var(--ouro-400); font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.passo::after {
  content: ''; position: absolute; top: 0.9rem; left: 3.2rem; right: -1.25rem; height: 1px;
  background: linear-gradient(90deg, rgba(201,162,77,0.4), transparent);
}
.passo:last-child::after { display: none; }
.passo h3 { font-size: 1.0625rem; }
.passo p { font-size: 0.9375rem; color: var(--texto-medio); }
.escuro .passo p { color: var(--texto-claro-medio); }

/* ============ 14. RODAPÉ E WHATSAPP FLUTUANTE ========================== */
.rodape { background: var(--tinta-900); color: var(--texto-claro); padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.rodape__grade {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(1.75rem, 3vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.rodape__marca img { height: 78px; width: auto; margin-bottom: 1.15rem; }
.rodape__titulo { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ouro-300); margin-bottom: 1.1rem; }
.rodape__lista { display: grid; gap: 0.6rem; font-size: 0.9375rem; }
.rodape__lista a, .rodape__lista span { color: var(--texto-claro-medio); transition: color 0.25s ease; }
.rodape__lista a:hover { color: var(--ouro-300); }
.rodape__social { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.rodape__social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--borda-clara); color: var(--texto-claro-medio);
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-entrada);
}
.rodape__social a:hover { border-color: var(--ouro-400); color: var(--ouro-300); transform: translateY(-3px); }
.rodape__social svg { width: 18px; height: 18px; }

.rodape__base {
  border-top: 1px solid rgba(247,243,236,0.1);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.8125rem; color: var(--texto-claro-suave);
}
.rodape__base a { transition: color 0.25s ease; }
.rodape__base a:hover { color: var(--ouro-300); }
.rodape__legal { padding-bottom: 1.5rem; }

/* botão flutuante do WhatsApp */
.zap {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 100; display: flex; align-items: center; gap: 0.7rem;
  height: 56px; padding: 0 1.1rem; border-radius: var(--raio-pill);
  background: var(--whats); color: #05270F;
  font-size: 0.9375rem; font-weight: 700;
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.4);
  transform: translateY(120%); opacity: 0;
  transition: transform 0.6s var(--ease-entrada), opacity 0.4s ease, box-shadow 0.3s ease;
}
.zap.is-visivel { transform: translateY(0); opacity: 1; }
.zap:hover { box-shadow: 0 12px 34px rgba(37, 211, 102, 0.5); }
.zap svg { width: 26px; height: 26px; flex: none; }
.zap__texto { white-space: nowrap; }

/* ==================== 15. ESTADOS DE ANIMAÇÃO ========================== */
/* Vindos do motion.js. Sempre partem de um estado visível quando o JS não roda:
   a classe .js no <html> é quem esconde. Sem JS, nada some. */
.js [data-revelar] { opacity: 0; will-change: opacity, transform; }
.js [data-revelar]:not(.is-dentro) { pointer-events: none; }
.js [data-revelar].is-dentro { opacity: 1; pointer-events: auto; }

.js [data-revelar="sobe"]    { transform: translateY(30px); }
.js [data-revelar="desce"]   { transform: translateY(-24px); }
.js [data-revelar="esquerda"]{ transform: translateX(-34px); }
.js [data-revelar="direita"] { transform: translateX(34px); }
.js [data-revelar="escala"]  { transform: scale(0.94); }
.js [data-revelar="borrado"] { filter: blur(12px); transform: translateY(16px); }

.js [data-revelar] {
  transition:
    opacity 0.85s var(--ease-entrada),
    transform 0.85s var(--ease-entrada),
    filter 0.85s var(--ease-entrada);
  transition-delay: var(--atraso, 0ms);
}
.js [data-revelar].is-dentro { transform: none; filter: none; }

/* corte de cortina: o bloco aparece por baixo de uma máscara */
.js [data-revelar="cortina"] { opacity: 1; clip-path: inset(0 0 100% 0); }
.js [data-revelar="cortina"].is-dentro { clip-path: inset(0 0 0 0); }
.js [data-revelar="cortina"] { transition: clip-path 1s var(--ease-entrada); transition-delay: var(--atraso, 0ms); }

/* revelação palavra a palavra */
.palavra { display: inline-block; }
.js [data-dividir] .palavra {
  opacity: 0; transform: translateY(14px); filter: blur(9px);
  transition: opacity 0.55s ease, transform 0.55s var(--ease-entrada), filter 0.55s ease;
  transition-delay: var(--atraso-palavra, 0ms);
}
.js [data-dividir].is-dentro .palavra { opacity: 1; transform: none; filter: none; }

/* contador */
[data-contador] { font-variant-numeric: tabular-nums; }


/* botão magnético (Vision Reveal) */
[data-ima] { will-change: transform; }

/* ---- complementos do card ---- */
.carro__conta {
  position: absolute; right: 0.7rem; bottom: 0.7rem; z-index: 2;
  padding: 0.2rem 0.5rem; border-radius: var(--raio-p);
  background: rgba(255, 255, 255, 0.9); color: var(--texto-forte);
  font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity 0.3s ease;
}
.carro:hover .carro__conta { opacity: 1; }
.carro__botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.carro__botoes .btn { padding-inline: 0.6rem; }

/* ============================== 16. RESPONSIVO ========================= */

/* --- até 1180px: estoque com filtros mais estreitos --- */
@media (max-width: 1180px) {
  .estoque { grid-template-columns: 250px minmax(0, 1fr); }
  .resultados__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .veiculo { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* --- até 1024px: uma coluna nos blocos largos --- */
@media (max-width: 1024px) {
  :root { --altura-cabecalho: 68px; }

  .nav { display: none; }
  .hamburguer { display: flex; }
  /* Quem empurrava as ações para a direita era o `margin-left: auto` do menu.
     Escondido o menu, o par WhatsApp + hambúrguer encostava na logo e sobrava
     tela vazia à direita — o `auto` passa para eles. */
  .cabecalho__acoes { margin-left: auto; }
  .cabecalho__acoes .btn--whats .zap__texto { display: none; }

  .garantias__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caminhos { grid-template-columns: minmax(0, 1fr); }
  .caminho { min-height: 0; }
  .loja { grid-template-columns: minmax(0, 1fr); }
  .entregas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passo::after { display: none; }
  .simulador { grid-template-columns: minmax(0, 1fr); }
  .resumo { position: static; }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* detalhe do veículo: painel de compra vira uma faixa fixa no rodapé */
  .veiculo { grid-template-columns: minmax(0, 1fr); }
  .painel { position: static; }

  /* estoque: filtros viram gaveta */
  .estoque { grid-template-columns: minmax(0, 1fr); }
  .abrir-filtros {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.05rem; border-radius: var(--raio-p);
    border: 1px solid var(--borda-forte); background: var(--cartao);
    font-size: 0.875rem; font-weight: 700;
  }
  .abrir-filtros svg { width: 17px; height: 17px; }
  .abrir-filtros__conta {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px;
    padding: 0 6px; border-radius: var(--raio-pill);
    background: var(--ouro-400); color: var(--tinta-900);
    font-size: 0.6875rem; font-weight: 800;
  }
  .abrir-filtros__conta:empty { display: none; }

  .filtros {
    position: fixed; inset: 0 auto 0 0; z-index: 140;
    width: min(360px, 88vw); max-height: none; height: 100%;
    border-radius: 0; border: 0; border-right: 1px solid var(--borda);
    transform: translateX(-101%);
    transition: transform 0.45s var(--ease-cortina);
    box-shadow: var(--sombra-3);
    padding-bottom: 2rem;
  }
  .filtros.is-aberta { transform: translateX(0); }
  .filtros__fechar {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--creme-200); color: var(--texto-forte);
  }
  .filtros__fechar svg { width: 15px; height: 15px; }
  .filtros__veu {
    position: fixed; inset: 0; z-index: 139; background: rgba(8, 8, 10, 0.5);
    opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;
  }
  .filtros__veu.is-aberta { opacity: 1; visibility: visible; }
}

/* --- até 760px: telefone --- */
@media (max-width: 760px) {
  :root { --seccao-y: clamp(3.25rem, 11vw, 4.5rem); }


  .garantias { margin-top: -2rem; }
  .garantias__grade { grid-template-columns: 1fr; gap: 1.1rem; }

  .cabeca-seccao { flex-direction: column; align-items: flex-start; gap: 1.15rem; }

  .resultados__grade { grid-template-columns: 1fr; }
  .resultados__topo { gap: 0.75rem; }
  .resultados__ferramentas { width: 100%; margin-left: 0; }
  .ordenar { flex: 1; }
  .visao { display: none; }

  /* modo lista não cabe no telefone: volta a virar cartão */
  .resultados--lista .carro { flex-direction: column; }
  .resultados--lista .carro__foto { width: 100%; }
  .resultados--lista .carro__corpo { padding: 1rem 1.1rem 1.15rem; }
  .resultados--lista .carro__pe {
    width: auto; border-left: 0; padding: 0 1.1rem 1.1rem; margin: 0;
  }

  .entregas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* no celular o convite empilha e o botão passa a ocupar a largura toda */
  .convite { grid-template-columns: auto minmax(0, 1fr); text-align: left; }
  .convite__texto { grid-column: 2; }
  .convite > .btn { grid-column: 1 / -1; justify-content: center; }
  .passos { grid-template-columns: 1fr; }
  .numeros { grid-template-columns: 1fr; }
  .grade-campos { grid-template-columns: 1fr; }
  .rodape__grade { grid-template-columns: 1fr; }
  .rodape__base { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

  .galeria__seta { width: 38px; height: 38px; }
  .galeria__tiras { grid-auto-columns: 74px; }

  /* o rótulo do botão flutuante some: só o ícone */
  .zap { height: 52px; padding: 0 0.9rem; }
  .zap__texto { display: none; }

  .trilho__pista { grid-auto-columns: 82vw; }
}

@media (max-width: 420px) {
  .carro__botoes { grid-template-columns: 1fr; }
  .prazos { display: grid; grid-template-columns: repeat(3, 1fr); }
}

/* ------------------- quem pediu menos movimento ----------------------- */
@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;
    scroll-behavior: auto !important;
  }


}

/* --------------------------------- impressão -------------------------- */
@media print {
  .cabecalho, .cortina, .zap, .progresso, .filtros,
  .carro__favorito, .paginacao, .rodape__social { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.75em; }
}

/* ============ 18. TRILHOS DE GRADE QUE PODEM ENCOLHER ================= */
/* Um `1fr` é `minmax(auto, 1fr)`, e `auto` nunca encolhe abaixo do
   min-content. Um <select> tem min-content igual à sua opção mais longa —
   e a lista de carros do simulador tem opções de 50 caracteres. Resultado:
   o trilho ficava mais largo que a tela e nascia rolagem lateral no celular.
   `minmax(0, 1fr)` deixa o trilho encolher; o `min-width: 0` faz o mesmo
   pelos filhos, que herdariam o mesmo piso. */
.simulador,
.veiculo,
.loja,
.grade-campos,
.resultados__grade,
.garantias__grade,
.passos,
.numeros,
.entregas,
.rodape__grade { grid-auto-columns: minmax(0, 1fr); }

/* ---- "O que você quer fazer hoje?" vira trilho no celular ----
   Empilhados, os três cartões ocupam quase três telas e o "Vender" fica longe
   de quem só rolou um pouco. Lado a lado num trilho que arrasta, os três
   ficam à mesma distância do dedo e o corte do terceiro cartão na borda é o
   que avisa que há mais coisa para o lado.

   Esta regra mora DEPOIS do bloco de `grid-auto-columns` acima de propósito:
   lá `.caminhos` recebia `minmax(0, 1fr)` e, por ser regra sem @media escrita
   mais abaixo, ganharia de qualquer coisa que eu pusesse na seção de
   breakpoints. `.caminhos` saiu daquela lista e a largura da coluna passou a
   ser definida aqui. */
@media (max-width: 1024px) {
  .caminhos {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* 78% deixa o próximo cartão aparecendo pela borda; o teto de 320px
       impede que num tablet largo cada cartão vire uma tela inteira. Em 300px
       os três couberam sem sobra em 1024, que é o topo desta faixa. */
    grid-auto-columns: min(78%, 300px);
    gap: 1rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* respiro para a sombra e a borda dourada não serem cortadas */
    padding: 0.5rem 0.5rem 1rem;
    margin: -0.5rem -0.5rem -1rem;
    /* o trilho sangra até a borda da tela e volta a alinhar pelo gutter */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* sem isto o snap alinha o cartão à borda da TELA e come o gutter: a
       pista abre já rolada 20px e o primeiro cartão encosta na lateral. */
    scroll-padding-inline: var(--gutter);
  }
  .caminhos::-webkit-scrollbar { display: none; }
  .caminho { scroll-snap-align: start; min-height: 0; }

  /* O `data-escalonar` dá a cada cartão a sua própria entrada ao rolar, e
     cada um espera o observador vê-lo. Fora do trilho isso é bonito; dentro,
     o terceiro cartão está fora da tela na horizontal, nunca intersecta e
     fica em `opacity: 0` esperando — quem arrasta encontra um cartão em
     branco. No trilho os três entram junto com a seção. */
  .js .caminhos [data-revelar] { opacity: 1; transform: none; filter: none; }
}

.simulador > *,
.simulador__controles > *,
.veiculo > *,
.loja > *,
.grade-campos > *,
.campo,
.deslizante,
.rodape__grade > * { min-width: 0; }

/* o select nunca deve ditar a largura da coluna */
select.campo__ctrl,
.ordenar { width: 100%; max-width: 100%; }
.resultados__ferramentas .ordenar { width: auto; }

/* as sobrescritas do responsivo precisam do mesmo piso zero */
/* Com piso EM BAIXO também: este bloco mora depois do @media de 1024px, então
   um `max-width: 1180px` sozinho continuaria valendo em 320px e ganharia dele
   por vir por último. Era daí que saía a coluna fixa de 320px no celular — o
   painel do veículo ficava mais largo que a tela inteira e vazava 59px. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .estoque { grid-template-columns: 250px minmax(0, 1fr); }
  .veiculo { grid-template-columns: minmax(0, 1fr) 320px; }
}
/* Aqui existia um segundo @media de 1024px que punha DUAS colunas em
   `.simulador, .veiculo, .loja, .estoque, .caminhos...`. Como vinha depois do
   bloco de 1024 lá de cima, ganhava dele — e as cinco peças que deviam virar
   UMA coluna no celular ficavam em duas, espremidas. Em 320px o mapa da loja
   tinha 120px de largura e o @jfrealizandosonhos vazava 26px para fora da
   tela.

   A intenção original era só dar piso zero às colunas. Isso agora está onde
   deve estar: nas próprias regras do bloco de 1024, que passaram de `1fr`
   para `minmax(0, 1fr)`. `1fr` sozinho tem mínimo `auto` e não encolhe
   abaixo do min-content dos filhos; é dele que nasce a rolagem lateral. */
@media (max-width: 760px) {
  .resultados__grade,
  .passos,
  .numeros,
  .grade-campos,
  .rodape__grade { grid-template-columns: minmax(0, 1fr); }
  .garantias__grade { grid-template-columns: minmax(0, 1fr); }
}

/* ---- o mesmo piso zero para as grades de uma coluna só ---- */
/* Sem grid-template-columns declarado, a coluna implícita vale `auto`, que
   nunca encolhe abaixo do min-content dos filhos. E o min-content de um .btn
   é a legenda inteira, porque o botão é `white-space: nowrap`. Era isso que
   esticava o painel do simulador para 337px dentro de uma caixa de 269px. */
.resumo,
.painel,
.simulador__controles,
.campo,
.deslizante,
.cabeca-seccao__texto,
.contatos,
.rodape__lista,
.lista-check,
.faq,
.horarios,
.bloco { grid-auto-columns: minmax(0, 1fr); }

/* Botão que ocupa a linha inteira pode quebrar a legenda em duas linhas —
   é melhor do que empurrar a página para o lado. Mas aí o `display: flex` do
   `.btn` estraga o resultado: o ícone vira IRMÃO do bloco de texto inteiro e
   fica encostado à esquerda dele, enquanto as duas linhas se centralizam
   sozinhas — o botão sai torto, com um buraco entre ícone e texto.

   Em bloco, o ícone volta a ser parte do texto: emenda na primeira palavra e
   as duas linhas centralizam no botão, não em torno dele. */
.btn--bloco {
  display: block;
  white-space: normal; text-align: center;
  line-height: 1.35;
}
.btn--bloco svg { display: inline-block; vertical-align: -0.2em; margin-right: 0.5rem; }

@media (max-width: 480px) {
  .btn { white-space: normal; }
  .resultados__ferramentas { flex-wrap: wrap; }
  .resultados__ferramentas .ordenar { flex: 1 1 150px; width: auto; min-width: 0; }
  .abrir-filtros { flex: 0 0 auto; }
  .migalhas { word-break: break-word; }
}

/* ============ 24. SIMULADOR RÁPIDO DA HOME ============================ */
/* Reaproveita .simulador / .deslizante / .resumo da página de financiamento —
   mesma peça, mesma conta, um estilo só. O que muda é o contexto: aqui o bloco
   fica sobre fundo escuro, e três coisas precisam de ajuste por causa disso. */

.simulador__intro { display: grid; gap: 0.9rem; margin-bottom: 0.4rem; }

/* 1. Os rótulos do controle nasceram para fundo claro. */
.escuro .deslizante__rotulo { color: var(--texto-claro-medio); }
.escuro .deslizante__limites { color: var(--texto-claro-suave); }

/* 2. O painel do resultado é --tinta-850, exatamente a cor da seção escura:
      um sumiria dentro do outro. Escurecê-lo não resolve — sobre preto, dois
      tons de quase-preto são o mesmo tom, e a sombra que separaria um cartão
      no claro aqui não aparece. Ele CLAREIA, que é como um objeto elevado se
      comporta, e ganha o mesmo halo dourado do convite das entregas. */
.escuro .resumo {
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(201, 162, 77, 0.13) 0%, transparent 60%),
    var(--tinta-800);
  border-color: rgba(201, 162, 77, 0.30);
  position: static;              /* não gruda: a seção é curta demais para isso */
}

/* 3. A ponte para a troca. Ela é o que sobrou do bloco "quer vender ou trocar",
      e o lugar certo dela é aqui: a pessoa acabou de mexer na entrada e está
      justamente pensando em como juntar esse dinheiro. */
.resumo__troca {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin-top: 0.15rem; padding-top: 1rem;
  border-top: 1px solid var(--borda-clara);
  font-size: 0.875rem; color: var(--texto-claro-medio);
}
.resumo__troca svg { width: 18px; height: 18px; color: var(--ouro-300); flex: none; margin-top: 0.1rem; }
.resumo__troca a {
  color: var(--ouro-300); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(201, 162, 77, 0.4);
}
.resumo__troca a:hover { text-decoration-color: var(--ouro-300); }

/* No celular a coluna do resultado vai para baixo dos controles — o padrão do
   grid — e o painel volta a ocupar a largura toda. */
@media (max-width: 1024px) {
  #simulador-rapido .simulador { grid-template-columns: minmax(0, 1fr); }
}

/* ==================== 26. ÁREA DE TOQUE NO CELULAR ===================== */
/* Controle pequeno não precisa CRESCER para ser tocável: precisa de uma área
   de toque maior que o desenho. Estes aqui medem de 21 a 39px — coração de
   favorito, setas da galeria, fechar filtros, links com seta —, e um dedo
   erra em qualquer coisa abaixo de 44.

   O ::after é uma placa invisível centrada no botão. Ele não ocupa espaço no
   layout, então nada se move: só o alvo cresce. Vale só no celular, porque
   no desktop quem aponta é o mouse, que acerta 20px sem esforço. */
@media (pointer: coarse), (max-width: 640px) {
  /* Estes fechavam em 43,x — passavam na conferência por arredondamento e
     reprovavam no dedo. Aqui o piso é declarado, não deduzido. */
  .prazo,
  .cortina__link,
  .abrir-filtros { min-height: 44px; }

  .carro__favorito,
  .galeria__seta,
  .filtros__fechar,
  .filtros__limpar,
  .link-seta,
  .cabecalho__acoes .btn--p { position: relative; }

  .carro__favorito::after,
  .galeria__seta::after,
  .filtros__fechar::after,
  .filtros__limpar::after,
  .link-seta::after,
  .cabecalho__acoes .btn--p::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    min-width: 44px; min-height: 44px;
  }
}