:root{ --bg:#ffffff; --bg-card:#ffffff; --bg-card-alt:#f1f7f0; --accent:#1e7d3b; --accent-dim:rgba(30,125,59,.12); /* Quanto o miolo do header pende pra esquerda do centro da tela, no desktop. O .nav usa space-between, que dá vãos IGUAIS entre logo→menu e menu→botão; como o botão (196px) é mais largo que a logo (121px), o conjunto inteiro desce 37,5px pra esquerda. A faixa branca usa o mesmo número pra ficar no mesmo eixo do menu — as duas linhas se leem como uma coluna só. É METADE da diferença entre as duas larguras. Se a logo mudar de tamanho ou o texto do botão mudar, medir de novo: (largura do .nav-cta − largura do .logo) ÷ 2 e conferir no navegador que os dois centros voltam a bater. */ --nav-desvio:38px; --text:#14181a; --text-dim:#5c675f; --border:rgba(20,24,26,.14); --border-strong:rgba(20,24,26,.4); /* vermelho de erro — usado quando um campo recusa o valor digitado (hoje, a entrada abaixo do mínimo do carnê). Escuro o bastante pra ler em texto de 12px sobre branco, e longe do verde da marca pra não parecer confirmação. */ --erro:#c0392b; /* âmbar do bloco "Reserve o seu" na página do modelo — o estado de quem está publicado com zero unidade no Estoque. Não é verde (verde no site quer dizer "tem pronto") e não é cinza (cinza lê como produto morto): é convite, não recusa. Só a página de produto usa: CARD NÃO LEVA SELO, decisão do Kelvim em 21/08 — o catálogo se lê pela foto e pelo preço, e etiqueta sobre a foto é ruído em oito cards seguidos. Quem quiser separar usa o filtro. */ --encomenda:#b26a00; --encomenda-bg:#fff5e6; --encomenda-linha:rgba(178,106,0,.35); /* linha que fecha as caixas brancas (cards, simulador, ficha) sobre o fundo branco — mesmo peso das linhas internas dos cards, sem contorno pesado */ --border-card:var(--border); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;background:var(--bg);} body{ background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; line-height:1.5; overflow-x:hidden; } h1,h2,h3,h4{ font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:-.01em; } a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} .container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;} ::selection{background:var(--accent);color:#fff;} /* background — branco puro, sem sombra verde */ .grid-glow{ position:fixed;inset:0;z-index:-1; background:var(--bg); } /* Topo fixo — a faixa branca da frase + o header preto sobem juntos e param colados no alto da tela (19/08/2026). Antes só o header era sticky e a faixa rolava embora. O sticky mora AQUI, no par, e não em cada um: se os dois fossem sticky com top:0 separados, o header subiria por cima da faixa. Por isso o `header` abaixo não tem mais position/top nem z-index: quem carrega os três agora é este bloco. O bloco é filho direto do , no mesmo lugar onde o header sticky já morava e funcionava — a única mudança é que agora o sticky vale pro par. */ .topo-fixo{position:sticky;top:0;z-index:100;} /* o topo fixo cobre ~99px no desktop e ~92px no celular. Sem isso, clicar em "Modelos" ou "Financiamento" no menu leva o título da seção pra debaixo dele. Vale um pouco a mais que a altura real, pra sobrar respiro. */ :target{scroll-margin-top:112px;} /* faixa de aviso — branca, logo acima do header preto, nas duas telas. */ .topbar-aviso{background:#fff;overflow:hidden;} .topbar-aviso-trilha{display:flex;justify-content:center;} .topbar-aviso span{ padding:9px 16px;white-space:nowrap; font-size:12px;font-weight:500;letter-spacing:.07em;color:var(--text); } .topbar-aviso b{font-weight:800;} /* e não : a regra de cima é `.topbar-aviso span` e pegaria um span aninhado junto, aplicando nele o padding da faixa inteira. */ .topbar-cidade{font-style:normal;} /* Parada e numa linha só, nas duas telas (19/08/2026). No celular ela já foi letreiro: duas cópias da frase formavam a trilha e uma animação deslocava metade dela. Saiu tudo — animação, @keyframes, a 2ª cópia no HTML e o bloco de prefers-reduced-motion, que existia só pra desligar o movimento. Mesma regra do botão flutuante do WhatsApp: o padrão é parado. A frase encurtou junto (saiu "NA CIDADE OCIDENTAL-GO"), que é o que permite ela caber numa linha só no celular sem virar letra de bula. */ /* a faixa acompanha o eixo do menu, e não o da tela — ver --nav-desvio no :root. transform e não margem: o deslocamento é só visual e não mexe na caixa, então a frase continua podendo usar a largura inteira antes de encostar nas bordas. Só no desktop: no celular o header é logo + hambúrguer, sem miolo a acompanhar, e a faixa fica centrada na tela mesmo. */ @media (min-width:921px){ .topbar-aviso-trilha{transform:translateX(calc(var(--nav-desvio) * -1));} } @media (max-width:920px){ /* vw e não px: com `nowrap` a frase não quebra, ela vazaria pela direita numa tela mais estreita. Assim ela encolhe junto com o aparelho e o teto de 11px impede que fique maior que a do desktop num tablet. */ .topbar-aviso span{font-size:min(11px, 3.1vw);padding:8px 12px;} /* a cidade fica só no desktop. No celular a frase precisa caber numa linha e foi por isso que ela saiu em 19/08 — voltar aqui desfaria aquilo. */ .topbar-cidade{display:none;} } /* header — preto puro, igual ao rodapé e à barra de categorias. Era rgba(0,0,0,.95) com blur: com o fundo do site branco, os 5% de transparência clareavam o preto e o header ficava visivelmente mais fraco que a barra logo abaixo dele. Opaco, o blur não teria efeito nenhum, então saiu junto. */ /* `position:relative` existe pro menu hamburguer: ele e absoluto e precisa se pendurar no PE DO HEADER. Sem isso o ancestral posicionado mais proximo vira o .topo-fixo (sticky), que comeca la em cima na faixa branca — e o menu abria no meio da barra preta, cortando a logo ao meio. Nao cria contexto de empilhamento novo (z-index continua auto), entao o par sticky segue mandando na sobreposicao com o resto da pagina. */ header{ position:relative; background:#000; border-bottom:1px solid rgba(255,255,255,.1); } .nav{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;} .logo img{height:42px;width:auto;display:block;} .nav-links{display:flex;gap:26px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;} .nav-links a{color:#c7cec9;transition:color .2s;} /* Verde da Ciclodandi, não o do WhatsApp: no header ele é o botão de ação da marca e fica ao lado da logo — o verde-claro do WhatsApp puxava a atenção pra longe dela. Chegou a ser #25d366 em 20/08 e voltou no mesmo dia, a pedido do Kelvim. O ÍCONE ficou: ele já diz de que canal se trata, sem precisar da cor. Os "Falar no WhatsApp" do corpo da página seguem no verde do WhatsApp (.btn-whats) — lá eles não disputam com nada. */ .nav-cta{ display:inline-flex;align-items:center;gap:9px; background:var(--accent);color:#fff;padding:10px 20px;border-radius:6px; font-weight:700;font-size:14px;box-shadow:0 4px 14px rgba(30,125,59,.3); transition:transform .2s, box-shadow .2s; } .nav-cta svg{width:17px;height:17px;flex-shrink:0;} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;} .burger span{width:24px;height:2px;background:#c7cec9;} /* navegação por categoria — o conteúdo dos dois pontos onde ela aparece sai de CATEGORIAS (dados.js). Aqui fica só a aparência: .cat-circulos fileira de círculos acima do "Escolha seu modelo" .nav-cat os mesmos links no menu "Categorias" do header Em todas, `nowrap` + rolagem horizontal: as categorias não cabem lado a lado em tela estreita, e rolar no dedo é melhor que quebrar em duas linhas. A BARRA BRANCA sob o header saiu em 20/08/2026: as categorias passaram a morar dentro do próprio header, no menu suspenso do "Categorias" (que tomou o lugar do antigo link "Modelos"). Junto dela saíram `.cat-nav-topo`, o `catNavTopo()` do dados.js e o `.cat-topo-wrap` do index.html. */ .cat-nav{ display:flex;align-items:center; flex-wrap:nowrap;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none; } .cat-nav::-webkit-scrollbar{display:none;} /* fileira de círculos. A imagem da loja entra dentro do mesmo círculo e é recortada por object-fit, então o desenho provisório e a foto definitiva ocupam exatamente o mesmo espaço — trocar um pelo outro não mexe no layout. */ /* o padding vertical existe por causa do hover: `overflow-x:auto` também recorta no eixo vertical, então o círculo que sobe 3px no hover (e a sombra que cai embaixo) ficavam cortados na borda da trilha. O respiro é interno pra rolagem continuar de ponta a ponta. */ .cat-circulos{ display:flex;align-items:flex-start;justify-content:center;gap:52px; flex-wrap:nowrap;overflow-x:auto;padding:10px 0 16px; scrollbar-width:none;-ms-overflow-style:none; } .cat-circulos::-webkit-scrollbar{display:none;} /* 160px de círculo com 52px entre eles — medida tirada da referência do desktop. As 5 categorias somam 1008px e cabem nos 1132px úteis do container. */ .cat-circulo{ flex:0 0 auto;width:160px; display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center; /* o navegador pinta um retângulo translúcido por cima do inteiro a cada toque — um quadrado em volta do círculo e do nome. Quem marca o toque aqui é o :active do círculo, mais abaixo. */ -webkit-tap-highlight-color:transparent; } /* aro verde vazado, com o conteúdo por dentro — o círculo já foi preto e depois verde chapado. A referência trazia um raio no canto de cada círculo; ele chegou a existir aqui e foi retirado a pedido do Kelvim — não repropor. */ .cat-circulo-img{ width:160px;height:160px;border-radius:50%;overflow:hidden; background:transparent;border:3px solid var(--accent);color:var(--accent); display:flex;align-items:center;justify-content:center; transition:transform .2s, background .2s; } /* Tratamento escolhido pelo Danilo em 19/08/2026: aro verde vazado com a foto do produto real por dentro, o mesmo dos "Patinetes". Estiveram na tela cinco variações ao mesmo tempo (aro vazado com foto, círculo verde cheio com foto e círculo verde cheio com ícone branco); as duas de círculo cheio saíram, junto com o hover escuro que só elas usavam. Como o fundo é branco, a arte de cada categoria é a foto do produto em PNG transparente. As cinco chegaram em 19/08 (silhueta branca não servia: era o que "Scooters" e "Acessórios" usavam pro círculo cheio e, no aro vazado, sumiriam). O QUE IGUALA O TAMANHO das cinco não é o CSS, é o preparo do arquivo: cada PNG é recortado rente ao contorno do produto, sem margem vazia, e reduzido pra 300px no lado maior. Aí o `object-fit:contain` encaixa todos na mesma caixa de 124px e cada um preenche a caixa no seu lado mais longo. Se uma imagem nova vier com margem em volta, ela vai parecer menor que as outras — e o defeito está no arquivo, não aqui. */ /* o capacete é quase quadrado e por isso enche o círculo, enquanto os outros são largos e baixos e sobram nas laterais. O respiro extra só nele deixa os cinco com peso parecido na fileira. */ .cat-circulo[data-cat="acessorios"] .cat-circulo-img img{padding:32px;} .cat-circulo-img svg{width:72px;height:72px;} /* `contain` e não `cover`: a foto da categoria é um produto recortado e precisa caber inteira dentro do aro. Com `cover` ela encheria o círculo e o corte levaria guidão e roda junto. O padding afasta o produto da borda verde. */ .cat-circulo-img img{width:100%;height:100%;object-fit:contain;padding:18px;} .cat-circulo-nome{font-size:14px;font-weight:600;color:var(--text);line-height:1.25;} /* no aro vazado a sombra do hover não lia; quem marca agora é o fundo verde claro por dentro. O hover fica trancado em `hover:hover` — só onde existe ponteiro de verdade. No celular o :hover GRUDA depois do toque: a categoria tocada ficava verde indefinidamente, até tocar em outro lugar da tela, e ainda pintava o nome junto. */ @media (hover:hover){ .cat-circulo:hover .cat-circulo-img{transform:translateY(-3px);background:var(--accent-dim);} .cat-circulo:hover .cat-circulo-nome{color:var(--accent);} } /* No toque o verde vem de duas fontes. O :active vale só enquanto o dedo está encostado e nem sempre dispara (no iOS ele exige que a página tenha ouvinte de toque), então quem garante o retorno visual é a classe .tocado, posta pelo pointerdown no dados.js. Ela SAI SOZINHA (24/08/2026): dura enquanto o dedo está no círculo e mais um instante depois de levantar — o bastante pra a página do catálogo abrir, sem o círculo apagar antes e parecer que o toque não pegou. Ficava até a troca de página, e isso recriava o :hover grudado: a fileira ROLA de lado, e o arrasto que começava em cima de um círculo o deixava verde pra sempre. Quem controla o tempo é o dados.js (pointermove/cancel/up); a volta pelo botão "voltar" limpa a classe no pageshow. Verde igual ao do mouse por cima: fundo do círculo e nome. Sem o translateY do hover — no toque o pulinho lê como a página se mexendo sozinha. */ @media (hover:none){ .cat-circulo:active .cat-circulo-img, .cat-circulo.tocado .cat-circulo-img{background:var(--accent-dim);} .cat-circulo.tocado .cat-circulo-nome{color:var(--accent);} } /* indicador de rolagem — uma bolinha por tela cheia da fileira, não por categoria. Quem manda aqui é o montaDots() (dados.js): ele põe a classe `tem-dots` só quando a fileira realmente tem mais de uma tela. Antes isso era um @media (max-width:600px), e ficava errado no meio do caminho: as cinco categorias somam 1008px, então a fileira já rola abaixo de ~1055px de tela. Entre 601px e 1055px o 5º círculo aparecia cortado, sem pontinho e sem barra de rolagem (escondida logo acima), e a fileira parecia quebrada em vez de rolável. */ .cat-dots{display:none;justify-content:center;align-items:center;gap:6px;margin-top:14px;} .cat-dots.tem-dots{display:flex;} /* a cor troca na hora, só a largura é que anima: com `background` na transição, durante os 200ms o pontinho que sai ainda estava esverdeado e o que entra já estava — os dois verdes, lado a lado e largos ao mesmo tempo, viravam um traço verde só. */ .cat-dot{ width:6px;height:6px;border-radius:999px;background:var(--border-strong);opacity:.3; transition:width .2s, opacity .2s; } .cat-dot.ativo{width:18px;background:var(--accent);opacity:1;} /* Base: tudo escondido. Cada largura reintroduz o que precisa — o desktop como menu suspenso (aqui embaixo) e o celular como sanfona dentro do hambúrguer (no bloco de 920px). O mesmo HTML serve aos dois: um