/* Chrome compartilhado do site — header, footer, card de veículo + primitivas
   editoriais. Consome os tokens de tokens/system.css: nenhum valor de cor,
   sombra, raio ou duração é escrito solto aqui.

   REGRA DE CO-BRANDING: o lockup Europamotors × Collet aparece SOMENTE dentro
   do estoque (listagem + fichas). Todo o resto do site assina Collet puro. */

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-body-sm);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0}
img{max-width:100%}
a{color:var(--link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--link-hover)}
::selection{background:var(--accent);color:var(--text-on-accent)}

/* algarismos tabulares SÓ onde há números a comparar — em prosa corrida
   as figuras tabulares abrem buracos ("1996", "25 anos"). */
.price,.mtr,.specs,.marcos dt,.pn,.trust,.gal-thumbs,.ck-n,.count{font-variant-numeric:tabular-nums}

/* foco — o sistema define --focus-ring e nunca o usava. */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:var(--radius-xs)}
.sec.ink :focus-visible,.ft :focus-visible,.hero :focus-visible,.shero :focus-visible{outline-color:var(--cream-100)}
.skip{position:absolute;left:var(--space-4);top:calc(var(--space-4) * -6);z-index:80;background:var(--text);color:var(--cream-100);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-size:var(--fs-ui);font-weight:var(--fw-semibold);transition:top var(--dur-base) var(--ease-out)}
.skip:focus{top:var(--space-4);color:var(--cream-100)}

.wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter)}

/* ---------------- header ---------------- */
.hd{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid var(--border-soft)}
.hd-in{display:flex;align-items:center;gap:var(--space-10);height:72px}
.nav{display:flex;gap:var(--space-2);margin-left:auto;font-size:var(--fs-ui);font-weight:var(--fw-medium)}
/* alvo de toque de 44px: o padding é o alvo, não o texto */
.nav a{display:flex;align-items:center;height:44px;padding:0 var(--space-3);color:var(--text-muted)}
.nav a:hover,.nav a.on{color:var(--text)}
.nav a.on{font-weight:var(--fw-semibold)}
.hd .cds-btn--primary{background-color:var(--partner-europa)}
.hd .cds-btn--primary:hover{background-color:#D24C14}
.hd.collet .cds-btn--primary{background-color:var(--accent)}
.hd.collet .cds-btn--primary:hover{background-color:var(--accent-deep)}
.mark{height:var(--lockup-collet-h);width:auto;display:block;flex:0 0 auto}
/* lockup co-branded — as duas marcas têm razões de aspecto muito diferentes
   (Europa 15.25:1, Collet 4.48:1); o equilíbrio é por massa óptica, não por altura igual */
.lockup{display:flex;align-items:center;flex:0 0 auto;gap:var(--lockup-gap)}
.lk-eu{height:var(--lockup-europa-h);width:auto;display:block}
.lk-co{height:var(--lockup-collet-h);width:auto;display:block}
.lk-bar{width:1px;height:27px;background:var(--hairline-strong);flex:0 0 auto}
.lockup.on-dark .lk-bar{background:var(--hairline-on-dark)}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;padding:0 11px;background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard)}
.burger:hover{background:var(--surface-inset)}
.burger span{display:block;height:1.5px;background:var(--text);border-radius:var(--radius-xs)}
.drawer-ovl{position:fixed;inset:0;z-index:60;background:var(--ink-veil);backdrop-filter:blur(4px);animation:fade var(--dur-base) var(--ease-out)}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--bg);display:flex;flex-direction:column;box-shadow:var(--shadow-light-lg);animation:slide var(--dur-slow) var(--ease-out)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slide{from{transform:translateX(100%)}to{transform:none}}
.drawer-hd{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-soft)}
.drawer-x{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:calc(var(--space-3) * -1);background:none;border:none;border-radius:var(--radius-sm);font-size:15px;color:var(--text-muted);cursor:pointer}
.drawer-x:hover{background:var(--surface-inset);color:var(--text)}
.drawer-nav{display:flex;flex-direction:column;padding:var(--space-2) var(--space-5)}
.drawer-nav a{padding:var(--space-4) 0;font-size:17px;font-weight:var(--fw-medium);color:var(--text-muted);border-bottom:1px solid var(--border-soft)}
.drawer-nav a.on,.drawer-nav a:hover{color:var(--text)}
.drawer-ft{margin-top:auto;padding:var(--space-5);border-top:1px solid var(--border-soft)}
.drawer-ft .cds-btn{width:100%}

/* ---------------- card de veículo ---------------- */
.vc{display:block;color:inherit;cursor:pointer;border-radius:var(--radius-md)}
.vc:focus-visible{outline-offset:6px}
.vc-ph{position:relative;aspect-ratio:3/2;background:var(--surface-inset);border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--space-4);transition:box-shadow var(--dur-slow) var(--ease-out)}
.vc:hover .vc-ph{box-shadow:var(--shadow-light-md)}
.ph{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slower) var(--ease-out)}
.vc:hover .ph{transform:scale(1.035)}
.ghost{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);background:var(--backdrop-soft);text-align:center;padding:0 var(--space-5)}
.ghost img{width:30%;opacity:.1}
.ghost span{font-size:10.5px;letter-spacing:var(--ls-wide);color:var(--text-subtle);text-transform:uppercase}
.vc-tags{position:absolute;bottom:11px;left:11px;display:flex;gap:var(--space-2)}
.vt{background:var(--ink-veil);color:var(--cream-100);font-size:10.5px;font-weight:var(--fw-medium);letter-spacing:.03em;padding:5px 9px;border-radius:var(--radius-sm);backdrop-filter:blur(6px)}
/* Certified é selo claro — inverso das tags escuras, como no site original */
.vt-cert{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--cream-100) 92%,transparent);color:var(--ink-900)}
.house{display:flex;align-items:center;gap:7px;margin:0 0 7px;font-size:11.5px;font-weight:var(--fw-medium);color:var(--text-subtle)}
.house i{width:6px;height:6px;border-radius:var(--radius-pill);flex:0 0 auto}
.vc h3{font-family:var(--font-sans);font-size:17px;font-weight:var(--fw-semibold);letter-spacing:var(--ls-heading);line-height:var(--lh-snug);transition:color var(--dur-fast) var(--ease-standard)}
.mk{font-weight:var(--fw-regular);color:var(--text-muted)}
.vc:hover h3{color:var(--accent)}
.ver{margin:6px 0 0;font-size:var(--fs-caption);line-height:1.45;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.mtr{margin:var(--space-2) 0 0;font-size:12.5px;color:var(--text-subtle)}
/* preço e "Sob consulta" ocupam o MESMO peso óptico — trocar família e corpo
   fazia as linhas de base dançarem entre cards da mesma grade. */
.price{margin:var(--space-3) 0 0;font-family:var(--font-numeric);font-size:18px;font-weight:var(--fw-semibold);letter-spacing:var(--ls-display);line-height:1.2}
.price.consult{font-size:18px;font-weight:var(--fw-medium);color:var(--text-muted);letter-spacing:var(--ls-heading)}

/* ---------------- footer ---------------- */
.ft{background:var(--ink-950);color:var(--cream-100);padding:var(--space-16) 0 var(--space-10)}
/* o rodapé tem 3 colunas assinando Collet e 4 no estoque co-branded — as
   trilhas vêm do conteúdo, senão sobra trilha vazia nas rotas de 3 */
.ft-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-6);margin-top:var(--space-10);padding-top:var(--space-8);border-top:1px solid color-mix(in srgb,var(--cream-100) 14%,transparent)}
.fk{font-size:var(--fs-micro);font-weight:var(--fw-regular);letter-spacing:var(--ls-label);text-transform:uppercase;color:color-mix(in srgb,var(--cream-100) 45%,transparent)}
.ft-cols p{margin:9px 0 0;font-size:var(--fs-caption);line-height:1.55;color:color-mix(in srgb,var(--cream-100) 78%,transparent);overflow-wrap:anywhere}
.ft-nav{display:flex;flex-direction:column;gap:2px;margin-top:7px}
.ft-nav a{font-size:var(--fs-caption);line-height:1.9;color:color-mix(in srgb,var(--cream-100) 78%,transparent)}
.ft-nav a:hover{color:var(--cream-100)}
.ft a{color:color-mix(in srgb,var(--cream-100) 78%,transparent)}
.ft a:hover{color:var(--cream-100)}
.fine{margin:var(--space-8) 0 0;font-size:11.5px;line-height:1.6;color:color-mix(in srgb,var(--cream-100) 36%,transparent)}

/* ---------------- primitivas editoriais (home · blindagem · sobre) ---------------- */
.sec{padding:var(--section-y) 0}
.sec.tight{padding:calc(var(--section-y) * .7) 0}
.sec.sand{background:var(--sand-soft)}
.sec.ink{background:var(--ink-950);color:var(--cream-100)}
/* .eyebrow é do design system (mono + filete vermelho). O kit NÃO redefine —
   só ajusta a cor e o filete quando a superfície é escura. */
.sec.ink,.hero,.shero{--rule-accent:var(--accent-on-dark)}
.sec.ink .eyebrow{color:color-mix(in srgb,var(--cream-100) 60%,transparent)}
/* uma só voz para TODO micro-label maiúsculo: mono. O filete vermelho fica
   reservado à .eyebrow que abre seção. */
.fk,.cap,.pcat,.fcat,.fg h4,.curator h2,.also h2,.marcos dd,.ghost span,.dk,.stamp,.btn-line,.btn-solid,.btn-ghost{font-family:var(--font-mono)}
.dh{font-family:var(--font-display);font-weight:var(--fw-semibold);letter-spacing:var(--ls-display);line-height:var(--lh-tight);margin-top:var(--space-4);text-wrap:balance}
.dh.xl{font-size:clamp(40px,5.4vw,68px)}
.dh.lg{font-size:clamp(30px,3.4vw,42px)}
.dh em{font-style:normal;color:var(--text-muted)}
/* red-500 sobre ink reprova em contraste — no escuro o vermelho é o red-300. */
.sec.ink .dh em{color:var(--accent-on-dark)}
.body{max-width:62ch;margin:var(--space-5) 0 0;font-size:var(--fs-body-sm);line-height:var(--lh-relaxed);color:var(--text-muted);text-wrap:pretty}
.body strong{color:var(--text);font-weight:var(--fw-semibold)}
.sec.ink .body{color:color-mix(in srgb,var(--cream-100) 74%,transparent)}
.sec.ink .body strong{color:var(--cream-100)}
.rule{height:1px;background:var(--border-soft);border:none;margin:0}
.bleed{width:100%;height:clamp(280px,44vw,540px);overflow:hidden;background:var(--surface-inset)}
.bleed img{width:100%;height:100%;object-fit:cover;display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.figure{overflow:hidden;border-radius:var(--radius-md);background:var(--surface-inset)}
.figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slower) var(--ease-out)}
.figure:hover img{transform:scale(1.02)}
.cap{display:flex;align-items:baseline;gap:var(--space-3);margin:var(--space-3) 0 0;font-size:10.5px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-subtle)}
.cap::before{content:"";width:18px;height:2px;background:var(--sand);flex:0 0 auto;transform:translateY(-3px)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}

/* botões editoriais — três pesos, uma métrica */
.btn-line{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:var(--fs-micro);font-weight:var(--fw-regular);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text);box-shadow:inset 0 -1px 0 var(--text);white-space:nowrap;transition:color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.btn-line:hover{color:var(--accent);box-shadow:inset 0 -1px 0 var(--accent)}
.sec.ink .btn-line{color:var(--cream-100);box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--cream-100) 50%,transparent)}
.sec.ink .btn-line:hover{color:var(--accent-on-dark);box-shadow:inset 0 -1px 0 var(--accent-on-dark)}
.btn-solid,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 26px;border-radius:var(--radius-md);font-size:var(--fs-micro);font-weight:var(--fw-regular);letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard)}
.btn-solid{background:var(--accent);color:var(--text-on-accent);border:none}
.btn-solid:hover{background:var(--accent-hover);color:var(--text-on-accent)}
.btn-solid:active,.btn-ghost:active{transform:scale(var(--press-scale))}
.btn-ghost{border:1px solid var(--border-strong);color:var(--text);background:none}
.btn-ghost:hover{border-color:var(--text);color:var(--text)}
.sec.ink .btn-ghost{border-color:color-mix(in srgb,var(--cream-100) 34%,transparent);color:var(--cream-100)}
.sec.ink .btn-ghost:hover{border-color:var(--cream-100)}

/* o lockup duplo ocupa quase o dobro da assinatura simples — nas rotas
   co-branded o menu recolhe antes, senão as marcas colidem com a navegação */
@media(max-width:1180px){.hd:not(.collet) .nav,.hd:not(.collet) .hd-cta{display:none}.hd:not(.collet) .burger{display:flex}}
@media(max-width:900px){.nav,.hd-cta{display:none}.burger{display:flex}.two,.cols3{grid-template-columns:1fr}}

/* ---------------- configurador de blindagem (3 passos) ---------------- */
.aq{display:grid;gap:var(--space-6);max-width:760px}
.aq-compact{gap:var(--space-5)}
.aq-step{border-top:1px solid var(--border-strong);padding-top:var(--space-4)}
.aq-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:var(--space-3);flex-wrap:wrap}
.aq-hd h3{font-size:var(--fs-ui);font-weight:var(--fw-semibold);letter-spacing:var(--ls-heading)}
.aq-g{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-subtle)}
.aq-inp{width:100%;max-width:420px;font:500 14px var(--font-sans);color:var(--text);background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px;transition:border-color var(--dur-fast) var(--ease-standard)}
.aq-inp:focus{border-color:var(--text);outline:none}
.aq-inp::placeholder{color:var(--text-subtle)}
.aq-note{margin:9px 0 0;font-size:11.5px;color:var(--text-subtle)}
.aq-note b{color:var(--text-muted)}
.aq-opts{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.aq-opt{text-align:left;background:var(--surface-raised);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:15px 16px;cursor:pointer;font:inherit;display:grid;gap:6px;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.aq-opt:hover{border-color:var(--border-strong)}
.aq-opt.on{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.aq-opt b{display:flex;align-items:center;gap:8px;font-size:var(--fs-ui);font-weight:var(--fw-semibold);letter-spacing:var(--ls-heading);color:var(--text)}
.aq-opt.on b::after{content:"✓";margin-left:auto;font-size:12px}
.aq-opt span{font-size:12px;line-height:1.55;color:var(--text-muted)}
.aq-tag{font-style:normal;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:var(--radius-pill);padding:2px 8px}
.aq-sum{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;border-top:1px solid var(--border-strong);padding-top:var(--space-4)}
.aq-res{margin:0;font-size:var(--fs-caption);line-height:1.6;color:var(--text-muted);max-width:46ch}
.aq-res b{color:var(--text)}
.aq-off{opacity:.4;pointer-events:none}
@media(max-width:700px){.aq-opts{grid-template-columns:1fr}.aq-sum{align-items:stretch;flex-direction:column}}

/* parcela-teaser no card de veículo */
.vc-fin{margin:4px 0 0;font-size:11.5px;color:var(--text-subtle);font-variant-numeric:tabular-nums}
@media(max-width:760px){.ft-cols{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .hero-bg{animation:none !important}
}

/* ============================================================
   .cds-btn — classe base que faltava
   O código usa `cds-btn cds-btn--primary` em 10+ lugares (CTA do
   cabeçalho, comparador, alerta de estoque, botões de WhatsApp da
   ficha), mas a base nunca foi entregue: o _ds_bundle.js do kit é um
   stub de 75 bytes e este arquivo só trocava o background-color.
   Sem isto, todo botão primário do site fica sem caixa, altura nem
   tipografia. A métrica abaixo é a MESMA do .btn-solid (linha 142),
   para os dois pesos conviverem sem desalinhar.
   ============================================================ */
.cds-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 26px;border:none;border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:var(--fw-regular);letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard)}
.cds-btn--primary{background:var(--accent);color:var(--text-on-accent)}
.cds-btn--primary:hover{background:var(--accent-hover);color:var(--text-on-accent)}
.cds-btn:active{transform:scale(var(--press-scale))}
.cds-btn--sm{height:40px;padding:0 18px}
.cds-btn:disabled,.cds-btn[disabled]{opacity:.4;pointer-events:none}

/* ============================================================
   Lockup co-branded no celular
   O wordmark da Europamotors e 15,25:1 — a 22px de altura ele ocupa
   335px sozinho. Com o Collet e os vaos, o lockup pedia ~491px e nao
   encolhia: empurrava o botao de menu para fora da tela e provocava
   rolagem horizontal na pagina inteira.
   As alturas caem em PROPORCAO: a razao 22:29 entre as duas marcas e
   deliberada (equilibrio por massa optica, nao por altura igual).
   Escopo em .lockup para valer no cabecalho E no rodape.
   ============================================================ */
.hd{overflow:hidden}
.hd-in,.lockup{min-width:0}
.lockup--sm{--lockup-europa-h:20px;--lockup-collet-h:26px;--lockup-gap:23px}
.lockup--sm .lk-bar{height:24px}
@media(max-width:900px){
  .lockup{--lockup-europa-h:16px;--lockup-collet-h:21px;--lockup-gap:14px}
  .lockup .lk-bar{height:20px}
}
@media(max-width:460px){
  .lockup{--lockup-europa-h:11px;--lockup-collet-h:15px;--lockup-gap:10px}
  .lockup .lk-bar{height:14px}
}