/* BNE · site público (catálogo, página do carro, /vender)
   Redesenho de 30/10/2026, modo /designer-bne. Regras em .claude/skills/designer-bne/SKILL.md.
   Marca: azul #050096, laranja #FF5300, inclinação de 12°, título em itálico condensado.
   A Swiss 721 do kit é comercial: aqui é a Archivo (OFL), cortada pra largura 62-100 e peso 600-900,
   usada em 850/72% nos títulos e 800/80% em número e botão (teste ao lado do logo, 30/10/2026). */

@font-face{font-family:"BNE Display";src:url("/fonts/bne-display.woff2") format("woff2");font-style:italic;font-weight:600 900;font-stretch:62% 100%;font-display:swap}
/* reserva enquanto a fonte chega: mais estreita, pra o título não pular de linha */
@font-face{font-family:"BNE Reserva";src:local("Arial Narrow Bold Italic"),local("ArialNarrow-BoldItalic"),local("Arial Bold Italic"),local("Arial-BoldItalicMT");size-adjust:86%}

:root{
  --azul:#050096;
  --azul-fundo:#02004a;
  --azul-meio:#07047a;
  --laranja:#ff5300;
  --laranja-forte:#e64a00;
  --laranja-texto:#c24100;   /* laranja que passa contraste AA em texto pequeno sobre branco e papel */
  --papel:#f3f1eb;
  --branco:#fff;
  --tinta:#14142b;
  --cinza:#5b5b6b;
  --linha:rgba(5,0,150,.12);
  --linha-forte:rgba(5,0,150,.28);
  --linha-clara:rgba(255,255,255,.16);
  --fonte-titulo:"BNE Display","BNE Reserva",system-ui,sans-serif;
  --fonte-texto:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* movimento: tokens do Material 3 (entrar, sair, padrão) */
  --entra:cubic-bezier(0,0,0,1);
  --sai:cubic-bezier(.3,0,1,1);
  --padrao:cubic-bezier(.2,0,0,1);
  --margem:16px;
  --largura:1200px;
  --topo:56px;
}
@media (min-width:720px){:root{--margem:32px;--topo:64px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font:400 16px/1.55 var(--fonte-texto);color:var(--tinta);background:var(--papel);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dentro{max-width:var(--largura);margin:0 auto;padding:0 var(--margem)}
.icone{width:1em;height:1em;flex:none}

/* ===== tipografia ===== */
.t-display{font-family:var(--fonte-titulo);font-style:italic;font-weight:850;font-stretch:72%;text-transform:uppercase;line-height:.92;letter-spacing:0}
.t-numero{font-family:var(--fonte-titulo);font-style:italic;font-weight:800;font-stretch:80%;font-variant-numeric:lining-nums;letter-spacing:-.005em;line-height:1}
.kicker{display:flex;align-items:center;gap:10px;font:700 12px/1.3 var(--fonte-texto);text-transform:uppercase;letter-spacing:.1em}
/* traço da marca: barra laranja inclinada a 12° (é o traço de cima do "E" do logo) */
.traco{display:inline-block;flex:none;width:22px;height:7px;background:var(--laranja);transform:skewX(-12deg)}
.lista-traco li{position:relative;padding:6px 0 6px 30px}
.lista-traco li::before{content:"";position:absolute;left:0;top:15px;width:16px;height:5px;background:var(--laranja);transform:skewX(-12deg)}

/* ===== botões: a caixa inclina 12°, o texto fica reto ===== */
.btn{--fundo:var(--laranja);--fundo-hover:var(--laranja-forte);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 30px;border:0;background:none;color:#fff;text-decoration:none;white-space:nowrap;
  font-family:var(--fonte-titulo);font-style:italic;font-weight:800;font-stretch:80%;font-size:19px;line-height:1;letter-spacing:.01em;text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;transition:transform .15s var(--padrao)}
.btn::before{content:"";position:absolute;inset:0 6px;z-index:-1;background:var(--fundo);transform:skewX(-12deg);border-radius:2px;transition:background-color .15s var(--padrao)}
.btn:hover::before{background:var(--fundo-hover)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn .icone{width:22px;height:22px}
.btn-azul{--fundo:var(--azul);--fundo-hover:var(--azul-meio)}
.btn-branco{--fundo:#fff;--fundo-hover:#e9e7f7;color:var(--azul)}
.btn-contorno{--fundo:transparent;--fundo-hover:rgba(5,0,150,.06);color:var(--azul)}
.btn-contorno::before{box-shadow:inset 0 0 0 2px var(--linha-forte)}
.btn-contorno-claro{--fundo:transparent;--fundo-hover:rgba(255,255,255,.08);color:#fff}
.btn-contorno-claro::before{box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.btn-cheio{width:100%}
.btn-pequeno{min-height:40px;padding:0 18px;font-size:16px;gap:8px}
.btn-pequeno .icone{width:18px;height:18px}

/* ===== topo ===== */
.topo{position:sticky;top:0;z-index:40;background:var(--azul);color:#fff;view-transition-name:topo}
.topo-dentro{max-width:var(--largura);margin:0 auto;height:var(--topo);padding:0 var(--margem);display:flex;align-items:center;gap:12px}
.topo-selo{display:block;flex:none;padding:6px 0}
.topo-selo img{height:30px;width:auto}
@media (min-width:720px){.topo-selo img{height:34px}}
.topo-acoes{margin-left:auto;display:flex;align-items:center;gap:4px}
.topo-link{color:#fff;text-decoration:none;font-weight:600;font-size:15px;padding:10px 6px;opacity:.9;white-space:nowrap}
.topo .btn-pequeno{padding:0 14px;font-size:16px}
.topo-link:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.topo-fone{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:10px 0;font-variant-numeric:tabular-nums}
.topo-fone .icone{width:20px;height:20px;color:#4ade80}
@media (max-width:399px){.topo-link{display:none}} /* até 399: com ele o topo precisava de 397 px (01/11/2026) */
@media (max-width:429px){.so-largo{display:none}}

/* ===== rodapé ===== */
.rodape{background:var(--azul-fundo);color:rgba(255,255,255,.75);padding:44px 0 calc(32px + env(safe-area-inset-bottom));font-size:15px}
.rodape-grade{display:grid;gap:28px}
@media (min-width:720px){.rodape-grade{grid-template-columns:1.3fr 1fr 1fr;align-items:start}}
.rodape-marca img{height:46px;width:auto;margin-bottom:14px}
.rodape h2{margin:0 0 10px;color:#fff;font-family:var(--fonte-titulo);font-style:italic;font-weight:800;font-stretch:80%;font-size:18px;text-transform:uppercase}
.rodape p,.rodape li{margin:0 0 6px}
.rodape a{color:#fff;text-underline-offset:3px}
.rodape .discreto{opacity:.6;font-size:14px}
.rodape-legal{margin-top:30px;padding-top:18px;border-top:1px solid var(--linha-clara);font-size:13px;line-height:1.6;color:rgba(255,255,255,.55);max-width:80ch}
body.com-barra .rodape{padding-bottom:calc(108px + env(safe-area-inset-bottom))}
@media (min-width:900px){body.com-barra .rodape{padding-bottom:calc(32px + env(safe-area-inset-bottom))}}

/* ===== barra fixa de ação (celular): nome, preço e o botão, centrada no polegar ===== */
.barra-fixa{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:12px;align-items:center;
  padding:10px var(--margem) calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--linha);
  box-shadow:0 -12px 30px -20px rgba(2,0,74,.5);view-transition-name:barra;transition:transform .25s var(--entra),visibility 0s}
.barra-fixa.escondida{transform:translateY(115%);visibility:hidden;transition:transform .2s var(--sai),visibility 0s .2s}
.barra-fixa .btn{flex:1 1 auto;min-width:0;padding:0 16px;font-size:17px}
.barra-resumo{min-width:0;flex:0 0 auto;display:grid;line-height:1.15}
.barra-nome{font-size:13px;font-weight:600;color:var(--cinza);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-preco{font-size:23px;color:var(--azul);white-space:nowrap}
@media (min-width:900px){.barra-fixa{display:none}}

/* ===== aparece ao rolar (uma vez, só transform e opacity) ===== */
.js .surge{opacity:0;transform:translateY(20px);transition:opacity .45s var(--entra),transform .45s var(--entra)}
.js .surge.visivel{opacity:1;transform:none}

/* =====================================================================
   CATÁLOGO (lojista): estoque de cara, filtro à vista, card de uma linha
   ===================================================================== */
.vitrine-topo{background:var(--azul);color:#fff;padding:22px 0 26px}
.vitrine-topo .kicker{color:rgba(255,255,255,.78);margin-bottom:12px}
.vitrine-titulo{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.vitrine-topo h1{font-size:clamp(2.5rem,3vw + 1.6rem,4.25rem)}
.vitrine-total{text-align:right;flex:none}
.vitrine-total b{display:block;font-size:clamp(2.5rem,3vw + 1.6rem,4.25rem);color:var(--laranja)}
.vitrine-total span{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.75);margin-top:4px}
.contagem{margin-top:10px;font-size:15px;color:rgba(255,255,255,.82)}
.contagem b{color:#fff}
/* abas do estoque (pedido do Everton, 02/11/2026): Todos · No estoque · Consignação física · Consignação digital.
   Ficam na borda de baixo da faixa azul, como aba de verdade; a escolhida acende o traço laranja a 12°.
   No celular a fileira rola pro lado (a última aparece cortada: sinal de que tem mais). */
.vitrine-topo.com-abas{padding-bottom:0}
.abas{display:flex;gap:22px;overflow-x:auto;margin:16px calc(var(--margem) * -1) 0;padding:0 var(--margem);scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.aba{flex:none;position:relative;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 0 6px;border:0;background:none;color:rgba(255,255,255,.74);
  font-family:var(--fonte-titulo);font-style:italic;font-weight:800;font-stretch:80%;font-size:17px;text-transform:uppercase;cursor:pointer;transition:color .15s var(--padrao)}
.aba b{font-family:var(--fonte-texto);font-style:normal;font-weight:700;font-size:13px;opacity:.8}
.aba::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--laranja);transform:skewX(-12deg) scaleX(0);transform-origin:left;transition:transform .2s var(--padrao)}
.aba[aria-pressed="true"]{color:#fff}
.aba[aria-pressed="true"]::after{transform:skewX(-12deg) scaleX(1)}
.aba:disabled{opacity:.45;cursor:default}
.aba:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.aba::after{transition:none}}

.filtros{padding:16px 0 4px}
.tipos{display:flex;gap:8px;overflow-x:auto;margin:0 calc(var(--margem) * -1);padding:2px var(--margem) 4px;scrollbar-width:none}
.tipos::-webkit-scrollbar{display:none}
.tipo{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:2px solid var(--linha-forte);border-radius:3px;background:#fff;color:var(--azul);
  font-family:var(--fonte-titulo);font-style:italic;font-weight:800;font-stretch:80%;font-size:17px;text-transform:uppercase;transition:background-color .15s var(--padrao),color .15s var(--padrao),border-color .15s var(--padrao)}
.tipo b{font-weight:700;font-size:13px;font-family:var(--fonte-texto);font-style:normal;opacity:.7}
.tipo[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
.tipo[aria-pressed="true"] b{opacity:.85}
.tipo:disabled{opacity:.45;cursor:default}
.filtros-linha{display:flex;gap:8px;margin-top:10px}
.busca{position:relative;flex:1 1 auto;min-width:0}
.busca .icone{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--cinza);pointer-events:none}
.busca input,.ordem select{width:100%;min-height:46px;border:1.5px solid var(--linha-forte);border-radius:3px;background:#fff;font-size:16px;color:var(--tinta)}
.busca input{padding:0 12px 0 38px}
.busca input::placeholder{color:#76768a}
.ordem{flex:0 1 auto;max-width:46%;position:relative}
.ordem select{appearance:none;-webkit-appearance:none;padding:0 34px 0 12px;font-weight:600;color:var(--azul)}
.ordem::after{content:"";position:absolute;right:13px;top:50%;width:8px;height:8px;border:solid var(--azul);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.busca input:focus,.ordem select:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px rgba(5,0,150,.15)}

.grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 0 8px}
@media (min-width:720px){.grade{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}}

/* card: a foto 4:3 inteira, nome, "ano · km", preço e FIPE com o mês */
.card{container-type:inline-size;display:flex;flex-direction:column;background:#fff;color:inherit;text-decoration:none;border:1px solid var(--linha);border-radius:4px;overflow:hidden;
  -webkit-tap-highlight-color:transparent;transition:border-color .15s var(--padrao),transform .15s var(--padrao)}
.card:hover{border-color:var(--linha-forte)}
.card:active{transform:scale(.99)}
.card-foto{position:relative;aspect-ratio:4/3;background:#e7e5ef;overflow:hidden}
.card-foto img{width:100%;height:100%;object-fit:cover}
.card-foto .sem-foto{width:100%;height:100%;display:grid;place-items:center;color:rgba(5,0,150,.25)}
.card-foto .sem-foto svg{width:42%;height:auto}
.card-selo{position:absolute;left:8px;top:8px;padding:4px 9px;font:800 11px/1.2 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--azul);border-radius:2px}
.card-selo.novo{background:var(--laranja)}
.card-selo.exemplo{background:rgba(2,0,74,.82)}
.card-selo.vendido{background:var(--tinta)}
.card-qtd{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:2px;background:rgba(2,0,74,.72);color:#fff;font:700 11px/1.3 var(--fonte-texto)}
.card-qtd svg{width:12px;height:12px}
.card-corpo{display:flex;flex-direction:column;flex:1;padding:10px 10px 12px}
.card-marca{font:700 11px/1.3 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
.card-nome{margin-top:2px;font-family:var(--fonte-titulo);font-style:italic;font-weight:850;font-stretch:72%;font-size:20px;line-height:1;color:var(--azul);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-linha{margin-top:6px;font-size:13px;font-weight:700;color:var(--tinta)} /* quebra linha: a 320 o "Km a confirmar" sumia nas reticências */
.card-versao{font-size:12.5px;color:var(--cinza);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* consignação digital: o carro não está na loja (Pedro, 04/11/2026) */
.card-onde{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:12.5px;font-weight:700;color:#c24100;line-height:1.25}
.card-onde .icone{width:14px;height:14px}
.card-preco{margin-top:auto;padding-top:10px}
.card-preco .t-numero{display:block;font-size:25px;color:var(--azul)}
.card-fipe{display:block;margin-top:4px;font-size:12px;line-height:1.35;color:var(--cinza)}
.card-fipe b{color:var(--laranja-texto)}
.card.vendido .card-foto img{filter:grayscale(.7);opacity:.85}
.card.vendido .card-preco .t-numero{color:var(--cinza)}
@container (min-width:240px){
  .card-corpo{padding:14px 16px 16px}
  .card-nome{font-size:25px}
  .card-linha{font-size:14px}
  .card-versao{font-size:13.5px}
  .card-preco .t-numero{font-size:30px}
  .card-fipe{font-size:13px}
  .card-selo{left:12px;top:12px}
}

.estado{grid-column:1/-1;padding:40px 8px;text-align:center;color:var(--cinza)}
.estado p{max-width:42ch;margin:0 auto 16px}
.esqueleto{background:#fff;border:1px solid var(--linha);border-radius:4px;overflow:hidden}
.esqueleto i{display:block;aspect-ratio:4/3;background:#e7e5ef}
.esqueleto b{display:block;height:12px;margin:12px 10px 0;background:#eceaf2;border-radius:2px}
.esqueleto b:last-child{width:55%;height:22px;margin-bottom:14px}

.chamada-vender{margin:36px 0 0;background:var(--azul-fundo);color:#fff;position:relative;overflow:hidden}
.chamada-vender .dentro{position:relative;z-index:1;display:grid;gap:18px;padding-top:32px;padding-bottom:36px}
.chamada-vender h2{font-size:clamp(2rem,2.4vw + 1.4rem,3.25rem)}
.chamada-vender h2 span{color:var(--laranja)}
.chamada-vender p{color:rgba(255,255,255,.8);max-width:46ch}
.chamada-vender .botoes{display:flex;flex-wrap:wrap;gap:10px}
.chamada-vender::after{content:"";position:absolute;right:-60px;top:-20%;width:42%;height:140%;background:var(--azul);transform:skewX(-12deg);opacity:.7}
@media (min-width:720px){.chamada-vender .dentro{grid-template-columns:1.2fr 1fr;align-items:center;padding-top:44px;padding-bottom:48px}.chamada-vender .botoes{justify-content:flex-end}}

/* =====================================================================
   PÁGINA DO CARRO: foto, nome, preço e botão na primeira tela do celular
   ===================================================================== */
/* a tela do carro ocupa pelo menos a altura da janela: o rodapé não aparece no esqueleto e depois desce (CLS) */
#tela-carro{min-height:calc(100vh - var(--topo));min-height:calc(100svh - var(--topo))}
/* coluna única com minmax(0,1fr) no celular: sem isso a coluna cresce até a largura da faixa de miniaturas
   (13 fotos = 1.040 px) e a página inteira fica mais larga que a tela (01/11/2026) */
.carro{display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
.carro-galeria,.carro-info{min-width:0}
/* celular deitado: a foto 4:3 na largura toda passava da altura da tela; fica do tamanho da tela, inteira */
@media (orientation:landscape) and (max-height:500px){
  .carro-galeria .galeria-foto{aspect-ratio:auto;height:calc(100vh - var(--topo) - 16px);height:calc(100svh - var(--topo) - 16px)}
}
@media (min-width:900px){
  .carro{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:start;max-width:var(--largura);margin:0 auto;padding:28px var(--margem) 0}
  .carro-info{position:sticky;top:calc(var(--topo) + 20px)}
}
.galeria{position:relative;background:#0c0b29}
@media (min-width:900px){.galeria{border-radius:4px;overflow:hidden}}
.galeria-trilho{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.galeria-trilho::-webkit-scrollbar{display:none}
.galeria-foto{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;aspect-ratio:4/3;background:#0c0b29;cursor:zoom-in}
.galeria-foto img{width:100%;height:100%;object-fit:contain}
/* foto em pé ou quadrada: as faixas dos lados ganham a própria foto desfocada (catalogo.js põe .com-fundo e --fundo) */
.carro-galeria .galeria-foto.com-fundo{position:relative;overflow:hidden}
.carro-galeria .galeria-foto.com-fundo::before{content:"";position:absolute;inset:-30px;background:var(--fundo) center/cover no-repeat;filter:blur(22px) brightness(.55)}
.carro-galeria .galeria-foto.com-fundo img{position:relative}
.galeria-foto .sem-foto{height:100%;display:grid;place-items:center;color:rgba(255,255,255,.22)}
.galeria-foto .sem-foto svg{width:38%;height:auto}
.galeria-voltar{position:absolute;left:10px;top:10px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--azul);box-shadow:0 2px 10px rgba(0,0,0,.18)}
.galeria-voltar svg{width:22px;height:22px}
@media (min-width:900px){.galeria-voltar{display:none}}
.galeria-contador{position:absolute;right:10px;bottom:10px;padding:5px 10px;border-radius:2px;background:rgba(2,0,74,.78);color:#fff;font:700 13px/1.2 var(--fonte-texto);font-variant-numeric:tabular-nums;pointer-events:none}
.galeria-seta{position:absolute;top:50%;display:none;place-items:center;width:46px;height:46px;margin-top:-23px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--azul);box-shadow:0 2px 10px rgba(0,0,0,.2)}
.galeria-seta svg{width:22px;height:22px}
.galeria-seta.ant{left:12px}.galeria-seta.prox{right:12px}
.galeria-seta:disabled{opacity:0;pointer-events:none}
@media (hover:hover) and (min-width:900px){.galeria-seta{display:grid}}
.galeria-fita{position:relative;display:flex;gap:6px;overflow-x:auto;padding:8px var(--margem);scrollbar-width:none;background:#fff;border-bottom:1px solid var(--linha)}
.galeria-fita::-webkit-scrollbar{display:none}
@media (min-width:900px){.galeria-fita{padding:10px 0;background:none;border:0}}
.galeria-fita button{flex:none;width:72px;aspect-ratio:4/3;padding:0;border:2px solid transparent;border-radius:3px;overflow:hidden;background:#e7e5ef;opacity:.7;transition:opacity .15s var(--padrao),border-color .15s var(--padrao)}
.galeria-fita button img{width:100%;height:100%;object-fit:cover}
.galeria-fita button[aria-current="true"]{border-color:var(--laranja);opacity:1}

.carro-info{padding:18px var(--margem) 0}
@media (min-width:900px){.carro-info{padding:0}}
.carro-aviso{margin-bottom:14px;padding:9px 12px;border-left:4px solid var(--azul);background:rgba(5,0,150,.06);font-size:14px;color:var(--azul)}
.carro-selos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.selo{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1.5px solid var(--linha-forte);border-radius:2px;font:700 12px/1.2 var(--fonte-texto);letter-spacing:.06em;text-transform:uppercase;color:var(--azul)}
.selo.laranja{border-color:var(--laranja);color:var(--laranja-texto)}
.selo.cheio{background:var(--tinta);border-color:var(--tinta);color:#fff}
.carro-marca{font:700 12px/1.3 var(--fonte-texto);letter-spacing:.1em;text-transform:uppercase;color:var(--cinza)}
.carro-nome{margin-top:2px;font-family:var(--fonte-titulo);font-style:italic;font-weight:850;font-stretch:72%;font-size:clamp(2rem,1.6vw + 1.6rem,3rem);line-height:.95;color:var(--azul)}
.carro-versao{margin-top:6px;font-size:15px;color:var(--cinza)}
.carro-preco{margin-top:14px;padding-top:14px;border-top:1px solid var(--linha);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.carro-preco .preco{font-size:clamp(2.6rem,2vw + 2rem,3.6rem);color:var(--azul)}
.carro-preco .avista{font-size:13px;font-weight:700;color:var(--cinza);text-transform:uppercase;letter-spacing:.08em}
.carro-fipe{flex-basis:100%;font-size:14px;color:var(--cinza)}
.carro-fipe b{color:var(--laranja-texto)}
.carro-fipe sup,.notas sup{font-size:.7em;line-height:0}
.carro.vendido .carro-preco .preco{color:var(--cinza);text-decoration:line-through;text-decoration-thickness:2px}
/* onde o carro está, logo abaixo do preço: na loja (pode ir ver) ou só por fotos (consignação digital) */
.carro-onde{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:12px 14px;border:1.5px solid var(--linha-forte);border-radius:4px;background:#fff;font-size:14.5px;line-height:1.45;color:var(--tinta)}
.carro-onde .icone{width:24px;height:24px;color:var(--azul);margin-top:1px}
.carro-onde p{min-width:0}
.carro-onde b{display:block;font-size:16px;color:var(--azul)}
.carro-onde.digital{border-color:#c24100;background:#fff5ef}
.carro-onde.digital .icone,.carro-onde.digital b{color:#c24100}

.numeros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px;border-top:1px solid var(--linha)}
.numeros div{padding:10px 8px 10px 0;border-bottom:1px solid var(--linha)}
.numeros div:nth-child(even){padding-left:14px;border-left:1px solid var(--linha)}
@media (min-width:520px){
  .numeros{grid-template-columns:repeat(4,minmax(0,1fr))}
  .numeros div + div{padding-left:12px;border-left:1px solid var(--linha)}
}
.numeros dt{font:700 11px/1.3 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
.numeros dd{margin-top:4px;font-size:21px;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.carro-acoes{display:grid;gap:10px;margin-top:18px}
@media (max-width:899px){.carro-acoes .btn-principal,.carro-acoes-nota{display:none}}
.carro-acoes-nota{font-size:13px;color:var(--cinza);text-align:center}

.bloco{margin-top:28px}
.bloco h2{display:flex;align-items:center;gap:10px;font-family:var(--fonte-titulo);font-style:italic;font-weight:850;font-stretch:72%;font-size:24px;line-height:1;text-transform:uppercase;color:var(--azul);margin-bottom:12px}
.ficha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--linha);border:1px solid var(--linha)}
.ficha div{background:#fff;padding:10px 12px}
.ficha dt{font:700 11px/1.3 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
.ficha dd{margin-top:3px;font-weight:600}
.ficha div:last-child:nth-child(odd){grid-column:1/-1}
.carro-opcionais{margin-top:14px;columns:2;column-gap:18px}
.carro-opcionais li{break-inside:avoid;font-size:15px;line-height:1.4}
@media (max-width:379px){.carro-opcionais{columns:1}}
.carro-desc{margin-top:14px;white-space:pre-line;color:#33334a}
.na-bne li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--linha)}
.na-bne li:last-child{border-bottom:1px solid var(--linha)}
.na-bne svg{width:26px;height:26px;color:var(--azul);margin-top:2px}
.na-bne b{display:block;color:var(--azul)}
.na-bne span{font-size:15px;color:#3d3d55}
.na-bne a{color:var(--azul);font-weight:600}
.notas{margin-top:18px;font-size:13px;line-height:1.55;color:var(--cinza)}
.notas p + p{margin-top:4px}

.mais{margin-top:40px;padding:28px 0 8px;border-top:1px solid var(--linha)}
.mais h2{font-size:clamp(1.75rem,1.5vw + 1.3rem,2.5rem);color:var(--azul);display:flex;align-items:center;gap:10px}
.mais .grade{padding-top:16px}

/* ===== tela cheia das fotos ===== */
.foco{position:fixed;inset:0;z-index:60;background:#05041a;display:flex;flex-direction:column;opacity:0;transition:opacity .2s var(--entra)}
.foco.aberto{opacity:1}
.foco-topo{display:flex;align-items:center;justify-content:space-between;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;color:#fff}
.foco-topo span{font:700 15px/1 var(--fonte-texto);font-variant-numeric:tabular-nums}
.foco-fechar{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff}
.foco-fechar svg{width:24px;height:24px}
.foco .galeria-trilho{flex:1;align-items:center}
.foco .galeria-foto{aspect-ratio:auto;height:100%;background:none;cursor:default;display:grid;place-items:center}
/* foto inteira dentro da tela, em pé e deitado (deitado, com height:auto ela passava da altura da tela; 01/11/2026) */
.foco .galeria-trilho{min-height:0}
/* bloco (não grade): dentro da grade o height:100% da foto não tinha referência e ela voltava a 4:3 pela largura */
.foco .galeria-foto{display:block}
.foco .galeria-foto img{width:100%;height:100%;max-height:none;object-fit:contain;touch-action:pan-x pinch-zoom} /* pan-x: arrastar pro lado em cima da foto passa a foto (só pinch-zoom travava o arrasto) */
.foco .galeria-seta{display:none}
@media (hover:hover){.foco .galeria-seta{display:grid}}
.foco-dica{padding:10px 16px calc(14px + env(safe-area-inset-bottom));text-align:center;color:rgba(255,255,255,.6);font-size:13px}

/* foto do card "voa" pra página do carro (View Transitions; onde não tem, troca direto) */
::view-transition-group(foto-carro){animation-duration:.42s;animation-timing-function:var(--padrao)}
::view-transition-old(foto-carro),::view-transition-new(foto-carro){height:100%;object-fit:cover}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}

/* =====================================================================
   /vender (quem quer vender): uma página, um objetivo, a ficha no topo
   ===================================================================== */
.v-hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(165deg,var(--azul-fundo) 0%,#04007a 55%,var(--azul) 100%)}
.v-hero::before{content:"";position:absolute;right:-18%;top:-10%;width:46%;height:130%;background:rgba(255,255,255,.035);transform:skewX(-12deg);pointer-events:none}
.v-hero-grade{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-top:24px;padding-bottom:28px}
@media (min-width:960px){.v-hero-grade{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding-top:56px;padding-bottom:64px}}
.v-hero .kicker{color:rgba(255,255,255,.8);margin-bottom:14px}
.v-titulo{font-size:clamp(3.05rem,6vw + 1.6rem,6.25rem)}
.v-titulo .linha{display:block;overflow:hidden;padding:0 .06em .04em 0;margin-right:-.06em}
.v-titulo .linha > span{display:block}
.v-titulo .laranja{color:var(--laranja)}
.v-sub{margin-top:14px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.86);max-width:40ch}
.v-sub b{color:#fff}

/* ficha: 3 campos que montam a mensagem do WhatsApp */
.ficha-venda{margin-top:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:520px}
.campo{display:block;min-width:0;border:0;margin:0;padding:0}
.campo-cheio,.ficha-venda .btn,.ficha-aviso{grid-column:1/-1}
.campo > span,.campo legend{display:block;margin-bottom:6px;padding:0;font:700 12px/1.3 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.campo input{width:100%;min-height:50px;padding:0 14px;border:2px solid transparent;border-radius:3px;background:#fff;color:var(--tinta);font-size:16px;outline:none}
.campo input::placeholder{color:#7a7a8c}
.campo input:focus{border-color:var(--laranja)}
.opcoes{display:grid;grid-template-columns:1fr 1fr;height:50px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.12);padding:3px;gap:3px}
.opcoes button{border:0;border-radius:2px;background:transparent;color:#fff;font-weight:700;font-size:16px;transition:background-color .15s var(--padrao),color .15s var(--padrao)}
.opcoes button[aria-pressed="true"]{background:#fff;color:var(--azul)}
.ficha-venda .btn{margin-top:4px;min-height:56px;font-size:20px}
.ficha-aviso{font-size:13.5px;color:rgba(255,255,255,.72)}
.ficha-aviso.erro{color:#ffd2bd;font-weight:600}
/* campo isca (05/11/2026): invisível pra pessoa; robô que preenche não vira contato */
.ficha-isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* até 379 px nome e WhatsApp um embaixo do outro: a 320 o exemplo do WhatsApp aparecia cortado */
@media (max-width:379px){.ficha-venda .campo-contato{grid-column:1/-1}}

.v-hero-3d{position:relative;margin:4px calc(var(--margem) * -1) -28px}
.v-hero-3d img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media (min-width:960px){
  .v-hero-3d{margin:0;transform:skewX(-12deg);overflow:hidden;border-radius:3px;box-shadow:0 40px 80px -36px rgba(0,0,0,.8)}
  .v-hero-3d img{transform:skewX(12deg) scale(1.15);aspect-ratio:16/10;object-position:64% 50%}
}

.provas{background:#fff;border-bottom:1px solid var(--linha)}
.provas ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.provas li{padding:20px 12px 20px 0}
.provas li:nth-child(even){padding-left:16px;border-left:1px solid var(--linha)}
.provas li:nth-child(n+3){border-top:1px solid var(--linha)}
@media (min-width:720px){
  .provas ul{grid-template-columns:repeat(4,minmax(0,1fr))}
  .provas li{padding:30px 20px}
  .provas li + li{border-left:1px solid var(--linha)}
  .provas li:nth-child(n+3){border-top:0}
}
.provas b{display:block;font-size:clamp(1.85rem,1.6vw + 1.4rem,3rem);color:var(--azul);white-space:nowrap}
.provas span{display:block;margin-top:6px;font-size:14px;line-height:1.35;color:#3d3d55}
/* faixa de 3 (portal, 01/11): no celular o 3º ocupa a linha toda; a partir de 720, 3 colunas */
@media (max-width:719px){.provas-3 li:last-child{grid-column:1/-1}}
@media (min-width:720px){.provas-3 ul{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* números da equipe (01/11, confirmados pelo Pedro): par de números entre o título e as avaliações do /vender */
.numeros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 28px;padding:0;list-style:none;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.numeros li{padding:16px 12px 16px 0;min-width:0}
.numeros li + li{padding-left:16px;border-left:1px solid var(--linha)}
.numeros b{display:block;font-size:clamp(2rem,1.6vw + 1.5rem,3rem);color:var(--azul);white-space:nowrap}
.numeros span{display:block;margin-top:4px;font-size:14px;line-height:1.35;color:#3d3d55}
@media (min-width:720px){.numeros{max-width:40rem}.numeros li{padding:22px 24px 22px 0}.numeros li + li{padding-left:24px}}

.secao{padding:56px 0}
@media (min-width:720px){.secao{padding:88px 0}}
.secao-azul{background:var(--azul-fundo);color:#fff}
.secao-branca{background:#fff}
.cabeca{max-width:40rem;margin-bottom:28px}
.cabeca .kicker{color:var(--laranja-texto);margin-bottom:12px}
.secao-azul .cabeca .kicker{color:#ff8a57}
.cabeca h2{font-size:clamp(2.25rem,3vw + 1.4rem,4rem);color:var(--azul)}
.secao-azul .cabeca h2{color:#fff}
.cabeca p{margin-top:12px;font-size:17px;color:#3d3d55;max-width:46ch}
.secao-azul .cabeca p{color:rgba(255,255,255,.8)}

/* passos: a pista laranja enche enquanto a pessoa rola (melhoria progressiva) */
.passos{position:relative;display:grid;gap:26px}
/* pista vertical no celular: reta. Inclinada 12° (como era até 01/11/2026), num traço alto ela virava diagonal e saía da coluna dos números */
.passos::before,.passos::after{content:"";position:absolute;left:21px;top:8px;bottom:8px;width:4px;transform-origin:top}
.passos::before{background:rgba(255,255,255,.14)}
.passos::after{background:var(--laranja)}
.passo{position:relative;display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start}
.passo-n{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;background:var(--laranja);color:#fff;font-size:26px;transform:skewX(-12deg)}
.passo-n span{transform:skewX(12deg)}
.passo h3{font-family:var(--fonte-titulo);font-style:italic;font-weight:850;font-stretch:72%;font-size:28px;line-height:1;text-transform:uppercase}
.passo-tempo{display:inline-block;margin:8px 0 6px;padding:3px 8px;border:1.5px solid rgba(255,255,255,.35);border-radius:2px;font:700 12px/1.3 var(--fonte-texto);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.passo p{color:rgba(255,255,255,.8);max-width:40ch}
@media (min-width:860px){
  .passos{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .passos::before,.passos::after{left:8px;right:8px;top:21px;bottom:auto;width:auto;height:4px;transform:skewX(-12deg);transform-origin:left}
  .passo{grid-template-columns:1fr;gap:18px}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .passos:not(.com-pista)::after{animation:pista linear both;animation-timeline:view();animation-range:entry 40% cover 55%}
    @keyframes pista{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    @media (min-width:860px){@keyframes pista{from{transform:skewX(-12deg) scaleX(0)}to{transform:skewX(-12deg) scaleX(1)}}}
  }
}

.compra{display:grid;gap:12px}
@media (min-width:860px){.compra{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.compra li{position:relative;padding:22px 20px 26px;background:var(--papel);border-radius:3px}
.compra li::after{content:"";position:absolute;left:20px;bottom:0;width:34px;height:5px;background:var(--laranja);transform:skewX(-12deg)}
.compra h3{font-family:var(--fonte-titulo);font-style:italic;font-weight:850;font-stretch:72%;font-size:26px;line-height:1;text-transform:uppercase;color:var(--azul)}
.compra p{margin-top:8px;color:#3d3d55}

.levar{display:grid;gap:28px}
@media (min-width:860px){.levar{grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}.levar .cabeca{margin-bottom:0}}
.levar .lista-traco li{padding:14px 0 14px 30px;border-top:1px solid var(--linha);font-size:16px;color:#33334a}
.levar .lista-traco li::before{top:23px}
.levar .lista-traco li:last-child{border-bottom:1px solid var(--linha)}
.levar .lista-traco b{color:var(--azul)}

.faq{max-width:52rem;border-top:1px solid var(--linha-forte)}
.faq details{border-bottom:1px solid var(--linha-forte)}
.faq summary{position:relative;list-style:none;padding:18px 48px 18px 0;font-family:var(--fonte-titulo);font-style:italic;font-weight:800;font-stretch:80%;font-size:21px;line-height:1.15;color:var(--azul);cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:16px;height:4px;margin-top:-2px;background:var(--laranja);transform:skewX(-12deg);transition:transform .2s var(--padrao)}
.faq summary::after{transform:skewX(-12deg) rotate(90deg)}
.faq details[open] summary::after{transform:skewX(-12deg) rotate(0)}
.faq details p{padding:0 40px 20px 0;color:#33334a;max-width:60ch}

.v-final{position:relative;overflow:hidden;background:var(--azul-fundo);color:#fff}
.v-final-foto img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
@media (min-width:860px){.v-final-foto img{aspect-ratio:16/5}}
.v-final .dentro{padding-top:40px;padding-bottom:48px}
.v-final h2{font-size:clamp(2.5rem,4vw + 1.4rem,5rem)}
.v-final h2 span{color:var(--laranja)}
.v-final p{margin-top:12px;color:rgba(255,255,255,.82);max-width:42ch;font-size:17px}
.v-final .btn{margin-top:22px}
.v-final address{margin-top:26px;font-style:normal;color:rgba(255,255,255,.75);font-size:15px}
.v-final address a{color:#fff;font-weight:600}

/* título que entra por linha (uma vez, ao abrir; só transform) */
@media (prefers-reduced-motion:no-preference){
  .js .v-titulo .linha > span{transform:translateY(105%);animation:sobe .55s var(--entra) forwards}
  .js .v-titulo .linha:nth-child(2) > span{animation-delay:.08s}
  @keyframes sobe{to{transform:none}}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .surge{opacity:1;transform:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ===== página que não existe ===== */
.erro-404{min-height:calc(100vh - var(--topo));min-height:calc(100svh - var(--topo));display:grid;place-items:center;text-align:center;background:var(--azul);color:#fff;padding:40px var(--margem)}
.erro-404 h1{font-size:clamp(3rem,6vw + 1.5rem,6rem)}
.erro-404 p{margin:12px auto 22px;color:rgba(255,255,255,.82);max-width:32ch}

/* =====================================================================
   31/10/2026 · portal de entrada (/), página do comprador (/comprar),
   avaliações do Google e a loja de verdade. Ideias tiradas das LPs do
   Everton (bomnegociorepasse.com.br), redesenhadas na marca da BNE.
   ===================================================================== */

/* ===== portal (/): quem é a BNE em uma linha e três portas ===== */
.i-hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(165deg,var(--azul-fundo) 0%,#04007a 60%,var(--azul) 100%)}
.i-hero::before{content:"";position:absolute;right:-22%;top:-10%;width:50%;height:130%;background:rgba(255,255,255,.035);transform:skewX(-12deg);pointer-events:none}
.i-hero .dentro{position:relative;padding-top:22px;padding-bottom:28px}
@media (min-width:900px){.i-hero .dentro{padding-top:56px;padding-bottom:64px}}
.i-hero .kicker{color:rgba(255,255,255,.8);margin-bottom:12px}
.i-titulo{font-size:clamp(2.6rem,5vw + 1.4rem,5.5rem)}
.i-titulo .linha{display:block;overflow:hidden;padding:0 .06em .04em 0;margin-right:-.06em}
.i-titulo .linha > span{display:block}
.i-titulo .laranja{color:var(--laranja)}
.i-sub{margin-top:12px;font-size:17px;line-height:1.45;color:rgba(255,255,255,.86);max-width:44ch}
@media (prefers-reduced-motion:no-preference){
  .js .i-titulo .linha > span{transform:translateY(105%);animation:sobe .55s var(--entra) forwards}
  .js .i-titulo .linha:nth-child(2) > span{animation-delay:.08s}
}

.portas{display:grid;gap:10px;margin-top:22px}
@media (min-width:900px){.portas{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}}
.porta{position:relative;isolation:isolate;display:grid;align-content:center;min-height:118px;padding:16px 72px 16px 18px;overflow:hidden;border-radius:4px;
  background:var(--azul-meio);color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent;box-shadow:0 18px 40px -28px rgba(0,0,0,.9)}
.porta-foto{position:absolute;inset:0;z-index:-2}
.porta-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--padrao)}
.porta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(2,0,74,.97) 0%,rgba(2,0,74,.9) 42%,rgba(2,0,74,.45) 100%)}
.porta::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--laranja)}
.porta-rotulo{font:700 11.5px/1.3 var(--fonte-texto);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.porta-titulo{margin-top:4px;font-size:clamp(1.9rem,1.2vw + 1.55rem,2.6rem)}
.porta-titulo span{color:var(--laranja)}
.porta-linha{margin-top:6px;font-size:14px;line-height:1.35;color:rgba(255,255,255,.85);max-width:34ch}
.porta-seta{position:absolute;right:16px;top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;color:#fff;transition:transform .2s var(--padrao)}
.porta-seta::before{content:"";position:absolute;inset:0;background:var(--laranja);transform:skewX(-12deg);border-radius:2px}
.porta-seta svg{position:relative;width:22px;height:22px}
.porta:hover .porta-foto img{transform:scale(1.04)}
.porta:hover .porta-seta{transform:translateX(4px)}
.porta:active{transform:scale(.99)}
@media (min-width:900px){
  .porta{min-height:400px;align-content:end;padding:28px 26px 30px}
  .porta::before{background:linear-gradient(0deg,rgba(2,0,74,.98) 0%,rgba(2,0,74,.88) 38%,rgba(2,0,74,.2) 78%,rgba(2,0,74,.05) 100%)}
  .porta::after{top:auto;right:0;width:auto;height:6px}
  .porta-titulo{font-size:2.9rem}
  .porta-linha{font-size:15px}
  .porta-seta{position:relative;right:auto;top:auto;margin:18px 0 0;justify-self:start}
}

/* ===== avaliações do Google (texto, não print: leve e legível) ===== */
.avaliacoes-trilho{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 calc(var(--margem) * -1);padding:4px var(--margem) 10px;scrollbar-width:none;overscroll-behavior-x:contain}
.avaliacoes-trilho::-webkit-scrollbar{display:none}
@media (min-width:860px){.avaliacoes-trilho{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0;padding:0;gap:20px}}
@media (min-width:1100px){.avaliacoes-trilho{grid-template-columns:repeat(4,minmax(0,1fr))}}
.avaliacao{scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;padding:20px 18px;background:#fff;border:1px solid var(--linha);border-radius:4px}
.secao-branca .avaliacao{background:var(--papel);border-color:transparent}
.estrelas{display:flex;gap:3px;color:var(--laranja)}
.estrelas svg{width:18px;height:18px}
.avaliacao blockquote{margin:0;font-size:17px;line-height:1.45;color:var(--tinta)}
.avaliacao figcaption{margin-top:auto;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--cinza)}
.avaliacao figcaption b{display:block;color:var(--azul);font-size:15px}
.avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--azul);color:#fff;font:800 16px/1 var(--fonte-texto)}
.avaliacoes-pe{margin-top:16px;font-size:14px;color:var(--cinza)}
.avaliacoes-pe a{color:var(--azul);font-weight:700}
.dica-arraste{margin-top:2px;font-size:13px;color:var(--cinza)}
@media (min-width:860px){.dica-arraste{display:none}}

/* ===== a loja de verdade: fachada, endereço, por dentro ===== */
.loja{display:grid;gap:22px}
@media (min-width:900px){.loja{grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}}
.loja-fachada{margin:0 calc(var(--margem) * -1)}
.loja-fachada img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media (min-width:900px){.loja-fachada{margin:0;border-radius:4px;overflow:hidden}}
.loja-texto .cabeca{margin-bottom:16px}
.loja-endereco{font-style:normal;font-size:18px;line-height:1.45;color:var(--tinta)}
.loja-endereco b{display:block;color:var(--azul);font-family:var(--fonte-titulo);font-style:italic;font-weight:850;font-stretch:72%;font-size:28px;line-height:1;text-transform:uppercase;margin-bottom:6px}
.loja-botoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.loja-botoes .btn{flex:1 1 auto;padding:0 18px}
@media (min-width:520px){.loja-botoes .btn{flex:0 0 auto;padding:0 30px}}
.loja-dentro{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.loja-dentro img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.loja-dentro figcaption{margin-top:6px;font-size:13px;color:var(--cinza)}

/* ===== números grandes (ideia da LP do Everton, na marca da BNE) ===== */
.numerados{display:grid;gap:14px;counter-reset:n}
@media (min-width:860px){.numerados{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}}
.numerados li{display:grid;grid-template-columns:clamp(58px,4vw + 40px,92px) minmax(0,1fr);align-items:center}
.numerados .n{position:relative;z-index:1;justify-self:end;margin-right:-18px;font-size:clamp(5.5rem,6vw + 3rem,8rem);line-height:.78;color:var(--laranja);text-shadow:0 10px 30px rgba(255,83,0,.25)}
.numerados .caixa{padding:20px 18px 22px 30px;background:var(--azul-fundo);color:#fff;border-radius:3px}
.numerados h3{font-family:var(--fonte-titulo);font-style:italic;font-weight:850;font-stretch:72%;font-size:26px;line-height:1;text-transform:uppercase}
.numerados p{margin-top:8px;color:rgba(255,255,255,.82);font-size:15.5px}
.secao-azul .numerados .caixa{background:rgba(255,255,255,.07)}

/* ===== canal de ofertas: o bloco dividido (laranja | azul) ===== */
.canal{display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;border-radius:4px;background:var(--azul-fundo);color:#fff}
@media (min-width:860px){.canal{grid-template-columns:1fr 1.1fr}}
.canal-palavra{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:center;min-height:170px;padding:26px 24px;background:var(--laranja)}
.canal-palavra::after{content:"";position:absolute;right:-30%;top:-20%;width:60%;height:140%;z-index:-1;background:rgba(255,255,255,.1);transform:skewX(-12deg)}
.canal-palavra p{font:700 13px/1.3 var(--fonte-texto);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.canal-palavra strong{display:block;margin-top:6px;font-size:clamp(2.8rem,5vw + 2rem,6rem);color:#fff}
.canal-texto{padding:26px 24px 30px}
@media (min-width:860px){.canal-palavra{padding:40px;clip-path:polygon(0 0,100% 0,calc(100% - 46px) 100%,0 100%);margin-right:-46px}.canal-texto{padding:44px 44px 44px 70px}}
.canal-texto h2{font-size:clamp(2rem,2vw + 1.4rem,3rem)}
.canal-texto p{margin-top:10px;color:rgba(255,255,255,.82);max-width:42ch}
.canal-texto .btn{margin-top:20px}
.canal-texto small{display:block;margin-top:12px;font-size:13px;color:rgba(255,255,255,.6)}

/* título de hero com frase mais comprida (/comprar) */
.v-titulo-longo{font-size:clamp(2.75rem,4.2vw + 1.5rem,5rem)}

/* botões em linha no hero */
.hero-botoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-botoes .btn{flex:1 1 auto}
@media (min-width:520px){.hero-botoes .btn{flex:0 0 auto}}

/* foto real no hero (mesmo recorte inclinado do 3D) */
.v-hero-foto img{object-position:50% 60%}
@media (min-width:960px){.v-hero-foto img{object-position:42% 55%}}

/* chamada pro lojista no fim do estoque */
.chamada-lojista{margin-top:0;background:var(--azul)}
.chamada-lojista::after{background:var(--azul-fundo);opacity:.55}

/* ===== call de 31/10/2026 (Whayne e Everton), página de abertura ===== */
/* bolinha do WhatsApp flutuante (1.1). Verde do WhatsApp escurecido pra passar 3:1 com o ícone branco
   e com o fundo papel (#25d366 dá 2:1); fica acima do conteúdo, no canto, longe do centro das portas */
.wa-flutuante{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:46;
  display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#189d4a;color:#fff;text-decoration:none;
  box-shadow:0 12px 26px -10px rgba(2,0,74,.6),0 2px 6px rgba(2,0,74,.22);transition:transform .15s var(--padrao)}
.wa-flutuante svg{width:32px;height:32px}
.wa-flutuante:hover{transform:scale(1.05)}
.wa-flutuante:active{transform:scale(.95)}
@media (min-width:720px){.wa-flutuante{right:28px;bottom:28px;width:64px;height:64px}.wa-flutuante svg{width:34px;height:34px}}
@media (prefers-reduced-motion:reduce){.wa-flutuante{transition:none}}
body.com-flutuante .rodape{padding-bottom:calc(100px + env(safe-area-inset-bottom))}

/* nota do Google em evidência (1.4): o número grande para o olho, as estrelas confirmam */
.nota-google{display:inline-flex;align-items:center;gap:14px;margin-bottom:18px;padding:12px 20px 12px 16px;
  background:#fff;border:1px solid var(--linha);border-radius:4px;color:var(--tinta);text-decoration:none;
  box-shadow:0 14px 30px -24px rgba(2,0,74,.7)}
.nota-numero{font-size:56px;color:var(--azul)}
.nota-lado{display:grid;gap:7px}
.nota-google .estrelas svg{width:24px;height:24px}
.nota-texto{font-size:16px;font-weight:600;color:var(--cinza);line-height:1.2}
.nota-texto b{color:var(--tinta);font-weight:800}

/* botão das avaliações (1.5): botão de verdade, largura cheia no celular; o texto longo quebra em 2 linhas se precisar */
.avaliacoes-pe{margin-top:22px}
.avaliacoes-pe .btn-avaliacoes{color:#fff} /* a regra antiga ".avaliacoes-pe a" pintava o texto de azul sobre o azul */
.btn-avaliacoes{width:100%;min-height:60px;padding:12px 26px;font-size:20px;white-space:normal;text-align:center;line-height:1.05}
.btn-avaliacoes .icone{color:var(--laranja)}
@media (min-width:520px){.btn-avaliacoes{width:auto;padding:0 36px}}

/* título da loja (1.7): duas cores, como "Agilidade / e confiança." do topo */
.titulo-loja{font-size:clamp(2.1rem,2.4vw + 1.4rem,3.4rem)}
.titulo-loja span{display:block;color:var(--laranja-texto)}

/* mais fotos da loja (1.6): as do Perfil da BNE no Google, em grade (todas à vista, sem carrossel) */
.loja-galeria-titulo{margin:40px 0 14px;color:var(--laranja-texto)}
.loja-galeria{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px}
@media (min-width:860px){.loja-galeria{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px}}
.loja-galeria img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:3px;background:#e9e7f7}
.loja-galeria figcaption{margin-top:6px;font-size:13px;color:var(--cinza)}

/* ===== call de 31/10/2026, página /vender ===== */
/* logo 3D embaixo da ficha (2.3): no celular a foto começava com uma linha reta e outra cor; agora nasce
   do fundo azul do topo, sem emenda */
@media (max-width:959px){
  .v-hero-3d img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%);mask-image:linear-gradient(to bottom,transparent 0,#000 45%)}
}
/* passos no celular (2.6): a pista laranja anda com a rolagem e acende o 1, o 2 e o 3 quando chega em cada um
   (vender.js põe .com-pista, --trilho e --pista; sem JS ou com "reduzir movimento", fica tudo aceso como antes) */
@media (max-width:859px){
  .passos.com-pista::before,.passos.com-pista::after{top:23px;bottom:auto;height:var(--trilho,100%)}
  .passos.com-pista::after{transform:scaleY(var(--pista,0));transition:transform .12s linear}
  .passos.com-pista .passo-n{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.4);transition:background-color .25s var(--padrao),box-shadow .25s var(--padrao)}
  .passos.com-pista .passo.aceso .passo-n{background:var(--laranja);box-shadow:none;animation:acende .4s var(--entra)}
  @keyframes acende{0%{transform:skewX(-12deg) scale(.82)}60%{transform:skewX(-12deg) scale(1.1)}100%{transform:skewX(-12deg) scale(1)}}
}
/* teste (2.10): botão fixo na cor do WhatsApp. Verde escurecido pra o texto branco passar AA (5:1).
   Pra voltar ao laranja, é só tirar a classe btn-whats do botão da barra no vender/index.html */
.btn-whats{--fundo:#0e7f45;--fundo-hover:#0b6b3a}
/* WhatsApp do bloco "A loja" do portal com a palavra em verde (teste do Pedro, 01/11); pra voltar, tirar a classe no index.html */
.btn-contorno-verde{color:#0e7f45;--fundo-hover:rgba(14,127,69,.07)}

/* ===== call de 31/10/2026, página /comprar ===== */
/* cards numerados no celular (3.7): o número ficava numa coluna do lado de fora e o card começava ~90 px pra
   dentro; agora o card ocupa a largura toda, alinhado com o título, e o número grande entra no canto de cima */
@media (max-width:859px){
  .numerados li{position:relative;display:block}
  .numerados .n{position:absolute;top:14px;right:16px;margin:0;font-size:4rem;line-height:.8;text-shadow:none;z-index:2}
  .numerados .caixa{padding:20px 18px 22px}
  /* a linha do título reserva a altura do número, pra ele não cair em cima do texto */
  .numerados h3{display:flex;align-items:flex-end;min-height:52px;padding-right:60px}
}

/* ===== call de 31/10/2026, estoque ===== */
/* título "Estoque BNE": ficou laranja de 31/10 a 01/11/2026 e voltou pro branco (Pedro: "não ficou legal") */
/* aviso quando o link é de um carro que saiu do estoque (vendido, arquivado) */
.aviso-indisponivel{margin:4px 0 14px;padding:12px 14px;border-left:4px solid var(--laranja);background:#fff;color:var(--tinta);font-size:15px;border-radius:2px}
/* seletor de ordem (4.1): "Recém-chegados" cortava em 46% da linha no celular de 390 px */
.ordem{flex:0 0 180px;max-width:none}
.ordem select{padding-right:30px}
/* modo lojista (5.12, caminho A): no lugar do preço do cliente final, "Repasse no grupo" */
.card-repasse{font-size:19px}
.modo-lojista .carro-preco .preco{font-size:clamp(1.9rem,2vw + 1.2rem,2.6rem)}

/* ===== check-up do celular (01/11/2026) ===== */
/* botões da página do carro: "Simular financiamento" não cabia em 288 px (tela de 320) com o texto numa linha só */
.carro-acoes .btn{white-space:normal;text-align:center;line-height:1.05}
@media (max-width:359px){.carro-acoes .btn{padding:10px 16px;font-size:17px}}
/* barra de baixo no modo lojista: "Repasse no grupo" (23 px) empurrava o botão do WhatsApp pra fora a 320 px */
.barra-resumo{flex:0 1 auto}
.modo-lojista .barra-preco{font-size:18px}
/* topo e rodapé: alvo de toque de 44 px (WCAG 2.2 pede 24; 44 é o que o dedo acerta sem errar) */
.topo-selo,.topo-fone{min-height:44px;display:inline-flex;align-items:center}
@media (min-width:400px){.topo-link{min-height:44px;display:inline-flex;align-items:center}} /* só onde ele aparece: abaixo de 400 fica escondido */
.btn-pequeno{min-height:44px}
.rodape a{display:inline-flex;align-items:center;min-height:44px}
.rodape p,.rodape li{margin:0}
.canal-texto small a{display:inline-flex;align-items:center;min-height:44px}
/* /comprar e /vender a 320–419: botão do topo com texto comprido quebra linha em vez de cortar */
@media (max-width:419px){.hero-botoes .btn{white-space:normal;text-align:center;line-height:1.05;min-height:56px;padding:10px 22px}}
@media (max-width:359px){
  .provas b{font-size:1.6rem}                                  /* "FIPE + mês" e "Financiado" passavam da célula */
  .ficha-venda .btn{font-size:17px;padding:0 16px;gap:8px}     /* "Quero avaliar meu carro" saía do laranja */
  .filtros-linha{flex-wrap:wrap}                               /* busca com ~50 px pra digitar: vira linha inteira */
  .busca,.ordem{flex:1 1 100%}
}
/* 404: os dois botões empilhados com espaço entre eles */
.erro-404 .btn{margin:6px 4px}
/* iPhone deitado: o conteúdo não entra embaixo do recorte da câmera */
.dentro,.topo-dentro{padding-left:max(var(--margem),env(safe-area-inset-left));padding-right:max(var(--margem),env(safe-area-inset-right))}
.barra-fixa{padding-left:max(var(--margem),env(safe-area-inset-left));padding-right:max(var(--margem),env(safe-area-inset-right))}
/* vídeo do veículo (06/11/2026): no cartão, junto da contagem de fotos; na página, botão sobre a galeria e tela cheia */
.card-qtd-video{display:inline-flex;align-items:center;gap:4px}
.card-qtd svg + .card-qtd-video{margin-left:4px;padding-left:7px;border-left:1px solid rgba(255,255,255,.4)}
.galeria-video{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px 0 11px;border:0;border-radius:2px;background:rgba(2,0,74,.86);color:#fff;font:700 14px/1 var(--fonte-texto);font-variant-numeric:tabular-nums;cursor:pointer}
.galeria-video svg{width:18px;height:18px}
.galeria-video:focus-visible{outline:3px solid var(--laranja);outline-offset:2px}
.foco-video-caixa{flex:1;display:grid;place-items:center;min-height:0;padding-bottom:env(safe-area-inset-bottom)}
.foco-video-caixa video{width:100%;max-height:100%;background:#000}