/* =====================================================================
   ML MOTOS CAR — site (app)
   Tema escuro da marca: preto, vermelho da logo e branco. Plus Jakarta Sans nos títulos,
   Manrope no texto (as mesmas do site anterior). Mobile-first, contraste AA sobre o preto.
   O vermelho e o preto podem ser trocados em /sistema > Loja > Cores (variáveis no topo.asp).
   ===================================================================== */
:root {
  --marca: #e21f2b; --marca-esc: #a4141d; --marca-clara: #ff4d57; --marca-pale: rgba(226,31,43,.14);
  --destaque: #ffffff;
  --preto: #0b0b0d; --preto-2: #131316; --preto-3: #1b1b1f; --preto-4: #24242a;
  --bg: var(--preto); --surface: var(--preto-2); --surface-2: var(--preto-3);
  --ink: #f7f7f8; --muted: #a3a3ad; --line: #2a2a31; --mist: #1f1f24;
  --ok: #4ade80; --ok-bg: rgba(74,222,128,.12); --erro: #ff6b72; --erro-bg: rgba(226,31,43,.16);
  --info: #93c5fd; --info-bg: rgba(147,197,253,.12); --espera: #fbbf24; --espera-bg: rgba(251,191,36,.13);
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 22px 50px -28px rgba(0,0,0,.9);
  --shadow-sm: 0 12px 30px -22px rgba(0,0,0,.9);
  --raio: 18px; --raio-sm: 12px;
  --display: 'Plus Jakarta Sans', 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --text: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --abas-h: 62px;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; background: var(--bg) }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--text); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--abas-h) + env(safe-area-inset-bottom)); overflow-x: hidden }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 0; color: var(--ink) }
p { margin: 0 }
a { color: var(--marca-clara) }
img { max-width: 100%; display: block; height: auto }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; border-radius: 6px }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px }
@media (min-width: 700px) { .wrap { padding: 0 24px } }
.skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--marca); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 700 }
.skip:focus { top: 10px }
.ico { width: 20px; height: 20px; flex: none; vertical-align: middle }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.muted { color: var(--muted) }
[hidden] { display: none !important }
.so-largo { display: none }
@media (min-width: 900px) { .so-largo { display: inline } }

/* ---------- botões e formulários ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 22px; border-radius: 999px; border: 2px solid var(--marca); background: var(--marca); color: #fff; font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background .15s, transform .1s, box-shadow .15s; line-height: 1.2; box-shadow: 0 12px 26px -14px rgba(226,31,43,.7) }
.btn:hover { background: var(--marca-esc); border-color: var(--marca-esc) }
.btn:active { transform: scale(.98) }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none }
.btn.ghost:hover { border-color: var(--marca); color: #fff }
.btn.claro { background: #fff; border-color: #fff; color: var(--preto); box-shadow: none }
.btn.claro:hover { background: #e9e9ee; border-color: #e9e9ee }
.btn.whats { background: #1faf54; border-color: #1faf54; box-shadow: 0 12px 26px -14px rgba(31,175,84,.7) }
.btn.whats:hover { background: #178d43; border-color: #178d43 }
.btn.sm { min-height: 38px; padding: 7px 16px; font-size: .9rem }
.btn.lg { min-height: 54px; padding: 12px 30px; font-size: 1.08rem }
.btn.bloco { width: 100% }
.btn[disabled], .btn.carregando { opacity: .6; pointer-events: none }
.btn-ico { display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; justify-content: center; padding: 6px 10px; border-radius: 999px; background: transparent; border: 0; color: var(--ink); text-decoration: none; font-weight: 700; cursor: pointer; position: relative }
.btn-ico:hover { background: var(--mist) }
.btn-ico .ico { width: 24px; height: 24px }
.btn-ico .num { position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--marca); color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center }
.link-btn { background: none; border: 0; padding: 0; color: var(--marca-clara); font-weight: 700; cursor: pointer; text-decoration: underline }

.campo { display: grid; gap: 6px; margin-bottom: 14px }
.campo > span, .campo > label { font-weight: 700; font-size: .92rem }
.campo small { color: var(--muted); font-size: .82rem }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=number], input[type=date], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--preto-3); color: var(--ink); font-size: 1rem; transition: border-color .15s, box-shadow .15s }
input::placeholder, textarea::placeholder { color: #75757f }
select option { background: var(--preto-3); color: var(--ink) }
textarea { min-height: 110px; resize: vertical }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--marca); box-shadow: 0 0 0 4px rgba(226,31,43,.2) }
input[type=range] { width: 100%; accent-color: var(--marca) }
.campos-2, .campos-3 { display: grid; gap: 0 14px }
@media (min-width: 640px) { .campos-2 { grid-template-columns: 1fr 1fr } .campos-3 { grid-template-columns: repeat(3, 1fr) } }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; cursor: pointer }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--marca) }

/* avisos */
.aviso { padding: 12px 16px; border-radius: 12px; margin: 10px 0; font-weight: 600; background: var(--info-bg); color: var(--info) }
.aviso.erro { background: var(--erro-bg); color: var(--erro) }
.aviso.sucesso, .aviso.ok { background: var(--ok-bg); color: var(--ok) }
.aviso.info { background: var(--info-bg); color: var(--info) }
.flash { padding-top: 14px }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; background: var(--mist); color: var(--muted) }
.etiqueta.ok { background: var(--ok-bg); color: var(--ok) }
.etiqueta.erro { background: var(--erro-bg); color: var(--erro) }
.etiqueta.info { background: var(--info-bg); color: var(--info) }
.etiqueta.espera { background: var(--espera-bg); color: var(--espera) }

/* ---------- topo ---------- */
.faixa-topo { background: #000; color: #fff; font-size: .82rem; font-weight: 600; border-bottom: 1px solid var(--line) }
.faixa-topo .wrap { display: flex; gap: 22px; justify-content: center; align-items: center; min-height: 36px; flex-wrap: wrap }
.faixa-topo span, .faixa-topo a { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none }
.faixa-topo .ico { width: 16px; height: 16px; color: var(--marca) }
.faixa-topo a:hover { color: var(--marca-clara) }
.top { position: sticky; top: 0; z-index: 50; background: rgba(11,11,13,.92); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line) }
.top-linha { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "marca acoes"; gap: 8px 12px; align-items: center; padding-top: 8px; padding-bottom: 8px }
@media (min-width: 1000px) { .top-linha { grid-template-columns: auto 1fr auto; grid-template-areas: "marca menu acoes"; gap: 24px; padding-top: 10px; padding-bottom: 10px } }
.brand { grid-area: marca; display: flex; align-items: center; text-decoration: none }
.brand .logo-site { height: 46px; width: auto }
@media (min-width: 1000px) { .brand .logo-site { height: 58px } }
.menu-topo { grid-area: menu; display: none; gap: 2px; justify-content: center }
@media (min-width: 1000px) { .menu-topo { display: flex } }
.menu-topo a { padding: 10px 14px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: .95rem }
.menu-topo a:hover { background: var(--mist) }
.menu-topo a[aria-current] { color: #fff; background: var(--marca-pale); box-shadow: inset 0 -2px 0 var(--marca) }
.top-acoes { grid-area: acoes; display: flex; gap: 2px; justify-content: flex-end; align-items: center }
.menu-conta { position: relative }
.menu-conta summary { list-style: none }
.menu-conta summary::-webkit-details-marker { display: none }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); background: var(--preto-3); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); min-width: 220px; padding: 8px; display: grid; z-index: 60 }
.menu-pop a, .menu-pop button { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); background: none; border: 0; text-align: left; width: 100%; cursor: pointer; font-weight: 600 }
.menu-pop a:hover, .menu-pop button:hover { background: var(--mist) }

/* gaveta do menu (celular) */
.gaveta { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.6); display: flex; justify-content: flex-end }
.gaveta-corpo { width: min(86vw, 340px); height: 100%; background: var(--preto-2); border-left: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto }
.gaveta-corpo a { padding: 13px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 700; display: flex; gap: 12px; align-items: center }
.gaveta-corpo a:hover, .gaveta-corpo a[aria-current] { background: var(--mist) }
.gaveta-corpo .ico { color: var(--marca) }
.gaveta-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px }

/* abas (celular) */
.abas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(19,19,22,.97); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom) }
.abas a { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; min-height: var(--abas-h); color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 700 }
.abas a[aria-current] { color: #fff }
.abas a[aria-current] .ico { color: var(--marca) }
.abas .ico { width: 24px; height: 24px }
.aba-ico { position: relative; display: inline-flex }
.aba-ico b { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--marca); color: #fff; font-size: .68rem; display: grid; place-items: center }
@media (min-width: 1000px) { .abas { display: none } body { padding-bottom: 0 } }

/* ---------- títulos e seções ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--marca-clara) }
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 4px; background: var(--marca) }
.sec { padding: clamp(36px, 6vw, 72px) 0 }
.sec.alt { background: var(--preto-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.sec h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-top: 8px }
.sec-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 22px }
.lead { margin-top: 8px; color: var(--muted); font-size: 1.05rem; max-width: 46em }
.titulo-pag { padding: 24px 0 12px }
.titulo-pag h1 { font-size: clamp(1.8rem, 5vw, 2.7rem) }
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 8px; font-size: .86rem; color: var(--muted) }
.migalhas li + li::before { content: "›"; margin-right: 6px }
.migalhas a { color: var(--muted); text-decoration: none }
.migalhas a:hover { color: var(--ink) }

/* ---------- capa (home) ---------- */
.capa { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(1200px 500px at 85% -10%, rgba(226,31,43,.35), transparent 60%), radial-gradient(800px 400px at -10% 110%, rgba(226,31,43,.18), transparent 60%), var(--preto) }
.capa .wrap { display: grid; gap: 28px; padding-top: clamp(30px, 6vw, 70px); padding-bottom: clamp(30px, 6vw, 70px) }
@media (min-width: 1000px) { .capa .wrap { grid-template-columns: 1.05fr 1fr; align-items: center } }
.capa h1 { font-size: clamp(2.1rem, 6vw, 3.6rem) }
.capa h1 em { font-style: normal; color: var(--marca) }
.capa .lead { font-size: 1.12rem }
.capa-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px }
.capa-destaque { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--preto-3); text-decoration: none; color: #fff; display: block }
.capa-destaque img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover }
.capa-destaque-txt { position: absolute; inset: auto 0 0 0; padding: 18px; background: linear-gradient(transparent, rgba(0,0,0,.88)) }
.capa-destaque-txt b { display: block; font-family: var(--display); font-size: 1.3rem }
.capa-destaque-txt span { color: #ddd }
.capa-numeros { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px }
.capa-numeros div b { display: block; font-family: var(--display); font-size: 1.6rem }
.capa-numeros div span { color: var(--muted); font-size: .88rem }

/* busca rápida */
.busca-rapida { background: var(--preto-2); border: 1px solid var(--line); border-radius: var(--raio); padding: 16px; display: grid; gap: 10px; box-shadow: var(--shadow); margin-top: -36px; position: relative; z-index: 3 }
@media (min-width: 800px) { .busca-rapida { grid-template-columns: 1fr 1fr 1fr 1fr auto; align-items: end } }
.busca-rapida .campo { margin: 0 }
.tipo-alterna { display: inline-flex; background: var(--preto-3); border-radius: 999px; padding: 4px; border: 1px solid var(--line) }
.tipo-alterna a, .tipo-alterna label { padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 800; cursor: pointer; display: inline-flex; gap: 8px; align-items: center }
.tipo-alterna a[aria-current], .tipo-alterna label:has(input:checked) { background: var(--marca); color: #fff }
.tipo-alterna input { position: absolute; opacity: 0; pointer-events: none }

/* faixa de diferenciais */
.faixa-confianca { background: var(--preto-2); border-top: 1px solid var(--line) }
.faixa-confianca .wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding-top: 22px; padding-bottom: 22px }
@media (min-width: 900px) { .faixa-confianca .wrap { grid-template-columns: repeat(4, 1fr) } }
.faixa-confianca div { display: flex; gap: 10px; align-items: center; font-size: .92rem }
.faixa-confianca .ico { width: 36px; height: 36px; padding: 7px; border-radius: 10px; background: var(--marca-pale); color: var(--marca-clara) }

/* perfis (busca inteligente) */
.perfis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
@media (min-width: 700px) { .perfis { grid-template-columns: repeat(4, 1fr) } }
.perfil { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 16px; background: var(--preto-3); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 800; transition: border-color .15s, transform .15s }
.perfil:hover, .perfil[aria-current] { border-color: var(--marca); transform: translateY(-2px) }
.perfil span:first-child { font-size: 1.6rem; line-height: 1 }
.perfil small { display: block; font-weight: 600; color: var(--muted); font-size: .78rem }

/* marcas */
.marcas { display: flex; gap: 8px; flex-wrap: wrap }
.marcas a { padding: 10px 16px; border-radius: 12px; background: var(--preto-3); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 800 }
.marcas a:hover { border-color: var(--marca) }
.marcas small { color: var(--muted); font-weight: 700; margin-left: 4px }

/* ---------- vitrine de veículos ---------- */
.grade-veic { display: grid; grid-template-columns: 1fr; gap: 16px }
@media (min-width: 600px) { .grade-veic { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1000px) { .grade-veic { grid-template-columns: repeat(3, 1fr); gap: 20px } }
.catalogo .grade-veic { grid-template-columns: 1fr }
@media (min-width: 600px) { .catalogo .grade-veic { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1250px) { .catalogo .grade-veic { grid-template-columns: repeat(3, 1fr) } }
.card-veic { position: relative; display: flex; flex-direction: column; background: var(--preto-2); border: 1px solid var(--line); border-radius: var(--raio); overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s }
.card-veic:hover { transform: translateY(-4px); border-color: #3a3a42; box-shadow: var(--shadow) }
.card-veic-foto { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--preto-3) }
.card-veic-foto img { width: 100%; height: 100%; object-fit: cover }
.card-veic.vendido .card-veic-foto img { filter: grayscale(.8); opacity: .6 }
.card-veic-txt { padding: 14px 16px 6px; flex: 1 }
.card-veic h3 { font-size: 1.12rem; line-height: 1.25 }
.card-veic h3 a { color: var(--ink); text-decoration: none }
.card-veic h3 a::after { content: ""; position: absolute; inset: 0 }
.card-veic-versao { color: var(--muted); font-size: .88rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ficha-mini { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .84rem; color: var(--muted) }
.ficha-mini span { display: inline-flex; gap: 5px; align-items: center }
.ficha-mini .ico { width: 16px; height: 16px; color: var(--marca-clara) }
.card-veic-preco { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; padding: 12px 16px 16px; border-top: 1px solid var(--line); margin-top: 12px }
.preco { font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: #fff }
.preco-de { color: var(--muted); font-size: .85rem; text-decoration: line-through }
.parcela { font-size: .82rem; color: var(--muted) }
.parcela b { color: var(--ink) }
.selo { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 11px; border-radius: 999px; background: var(--marca); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .02em }
.selo.preto { background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.2) }
.selo.verde { background: #178d43 }
.fav-btn { position: absolute; top: 10px; right: 10px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px) }
.fav-btn .ico { width: 22px; height: 22px }
.fav-btn[aria-pressed=true] { color: var(--marca) }
.fav-btn[aria-pressed=true] .ico { fill: currentColor }
.cmp-btn { position: relative; z-index: 3; display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 700; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 4px 0 }
.cmp-btn[aria-pressed=true] { color: var(--marca-clara) }
.vazio { text-align: center; padding: 50px 16px; color: var(--muted) }
.vazio .ico { width: 54px; height: 54px; color: var(--marca); margin: 0 auto 10px }

/* estoque: filtros */
.catalogo { display: grid; gap: 22px; padding-bottom: 40px }
@media (min-width: 1000px) { .catalogo { grid-template-columns: 280px 1fr; align-items: start } }
.filtros { background: var(--preto-2); border: 1px solid var(--line); border-radius: var(--raio); padding: 18px }
@media (min-width: 1000px) { .filtros { position: sticky; top: 96px; max-height: calc(100vh - 110px); overflow-y: auto } }
.filtros h2 { font-size: 1.1rem; margin-bottom: 12px }
.filtros .campo { margin-bottom: 12px }
.filtros .campo > span { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.filtros .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.filtros-abrir { display: flex }
@media (min-width: 1000px) { .filtros-abrir { display: none } }
@media (max-width: 999px) { .filtros:not(.aberto) { display: none } }
.barra-cat { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 16px }
.barra-cat select { width: auto; min-height: 42px }
.chips { display: flex; gap: 8px; flex-wrap: wrap }
.chips a { flex: none; display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--preto-3); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 700; font-size: .84rem }
.chips a:hover { border-color: var(--marca) }
.chips .ico { width: 14px; height: 14px }

/* paginação */
.paginacao { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 30px 0 }
.pg { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--preto-3); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 800 }
.pg.atual { background: var(--marca); border-color: var(--marca); color: #fff }
.pg-res { align-self: center; color: var(--muted) }

/* ---------- página do veículo ---------- */
.veic { display: grid; gap: 26px; padding: 6px 0 40px }
@media (min-width: 1000px) { .veic { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 34px; align-items: start } }
.galeria { display: grid; gap: 10px; min-width: 0 }
.galeria-principal { position: relative; background: var(--preto-3); border-radius: var(--raio); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line) }
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in }
.galeria-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 1.5rem; line-height: 1 }
.galeria-seta.ant { left: 10px } .galeria-seta.prox { right: 10px }
.galeria-cont { position: absolute; right: 12px; bottom: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.65); font-size: .8rem; font-weight: 700 }
.galeria-abas { display: flex; gap: 6px; flex-wrap: wrap }
.galeria-abas button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--preto-3); color: var(--muted); font-weight: 700; font-size: .84rem; cursor: pointer }
.galeria-abas button[aria-pressed=true] { background: var(--marca); border-color: var(--marca); color: #fff }
.galeria-miniaturas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px }
.galeria-miniaturas button { flex: none; width: 88px; height: 66px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--preto-3); cursor: pointer; opacity: .7 }
.galeria-miniaturas button[aria-current] { border-color: var(--marca); opacity: 1 }
.galeria-miniaturas img { width: 100%; height: 100%; object-fit: cover }
.veic-info { min-width: 0 }
@media (min-width: 1000px) { .veic-lado { position: sticky; top: 96px } }
.veic-info h1 { font-size: clamp(1.7rem, 4vw, 2.4rem) }
.veic-versao { color: var(--muted); font-size: 1.05rem; margin-top: 4px }
.veic-preco { margin: 16px 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px }
.veic-preco .preco { font-size: 2.3rem }
.caixa { background: var(--preto-2); border: 1px solid var(--line); border-radius: var(--raio); padding: 18px; margin-top: 16px }
.caixa h2, .caixa h3 { font-size: 1.15rem; margin-bottom: 12px }
.acoes-veic { display: grid; gap: 10px; margin-top: 16px }
.acoes-veic .linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.ficha { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
@media (min-width: 600px) { .ficha { grid-template-columns: repeat(3, 1fr) } }
.ficha div { padding: 12px; border-radius: 12px; background: var(--preto-3); border: 1px solid var(--line) }
.ficha span { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700 }
.ficha span .ico { width: 15px; height: 15px; color: var(--marca-clara) }
.ficha b { display: block; margin-top: 2px; font-size: 1rem }
.opcionais { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px }
.opcionais li { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--preto-3); font-weight: 600; font-size: .92rem }
.procedencia { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px }
.procedencia li { display: flex; gap: 10px; align-items: center; font-weight: 600 }
.procedencia li .ico { width: 22px; height: 22px; color: var(--ok) }
.procedencia li.nao { color: var(--muted); font-weight: 500 }
.procedencia li.nao .ico { color: var(--muted) }
.destaque-box { border-left: 4px solid var(--marca); background: linear-gradient(90deg, var(--marca-pale), transparent) }
.veic-desc { line-height: 1.75; color: #dcdce2 }
.veic-desc p + p { margin-top: 10px }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.zoom { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.94); display: grid; place-items: center; padding: 20px; cursor: zoom-out }
.zoom img { max-height: 92vh; object-fit: contain; border-radius: 12px }
.atendentes { display: grid; gap: 8px }
.atendentes a { justify-content: flex-start }

/* abas de formulário (proposta / financiamento / test drive / troca) */
.form-abas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: 14px }
.form-abas button { flex: none; padding: 10px 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font-weight: 800; cursor: pointer }
.form-abas button[aria-selected=true] { color: #fff; border-bottom-color: var(--marca) }

/* simulador */
.simulador { display: grid; gap: 16px }
@media (min-width: 900px) { .simulador.largo { grid-template-columns: 1.2fr 1fr; align-items: start } }
.sim-valor { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700 }
.sim-valor output { font-family: var(--display); font-size: 1.15rem; color: #fff }
.prazos { display: flex; flex-wrap: wrap; gap: 8px }
.prazos label { position: relative }
.prazos input { position: absolute; opacity: 0; pointer-events: none }
.prazos span { display: inline-block; padding: 9px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--preto-3); font-weight: 800; cursor: pointer }
.prazos input:checked + span { border-color: var(--marca); background: var(--marca-pale); color: #fff }
.prazos input:focus-visible + span { outline: 3px solid var(--marca-clara); outline-offset: 2px }
.sim-resultado { text-align: center; padding: 22px; border-radius: var(--raio); background: radial-gradient(400px 200px at 50% 0, rgba(226,31,43,.35), transparent), var(--preto-3); border: 1px solid var(--line) }
.sim-resultado small { color: var(--muted); display: block }
.sim-resultado .parcela-grande { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 6vw, 2.8rem); color: #fff; margin: 4px 0 }
.letra-miuda { color: var(--muted); font-size: .8rem; margin-top: 10px }

/* comparar */
.barra-cmp { position: fixed; left: 12px; right: 12px; bottom: calc(var(--abas-h) + 12px + env(safe-area-inset-bottom)); z-index: 58; background: var(--preto-3); border: 1px solid var(--marca); border-radius: 16px; padding: 10px 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; box-shadow: var(--shadow) }
@media (min-width: 1000px) { .barra-cmp { left: auto; right: 24px; bottom: 24px; min-width: 360px } }
.cmp-tabela-rolagem { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--raio) }
.cmp-tabela { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--preto-2) }
.cmp-tabela th, .cmp-tabela td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: .93rem }
.cmp-tabela thead td { vertical-align: bottom }
.cmp-tabela th { color: var(--muted); font-weight: 700; width: 170px; background: var(--preto-3) }
.cmp-tabela img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; margin-bottom: 8px }
.cmp-tabela .melhor { color: var(--ok); font-weight: 800 }

/* conta e formulários centrais */
.conta { display: grid; gap: 20px; padding-bottom: 40px }
@media (min-width: 900px) { .conta { grid-template-columns: 240px 1fr } }
.conta-menu { background: var(--preto-2); border: 1px solid var(--line); border-radius: var(--raio); padding: 10px; align-self: start; display: grid }
.conta-menu a { padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 700; display: flex; gap: 10px; align-items: center }
.conta-menu a:hover, .conta-menu a[aria-current] { background: var(--marca-pale) }
.lista-cartoes { display: grid; gap: 10px }
.linha-card { display: grid; gap: 4px; background: var(--preto-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; color: var(--ink); text-decoration: none }
.linha-card-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap }
.tabela { width: 100%; border-collapse: collapse; background: var(--preto-2); border-radius: var(--raio); overflow: hidden }
.tabela th, .tabela td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: .93rem }
.tabela th { background: var(--preto-3); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted) }
.form-central { max-width: 480px; margin: 24px auto 50px; background: var(--preto-2); border: 1px solid var(--line); border-radius: var(--raio); padding: clamp(20px, 5vw, 34px); box-shadow: var(--shadow) }
.form-central h1 { font-size: 1.8rem; margin-bottom: 6px }
.form-central .lead { margin-bottom: 18px }
.ou { text-align: center; color: var(--muted); margin: 14px 0 }
.painel-form { background: var(--preto-2); border: 1px solid var(--line); border-radius: var(--raio); padding: clamp(18px, 4vw, 30px) }
.duas-col { display: grid; gap: 22px; padding-bottom: 40px }
@media (min-width: 900px) { .duas-col { grid-template-columns: 1.3fr 1fr; align-items: start } }
.passos-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: p }
.passos-lista li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start }
.passos-lista li::before { counter-increment: p; content: counter(p); width: 40px; height: 40px; border-radius: 50%; background: var(--marca); color: #fff; display: grid; place-items: center; font-weight: 800; font-family: var(--display) }
.passos-lista b { display: block }

/* páginas de texto */
.texto { background: var(--preto-2); border: 1px solid var(--line); border-radius: var(--raio); padding: clamp(20px, 5vw, 40px); line-height: 1.8; max-width: 860px; color: #dcdce2 }
.texto h2 { font-size: 1.4rem; margin: 22px 0 8px }
.texto p + p { margin-top: 12px }
.texto img { border-radius: 14px; margin: 14px 0 }
.mapa-loja { border: 0; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--raio); filter: grayscale(.3) contrast(1.05) }

/* ---------- rodapé ---------- */
.rodape { background: #000; color: rgba(255,255,255,.72); padding-top: 44px; border-top: 1px solid var(--line) }
.rodape-grade { display: grid; gap: 28px }
@media (min-width: 700px) { .rodape-grade { grid-template-columns: 1.3fr 1fr 1fr 1.3fr } }
.rodape .brand .logo-site { height: 66px }
.rodape-txt { margin-top: 12px; font-size: .92rem; max-width: 30em }
.rodape nav { display: grid; gap: 8px; align-content: start }
.rodape nav b { color: #fff; font-family: var(--display); font-size: 1.05rem; margin-bottom: 4px }
.rodape a { color: rgba(255,255,255,.72); text-decoration: none; display: inline-flex; gap: 8px; align-items: center }
.rodape a:hover { color: #fff }
.rodape .ico { color: var(--marca) }
.rodape-end { display: inline-flex; gap: 8px; align-items: flex-start; font-size: .9rem }
.rodape-horario { font-size: .88rem; display: grid; gap: 2px }
.rodape-base { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 18px 16px 26px; margin-top: 30px; border-top: 1px solid rgba(255,255,255,.1); font-size: .84rem }
.credito img { display: inline-block; vertical-align: middle; background: #fff; border-radius: 6px; padding: 2px 6px; margin-left: 6px }
.whats-flutuante { position: fixed; right: 16px; bottom: calc(var(--abas-h) + 16px + env(safe-area-inset-bottom)); z-index: 55; width: 56px; height: 56px; border-radius: 50%; background: #1faf54; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6) }
.whats-flutuante .ico { width: 30px; height: 30px }
@media (min-width: 1000px) { .whats-flutuante { bottom: 24px } }
body:has(.barra-cmp:not([hidden])) .whats-flutuante { bottom: calc(var(--abas-h) + 90px + env(safe-area-inset-bottom)) }
@media (min-width: 1000px) { body:has(.barra-cmp:not([hidden])) .whats-flutuante { bottom: 100px } }
.cookies { position: fixed; left: 12px; right: 12px; bottom: calc(var(--abas-h) + 12px); z-index: 70; background: var(--preto-3); border: 1px solid var(--line); color: #fff; border-radius: 16px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: .88rem }
@media (min-width: 1000px) { .cookies { left: auto; max-width: 440px; bottom: 20px; right: 90px } }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--abas-h) + 20px); z-index: 300; background: #fff; color: var(--preto); padding: 12px 20px; border-radius: 999px; font-weight: 800; box-shadow: var(--shadow); max-width: calc(100% - 32px) }
.toast.erro { background: var(--marca); color: #fff }
.toast a { color: var(--marca); margin-left: 8px }
@media (min-width: 1000px) { .toast { bottom: 30px } }

/* sugestões da busca do estoque */
.busca-sugestoes { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--preto-3); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; z-index: 60 }
.busca-sugestoes a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; text-decoration: none; color: var(--ink) }
.busca-sugestoes a:hover, .busca-sugestoes a:focus { background: var(--mist) }
.busca-sugestoes img { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; background: var(--mist); flex: none }
.busca-sugestoes b { display: block; font-size: .9rem; line-height: 1.3 }
.busca-sugestoes small { color: var(--marca-clara); font-weight: 800 }

/* celular: a busca rápida e o seletor de tipo não podem esticar a página; endereço da faixa só no largo */
.busca-rapida > * { min-width: 0 }
.tipo-alterna { max-width: 100%; flex-wrap: wrap }
@media (max-width: 420px) { .tipo-alterna a, .tipo-alterna label { padding: 7px 11px } .tipo-alterna .ico { display: none } }
@media (max-width: 899px) { .faixa-topo .so-largo { display: none } }
.perfil { min-width: 0; padding: 14px 12px }
.perfil > span:last-child { min-width: 0; overflow-wrap: anywhere }