/* =============================================================================
   SELECTING MOTORS — style.css

   ARQUIVO GERADO POR scripts/build.js — NÃO EDITE AQUI.
   Cada seção é um arquivo em src/css/, concatenados nesta ordem:

   01-tokens.css
   02-base.css
   03-tipografia.css
   04-botoes.css
   05-placeholders.css
   07-header.css
   08-hero.css
   09-colecao.css
   10-cine.css
   11-historia.css
   12-showroom.css
   13-experiencia.css
   14-instagram.css
   15-avaliacoes.css
   16-mapa.css
   17-catalogo.css
   18-veiculo.css
   19-cta.css
   20-footer-dock.css
   21-motion.css
   22-responsivo.css
   23-app-mobile.css

   O prefixo numérico define a cascata: mudar a ordem muda quem vence.
   ============================================================================ */

/* ============================ 1. TOKENS ================================== */
:root{
  /* superfícies claras */
  --paper:   #ffffff;   /* fundo principal */
  --sand:    #f4f3f0;   /* seções alternadas */
  --sand-2:  #eceae5;   /* placeholders / preenchimentos */
  --line:    #e0ddd7;
  --line-2:  rgba(17,17,17,.10);

  /* superfícies escuras (âncoras) */
  --ink:     #111111;
  --ink-2:   #1c1c1c;
  --ink-line:rgba(255,255,255,.14);

  /* texto sobre claro */
  --text:    #111111;
  --muted:   #57534d;
  --faint:   #8b867d;

  /* texto sobre escuro */
  --on-ink:       #f7f6f4;
  --on-ink-muted: rgba(247,246,244,.72);
  --on-ink-faint: rgba(247,246,244,.46);

  /* acento — bronze discreto, usado só em detalhes */
  --accent:    #8a6f43;
  --accent-lt: #b79a68;

  /* tipografia — uma família só, como na referência */
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ritmo */
  --gut:  clamp(20px, 5vw, 80px);
  --sec:  clamp(76px, 9vw, 140px);
  --max:  1360px;

  /* forma */
  --r:    14px;   /* mídias e cards */
  --r-sm: 10px;
  --pill: 999px;

  /* easing */
  --ease:  cubic-bezier(.22,.72,.24,1);
  --ease2: cubic-bezier(.16,.84,.3,1);
}

/* ============================ 2. BASE ==================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
ul,ol,dl,dd,figure,blockquote{margin:0; padding:0; list-style:none}
address{font-style:normal}
::selection{background:var(--ink); color:var(--paper)}

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

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{
  position:fixed; top:-100px; left:16px; z-index:1000; padding:12px 22px;
  background:var(--ink); color:var(--paper); font-size:.85rem; border-radius:var(--pill);
  transition:top .25s;
}
.skip:focus{top:16px}

.shell{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.section{padding-block:var(--sec); position:relative}
section[id]{scroll-margin-top:80px}

/* ========================= 3. TIPOGRAFIA ================================= */
/* Sem serifada e sem entrelinha exagerada: a referência é toda em sans,
   com títulos grandes de peso médio e texto de apoio em cinza. */
.h2{
  font-weight:600; letter-spacing:-.025em;
  font-size:clamp(2rem, 4.2vw, 3.4rem); line-height:1.1; margin:0;
}
.h2 em{font-style:normal; color:var(--faint)}

.kicker{
  display:flex; align-items:center; gap:12px; margin:0 0 20px;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.tick{display:block; width:22px; height:1px; background:currentColor; opacity:.55; flex:none}

.body{
  margin:22px 0 0; font-size:clamp(1rem, 1.05vw, 1.1rem);
  color:var(--muted); max-width:46ch; font-weight:400;
}
.note{
  margin:20px 0 0; font-size:.88rem; color:var(--faint); max-width:62ch; line-height:1.65;
}
.note strong{color:var(--muted); font-weight:600}

.secHead{margin-bottom:clamp(40px,5vw,72px); max-width:800px}
.secHead--c{margin-inline:auto; text-align:center}
.secHead--c .kicker{justify-content:center}
.secHead--c .note{margin-inline:auto}
.secHead--split{
  max-width:none; display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}

/* ==================== 4. BOTÕES / LINKS / UTILS ========================== */
/* Botões pill, como na referência. */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:var(--pill);
  font-size:.9rem; font-weight:600; letter-spacing:.005em; line-height:1;
  border:1px solid transparent; overflow:hidden; white-space:nowrap;
  transition:transform .35s var(--ease), background .3s var(--ease),
             color .3s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn--sm{padding:11px 22px; font-size:.82rem}
.btn--lg{padding:19px 40px; font-size:.98rem}

/* sólido escuro — ação principal */
.btn--gold{background:var(--ink); color:var(--paper)}
.btn--gold:hover{background:#000; box-shadow:0 10px 26px rgba(17,17,17,.20)}

/* contorno — ação secundária */
.btn--line{border-color:var(--line); color:var(--text); background:var(--paper)}
.btn--line:hover{border-color:var(--ink); background:var(--sand)}

/* sobre fundo escuro os papéis se invertem */
.on-ink .btn--gold{background:var(--paper); color:var(--ink)}
.on-ink .btn--gold:hover{background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.on-ink .btn--line{border-color:var(--ink-line); color:var(--on-ink); background:transparent}
.on-ink .btn--line:hover{border-color:var(--paper); background:rgba(255,255,255,.08)}

/* brilho discreto que atravessa o botão no hover */
.shine::after{
  content:""; position:absolute; inset:0 auto 0 -60%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-18deg); opacity:0; transition:opacity .2s;
}
.shine:hover::after{opacity:1; animation:sweep 1.05s var(--ease)}
@keyframes sweep{from{left:-60%} to{left:120%}}

.ico-wa{width:17px; height:17px; fill:currentColor; flex:none}

/* link com sublinhado animado */
.ulink{
  position:relative; display:inline-flex; align-items:center; gap:9px; padding-bottom:6px;
  font-size:.9rem; font-weight:600; color:var(--text);
}
.ulink::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--text);
  transform:scaleX(1); transform-origin:left; transition:transform .5s var(--ease2);
}
.ulink:hover::after{transform:scaleX(.25)}
.ulink span{transition:transform .4s var(--ease)}
.ulink:hover span{transform:translateX(5px)}

/* etiqueta sobre mídia */
.tag{
  position:absolute; right:12px; bottom:12px; z-index:2;
  padding:6px 12px; border-radius:var(--pill);
  font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:rgba(255,255,255,.86); backdrop-filter:blur(6px);
}

/* ==================== 5. PLACEHOLDERS DE MÍDIA =========================== */
/* Espaços reservados para as fotos dos veículos. Sem texto e sem ilustração:
   apenas a área com a proporção correta, para trocar por <img> depois. */
.ph{
  position:relative; width:100%; border-radius:var(--r);
  background:var(--sand-2); border:1px solid var(--line);
  overflow:hidden;
}
.ph::after{
  /* leve varredura diagonal, só para diferenciar de um bloco chapado */
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%);
}
.ph--3x2{aspect-ratio:3/2}
.ph--4x5{aspect-ratio:4/5}
.ph--16x10{aspect-ratio:16/10}
.ph--21x9{aspect-ratio:21/9}
.ph--1x1{aspect-ratio:1}
/* quando a foto chegar, basta trocar por <img class="ph__img"> dentro do .ph */
.ph__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}

/* ====================== 7. HEADER / MENU MOBILE ========================== */
.hdr{
  position:fixed; inset:0 0 auto; z-index:500;
  background:transparent; transition:background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
/* sobre o hero (escuro) o header é claro; ao "grudar", vira barra branca */
.hdr__in{
  max-width:var(--max); margin-inline:auto; padding:20px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  color:var(--on-ink); transition:color .4s var(--ease), padding .4s var(--ease);
}
.hdr.stuck{background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom-color:var(--line)}
.hdr.stuck .hdr__in{color:var(--text); padding-block:14px}
/* páginas sem hero escuro (catálogo) já nascem com a barra branca */
.hdr--solid{background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom-color:var(--line)}
.hdr--solid .hdr__in{color:var(--text)}

.logo{display:inline-flex; align-items:center; gap:12px}
/* o emblema é vertical (383×523), então a altura manda e a largura acompanha */
.logo__mark{height:36px; width:auto; flex:none}
.logo__type{display:grid; line-height:1}
.logo__type b{font-size:.98rem; font-weight:700; letter-spacing:.16em}
.logo__type i{font-style:normal; font-size:.6rem; letter-spacing:.34em; opacity:.6; margin-top:3px}

.nav{display:flex; gap:clamp(18px,2.2vw,34px)}
.nav a{
  position:relative; font-size:.92rem; font-weight:500; opacity:.85;
  transition:opacity .3s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease2);
}
.nav a:hover{opacity:1}
.nav a:hover::after{transform:scaleX(1); transform-origin:left}

.hdr__end{display:flex; align-items:center; gap:14px}
/* o CTA do header acompanha o fundo: claro sobre o hero, escuro na barra branca */
.hdr__cta{border-color:var(--ink-line); color:var(--on-ink); background:rgba(255,255,255,.08)}
.hdr__cta:hover{border-color:var(--paper); background:rgba(255,255,255,.16)}
.hdr.stuck .hdr__cta,
.hdr--solid .hdr__cta{border-color:transparent; color:var(--paper); background:var(--ink)}
.hdr.stuck .hdr__cta:hover,
.hdr--solid .hdr__cta:hover{background:#000}
/* item da navegação correspondente à página aberta */
.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}

.burger{
  display:none; width:40px; height:40px; border-radius:50%;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  border:1px solid currentColor;
}
.burger span{display:block; width:15px; height:1.5px; background:currentColor; transition:transform .35s var(--ease), opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

.menu{
  position:fixed; inset:0; z-index:490; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:40px;
  padding:110px var(--gut) 40px;
  opacity:0; transition:opacity .35s var(--ease);
}
/* sem isto o .menu[hidden] continua ocupando a tela inteira (display:flex
   vence o [hidden]) e engole os cliques do restante da página */
.menu[hidden]{display:none}
.menu.open{opacity:1}
.menu__nav{display:grid; gap:6px}
.menu__nav a{
  display:flex; align-items:baseline; gap:16px; padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:clamp(1.7rem,7vw,2.4rem); font-weight:600; letter-spacing:-.02em;
}
.menu__nav a em{font-style:normal; font-size:.7rem; font-weight:600; letter-spacing:.14em; color:var(--accent)}
.menu__foot{display:grid; gap:16px; justify-items:start}
.menu__foot p{margin:0; font-size:.8rem; color:var(--faint)}

/* ============================= 8. HERO =================================== */
/* O hero é a pista de rolagem da sequência de frames: 320svh de altura,
   com todas as camadas presas (sticky) ocupando 100svh cada. */
.hero{
  --hero-run:320svh;
  position:relative; height:var(--hero-run); min-height:100svh;
  display:grid; grid-template-columns:100%; grid-template-rows:100svh auto;
  padding:0; overflow:clip; isolation:isolate; background:var(--ink);
}
/* todas as camadas do hero dividem a mesma célula da grade */
.hero > *{grid-area:1 / 1}
.hero__media{
  position:sticky; top:0; height:100svh; width:100%; z-index:-2;
}
.hero__seq{
  display:block; width:100%; height:100%;
  /* realce da filmagem: mais contraste, cor e brilho, sem estourar as luzes */
  filter:brightness(1.12) contrast(1.14) saturate(1.18);
  clip-path:inset(4% 4% 4% 4%); transform:scale(1.05); opacity:0;
  transition:clip-path 1.4s var(--ease2), transform 1.6s var(--ease2), opacity 1s ease;
}
body:not(.is-loading) .hero__seq{clip-path:inset(0); transform:scale(1); opacity:1}

/* Véu enxuto: sombra no topo (para o header) e no rodapé (para o texto).
   O miolo fica quase limpo, então a imagem aparece com brilho. */
.hero__veil{
  position:sticky; top:0; height:100svh; z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,8,8,.52) 0%, rgba(8,8,8,.06) 26%, rgba(8,8,8,0) 46%, rgba(8,8,8,.42) 78%, rgba(8,8,8,.74) 100%),
    linear-gradient(90deg, rgba(8,8,8,.42) 0%, rgba(8,8,8,.06) 46%, transparent 72%);
}

.hero__in{
  position:sticky; top:0; height:100svh;
  max-width:var(--max); margin-inline:auto; width:100%;
  padding:130px var(--gut) clamp(140px,18vh,190px);
  display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--on-ink);
  /* a legibilidade passa a vir da sombra do texto, não de escurecer a imagem */
  text-shadow:0 1px 2px rgba(0,0,0,.32), 0 8px 40px rgba(0,0,0,.42);
}
.hero__in .btn{text-shadow:none}
.hero__place{
  display:flex; align-items:center; gap:12px; margin:0 0 clamp(20px,2.6vw,30px);
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-ink-muted);
  opacity:0; transform:translateY(14px);
  transition:opacity .8s ease .15s, transform .8s var(--ease) .15s;
}
body:not(.is-loading) .hero__place{opacity:1; transform:none}

.hero__h1{
  font-weight:600; margin:0;
  font-size:clamp(2.5rem, 6.4vw, 5.6rem); line-height:1.02; letter-spacing:-.035em;
  max-width:15ch;
}
.hero__h1 em{font-style:normal; color:var(--on-ink-muted)}
.mask{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.mask > span{display:block; transform:translateY(112%); transition:transform 1.15s var(--ease2)}
body:not(.is-loading) .mask > span{transform:none}
.hero__h1 .mask:nth-child(1) > span{transition-delay:.26s}
.hero__h1 .mask:nth-child(2) > span{transition-delay:.38s}

.hero__sub{
  margin:clamp(20px,2.4vw,28px) 0 0; max-width:40ch;
  font-size:clamp(1rem,1.2vw,1.15rem); color:var(--on-ink-muted);
  opacity:0; transform:translateY(16px);
  transition:opacity .9s ease .68s, transform .9s var(--ease) .68s;
}
.hero__cta{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,3.2vw,42px);
  opacity:0; transform:translateY(16px);
  transition:opacity .9s ease .86s, transform .9s var(--ease) .86s;
}
body:not(.is-loading) .hero__sub,
body:not(.is-loading) .hero__cta{opacity:1; transform:none}
/* CTAs do hero seguem a lógica de fundo escuro */
.hero__cta .btn--gold{background:var(--paper); color:var(--ink)}
.hero__cta .btn--gold:hover{background:#fff; box-shadow:0 12px 32px rgba(0,0,0,.35)}
.hero__cta .btn--line{border-color:var(--ink-line); color:var(--on-ink); background:rgba(255,255,255,.06)}
.hero__cta .btn--line:hover{border-color:var(--paper); background:rgba(255,255,255,.14)}

/* indicador de scroll */
.scroll{
  position:sticky; top:0; height:100svh; width:max-content; margin-inline:auto;
  z-index:3; padding-bottom:30px;
  display:grid; align-content:end; justify-items:center; gap:10px; color:var(--on-ink-faint);
  opacity:0; transition:opacity .9s ease 1.2s, color .3s;
}
body:not(.is-loading) .scroll{opacity:1}
.scroll:hover{color:var(--on-ink)}
.scroll__lb{font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase}
.scroll__line{
  width:1px; height:46px; background:linear-gradient(180deg,currentColor,transparent);
  transform-origin:top; animation:cue 2.4s var(--ease) infinite;
}
.scroll__arw{font-size:.7rem; line-height:1}
@keyframes cue{
  0%,100%{transform:scaleY(.35); opacity:.35}
  45%    {transform:scaleY(1);   opacity:1}
}

/* ======================= 10. THE COLLECTION ============================== */
.collection{background:var(--sand)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,24px)}
.cards__hint{display:none}

.card{
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); display:flex; flex-direction:column; overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card__link{position:absolute; inset:0; z-index:4}
.card__media{position:relative}
/* dentro do card o placeholder perde o contorno e o raio de baixo */
.card__media .ph{border:0; border-radius:0}
.chip{
  position:absolute; top:12px; left:12px; z-index:3;
  padding:6px 12px; border-radius:var(--pill);
  font-size:.66rem; font-weight:600; letter-spacing:.06em;
  color:var(--muted); background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
}
.card__body{padding:24px clamp(18px,1.8vw,26px) 26px; display:flex; flex-direction:column; flex:1}
.card__brand{margin:0; font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.card__model{font-weight:600; font-size:clamp(1.3rem,1.9vw,1.6rem); line-height:1.15; margin:8px 0 0; letter-spacing:-.02em}
/* Linha de destaques: ano · km · motor · combustível · câmbio.
   Substituiu a tabela de três colunas — cabe mais informação em um terço da
   altura, e num catálogo isso muda a página inteira. O separador é do CSS,
   então a linha quebra sem deixar ponto órfão no fim da linha. */
.card__facts{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 9px;
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line);
  font-size:.84rem; color:var(--muted);
}
.card__facts li{display:flex; align-items:baseline; gap:9px; white-space:nowrap}
.card__facts li + li::before{content:"·"; color:var(--line); font-weight:700}
/* Linha de compra: o preço e o botão que abre a conversa, lado a lado — a
   pergunta ("quanto custa?") e a ação ("quero esse") no mesmo lugar.
   O botão precisa ficar acima do .card__link (z-index 4), senão o toque nele
   cairia no link que cobre o card e abriria a ficha em vez do WhatsApp. */
.card__buy{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:18px;
}
.card__price{margin:0; min-width:0}
.card__wa{position:relative; z-index:5; flex:none; white-space:nowrap}
.card__go{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px;
  font-size:.86rem; font-weight:600; color:var(--text); transition:color .35s var(--ease);
}
.card__go i{font-style:normal; transition:transform .45s var(--ease)}

/* microinterações desktop */
@media (hover:hover) and (min-width:769px){
  .card:hover{transform:translateY(-6px); border-color:var(--faint); box-shadow:0 22px 48px rgba(17,17,17,.10)}
  .card:hover .card__go i{transform:translateX(5px)}
}


/* ---- galeria na capa do card (catálogo) ----------------------------------
   Só existe quando o veículo tem mais de uma foto. Serve para responder "como
   ele é por dentro?" sem sair da lista. O trilho é o mesmo padrão da ficha:
   rolagem com encaixe, que o dedo já move sozinho; as setas empurram o mesmo
   scroll e ficam ACIMA do link que cobre o card (.card__link é z-index 4),
   senão o toque na seta abriria o veículo em vez de trocar a foto. */
/* A mídia sobe acima do .card__link (z-index 4). Sem isto o link recebe o
   arrasto — ele cobre o card inteiro e não é ancestral do trilho, então o
   gesto rolaria a página em vez das fotos. O toque na foto é devolvido ao
   link por catalogo.js. */
.card--gal .card__media{position:relative; z-index:5}
.cgal{position:relative; overflow:hidden}
.cgal__track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  touch-action:pan-x pan-y; overscroll-behavior-x:contain;
}
.cgal__track::-webkit-scrollbar{display:none}
.cgal__s{flex:0 0 100%; scroll-snap-align:start; margin:0}
.cgal__s img{width:100%; aspect-ratio:3/2; object-fit:cover}

.cgal__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:34px; height:34px; display:grid; place-items:center;
  border:0; border-radius:50%; padding:0;
  background:rgba(255,255,255,.92); color:var(--ink);
  box-shadow:0 4px 14px rgba(17,17,17,.18);
  transition:opacity .25s var(--ease), background .25s var(--ease);
}
.cgal__nav svg{width:17px; height:17px}
.cgal__nav--prev{left:10px}
.cgal__nav--next{right:10px}
/* no fim do trilho a seta some em vez de ficar cinza: um botão que não leva a
   lugar nenhum é ruído em cima da foto */
.cgal__nav[disabled]{opacity:0; pointer-events:none}

.cgal__dots{
  position:absolute; left:0; right:0; bottom:10px; z-index:5;
  display:flex; justify-content:center; gap:5px; pointer-events:none;
}
.cgal__dots i{
  width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.6);
  box-shadow:0 1px 3px rgba(17,17,17,.35);
  transition:width .3s var(--ease), background .3s var(--ease);
}
.cgal__dots i.on{width:15px; border-radius:3px; background:#fff}

/* No dedo não existe passar o mouse: as setas ficam sempre à vista. No
   desktop elas aparecem quando o ponteiro entra no card, para a grade não
   virar um mostruário de botões. */
@media (hover:hover) and (min-width:769px){
  .cgal__nav{opacity:0}
  .card:hover .cgal__nav:not([disabled]),
  .cgal__nav:focus-visible{opacity:1}
  .cgal__nav:hover{background:#fff}
}
.collection__foot{margin-top:clamp(34px,4vw,56px); display:flex; justify-content:center}

/* =================== 11. PAUSA CINEMATOGRÁFICA =========================== */
/* Única seção totalmente escura no miolo — funciona como respiro. Acordeão de
   3 painéis (grade, perfil, interior — os "3 cenários" da mesma foto original,
   recortados em assets/cine-1/2/3-*.webp, cada recorte 1920x361).

   Regra que manda no layout: 361px é a altura nativa dos recortes. Passar disso
   é ampliar o bitmap — foi o que borrou a versão anterior, que jogava cada
   painel em 100svh (~2,5x de upscale). Aqui a banda nunca passa de ~330px de
   altura; a largura pode ser qualquer uma, porque o object-fit:cover só recorta
   nas laterais de uma tira tão panorâmica. Por isso as 3 tiras continuam com a
   proporção original em qualquer tela — inclusive mobile.

   O empilhamento é CSS puro (position:sticky), na mecânica do bloco "01
   DISCOVER" de lamalama.com/services/branding — mas sem nada de cromo: o
   cartão É a foto. Cada um gruda um degrau (--peek) abaixo do anterior e o
   seguinte sobe por cima, então do coberto sobra uma lâmina da própria foto.
   O texto fica centralizado sobre a foto, sem barra.

   Sem vão em lugar nenhum: os cartões se tocam e a seção termina no fim da
   última foto — o curso de rolagem de cada troca é a altura do próprio cartão,
   não um espaçador vazio. Sem JS nada quebra (sticky degrada para fluxo
   normal); o script só faz o parallax interno da foto. */
.cine{
  /* Lâmina fina de propósito. Degrau grande não funciona aqui: o topo destes
     recortes é céu/prédio escuro, então a faixa que sobrava do cartão coberto
     lia como uma barra preta. Fina, ela vira o que é — a borda da foto de
     baixo, um baralho de fotos empilhadas. */
  --peek:clamp(10px,1.6vh,18px);
  --nav:clamp(56px,7vh,68px);      /* header fixo: a pilha para abaixo dele */
  position:relative; background:var(--ink); color:var(--on-ink);
  padding-block:0;
}
.cine__stack{ display:flex; flex-direction:column }

/* ---- cartão = a foto --------------------------------------------------- */
/* altura fixa (nunca acima dos 361px nativos do recorte) em vez de
   aspect-ratio: assim a banda fica alta o bastante para dar curso de rolagem
   à transição, e o cover só recorta nas laterais — que é de graça numa tira
   panorâmica. Passar de 361 é que borrava a foto nas versões anteriores. */
.cine__card{
  position:sticky; top:calc(var(--nav) + var(--panel,0) * var(--peek));
  height:clamp(210px,34svh,330px);
  overflow:hidden; isolation:isolate; background:var(--ink);
  display:grid; place-items:center;
  padding:0 var(--gut);
  /* a sombra pra cima é o que faz o cartão de cima parecer pousado sobre o de
     baixo — sem ela a pilha lê como uma foto só, cortada */
  box-shadow:0 -22px 46px rgba(0,0,0,.55);
}
.cine__card[data-panel="0"]{ --panel:0; z-index:1 }
.cine__card[data-panel="1"]{ --panel:1; z-index:2 }
.cine__card[data-panel="2"]{ --panel:2; z-index:3 }

/* a foto é 112% do cartão para sobrar curso ao parallax interno (--py) */
.cine__img{
  position:absolute; left:0; top:50%; width:100%; height:112%;
  object-fit:cover; z-index:-2;
  transform:translate3d(0,calc(-50% + var(--py,0px)),0);
}
/* véu suave, não barra: escurece o miolo só o bastante pro texto pegar */
.cine__card::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(72% 100% at 50% 50%, rgba(10,10,10,.62), rgba(10,10,10,.14) 92%);
}

/* ---- texto sobre a foto ------------------------------------------------ */
.cine__head{ display:flex; align-items:center; gap:clamp(12px,1.8vw,22px); max-width:min(1000px,100%) }
.cine__n{
  flex:none; font-size:.74rem; font-weight:700; letter-spacing:.16em;
  color:var(--accent); font-variant-numeric:tabular-nums;
  text-shadow:0 1px 16px rgba(10,10,10,.85);
}
.cine__q{
  margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.12;
  font-size:clamp(1.2rem,2.9vw,2.4rem);
  text-shadow:0 2px 26px rgba(10,10,10,.75);
}
.cine__q--em{color:var(--on-ink-muted)}
.cine__by{
  position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(14px,2vw,22px);
  display:flex; align-items:center; justify-content:center; gap:12px; margin:0;
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-ink-muted);
  text-shadow:0 1px 18px rgba(10,10,10,.9);
}

@media (max-width:640px){
  .cine{ --peek:10px; --nav:52px }
  .cine__q{ font-size:1.12rem; line-height:1.24 }
}

/* ====================== 12. NOSSA HISTÓRIA =============================== */
/* Seção de texto: o peso vem da tipografia e dos números, não de foto. */
.story{background:var(--sand)}
.story__grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,80px);
  align-items:start;
}
.story__copy{max-width:62ch}
.story__copy .body + .body{margin-top:1.1em}
.story__copy strong{color:var(--text); font-weight:600}

/* números da operação — ficam em coluna, como uma ficha */
.facts{display:grid; gap:2px}
.facts li{
  display:grid; gap:4px; padding:20px 0; border-top:1px solid var(--line);
}
.facts li:last-child{border-bottom:1px solid var(--line)}
.facts b{
  font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:600; line-height:1;
  letter-spacing:-.03em;
}
.facts span{font-size:.86rem; color:var(--faint)}

/* missão · visão · valores */
.values{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(44px,5vw,76px);
}
.value{
  display:flex; flex-direction:column; padding:clamp(24px,2.4vw,34px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.value:hover{border-color:var(--faint); transform:translateY(-4px); box-shadow:0 18px 40px rgba(17,17,17,.08)}
.value__k{
  margin:0 0 18px; font-size:.7rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
}
.value__t{
  margin:0; font-weight:600; font-size:clamp(1.08rem,1.5vw,1.3rem);
  line-height:1.25; letter-spacing:-.02em;
}
.value__d{margin:14px 0 0; font-size:.94rem; color:var(--muted)}
.value__ul{display:grid; gap:14px; margin-top:2px}
.value__ul li{display:grid; gap:3px; padding-top:14px; border-top:1px solid var(--line)}
.value__ul li:first-child{padding-top:0; border-top:0}
.value__ul b{font-size:.95rem; font-weight:600}
.value__ul span{font-size:.86rem; color:var(--faint)}

/* ========================== 13. SHOWROOM ================================= */
.showroom__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,84px); align-items:center;
}
.showroom__fig{position:relative}
.showroom__copy{max-width:480px}
.addr{
  display:grid; gap:5px; margin:clamp(26px,3vw,38px) 0 clamp(26px,3vw,36px);
  padding-left:20px; border-left:2px solid var(--accent);
  font-size:1rem; color:var(--muted);
}
.addr span:first-child{color:var(--text); font-weight:600}
.showroom__acts{display:flex; align-items:center; gap:24px; flex-wrap:wrap}

/* ========================= 14. EXPERIÊNCIA =============================== */
.xp{background:var(--sand)}
.steps{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,36px)}
.steps__rail{position:absolute; top:0; left:0; right:0; height:1px; background:var(--line)}
.steps__rail i{
  display:block; height:100%; background:var(--ink);
  transform:scaleX(var(--p,0)); transform-origin:left; transition:transform .18s linear;
}
.step{position:relative; padding-top:clamp(28px,3vw,40px)}
.step::before{
  content:""; position:absolute; top:-3.5px; left:0; width:8px; height:8px; border-radius:50%;
  background:var(--line); transition:background .45s var(--ease), box-shadow .45s var(--ease);
}
.step.lit::before{background:var(--ink); box-shadow:0 0 0 4px rgba(17,17,17,.08)}
.step__n{
  display:block; font-size:.78rem; font-weight:700; letter-spacing:.14em;
  color:var(--accent); margin-bottom:14px;
}
.step__t{font-weight:600; font-size:clamp(1.15rem,1.6vw,1.4rem); margin:0 0 10px; letter-spacing:-.02em}
.step__d{margin:0; font-size:.94rem; color:var(--muted); max-width:32ch}

/* ========================== 15. INSTAGRAM ================================ */
.igGrid{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(8px,.9vw,14px)}
.igCell{position:relative; display:block; border-radius:var(--r-sm); overflow:hidden}
.igCell .ph{border-radius:0; border:0}
.igCell__v{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  font-size:.78rem; font-weight:600; color:var(--paper); background:rgba(17,17,17,.42);
  opacity:0; transition:opacity .35s var(--ease);
}
@media (hover:hover){
  .igCell:hover .igCell__v{opacity:1}
}

/* =================== 16. AVALIAÇÕES DO GOOGLE ============================ */
/* Estrutura inspirada em references/review-google-reference.jpg: título e nota
   centralizados, coluna fixa à esquerda com as aspas e o controle de arrasto,
   e um trilho de cards em balão que corre até a borda direita da tela.
   A paleta é a do site — dourado no lugar do verde da referência. */
.proof{background:var(--sand)}
.gr__head{margin-bottom:clamp(46px,5.4vw,82px)}

/* ---- nota média, logo abaixo do título ---- */
.gscore{
  display:flex; align-items:center; justify-content:center; gap:clamp(12px,1.6vw,22px);
  flex-wrap:wrap; margin:clamp(22px,2.6vw,34px) 0 0;
}
.gscore__n{font-size:1.05rem; color:var(--muted); line-height:1}
.gscore__n b{font-size:1.35rem; font-weight:600; letter-spacing:-.02em; color:var(--text)}
.gscore__brand{display:inline-flex; align-items:center; gap:8px}
.gscore__g{width:22px; height:22px; flex:none}
.gscore__brand b{font-size:1.18rem; font-weight:700; letter-spacing:-.03em}
.gscore__c{font-size:.9rem; color:var(--faint)}

/* ---- estrelas: uma camada cinza e uma dourada recortada por --v ---- */
.stars{
  --v:0%;
  position:relative; display:inline-block; flex:none;
  /* max-content trava a largura no tamanho das cinco estrelas: dentro de um
     flex em coluna o span esticaria, e o --v passaria a ser % da largura do
     card — as cinco estrelas ficariam douradas em qualquer nota */
  width:max-content;
  font-size:1rem; line-height:1; letter-spacing:.12em; color:var(--line);
}
.stars::before{content:"★★★★★"}
.stars i{
  position:absolute; inset:0; width:var(--v); overflow:hidden;
  white-space:nowrap; font-style:normal; color:#e0a92a;
}
.stars i::before{content:"★★★★★"}

/* ---- grade: coluna fixa + trilho sangrando pela direita ----
   O padding da esquerda repete a conta do .shell, para a coluna alinhar com o
   resto do site; à direita não há padding, então o trilho vaza de propósito. */
.gr__grid{
  display:grid; grid-template-columns:minmax(200px,290px) minmax(0,1fr);
  gap:clamp(28px,4vw,72px); align-items:start;
  padding-left:max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));
}

.gr__side{padding-top:6px}
.gr__mk{
  display:block; font-size:5.2rem; line-height:.72; color:var(--line);
  font-weight:700; margin-bottom:22px;
}
.gr__t{
  margin:0; font-weight:600; letter-spacing:-.025em; line-height:1.18;
  font-size:clamp(1.3rem,2vw,1.75rem);
}
.gr__t em{font-style:normal; color:var(--faint)}

/* setas + trilho de progresso */
.gr__nav{display:flex; align-items:center; gap:14px; margin-top:clamp(30px,3.4vw,44px)}
.gr__arw{
  width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:50%;
  color:var(--text); transition:background .3s var(--ease), color .3s var(--ease), opacity .3s;
}
.gr__arw svg{width:19px; height:19px}
.gr__arw:hover{background:var(--paper)}
.gr__arw[disabled]{opacity:.28; cursor:default}
.gr__arw[disabled]:hover{background:none}
.gr__bar{flex:1; height:1px; background:var(--line); position:relative; overflow:hidden}
.gr__bar i{
  position:absolute; inset:0 auto 0 0; display:block; height:100%;
  width:var(--w,30%); background:var(--ink);
  transform:translateX(var(--x,0)); transition:transform .25s var(--ease), width .25s var(--ease);
}
.gr__all{margin-top:clamp(26px,3vw,38px); display:inline-flex}
/* sem nada para arrastar (poucas avaliações), o controle some */
.gr--static .gr__nav{display:none}

/* ---- trilho ---- */
.gr__rail{
  display:flex; gap:clamp(14px,1.6vw,22px);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:0 var(--gut) 10px 0;
  scrollbar-width:none; -ms-overflow-style:none;
}
.gr__rail::-webkit-scrollbar{display:none}
.gr__rail:focus-visible{outline:2px solid var(--ink); outline-offset:4px}

/* ---- card em balão ---- */
.gq{
  flex:0 0 clamp(258px,25vw,330px); scroll-snap-align:start;
  display:flex; flex-direction:column;
}
.gq__bubble{
  position:relative; flex:1; display:flex; flex-direction:column; gap:22px;
  background:var(--paper);
  /* canto de baixo à esquerda reto: é de lá que o bico sai */
  border-radius:var(--r) var(--r) var(--r) 0;
  padding:clamp(24px,2.2vw,30px);
  /* drop-shadow em vez de box-shadow: o filtro é aplicado ao desenho final do
     elemento, então a sombra contorna o balão E o bico como uma peça só. Com
     box-shadow ela cortaria reto na base do card e passaria por trás do bico,
     deixando uma faixa atravessada — era o que quebrava o balão. */
  filter:drop-shadow(0 10px 20px rgba(17,17,17,.07));
  transition:transform .4s var(--ease), filter .4s var(--ease);
}
.gq:hover .gq__bubble{
  transform:translateY(-4px);
  filter:drop-shadow(0 18px 30px rgba(17,17,17,.11));
}
/* bico: sai do canto reto, aresta esquerda alinhada com a do balão */
.gq__bubble::after{
  content:""; position:absolute; left:0; bottom:-15px; width:26px; height:16px;
  background:var(--paper); clip-path:polygon(0 0, 100% 0, 0 100%);
}
.gq__bubble blockquote p{
  margin:0; font-size:.98rem; line-height:1.62; color:var(--muted);
}
.gq__bubble .stars{margin-top:auto}
/* foto que o próprio cliente postou junto da avaliação — quando existe */
.gq__carro{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-sm)}

/* autor: fora do balão, como na referência */
.gq__who{display:flex; align-items:center; gap:12px; padding:26px 0 0 6px}
.gq__av{
  width:44px; height:44px; flex:none; border-radius:50%; object-fit:cover;
  display:grid; place-items:center; background:var(--sand-2); color:var(--muted);
  font-size:1.02rem; font-weight:600; text-transform:uppercase;
}
.gq__id{display:grid; gap:2px; min-width:0}
.gq__id b{font-size:.95rem; font-weight:600}
.gq__id i{font-style:normal; font-size:.78rem; color:var(--faint)}

/* espaço reservado: mesmo balão, texto apagado, sem fingir conteúdo real */
.gq--ph .gq__bubble blockquote p,
.gq--ph .gq__id b{color:var(--faint)}

/* ======================= 17. COMO CHEGAR (MAPA) ========================== */
/* O mapa é um iframe público do Google (output=embed): sem chave, sem custo.
   A moldura repete o tratamento das mídias — raio, contorno e recorte. */
.place__grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,80px); align-items:center;
}
.place__copy{max-width:480px}
.hours{display:grid; margin:0 0 clamp(26px,3vw,36px)}
.hours li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.hours li:first-child{border-top:1px solid var(--line)}
.hours b{font-size:.95rem; font-weight:600}
.hours span{font-size:.9rem; color:var(--faint)}
.place__acts{display:flex; align-items:center; gap:24px; flex-wrap:wrap}

/* entrega em todo o Brasil — bloco de recuperação para quem é de fora */
.ship{
  display:flex; gap:16px; margin-top:clamp(30px,3.4vw,42px);
  padding:clamp(20px,2.2vw,26px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
}
.ship__ico{
  display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:50%;
  background:var(--sand); color:var(--accent);
}
.ship__ico svg{width:22px; height:22px}
.ship__txt{display:grid; gap:8px; justify-items:start}
.ship__txt b{font-size:.98rem; font-weight:600; line-height:1.35}
.ship__txt p{margin:0; font-size:.9rem; color:var(--muted)}
.ship__txt .ulink{font-size:.85rem; margin-top:4px}

.place__map{
  position:relative; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:var(--sand-2);
}
.place__map iframe{display:block; width:100%; height:clamp(320px,42vw,520px); border:0}

/* ====================== 18. PÁGINA DO CATÁLOGO =========================== */
/* catalogo.html — hero com foto, painel de filtro flutuante e grade. */

/* ---- hero ---- */
/* Escuro, como o hero da home e o CTA final: o preto é a âncora da paleta.
   O veículo é o recorte sem fundo de assets/cars/, não uma foto de banco. */
.chero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:var(--on-ink);
  padding-block:clamp(122px,13vw,168px) clamp(96px,11vw,150px);
}
.chero__photo{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:68% 55%;
}
/* Véu por cima da foto inteira: escurece a esquerda (onde o texto senta) e
   deixa a direita mais visível, na mesma diagonal que o recorte usava antes.
   Uma segunda camada, mais leve, escurece topo e rodapé — sem ela um céu
   muito claro brigaria com o header. */
.chero__veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(96deg,
      var(--ink) 16%, rgba(17,17,17,.88) 36%, rgba(17,17,17,.42) 60%, rgba(17,17,17,.14) 82%, transparent 100%),
    linear-gradient(180deg, rgba(8,8,8,.30) 0%, transparent 22%, transparent 70%, rgba(8,8,8,.28) 100%);
}
.chero__in{position:relative}
.chero .crumb{color:var(--on-ink-faint)}
.chero .crumb a:hover{color:var(--on-ink)}
.chero .crumb b{color:var(--on-ink-muted); font-weight:500}
.chero__h{
  margin:clamp(20px,2.4vw,30px) 0 0; font-weight:600;
  font-size:clamp(2.3rem,5.4vw,4.4rem); line-height:1.03; letter-spacing:-.035em;
  max-width:14ch;
}
.chero__h em{font-style:normal; color:var(--on-ink-muted)}
.chero__p{
  margin:clamp(18px,2vw,26px) 0 0; max-width:44ch;
  font-size:1.06rem; color:var(--on-ink-muted);
}
/* selos de confiança — é aqui que entra a entrega para todo o Brasil */
.chero__trust{
  display:flex; flex-wrap:wrap; gap:12px 28px; margin:clamp(28px,3.2vw,40px) 0 0;
}
.chero__trust li{
  display:flex; align-items:center; gap:10px;
  font-size:.88rem; font-weight:500; color:var(--on-ink-muted);
}
.chero__trust svg{width:19px; height:19px; flex:none; color:var(--accent-lt)}

/* ---- painel de filtro, flutuando sobre a borda do hero ---- */
.fp__hold{position:relative; z-index:2; margin-top:clamp(-70px,-6vw,-52px)}
.fp{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px);
  padding:clamp(22px,2.4vw,30px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 26px 60px rgba(17,17,17,.14);
}
.fp__f{display:grid; gap:8px; align-content:start; min-width:0}
.fp__f--wide{grid-column:span 2}
.fp__lb{
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint);
}

/* select com seta própria: a nativa muda de forma em cada sistema */
.fp__s{
  width:100%; padding:12px 38px 12px 14px; font:inherit; font-size:.92rem; color:var(--text);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534d' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  transition:border-color .3s var(--ease);
}
.fp__s:hover{border-color:var(--faint)}
.fp__s:focus{outline:none; border-color:var(--ink)}

/* valor do orçamento — o número é o retorno visual do arrasto */
.fp__out{
  font-size:1.06rem; font-weight:600; letter-spacing:-.02em; color:var(--text);
  line-height:1.5;
}
.fp__r{
  width:100%; height:22px; margin:0; padding:0; appearance:none; -webkit-appearance:none;
  background:none; cursor:pointer;
}
.fp__r::-webkit-slider-runnable-track{height:2px; background:var(--line); border-radius:2px}
.fp__r::-moz-range-track{height:2px; background:var(--line); border-radius:2px}
.fp__r::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none; width:16px; height:16px; margin-top:-7px;
  border-radius:50%; background:var(--ink); border:0; cursor:pointer;
  transition:transform .2s var(--ease);
}
.fp__r::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--ink); border:0; cursor:pointer;
}
.fp__r:hover::-webkit-slider-thumb{transform:scale(1.15)}
.fp__r:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(17,17,17,.16)}

.fp__act{display:flex; align-items:flex-end}
.fp__go{width:100%; justify-content:center}
.fp__go[disabled]{opacity:.45; cursor:default; transform:none}
.fp__go[disabled]:hover{background:var(--ink); box-shadow:none; transform:none}

/* ---- grade ---- */
.catalog{padding-top:clamp(44px,5vw,72px)}
.catalog .note{margin:0 0 clamp(26px,3vw,38px)}
.catalog__bar{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  margin:0 0 clamp(20px,2.2vw,28px);
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.catalog__count{margin:0; font-size:.88rem; color:var(--faint)}
.catalog__clear{font-size:.85rem}
/* .ulink é inline-flex e passaria por cima do atributo hidden */
.catalog__clear[hidden]{display:none}
.catalog__empty{margin:clamp(40px,5vw,70px) 0; text-align:center; color:var(--muted)}

.crumb{display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--faint)}
.crumb a{transition:color .3s}
.crumb a:hover{color:var(--text)}
.crumb b{font-weight:500; color:var(--text)}
.catalog code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em;
  padding:2px 6px; border-radius:6px; background:var(--sand); color:var(--muted);
}

/* grade que quebra linha — diferente de .cards, que vira carrossel no mobile */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,24px)}

/* ==================== 19. DETALHE DO VEÍCULO ============================= */
/* Inspirado em references/mobile-design-reference.jpg: galeria com contador,
   dados em cartões que rolam na horizontal e a barra de preço + CTA colada no
   rodapé no celular. O resto do tratamento de celular — foto sangrada, folha
   branca por cima dela, cartão da loja e barra de abas — está na seção 24.

   veiculo.html e o painel que abre no celular usam este mesmo bloco.
   No desktop: galeria à esquerda, ficha à direita, barra de preço colada no
   fim da coluna da ficha. No celular: tudo empilhado e a barra fixa no rodapé
   da tela — é o padrão que mais converte, porque o CTA nunca sai de alcance. */

.vd__crumb{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-top:clamp(104px,11vw,128px); font-size:.8rem; color:var(--faint);
}
.vd__crumb a{transition:color .3s}
.vd__crumb a:hover{color:var(--text)}
.vd__crumb b{font-weight:500; color:var(--text)}

.vd{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,3.6vw,56px); align-items:start;
  padding-block:clamp(24px,3vw,40px) clamp(56px,7vw,100px);
}

/* ---- galeria ---- */
.vd__gal{position:relative; border-radius:var(--r); overflow:hidden; background:var(--sand)}
.vd__track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.vd__track::-webkit-scrollbar{display:none}
.vd__track:focus-visible{outline:2px solid var(--ink); outline-offset:-2px}
.vd__slide{flex:0 0 100%; scroll-snap-align:start; position:relative}
.vd__slide img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block}
.vd__slide--ph .ph{border:0; border-radius:0}

.vd__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--ink);
  box-shadow:0 6px 18px rgba(17,17,17,.16);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.vd__nav svg{width:20px; height:20px}
.vd__nav--prev{left:14px}
.vd__nav--next{right:14px}
.vd__nav:hover{transform:translateY(-50%) scale(1.06)}
.vd__nav[disabled]{opacity:0; pointer-events:none}
.vd__count{
  position:absolute; left:14px; bottom:14px; z-index:2;
  padding:6px 12px; border-radius:var(--pill);
  background:rgba(17,17,17,.62); color:var(--paper);
  font-size:.74rem; font-weight:600; letter-spacing:.03em;
}
.vd__count b{font-weight:700}

/* ---- visualizador de fotos em tela cheia (lightbox) -----------------------
   Clique em qualquer foto da galeria abre aqui. No mobile cobre a tela
   inteira (é a forma natural de ver detalhe numa tela pequena); no desktop
   (media query no fim do arquivo) vira um cartão flutuante, menor que a
   janela, com o véu escuro em volta fechando ao clicar fora. */
.lb{ position:fixed; inset:0; z-index:950; opacity:0; transition:opacity .2s ease }
.lb[hidden]{ display:none }
.lb.on{ opacity:1 }
body.lb-on{ overflow:hidden }
.lb__veu{ position:absolute; inset:0; background:rgba(8,8,8,.94) }
.lb__card{ position:absolute; inset:0; display:grid; place-items:center }
.lb__img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; user-select:none }
.lb__x{
  position:absolute; top:16px; right:16px; z-index:2; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:none; font-size:1rem;
}
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center;
}
.lb__nav svg{ width:22px; height:22px }
.lb__nav--prev{ left:12px }
.lb__nav--next{ right:12px }
.lb__count{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:2;
  color:#fff; font-size:.8rem; font-weight:600; background:rgba(255,255,255,.12);
  padding:5px 12px; border-radius:var(--pill);
}
.lb__count i{font-style:normal}
/* Desktop: não toma a tela inteira — o cartão (onde a foto fica centralizada)
   encolhe pra uma janela flutuante, com o véu escuro alcançável em volta
   pra fechar num clique. Só isto muda entre os dois modos. */
@media (min-width:769px){
  .lb__card{ inset:6vh 7vw }
  .lb__img{ border-radius:var(--r); box-shadow:0 30px 90px rgba(0,0,0,.55) }
  .lb__nav--prev{ left:calc(7vw - 54px) }
  .lb__nav--next{ right:calc(7vw - 54px) }
  .lb__x{ top:calc(6vh - 8px); right:calc(7vw - 8px) }
}

/* ---- ficha ---- */
.vd__sheet{display:grid; gap:clamp(26px,3vw,38px); align-content:start}
.vd__head{display:grid; gap:6px}
.vd__brand{
  margin:0; font-size:.78rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
}
.vd__title{
  margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.08;
  font-size:clamp(1.8rem,3.2vw,2.6rem);
}
.vd__summary{margin:0; font-size:1rem; line-height:1.65; color:var(--muted)}

/* No desktop os cartões quebram linha — não tem gesto de arrastar, e um mouse
   comum não tem como rolar na horizontal, então ficavam cartões inalcançáveis
   fora da tela. No mobile (abaixo, no breakpoint de 768px) eles voltam a ser
   uma faixa que rola por toque, como na referência. */
.vd__specs{
  display:flex; flex-wrap:wrap; gap:10px; padding-bottom:4px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.vd__specs::-webkit-scrollbar{display:none}
.vd__specs li{
  flex:0 0 auto; min-width:118px; display:grid; gap:6px;
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-sm);
}
.vd__specs span{font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.vd__specs b{font-size:.98rem; font-weight:600}

.vd__blk{display:grid; gap:16px}
.vd__h2{
  margin:0; font-size:1.06rem; font-weight:600; letter-spacing:-.02em;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.vd__opts{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 20px}
.vd__opts li{
  position:relative; padding-left:20px; font-size:.92rem; color:var(--muted);
}
.vd__opts li::before{
  content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px;
  border-radius:50%; border:1.5px solid var(--accent);
}
.vd__docs{display:grid; gap:12px}
.vd__docs > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.vd__docs dt{font-size:.86rem; color:var(--faint); flex:none}
.vd__docs dd{margin:0; font-size:.92rem; font-weight:500; text-align:right}

/* ---- barra de preço + CTA ---- */
.vd__bar{
  grid-column:2; display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding:clamp(18px,2vw,22px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 14px 34px rgba(17,17,17,.08);
  position:sticky; bottom:clamp(16px,2.4vw,28px);
}
.vd__price{display:grid; gap:3px; margin:0}
.vd__price span{font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.vd__price b{font-size:clamp(1.3rem,2vw,1.7rem); font-weight:600; letter-spacing:-.03em; line-height:1}
.vd__cta{flex:1; min-width:180px; justify-content:center}

/* ---- veículo não encontrado ---- */
.vd__404{padding-block:clamp(50px,7vw,90px) clamp(70px,9vw,120px); max-width:620px}
.vd__404 .h2{margin-top:6px}
.vd__404acts{display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:clamp(28px,3vw,38px)}

/* ---- painel do celular ---- */
/* Aberto pelo catálogo em telas pequenas. O conteúdo é o mesmo montado pela
   página; muda só a moldura. */
.vdp{
  position:fixed; inset:0; z-index:800; overflow-y:auto; overscroll-behavior:contain;
  background:var(--paper);
  opacity:0; transform:translateY(18px);
  transition:opacity .3s var(--ease), transform .3s var(--ease2);
}
.vdp[hidden]{display:none}
.vdp.open{opacity:1; transform:none}
.vdp__x{
  position:fixed; top:14px; right:14px; z-index:3;
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--ink);
  box-shadow:0 6px 18px rgba(17,17,17,.2);
}
.vdp__x svg{width:19px; height:19px}
.vdp .vd{
  grid-template-columns:1fr; gap:26px; padding-block:0 0;
}
.vdp .vd__gal{border-radius:0}
.vdp .vd__sheet{padding-inline:var(--gut)}

/* ========================== 20. CTA FINAL ================================ */
/* Fecho escuro, emendando com o rodapé. */
.cta{text-align:center; overflow:hidden; isolation:isolate; background:var(--ink); color:var(--on-ink)}
.cta__glow{
  position:absolute; inset:auto 0 -40% 0; height:120%; z-index:-1;
  background:radial-gradient(52% 60% at 50% 100%, rgba(183,154,104,.20), transparent 68%);
}
.cta__in{position:relative}
.cta .kicker{justify-content:center; color:var(--accent-lt)}
.cta__h{font-weight:600; margin:0; font-size:clamp(2.2rem,5.4vw,4.6rem); line-height:1.04; letter-spacing:-.035em}
.cta__h em{font-style:normal; color:var(--on-ink-muted)}
.cta__p{margin:clamp(16px,2vw,24px) 0 clamp(32px,3.6vw,46px); color:var(--on-ink-muted); font-size:1.08rem}
.cta__loc{margin:clamp(30px,3.4vw,44px) 0 0; font-size:.84rem; color:var(--on-ink-faint)}

/* ======================= 21. FOOTER / DOCK =============================== */
.foot{background:var(--ink); color:var(--on-ink); padding-top:clamp(44px,4.6vw,66px)}
.foot__in{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  padding-bottom:clamp(34px,3.6vw,50px);
}
.foot__nav{display:flex; gap:clamp(16px,2.2vw,34px); flex-wrap:wrap}
.foot__nav a{font-size:.92rem; color:var(--on-ink-muted); transition:color .3s}
.foot__nav a:hover{color:var(--on-ink)}
.foot__loc{margin:0; font-size:.8rem; color:var(--on-ink-faint)}
.foot__bar{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-block:22px 28px; border-top:1px solid var(--ink-line);
  font-size:.8rem; color:var(--on-ink-faint);
}

/* ---- chat flutuante (encaminha para o WhatsApp) ---- */
.chat{
  position:fixed; right:clamp(16px,2.4vw,28px); bottom:clamp(16px,2.4vw,28px); z-index:600;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  transform:translateY(140%); transition:transform .5s var(--ease);
}
.chat.up{transform:none}

.chat__fab{
  position:relative; width:58px; height:58px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--ink); color:var(--paper);
  box-shadow:0 12px 30px rgba(17,17,17,.28);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.chat__fab:hover{transform:translateY(-2px) scale(1.04); box-shadow:0 16px 38px rgba(17,17,17,.34)}
.chat__ico{grid-area:1/1; width:25px; height:25px; transition:opacity .25s var(--ease), transform .25s var(--ease)}
.chat__ico--close{opacity:0; transform:rotate(-45deg)}
.chat.open .chat__ico--open{opacity:0; transform:rotate(45deg)}
.chat.open .chat__ico--close{opacity:1; transform:none}
/* ponto de aviso — sai assim que o painel é aberto */
.chat__badge{
  position:absolute; top:3px; right:3px; width:11px; height:11px; border-radius:50%;
  background:#25d366; border:2px solid var(--ink); opacity:0; transform:scale(.4);
  transition:opacity .3s, transform .3s var(--ease);
}
.chat.nudge .chat__badge{opacity:1; transform:none}
.chat.nudge .chat__fab{animation:chatPulse 2.2s var(--ease) 3}
@keyframes chatPulse{
  0%,100%{box-shadow:0 12px 30px rgba(17,17,17,.28), 0 0 0 0 rgba(37,211,102,.5)}
  50%    {box-shadow:0 12px 30px rgba(17,17,17,.28), 0 0 0 12px rgba(37,211,102,0)}
}

.chat__panel{
  width:min(340px, calc(100vw - 32px)); order:-1;
  /* Teto de altura: o painel vive acima do botão flutuante, então o espaço
     disponível é a tela menos o botão (58), o respiro (12) e a margem de baixo.
     svh em vez de vh por causa da barra do navegador no celular. Sem isto, com
     os campos de lead abertos o cabeçalho — e o botão de fechar — sairiam da
     tela em notebooks de tela baixa. */
  max-height:calc(100svh - 118px);
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 24px 60px rgba(17,17,17,.18);
  overflow:hidden; transform-origin:bottom right;
  opacity:0; transform:translateY(10px) scale(.97);
  transition:opacity .28s var(--ease), transform .28s var(--ease2);
}
/* Sem isto o display:flex acima vence o atributo hidden (regra do navegador,
   que sempre perde para o autor) e o painel fechado continua ocupando ~340×500
   invisíveis no meio da tela — engolindo o toque e a roda do mouse de tudo que
   estiver embaixo dele. Era o que travava a rolagem no miolo da página e o
   arrasto do carrossel no celular. */
.chat__panel[hidden]{display:none}
.chat.shown .chat__panel{opacity:1; transform:none}

/* cabeçalho e rodapé não encolhem; o miolo rola quando não couber */
.chat__scroll{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain}
.chat__hd,.chat__ft{flex:none}

.chat__hd{display:flex; align-items:center; gap:12px; padding:16px 14px 16px 18px; border-bottom:1px solid var(--line)}
.chat__av{width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--sand); color:var(--ink)}
.chat__av img{height:20px; width:auto}
.chat__id{display:grid; gap:2px; flex:1; min-width:0}
.chat__id b{font-size:.92rem; font-weight:600}
.chat__id i{display:flex; align-items:center; gap:6px; font-style:normal; font-size:.76rem; color:var(--faint)}
.chat__dot{width:6px; height:6px; border-radius:50%; background:#25d366; flex:none}
.chat__x{width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:50%; color:var(--faint); transition:background .25s, color .25s}
.chat__x svg{width:16px; height:16px}
.chat__x:hover{background:var(--sand); color:var(--text)}

.chat__body{padding:18px 18px 4px}
.chat__msg{
  margin:0; padding:13px 15px; border-radius:var(--r-sm) var(--r-sm) var(--r-sm) 4px;
  background:var(--sand); font-size:.9rem; line-height:1.5; color:var(--muted);
}

/* ---- triagem (triagem.js) ----
   A resposta escolhida volta como fala do visitante: sem esse eco a conversa
   vira formulário, e ele perde de vista o que já respondeu. */
.chat__body{display:grid; gap:10px; justify-items:start}
.chat__msg--eu{
  justify-self:end; max-width:85%;
  border-radius:var(--r-sm) var(--r-sm) 4px var(--r-sm);
  background:var(--ink); color:var(--on-ink);
}
/* quantos veículos existem naquele segmento — a contagem faz a escolha ser
   informada em vez de chute */
.chat__optN{
  float:right; font-style:normal; font-size:.78rem; font-weight:500; color:var(--faint);
}
.chat__opt.sel .chat__optN{color:var(--on-ink-faint)}

.chat__hits{display:grid; gap:6px; margin:0; padding:0; list-style:none; width:100%}
.chat__hits a{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:11px 14px; border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .25s var(--ease);
}
.chat__hits a:hover{border-color:var(--ink)}
.chat__hits b{font-size:.86rem; font-weight:600}
.chat__hits i{font-style:normal; font-size:.82rem; color:var(--muted); white-space:nowrap}
.chat__again{color:var(--faint); text-align:center}

.chat__opts{display:grid; gap:8px; padding:14px 18px 4px}
.chat__opt{
  text-align:left; padding:11px 14px; border-radius:var(--pill);
  border:1px solid var(--line); background:var(--paper);
  font-size:.86rem; font-weight:500; color:var(--text);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.chat__opt:hover{border-color:var(--ink); transform:translateX(2px)}
.chat__opt.sel{background:var(--ink); border-color:var(--ink); color:var(--paper)}

/* ---- captura de lead: nome, WhatsApp e consentimento ---- */
.chat__form{display:grid; gap:12px; padding:16px 18px 4px}
.chat__form[hidden]{display:none}
.chat__f{display:grid; gap:6px}
.chat__f span{font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.chat__f input{
  width:100%; padding:11px 14px; font:inherit; font-size:.9rem; color:var(--text);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .3s var(--ease);
}
.chat__f input::placeholder{color:var(--faint)}
.chat__f input:focus{outline:none; border-color:var(--ink)}
.chat__ok{display:flex; align-items:flex-start; gap:9px; cursor:pointer}
.chat__ok input{margin:2px 0 0; width:15px; height:15px; flex:none; accent-color:var(--ink)}
.chat__ok span{font-size:.78rem; line-height:1.45; color:var(--faint)}
.chat__err{
  margin:0; padding:9px 12px; border-radius:var(--r-sm);
  font-size:.78rem; line-height:1.4; color:#8c2f2f; background:#fbf0f0;
}
.chat__err[hidden]{display:none}
/* o campo que faltou ganha contorno, junto com a mensagem */
.chat__form.err input:invalid{border-color:#c46a6a}

.chat__ft{padding:16px 18px 18px; display:grid; gap:10px; justify-items:stretch}
.chat__go{width:100%}
.chat__note{margin:0; text-align:center; font-size:.74rem; color:var(--faint)}

/* ============================ 22. MOTION ================================= */
.rv{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv--1{transition-delay:.08s} .rv--2{transition-delay:.16s} .rv--3{transition-delay:.24s}

/* reveal por máscara (clip-path) para imagens grandes */
.rv-mask{clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease2)}
.rv-mask.in{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv,.rv-mask{opacity:1 !important; transform:none !important; clip-path:none !important}
  .mask > span{transform:none !important}
  .hero__seq{clip-path:none !important; transform:none !important; opacity:1 !important}
  .hero__place,.hero__sub,.hero__cta,.scroll{opacity:1 !important; transform:none !important}
  [data-parallax]{transform:none !important}
}

/* ========================== 23. RESPONSIVO =============================== */

/* ---- 1800+ ---- */
@media (min-width:1800px){
  :root{--max:1480px}
  .hero__h1{font-size:6rem}
}

/* ---- 1024 ---- */
@media (max-width:1024px){
  .nav{display:none}
  .burger{display:flex}
  .showroom__grid{grid-template-columns:1fr; gap:clamp(30px,5vw,50px)}
  .showroom__fig{max-width:640px}
  .showroom__fig{order:2}
  .steps{grid-template-columns:repeat(2,1fr); row-gap:clamp(30px,4.4vw,46px)}
  .igGrid{grid-template-columns:repeat(3,1fr)}

  /* avaliações: a coluna das aspas passa a ficar acima do trilho */
  .gr__grid{
    grid-template-columns:1fr; gap:clamp(26px,4vw,40px);
    padding-right:0;
  }
  .gr__side{display:grid; grid-template-columns:1fr auto; align-items:end; column-gap:24px}
  .gr__mk{grid-column:1; margin-bottom:12px}
  .gr__t{grid-column:1; max-width:22ch}
  .gr__nav{grid-column:1; margin-top:26px}
  .gr__all{grid-column:2; grid-row:2 / span 2; align-self:end; margin-top:0}

  .story__grid,.place__grid{grid-template-columns:1fr; gap:clamp(30px,5vw,50px)}
  .values{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}

  /* catálogo: painel em duas colunas; o carro deixa de dividir o espaço com o
     texto e vira textura de fundo — com menos largura, não há como pôr um ao
     lado do outro sem que o título passe por cima do capô. */
  .fp{grid-template-columns:repeat(2,1fr)}
  .chero{padding-block:clamp(112px,14vw,140px) clamp(120px,14vw,150px)}
  /* menos largura, mais texto disputando espaço com a foto: o véu cobre mais */
  .chero__veil{
    background:
      linear-gradient(96deg,
        var(--ink) 34%, rgba(17,17,17,.94) 62%, rgba(17,17,17,.72) 86%, rgba(17,17,17,.55) 100%),
      linear-gradient(180deg, rgba(8,8,8,.30) 0%, transparent 22%, transparent 70%, rgba(8,8,8,.28) 100%);
  }
}

/* ---- 768 : carrossel de cards, dock de WhatsApp ---- */
@media (max-width:768px){
  .hdr__cta{display:none}

  /* pista mais curta no mobile: menos rolagem até o conteúdo */
  .hero{--hero-run:240svh}
  .hero__in{padding-bottom:150px}
  /* O indicador é um link de 100svh de altura no meio da tela. No dedo isso
     vira uma faixa que engole o gesto de rolar no miolo do hero — e ninguém
     toca em "scroll" no celular. Fica só como enfeite. */
  .scroll{padding-bottom:24px; gap:8px; pointer-events:none}
  .scroll__lb{display:none}
  .scroll__line{height:32px}

  .cards{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -ms-overflow-style:none;
    margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); padding-bottom:6px;
    /* o card inteiro é coberto por um link (.card__link): sem isto o navegador
       trata o arrasto como início de arrasto de link e o carrossel não anda */
    touch-action:pan-x pan-y; overscroll-behavior-x:contain;
  }
  .card__link{-webkit-user-drag:none; -webkit-touch-callout:none}
  .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 82%; scroll-snap-align:center}
  .cards__hint{display:block; margin:16px 0 0; text-align:center; font-size:.8rem; color:var(--faint)}

  .steps{grid-template-columns:1fr; gap:0}
  .steps__rail{top:0; bottom:0; left:0; right:auto; width:1px; height:auto}
  .steps__rail i{width:100%; height:100%; transform:scaleY(var(--p,0)); transform-origin:top}
  .step{padding:24px 0 24px 24px}
  .step::before{top:28px; left:-3.5px}
  .step__n{margin-bottom:8px}

  .igGrid{grid-template-columns:repeat(2,1fr)}

  .chat{right:16px; bottom:16px}
  .foot{padding-bottom:96px}
  .secHead--split{align-items:flex-start; flex-direction:column}

  /* avaliações: card quase inteiro na tela, e o link volta para baixo */
  .gq{flex-basis:78%}
  .gr__side{grid-template-columns:1fr}
  .gr__all{grid-column:1; grid-row:auto; margin-top:26px}
  .gr__mk{font-size:4.2rem}

  /* catálogo: painel em uma coluna e grade de um card por linha */
  .grid{grid-template-columns:1fr}

  /* detalhe: tudo empilhado e a barra de preço fixa no rodapé da tela, para o
     CTA nunca sair de alcance durante a rolagem */
  .vd{grid-template-columns:1fr; gap:26px}
  .vd__opts{grid-template-columns:1fr}
  .vd__bar{
    grid-column:1; position:fixed; left:0; right:0; bottom:0; z-index:700;
    border-radius:0; border-left:0; border-right:0; border-bottom:0;
    padding:14px var(--gut) calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 30px rgba(17,17,17,.12);
  }
  /* espaço para a barra fixa não cobrir o fim do conteúdo */
  .vd{padding-bottom:104px}
  .vdp .vd{padding-bottom:104px}
  /* com a barra ocupando o rodapé, o dock do WhatsApp sairia por cima dela */
  body:has(#vdPage .vd__bar) .chat{bottom:92px}
  .fp{grid-template-columns:1fr}
  .fp__f--wide{grid-column:span 1}
  .catalog__bar{flex-direction:column; align-items:flex-start; gap:10px}
}

/* ---- 430 / 360 ---- */
@media (max-width:430px){
  .hero__h1{font-size:clamp(2rem,8.6vw,2.6rem); max-width:none}
  .hero__cta{flex-direction:column; align-items:stretch}
  .hero__cta .btn{width:100%}
  .card{flex-basis:86%}
  .marks li{flex-direction:column; gap:2px; padding:13px 0}
  .marks b{min-width:0}
  .foot__in{flex-direction:column; align-items:flex-start; gap:22px}
  .foot__bar{flex-direction:column; gap:8px}
}
@media (max-width:360px){
  :root{--gut:18px}
  .logo__type b{font-size:.86rem; letter-spacing:.12em}
}

/* =============================================================================
   24. CAMADA DE APP — CELULAR (≤ 768px)

   Referência: references/mobile-design-reference.jpg.

   No telefone o site deixa de ser "o desktop empilhado" e passa a se comportar
   como o app da referência: barra de abas fixa embaixo, contexto e filtros em
   pílulas que rolam na horizontal, faixa de categorias com foto, cards de foto
   inteira e — na ficha do veículo — foto sangrada no topo com a folha branca
   subindo por cima dela e o preço colado no rodapé da tela.

   Tudo aqui vive dentro da media query: no desktop nenhuma destas regras
   existe, e o layout de duas colunas continua exatamente como estava.
   ============================================================================ */

/* abas, chips, faixa de categorias e o véu da folha de filtro só existem no
   celular — o JS os monta em qualquer largura, e é aqui que eles ficam fora
   do caminho no desktop */
.tabs,.cbar,.ccats,.fp__veil{display:none}
/* mesma armadilha do painel do chat: quem liga o display na media query
   precisa devolver o hidden, senão o bloco vazio ocupa a tela */
.cbar[hidden],.ccats[hidden]{display:none}

@media (max-width:768px){

  :root{ --tabs-h:72px; --hdr-h:72px; }

  /* espaço para a barra de abas não cobrir o fim das páginas */
  .foot{padding-bottom:calc(var(--tabs-h) + 40px + env(safe-area-inset-bottom))}

  /* ---- barra de abas ------------------------------------------------- */
  .tabs{
    position:fixed; left:0; right:0; bottom:0; z-index:800;
    display:flex; align-items:stretch;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    /* altura fechada: a barra de preço da ficha se apoia nela pelo mesmo token */
    height:calc(var(--tabs-h) + env(safe-area-inset-bottom));
  }
  .tabs__i{
    flex:1; display:grid; justify-items:center; align-content:center; gap:4px;
    padding:8px 4px; color:var(--faint); border-radius:12px;
    transition:color .3s var(--ease), background .3s var(--ease);
  }
  .tabs__i svg{width:22px; height:22px}
  .tabs__i span{font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
  .tabs__i[aria-current="page"]{color:var(--ink)}
  .tabs__i:active{background:var(--sand)}

  /* o dock de WhatsApp sobe para não brigar com as abas */
  .chat{bottom:calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom))}
  .chat__panel{max-height:calc(100svh - var(--tabs-h) - 120px)}

  /* ---- catálogo: topo compacto -------------------------------------- */
  /* O hero alto do desktop viraria meia tela de rolagem antes do primeiro
     carro. No celular ele encolhe para o tamanho de um cabeçalho de app. */
  .chero{padding-block:calc(var(--hdr-h) + 22px) 26px}
  .chero__h{font-size:clamp(1.9rem,8vw,2.4rem)}
  .chero__p{font-size:.94rem; max-width:34ch}
  .chero__trust{display:none}
  /* hero baixo no celular: a seção é curta (cabe só o cabeçalho + o texto),
     então o véu precisa cobrir a faixa do texto sem apagar a foto por
     completo — do jeito que estava antes, ficava basicamente uma tela
     preta com o carro imperceptível atrás. */
  .chero__photo{object-position:80% 45%}
  .chero__veil{
    background:
      linear-gradient(100deg, var(--ink) 20%, rgba(17,17,17,.82) 48%, rgba(17,17,17,.34) 76%, rgba(17,17,17,.12) 100%),
      linear-gradient(180deg, rgba(8,8,8,.22) 0%, transparent 30%, transparent 62%, rgba(8,8,8,.24) 100%);
  }

  /* ---- barra de contexto + chips ------------------------------------- */
  .cbar{
    display:block;
    position:sticky; top:var(--hdr-h); z-index:400;
    background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    padding:12px 0 10px;
  }
  .cbar__ctx,.cbar__chips{
    display:flex; gap:8px; overflow-x:auto;
    padding-inline:var(--gut); scrollbar-width:none; -ms-overflow-style:none;
  }
  .cbar__ctx::-webkit-scrollbar,.cbar__chips::-webkit-scrollbar{display:none}
  .cbar__chips{margin-top:10px}
  .cbar__pill{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
    padding:8px 14px; border-radius:var(--pill);
    background:var(--sand); color:var(--muted);
    font-size:.78rem; font-weight:500; white-space:nowrap;
  }
  .cbar__pill svg{width:15px; height:15px; color:var(--accent)}

  .cchip{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
    padding:9px 15px; border-radius:var(--pill);
    border:1px solid var(--line); background:var(--paper); color:var(--text);
    font:inherit; font-size:.82rem; font-weight:500; white-space:nowrap;
    transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  }
  .cchip svg{width:16px; height:16px}
  /* chip ligado = fundo escuro, como a pílula de faixa de preço da referência */
  .cchip.is-on{background:var(--ink); border-color:var(--ink); color:var(--on-ink)}

  /* ---- faixa de categorias ------------------------------------------- */
  .ccats{display:block; padding:18px 0 4px}
  .ccats__row{
    display:flex; gap:12px; margin:0; padding:0 var(--gut); list-style:none;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  }
  .ccats__row::-webkit-scrollbar{display:none}
  .ccat{
    width:104px; display:grid; gap:8px; padding:0; border:0; background:none;
    font:inherit; text-align:left; color:var(--text);
  }
  .ccat__ph{
    display:block; height:74px; border-radius:12px; overflow:hidden;
    background:var(--sand-2); border:2px solid transparent;
    transition:border-color .25s var(--ease);
  }
  .ccat__ph img{width:100%; height:100%; object-fit:cover}
  .ccat.is-on .ccat__ph{border-color:var(--ink)}
  .ccat__n{font-size:.76rem; font-weight:600; line-height:1.25}
  .ccat__n i{font-style:normal; font-weight:500; color:var(--faint)}

  /* ---- painel de filtro como folha inferior -------------------------- */
  /* O suporte tem z-index no desktop (é ele que faz o painel flutuar sobre o
     hero). Aqui ele precisa sair do caminho: com contexto de empilhamento
     próprio, o z-index da folha valeria só dentro dele e o véu passaria por
     cima do modal inteiro. */
  .fp__hold{position:static; z-index:auto; margin-top:16px; padding-inline:0}
  .fp{
    position:fixed; left:0; right:0; bottom:0; z-index:850;
    max-height:82svh; overflow-y:auto; overscroll-behavior:contain;
    border-radius:22px 22px 0 0; border-bottom:0;
    padding:0 var(--gut) calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -18px 44px rgba(17,17,17,.22);
    transform:translateY(102%);
    /* a visibilidade só cai DEPOIS do deslize, senão a folha some de um
       quadro para o outro na saída e a animação de fechar não aparece */
    transition:transform .34s var(--ease), visibility 0s linear .34s;
    visibility:hidden;
  }
  body.fp-on .fp{transform:none; visibility:visible; transition:transform .34s var(--ease), visibility 0s}
  .fp__veil{
    display:block; position:fixed; inset:0; z-index:840;
    background:rgba(17,17,17,.42);
    opacity:0; pointer-events:none; transition:opacity .34s var(--ease);
  }
  body.fp-on .fp__veil{opacity:1; pointer-events:auto}
  .fp__hd{
    position:sticky; top:0; z-index:2; background:var(--paper);
    display:flex; align-items:center; gap:14px;
    padding:18px 0 14px; margin-bottom:4px;
  }
  .fp__hd b{font-size:1.05rem; font-weight:600; letter-spacing:-.02em; flex:1}
  /* limpar mora aqui, junto dos controles que ele desfaz — e não solto na
     linha de resultados, onde aparecia e sumia debaixo do dedo */
  .fp__clear{
    border:0; background:none; font:inherit; font-size:.84rem; font-weight:600;
    color:var(--muted); padding:6px 2px; text-decoration:underline;
    text-underline-offset:4px;
  }
  .fp__clear[disabled]{opacity:.35}
  .catalog__clear{display:none}
  .fp__x{
    width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
    border:0; background:var(--sand); color:var(--text);
  }
  .fp__x svg{width:18px; height:18px}
  /* a pega da folha, acima do cabeçalho */
  .fp__hd::before{
    content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:4px; background:var(--line);
  }
  /* o botão fica grudado no rodapé da folha; a folga no último campo é o que
     permite rolar o slider para cima dele em vez de deixá-lo soterrado */
  .fp .fp__f:last-of-type{margin-bottom:62px}
  .fp__act{
    position:sticky; bottom:0;
    background:var(--paper); padding:12px 0 14px;
    box-shadow:0 -10px 20px var(--paper);
  }

  /* ---- lista de resultados ------------------------------------------- */
  .catalog{padding-top:26px}
  .catalog .note{display:none}   /* o aviso de demonstração fica na versão larga */
  .catalog__bar{
    flex-direction:row; align-items:center; justify-content:space-between; gap:12px;
  }
  .catalog__count{font-size:.86rem; font-weight:600; color:var(--text)}
  .catalog__end{display:flex; align-items:center; gap:14px}

  /* ordenação em pílula, do mesmo material dos chips de filtro — a seta é
     desenhada aqui porque a nativa muda de cara em cada navegador */
  .catalog__sort{position:relative; display:inline-flex}
  .catalog__sort select{
    -webkit-appearance:none; appearance:none;
    padding:9px 34px 9px 15px; border-radius:var(--pill);
    border:1px solid var(--line); background:var(--paper);
    font:inherit; font-size:.82rem; font-weight:500; color:var(--text);
    line-height:1.2;
  }
  .catalog__sort::after{
    content:""; position:absolute; right:15px; top:50%; z-index:1;
    width:7px; height:7px; margin-top:-5px; pointer-events:none;
    border:solid var(--faint); border-width:0 1.6px 1.6px 0;
    transform:rotate(45deg);
  }

  /* O card é o mesmo objeto do desktop — moldura, fundo e raio — só com o
     ritmo interno apertado para a largura do telefone. */
  .grid{gap:18px}
  .card__body{padding:18px 16px 20px}
  .card__brand{font-size:.72rem}
  .card__model{font-size:1.2rem; margin-top:5px}
  .card__facts{margin-top:14px; padding-top:12px; font-size:.82rem}
  .card__price{font-size:1.08rem}
  .card__buy{margin-top:16px; padding-top:0}
  /* sem ponteiro, "Ver detalhes" é redundante: o card inteiro já abre a ficha */
  .card__go{display:none}
  /* no telefone o botão perde um pouco de corpo para caber ao lado do preço
     mesmo no card estreito do carrossel da home */
  .card__wa{padding:10px 16px; font-size:.78rem}
  .card .chip{top:12px; left:12px}

  /* ---- ficha do veículo --------------------------------------------- */
  .vd__crumb{display:none}       /* quem volta é o botão sobre a foto */
  .vd{
    grid-template-columns:1fr; gap:0;
    padding-block:0 calc(var(--tabs-h) + 96px);
  }
  /* o painel repete os mesmos valores da página: sem o gap, a folha branca
     não subiria por cima da foto, e sem margem zerada a galeria estouraria a
     largura (o painel não tem a calha do .shell para compensar) */
  .vdp .vd{padding-bottom:112px; gap:0}

  /* Foto sangrada, ocupando o topo da tela. Com ela ali, o header branco só
     atrapalharia: quem volta é o botão sobre a foto e quem navega é a barra de
     abas — é assim na referência, que não tem barra de topo nesta tela. */
  /* A condição é "ficha à vista", não "ficha existe no documento": o painel do
     catálogo continua no DOM depois de fechado (só com hidden), e um
     body:has(.vd) deixaria o header escondido para sempre ao voltar — a barra
     de filtros ficava colada 72px abaixo do topo, com o vão vazio por cima. */
  body:has(#vdPage .vd) .hdr,
  body:has(.vdp:not([hidden])) .hdr{display:none}
  .vd__gal{margin-inline:calc(var(--gut) * -1); border-radius:0}
  .vdp .vd__gal{margin-inline:0}
  .vd__slide img{aspect-ratio:4/3.4; min-height:44svh; object-fit:cover}
  .vd__nav{display:none}         /* no dedo o arraste basta */
  .vd__count{left:var(--gut); bottom:38px; background:rgba(17,17,17,.7)}

  /* voltar e compartilhar, sobre a foto */
  .vd__act{
    position:absolute; top:calc(14px + env(safe-area-inset-top)); z-index:3;
    width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
    border:0; background:rgba(255,255,255,.92); color:var(--ink);
    box-shadow:0 6px 18px rgba(17,17,17,.18);
  }
  .vd__act svg{width:19px; height:19px}
  .vd__act--back{left:var(--gut)}
  .vd__act--share{right:var(--gut)}
  .vd__act--share.is-ok{background:var(--ink); color:var(--on-ink)}
  /* no painel do catálogo quem fecha é o X que já existe: dois "voltar" na
     mesma esquina seriam dois destinos diferentes no mesmo lugar */
  .vdp .vd__act--back{display:none}
  .vdp__x{
    top:calc(14px + env(safe-area-inset-top)); left:var(--gut); right:auto;
    box-shadow:0 6px 18px rgba(17,17,17,.18);
  }

  /* a folha branca sobe por cima da foto */
  .vd__sheet{
    position:relative; z-index:2; margin-top:-26px;
    background:var(--paper); border-radius:24px 24px 0 0;
    padding:26px var(--gut) 0; gap:26px;
  }
  .vdp .vd__sheet{padding-inline:var(--gut)}
  .vd__title{font-size:1.6rem}

  /* cartão da loja */
  .vd__store{
    display:flex; align-items:center; gap:12px;
    padding:14px 16px; border:1px solid var(--line); border-radius:16px;
  }
  .vd__storeAv{
    width:38px; height:38px; flex:none; display:grid; place-items:center;
    border-radius:50%; background:var(--sand);
  }
  .vd__storeAv img{width:16px; height:22px}
  .vd__storeId{display:grid; gap:2px; min-width:0; flex:1}
  .vd__storeId b{font-size:.94rem; font-weight:600}
  .vd__storeId i{
    font-style:normal; font-size:.78rem; color:var(--muted);
    display:flex; align-items:center; gap:5px;
  }
  .vd__star{color:#e8a33d; font-style:normal}
  .vd__storeGo{flex:none; font-size:.78rem; font-weight:600; color:var(--muted)}

  .vd__h2--specs{border:0; padding-bottom:0; margin-bottom:-12px}
  /* aqui sim, faixa horizontal com toque — restaura o comportamento que o
     desktop (regra base, acima) não pode ter por não haver como arrastar */
  .vd__specs{
    flex-wrap:nowrap; overflow-x:auto;
    margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
  }
  .vd__opts{grid-template-columns:1fr}

  /* Barra de preço acima das abas. Ela não é ancorada a "72px do fundo": vai
     até o fundo mesmo, com folga interna do tamanho da barra de abas, que
     desenha por cima (z-index maior). Assim as duas viram uma superfície
     branca contínua — encostar duas barras fixas por cálculo deixa um fio de
     fundo aparecendo quando a altura da tela não é inteira (telas 3x) ou
     quando a barra de endereço do navegador entra e sai. */
  .vd__bar{
    bottom:0;
    padding:14px var(--gut) calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom));
    flex-wrap:nowrap; gap:14px;
  }
  /* No painel aberto pelo catálogo não há abas: o painel é uma folha por cima
     da página e cobre a barra delas. Sem este ajuste sobrava justamente a
     faixa vazia da barra de abas embaixo do preço. */
  .vdp .vd__bar{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .vd__price{flex:none}
  .vd__price span{font-size:.62rem}
  .vd__price b{font-size:1.25rem}
  .vd__cta{min-width:0; padding-inline:22px}

  /* mesma regra do header: só enquanto a ficha está à vista */
  body:has(#vdPage .vd__bar) .chat,
  body:has(.vdp:not([hidden])) .chat{display:none}   /* preço + abas já ocupam o rodapé */
}

/* o cartão da loja e a ficha técnica são mobiliário de celular: no desktop a
   coluna da direita já traz a mesma informação sem eles */
@media (min-width:769px){
  .vd__store{
    display:flex; align-items:center; gap:14px;
    padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-sm);
  }
  .vd__storeAv{
    width:40px; height:40px; flex:none; display:grid; place-items:center;
    border-radius:50%; background:var(--sand);
  }
  .vd__storeAv img{width:17px; height:23px}
  .vd__storeId{display:grid; gap:2px; flex:1; min-width:0}
  .vd__storeId b{font-size:.96rem; font-weight:600}
  .vd__storeId i{font-style:normal; font-size:.8rem; color:var(--muted)}
  .vd__star{color:#e8a33d; font-style:normal; margin-right:5px}
  .vd__storeGo{font-size:.82rem; font-weight:600; color:var(--muted)}
  .vd__act{display:none}
  .vd__h2--specs{border:0; padding-bottom:0; margin-bottom:-14px}
  .fp__hd,.fp__veil{display:none}

  /* a ordenação vive na mesma linha da contagem, ao lado de "Limpar filtros" */
  .catalog__end{display:flex; align-items:center; gap:22px}
  .catalog__sort select{
    -webkit-appearance:none; appearance:none;
    border:0; background:none; font:inherit; font-size:.85rem; color:var(--text);
    padding-right:16px; cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                     linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-size:5px 5px,5px 5px;
    background-position:right 6px center,right 1px center;
    background-repeat:no-repeat;
  }
}

@media (max-width:430px){
  .ccat{width:92px}
  .ccat__ph{height:66px}
}