*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  img,svg,video{display:block;max-width:100%}
  button,input{font:inherit;color:inherit}
  a.cta{display:inline-block;text-decoration:none;text-align:center}

  :root{
    /* ─── paleta (fechada) ─── */
    --charcoal:    #454548;   /* palco hero — cinza-carvão quente */
    --near-black:  #131313;   /* seções técnicas */
    --white:       #ffffff;   /* cards e superfícies de UI */
    --off-white:   #f5f6f3;   /* texto sobre escuro */
    --warm-light:  #eceae5;   /* seção produto, variante clara */
    --ink:         #131313;   /* texto sobre branco */

    /* ─── alphas primitivos (muted sempre por alpha, nunca cor nova) ─── */
    --ink-a00: rgba(19,19,19,0);
    --ink-a08: rgba(19,19,19,.08);
    --ink-a10: rgba(19,19,19,.10);
    --ink-a12: rgba(19,19,19,.12);
    --ink-a14: rgba(19,19,19,.14);
    --ink-a15: rgba(19,19,19,.15);
    --ink-a18: rgba(19,19,19,.18);
    --ink-a20: rgba(19,19,19,.2);
    --ink-a25: rgba(19,19,19,.25);
    --ink-a30: rgba(19,19,19,.3);
    --ink-a40: rgba(19,19,19,.4);
    --ink-a42: rgba(19,19,19,.42);
    --ink-a45: rgba(19,19,19,.45);
    --ink-a55: rgba(19,19,19,.55);
    --ink-a60: rgba(19,19,19,.6);
    --ink-a66: rgba(19,19,19,.66);
    --ink-a68: rgba(19,19,19,.68);
    --ink-a70: rgba(19,19,19,.7);
    --ink-a78: rgba(19,19,19,.78);
    --ink-a82: rgba(19,19,19,.82);
    --ink-a88: rgba(19,19,19,.88);

    --white-a06: rgba(255,255,255,.06);
    --white-a08: rgba(255,255,255,.08);
    --white-a12: rgba(255,255,255,.12);
    --white-a15: rgba(255,255,255,.15);
    --white-a18: rgba(255,255,255,.18);
    --white-a35: rgba(255,255,255,.35);
    --white-a45: rgba(255,255,255,.45);
    --white-a55: rgba(255,255,255,.55);
    --white-a60: rgba(255,255,255,.6);
    --white-a65: rgba(255,255,255,.65);
    --white-a92: rgba(255,255,255,.92);

    /* ─── cores semânticas ─── */
    --fg:          var(--white-a92);
    --fg-muted:    var(--white-a60);   /* texto sobre escuro: mínimo .6 */
    --fg-faint:    var(--white-a35);   /* só decorativo, nunca texto */
    --ink-muted:   var(--ink-a66);     /* AA 4.5:1 em branco, off-white e warm-light */
    --line:        var(--ink-a10);     /* hairline sobre claro */
    --line-mid:    var(--ink-a25);     /* contorno de campo e controle */
    --line-strong: var(--ink-a30);     /* contorno de botão secundário e pílula */
    --line-dark:   var(--white-a08);   /* hairline sobre escuro */
    --line-light:  var(--ink-a10);
    --scrim:       var(--ink-a55);     /* fundo de diálogo */

    /* ─── tipografia (Instrument Sans · 400/500 apenas) ─── */
    --font: "Instrument Sans", system-ui, -apple-system, sans-serif;
    --t-hero:      clamp(1.75rem,3.2vw,2.625rem);
    --t-headline:  clamp(1.6rem,2.6vw,2.25rem);   /* peso 400, sentence case, ls -0.02em */
    --t-display:   clamp(1.75rem,4vw,3.5rem);
    --t-headline-m:clamp(1.5rem,7vw,2rem);        /* título das telas de jornada */
    --t-title-m:   clamp(1.4rem,6vw,1.75rem);
    --t-code:      30px;    /* código de verificação */
    --t-3xl:       26px;
    --t-card:      22px;    /* título de e-card */
    --t-2xl:       20px;
    --t-xl:        18px;
    --t-lg:        17px;
    --t-base:      16px;    /* nome em destaque e campo de formulário (evita zoom no iOS) */
    --t-md:        15px;
    --t-body:      14.5px;
    --t-ui:        14px;
    --t-spec:      14px;
    --t-meta:      14px;
    --t-small:     14px;  /* texto pequeno: sentence case, sem letter-spacing */
    --t-label:     14px;    /* mínimo absoluto (Fabio, 03/10: 14px) */
    --ls-tight:    -0.02em;
    --ls-snug:     -0.01em;
    --ls-code:     .18em;

    /* ─── forma ─── */
    --r-card: 10px;
    --r-btn:  6px;
    --r-xs:   3px;
    --r-pill: 999px;

    /* ─── seções: respiro vertical padrão (Fabio, 03/10) ─── */
    --sec-y:   96px;   /* computador, em cima e embaixo */
    --sec-y-m: 72px;   /* celular e tablet (até 1120px) */
    --r-round:50%;
    --shadow-card: none;

    /* ─── padrões de superfície ─── */
    --dot-grid: radial-gradient(var(--white-a06) 1px, transparent 1.5px);
    --dot-grid-size: 22px 22px;
    --photo-veil: rgba(69,69,72,.66);

    /* ─── motion ─── */
    --ease-ui:     .2s ease;    /* hover, cor, opacidade */
    --ease-move:   .3s ease;    /* deslocamento curto */
    --ease-sheet:  .35s ease;   /* folha (menu, filtros) */
    --ease-expand: .4s ease;    /* abrir/fechar altura */
    --ease-slow:   .5s ease;
    --ease-theme:  .6s ease;    /* troca de tema de seção */
 
  }

  body{
    min-height:100dvh;
    background:var(--charcoal);
    color:var(--fg);
    font-family:var(--font);
    font-weight:400;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  /* ══ seção 1 · palco único: hero fotográfico ══ */
  .stage{position:relative;min-height:100dvh;overflow:hidden}
  .stage .photo{
    position:absolute;inset:0;
    background:
      radial-gradient(ellipse 60% 50% at 55% 60%, var(--white-a06), transparent 70%),
      url("../assets/hero-veiculo.webp")
      center 50%/cover no-repeat;
  }
  /* leitura sem véu: gradiente leve do canto esquerdo até o fim do nav, e sombra difusa na headline */
  .stage .photo::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(100deg, var(--ink-a68), var(--ink-a00) 72%);
  }
  .stage>*{position:relative}

  /* topo: wordmark + nav em colunas */
  .top{display:flex;align-items:flex-start;padding:36px 44px;gap:96px}
  .wordmark{color:var(--fg);flex:none;font-style:normal;font-weight:500;font-size:28px;letter-spacing:-0.045em;text-decoration:none;line-height:1}
  .wordmark em{font-style:italic;font-weight:inherit;color:inherit}
  .wordmark--panel{font-size:22px}
  .wordmark svg{height:30px;width:auto;display:block}
  .nav{display:flex;gap:56px}
  .nav .col{display:grid;gap:8px;font-size:var(--t-meta)}
  .nav .col b{font-weight:500;color:var(--fg);margin-bottom:4px}
  .nav .col a{color:var(--fg);text-decoration:none}
  .nav .col a:hover{opacity:.65}

  /* card branco do anúncio — base em fluxo; `--pin` prende no topo-direito do hero */
  .float-card{
    width:380px;background:var(--white);color:var(--ink);
    border-radius:var(--r-card);

    overflow:hidden;
  }
  .float-card--pin{position:absolute;top:36px;right:44px}
  .float-card .row1{
    display:flex;align-items:center;gap:14px;
    padding:14px 16px;border-bottom:1px solid var(--line);
  }
  .float-card .who{display:grid;font-size:var(--t-small);line-height:1.35;flex:1}
  .float-card .who .a{font-weight:500}
  .float-card .who .b{color:var(--ink-muted)}
  .float-card .price{font-size:var(--t-small);color:var(--ink-muted);text-align:right}
  .float-card .price b{display:block;color:var(--ink);font-weight:500}
  .float-card .cta{
    background:var(--ink);color:var(--white);
    font-size:var(--t-meta);font-weight:500;
    padding:10px 16px;border:none;border-radius:var(--r-btn);cursor:pointer;
  }
  .float-card .row2{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px;font-size:var(--t-ui);
  }
  .float-card .row2 .name{font-weight:500;font-size:var(--t-base)}
  .float-card .row2 .links{display:flex;gap:22px;font-size:var(--t-meta)}
  .float-card .row2 .links a{color:var(--ink);text-decoration:none}
  .float-card .row2 .links a.off{color:var(--ink-muted)}

  /* headline quieta */
  .headline{

    position:absolute;left:44px;top:44%;
    font-size:var(--t-hero);
    font-weight:400;line-height:1.15;letter-spacing:var(--ls-tight);
    max-width:16ch;text-wrap:balance;
  }

  /* ══ seção 2 · marcas (logo abaixo do hero) ══
     `.model` escopado no `.model-grid`: o card do mosaico também tem `.model`.
     sem título e sem foto: superfície bege clara com grão, as marcas soltas em
     cima, e o mesmo card do anúncio do hero fechando embaixo.
     A seção inverte o texto: aqui tudo é tinta sobre claro. */
  .brands{
    position:relative;
    background:var(--warm-light);
    color:var(--ink);
    min-height:100dvh;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:64px 44px 32px;
    overflow:hidden;
  }
  /* grão — ruído fractal em SVG, sem blend mode e sem asset externo */
  .brands::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:.16;
  }
  .brands>*{position:relative;z-index:1}
  /* sem cela e sem hairline: as marcas ficam soltas numa linha só,
     6 por vez, o resto por swipe com snap. */
  .brand-field{
    --cols:6;
    --gap-x:36px;
    display:flex;align-items:center;
    gap:var(--gap-x);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:16px;margin-bottom:40px;
  }
  .brand-field::-webkit-scrollbar{height:2px}
  .brand-field::-webkit-scrollbar-thumb{background:var(--ink-a15)}
  .brand{
    flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols));
    display:grid;justify-items:center;align-content:center;
    scroll-snap-align:start;
    text-decoration:none;background:none;border:none;padding:0;cursor:pointer;
    transition:transform var(--ease-ui);
  }
  .brand:hover{transform:translateY(-2px)}
  /* wordmark chapado na cor do texto — a mask preserva a forma sem trazer a cor
     da marca pra dentro da paleta fechada */
  .brand .mark{
    display:block;
    /* marcas reduzidas pra seção inteira caber na viewport */
    height:calc(var(--h,24px) * .72);
    aspect-ratio:var(--ar);
    background:var(--ink-a45);
    -webkit-mask:var(--src) center/contain no-repeat;
            mask:var(--src) center/contain no-repeat;
    transition:background var(--ease-ui);
  }
  .brand:hover .mark{background:var(--ink)}
  /* marca pressionada — a seleção que dirige a galeria abaixo */
  .brand[aria-current="true"] .mark{background:var(--ink)}

  /* galeria da marca pressionada — sem card: o recorte senta direto no bege.
     4 por linha, duas linhas, e o tile em 3/2 para a bike ocupar a caixa inteira
     em vez de sobrar letterbox em cima e embaixo. */
  .model-grid{
    flex:1;
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:20px 24px;margin-bottom:36px;align-content:center;
  }
  .model-grid .model{text-decoration:none;color:var(--ink);display:grid;gap:8px;align-content:start}
  .model-grid .model .ph{aspect-ratio:3/2}
  .model-grid .model .ph img{
    width:100%;height:100%;object-fit:contain;
    transition:transform var(--ease-slow);
  }
  .model-grid .model:hover .ph img{transform:scale(1.05)}
  /* modelo real sem foto gerada ainda */
  .model--sem-foto .ph{
    border:1px dashed var(--ink-a18);
    border-radius:var(--r-card);
  }
  .model-grid .model .t{
    font-size:var(--t-spec);color:var(--ink-muted);
    transition:color var(--ease-ui);
  }
  .model-grid .model:hover .t{color:var(--ink)}

  .brands .foot{display:flex;justify-content:flex-end}
  /* home: o grupo de marcas fecha o mosaico, sobre o fundo escuro —
     o wordmark inverte pra clara (mesma mask, outra tinta) */
  .anatomy .brand-field{margin:52px 0 0}
  .anatomy .brand .mark{background:var(--white-a45)}
  .anatomy .brand:hover .mark{background:var(--fg)}
  .anatomy .brand{font-size:20px;font-weight:500;letter-spacing:-0.03em;color:var(--white-a45)}
  .anatomy .brand[aria-current="true"],.anatomy .brand:hover{color:var(--fg)}
  .anatomy .vazio{margin-top:8px;font-size:var(--t-base);color:var(--fg-muted)}
  .anatomy .vazio[hidden]{display:none}
  .anatomy .brand-field::-webkit-scrollbar-thumb{background:var(--white-a15)}

  /* painel de filtros do mosaico — a folha do menu mobile, mas vale em qualquer largura */
  .menu-panel.filter-panel{
    display:block;
    position:fixed;left:0;right:0;top:0;z-index:60;
    height:auto;max-height:85dvh;
    background:var(--white);color:var(--ink);
    border-radius:0 0 var(--r-card) var(--r-card);

    padding:20px;overflow:auto;
    transform:translateY(-100%);
    visibility:hidden;
    transition:transform var(--ease-sheet), visibility 0s .35s;
  }
  .menu-panel.filter-panel[data-open="true"]{
    transform:translateY(0);visibility:visible;
    transition:transform var(--ease-sheet);
  }
  @media (prefers-reduced-motion: reduce){ .menu-panel.filter-panel{transition:none} }

  /* painel de filtros — mesma folha do menu, com chips (padrão do listing) */
  .menu-panel.filter-panel{min-height:0}
  .filter-panel .wordmark--panel{display:block;color:var(--ink);padding:4px 0 14px}   /* logo também nos filtros (Fabio, 03/10) */
  .filter-panel .wordmark--panel svg{height:24px;width:auto;display:block}   /* igual ao logo do menu (padronizado 04/10) */
  .filter-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:8px 0 4px;
  }
  .filter-panel .label{
    font-size:var(--t-small);
    color:var(--ink-muted);
  }
  .filter-head .title{font-size:var(--t-lg);color:var(--ink)}
  .filter-panel .filter-head .wordmark--panel{padding:0;display:flex;align-items:center;min-height:44px}
  .filter-title{font-size:var(--t-lg);font-weight:400;color:var(--ink);margin:0;padding:16px 0 4px}
  .filter-panel .filter-title + .group{border-top:0}
  /* o head não pede hairline — o primeiro grupo cola direto */
  .filter-panel .filter-head + .group{border-top:0}
  /* fechar no topo — mesmo pill do menu */
  .filter-head .close{
    background:none;border:1px solid var(--line-strong);cursor:pointer;
    color:var(--ink);border-radius:var(--r-pill);
    /* fechar é sempre ícone, nunca texto (Fabio, 02/10) */
    width:44px;height:44px;padding:0;flex:none;
    display:flex;align-items:center;justify-content:center;
  }
  .filter-panel .actions{display:flex;align-items:center;gap:18px;margin-top:14px}
  /* Limpar sobe pro lado do título; Ver resultados fica sozinho embaixo (Fabio, 02/10) */
  .filter-head .clear{margin:0 auto 0 14px}
  .filter-panel .clear{
    background:none;border:none;cursor:pointer;
    font-size:var(--t-meta);color:var(--ink-muted);padding:12px 0;
  }
  .filter-panel .group{
    display:grid;gap:12px;padding:18px 0;
    border-top:1px solid var(--line);
  }
  .filter-panel .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{
    background:none;border:1px solid var(--line-strong);border-radius:var(--r-pill);
    color:var(--ink);font-size:var(--t-meta);padding:9px 16px;cursor:pointer;
  }
  .chip[aria-pressed="true"]{
    background:var(--ink);color:var(--white);border-color:var(--ink);
  }
  .filter-panel .apply{
    background:var(--ink);color:var(--white);
    font-size:var(--t-meta);font-weight:500;
    padding:12px 20px;border:none;border-radius:var(--r-btn);cursor:pointer;
    flex:1;   /* largura toda; Limpar fica ao lado (Fabio, 02/10) */
  }

  /* ══ card de anúncio — contexto fixo: modelo, meta, preço, CTA ══ */
  .l-card{
    background:var(--white);color:var(--ink);
    border-radius:var(--r-card);overflow:hidden;

    display:flex;flex-direction:column;
    transition:transform var(--ease-ui);
  }
  a.l-card{color:var(--ink);text-decoration:none}   /* o card inteiro leva ao anúncio, sem botão Ver (Fabio, 03/10) */
  .l-card:hover{transform:translateY(-4px)}
  .l-card .ph{position:relative;aspect-ratio:4/3;background:var(--charcoal)}
  .l-card .ph img{width:100%;height:100%;object-fit:cover}
  .l-card .ph.studio-light{background:var(--warm-light)}
  .l-card .ph.studio-dark{background:var(--near-black)}
  .l-card .ph.studio-light img,.l-card .ph.studio-dark img{object-fit:contain;padding:6%}
  .l-card .ph .tag{
    position:absolute;top:14px;left:14px;
    background:var(--white);color:var(--ink);
    font-size:var(--t-small);font-weight:500;
    padding:6px 10px;border-radius:var(--r-btn);
  }
  .l-card .body{padding:20px;display:grid;gap:4px}
  .l-card .model{font-size:var(--t-xl);font-weight:500;letter-spacing:var(--ls-snug)}
  .l-card .meta{font-size:var(--t-spec);color:var(--ink-muted)}
  .l-card .foot{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  }
  .l-card .price{font-size:var(--t-xl);font-weight:500}
  .l-card .loc{
    font-size:var(--t-small);
    color:var(--ink-muted);
  }
  .l-card .cta{
    background:var(--ink);color:var(--white);
    font-size:var(--t-meta);font-weight:500;
    padding:10px 16px;border:none;border-radius:var(--r-btn);cursor:pointer;
  }

  /* variante tall — heading maior; foto deitada 4:3 porque o carro de lado é largo (Fabio, 26/10) */
  .l-card--tall .ph{aspect-ratio:3/4}
  .l-card--tall .model{font-size:var(--t-card);letter-spacing:var(--ls-tight)}

  /* variante cover — foto full-bleed, texto sobre gradiente ink */
  .l-card--cover{position:relative}
  .l-card--cover .ph{position:absolute;inset:0;aspect-ratio:auto;height:100%}
  .l-card--cover .body{
    position:absolute;left:0;right:0;bottom:0;z-index:1;
    padding:24px 20px 20px;
    background:linear-gradient(transparent, var(--ink-a78));
    color:var(--off-white);
  }
  .l-card--cover .model{font-size:var(--t-card);letter-spacing:var(--ls-tight)}
  .l-card--cover .meta{color:var(--white-a65)}
  .l-card--cover .foot{border-top-color:var(--white-a18)}
  .l-card--cover .loc{color:var(--white-a65)}
  .l-card--cover .cta{background:var(--white);color:var(--ink)}

  /* ══ seção 3 · mosaico da marca (veio do concept-mosaico) ══
     fluxo em colunas (masonry): o card tem altura própria, cada coluna
     empilha justo e a primeira linha encosta no topo por construção. */
  .anatomy{
    background:var(--near-black);   /* sem pontilhado (Fabio, 03/10) */
    color:var(--fg);
    padding:96px 44px 110px;
  }
  /* head no padrão das conferidas: título + lupa + filtro na mesma linha.
     Marca ⇒ logo (mask chapada na cor do texto); sem marca / busca ⇒ título escrito */
  .anatomy .head{
    margin-bottom:44px;
    display:flex;align-items:center;gap:12px;
  }
  .anatomy .head h2{
    flex:1;min-width:0;
    font-size:var(--t-headline);
    font-weight:400;letter-spacing:var(--ls-tight);
  }
  .anatomy .head .mark{
    display:block;height:auto;aspect-ratio:var(--ar);
    /* teto no tamanho natural (26px de altura); encolhe se faltar largura */
    width:100%;max-width:calc(26px * var(--ar));
    background:var(--fg);
    -webkit-mask:var(--src) left center/contain no-repeat;
            mask:var(--src) left center/contain no-repeat;
  }
  .anatomy .search-row{display:flex;align-items:center;gap:12px;flex:none}
  .anatomy .icon-btn{
    width:44px;height:44px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:none;border:1px solid var(--fg-faint);border-radius:var(--r-pill);
    color:var(--fg);cursor:pointer;
  }
  .anatomy .icon-btn svg{
    width:17px;height:17px;flex:none;
    fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
  }
  .anatomy .icon-btn .ic-close{display:none}
  .anatomy[data-search="on"] .ic-search{display:none}
  .anatomy[data-search="on"] .ic-close{display:block}
  .anatomy[data-search="on"] .head h2{display:none}
  .anatomy .search-input{display:none}
  .anatomy[data-search="on"] .search-input{
    display:block;flex:1;min-width:0;
    height:auto;min-height:2.3em;resize:none;overflow:hidden;
    -webkit-appearance:none;appearance:none;border-radius:0;
    border:none;background:none;outline:none;padding:0;
    font-family:var(--font);font-size:var(--t-headline);font-weight:400;
    line-height:1.15;letter-spacing:var(--ls-tight);
    color:var(--fg);caret-color:var(--fg);
  }
  .anatomy .search-input::-webkit-search-decoration,
  .anatomy .search-input::-webkit-search-cancel-button{display:none}
  .anatomy .search-input::placeholder{color:var(--fg-muted);opacity:1}
  .anatomy-grid{
    columns:4;column-gap:20px;
  }
  .anatomy-grid>*{
    break-inside:avoid;-webkit-column-break-inside:avoid;
    margin-bottom:20px;
  }
  .anatomy-grid .l-card{width:100%}
  /* cover mais vertical (5/8) — 3/4 ficava baixo demais ao lado dos tall,
     cuja foto 3/4 + corpo passa de 1.8× a largura (Fabio, 2026-08-09) */
  .anatomy-grid .l-card--cover{aspect-ratio:5/8}
  /* bikes de estúdio maiores: sem respiro e com zoom — a foto já traz margem própria */
  .anatomy-grid .l-card .ph.studio-light,
  .anatomy-grid .l-card .ph.studio-dark{overflow:hidden}
  .anatomy-grid .l-card .ph.studio-light img,
  .anatomy-grid .l-card .ph.studio-dark img{padding:0;transform:none;object-fit:contain}

  @media (max-width:1000px){
    .anatomy-grid{columns:2}
  }

  /* ── mobile ── */
  /* ações do topo: Anunciar em pílula (todas as larguras) + menu (só mobile).
     Desktop: logo depois do nav, longe do float-card do canto direito */
  .top-acoes{display:flex;align-items:center;gap:8px}
  @media (min-width:1121px){.top-acoes{margin-left:-40px}}   /* 56px do nav, como entre colunas */
  /* tablet: o float-card encosta no nav — o Anunciar fica só no nav */
  
  .anunciar-btn{
    display:inline-flex;align-items:center;height:36px;padding:0 16px;
    background:var(--white);color:var(--ink);border-radius:var(--r-pill);
    font-size:var(--t-meta);font-weight:500;text-decoration:none;
  }
  .menu-btn{display:none}
  .menu-panel{display:none}
  .mobile-bar{display:none}

  @media (max-width:1120px){
    /* hero: logo + menu, foto vertical, headline no terço inferior */
    .top{padding:20px;align-items:center;justify-content:space-between;gap:0}
    .wordmark svg{height:24px}
    .nav{display:none}
    /* ações do topo: Anunciar (pílula cheia) + menu em 3 pontos (círculo) */
    /* menu aberto: o botão vira fixed e sai do fluxo — reserva o lugar dele */
    .top-acoes:has(.menu-btn[aria-expanded="true"]){padding-right:52px}
    .menu-btn{
      display:inline-flex;align-items:center;justify-content:center;
      width:44px;height:44px;padding:0;
      background:none;border:1px solid var(--fg-faint);
      color:var(--fg);border-radius:var(--r-pill);cursor:pointer;
    }
    /* aberto: o mesmo botão sobe acima do painel e fecha */
    .menu-btn[aria-expanded="true"]{
      position:fixed;top:20px;right:20px;z-index:70;
      color:var(--ink);border-color:var(--line-strong);
    }

    /* painel do menu — full-width, metade da altura da tela, radius padrão
       (só nos cantos de baixo: encosta na borda superior).
       [PROVISÓRIO] a diagramação do conteúdo interno ainda vai ser definida. */
    .menu-panel{
      display:block;
      position:fixed;left:0;right:0;top:0;z-index:60;
      /* mínimo 50dvh; com logo + 3 grupos de 3 itens a altura segue o conteúdo */
      height:auto;min-height:50dvh;max-height:85dvh;
      background:var(--white);color:var(--ink);
      border-radius:0 0 var(--r-card) var(--r-card);

      padding:20px;overflow:auto;
      transform:translateY(-100%);
      /* fechado sai do cálculo de rolagem — evita o gap gigante no fim da
         página no Safari iOS (bug de container fixed com tamanho em dvh) */
      visibility:hidden;
      transition:transform var(--ease-sheet), visibility 0s .35s;
    }
    .menu-panel[data-open="true"]{
      transform:translateY(0);visibility:visible;
      transition:transform var(--ease-sheet);
    }
    @media (prefers-reduced-motion: reduce){
      .menu-panel{transition:none}
    }

    /* interior: logo em tinta no topo, grupos empilhados, hairline entre eles */
    .wordmark--panel{display:block;color:var(--ink);padding:4px 0 14px}
    .wordmark--panel svg{height:24px;width:auto;display:block}
    .menu-nav{display:grid;padding-top:4px}
    .menu-nav .group{
      display:grid;gap:12px;padding:18px 0;
      border-top:1px solid var(--line);
    }
    .menu-nav .group:first-child{border-top:0;padding-top:8px}
    .menu-nav .label{
      font-size:var(--t-small);
      color:var(--ink-muted);
    }
    .menu-nav .group a{
      color:var(--ink);text-decoration:none;
      font-size:var(--t-lg);line-height:1.2;
    }
    .stage .photo{
      background:
        radial-gradient(ellipse 60% 50% at 50% 60%, var(--white-a06), transparent 70%),
        url("../assets/hero-veiculo-mobile.webp") center 42%/cover no-repeat;
    }
    .float-card{display:none}
    .headline{
      left:20px;right:20px;top:auto;bottom:110px;
      font-size:var(--t-headline-m);max-width:16ch;text-wrap:balance;
    }

    /* marcas: campo mais apertado; o card do rodapé cede lugar à barra fixa */

    .brands{padding:56px 20px}
    /* 2 marcas inteiras + meia terceira — a cortada na borda convida o swipe */
    .brand-field{--cols:2.5;--gap-x:14px;gap:var(--gap-x);padding-bottom:24px}
    .brand{gap:10px;min-width:0}
    /* dimensionado pela largura: o box abraça o desenho (sem espaço morto da
       mask) e wordmarks largos encolhem proporcionalmente dentro da célula */
    .brand .mark{
      width:min(100%, calc(var(--h,24px) * .82 * var(--ar)));
      height:auto;aspect-ratio:var(--ar);
    }

    /* galeria da marca: 2 colunas folgadas em vez das 4 do desktop */
    .model-grid{grid-template-columns:repeat(2,1fr);gap:24px 20px;margin-bottom:28px}
    .model-grid .model .t{font-size:var(--t-meta)}
    .brands .foot{display:flex}
    .brands .foot .float-card{display:block;width:100%}

    /* barra fixa no rodapé — substitui o card branco */
    .mobile-bar{
      display:flex;position:absolute;left:10px;right:10px;bottom:10px;z-index:50;
      background:var(--white);color:var(--ink);
      border-radius:var(--r-card);
      align-items:center;gap:12px;padding:10px 12px;
    }
    .mobile-bar .who{display:grid;font-size:var(--t-small);line-height:1.3;flex:1;min-width:0}
    .mobile-bar .who .a{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .mobile-bar .who .b{color:var(--ink-muted)}
    .mobile-bar .cta{
      background:var(--ink);color:var(--white);font-size:var(--t-meta);font-weight:500;
      padding:10px 16px;border:none;border-radius:var(--r-btn);
      white-space:nowrap;
    }


    .anatomy{padding:64px 20px 96px}
    /* coluna única não precisa de masonry — e columns fragmenta a pintura
       das sombras no Chrome (sombra órfã aparecendo no scroll) */
    .anatomy-grid{columns:auto;display:grid;gap:20px}
    .anatomy-grid>*{margin-bottom:0}

    /* alvos de toque com no mínimo 44px no mobile (acessibilidade) */
    .top .wordmark{display:inline-flex;align-items:center;min-height:44px}
    .wordmark--panel{min-height:44px}
    .anunciar-btn{min-height:44px}
    .menu-nav .group{gap:0}
    .menu-nav .group a{display:flex;align-items:center;min-height:44px}
    .chip{min-height:44px;display:inline-flex;align-items:center}
    .filter-panel .clear,.filter-panel .apply{min-height:44px}
    .filter-panel .clear{min-width:44px}
    .l-card .cta,.mobile-bar .cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
    .brand{min-height:44px}
  }

  /* toda seção tem no mínimo a altura da tela (Fabio, 02/10); conteúdo
     centralizado na vertical. :where() zera a especificidade: seção que
     define o próprio display continua mandando no layout dela */
  section{min-height:100vh;min-height:100svh}
  :where(section:not(.stage)){display:flex;flex-direction:column;justify-content:center}
  /* etiqueta padrão "Conferida", a mesma da página do produto (Fabio, 02/10) */
  .selo{display:inline-block;vertical-align:1px;margin-left:6px;background:var(--warm-light);color:var(--ink);font-size:var(--t-label);font-weight:500;line-height:1.3;letter-spacing:0;padding:3px 7px;border-radius:var(--r-btn);white-space:nowrap}
  /* o selo fica em tinta cheia mesmo dentro de pais em cinza (contraste AA) */
  .float-card .price span.selo,.mobile-bar .who span.selo,span.selo{color:var(--ink)}

  /* relógio e telas muito estreitas (até 300px) */
  @media (max-width:300px){
    .top{padding:12px;gap:6px}
    .wordmark svg{height:18px}
    .wordmark{font-size:18px}
    .top-acoes{gap:4px}
    .anunciar-btn{padding:0 10px;font-size:var(--t-label)}
    .hero-row{flex-wrap:wrap;gap:12px}
    .headline{max-width:none;flex:1 1 100%}
    .passos{padding-left:12px;padding-right:12px}
    .passo,.passo .texto,.amostra{min-width:0}
    .passo h3{font-size:var(--t-xl)}
    /* hero: título e barra de compra entram no fluxo, o palco cresce */
    .stage{height:auto;min-height:100svh;display:flex;flex-direction:column}
    .stage>.headline{position:relative;inset:auto;margin:auto 12px 12px;max-width:none}
    .stage>.mobile-bar{position:relative;inset:auto;margin:0 12px 12px}
    .mobile-bar{flex-direction:column;align-items:stretch;gap:8px}
    .stage>.prod-bar{position:relative;inset:auto;margin:auto 12px 12px}
    .prod-bar{grid-template-columns:1fr}
    .prod-bar .cell{padding:10px 12px}
    .prod-bar .cores,.prod-bar .opt-row,.prod-bar .cell--size{flex-wrap:wrap;justify-content:flex-start}
    .float-card .row1{flex-wrap:wrap}
    .float-card .row1 .cta{flex:1 1 100%}
    .float-card .row2,.float-card .row2 .links{flex-wrap:wrap;gap:6px 14px}
    .l-card .body{padding:14px}
    .l-card .body>*{min-width:0}
    .l-card .foot{flex-wrap:wrap;gap:8px}
    .regua{grid-template-columns:1fr}
    .mark{max-width:100%}
    .mobile-bar .cta{justify-content:center;text-align:center}
  }

  /* respiro vertical padrão das seções: tokens --sec-y / --sec-y-m (Fabio, 03/10) */
  /* marca na URL: a página é a vitrine, sem o hero fotográfico */
  html.sem-hero body{background:var(--near-black)}
  html.sem-hero .stage{min-height:0;height:auto;background:var(--near-black)}
  html.sem-hero .stage .photo,
  html.sem-hero .stage .headline,
  html.sem-hero .stage .float-card,
  html.sem-hero .stage .mobile-bar{display:none}
  section.anatomy{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
  @media (max-width:1120px){
    section.anatomy{padding-top:var(--sec-y-m);padding-bottom:var(--sec-y-m)}
  }

  /* cards da vitrine sem botão "Ver anúncio" (o card é o link); card flutuante e barra do celular voltaram com o botão (Fabio, 03/10) */
  a.l-card,a.row1,a.mobile-bar{text-decoration:none;color:inherit}
  a.l-card,a.mobile-bar{color:var(--ink)}

  /* espaço padrão entre os cards e a fileira de marcas: 64px no desktop, 48px no celular (Fabio, 03/10) */
  .anatomy .brand-field{margin-top:44px}
  @media (max-width:1120px){ .anatomy .brand-field{margin-top:45px} }

  /* links no fim, depois do botão (Fabio, 03/10): "Limpar filtros" sai do topo e vem embaixo de "Ver resultados" */
  .filter-panel .actions{display:flex;flex-direction:column;align-items:stretch;gap:4px}
  .filter-panel .actions .clear{background:none;border:0;padding:0;min-height:44px;font:inherit;font-size:var(--t-ui);
    color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:center}

  /* ==== componentes (gerado de buybike-ds/tokens/componentes.css; não editar aqui) ==== */
  /* campos com 16px no celular e no tablet: evita o zoom automático do iPhone
     ao tocar; a busca grande do topo (.search-input) já é maior (Fabio, 04/10) */
  @media (max-width:1120px),(pointer:coarse){
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.search-input),select,textarea:not(.search-input){font-size:max(16px,1em)!important}
  }

  /* envio de arquivo: área tracejada para arrastar ou escolher + "Tirar foto
     agora" embaixo (fotos do anúncio, comprovante, documento) */
  .drop{display:grid;justify-items:center;gap:6px;text-align:center;cursor:pointer;padding:32px 20px;border:1px dashed var(--line-strong);
    border-radius:var(--r-card);color:var(--ink);transition:background var(--ease-ui),border-color var(--ease-ui)}
  .drop:hover,.drop.on{background:var(--warm-light);border-color:var(--ink)}
  .drop-t{font-size:var(--t-base);font-weight:500;text-wrap:balance;max-width:26ch}
  .drop-b{font-size:var(--t-meta);color:var(--ink-muted);max-width:30ch}
  .camera{width:100%;margin-top:10px;cursor:pointer}
  .drop:has(input:focus-visible),.camera:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}

  /* abas em pílula para escolha entre duas ou três opções (Rígida | Papelão,
     Primeiro | Segundo cartão, CNH | RG) */
  .abas{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:var(--r-pill)}
  .abas label{position:relative;cursor:pointer}
  .abas input{position:absolute;opacity:0;pointer-events:none}
  .abas span,.abas button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 12px;border:0;background:none;
    border-radius:var(--r-pill);font:inherit;font-size:var(--t-ui);font-weight:500;color:var(--ink-muted);cursor:pointer;
    transition:background var(--ease-ui),color var(--ease-ui)}
  .abas input:checked + span,.abas button[aria-selected="true"]{background:var(--ink);color:var(--white)}
  .abas input:focus-visible + span,.abas button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

  /* miniatura de bike nas listas e no resumo (48 × 36): as fotos têm sobra em
     volta da bike; aqui a bike é aproximada para não virar um desenho de 35px
     (recorta 8,33% de cada lado e amplia 1,2×, o que preenche a caixa) (Fabio, 05/10) */
  :is(.resumo-head,.lista,.item) img:is([src*="models/"],[src*="variante-"]){transform:scale(1.2);clip-path:inset(8.33%)}

  /* card escuro: luz de estúdio suave atrás da bike, para bike preta não sumir no
     fundo quase preto (sem sombra; só um halo por alpha) (Fabio, 05/10) */
  .l-card .ph.studio-dark img{background:radial-gradient(closest-side,var(--white-a08),transparent)}

  /* cabeçalho: logo à esquerda, Anunciar + menu à direita. Cores ficam na
     página (o topo é claro ou escuro conforme o palco). */
  .top{display:flex;align-items:flex-start;padding:36px 44px;gap:96px}
  .top .wordmark{flex:none}
  .top .wordmark svg{height:30px;width:auto;display:block}
  .top-acoes{display:flex;align-items:center;gap:8px}
  @media (min-width:1121px){.top-acoes{margin-left:-40px}}   /* 56px do nav, como entre colunas */
  .top .anunciar-btn{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:var(--r-pill);
    font-size:var(--t-meta);font-weight:500;text-decoration:none}
  @media (max-width:1120px){
    .top{padding:20px;align-items:center;justify-content:space-between;gap:0}
    .top .wordmark{display:inline-flex;align-items:center;min-height:44px}
    .top .wordmark svg{height:24px}
    .top .anunciar-btn{min-height:44px}
    .top-acoes:has(.menu-btn[aria-expanded="true"]){padding-right:52px}
    .top .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
      background:none;border-radius:var(--r-pill);cursor:pointer}
    .top .menu-btn[aria-expanded="true"]{position:fixed;top:20px;right:20px;z-index:70}
  }

  /* card flutuante (anúncio, vendedor, caixa): miolo igual em todo lugar; a
     posição do card fica na página, porque muda conforme a seção */
  .float-card .row1{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .float-card .who{display:grid;font-size:var(--t-small);line-height:1.35;flex:1}
  .float-card .who .a{font-weight:500}
  .float-card .price{font-size:var(--t-small);text-align:right}
  .float-card .price b{display:block;font-weight:500}
  .float-card .row2{padding:14px 16px;font-size:var(--t-ui)}
  .float-card .row2 .name{font-weight:500;font-size:var(--t-base)}
  .float-card .row2 .links{font-size:var(--t-meta)}

  /* botões: preto cheio, canto de botão, texto 13/500; no toque, 44px de altura */
  .float-card .cta,.mobile-bar .cta{font-size:var(--t-meta);font-weight:500;padding:10px 16px;border:none;border-radius:var(--r-btn);cursor:pointer}
  /* variante das barras de compra (barra do palco e card da caixa): botão maior */
  .prod-bar .cta,.caixa-bar .cta{padding:12px 20px}
  @media (max-width:1120px){
    .float-card .cta,.mobile-bar .cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  }

  /* card de bike da vitrine: mesmo texto e mesmos espaços na Principal, na Bike,
     em Anúncios e em Conferidas (Fabio, 04/10). O formato muda conforme a
     vitrine (foto em cima, ou texto numa caixa sobre a foto), o miolo não. */
  .l-card .body,.listing-track .l-card .body{padding:20px}
  .l-card .model,.l-card--tall .model,.l-card--cover .model{font-size:var(--t-card);font-weight:500;letter-spacing:var(--ls-tight);text-wrap:balance}
  .l-card .meta{text-wrap:balance}   /* quebra equilibrada: nada de "kg" sozinho na linha */
  .l-card .price,.listing-track .l-card .price{font-size:var(--t-xl);font-weight:500;white-space:nowrap}
  .l-card .foot,.listing-track .l-card .foot{gap:16px}
  .l-card .ph .tag{font-size:var(--t-small);font-weight:500;padding:6px 10px;border-radius:var(--r-btn)}

  /* relógio e telas muito estreitas (até 300px): vem por último para valer
     por cima das regras acima */
  @media (max-width:300px){
    .top{padding:12px;gap:6px}
    .top .wordmark svg{height:18px}
    .wordmark{font-size:18px}
    .top-acoes{gap:4px}
    .top .anunciar-btn{padding:0 10px;font-size:var(--t-label)}
    .float-card .row1{flex-wrap:wrap}
    .float-card .row1 .cta{flex:1 1 100%}
    .l-card .body,.listing-track .l-card .body{padding:14px}
    .l-card .foot,.listing-track .l-card .foot{gap:8px}
  }

  /* painel do menu: folha branca que desce do topo (no celular em todas as
     páginas; no computador só onde o menu continua em painel) */
  @media (max-width:1120px){
    .menu-panel{padding:20px;border-radius:0 0 var(--r-card) var(--r-card);background:var(--white);color:var(--ink)}
    .wordmark--panel{display:block;color:var(--ink);padding:4px 0 14px;min-height:44px}
    .wordmark--panel svg{height:24px;width:auto;display:block}
    .menu-nav{display:grid;padding-top:4px}
    .menu-nav .group{display:grid;gap:0;padding:18px 0;border-top:1px solid var(--line)}
    .menu-nav .group:first-child{border-top:0;padding-top:8px}
    .menu-nav .label{font-size:var(--t-small);color:var(--ink-muted)}
    .menu-nav .group a{color:var(--ink);text-decoration:none;font-size:var(--t-lg);line-height:1.2;display:flex;align-items:center;min-height:44px}
  }

  /* painel de filtros: mesma folha do menu; logo na linha do fechar e
     "Filtros" embaixo (Fabio, 04/10) */
  .filter-panel{min-height:0}
  .filter-head{display:flex;align-items:center;justify-content:space-between;padding:8px 0 4px}
  .filter-panel .filter-head .wordmark--panel{padding:0;display:flex;align-items:center;min-height:44px}
  .filter-panel .wordmark--panel svg{height:24px;width:auto;display:block}
  .filter-head .close{background:none;border:1px solid var(--line-strong);cursor:pointer;color:var(--ink);border-radius:var(--r-pill);
    width:44px;height:44px;padding:0;flex:none;display:flex;align-items:center;justify-content:center}
  .filter-title{font-size:var(--t-lg);font-weight:400;color:var(--ink);margin:0;padding:16px 0 4px}
  .filter-panel .group{display:grid;gap:12px;padding:18px 0;border-top:1px solid var(--line)}
  .filter-panel .filter-title + .group{border-top:0}
  .filter-panel .label{font-size:var(--t-small);color:var(--ink-muted)}
  .filter-panel .chips{display:flex;flex-wrap:wrap;gap:8px}
  .filter-panel .chip{background:none;border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--ink);font-size:var(--t-meta);padding:9px 16px;cursor:pointer}
  .filter-panel .chip[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
  .filter-panel .actions{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-top:14px}
  .filter-panel .apply{background:var(--ink);color:var(--white);font-size:var(--t-meta);font-weight:500;padding:12px 20px;border:none;border-radius:var(--r-btn);cursor:pointer}
  .filter-panel .actions .clear{background:none;border:0;padding:0;min-height:44px;font:inherit;font-size:var(--t-ui);
    color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:center}
  @media (max-width:1120px){
    .filter-panel .chip{min-height:44px;display:inline-flex;align-items:center}
    .filter-panel .apply{min-height:44px}
  }

  /* busca + filtro na mesma linha */
  .search-row{gap:12px}
  /* ==== fim componentes ==== */

  body.claro{background:var(--warm-light);color:var(--ink)}
  body.claro .top .wordmark,
  body.claro .nav .col b,
  body.claro .nav .col a{color:var(--ink)}
  body.claro .menu-btn{color:var(--ink);border-color:var(--line-strong)}
  .doc{padding:8px 44px 64px;max-width:880px}
  .doc h1{font-size:var(--t-headline);font-weight:400;letter-spacing:-0.02em;line-height:1.15;max-width:18ch;text-wrap:balance}
  .doc p,.doc li{font-size:16px;line-height:1.5}
  .doc p{margin-top:16px;max-width:62ch}
  .doc ul,.doc ol{margin:20px 0 0;padding-left:1.2em;display:grid;gap:10px}
  .doc h2{margin-top:36px;font-size:20px;font-weight:500;letter-spacing:-0.02em}
  .doc a{color:var(--ink)}
  .produto{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;padding:0 44px 80px}
  .produto .ph{background:var(--white);border-radius:10px;aspect-ratio:16/10;overflow:hidden}
  .produto img{width:100%;height:100%;object-fit:contain}
  .produto .preco{font-size:22px;font-weight:500;letter-spacing:-0.02em;margin-top:12px}
  .produto .cta{display:inline-flex;margin-top:22px;background:var(--ink);color:var(--white);text-decoration:none;border-radius:6px;padding:12px 18px;font-size:14px;font-weight:500}
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:8px 44px 80px}
  .doc .google{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;min-height:44px;padding:0 18px;border:1px solid var(--line-strong);border-radius:6px;background:var(--white);color:var(--ink);text-decoration:none;font-size:16px;font-weight:500}
  .campo{display:grid;gap:8px;margin-top:22px;max-width:360px}
  .campo input{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:6px;background:var(--white);color:var(--ink)}
  .links-pag a{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:16px}
  .links-pag a span{color:var(--ink-muted);font-size:14px}
  @media (max-width:1120px){
    .doc,.produto,.compare{padding-left:20px;padding-right:20px}
    .produto,.compare{grid-template-columns:1fr}
  }