/* Pontual Multimarcas
   ====================================================================
   O que faz um site parecer caro não é efeito, é vocabulário constante:
   uma serifada para o que é dito, uma mono para o que é etiquetado,
   cantos quase retos, transições lentas e muito espaço vazio.
   ==================================================================== */

:root{
  --ink:#0A0A0B;
  --ink-2:#101012;
  --ink-3:#161618;
  --line:#1E1E21;
  --line-2:#2B2B30;

  --gold:#D8A050;
  --gold-hi:#EAC084;
  --gold-deep:#9C7434;
  --gold-veil:rgba(216,160,80,.09);

  --text:#F1EEE9;
  --text-2:#A6A199;
  --text-3:#79736C;
  --wa:#1C7C46;
  --wa-hi:#239855;

  /* Fraunces tinha personalidade demais para o que a loja quer parecer: ela
     chama atenção para si. Cormorant Garamond é o oposto — garamond de traço
     fino e contraste alto, o desenho que marca cara usa quando não precisa
     gritar. Jost no corpo (geométrica, herdeira da Futura) e IBM Plex Mono nas
     etiquetas, que é mais contida que a JetBrains.
     Cormorant é leve por natureza: os títulos vão em 600, não em 500, senão
     somem no preto. */
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Jost',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(20px,5vw,64px);
  --r:2px;
  --r-lg:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--body);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none;transition:color .35s var(--ease)}
a:hover{color:var(--gold-hi)}

h1,h2,h3{
  font-family:var(--display);font-weight:600;margin:0;
  line-height:1.14;letter-spacing:-.006em;
  /* Cormorant entrega algarismo de estilo antigo por padrão, e nome de carro é
     cheio de número: "CLA-250" saía com o 2 e o 5 pendurados abaixo da linha,
     e o 1 parecendo I maiúsculo. Em nome de modelo isso lê como erro. */
  font-variant-numeric:lining-nums;
}

:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--pad)}

.pular{position:absolute;left:-9999px}
.pular:focus{left:var(--pad);top:12px;z-index:100;background:var(--gold);color:var(--ink);
  padding:12px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.08em}

/* ------------------------------------------------------ etiqueta em mono
   Tudo que ROTULA, em vez de dizer, usa a mono em caixa alta e espaçada.
   É o detalhe que mais separa "projetado" de "montado". */

.eti{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);display:inline-block}
.eti--linha{display:flex;align-items:center;gap:14px}
.eti--linha::before{content:"";width:36px;height:1px;background:var(--gold-deep);flex-shrink:0}

/* ---------------------------------------------------------------- topo */

.topo{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.82);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
.topo__in{display:flex;align-items:center;gap:clamp(18px,3vw,40px);height:88px}
.topo__logo img{height:40px;width:auto}

.topo__nav{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.topo__nav a{position:relative;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.topo__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;
  background:var(--gold);transition:right .5s var(--ease)}
.topo__nav a:hover{color:var(--text)}
.topo__nav a:hover::after,.topo__nav a[aria-current]::after{right:0}
.topo__nav a[aria-current]{color:var(--gold)}

.topo__zap{flex-shrink:0}
.topo__menu{display:none;width:44px;height:44px;flex-shrink:0;align-items:center;
  justify-content:center;background:none;border:1px solid var(--line-2);border-radius:var(--r);
  color:var(--text);cursor:pointer;transition:border-color .35s var(--ease),color .35s var(--ease)}
.topo__menu:hover{border-color:var(--gold);color:var(--gold)}

/* -------------------------------------------------------------- botões */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  height:52px;padding:0 26px;border:0;border-radius:var(--r);cursor:pointer;
  font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  transition:background .4s var(--ease),transform .4s var(--ease),
             box-shadow .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.btn--ouro{background:var(--gold);color:#12100C}
.btn--ouro:hover{background:var(--gold-hi);color:#12100C;transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(216,160,80,.2)}
.btn--linha{background:transparent;border:1px solid var(--line-2);color:var(--text)}
.btn--linha:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:var(--wa-hi);color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(28,124,70,.25)}
.btn--peq{height:44px;padding:0 18px;font-size:11px}

/* ----------------------------------------------------------------- capa
   A seção é alta e o palco fica preso no topo; a rolagem dentro dela troca as
   três frases. Sem vídeo e sem foto — o que se move é o texto.

   Ordem importa: por padrão só a ÚLTIMA faixa aparece, porque é ela que tem o
   h1 e os botões. Sem JavaScript, no celular ou com movimento reduzido, é essa
   que fica, e a seção encolhe para uma tela. O capa.js só então assume. */

.capa{position:relative;background:var(--ink);border-bottom:1px solid var(--line)}
/* O overflow:hidden mora AQUI, no próprio palco, e nunca na .capa.
   Ele é preciso porque a logo do fundo fica a right:-6% e, sem contenção,
   empurra a página e cria rolagem lateral no celular.
   Mas se ele subir para a .capa, o sticky do palco morre: position:sticky para
   de funcionar quando qualquer ancestral tem overflow diferente de visible — o
   elemento passa a rolar junto e sobra o resto da seção vazio. Já quebrei assim
   uma vez. Num elemento sticky, o overflow dele mesmo é inofensivo. */
.capa__palco{position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:clamp(480px,78vh,720px);padding-block:clamp(40px,7vh,72px)}
/* O fundo era preto chapado. Três camadas discretas resolvem sem foto: uma
   malha de fios de cabelo que dá escala, um clarão quente de ouro no canto de
   onde o texto nasce, e grão para o gradiente não virar faixa. */
.capa__palco::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(64% 52% at 12% 18%,rgba(216,160,80,.10) 0%,transparent 62%),
    radial-gradient(118% 82% at 10% 12%,var(--ink-2) 0%,var(--ink) 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 88px)}
.capa__palco::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E")}

/* A logo grande atrás do texto. Ela responde: --p vem da rolagem, --mx/--my do
   cursor. É movimento pequeno de propósito — se for muito, disputa com a frase
   em vez de sustentá-la. */
/* A logo sangrava 6% para fora e o corte caía no meio de "PONTUAL" — letra
   partida na borda lê como erro, não como recorte. Agora ela cabe inteira, e
   uma máscara dissolve a borda direita: o que some, some por desbotamento, não
   por guilhotina. */
.capa__marca{position:absolute;right:-1%;top:50%;width:min(56%,700px);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 74%,transparent 99%);
  mask-image:linear-gradient(90deg,#000 0%,#000 74%,transparent 99%);
  translate:0 -50%;z-index:0;
  opacity:calc(.07 + .09 * var(--p,0));
  transform:
    translate3d(calc(var(--mx,0) * 18px), calc(var(--my,0) * 14px - var(--p,0) * 40px), 0)
    rotate(calc(var(--mx,0) * -1.4deg))
    scale(calc(1 + var(--p,0) * .06));
  transition:opacity .6s var(--ease)}
.capa__marca img{display:block;width:100%;height:auto;
  /* Mantém o ouro da marca em vez de cinza: amarra com o "mês" do título. */
  filter:brightness(1.25) saturate(.9) contrast(.95)}
.capa__faixa{z-index:1}
@media (prefers-reduced-motion:reduce){
  .capa__marca{transform:none;opacity:.08}
}

.capa__faixa{position:relative;width:100%;max-width:1280px;margin:0 auto;
  padding-inline:var(--pad)}
/* Só a última faixa é visível quando a sequência não roda. */
.capa__faixa:not(.capa__faixa--fim){display:none}

.capa h1{font-size:clamp(40px,6.4vw,88px);color:#fff;margin:26px 0 0;max-width:12ch;
  letter-spacing:-.028em;line-height:1}
.capa h1 em{font-style:italic;color:var(--gold)}
.capa__sub{margin:30px 0 0;font-size:clamp(16px,1.25vw,19px);color:var(--text-2);
  max-width:42ch;line-height:1.75}
.capa__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,4vh,42px)}
.capa__frase{margin:0;font-family:var(--display);font-weight:600;color:#fff;
  font-size:clamp(40px,6.4vw,88px);line-height:1;letter-spacing:-.028em;max-width:15ch}
.capa__role{display:none}

/* ---- daqui para baixo, só quando o capa.js assume ---- */
.capa--sequencia{height:340vh}
/* dvh, não svh. O svh mede a janela COM a barra do navegador visível e não
   muda quando ela se recolhe: no iPhone, ao rolar, a tela crescia ~65px e o
   palco ficava curto, deixando uma tira preta embaixo entre um bloco e outro.
   O dvh acompanha a janela de verdade. O vh do fallback é a janela grande, que
   também não deixa buraco em navegador que não conheça dvh. */
.capa--sequencia .capa__palco{position:sticky;top:0;height:100vh;height:100dvh;
  min-height:0;align-items:center}
.capa--sequencia .capa__faixa{position:absolute;left:0;right:0;
  top:50%;translate:0 -50%;opacity:0;will-change:opacity,transform}
.capa--sequencia .capa__faixa:not(.capa__faixa--fim){display:block}

/* Cada palavra sobe de trás de uma máscara, em sequência. */
.capa__masc{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.capa__masc > span{display:inline-block;transform:translateY(105%);
  transition:transform .9s cubic-bezier(.16,.84,.3,1)}
.capa__faixa--viva .capa__masc > span{transform:translateY(0)}

.capa__role{position:absolute;right:var(--pad);bottom:clamp(20px,4vh,40px);display:block;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);pointer-events:none;opacity:calc(1 - var(--fim,0));
  transition:opacity .5s var(--ease)}
.capa--sequencia .capa__role{display:block}
.capa:not(.capa--sequencia) .capa__role{display:none}
.capa__role i{display:block;width:1px;height:26px;margin:9px auto 0;
  background:linear-gradient(180deg,var(--gold),transparent);
  animation:capaRole 2.6s var(--ease) infinite}
@keyframes capaRole{
  0%{transform:scaleY(.2);transform-origin:top;opacity:0}
  36%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(1);transform-origin:bottom;opacity:0}
}

/* Faixa de números, logo abaixo da dobra. */
.capa__base{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin:0 0 clamp(8px,2vw,20px);background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.capa__base > div{background:var(--ink);padding:clamp(18px,2.4vw,26px) 0}
.capa__base > div + div{padding-left:clamp(18px,2.4vw,28px)}
.capa__base dt{font-family:var(--display);font-weight:600;color:var(--gold);
  font-size:clamp(23px,2.6vw,34px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums}
.capa__base dd{margin:9px 0 0;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);line-height:1.6}

/* O fio entre as seções.
   Três linhas empilhadas e quase encostadas, cada uma se desenhando numa
   velocidade: a de cima chega primeiro, a do meio atrasa, a de baixo fecha por
   último. Ler o mesmo gesto três vezes em ritmos diferentes faz a separação
   parecer movimento em vez de um traço parado.
   Opacidade decrescente para o conjunto ter profundidade e não virar uma
   pauta de caderno. */
.fio{display:flex;flex-direction:column;gap:clamp(5px,.7vw,9px);
  margin:clamp(40px,6.5vw,80px) 0}
.fio__linha{display:block;width:100%;height:clamp(16px,2vw,26px);overflow:visible}
.fio__linha path{fill:none;stroke:var(--gold-deep);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1800;stroke-dashoffset:1800;
  transition:stroke-dashoffset var(--tempo,2s) var(--ease)}
.fio__linha--a{--tempo:1.15s}
.fio__linha--a path{opacity:.85}
.fio__linha--b{--tempo:2.1s}
.fio__linha--b path{opacity:.55}
.fio__linha--c{--tempo:3.2s}
.fio__linha--c path{opacity:.3}
.fio.vis .fio__linha path{stroke-dashoffset:0}
html:not(.temjs) .fio__linha path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .fio__linha path{stroke-dashoffset:0;transition:none}
}

/* -------------------------------------------------------------- seções */

.secao{padding-block:clamp(56px,9vw,112px);border-bottom:1px solid var(--line)}
.secao__topo{margin-bottom:clamp(30px,4.4vw,52px)}
.secao__topo h2{font-size:clamp(26px,3.4vw,44px);color:#fff;margin-top:16px;max-width:18ch}
.secao__topo p{margin:16px 0 0;color:var(--text-2);max-width:54ch;font-size:17px}
.secao__topo--linha{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap}
.secao__topo--linha h2{max-width:none}
.secao__link{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;position:relative}
.secao__link::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;
  background:var(--gold);transition:right .5s var(--ease)}
.secao__link:hover::after{right:0}

/* ------------------------------------------------------ grade de carros */

.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(18px,2.2vw,30px)}

.carro{position:relative;display:flex;flex-direction:column;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.carro:hover{border-color:var(--gold-deep);transform:translateY(-4px)}

/* Quadrado: é o formato nativo das fotos (1280x1280). Um retrato 3/4 cortaria
   um quarto da largura — o para-choque do carro. */
.carro__foto{position:relative;aspect-ratio:1;background:var(--ink-3);overflow:hidden}
.carro__foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.carro:hover .carro__foto img{transform:scale(1.045)}
.carro__vazio{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#46423D}
.carro__tag{position:absolute;right:12px;top:12px;padding:5px 11px 6px;border-radius:var(--r);
  background:var(--gold);font-family:var(--mono);font-size:9px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);line-height:1}

.carro__corpo{display:flex;flex-direction:column;gap:13px;flex:1;
  padding:clamp(16px,1.8vw,20px)}
.carro__marca{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.carro__nome{margin:0;font-family:var(--display);font-weight:600;
  font-variant-numeric:lining-nums;
  font-size:clamp(18px,1.5vw,22px);color:#fff;line-height:1.18;letter-spacing:-.014em}

/* Ficha em grade, com fio de cabelo em cima — a mesma gramática da página do
   carro, para o card não parecer de outro site. */
.carro__ficha{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px;margin:0;padding-top:13px;
  border-top:1px solid var(--line)}
.carro__ficha > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.carro__ficha dt{font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);margin:0}
.carro__ficha dd{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.selos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.selos li{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--line-2);border-radius:var(--r);padding:4px 8px}

.carro__valor{margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.carro__valor small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:5px}
.carro__valor b{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.6vw,24px);
  color:var(--gold);letter-spacing:-.018em;font-variant-numeric:lining-nums tabular-nums}
.carro__parcela{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--text-2);
  font-variant-numeric:lining-nums tabular-nums}

.carro__ver{display:inline-flex;align-items:center;gap:9px;margin-top:2px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);transition:color .4s var(--ease)}
.carro__ver i{display:block;width:16px;height:1px;background:currentColor;
  transition:width .4s var(--ease)}
.carro:hover .carro__ver{color:var(--gold)}
.carro:hover .carro__ver i{width:26px}

/* ==================================================================
   PÁGINA DO VEÍCULO
   ================================================================== */

.migalha{border-bottom:1px solid var(--line);padding-block:16px}
.migalha .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3)}
.migalha a{color:var(--text-3)}
.migalha a:hover{color:var(--gold)}
.migalha [aria-current]{color:var(--text-2)}

.veic__in{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(26px,4vw,60px);
  align-items:start;padding-block:clamp(32px,5vw,56px) clamp(56px,8vw,96px)}

/* --- galeria ---------------------------------------------------------
   A foto grande troca com fade: some para o preto, entra a nova. Trocar
   a imagem na hora dá um solavanco que denuncia o site amador. */

.veic__principal{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r-lg);background:var(--ink-3);border:1px solid var(--line)}
/* As duas camadas ocupam o mesmo lugar. A que entra sobe de opacidade e
   assenta de uma escala levemente maior — o movimento mínimo que faz a troca
   parecer intencional em vez de mecânica. */
.veic__principal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.035);
  transition:opacity .6s var(--ease),transform 1.25s var(--ease)}
.veic__principal img[data-ativa]{opacity:1;transform:scale(1)}
.veic__semfoto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#46423D}

.veic__conta{position:absolute;right:14px;bottom:14px;padding:6px 11px;border-radius:var(--r);
  background:rgba(10,10,11,.78);backdrop-filter:blur(6px);font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;color:var(--text-2);font-variant-numeric:lining-nums tabular-nums}

.veic__miniaturas{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
  gap:8px;margin-top:8px}
.veic__mini{padding:0;aspect-ratio:4/3;overflow:hidden;cursor:pointer;opacity:.55;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);
  transition:opacity .45s var(--ease),border-color .45s var(--ease)}
.veic__mini img{width:100%;height:100%;object-fit:cover}
.veic__mini:hover{opacity:.85}
.veic__mini[aria-current="true"]{opacity:1;border-color:var(--gold)}

/* --- coluna de informação, que acompanha a rolagem ------------------- */

.veic__lado{position:sticky;top:112px}
.veic__marca{display:block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.veic__nome{font-size:clamp(28px,3.4vw,44px);color:#fff;letter-spacing:-.018em;line-height:1.08}
.veic__versao{margin:10px 0 0;font-size:17px;color:var(--text-2)}

.veic__preco{margin-top:clamp(26px,3.4vw,38px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line)}
.veic__preco .eti{margin-bottom:10px}
.veic__preco strong{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(34px,4.4vw,54px);color:var(--gold);line-height:1;
  letter-spacing:-.025em;font-variant-numeric:lining-nums tabular-nums}
.veic__preco span{display:block;margin-top:12px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.08em;color:var(--text-3);font-variant-numeric:lining-nums tabular-nums}
.veic__preco span b{color:var(--text-2);font-weight:500}
.veic__sob{color:var(--text-2)!important;font-size:clamp(24px,3vw,34px)!important}

/* ficha: o gap de 1px sobre um fundo na cor da linha é o que cria os
   fios entre as células, em vez de bordas somando espessura */
.veic__ficha{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:clamp(26px,3.4vw,36px) 0 0;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.veic__linha{background:var(--ink-2);padding:16px 18px;display:flex;flex-direction:column;gap:5px}
.veic__linha dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);margin:0}
.veic__linha dd{margin:0;font-family:var(--mono);font-size:13.5px;color:var(--text)}

.veic__selos{margin-top:clamp(22px,3vw,30px)}
.veic__selos li{font-size:10px;padding:7px 12px}

.veic__acoes{display:flex;flex-direction:column;gap:10px;margin-top:clamp(26px,3.4vw,34px)}
.veic__acoes .btn{width:100%}

.veic__nota{margin:22px 0 0;font-family:var(--mono);font-size:11px;line-height:1.85;
  letter-spacing:.03em;color:var(--text-3)}
.veic__nota b{color:var(--gold-deep);font-weight:500}
.veic__texto{margin:0;max-width:68ch;font-size:17px;line-height:1.9;color:var(--text-2)}

@media (max-width:940px){
  .veic__in{grid-template-columns:1fr;gap:32px}
  .veic__lado{position:static}
}

/* ==================================================================
   ESTOQUE
   ================================================================== */

.est-topo{border-bottom:1px solid var(--line);padding-block:clamp(40px,6vw,72px) clamp(30px,4vw,48px)}
.est-topo__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:clamp(30px,5vw,64px);align-items:end}
.est-topo h1{font-size:clamp(30px,4vw,52px);color:#fff;margin-top:18px;letter-spacing:-.02em}
.est-topo p{margin:18px 0 0;color:var(--text-2);max-width:44ch}

.est-filtros{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.est-filtros__busca{grid-column:span 2}
.est-filtros .campo{margin-bottom:0}
.est-filtros .btn{grid-column:span 2}
.est-filtros__limpar{grid-column:span 2;text-align:center;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}

/* Eram 92px de vão antes desta linha e 31px depois: um buraco, uma legenda
   solta, e a grade colada nela. Agora o espaço fica do lado de quem precisa. */
.est-conta{margin:clamp(26px,3.2vw,38px) 0 clamp(20px,2.4vw,26px);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}

.est-vazio{text-align:center;padding-block:clamp(56px,9vw,104px);max-width:46ch;margin-inline:auto}
.est-vazio h2{font-size:clamp(22px,2.8vw,32px);color:#fff;margin-bottom:16px}
.est-vazio p{margin:0 0 30px;color:var(--text-2)}
.est-vazio .capa__cta{justify-content:center}

/* ==================================================================
   CAMPOS DE FORMULÁRIO
   ================================================================== */

.campo{margin-bottom:18px}
.campo label{display:block;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.campo input,.campo select,.campo textarea{
  width:100%;height:54px;padding:0 16px;
  background:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);
  color:var(--text);font-family:var(--body);font-size:16px;
  transition:border-color .35s var(--ease);
}
.campo textarea{height:auto;min-height:104px;padding:14px 16px;resize:vertical;line-height:1.7}
.campo input::placeholder,.campo textarea::placeholder{color:#4F4A44}
/* Se algum campo numérico voltar a existir, que não traga o seletor do sistema. */
.campo input[type=number]{appearance:textfield;-moz-appearance:textfield}
.campo input[type=number]::-webkit-outer-spin-button,
.campo input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--gold);outline:none}
.campo select{appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2379736C' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}

/* ==================================================================
   QUANTO CABE NO SEU MÊS  — a segunda dobra
   Na Duo esta dobra entrega algo em troca de um gesto: você segura o botão e o
   dossiê se abre. Aqui o gesto é arrastar a parcela, porque é disso que esta
   loja trata. Os números são os mesmos que já estão nos cards.
   ================================================================== */

.cabe__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,76px);align-items:center}
.cabe__texto h2{font-size:clamp(26px,3.2vw,42px);color:#fff;margin:16px 0 clamp(20px,2.6vw,28px);
  max-width:15ch;letter-spacing:-.02em;line-height:1.08}
.cabe__lede{margin:0 0 15px;font-size:16px;line-height:1.75;color:var(--text-2);max-width:46ch}
.cabe__lede a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-deep)}
.cabe__lede a:hover{color:var(--gold-hi)}

.cabe__caixa{position:relative;overflow:hidden;padding:clamp(24px,3.2vw,36px);
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(168deg,var(--ink-3) 0%,var(--ink-2) 52%,var(--ink) 100%);
  box-shadow:0 28px 64px -38px rgba(0,0,0,.95)}
/* fio de luz na borda de cima: o brilho de vitrine */
.cabe__caixa::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(216,160,80,.6),transparent)}
.cabe__rotulo{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3)}
.cabe__valor{display:block;margin-top:12px;font-family:var(--display);font-weight:600;
  font-size:clamp(38px,4.6vw,60px);color:var(--gold);line-height:1;letter-spacing:-.025em;
  font-variant-numeric:lining-nums tabular-nums}
.cabe__unidade{display:block;margin-top:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}

/* O controle padrão do navegador é cinza e chapado. Aqui a trilha preenchida
   acompanha o polegar em ouro. */
.cabe__range{appearance:none;-webkit-appearance:none;width:100%;margin:24px 0 0;
  height:26px;background:transparent;cursor:pointer;display:block}
.cabe__range:focus{outline:none}
.cabe__range:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:var(--r)}
.cabe__range::-webkit-slider-runnable-track{height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold) 0 var(--preenchido,50%),var(--line-2) var(--preenchido,50%) 100%)}
.cabe__range::-moz-range-track{height:2px;border-radius:2px;background:var(--line-2)}
.cabe__range::-moz-range-progress{height:2px;border-radius:2px;background:var(--gold)}
.cabe__range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;
  width:22px;height:22px;margin-top:-10px;border-radius:50%;
  background:var(--ink);border:1px solid var(--gold);
  box-shadow:0 0 0 4px rgba(216,160,80,.12),0 6px 16px -6px rgba(0,0,0,.9);
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease)}
.cabe__range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--ink);border:1px solid var(--gold);
  box-shadow:0 0 0 4px rgba(216,160,80,.12)}
.cabe__range:hover::-webkit-slider-thumb,
.cabe__range:active::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(216,160,80,.18)}
.cabe__pontas{display:flex;justify-content:space-between;margin-top:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--text-3);
  font-variant-numeric:lining-nums tabular-nums}

/* Escolha do prazo. Fica depois da faixa porque a ordem da decisão é essa:
   primeiro quanto cabe por mês, depois em quantas vezes. */
.cabe__prazos{margin:clamp(20px,2.6vw,26px) 0 0;padding:0;border:0}
.cabe__prazos legend{padding:0;margin-bottom:11px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.cabe__chips{display:flex;gap:8px}
.cabe__chip{flex:1;display:flex;align-items:center;justify-content:center;min-height:46px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--ink);cursor:pointer;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--text-2);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
/* O rádio some: o próprio chip é o alvo, e o foco do teclado aparece nele. */
.cabe__chip input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.cabe__chip:hover{border-color:var(--gold-deep);color:var(--text)}
.cabe__chip:has(input:checked){border-color:var(--gold);color:var(--gold);
  background:rgba(216,160,80,.09)}
.cabe__chip:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:3px}

.cabe__saida{margin-top:clamp(20px,2.6vw,26px);padding-top:clamp(20px,2.6vw,26px);
  border-top:1px solid var(--line)}
.cabe__conta{margin:0;font-size:15px;color:var(--text-2)}
.cabe__conta b{font-family:var(--display);font-weight:600;font-size:26px;color:#fff;
  margin-right:5px;font-variant-numeric:lining-nums tabular-nums}
.cabe__lista{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cabe__lista li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  background:var(--ink-2);padding:11px 14px;font-size:13.5px;color:var(--text-2)}
.cabe__lista li b{font-family:var(--mono);font-size:12px;color:var(--gold);font-weight:500;
  white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.cabe__lista .cabe__mais{justify-content:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.cabe__caixa .btn{width:100%;margin-top:clamp(20px,2.6vw,26px)}

/* Caminho para o estoque inteiro, embaixo dos três da home. */
.secao__fim{display:flex;justify-content:center;margin-top:clamp(30px,4vw,44px)}

/* ==================================================================
   SIMULADOR
   ================================================================== */

.sim{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3.2vw,38px)}
.sim h2{font-size:clamp(20px,2.2vw,27px);color:#fff;margin:14px 0 8px}
.sim__nota{margin:0 0 clamp(24px,3vw,32px);font-size:15px;color:var(--text-3)}
.sim__dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.sim__troca{display:flex;align-items:center;gap:12px;margin:4px 0 18px;cursor:pointer;
  font-size:15px;color:var(--text-2)}
.sim__troca input{width:18px;height:18px;accent-color:var(--gold);cursor:pointer;flex-shrink:0}

/* O resultado saiu do rodapé do formulário para o topo. Ele deixou de ser
   consequência do que a pessoa digita ao vivo e passou a ser a resposta que ela
   recebe depois de enviar — então vira painel com peso, não um rodapé. */
.sim__saida{margin:0 0 clamp(26px,3.4vw,34px);padding:clamp(22px,3vw,28px);
  border:1px solid var(--gold-deep);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(216,160,80,.09),rgba(216,160,80,.02))}
.sim__saida .eti{margin-bottom:12px}
.sim__saida small{display:block;margin-bottom:11px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.sim__saida .btn{margin-top:20px}

/* Contato incompleto: o envio volta e diz o que faltou. */
.sim__erro{margin:0 0 22px;padding:14px 16px;border-radius:var(--r);
  border:1px solid #6E3232;background:rgba(150,55,55,.16);
  font-size:14.5px;line-height:1.6;color:#EFC2C2}
.sim__parcela{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.6vw,42px);
  color:var(--gold);line-height:1;letter-spacing:-.022em;font-variant-numeric:lining-nums tabular-nums}
.sim__resumo{margin:12px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--text-2);font-variant-numeric:lining-nums tabular-nums}
.sim__faixa{margin:5px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--text-3)}

.sim__contato{margin-top:clamp(26px,3.4vw,34px);padding-top:clamp(26px,3.4vw,34px);
  border-top:1px solid var(--line)}
.sim__chamada{margin:0 0 22px;font-size:16px;color:var(--text)}
.sim__aviso{margin:18px 0 0;font-family:var(--mono);font-size:10.5px;line-height:1.95;
  letter-spacing:.03em;color:var(--text-3)}
.sim__aviso b{color:var(--text-2);font-weight:500}
.sim .btn{width:100%}

/* ==================================================================
   FINANCIAMENTO E CONSIGNAÇÃO
   ================================================================== */

.fin-topo{border-bottom:1px solid var(--line);padding-block:clamp(44px,6.5vw,84px)}
.fin-topo__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);align-items:center}
.fin-topo h1{font-size:clamp(32px,4.6vw,60px);color:#fff;margin-top:20px;letter-spacing:-.024em}
.fin-topo h1 em{font-style:italic;color:var(--gold)}
.fin-topo .capa__sub{margin-top:24px}

.fin-topo__pontos{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.fin-topo__pontos li{background:var(--ink-2);padding:20px 22px}
.fin-topo__pontos b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.fin-topo__pontos span{font-size:14.5px;color:var(--text-2);line-height:1.7}

.fin-sim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:clamp(20px,2.6vw,32px);align-items:start}
.fin-lado{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)}
.fin-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,28px)}
.fin-card h2{font-size:17px;color:#fff;margin-bottom:14px}
.fin-card p{margin:0 0 16px;font-size:14.5px;color:var(--text-2);line-height:1.8}
/* Dez bancos em coluna única viram uma lista comprida; em duas colunas cabem
   na mesma altura do resto dos cartões da barra lateral. */
.fin-lista--duas{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

.fin-card__nota{margin:14px 0 0!important;font-family:var(--mono);font-size:10.5px;
  line-height:1.9;letter-spacing:.03em;color:var(--text-3)}

.fin-tabela{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px}
.fin-tabela th{text-align:left;padding-bottom:12px;font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
  border-bottom:1px solid var(--line)}
.fin-tabela th:last-child,.fin-tabela td:last-child{text-align:right}
.fin-tabela td{padding:14px 0;border-bottom:1px solid var(--line);color:var(--text-2);
  font-variant-numeric:lining-nums tabular-nums}
.fin-tabela tr:last-child td{border-bottom:0}
.fin-tabela b{color:var(--gold);font-size:14px;font-weight:500}

.fin-passos{list-style:none;counter-reset:passo;margin:0;padding:0;
  display:flex;flex-direction:column;gap:20px}
.fin-passos li{counter-increment:passo;padding-left:40px;position:relative}
.fin-passos li::before{content:counter(passo,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--gold-deep)}
.fin-passos b{display:block;font-size:14.5px;color:var(--text);margin-bottom:5px}
.fin-passos span{font-size:14px;color:var(--text-2);line-height:1.7}

.fin-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fin-lista li{padding-left:22px;position:relative;font-size:14.5px;color:var(--text-2)}
.fin-lista li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:1px;
  background:var(--gold-deep)}

.cons-contraste{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cons-contraste__col{background:var(--ink-2);padding:clamp(22px,2.6vw,28px)}
.cons-contraste__col h2{font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px}
.cons-contraste__col--ruim h2{color:var(--text-3)}
.cons-contraste__col--bom h2{color:var(--gold)}
.cons-contraste ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cons-contraste li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55}
.cons-contraste__col--ruim li{color:var(--text-3)}
.cons-contraste__col--bom li{color:var(--text)}
.cons-contraste li::before{position:absolute;left:0;top:0;font-family:var(--mono);font-size:12px}
.cons-contraste__col--ruim li::before{content:"×";color:#5C544B}
.cons-contraste__col--bom li::before{content:"✓";color:var(--gold)}

/* Campos que a consignação passou a pedir: cidade, versão, cor, situação do
   documento e chaves. São o que o vendedor perguntaria no WhatsApp de qualquer
   jeito — perguntar no formulário poupa uma ida e volta. */
.cons-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.cons-grupo{margin:0 0 20px;padding:clamp(18px,2.2vw,22px);border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--ink-2)}
.cons-grupo legend{padding:0 8px;margin-left:-8px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.cons-ajuda{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--text-3)}

.escolhas{display:flex;flex-wrap:wrap;gap:9px}
.escolha{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;
  min-height:46px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--ink);cursor:pointer;font-size:14.5px;color:var(--text-2);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
/* O rádio padrão do navegador é um disco branco cheio: num formulário preto
   vira a coisa mais clara da tela, e são seis deles. Aqui ele é um anel fino
   que se acende em ouro quando escolhido. */
.escolha input{appearance:none;-webkit-appearance:none;margin:0;flex-shrink:0;
  width:16px;height:16px;border-radius:50%;border:1px solid var(--line-2);
  background:transparent;cursor:pointer;position:relative;
  transition:border-color .3s var(--ease)}
.escolha input::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--gold);transform:scale(0);transition:transform .3s var(--ease)}
.escolha input:checked{border-color:var(--gold)}
.escolha input:checked::after{transform:scale(1)}
.escolha input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.escolha:hover{border-color:var(--line-2);color:var(--text);background:var(--ink-3)}
.escolha:has(input:checked){border-color:var(--gold);color:var(--text);background:var(--ink-3)}

.cons-ok{text-align:center}
.cons-ok h2{font-size:clamp(22px,2.8vw,30px);margin-bottom:16px}
.cons-ok p{margin:0 auto 28px;max-width:44ch;color:var(--text-2)}
.cons-ok .capa__cta{justify-content:center}

/* ==================================================================
   PAREDE DE ENTREGAS
   ================================================================== */

.parede{position:relative;background:var(--ink-2);overflow:hidden;
  padding-block:clamp(56px,8vw,96px);border-bottom:1px solid var(--line)}
.parede__cabeca{max-width:1280px;margin:0 auto clamp(30px,4vw,44px);padding-inline:var(--pad);
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.parede__cabeca h2{font-size:clamp(26px,3.2vw,40px);color:#fff;margin-top:16px;max-width:16ch}
.parede__cabeca p{margin:16px 0 0;font-size:16px;color:var(--text-2);max-width:48ch}
.parede__conta{text-align:right;flex-shrink:0;text-decoration:none;
  transition:opacity .4s var(--ease)}
.parede__conta:hover{opacity:.72}
.parede__conta b{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(34px,4vw,52px);color:var(--gold);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums}
.parede__conta span{display:block;margin-top:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}

.parede__faixas{position:relative;display:flex;flex-direction:column;gap:12px}
.parede__faixa{display:flex;gap:12px;width:max-content;
  animation:deriva 78s linear infinite;will-change:transform}
.parede__faixa--volta{animation-name:deriva-volta;animation-duration:94s}
/* A parede não para mais quando o mouse encosta: o movimento contínuo, uma
   faixa para cada lado, é o que dá vida à seção. Parar no hover interrompia
   justamente quando a pessoa demonstrou interesse. */
@keyframes deriva      {from{transform:translate3d(0,0,0)}     to{transform:translate3d(-50%,0,0)}}
@keyframes deriva-volta{from{transform:translate3d(-50%,0,0)}  to{transform:translate3d(0,0,0)}}

.parede__peca{position:relative;flex-shrink:0;width:clamp(150px,17vw,230px);aspect-ratio:1;
  margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--ink-3);
  border:1px solid var(--line)}
.parede__peca img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);
  transition:filter .7s var(--ease),transform .9s var(--ease)}
.parede__peca:hover img{filter:saturate(1.05);transform:scale(1.04)}

.parede__faixas::before,.parede__faixas::after{content:"";position:absolute;top:0;bottom:0;
  width:clamp(40px,9vw,150px);z-index:2;pointer-events:none}
.parede__faixas::before{left:0;background:linear-gradient(90deg,var(--ink-2),transparent)}
.parede__faixas::after{right:0;background:linear-gradient(270deg,var(--ink-2),transparent)}

/* ==================================================================
   ONDE A LOJA FICA
   ================================================================== */

.onde{padding-block:clamp(56px,9vw,112px);border-bottom:1px solid var(--line)}
.onde__in{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
/* Eram três fotos em mosaico: duas panorâmicas de rua que, reduzidas a
   miniatura, viravam manchas de céu. Ficou uma só, grande o bastante para a
   placa se ler, e o mapa embaixo — que é o que alguém procura nesta seção. */
.onde__foto{margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--ink-2);
  border:1px solid var(--line);aspect-ratio:4/3}
.onde__foto img{width:100%;height:100%;object-fit:cover}

.onde__dados h2{font-size:clamp(26px,3.2vw,40px);color:#fff;margin:16px 0 clamp(18px,2.2vw,24px)}
.onde__texto{margin:0 0 clamp(22px,2.8vw,30px);font-size:16px;line-height:1.75;
  color:var(--text-2);max-width:46ch}

/* O mapa é faixa larga: mapa alto e estreito não serve para se localizar. */
.onde__mapa{margin-top:clamp(34px,4.5vw,56px);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:var(--ink-2);
  aspect-ratio:32/9;min-height:240px}
.onde__mapa iframe{display:block;width:100%;height:100%;border:0;
  filter:grayscale(.35) contrast(1.05) brightness(.92)}
.onde__linha{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.onde__linha svg{flex-shrink:0;margin-top:4px;color:var(--gold-deep)}
.onde__linha b{display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.onde__linha span{font-size:16px;color:var(--text);line-height:1.6}
.onde__acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(26px,3.4vw,34px)}

@media (max-width:1000px){
  .fin-topo__in,.fin-sim{grid-template-columns:1fr}
  .onde__in{grid-template-columns:1fr}
  .onde__mapa{aspect-ratio:4/3;min-height:0}
  .fin-sim{gap:22px}
}
@media (max-width:900px){
  .est-topo__in,.onde__in{grid-template-columns:1fr;gap:32px}
  .onde__fotos{grid-template-columns:1fr 1fr}
  .onde__fotos figure:first-child{grid-row:auto;grid-column:span 2}
}
@media (max-width:620px){
  .cons-contraste{grid-template-columns:1fr}
  .cabe__in{grid-template-columns:1fr}
  .cons-tres{grid-template-columns:1fr 1fr}
  .cons-tres .campo:last-child{grid-column:1/-1}
  .sim__dupla{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .parede__faixa{animation:none;width:100%;flex-wrap:wrap;justify-content:center}
  .parede__faixa[data-clone]{display:none}
}

/* --------------------------------------------------------- revelação
   Os elementos sobem e aparecem ao entrar na tela, em cascata entre
   irmãos. Só escondemos quando há JS para revelar. */

html.temjs .rev{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:var(--d,0ms)}
html.temjs .rev.vis{opacity:1;transform:none}

/* ==================================================================
   CABEÇALHO E CAPA NO ESTREITO
   Este bloco inteiro foi junto no mesmo corte que levou o rodapé. Sem ele o
   menu do celular abria no vazio: .topo__nav[data-aberto="1"] é o que torna a
   gaveta visível quando o hambúrguer é tocado.
   ================================================================== */

@media (max-width:860px){
  .topo__in{height:72px;gap:12px}
  .topo__logo img{height:34px}
  .topo__menu{display:inline-flex}
  .topo__nav{position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;
    align-items:stretch;gap:0;display:none;background:var(--ink-2);
    border-bottom:1px solid var(--line);padding:4px var(--pad) 16px}
  .topo__nav[data-aberto="1"]{display:flex}
  .topo__nav a{height:54px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
  .topo__nav a::after{display:none}
  .topo__nav a:last-child{border-bottom:0}
  .topo__zap-texto{display:none}      /* no estreito o botão fica só com o ícone */
  /* Percurso mais curto no telefone: 340vh dariam quase duas telas e meia de
     dedo antes do primeiro carro, e quem abre site de loja no celular costuma
     estar com pressa. 220vh é pouco mais de uma tela extra. */
  .capa--sequencia{height:220vh}
  .capa__frase{font-size:clamp(34px,10vw,52px)}
  .capa__cta .btn{flex:1 1 auto}
  .capa__base{grid-template-columns:1fr}
  .capa__base > div + div{padding-left:0}
}

/* ==================================================================
   CURSOR
   O ponto segue exato e o anel chega depois. Só existe quando o cursor.js
   confirma ponteiro fino — a classe .tem-cursor é dele. Sem ela, nada aqui
   aplica e o cursor do sistema continua como sempre foi.
   ================================================================== */

html.tem-cursor,
html.tem-cursor a,
html.tem-cursor button,
html.tem-cursor label,
html.tem-cursor [role="button"]{cursor:none}
/* Em campo de texto o cursor do sistema volta: a barra de digitação diz onde a
   letra vai cair, e uma bolinha não diz. */
html.tem-cursor.cursor-texto,
html.tem-cursor input,
html.tem-cursor textarea,
html.tem-cursor select{cursor:auto}

.cursor-ponto,.cursor-anel{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;
  border-radius:50%;opacity:0;transition:opacity .3s var(--ease)}
html.cursor-ligado .cursor-ponto,
html.cursor-ligado .cursor-anel{opacity:1}
html.cursor-texto .cursor-ponto,
html.cursor-texto .cursor-anel{opacity:0}

.cursor-ponto{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gold)}
.cursor-anel{width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid rgba(216,160,80,.55);
  transition:opacity .3s var(--ease),width .45s var(--ease),height .45s var(--ease),
             margin .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease)}
.cursor-anel.aberto{width:58px;height:58px;margin:-29px 0 0 -29px;
  border-color:var(--gold);background:rgba(216,160,80,.08)}
.cursor-anel.apertado{width:26px;height:26px;margin:-13px 0 0 -13px;
  border-color:var(--gold-hi);background:rgba(216,160,80,.16)}

/* ==================================================================
   RODAPÉ
   Estas regras sumiram sozinhas num commit meu: ao reescrever o card eu cortei
   "do bloco até o próximo banner de seção", e o rodapé estava dentro desse
   intervalo. O resultado no ar foi a logo em tamanho natural e listas com
   marcador, sem estilo nenhum. Ficam aqui, com banner próprio, para o próximo
   corte por banner não engolir de novo.
   ================================================================== */

.rodape{padding-block:clamp(56px,8vw,96px) 40px;background:var(--ink-2)}
.rodape__in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(30px,5vw,72px)}
.rodape__marca img{height:42px;width:auto;margin-bottom:24px}
.rodape__marca p{margin:0;font-size:15px;line-height:1.85;color:var(--text-3);max-width:34ch}
.rodape h3{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 18px}
.rodape ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.rodape ul a{font-size:15px;color:var(--text-2)}
.rodape ul a:hover{color:var(--gold)}
.rodape__fim{margin-top:clamp(44px,6vw,72px);padding-top:26px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3)}

/* O fio é exceção: ele não desliza como o resto dos elementos revelados — o
   movimento dele é a linha se desenhando da esquerda para a direita. Precisa
   ficar depois das regras de .rev acima para vencer pela ordem. */
html.temjs .fio.rev,
html.temjs .fio.rev.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.temjs .rev{opacity:1;transform:none;transition:none}
}