/* Listar Veículos · asfalto + âmbar de farol. Uma família (Archivo): larga nos títulos e preços, normal no texto. */
:root {
  --asfalto: #12161C;
  --grafite: #1C222B;
  --grafite-2: #242B36;
  --linha: #2A323D;
  --ambar: #F2B23A;
  --ambar-escuro: #C98A12;
  --gelo: #E9EDF2;
  --nevoa: #93A0B0;
  --verde-zap: #25D366;
  --placa-azul: #1E4FA8;
  --raio: 14px;
  --nav-h: calc(64px + env(safe-area-inset-bottom));
  --largo: "Archivo", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--asfalto); color: var(--gelo); font: 400 16px/1.55 var(--largo); font-stretch: 100%; padding-bottom: var(--nav-h); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-stretch: 125%; line-height: 1.05; letter-spacing: -.01em; margin: 0; }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; padding-top: calc(12px + env(safe-area-inset-top)); background: rgba(18, 22, 28, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(42, 50, 61, .7); }
.marca { display: flex; align-items: center; gap: 8px; text-decoration: none; font-stretch: 125%; font-weight: 500; font-size: 18px; letter-spacing: -.01em; }
.marca b { font-weight: 800; color: var(--ambar); }
.marca-ico { width: 30px; height: 30px; fill: var(--ambar); }
.marca-ico circle { fill: var(--asfalto); }
.topo-zap { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--grafite); border: 1px solid var(--linha); text-decoration: none; font-weight: 600; font-size: 14px; }
.topo-zap svg { width: 18px; height: 18px; fill: none; stroke: var(--verde-zap); stroke-width: 1.8; }

/* ---------- topo da página: título largo + busca em forma de placa ---------- */
.hero { padding: 34px 18px 26px; max-width: 760px; margin: 0 auto; }
.hero h1 { font-size: clamp(34px, 9vw, 60px); font-weight: 800; max-width: 12ch; }
.hero-sub { color: var(--nevoa); margin: 14px 0 26px; max-width: 46ch; }
/* placa Mercosul: branca, faixa azul em cima, letras pretas largas */
.placa { position: relative; display: grid; grid-template-columns: 1fr 58px; grid-template-rows: 22px 62px; background: #F6F7F9; border: 3px solid #0E1116; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px -18px rgba(0,0,0,.8); overflow: hidden; max-width: 560px; }
.placa-faixa { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--placa-azul); color: #fff; font-stretch: 125%; font-weight: 700; font-size: 11px; letter-spacing: .32em; }
.placa-faixa i { width: 14px; height: 10px; border-radius: 1px; background: linear-gradient(#009C3B 0 100%); position: relative; }
.placa-faixa i::after { content: ""; position: absolute; inset: 2px 3px; background: #FFDF00; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.placa input { border: 0; outline: 0; background: transparent; color: #0E1116; padding: 0 16px; font-stretch: 125%; font-weight: 700; font-size: clamp(22px, 6vw, 30px); letter-spacing: .06em; text-transform: uppercase; min-width: 0; }
.placa input::placeholder { color: #8A929D; letter-spacing: .02em; text-transform: none; font-weight: 600; }
.placa input::-webkit-search-cancel-button { display: none; }
.placa:focus-within { border-color: var(--ambar); }
.placa-btn { display: grid; place-items: center; background: #0E1116; color: var(--ambar); }
.placa-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.faixas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.faixas button, .tipos button { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--grafite); font-size: 14px; font-weight: 600; color: var(--gelo); }
.faixas button.ativo, .tipos button.ativo { background: var(--ambar); border-color: var(--ambar); color: #17120A; }

/* ---------- blocos ---------- */
.bloco { padding: 26px 18px; max-width: 1180px; margin: 0 auto; }
.bloco > h2, .bloco-cabeca h2 { font-size: clamp(22px, 5.4vw, 30px); font-weight: 750; }
.bloco-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ordem select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2B23A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center / 15px no-repeat; border: 0; padding: 6px 22px 6px 0; font-weight: 600; font-size: 14px; color: var(--gelo); }
.ordem select option { background: var(--grafite); }

/* ofertas: carrossel com o próximo card aparecendo */
.trilho { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 330px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; margin: 0 -18px; padding: 0 18px 6px; scrollbar-width: none; }
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { scroll-snap-align: start; }

/* garantias */
.garantias { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linha); border-block: 1px solid var(--linha); margin: 14px 0; }
.garantias div { background: var(--asfalto); padding: 18px; display: grid; gap: 2px; }
.garantias svg { width: 26px; height: 26px; fill: none; stroke: var(--ambar); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.garantias b { font-weight: 700; }
.garantias span { color: var(--nevoa); font-size: 14px; }
@media (min-width: 820px) { .garantias { grid-template-columns: repeat(4, 1fr); } .garantias div { padding: 24px; } }

.tipos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px; }
.tipos::-webkit-scrollbar { display: none; }
.tipos button { flex: none; }
.contagem { color: var(--nevoa); font-size: 14px; margin: 14px 0; }
.contagem button { color: var(--ambar); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- card do carro ---------- */
/* minmax(0, 1fr): a foto (width=640 no HTML) não pode alargar a coluna além da tela */
.grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.carro { position: relative; display: flex; flex-direction: column; background: var(--grafite); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; text-align: left; width: 100%; }
.carro-foto { position: relative; aspect-ratio: 16 / 10; background: var(--grafite-2); overflow: hidden; }
.carro-foto img { width: 100%; height: 100%; object-fit: cover; }
.selo { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 6px; background: var(--asfalto); color: var(--gelo); font-size: 12.5px; font-weight: 700; }
.selo-oferta { background: var(--ambar); color: #17120A; }
.fav { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(18, 22, 28, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fav svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; }
.fav[aria-pressed="true"] svg { fill: var(--ambar); stroke: var(--ambar); }
.carro-corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carro-nome { font-stretch: 112%; font-weight: 750; font-size: 19px; line-height: 1.15; }
.carro-versao { display: block; color: var(--nevoa); font-weight: 500; font-size: 14px; font-stretch: 100%; margin-top: 3px; }
.specs { display: flex; flex-wrap: wrap; gap: 6px; }
.specs span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 6px; background: var(--grafite-2); color: #C8D0DA; font-size: 13px; font-weight: 600; }
.specs svg { width: 14px; height: 14px; fill: none; stroke: var(--nevoa); stroke-width: 2; stroke-linecap: round; }
.preco { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.preco strong { font-stretch: 125%; font-weight: 800; font-size: 25px; letter-spacing: -.01em; color: var(--gelo); }
.preco del { color: var(--nevoa); font-size: 13.5px; }
.parcela { color: var(--nevoa); font-size: 13.5px; }
.parcela b { color: var(--ambar); font-weight: 700; }
.carro-abrir { position: absolute; inset: 0; z-index: 1; border-radius: var(--raio); }
.carro .fav { z-index: 2; }
.carro:has(.carro-abrir:hover) { border-color: #3A4452; }
.trilho .carro-nome { font-size: 17px; }
.trilho .preco strong { font-size: 22px; }
.baixou { color: var(--ambar); font-weight: 700; font-size: 13.5px; }

/* passos (é uma sequência de verdade, por isso numerado) */
.passos { list-style: none; counter-reset: passo; padding: 0; margin: 18px 0 0; display: grid; gap: 0; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 14px 0; border-top: 1px solid var(--linha); }
.passos li::before { content: counter(passo); grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ambar); color: var(--ambar); font-stretch: 125%; font-weight: 800; font-size: 18px; }
.passos b { font-weight: 700; font-size: 17px; }
.passos span { color: var(--nevoa); font-size: 15px; }
@media (min-width: 900px) { .passos { grid-template-columns: repeat(4, 1fr); gap: 20px; } .passos li { border-top: 2px solid var(--linha); grid-template-columns: 1fr; padding-top: 18px; } .passos li::before { grid-row: auto; margin-bottom: 12px; } }

/* vender */
.vender { background: var(--grafite); border-radius: 20px; margin: 18px; padding: 24px 18px; border: 1px solid var(--linha); }
@media (min-width: 1216px) { .vender { margin: 18px auto; } }
.vender > p { color: var(--nevoa); margin: 8px 0 18px; }
.form-vender { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--nevoa); }
.campo input { width: 100%; min-width: 0; }
.campo-largo { grid-column: 1 / -1; }
.campo input { height: 48px; border-radius: 10px; border: 1px solid var(--linha); background: var(--asfalto); padding: 0 14px; font-size: 16px; font-weight: 600; color: var(--gelo); }
.campo input:focus { outline: none; border-color: var(--ambar); }
.form-vender .btn, .form-vender .erro { grid-column: 1 / -1; }
.erro { color: #FF8A7A; font-weight: 600; font-size: 14px; margin: 0; }
@media (min-width: 760px) { .form-vender { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; } .form-vender .btn { grid-column: auto; } }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 12px; font-weight: 700; font-size: 16px; text-decoration: none; }
.btn-ambar { background: var(--ambar); color: #17120A; }
.btn-ambar:hover { background: #F6C35F; }
.btn-zap { background: var(--verde-zap); color: #062814; }
.btn-linha { border: 1px solid var(--linha); background: var(--grafite-2); color: var(--gelo); }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

/* depoimentos */
.depoimentos { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 820px) { .depoimentos { grid-template-columns: repeat(3, 1fr); } }
.depoimentos figure { margin: 0; padding: 18px; border-left: 3px solid var(--ambar); background: var(--grafite); border-radius: 0 12px 12px 0; }
.depoimentos blockquote { margin: 0 0 12px; font-size: 16px; }
.depoimentos figcaption { color: var(--nevoa); font-size: 14px; }
.depoimentos figcaption b { color: var(--gelo); margin-right: 6px; }

/* chamada final */
.chamada { position: relative; margin: 26px 18px; border-radius: 20px; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; border: 1px solid var(--linha); }
@media (min-width: 1216px) { .chamada { max-width: 1144px; margin: 26px auto; } }
.chamada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chamada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,22,28,.15) 0%, rgba(18,22,28,.94) 70%); }
.chamada > div { position: relative; z-index: 1; padding: 24px 20px; max-width: 520px; }
.chamada h2 { font-size: clamp(24px, 6vw, 34px); font-weight: 800; }
.chamada p { color: #C8D0DA; margin: 10px 0 18px; }

/* rodapé */
.rodape { padding: 26px 18px 30px; border-top: 1px solid var(--linha); color: var(--nevoa); font-size: 14px; max-width: 1180px; margin: 0 auto; }
.marca-rodape { font-size: 17px; color: var(--gelo); margin-bottom: 6px; }
.piloto { color: #B9C2CD; }
.creditos summary { cursor: pointer; color: var(--gelo); font-weight: 600; }
.creditos ul { padding-left: 18px; font-size: 12.5px; }
.creditos a { color: var(--nevoa); }
.direitos { font-size: 12px; }

/* navegação de baixo (app) */
.nav-baixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--nav-h); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(18, 22, 28, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--linha); }
.nav-baixo a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--nevoa); font-size: 12px; font-weight: 600; }
.nav-baixo svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.nav-baixo a.ativo { color: var(--ambar); }
.nav-baixo i { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ambar); color: #17120A; font: 800 11px/18px var(--largo); font-style: normal; text-align: center; }
@media (min-width: 1020px) { .nav-baixo { left: 50%; right: auto; width: 420px; bottom: 16px; transform: translateX(-50%); border: 1px solid var(--linha); border-radius: 18px; height: 64px; padding: 0; } body { padding-bottom: 96px; } }

/* ---------- ficha do carro ---------- */
.ficha { width: 100%; max-width: 760px; height: 100%; max-height: 100%; margin: 0 auto; padding: 0; border: 0; background: var(--asfalto); color: var(--gelo); }
.ficha::backdrop { background: rgba(5, 7, 10, .7); }
.ficha[open] { animation: sobe .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes sobe { from { transform: translateY(30px); opacity: 0; } }
@media (min-width: 800px) { .ficha { height: calc(100% - 40px); margin-top: 20px; border-radius: 20px; border: 1px solid var(--linha); } }
.ficha-conteudo { height: 100%; overflow-y: auto; padding-bottom: 100px; }
.ficha-foto { position: relative; aspect-ratio: 16 / 10; background: var(--grafite-2); }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-fechar { position: absolute; left: 12px; top: calc(12px + env(safe-area-inset-top)); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(18, 22, 28, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 2; }
.ficha-fechar svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.ficha .fav { top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 42px; height: 42px; }
.ficha-corpo { padding: 20px 18px; display: grid; gap: 22px; }
.ficha h2 { font-size: clamp(26px, 7vw, 36px); font-weight: 800; }
.ficha .carro-versao { font-size: 15px; }
.ficha .preco strong { font-size: 32px; }
.ficha h3 { font-size: 18px; font-weight: 750; margin-bottom: 12px; }
.tabela { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.tabela div { background: var(--grafite); padding: 10px 14px; }
.tabela dt { color: var(--nevoa); font-size: 12.5px; font-weight: 600; }
.tabela dd { margin: 2px 0 0; font-weight: 700; }
.opcionais { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.opcionais li { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--linha); font-size: 13.5px; }
.loja { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--grafite); border: 1px solid var(--linha); }
.loja-ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--grafite-2); color: var(--ambar); font-stretch: 125%; font-weight: 800; }
.loja small { display: block; color: var(--nevoa); }

/* simulador de parcela */
.sim { background: var(--grafite); border: 1px solid var(--linha); border-radius: 16px; padding: 18px; }
.sim-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; color: var(--nevoa); }
.sim-linha b { color: var(--gelo); font-size: 16px; }
.sim input[type=range] { width: 100%; margin: 12px 0 18px; accent-color: var(--ambar); height: 28px; }
.prazos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 18px; }
.prazos button { height: 42px; border-radius: 10px; border: 1px solid var(--linha); background: var(--asfalto); font-weight: 700; }
.prazos button.ativo { background: var(--ambar); border-color: var(--ambar); color: #17120A; }
.sim-resultado { border-top: 1px dashed var(--linha); padding-top: 14px; }
.sim-resultado strong { display: block; font-stretch: 125%; font-weight: 800; font-size: 30px; color: var(--ambar); }
.sim-resultado small { color: var(--nevoa); font-size: 12.5px; }
/* barra de ação sempre no pé da tela, por cima da ficha */
.ficha-acoes { position: fixed; z-index: 3; left: 50%; bottom: 0; transform: translateX(-50%); width: min(760px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: rgba(18, 22, 28, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--linha); }
@media (min-width: 800px) { .ficha-acoes { bottom: 20px; border-radius: 0 0 20px 20px; border: 1px solid var(--linha); } }
.ficha-acoes .btn { padding: 0 12px; font-size: 15px; }

/* vazio + aviso */
.vazio { grid-column: 1 / -1; padding: 30px 20px; text-align: center; border: 1px dashed var(--linha); border-radius: var(--raio); color: var(--nevoa); }
.vazio b { display: block; color: var(--gelo); font-size: 18px; margin-bottom: 6px; }
.vazio .btn { margin-top: 14px; }
.aviso { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 14px); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 60; padding: 12px 18px; border-radius: 12px; background: var(--gelo); color: var(--asfalto); font-weight: 700; font-size: 14px; transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); }
.aviso.mostrar { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
   Vidro embaçado: preto profundo, foto desfocada atrás de tudo, painéis
   translúcidos com borda clara fina, pílulas, âmbar com brilho.
   ===================================================================== */
:root {
  --asfalto: #0B0D10;
  --vidro: rgba(255, 255, 255, .055);
  --vidro-2: rgba(255, 255, 255, .085);
  --vidro-borda: rgba(255, 255, 255, .09);
  --vidro-luz: inset 0 1px 0 rgba(255, 255, 255, .07);
  --desfoque: blur(22px) saturate(150%);
  --linha: rgba(255, 255, 255, .09);
  --raio: 26px;
  --texto: "Urbanist", system-ui, sans-serif;
  --brilho-ambar: 0 8px 28px -6px rgba(242, 178, 58, .65), inset 0 1px 0 rgba(255, 255, 255, .45);
}
body { background: var(--asfalto); font-family: var(--texto); }
h1, h2, h3, .marca, .preco strong, .sim-resultado strong, .carro-nome { font-family: var(--texto); font-stretch: 100%; letter-spacing: -.02em; }
h1 { font-weight: 700; }
.hero h1 { font-weight: 700; }
.bloco > h2, .bloco-cabeca h2 { font-weight: 650; }

/* foto atrás de tudo, bem desfocada e escurecida */
.fundo { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--asfalto); }
.fundo img { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(60px) saturate(140%); opacity: .85; }
.fundo::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(60% 40% at 85% 8%, rgba(242, 178, 58, .14), transparent 70%),
  radial-gradient(70% 50% at 0% 100%, rgba(120, 140, 170, .12), transparent 70%),
  linear-gradient(180deg, rgba(11, 13, 16, .4), rgba(11, 13, 16, .8) 65%); }

/* painéis de vidro */
.topo, .carro, .faixas button, .tipos button, .topo-zap, .vender, .depoimentos figure, .sim, .loja, .tabela div, .nav-baixo, .ficha-acoes, .garantias div, .opcionais li, .prazos button, .campo input, .btn-linha {
  background: var(--vidro); border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-luz);
  -webkit-backdrop-filter: var(--desfoque); backdrop-filter: var(--desfoque);
}
.topo { background: rgba(11, 13, 16, .45); border-width: 0 0 1px; }
.marca { font-weight: 600; }
.topo-zap { height: 42px; }

/* chips */
.faixas button, .tipos button { height: 40px; padding: 0 16px; font-weight: 600; color: #DCE1E8; }
.faixas button.ativo, .tipos button.ativo, .prazos button.ativo { background: linear-gradient(180deg, #F7C75C, #E9A320); border-color: rgba(255, 220, 140, .6); color: #1A1306; box-shadow: var(--brilho-ambar); }

/* placa ganha moldura de vidro */
.placa { border-radius: 14px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 24px 50px -20px rgba(0, 0, 0, .9); }

/* garantias viram 4 blocos de vidro com ícone em círculo */
.garantias { background: none; border: 0; gap: 10px; padding: 0 18px; max-width: 1180px; margin: 14px auto; }
.garantias div { border-radius: 22px; padding: 16px; }
.garantias svg { box-sizing: content-box; width: 22px; height: 22px; padding: 10px; border-radius: 50%; background: var(--vidro-2); border: 1px solid var(--vidro-borda); }

/* card do carro: foto recortada dentro do vidro */
.carro { border-radius: var(--raio); padding: 8px; }
.carro-foto { border-radius: 20px; background: rgba(0, 0, 0, .3); }
.carro-foto::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(0, 0, 0, .35)); pointer-events: none; }
.carro-corpo { padding: 12px 8px 8px; }
.carro-nome { font-weight: 650; font-size: 20px; }
.carro-versao { font-weight: 500; }
.specs span { padding: 5px 10px; border-radius: 999px; background: var(--vidro-2); border: 1px solid var(--vidro-borda); color: #D5DBE3; font-weight: 600; }
.preco strong { font-weight: 700; }
.selo { border-radius: 999px; padding: 6px 12px; background: rgba(11, 13, 16, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--vidro-borda); }
.selo-oferta { background: linear-gradient(180deg, #F7C75C, #E9A320); color: #1A1306; border-color: transparent; }
.fav { width: 42px; height: 42px; background: rgba(11, 13, 16, .5); border: 1px solid var(--vidro-borda); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fav[aria-pressed="true"] { background: rgba(242, 178, 58, .18); border-color: rgba(242, 178, 58, .5); }
.carro-abrir { border-radius: var(--raio); }
.carro:has(.carro-abrir:hover) { border-color: rgba(255, 255, 255, .2); }

/* logo da marca: SVG usado como máscara, pinta com a cor do texto */
.logo { display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }

/* fileira de marcas em círculo (filtro) */
.marcas { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 18px -18px 0; padding: 4px 18px; }
.marcas::-webkit-scrollbar { display: none; }
.marcas button { flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #E9EDF2; background: var(--vidro); border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-luz); -webkit-backdrop-filter: var(--desfoque); backdrop-filter: var(--desfoque); transition: border-color .2s, color .2s, box-shadow .2s; }
.marcas .logo { width: 28px; height: 28px; }
.marcas button:hover { border-color: rgba(255, 255, 255, .22); }
.marcas button.ativo { color: var(--ambar); border-color: rgba(242, 178, 58, .75); box-shadow: 0 0 0 3px rgba(242, 178, 58, .15), 0 8px 24px -8px rgba(242, 178, 58, .5); }

/* cabeçalho do card: logo em círculo · nome · botão ↗ */
.carro-topo { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center; gap: 12px; padding: 6px 6px 12px; }
/* aqui o círculo é o próprio span; a máscara vai para o ::before, senão recortaria o círculo */
.carro-topo > .logo { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: #E9EDF2; -webkit-mask: none; mask: none; background: var(--vidro-2); border: 1px solid var(--vidro-borda); }
.carro-topo > .logo::before { content: ""; display: block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.carro-topo .carro-nome { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carro-topo .carro-versao { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.carro-seta { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(242, 178, 58, .75); color: var(--ambar); transition: background .2s, color .2s; }
.carro-seta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carro:has(.carro-abrir:hover) .carro-seta { background: var(--ambar); color: #1A1306; }
.trilho .carro-topo .carro-nome { font-size: 17px; }

/* passos: círculos de vidro */
.passos li { border-color: var(--vidro-borda); }
.passos li::before { background: var(--vidro); border-color: rgba(242, 178, 58, .7); font-family: var(--texto); font-weight: 700; }

/* vender + depoimentos + chamada */
.vender { border-radius: 30px; }
.campo input { border-radius: 16px; height: 52px; background: rgba(255, 255, 255, .04); }
.campo input:focus { border-color: rgba(242, 178, 58, .7); }
.depoimentos figure { border-radius: 22px; border-left: 1px solid var(--vidro-borda); }
.depoimentos blockquote::before { content: "“"; display: block; color: var(--ambar); font-size: 40px; line-height: .6; margin-bottom: 6px; }
.chamada { border-radius: 30px; border-color: var(--vidro-borda); }
.chamada::after { background: linear-gradient(180deg, rgba(11, 13, 16, .05) 0%, rgba(11, 13, 16, .92) 72%); }
.rodape { border-color: var(--vidro-borda); }

/* botões: âmbar com brilho, pílula */
.btn { border-radius: 999px; min-height: 52px; font-weight: 700; }
.btn-ambar { background: linear-gradient(180deg, #F7C75C, #E9A320); box-shadow: var(--brilho-ambar); color: #1A1306; }
.btn-ambar:hover { background: linear-gradient(180deg, #FAD27A, #F0AE30); }
.btn-zap { box-shadow: 0 8px 26px -8px rgba(37, 211, 102, .6), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* barra de baixo: cápsula flutuante, item ativo vira círculo âmbar */
.nav-baixo { left: 50%; right: auto; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: auto; height: auto; padding: 7px; gap: 6px; display: flex; border-radius: 999px; background: rgba(30, 33, 38, .55); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8), var(--vidro-luz); }
.nav-baixo a { width: 52px; height: 52px; border-radius: 50%; background: var(--vidro-2); border: 1px solid var(--vidro-borda); color: #E3E7ED; }
.nav-baixo a > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-baixo a.ativo { background: linear-gradient(180deg, #F7C75C, #E9A320); border-color: transparent; color: #1A1306; box-shadow: var(--brilho-ambar); }
.nav-baixo svg { width: 22px; height: 22px; }
.nav-baixo i { top: -2px; left: auto; right: -4px; box-shadow: 0 0 0 2px var(--asfalto); }
@media (min-width: 1020px) { .nav-baixo { width: auto; height: auto; padding: 7px; bottom: 18px; border-radius: 999px; border-color: rgba(255, 255, 255, .12); } }
body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.aviso { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ficha: tudo em vidro, specs em blocos com ícone */
/* sem backdrop-filter na própria ficha: ele viraria o bloco de contenção da barra fixa de ações */
.ficha { background: rgba(14, 16, 20, .88); }
.ficha::backdrop { background: rgba(5, 7, 10, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (min-width: 800px) { .ficha { border-radius: 30px; border-color: var(--vidro-borda); } }
.ficha-foto { margin: 8px; border-radius: 24px; overflow: hidden; }
.ficha-fechar { background: rgba(11, 13, 16, .5); border: 1px solid var(--vidro-borda); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ficha .preco strong { font-weight: 700; }
.tabela { background: none; border: 0; gap: 8px; grid-template-columns: repeat(2, 1fr); border-radius: 0; overflow: visible; }
@media (min-width: 560px) { .tabela { grid-template-columns: repeat(3, 1fr); } }
.tabela div { border-radius: 18px; padding: 12px 14px; }
.opcionais li { border-radius: 999px; }
.sim { border-radius: 26px; }
.prazos button { border-radius: 999px; }
.sim-resultado strong { font-weight: 700; }
.loja { border-radius: 22px; }
.loja-ico { border-radius: 50%; background: var(--vidro-2); border: 1px solid var(--vidro-borda); font-family: var(--texto); }
.ficha-acoes { background: rgba(11, 13, 16, .55); border-width: 1px 0 0; }
@media (min-width: 800px) { .ficha-acoes { border-radius: 0 0 30px 30px; border-width: 1px; } }

/* navegador sem backdrop-filter: vidro um pouco mais opaco para não perder leitura */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .carro, .vender, .sim, .loja, .tabela div, .depoimentos figure, .garantias div { background: rgba(28, 32, 38, .92); }
  .nav-baixo, .topo, .ficha-acoes { background: rgba(18, 21, 26, .96); }
}