:root { --color-bg: #0f1b47; --color-section: #16255c; --color-surface: #ffffff; --color-text: #eef1fa; --color-divider: rgba(255, 255, 255, 0.14); --color-accent: #ffc907; --color-accent-300: #ffdc5c; --navy: #14225a; --navy-ink: #0b1436; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* 29/08/2026: fonte monoespaçada só para VALORES (preço, % de desconto, números da faixa de estatísticas) — é o mesmo truque visual que painel financeiro/dashboard usa para números parecerem "lidos de um sistema" em vez de digitados à mão. Não mexe em nenhuma cor da marca, só na tipografia desses números específicos. */ --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; } *, *::before, *::after { box-sizing: border-box; } html { /* SEM ISTO, O TEXTO DO TOPO "COMIA" O ÍCONE DO INSTAGRAM NO IPHONE (relatado por uma cliente, 26/08/2026 — confirmado só no iPhone, Android normal). O Safari do iPhone tem um comportamento próprio, que os outros navegadores não têm: quando acha que um bloco de texto está "estreito demais para ler", ele aumenta a fonte sozinho, na tela, sem avisar e sem mudar o CSS — o `font-size: 12px` que a gente pediu vira maior de verdade no aparelho. Isso empurrava "RADAR DE OFERTAS" (.marca-nome) a crescer e quebrar em 3 linhas dentro do cabeçalho, ficando alto o bastante para passar por cima do ícone do Instagram ao lado. Esta linha desliga esse ajuste automático — o texto passa a respeitar exatamente o tamanho que o CSS pede, em qualquer aparelho. Android/Chrome nunca teve esse comportamento, por isso o defeito só aparecia no iPhone. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; /* Textura sutil no fundo do site inteiro (29/08/2026, pedido do Bruno: "está parecendo um site básico"). É só CSS — nenhuma imagem gerada, nada para regenerar ou ficar desatualizado. Uma grade de pontos bem fraca (5% de opacidade) sobre a cor sólida de sempre, que dá profundidade sem competir com o conteúdo nem pesar a página. */ /* 29/08/2026: além da grade de pontos, uma grade de LINHAS bem mais larga e ainda mais fraca (3,5% de opacidade, 130px de espaçamento) por cima — lembra uma grade de planta baixa/circuito, reforçando o ar "técnico" pedido pelo Bruno. Mesma regra da grade de pontos: só CSS, opacidade baixa o bastante para nunca competir com o conteúdo. */ /* 31/08/2026: as duas grades saíram, a pedido do Bruno (versão que ele mesmo montou e aprovou, "Radar de Ofertas (offline)"). O fundo voltou a ser cor sólida: com o topo e o banner novos, mais cheios, a textura virou ruído em vez de profundidade. */ background: var(--color-bg); color: var(--color-text); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2 { font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; margin: 0; } img { display: block; max-width: 100%; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-300); } ::selection { background: rgba(255, 201, 7, 0.32); } *:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .wrap { max-width: 1340px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* 16/09/2026 — .miolo é o mesmo que .wrap, e existe por causa de uma herança: o rodapé dos rankings, das ferramentas e dos guias foi escrito quando essas páginas usavam a folha da página de preço, onde .miolo é definido. Elas passaram a usar ESTA folha e a regra ficou para trás — o rodapé perdia a margem e o texto encostava na borda esquerda da tela. Bruno viu e avisou em 16/09. Mesmos números do .wrap de propósito: o rodapé tem que terminar na mesma linha vertical em que o conteúdo acima dele começa. */ .miolo { max-width: 1340px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* O "Voltar Início" do cabeçalho das páginas internas. O HTML dele é montado aqui (cabecalho_preco), mas o desenho morava só na folha da página de preço — nas páginas de ranking, ferramenta e guia o botão saía como texto solto. Amarelo e em pílula porque precisa ser lido como SAÍDA, não como mais um item do menu. */ .bt-topo-voltar { flex-shrink: 0; white-space: nowrap; background: var(--color-accent); color: #14225a; font-size: 13px; font-weight: 700; letter-spacing: .01em; padding: 9px 16px; border-radius: 999px; } .bt-topo-voltar:hover { background: #ffd53d; color: #14225a; } /* ---------------- topo fixo ---------------- */ .topo { position: sticky; top: 0; z-index: 30; background: rgba(15, 27, 71, 0.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-divider); } /* 29/08/2026: linha fina e brilhante sob o cabeçalho, tipo "trilha de circuito" — reforça o ar tecnológico sem mudar nenhuma cor da marca (é o próprio amarelo, só que como um traço de luz em vez de bloco). position: sticky em .topo já cria contexto de posicionamento para este ::after, não precisa de position: relative extra. */ .topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 201, 7, 0.6), transparent); pointer-events: none; } /* Medido de verdade (26/08/2026, Playwright, larguras de 320 a 430px): a marca + os 3 ícones + os 2 botões não cabem numa linha em NENHUM celular — falta entre 65px e 122px, mesmo na régua mais apertada que já existe (a de 380px, logo abaixo). No Chrome/Android isso passa despercebido (o excesso só fica fora da tela, sem gerar bagunça visual). No Safari do iPhone, some combinação com o auto-ajuste de fonte (ver o comentário grande em "html", no topo deste CSS) transformava esse mesmo aperto em ícone por cima de texto. Esta linha (overflow-x/scrollbar-width, igual ao que a faixa de lojas já faz em .lojas-inner) é a rede de segurança: se algum dia o conteúdo não couber de novo — nova rede social, texto maior — a barra rola de lado, sem nunca sobrepor nada. */ .topo-inner { display: flex; align-items: center; gap: 16.8px; padding-top: 9px; padding-bottom: 9px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .topo-inner::-webkit-scrollbar { display: none; } .marca { display: flex; align-items: center; gap: 11.2px; margin-right: auto; color: inherit; flex-shrink: 0; } .marca:hover { color: inherit; } .marca img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; /* 29/08/2026: halo sutil atrás da logo do cabeçalho — mesmo espírito do brilho da logo no banner principal, só que como box-shadow (mais simples de acertar num ícone pequeno e redondo do que um ::before posicionado). */ box-shadow: 0 0 0 2px rgba(255, 201, 7, 0.25), 0 0 14px rgba(255, 201, 7, 0.4); } .marca-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } /* white-space: nowrap é a 2ª rede, além do text-size-adjust lá em cima (ver o comentário grande em "html"): mesmo que algum aparelho ainda force um texto maior, ele não pode quebrar em 3 linhas e crescer em altura por cima do ícone do Instagram — no máximo estica para o lado. */ .marca-nome { font-weight: 700; font-size: 15px; letter-spacing: 0.12em; white-space: nowrap; } .marca-tag { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); white-space: nowrap; } /* flex-shrink: 0 nos ícones e nos botões do topo: com a barra podendo rolar de lado agora (.topo-inner, ver o comentário lá em cima), cada um precisa manter o tamanho de verdade — se algum encolhesse em vez de rolar, o ícone ficaria pequeno demais para tocar. */ /* 31/08/2026: os três @ escritos por extenso ocupavam quase metade da barra e eram a causa do aperto do cabeçalho. Agora são ícones de 36px (alvo de toque de verdade) e o @ vive no title/aria-label — mesma informação, um quarto do espaço. */ .insta, .canal { width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; flex-shrink: 0; color: rgba(238, 241, 250, 0.7); border: 1px solid var(--color-divider); } .insta span, .canal span { display: none; } .insta:hover, .canal:hover { color: var(--color-accent); border-color: rgba(255, 201, 7, 0.5); background: rgba(255, 201, 7, 0.08); } /* ---------------- navegação do topo (31/08/2026) ---------------- Quatro links idênticos: OFERTAS > GERADOR DE POSTAGEM > ARTIGOS > CATEGORIAS. Nenhum deles é botão amarelo — os dois produtos do site (ofertas e gerador) têm o mesmo peso, e nada é cortado quando falta espaço: a barra e a própria navegação quebram em linha nova em vez de esconder um item. */ .topo-inner { flex-wrap: wrap; row-gap: 8px; } .marca { margin-right: 12px; } .nav-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; margin-right: auto; min-width: 0; } .nav-topo a { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(238, 241, 250, 0.86); padding: 8px 12px; border-radius: 8px; white-space: nowrap; } /* 19/09/2026, pedido do Bruno: TODO texto clicável fica amarelo ao passar o mouse — no menu do topo e dentro do painel. Antes o item do menu só clareava (branco sobre um fundinho translúcido), o que num tema escuro quase não se percebe: quem chega com o mouse não tinha certeza de que aquilo era clicável. O amarelo é a cor de ação do site inteiro (botões, preços, selos) — usá-la aqui é dizer a mesma coisa com a mesma palavra. */ .nav-topo a:hover { background: rgba(255, 255, 255, 0.06); color: var(--color-accent); } /* ---------------- painel do menu (19/09/2026, pedido do Bruno) ------------ Ao passar o mouse num item do topo desce uma faixa larga com um resumo à esquerda e os atalhos daquela seção à direita, cada um com uma linha explicando o que é. Modelo: o site rgfanalytics.com, que o Bruno trouxe de exemplo. POR QUE ISSO VALE A PENA, E NÃO É SÓ ENFEITE: os quatro rankings, os quatro guias e as duas ferramentas eram páginas que só quem já conhecia o site encontrava — estavam a dois cliques, atrás de uma página-índice. Agora estão a um, escritos no HTML, o que também significa que o rastreador do Google os vê em TODA página do site, e não só no rodapé da home. TRÊS DECISÕES QUE NÃO SÃO ÓBVIAS: 1) SÓ COM MOUSE, E SÓ DE 900px PARA CIMA. No celular não existe "passar o mouse": o primeiro toque abriria o painel em vez de levar para a página, e a pessoa que só queria ir para /rankings/ ficaria presa num painel que não pediu. Abaixo de 900px o menu continua exatamente como era — link direto. 2) .topo-inner VOLTA A SER "overflow: visible" NESSA FAIXA. O overflow-x:auto de lá em cima é a rede de segurança do celular (ver o comentário grande em .topo-inner). Rede de segurança também RECORTA o que sai da caixa — e o painel sai por baixo. Como de 900px para cima a barra cabe numa linha e a rede nunca é acionada, desligá-la exatamente onde o painel existe não custa nada. 3) A PONTE INVISÍVEL (.mega::before). Entre a base do link e a base do cabeçalho existem 9px do padding da barra. Sem nada ali, o mouse indo do link para o painel passa por esse vão, sai do item e o painel fecha na cara da pessoa. O ::before é uma tira transparente que cobre o vão; como ela pertence ao painel, que é filho do item, o :hover não se perde no caminho. */ .nav-item { position: static; display: inline-flex; } .mega { display: none; } @media (hover: hover) and (min-width: 900px) { /* a rede de segurança do celular recortaria o painel — ver nota 2 */ .topo-inner { overflow: visible; } .mega { position: absolute; left: 0; right: 0; top: 100%; /* OPACO de propósito, e não rgba com transparência: o painel cobre o conteúdo da página, e 1,5% de translucidez já era suficiente para o título da página aparecer fantasma atrás do texto do painel (medido em 1440px). */ background: #0c1740; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38); z-index: 5; } .mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; } .nav-item:hover > .mega, .nav-item:focus-within > .mega { display: block; } .mega-inner { display: grid; grid-template-columns: 300px 1fr; gap: 34px; padding-top: 26px; padding-bottom: 28px; align-items: start; } /* o fio que separa o resumo dos atalhos, igual ao do exemplo */ .mega-itens { border-left: 1px solid var(--color-divider); padding-left: 34px; } .mega-resumo h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-text); } .mega-resumo p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: rgba(238, 241, 250, 0.68); } /* Os links de dentro do painel NÃO são os links do menu: aqui eles são frases, não etiquetas. Por isso cada regra de .nav-topo a (caixa alta, espaçamento entre letras, nowrap) precisa ser desfeita — senão "Como escrever a legenda que faz clicar" sai em maiúsculas e numa linha só, atravessando a tela. */ .nav-topo .mega a { display: block; padding: 0; border-radius: 0; font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: normal; line-height: 1.45; color: rgba(238, 241, 250, 0.92); background: none; } .nav-topo .mega a:hover { background: none; color: var(--color-accent); } .nav-topo .mega .mega-ver { font-size: 13px; font-weight: 700; color: var(--color-accent); } .nav-topo .mega .mega-ver:hover { text-decoration: underline; } .mega-itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 34px; } .nav-topo .mega .mega-item { padding: 2px 0; } .nav-topo .mega .mega-item b { display: block; font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 3px; } .nav-topo .mega .mega-item span { display: block; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: rgba(238, 241, 250, 0.62); } .nav-topo .mega .mega-item:hover b { color: var(--color-accent); } /* a frase acompanha, mas num amarelo mais fraco: se as duas linhas acendessem igual, o título deixaria de ser o título. */ .nav-topo .mega .mega-item:hover span { color: rgba(255, 201, 7, 0.72); } /* A lista de categorias é o único painel com dez destinos. Frase embaixo de cada um viraria um paredão — aqui o nome já diz tudo. */ .mega-cats { grid-column: 1 / -1; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--color-divider); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 28px; } .mega-cats-tit { grid-column: 1 / -1; margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(238, 241, 250, 0.45); } .nav-topo .mega .mega-cats a { font-size: 13px; font-weight: 500; } .nav-topo .mega .mega-cats a:hover { color: var(--color-accent); } } /* Entre 900px e 1180px o painel ainda aparece, mas a coluna de resumo de 300px espremeria os atalhos em duas colunas de 170px — nome do guia quebrando em quatro linhas. Abaixo de 1180px o resumo sai de cima e os atalhos ficam com a largura toda. */ @media (hover: hover) and (min-width: 900px) and (max-width: 1179px) { .mega-inner { grid-template-columns: 1fr; gap: 20px; } .mega-itens { border-left: 0; padding-left: 0; } } /* ---------------- barra do topo compacta (15/09/2026, pedido do Bruno) ---- O MOTIVO, MEDIDO: com o menu em seis itens (Ofertas, Rankings, Gerador de postagem, Ferramentas, Guias, Artigos) MAIS o crachá de quem está conectado e o botão Sair, a barra passou da largura da tela num monitor de 1219px e o ícone do Telegram caiu sozinho para uma segunda linha — um ícone órfão embaixo de tudo, que foi como o Bruno viu. Medida: marca 248px + menu 731px = 979px, e ainda faltavam o crachá, o Sair e os três ícones. A saída óbvia seria encurtar "Gerador de postagem" para "Gerador". Não foi feita de propósito: o nome completo é o que explica o que a ferramenta faz para quem chega pela primeira vez, e vale mais que os 95px que ele custa. Em vez disso, cada peça cedeu um pouco de folga — nenhuma delas perde legibilidade sozinha, e somadas devolvem mais de 100px, que é o dobro do necessário. Só vale do tablet para cima: abaixo de 640px o celular tem as regras dele, mais abaixo, e lá o menu quebra em linha própria de propósito. */ @media (min-width: 641px) { .topo-inner { gap: 10px; } .nav-topo { gap: 2px 3px; } .nav-topo a { padding: 8px 8px; letter-spacing: 0.05em; } .insta, .canal { width: 32px; height: 32px; } .btn-topo { padding: 9px 14px; } /* 168px é o ponto medido em que "brmbruno261" — o apelido do e-mail do Bruno, e um dos mais compridos que aparecem — cabe inteiro, sem as reticências. Abaixo disso o nome some no meio e o crachá deixa de responder a pergunta que ele existe para responder. */ .cracha-conta { padding: 7px 12px; max-width: 168px; } } /* E QUANDO MESMO ASSIM NÃO COUBER (15/09/2026) ------------------------------------------- Há uma faixa de larguras — notebook comum, janela não maximizada — em que nem a barra compacta cabe numa linha só: seis itens de menu, o crachá, o Sair e três ícones pedem mais espaço do que existe. Sem regra nenhuma, o navegador resolve do pior jeito possível: empurra O ÚLTIMO ÍCONE sozinho para a linha de baixo, órfão, que foi exatamente o que apareceu na tela do Bruno. Aqui o menu inteiro desce junto, de uma vez. Duas linhas inteiras e alinhadas em vez de uma linha e meia com um ícone perdido — é a mesma solução que o celular já usava, aplicada onde ela também é necessária. */ /* 19/09/2026 — O LIMITE DESCEU DE 1279px PARA 1109px. Com a saída do "Gerador de postagem" do menu, a fileira de links encolheu de 644px para 447px. Medido no navegador, desligando esta regra e procurando a largura em que o cabeçalho volta a caber numa linha só: com o Gerador: 1307px sem o Gerador: 1110px Daí o 1109. Manter o corte em 1279px deixaria o menu descer para a segunda linha em quase 200px de larguras onde ele agora cabe folgado. E o número tem de ser 1109, não um valor redondo mais baixo: abaixo de 1110 o conteúdo REALMENTE não cabe, e sem esta regra quem quebra é o navegador — do pior jeito, empurrando só o último ícone para a linha de baixo (é o problema que esta regra existe para evitar; ver o comentário acima). */ @media (min-width: 641px) and (max-width: 1109px) { .nav-topo { order: 10; width: 100%; margin-right: 0; justify-content: flex-start; } .marca { margin-right: auto; } } /* Aqui moravam .hero-cards e .hero-card* — os quatro cards do banner. Saíram em 19/09/2026 (pedido do Bruno) junto com o HTML: os quatro destinos passaram para o painel do menu do topo. O banner voltou a ser título + frase + botão, que usam .hero h1, .hero p e .hero-acoes, logo abaixo. Ver o comentário no lugar onde os cards eram montados, em construir_site. */ .btn-topo { font-size: 13px; font-weight: 700; background: var(--color-accent); color: var(--navy-ink); border-radius: 999px; padding: 9px 18px; /* Sem isto, em tela estreita o texto do botão quebra em duas linhas e fica mais alto do que deveria. */ white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .btn-topo:hover { background: var(--color-accent-300); color: var(--navy-ink); } /* ENTRAR / CRIAR CONTA no topo da home ------------------------------------- Os dois são o MESMO botão: .btn-topo, amarelo sólido, igual ao "Artigos" das páginas de categoria. A largura de cada um é a da palavra dele — "Entrar" fica mais estreito que "Criar conta", e é assim que se espera de botão na web. O QUE EXISTIA AQUI, E POR QUE SAIU (04/09/2026) Entre 03 e 04/09 o "Entrar" era vazado: fundo transparente com contorno amarelo. A ideia era dar hierarquia — deixar o "Criar conta" como o principal, já que quem tem conta acha o "Entrar" de olhos fechados. O Bruno olhou e pediu os dois iguais. Pedido atendido: a regra saiu. Medido antes de mexer, para não trocar o que não precisava: os dois já tinham a mesma altura (29,8px), o mesmo padding (6px 11px), a mesma fonte (11,5px/700) e o mesmo raio (999px). Só o preenchimento diferia. A classe .btn-entrar continua no HTML, sem estilo nenhum: é um gancho parado. Se um dia a hierarquia fizer falta, volta com quatro linhas aqui, sem tocar no HTML. */ /* QUEM ESTÁ CONECTADO, NO LUGAR DOS DOIS BOTÕES (14/09/2026) ---------------------------------------------------------- Entrou quem já tem conta? O JavaScript troca o conteúdo de .area-conta por dois pedaços: o crachá com o e-mail e o botão "Sair". O CRACHÁ NÃO É BOTÃO, E ISSO É DE PROPÓSITO. Ele é a resposta a "eu estou conectado?", e não leva a lugar nenhum — não existe hoje uma tela de "minha conta" para onde mandar a pessoa. Botão que não faz nada ao ser clicado é pior do que texto: a pessoa clica, não acontece nada, e acha que o site travou. Por isso ele é vazado (contorno, fundo transparente) e o "Sair", que é a única ação de verdade, fica sólido como os outros. O e-mail é cortado no @ e limitado a 16 letras pelo JavaScript: "Entrar" media 68px, e um e-mail inteiro no lugar dele empurraria os ícones das redes para fora da barra no celular. O e-mail completo continua acessível, no "title" — passando o mouse por cima. */ .area-conta { display: contents; } .cracha-conta { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--color-accent); border: 1px solid rgba(255, 201, 7, 0.55); border-radius: 999px; padding: 8px 15px; white-space: nowrap; flex-shrink: 1; min-width: 0; } .cracha-conta svg { width: 15px; height: 15px; flex: 0 0 auto; } .cracha-conta span { overflow: hidden; text-overflow: ellipsis; } /* ---------------- apresentação ---------------- */ /* 29/08/2026: dois brilhos (amarelo no canto de cima, azul mais claro embaixo à esquerda) em vez de um só, para dar mais profundidade ao banner — e uma faixa diagonal (.hero::after) que corta a transição reta de sempre entre o hero e a seção logo abaixo, criando um efeito de "banner" real em vez de dois blocos empilhados. overflow: hidden e position: relative são só para essa faixa não vazar da seção nem ficar por cima do conteúdo de outra parte da página. */ /* 02/09/2026 — O BANNER DE RADAR A imagem de fundo (ASSETS/hero_bg.jpg -> OUTPUT/imagens/hero-bg.jpg) deixou de ser um "brilho" sobreposto e passou a ser O FUNDO do banner. Por isso ela saiu do .hero::before (que usava mix-blend-mode: screen, próprio para luz) e veio para cá: uma foto tratada com screen clareia e lava, perde o preto do radar. Aqui ela entra como imagem mesmo, e o ::before virou o VÉU escuro que garante a leitura do texto por cima. Alinhada à direita porque o radar da imagem mora nos 45% da direita — os 55% da esquerda são fundo escuro liso, medidos, e é lá que o texto fica. */ .hero { position: relative; overflow: hidden; background: var(--navy-ink) url('imagens/hero-bg.jpg') center right / cover no-repeat; } .hero-inner { position: relative; z-index: 1; /* 31/08/2026: duas colunas IGUAIS, uma para cada produto do site (ofertas e gerador). "auto-fit" faz a segunda descer sozinha no celular. O padding-right abre o espaço onde a logo, agora pequena e encostada no canto, fica flutuando — sem roubar uma coluna inteira do grid como fazia antes. */ /* 02/09/2026 — TRÊS COLUNAS, com a LOGO no meio (pedido do Bruno). Antes eram duas colunas e a logo flutuava solta no canto direito, onde ela se misturava com o amarelo do radar. Agora ela é a coluna do meio e SEPARA os dois produtos do site: ofertas do dia | LOGO | gerador de postagem "1fr auto 1fr" dá largura igual aos dois blocos e deixa a logo ocupar só o que ela precisa. O padding-right saiu junto: não existe mais canto reservado para a logo. */ /* 16/09/2026 — DEIXOU DE SER GRADE. Enquanto o banner tinha dois blocos e a logo no meio, esta linha valia ("1fr auto 1fr"). Com os quatro cards iguais, quem divide as colunas é o ".hero-cards"; manter a grade aqui espremia os quatro dentro de uma coluna só — medido: 143px de largura por card num monitor de 1440px. */ /* 19/09/2026: com os quatro cards fora, o miolo do banner virou três linhas de texto e um botão. A folga de 40/36 foi calibrada para uma caixa de 230px de altura; mantida, o banner ficaria mais folga do que conteúdo. */ padding-top: 24px; padding-bottom: 22px; } /* ---- A LOGO NO MEIO DO BANNER (19/09/2026, pedido do Bruno) ---------- texto | LOGO | vazio, que é o desenho de antes de 16/09. A terceira coluna não tem conteúdo: ela existe para a arte do radar aparecer inteira, com a varredura girando por cima. POR QUE ISTO VIVE NUM @media (min-width: 901px), E NÃO SOLTO: abaixo de 901px o banner volta a ser uma coluna só e a logo some — ela já está no cabeçalho fixo, a 40px dali, e no celular repetir a mesma imagem duas vezes na mesma tela custa altura sem informar nada. Escrito como "min-width", e não "max-width", de propósito: assim os valores largos (22ch, 44ch) ficam presos ao computador e não brigam com a régua de 640px lá embaixo, que já manda no título do celular. MEDIDO: banner de 255px no computador, 222px no celular — contra 290px e 582px dos quatro cards que saíram. */ .hero-logo { display: none; } @media (min-width: 901px) { .hero-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; } /* mais estreitos porque agora dividem a linha com a logo e com a arte */ .hero h1 { max-width: 22ch; } .hero p { max-width: 44ch; } .hero-logo { display: block; width: 150px; height: 150px; border-radius: 50%; object-fit: cover; /* o mesmo halo da logo do cabeçalho, em escala maior: é o que separa a foto redonda do azul do fundo e das linhas amarelas do radar */ box-shadow: 0 0 0 4px rgba(255, 201, 7, 0.30), 0 0 38px rgba(255, 201, 7, 0.55); } } .hero::before { /* 02/09/2026: virou o VÉU. A imagem foi para o .hero (ver acima) e este gradiente escurece da esquerda para a direita — forte onde o texto das ofertas fica, quase nada em cima do radar. É o que segura o contraste sem apagar a arte. A direita leva um véu leve de volta (0.42) porque o bloco do gerador fica POR CIMA do radar, a pedido do Bruno. */ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(100deg, rgba(11, 20, 54, 0.88) 0%, rgba(11, 20, 54, 0.60) 38%, rgba(11, 20, 54, 0.32) 62%, rgba(11, 20, 54, 0.42) 100%); } /* 04/09/2026 — A VARREDURA QUE GIRA ================================== Pedido do Bruno: "incluir um efeito nesse radar, para ficar a todo tempo movimentando". É uma luz que dá uma volta a cada 5 segundos em cima do radar da foto de fundo. POR QUE EXISTE O ".hero-radar" NO MEIO, E NÃO SÓ O CÍRCULO ---------------------------------------------------------- O centro do radar não é um ponto fixo da tela: ele mora DENTRO da foto (imagens/hero-bg.jpg), e a foto é desenhada com "cover", ou seja, ela estica junto com a janela. Um círculo posicionado em pixels (foi a primeira tentativa, copiada de uma sugestão pronta) acerta o alvo num monitor e erra em todos os outros. O ".hero-radar" resolve isso sendo uma CAIXA COM A MESMA FORMA DA FOTO (aspect-ratio: 1600/560, a medida real do arquivo), com 100% da largura e centrada na vertical — que é exatamente a caixa que o "cover" desenha quando é a largura que manda. Dentro dela, porcentagem vira coordenada da imagem, e os três números abaixo saem de medir o arquivo: centro do radar x = 1186 / 1600 = 74.125% y = 319 / 560 = 56.96% raio do anel externo ~216 px -> diâmetro 27% da largura POR QUE SÓ A PARTIR DE 1024px ------------------------------ Acima disso quem manda no "cover" é a largura, e a caixa acima bate com a foto. Abaixo, o banner cresce (as colunas empilham) e quem passa a mandar é a ALTURA — a foto deixa de ocupar a largura toda e a conta muda. Medido: 1200px -> banner 1200x316 -> largura manda (alinha) 1100px -> banner 1100x316 -> largura manda (alinha) 1000px -> banner 1000x355 -> ALTURA manda (desalinharia) 420px -> banner 420x563 -> ALTURA manda (desalinharia) No celular a varredura simplesmente não existe. É melhor não ter efeito do que ter um efeito girando fora do lugar — e ainda economiza bateria. POR QUE "mix-blend-mode: screen" E NÃO UM TRIÂNGULO OPACO --------------------------------------------------------- Pintado por cima, o feixe vira uma cunha chapada que tampa os anéis e briga com o texto do bloco do gerador, que fica em cima do radar. Com "screen" ele só CLAREIA o que já está embaixo: os anéis acendem quando a luz passa e apagam quando ela sai, que é o que um radar de verdade faz. O texto não é afetado porque mora no ".hero-inner", que tem z-index 1 — esta camada fica no 0, junto com o véu. O FEIXE PARADO DA FOTO CONTINUA LÁ, E É DE PROPÓSITO ----------------------------------------------------- A imagem já vem com um feixe aceso (medido: brilho concentrado entre 40° e 160°). Apagá-lo significaria repintar um terço do disco — anéis, grade e brilho — e qualquer emenda apareceria num banner desse tamanho. Com a luz suave girando por cima, ele lê como parte do desenho, e não como uma segunda agulha. Se um dia incomodar, o caminho é trocar a foto por uma sem feixe, não remendar esta. */ /* 12/09/2026 — A CAIXA AGORA SEGUE A FOTO EM QUALQUER LARGURA Antes esta caixa era 'width:100%; aspect-ratio:1600/560', o que so bate com a foto quando quem manda no 'cover' e a LARGURA (telas >= 1024px). Em tela estreita a foto passa a ser cortada pela ALTURA, a caixa saia do lugar, e por isso a varredura ficava DESLIGADA abaixo de 1024px (media query, agora removida). 'min-width:100% + min-height:100% + aspect-ratio' faz a caixa ter o MESMO tamanho que o 'cover' desenha (o maior dos dois lados), e 'right:0' a encosta a direita, como o 'center right' da foto. Com isso o ponto (72%,55%) da caixa cai no centro do radar da foto SEMPRE — medido: erro de 0px em 620, 900 e 1280px. Para voltar ao comportamento antigo, devolva 'left:0; width:100%' e o gate de 1024. */ .hero-radar { position: absolute; right: 0; top: 50%; transform: translateY(-50%); aspect-ratio: 1600 / 560; min-width: 100%; min-height: 100%; z-index: 0; pointer-events: none; display: block; } /* 12/09/2026 — CENTRO REMEDIDO (segunda vez no mesmo dia; ver o histórico, que importa para ninguém repetir o erro) ------------------------------------------------------------------------- Valor original: 74.125% / 56.96%. Primeira "correção" de hoje: 72% / 55% — ERRADA. Foi obtida por um detector automático de simetria (perfil radial por mediana angular) que se deixou enganar pelo feixe aceso da própria foto e pelas linhas da grade, e devolveu um centro deslocado para CIMA e para a ESQUERDA. Foi isso que o Bruno viu e descreveu como "a ponta da luz está um pouco à esquerda". Valor atual: medido por AJUSTE DE ELIPSE aos anéis (cv2.fitEllipse sobre o contorno de cada anel aceso da hero_bg.jpg, 1600x560) e conferido a olho, com cruz sobreposta num recorte ampliado 4x. O anel mais interno — o mais circular, e por isso o mais confiável — tem centro em x = 1163/1600 = 72.7%, y = 318/560 = 56.8%. COMO REFAZER A MEDIDA, se um dia a arte mudar: recorte a região do miolo, amplie umas 4 vezes, desenhe uma cruz no valor candidato e OLHE. Detector automático nenhum substitui essa conferência — foi exatamente o passo que faltou de manhã. O raio (27%) e o resto não mudaram. */ .hero-varredura { position: absolute; left: 72.7%; top: 56.8%; width: 27%; aspect-ratio: 1; margin: -13.5% 0 0 -13.5%; border-radius: 50%; mix-blend-mode: screen; /* A cauda vai de transparente a aceso ao longo de ~170 graus: é o rastro que fica para trás da luz. O pulo final para transparente em 360deg fecha a volta sem emenda visível. */ background: conic-gradient(from 0deg, rgba(255, 201, 7, 0) 0deg, rgba(255, 201, 7, 0) 190deg, rgba(255, 201, 7, 0.06) 280deg, rgba(255, 201, 7, 0.16) 340deg, rgba(255, 220, 92, 0.34) 358deg, rgba(255, 201, 7, 0) 360deg); animation: hero-varredura 5s linear infinite; will-change: transform; } @keyframes hero-varredura { to { transform: rotate(360deg); } } /* gate de 1024 REMOVIDO em 12/09/2026: a caixa agora acompanha a foto em qualquer largura (ver .hero-radar acima), entao a varredura aparece tambem em tela estreita, centrada no radar. */ /* Mesma cortesia do .hero-pulso: quem pediu menos movimento no sistema não vê a varredura girar. */ @media (prefers-reduced-motion: reduce) { .hero-radar { display: none; } } /* 01/09/2026 — a faixa inclinada no pé do banner foi REMOVIDA a pedido do Bruno. Era um triângulo (clip-path) pintado com a cor da seção de baixo, criando aquela "rampa" de tom diferente entre o banner e o resto da página. A transição agora é reta: o banner termina e a faixa de números começa, sem degrau de cor. O ".hero::before" logo acima (foto de fundo + brilhos) continua — ele é outra coisa, e não fazia parte do pedido. */ /* 02/09/2026: o selo virou "sinal ao vivo" — fonte monoespaçada (mesma dos números) e um ponto amarelo pulsando, como alvo detectado num radar. */ .hero-selo { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-accent-300); font-family: var(--font-mono); display: flex; align-items: center; gap: 8px; } .hero-pulso { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--color-accent); box-shadow: 0 0 0 0 rgba(255, 201, 7, 0.7); animation: hero-pulso 2s infinite; } @keyframes hero-pulso { 70% { box-shadow: 0 0 0 10px rgba(255, 201, 7, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 201, 7, 0); } } /* Quem prefere menos movimento na tela não vê a animação. */ @media (prefers-reduced-motion: reduce) { .hero-pulso { animation: none; } } .hero-traco { display: flex; align-items: center; gap: 8.4px; margin-bottom: 16.8px; } .hero-traco span { width: 24px; height: 3px; background: var(--color-accent); border-radius: 2px; display: block; } /* 19/09/2026 — MEDIDO, depois que os quatro cards saíram. Os valores antigos (h1 36px/18ch, p 48ch) vinham do banner de antes de 16/09, que dividia a tela com a logo e por isso tinha uma coluna estreita. Com o texto ocupando a largura toda, 18ch quebrava o título em TRÊS linhas e o banner ficava 342px de altura — mais alto que os quatro cards que ele substituiu (290px), o contrário do pedido. Medido em 1440px, 1100px e 390px, variando fonte e largura: 36px/18ch + 48ch -> banner 342px (pior que os cards) 32px/26ch + 62ch -> banner 244px 30px/34ch + 76ch -> banner 234px <- este No celular estes números não valem: a regra de 640px logo abaixo já manda (24px, max-width:none) e lá o banner cai de 582px para 228px. */ .hero h1 { font-size: 30px; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 7px; max-width: 34ch; } .hero p { font-size: 14px; line-height: 1.5; max-width: 76ch; color: rgba(238, 241, 250, 0.74); margin: 0 0 11px; } .hero-acoes { display: flex; flex-wrap: wrap; gap: 22.4px; align-items: center; } .btn-hero { font-size: 14px; font-weight: 700; background: var(--color-accent); color: var(--navy-ink); border-radius: 999px; padding: 12px 24px; box-shadow: 0 0 0 rgba(255, 201, 7, 0); transition: box-shadow .18s ease, background .18s ease; } .btn-hero:hover { background: var(--color-accent-300); color: var(--navy-ink); box-shadow: 0 0 18px rgba(255, 201, 7, 0.45); } .btn-hero-2 { background: transparent; color: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-accent); } .btn-hero-2:hover { background: rgba(255, 201, 7, .12); color: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-accent); } /* 02/09/2026 — A LOGO NO MEIO, E POR QUE ELA PRECISOU DE FUNDO PRÓPRIO Ela voltou para dentro do grid (coluna do meio), separando os dois blocos. O problema imediato foi o que o Bruno viu na prévia: logo dourada em cima de radar dourado vira uma mancha só. São TRÊS camadas resolvendo, e cada uma faz uma coisa diferente: ::before mancha escura que APAGA o radar exatamente atrás da logo ::after linha vertical fininha, que diz "isto aqui divide os lados" img anel navy grosso + anel amarelo fino + sombra funda Tirar qualquer uma delas traz o problema de volta. */ /* ---------------- faixa de números (REMOVIDA em 17/09/2026) ------- Aqui moravam .numeros, .numeros-inner (com os cantinhos de HUD nas pontas) e .numero. A faixa saiu da home a pedido do Bruno — as regras foram junto, porque CSS de coisa que não existe mais só engorda o arquivo e confunde quem for mexer depois. O histórico está no git e neste comentário. */ /* Aqui moravam .faixa-rank, .faixa-rank-inner, .diz e .pilulas — a linha "A gente mede o preço destes produtos todo dia" com as quatro pílulas dos rankings. A faixa saiu da home em 19/09/2026 (pedido do Bruno): os quatro rankings passaram para o painel do menu do topo, onde aparecem em toda página do site e com uma frase explicando cada um. Ver o comentário no lugar onde a
ficava, em construir_site. */ /* A faixa amarela do canal do Telegram (.canal-cta), que ficava aqui entre os números e a lista de ofertas, foi removida (26/08/2026, pedido do Bruno) — o convite para o canal já aparece no ícone do cabeçalho fixo (.canal, ver mais abaixo), e duas chamadas para o mesmo canal na mesma tela era repetitivo. As classes .canal-cta* saíram do CSS junto com a
no HTML (ver construir_site) — se um dia quiser trazer a faixa de volta, o texto e o ícone (ICONE_TELEGRAM) continuam definidos mais abaixo, só a faixa em si que foi tirada. */ /* ---------------- lista de ofertas ---------------- */ .ofertas { padding-top: 44px; } .lista-cab { display: flex; align-items: center; gap: 11.2px; margin-bottom: 8.4px; } .lista-cab h2 { font-size: 25px; margin: 0; } .lista-cab .linha { height: 1px; flex: 1; background: var(--color-divider); } .lista-cab .contagem { font-size: 12.5px; color: rgba(238, 241, 250, 0.5); white-space: nowrap; } /* A barra gruda logo abaixo do topo fixo. A altura do topo muda conforme o tamanho da tela, então ela é medida por JavaScript e guardada em --h-topo — assim a barra gruda no lugar certo no celular também. */ .barra { /* gruda ABAIXO do cabeçalho e da faixa das lojas — as duas alturas são medidas por JavaScript, porque mudam entre celular e computador e --h-lojas vale zero quando o site tem uma loja só */ position: sticky; top: calc(var(--h-topo, 59px) + var(--h-lojas, 0px)); z-index: 20; background: rgba(15, 27, 71, 0.96); backdrop-filter: blur(12px); padding: 11.2px 0 14px; display: flex; flex-wrap: wrap; gap: 11.2px; align-items: center; } .barra-rotulo { font-size: 12px; color: rgba(238, 241, 250, 0.55); white-space: nowrap; } .campo { background: #ffffff; color: var(--navy-ink); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; min-height: 40px; font-family: var(--font); font-size: 14px; padding: 0 14px; } .campo::placeholder { color: rgba(20, 34, 90, 0.45); } select.campo { width: auto; min-width: 152px; cursor: pointer; } select.campo option { background: #ffffff; color: var(--navy-ink); } .busca-caixa { position: relative; flex: 1 1 240px; min-width: 200px; } .busca-caixa .lupa { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); display: flex; color: rgba(20, 34, 90, 0.5); z-index: 1; } .busca-caixa input { width: 100%; padding-left: 33.6px; } .busca-caixa input::-webkit-search-cancel-button { display: none; } /* ---------------- filtros: menu de categorias + atalhos ---------------- No lugar da faixa com dezenas de botões, agora há um menu "Categorias" que abre em dois painéis (grupos à esquerda, categorias à direita) e apenas dois atalhos soltos: Todos e Destaques. */ .linha-cats { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; order: -1; /* aparece acima da busca e da ordenação */ } .menu-wrap { position: relative; } .btn-cats { cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 700; padding: 0 18px; min-height: 40px; border-radius: 999px; border: 1px solid var(--color-accent); background: transparent; color: var(--color-accent); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .btn-cats.aberto { background: var(--color-accent); color: var(--navy-ink); } .btn-cats .seta { font-size: 10px; } .menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; display: block; } .menu[hidden] { display: none; } /* Quem desenha a caixa (fundo, borda, sombra) é o PAINEL, não o .menu. Isso existe para o celular poder transformar o .menu num fundo escurecido cobrindo a tela inteira (a gaveta), sem duplicar toda a aparência visual — no computador o painel ocupa exatamente o lugar que a caixa ocupava antes. ELE VIROU UMA COLUNA (24/08/2026) por causa do filtro de lojas: antes só existiam grupos e categorias lado a lado, então o painel podia SER a linha só. Agora a faixa de lojas entra ACIMA dos dois, então o painel vira uma coluna (cabeçalho, depois lojas, depois o corpo com grupos+categorias) — e o corpo é quem virou a linha, em ".menu-corpo". */ .menu-painel { display: flex; flex-direction: column; background: #1a2456; border: 1px solid var(--color-divider); border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); /* 12/09/2026 — PAINEL MAIS ESTREITO (pedido do Bruno) Era 640px, largura herdada de quando o menu tinha DOIS paineis lado a lado (grupos a esquerda, subcategorias a direita). Desde que o menu virou coluna unica (ver ".menu-subs-wrap" abaixo), metade da caixa era espaco vazio a direita da lista. POR QUE 344 E NAO 320 (o valor que o Bruno marcou no print): medido no site de verdade, abaixo de 344px o chip "Mercado Livre" nao cabe na mesma linha de "Todas as lojas" e "Shopee", e a faixa de lojas do topo do menu passa a ocupar duas linhas. 344px e o menor valor que mantem os tres numa linha so. Se um dia entrar uma quarta loja, este numero precisa subir de novo (ou a faixa vai quebrar). */ overflow: hidden; min-width: 344px; } .menu-corpo { display: flex; align-items: stretch; } /* Cabeçalho com "‹ Voltar" e "×" — só existe para a gaveta do celular. No computador ele fica escondido: lá os dois painéis (grupos e categorias) já aparecem lado a lado, sem precisar de "entrar" em nada. */ .menu-cabecalho { display: none; } /* Filtro de lojas DENTRO do menu de categorias (24/08/2026) — pedido do Bruno para poder marcar "Shopee + AliExpress", por exemplo, sem sair do menu. É a MESMA lista de lojas da faixa grande do topo do site (a .lojas fora daqui): as duas leem e escrevem em estado.lojas, então marcar uma loja aqui atualiza a faixa grande também, e vice-versa. ":empty" esconde a linha inteira quando o site só tem uma loja no ar (o JS não desenha nada aqui nesse caso — ver desenharMenuLojas). */ .menu-lojas { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--color-divider); } .menu-lojas:empty { display: none; padding: 0; border: none; } .menu-loja-chip { cursor: pointer; font-family: var(--font); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-divider); background: rgba(255, 255, 255, 0.04); color: rgba(238, 241, 250, 0.78); } .menu-loja-chip.ativa { background: var(--color-accent); color: var(--navy-ink); border-color: var(--color-accent); font-weight: 700; } @media (hover: hover) { .menu-loja-chip:hover { border-color: var(--color-accent); } } .menu-grupos { display: flex; flex-direction: column; padding: 8px 0; background: rgba(0, 0, 0, 0.22); min-width: 210px; } .menu-grupo { cursor: pointer; font-family: var(--font); text-align: left; font-size: 13px; padding: 9px 16px; border: none; background: transparent; color: rgba(238, 241, 250, 0.85); font-weight: 500; display: flex; align-items: center; gap: 8px; width: 100%; } .menu-grupo .n { opacity: .5; font-size: 11px; } /* 12/09/2026 — SETINHA "›" FORA DA TELA (pedido do Bruno) Ela dizia "clique para entrar nas subcategorias deste grupo". Com o menu em coluna unica, clicar num item ja filtra direto por aquela categoria — nao se "entra" em lugar nenhum, entao a seta so prometia uma tela que nao existe mais. Vale para o computador E para a gaveta do celular. O continua sendo desenhado pelo JS (ver a montagem dos grupos): para trazer a seta de volta, apague este "display: none". */ .menu-grupo .chevron { opacity: .55; font-size: 10px; display: none; } .menu-grupo.ativo { background: var(--color-accent); color: var(--navy-ink); font-weight: 700; } /* 12/09/2026 — MENU EM UMA COLUNA SO (pedido do Bruno) Antes: grupos a esquerda, subcategorias do grupo a direita (dois paineis, 'categorias-mae > subcategorias'). Agora: so a lista das categorias principais, em coluna unica; clicar filtra direto por aquela categoria inteira. O painel da direita saiu, e o clique no grupo deixou de 'entrar' nas subcategorias (ver o JS, elGrupos click). Para voltar ao menu de dois niveis: tire este display:none e devolva o clique de grupo a mostrarSubs. */ .menu-subs-wrap { display: none !important; } .menu-grupos { flex: 1; min-width: 280px; background: transparent; } .menu-subs-wrap.reservado { padding: 16px 24px 20px; flex: 1; min-width: 380px; } .menu-subs { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-left: -11px; /* compensa o recuo dos botões, alinhando com o título */ } .menu-sub { cursor: pointer; font-family: var(--font); font-size: 13px; padding: 6px 11px; border: none; background: none; border-radius: 999px; color: rgba(238, 241, 250, 0.78); font-weight: 500; text-align: left; display: inline-flex; align-items: baseline; gap: 7px; transition: background .12s ease, color .12s ease; } /* 12/09/2026 — QUANTIDADE OCULTA NAS CATEGORIAS (pedido do Bruno) O numero ao lado de cada categoria (e de cada grupo) saiu da tela. NAO foi removido do JS: o 's.n' continua sendo calculado, porque e por ele que o menu ordena as categorias da que tem mais ofertas para a que tem menos (ver desenharFiltros). So a exibicao foi desligada. Para trazer o numero de volta, apague as duas regras 'display: none' abaixo. O contador do atalho 'Todos' (.atalho .n) fica: nao e categoria, e o total do site. */ .menu-sub .n { opacity: .45; font-size: 11px; display: none; } .menu-grupo .n { display: none; } .menu-sub.ativo { background: var(--color-accent); color: var(--navy-ink); font-weight: 700; } .menu-sub.ativo .n { opacity: .6; } /* "Tudo em " não é uma categoria: é o atalho que mostra o grupo inteiro. Mantém o mesmo formato de pílula dos outros itens (senão fica uma barra esticada e torta), e se diferencia pela cor amarela, pelo negrito e por uma linha separadora logo abaixo. */ .menu-sub.tudo { color: var(--color-accent); font-weight: 700; } .menu-sub.tudo .n { opacity: .7; } .menu-sub.tudo.ativo { color: var(--navy-ink); } /* a linha que separa o atalho das categorias do grupo */ .menu-divisor { height: 1px; background: var(--color-divider); align-self: stretch; margin: 4px 11px 6px; } /* --- destaque ao passar o cursor, nas DUAS listas --- Fica dentro de "@media (hover: hover)" de propósito: em telas de toque o navegador simula o hover e o item ficaria amarelo "grudado" depois do toque, como se estivesse selecionado. No celular o destaque vem do :active (enquanto o dedo está pressionando) e da classe .ativo. */ @media (hover: hover) { .menu-grupo:hover { background: var(--color-accent); color: var(--navy-ink); font-weight: 700; } .menu-grupo:hover .n, .menu-grupo:hover .chevron { opacity: .6; } .menu-sub:hover { background: var(--color-accent); color: var(--navy-ink); font-weight: 700; } .menu-sub:hover .n { opacity: .6; } } .menu-grupo:active, .menu-sub:active { background: var(--color-accent); color: var(--navy-ink); font-weight: 700; } /* ---------------- faixa das lojas ---------------- Só aparece quando há mais de uma loja no site. Clicar numa loja filtra as ofertas dela; clicar de novo volta a mostrar todas. POR QUE ELA NÃO ESCONDE OS PRODUTOS Foi cogitado exigir o clique numa loja para as ofertas aparecerem. Não fazemos isso porque quem chega pela primeira vez veria uma tela sem nenhum produto — e tanto o visitante quanto o Google leem isso como página vazia. Aqui a pessoa já vê tudo, e a loja serve como filtro. */ /* A FAIXA GRUDA NO TOPO, LOGO ABAIXO DO CABEÇALHO. Motivo: quem escolhe uma loja e desce a página perde de vista em qual loja está — e não tem como trocar sem voltar ao topo. Grudada, a resposta ("estou vendo o Mercado Livre") fica sempre na tela, e trocar de loja é um toque, em qualquer ponto da rolagem. Vale igual no celular. POR QUE O BOTÃO FICOU DEITADO E PERDEU O TÍTULO Antes era logo em cima, "Ofertas Mercado Livre" embaixo e a contagem embaixo de tudo: três linhas, 86 px. Grudado no topo isso comeria um quarto da tela do celular. Deitado, e sem o título — que a logo já diz — a faixa cabe em 50 px e a lista continua sendo a estrela da página. */ .lojas { position: sticky; top: var(--h-topo, 59px); z-index: 25; border-bottom: 1px solid var(--color-divider); background: rgba(15, 27, 71, 0.96); backdrop-filter: blur(12px); } /* ---------------- as duas faixas mais finas (16/09/2026, pedido do Bruno) ---- Medido antes: a faixa das lojas ocupava 73px e a dos números 97px num monitor de 1280px — 170px das primeiras 600 que a pessoa vê, gastos por duas tarjas que são apoio, não conteúdo. Nada foi removido: as duas dizem exatamente as mesmas coisas, com a mesma leitura. O que encolheu foi a FOLGA em volta e o corpo dos números, que estavam grandes para o papel que fazem. */ .lojas-inner { display: flex; gap: 10px; padding: 5px 0; justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .lojas-inner::-webkit-scrollbar { display: none; } /* No computador os botões não esticam pela tela inteira: um botão de 600 px com uma logo no meio fica perdido. Eles ficam do tamanho do conteúdo, centralizados. No celular voltam a dividir a largura (regra lá embaixo). */ .loja-btn { cursor: pointer; font-family: var(--font); flex: 0 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; padding: 5px 18px; border-radius: 10px; border: 1px solid var(--color-divider); background: rgba(255, 255, 255, 0.05); color: var(--color-text); transition: border-color .15s ease, background .15s ease; } /* o nome escrito sai da tela mas fica no HTML, para leitor de tela e busca */ .loja-btn .loja-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .loja-btn .loja-n { font-size: 13px; color: rgba(238,241,250,0.6); white-space: nowrap; } .loja-logo { height: 28px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; flex: 0 0 auto; } /* A logo é uma imagem: mandamos a ALTURA e deixamos a largura livre, senão uma logo mais larga que a outra sairia esticada. */ /* flex-shrink: 0 é obrigatório. Sem ele, com três lojas na faixa o navegador espreme a IMAGEM para caber, e a marca sai achatada. */ .loja-logo .logo-img { height: 28px; width: auto; display: block; flex: 0 0 auto; } .loja-logo .logo-txt { background: rgba(255,255,255,.14); padding: 3px 12px; border-radius: 5px; } .loja-btn.ativa { border-color: var(--color-accent); background: rgba(255, 201, 7, 0.14); } /* o primeiro botão da faixa: volta a mostrar as três lojas juntas */ .logo-todas { display: block; text-align: center; line-height: 1.12; font-size: 13px; font-weight: 800; letter-spacing: 0.01em; color: var(--color-accent); text-transform: uppercase; } .loja-btn.loja-todas.ativa .logo-todas { color: var(--color-accent); } .loja-btn.ativa .loja-n { color: rgba(238,241,250,0.75); } @media (hover: hover) { .loja-btn:hover { border-color: var(--color-accent); } } /* etiqueta da loja no card — a MESMA logo da faixa, em tamanho reduzido. Como a logo já tem fundo próprio (amarelo, vermelho), a etiqueta não precisa mais do retângulo escuro por trás: ele só sujaria a marca. */ .card-loja { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } .card-loja .logo-img { height: 16px; width: auto; display: block; } .card-loja .logo-txt { background: rgba(11, 20, 54, 0.82); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; } @media (max-width: 640px) { .lojas-inner { padding: 7px 0; gap: 6px; } .loja-btn { padding: 6px 8px; gap: 6px; flex: 1 1 0; } .loja-btn .loja-n { font-size: 10.5px; } .loja-logo { height: 22px; font-size: 12px; } .loja-logo .logo-img { height: 22px; } /* com três lojas ou mais o espaço fica curto: a logo encolhe um pouco mais e a contagem vira só o número (o JS cuida do texto) */ .lojas-inner.muitas .loja-btn { padding: 6px 6px; gap: 5px; } .lojas-inner.muitas .loja-logo, .lojas-inner.muitas .loja-logo .logo-img { height: 19px; } .logo-todas { font-size: 10.5px; } /* 13/09/2026 — "TODAS AS LOJAS" VAZAVA PARA FORA DO BOTÃO NO CELULAR (visto pelo Bruno; as letras passavam por cima da borda amarela). .loja-logo tem ALTURA FIXA — 22px aqui, 36 no computador — e isso é proposital: nos outros botões ela é a régua da imagem da marca, e sem ela uma logo mais alta que a outra desalinharia a faixa toda. Só que neste botão o conteúdo não é imagem, é TEXTO: numa tela estreita "TODAS AS LOJAS" quebra em duas linhas, que com line-height 1.12 passam de 23px — e o que excede a caixa de 22px sai por cima e por baixo, porque a régua não empurra nada, só corta. Aqui a altura passa a acompanhar o texto. O botão não fica menor que os outros: os três esticam juntos na faixa (flex), então quem manda na altura continua sendo a maior logo. */ .loja-btn.loja-todas .loja-logo { height: auto; min-height: 22px; padding-block: 1px; } /* CINTO E SUSPENSÓRIO (14/09/2026) — o conserto de verdade é o JS (desenharLojas: no celular a contagem vira só "500"). Esta parte é o que segura o dia em que ele não bastar: .loja-logo e .loja-n são os dois "nowrap" E "não encolha", então num aparelho com a fonte do sistema aumentada o texto cresce e não tem para onde ir — sai por cima da borda, que foi exatamente o que o Bruno viu. Vale SÓ dentro deste botão: nos outros a logo é imagem, e deixá-la encolher acharia a marca (ver o flex-shrink: 0 lá em cima). */ .loja-btn.loja-todas { min-width: 0; } .loja-btn.loja-todas .loja-logo { flex: 0 1 auto; min-width: 0; } .loja-btn.loja-todas .loja-n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* CINCO BOTÕES, DUAS LINHAS — NÃO UMA TERCEIRA LINHA COM UM BOTÃO SOLTO. Tentamos primeiro encolher tudo para caber numa linha só. No emulador coube; no celular de verdade, não: em aparelho com fonte do sistema aumentada (ou zoom da página), o último botão ficava cortado pela metade, o que parece defeito. Duas linhas cabem em qualquer tamanho de fonte, e a marca continua legível. */ .lojas-inner.muitas { flex-wrap: wrap; } /* Com 2 botões por linha (divisão 50/50) sobrava um quinto botão sozinho numa terceira linha (28/08/2026, pedido do Bruno: "AliExpress" ficava numa linha só para ele). A divisão agora é por POSIÇÃO: os 2 primeiros botões ("Todas as lojas" + a loja com mais ofertas, que vêm sempre nessa ordem — ver LOJAS.sort no JS) ficam maiores na 1ª linha, e os 3 seguintes dividem a 2ª linha, um pouco menores. Isso pressupõe SEMPRE 5 botões (Todas as lojas + 4 lojas). Se um dia uma 5ª loja entrar no ar (6 botões ao todo), essa divisão 2+3 não farà mais sentido — nesse caso troque por 3+3, ou volte à divisão genérica de 50% que existia aqui antes. */ .lojas-inner.muitas .loja-btn:nth-child(-n+2) { flex: 1 1 calc(50% - 4px); min-width: calc(50% - 4px); padding: 7px 8px; } .lojas-inner.muitas .loja-btn:nth-child(-n+2) .loja-n { font-size: 10px; } .lojas-inner.muitas .loja-btn:nth-child(n+3) { flex: 1 1 calc(33.333% - 5px); min-width: calc(33.333% - 5px); padding: 6px 4px; gap: 4px; } .lojas-inner.muitas .loja-btn:nth-child(n+3) .loja-n { font-size: 9px; } .lojas-inner.muitas .loja-btn:nth-child(n+3) .loja-logo, .lojas-inner.muitas .loja-btn:nth-child(n+3) .loja-logo .logo-img { height: 17px; } .lojas-inner.muitas .logo-todas { font-size: 11px; } .card-loja .logo-img { height: 14px; } } .atalhos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .atalho { cursor: pointer; font-family: var(--font); font-size: 14px; padding: 0 18px; min-height: 40px; border-radius: 999px; border: 1px solid var(--color-divider); background: rgba(255, 255, 255, 0.05); color: rgba(238, 241, 250, 0.82); font-weight: 500; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .atalho .n { opacity: .55; font-weight: 500; font-size: 12.5px; } .atalho.ativo { background: var(--color-accent); color: var(--navy-ink); border-color: var(--color-accent); font-weight: 700; } /* chip do filtro escolhido, com o × para limpar */ .atalho.limpar { background: var(--color-accent); color: var(--navy-ink); border-color: var(--color-accent); font-weight: 700; } .atalho.limpar .x { opacity: .6; } .ordem-wrap { display: flex; align-items: center; gap: 8.4px; margin-left: auto; } .ordem-wrap select { width: auto; min-width: 152px; } /* ---------------- cards ---------------- */ .grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; padding-top: 8.4px; /* TODAS AS LINHAS COM A MESMA ALTURA (15/09/2026, pedido do Bruno) Sem esta linha, cada fileira da grade se ajusta ao conteúdo dela: a fileira em que algum produto tem selo de histórico fica 15px mais alta que a de cima, a seguinte volta a encolher, e rolando a página no celular os cards parecem de tamanhos diferentes — foi assim que o Bruno viu ("tamanho fora de padrão"). Com 1fr, a grade mede a fileira mais alta e dá essa altura a todas. O custo é alguns pixels de folga nos cards de conteúdo mais curto; o ganho é a grade inteira alinhada, que é o que se enxerga. */ grid-auto-rows: 1fr; } .card { position: relative; display: flex; flex-direction: column; gap: 8.4px; padding: 8.4px; border-radius: 8px; background: var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); color: var(--navy-ink); transition: transform .18s ease, box-shadow .18s ease; } .card:hover { color: var(--navy-ink); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42), 0 0 0 2px var(--color-accent); } /* 29/08/2026: "cantinhos de mira" que aparecem só ao passar o mouse — reforça a sensação de "selecionar uma oferta", como um HUD. Some no celular (hover não existe em toque), então não atrapalha lá. */ .card::before, .card::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--color-accent); opacity: 0; transition: opacity .18s ease; pointer-events: none; } .card::before { top: 4px; left: 4px; border-right: none; border-bottom: none; } .card::after { bottom: 4px; right: 4px; border-left: none; border-top: none; } .card:hover::before, .card:hover::after { opacity: .9; } .card-topo { position: relative; } .card-img { position: relative; aspect-ratio: 1 / 1; border-radius: 6px; background: #f4f6fb; overflow: hidden; display: grid; place-items: center; } /* Brilho diagonal que "varre" a foto do produto ao passar o mouse — mesmo efeito usado em vitrines de produto premium. Puramente branco translúcido (não é uma cor nova, é luz por cima da própria foto). */ .card-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%); background-size: 250% 250%; background-position: -50% -50%; transition: background-position .6s ease; } .card:hover .card-img::after { background-position: 150% 150%; } .card-img img { width: 100%; height: 100%; object-fit: contain; /* se a foto não carregar, o texto alternativo fica pequeno e contido, sem estourar o card e bagunçar a grade */ font-size: 9px; line-height: 1.2; color: rgba(20, 34, 90, 0.45); overflow: hidden; } .selo { position: absolute; top: 6px; left: 6px; background: var(--color-accent); color: var(--navy-ink); border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; padding: 4px 9px; } /* 29/08/2026: selinho da categoria (ícone gerado no Flow), no canto oposto ao selo de desconto — mesma linguagem visual dos outros dois selos do card (desconto em amarelo, loja em navy), só que para a categoria. Só aparece quando a categoria tem um ícone de verdade (ver ICONE_POR_GRUPO, lá em cima) — nunca um ícone genérico "curinga". */ .card-cat-ico { position: absolute; bottom: 6px; left: 6px; width: 26px; height: 26px; border-radius: 7px; background: rgba(11, 20, 54, 0.82); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } .card-cat-ico img { width: 17px; height: 17px; display: block; } .card-cat { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(20, 34, 90, 0.5); font-weight: 700; /* DUAS LINHAS RESERVADAS, SEMPRE (15/09/2026) "ELETRÔNICOS" cabe numa linha; "BELEZA E CUIDADO PESSOAL" ocupa duas. No celular, com dois cards lado a lado, essa diferença de 14px empurrava o título, o preço e o botão do card vizinho para cima — duas colunas desalinhadas uma da outra. Reservando as duas linhas em todos, o card de categoria curta fica com um respiro a mais no mesmo lugar, e a grade nasce alinhada. */ min-height: 2.3em; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-titulo { font-size: 12.5px; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-precos { display: flex; align-items: baseline; gap: 8.4px; flex-wrap: wrap; margin-top: 2.8px; } .preco { font-family: var(--font-mono); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } .preco-antigo { font-size: 11.5px; text-decoration: line-through; color: rgba(20, 34, 90, 0.42); } /* Selo do nosso histórico de preços — o dado que nenhum concorrente pequeno tem, porque exige acompanhar o mesmo produto dia após dia. */ .hist { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; line-height: 1.3; padding: 4px 9px; border-radius: 999px; margin-bottom: 8.4px; align-self: flex-start; } .hist::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none; } .hist-bom { background: rgba(21, 128, 61, 0.1); color: #15803d; } .hist-bom::before { background: #15803d; } .hist-aviso { background: rgba(20, 34, 90, 0.06); color: rgba(20, 34, 90, 0.55); } .hist-aviso::before { background: rgba(20, 34, 90, 0.35); } /* A FAIXA DO HISTÓRICO, COLADA EMBAIXO DO CARD (14/09/2026) --------------------------------------------------------- Por que ela mora FORA do : o card inteiro já é um link para a loja, e HTML não permite link dentro de link. Um com clique em JavaScript funcionaria na tela e não serviria para o Google, que precisa de de verdade para achar as páginas de preço. Então o card ganhou um irmão, e os dois vivem dentro de .card-caixa. O selo antigo (.hist) continua existindo dentro do card: ele é a AFIRMAÇÃO ("menor preço em 12 dias"), com a régua mais dura do historico.py (4 dias no mínimo). A faixa é o CONVITE para conferir. */ .card-caixa { display: flex; flex-direction: column; } .card-caixa > .card { flex: 1 1 auto; } .card-hist { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; padding: 7px 10px; border-radius: 8px; /* ALTURA RESERVADA PARA DUAS LINHAS, SEMPRE (15/09/2026) Medido no celular a 390px: "Menor preço que já vimos ›" ocupa duas linhas (45px) e "Perto do menor preço ›" ocupa uma (30px). Como a faixa fica embaixo do card, essa diferença de 15px empurrava o card vizinho para cima — dois cards lado a lado com alturas diferentes, e as faixas desalinhadas entre si. Reservando as duas linhas em todas, o texto curto fica centralizado na mesma caixa e a fileira inteira nasce alinhada. */ min-height: 45px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--color-divider); font-size: 11.5px; font-weight: 700; line-height: 1.25; color: var(--color-text); text-decoration: none; text-align: center; transition: background .15s ease, border-color .15s ease, color .15s ease; } .card-hist:hover { background: rgba(255, 201, 7, 0.16); color: var(--color-accent); border-color: rgba(255, 201, 7, 0.45); } .card-hist.bom { background: rgba(31, 168, 102, 0.13); border-color: rgba(31, 168, 102, 0.42); color: #7ee2ad; } .card-hist.ruim { background: rgba(224, 78, 78, 0.13); border-color: rgba(224, 78, 78, 0.42); color: #ffb4b4; } .card-hist b { font-weight: 700; opacity: .7; } /* "Em análise": o produto ainda não tem leituras suficientes para ter página de histórico (mínimo de 2 — ver MINIMO_LEITURAS em pagina_preco.py). Não é link porque não há para onde ir, e é o único estado sem seta: seta que não leva a lugar nenhum é promessa quebrada. Fica apagado de propósito — está ali para alinhar a grade e dizer a verdade, não para chamar clique. */ .card-hist.analise { color: rgba(238, 241, 250, 0.45); background: rgba(255, 255, 255, 0.04); border-style: dashed; cursor: default; } .card-btn { display: flex; align-items: center; justify-content: center; gap: 5.6px; margin-top: auto; background: var(--navy); color: #ffffff; border-radius: 8px; padding: 9px 12px; font-size: 12.5px; font-weight: 700; } .vazio { padding: 56px 0; text-align: center; color: rgba(238, 241, 250, 0.5); font-size: 13.5px; } .mais-wrap { display: grid; place-items: center; padding: 28px 0 0; } .btn-mais { cursor: pointer; font-family: var(--font); font-size: 13.5px; font-weight: 700; padding: 11px 26px; border-radius: 999px; border: 1px solid var(--color-accent); background: transparent; color: var(--color-accent); } .btn-mais:hover { background: rgba(255, 201, 7, 0.12); } /* ---------------- rodapé ---------------- */ /* 17/09/2026 — O MAPA DE LINKS Existe por uma razão só, e é medida: em 17/09 o Google conhecia 21 páginas de um site com 883. A home tinha 22 links escritos no HTML — o número bateu quase exato, porque é só até onde ele conseguiu andar. Os cards e o menu de categorias são montados por JavaScript, e link que só nasce depois do JS rodar não é link para um rastreador. Discreto de propósito: quem navega usa o menu e os cards. Isto aqui é a escada de serviço do prédio. */ /* 17/09/2026 — a chamada para /mais-produtos/, no fim da lista. */ .faixa-mais { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; background: var(--color-section); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 22px 24px; } .faixa-mais h2 { font-size: 19px; margin: 0 0 6px; } .faixa-mais p { font-size: 14px; color: rgba(238,241,250,.75); margin: 0; max-width: 560px; line-height: 1.55; } @media (max-width: 640px) { .faixa-mais { padding: 18px; gap: 14px; } .faixa-mais h2 { font-size: 17px; } .faixa-mais p { font-size: 13px; } } .mapa-cat { margin-top: 40px; } .mapa-cat h2 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(238, 241, 250, 0.5); margin: 0 0 10px; font-weight: 700; } .mapa-cat h2 + ul { margin-bottom: 26px; } .mapa-cat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; } .mapa-cat li { margin: 0; } .mapa-cat a { font-size: 13.5px; color: rgba(238, 241, 250, 0.8); } .mapa-cat a:hover { color: var(--color-accent); } .rodape { margin-top: 56px; } .hr { height: 1px; background: var(--color-divider); } .selos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22.4px; padding: 33.6px 0; } .selo-item { display: flex; gap: 11.2px; align-items: flex-start; } .selo-item svg { flex: none; margin-top: 2px; } .selo-item b { font-size: 14px; font-weight: 700; margin-bottom: 2.8px; display: block; } .selo-item p { font-size: 12.5px; line-height: 1.5; color: rgba(238, 241, 250, 0.58); margin: 0; } .rodape-linha { display: flex; flex-wrap: wrap; gap: 16.8px; justify-content: space-between; align-items: center; padding: 22.4px 0 11.2px; } .rodape-redes { display: flex; flex-wrap: wrap; align-items: center; gap: 16.8px; } .rodape-marca { font-size: 13px; font-weight: 700; letter-spacing: 0.13em; } .aviso { max-width: 74ch; font-size: 11.5px; line-height: 1.6; color: rgba(238, 241, 250, 0.42); padding-bottom: 33.6px; margin: 0; } @media (max-width: 900px) { /* 31/08/2026: a logo não volta mais para cima ("order: -1") — ela ficou ancorada no canto, então aqui ela só diminui e o texto ganha a largura toda. */ /* 02/09/2026: uma coluna só, e a ordem vira ofertas -> LOGO -> gerador A logo continua no meio, separando, porque é a segunda no HTML. A linha vertical some (ela divide colunas, e aqui não há colunas). O véu passa a ser de cima para baixo: empilhado, o texto não fica mais à esquerda. */ /* (o .hero-inner deixou de ser grade em 16/09 — ver o comentário lá em cima) */ .hero::before { background: linear-gradient(180deg, rgba(11, 20, 54, 0.80) 0%, rgba(11, 20, 54, 0.92) 55%); } .hero h1 { font-size: 29px; } /* A navegação desce para uma linha só dela e distribui os quatro links na largura da tela — nenhum é escondido. */ .nav-topo { order: 10; width: 100%; justify-content: space-between; } /* O texto do usuário ao lado do ícone não cabe numa tela de tablet, junto com o logo e os botões. Esconder aqui, mais cedo do que no celular (regra de 640px mais abaixo), evita que a linha do topo quebre ou esprema os botões. Eram três ícones até a saída do terceiro, em 22/09/2026. */ .insta span { display: none; } } /* ---------------- celular ---------------- */ @media (max-width: 640px) { .wrap { padding-left: 14px; padding-right: 14px; } .miolo { padding-left: 14px; padding-right: 14px; } .bt-topo-voltar { font-size: 12px; padding: 8px 13px; } /* topo mais enxuto, para sobrar tela para os produtos */ .topo-inner { gap: 10px; padding-top: 7px; padding-bottom: 7px; } .marca img { width: 34px; height: 34px; } .marca-nome { font-size: 12px; letter-spacing: 0.08em; } .marca-tag { font-size: 8.5px; } .insta span { display: none; } /* fica só o ícone do Instagram */ .canal span { display: none; } /* fica só o ícone do canal */ .canal svg { width: 26px; height: 26px; } /* maior de propósito: no celular o canal é o link que queremos que mais chame atenção no topo */ /* Com "Entrar" e "Criar conta" no topo (03/09/2026), a barra do celular ganhou dois itens. Encolher os botões aqui evita empurrar os ícones das redes para uma segunda linha nas telas mais estreitas. A barra continua podendo quebrar e rolar de lado se ainda faltar espaço — nada é escondido. */ .btn-topo { font-size: 11.5px; padding: 6px 11px; } /* NO CELULAR, ENTRAR/CRIAR CONTA FICAM VAZADOS (26/09/2026) A avaliação de 26/09 apontou: no celular, os dois botões amarelos do topo gritam ANTES de o visitante entender por que precisaria de uma conta. Aqui eles viram contorno — continuam visíveis e clicáveis, mas o primeiro amarelo forte da tela passa a ser o banner com o benefício. O pedido do Bruno de 04/09 ("os dois iguais") segue respeitado: os dois recebem exatamente o mesmo estilo. No computador nada muda. A regra mira só os botões de conta (.area-conta), não o "Artigos" das páginas de categoria, que também usa .btn-topo. */ .area-conta .btn-topo { background: transparent; color: var(--color-accent); box-shadow: inset 0 0 0 1.5px var(--color-accent); } /* 14/09/2026 — O CRACHÁ DE QUEM ESTÁ CONECTADO, NO CELULAR. Medido a 390px de largura: sem teto de largura, um e-mail comprido levava o cabeçalho de 127px para 172px — uma linha inteira a mais, numa barra que é grudada no topo e come tela o tempo todo. Com max-width o e-mail é cortado com reticências e a altura fica igual à de quem não entrou. O endereço inteiro continua no "title". */ .cracha-conta { font-size: 11.5px; padding: 6px 11px; gap: 5px; max-width: 118px; } .cracha-conta svg { width: 13px; height: 13px; } .nav-topo { gap: 0; } .nav-topo a { font-size: 11px; letter-spacing: 0.06em; padding: 8px 6px; } .hero-inner { padding-top: 18px; padding-bottom: 18px; } .hero h1 { font-size: 24px; max-width: none; } .hero p { font-size: 13px; } /* O botão de chamada ficava do tamanho de um cartão de produto no celular: com a fonte de 14px e 24px de folga dos lados, o texto "Explorar as ofertas de hoje" quase atravessava a tela. Aqui ele encolhe e para de esticar — vira um botão, não um bloco. */ .hero-acoes { gap: 12px; align-items: flex-start; } .btn-hero { font-size: 13px; padding: 10px 18px; align-self: flex-start; } .ofertas { padding-top: 26px; } .lista-cab h2 { font-size: 20px; } /* barra de filtros compacta: busca e ordenação lado a lado, e as categorias numa faixa que rola para o lado */ .barra { padding: 8px 0 10px; gap: 8px; } .barra-rotulo { display: none; } /* GAVETA LATERAL NO CELULAR (23/08/2026) Antes o menu virava um painel só, com os GRUPOS numa faixa que rolava para o lado — era exatamente esse tipo de rolagem horizontal que os sites grandes evitam no celular, porque esconde categorias (a pessoa não sabe quantas existem nem se já viu todas). Agora "Categorias" abre uma gaveta que desliza da esquerda e cobre a tela, com um fundo escurecido atrás. Dentro dela os GRUPOS ficam em lista vertical; tocar num grupo troca para a lista das categorias daquele grupo (com um "‹ Voltar" no topo para retornar) — é o mesmo jeito de navegar do aplicativo do Mercado Livre e da Amazon. */ /* CATEGORIAS, TODOS E DESTAQUES NA MESMA LINHA (celular) Eles quebravam em duas linhas e empurravam a lista para baixo — junto com a faixa das lojas grudada no topo, sobrava pouca tela para os produtos. Aqui os três ficam numa faixa só, que rola para o lado se não couber, em vez de quebrar. Isto é sobre TODOS/DESTAQUES/o chip do filtro escolhido — não sobre o menu de categorias, que agora é a gaveta vertical explicada acima. */ .linha-cats { width: 100%; flex-wrap: nowrap; gap: 6px; } .atalhos { flex-wrap: nowrap; gap: 6px; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .atalhos::-webkit-scrollbar { display: none; } .btn-cats { font-size: 12.5px; padding: 0 11px; min-height: 34px; flex: 0 0 auto; } .atalho { font-size: 12px; padding: 0 10px; min-height: 34px; flex: 0 0 auto; } .atalho .n { font-size: 11px; } .menu-wrap { position: static; } .menu { position: fixed; inset: 0; top: 0; left: 0; right: 0; bottom: 0; display: flex; background: rgba(11, 20, 54, 0.6); /* escurece o resto da tela */ align-items: stretch; justify-content: flex-start; } /* DUAS ARMADILHAS DO MESMO CULPADO, medidas testando de verdade no navegador (23/08/2026) — olhando só o código, as duas pareciam certas: 1) A .barra usa "backdrop-filter" para o vidro fosco quando gruda no topo. Qualquer filtro num ancestral vira o "chão" de quem usa position:fixed lá dentro — em vez de cobrir a TELA, a gaveta ficava presa do TAMANHO da barra, porque .menu é descendente dela. 2) A .barra também é "position: sticky", e sticky sempre cria seu próprio grupo de empilhamento (stacking context) — TODO ELEMENT DENTRO da barra (a gaveta incluída) fica preso ao z-index DA BARRA (20) na hora de disputar com elementos de FORA dela, não importa o z-index que a gaveta tenha por dentro (era 40). Por isso o cabeçalho do site (.topo, z-index 30) ficava por cima da gaveta e "roubava" os toques. A saída para as duas é a mesma: enquanto a gaveta está aberta, o JS liga esta classe no , e por um instante a barra perde o vidro fosco e ganha um z-index bem alto. Ninguém repara — a gaveta cobre a tela toda mesmo. */ body.gaveta-aberta .barra { backdrop-filter: none; z-index: 200; } .menu-painel { /* Largura 100%: a primeira versão deixava uma tira do fundo escurecido à mostra do lado direito (86vw, até 340px) — o Bruno pediu para a gaveta ocupar a tela inteira no celular, sem essa sobra. Simplesmente ela ficou do tamanho do .menu (que já cobre a tela toda, ver acima), então some o motivo de ter uma cor de fundo diferente por trás — mas ela continua ali, sem custo, para o dia em que alguém quiser um tablet ou uma tela maior parando de ser 100%. */ flex-direction: column; width: 100%; height: 100%; min-width: 0; border: none; border-radius: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .menu-cabecalho { display: flex; align-items: center; gap: 8px; padding: 14px 14px; position: sticky; top: 0; z-index: 1; background: #1a2456; border-bottom: 1px solid var(--color-divider); } .menu-titulo { flex: 1; font-weight: 700; font-size: 15px; color: #eef1fa; } .menu-voltar, .menu-fechar { background: none; border: none; color: #eef1fa; font-family: var(--font); font-size: 14px; cursor: pointer; padding: 4px 6px; } .menu-voltar[hidden] { display: none; } .menu-fechar { font-size: 20px; line-height: 1; } /* só um dos dois painéis aparece por vez: grupos OU categorias do grupo escolhido. A classe "ver-subs" é ligada pelo JS ao tocar num grupo. */ .menu-subs-wrap { display: none; } .menu.ver-subs .menu-grupos { display: none; } .menu.ver-subs .menu-subs-wrap { display: block; } .menu-grupos { /* "flex: 1" É NOVO (24/08/2026) e é preciso agora, mesmo sem nunca ter sido necessário antes: até aqui, .menu-grupos era filho DIRETO do .menu-painel (que é uma coluna), e numa coluna o filho estica de lado a lado sozinho. Agora existe um .menu-corpo NO MEIO dos dois (para caber a faixa de lojas em cima), e .menu-corpo é uma LINHA — numa linha ninguém estica sozinho, cada um fica do tamanho do seu conteúdo. Sem isto, a lista de grupos voltava a ficar estreita, coladinha no texto, em vez de ocupar a largura toda da gaveta. */ flex: 1; flex-direction: column; flex-wrap: nowrap; min-width: 0; padding: 8px; gap: 4px; } .menu-grupo { width: 100%; flex: none; border-radius: 8px; padding: 11px 12px; font-size: 14px; white-space: normal; background: rgba(255, 255, 255, 0.06); } /* A setinha "›" não aparece mais em tela nenhuma (12/09/2026) — o "display: none" está lá em cima, na regra do computador, e a gaveta herda. Motivo no comentário de ".menu-grupo .chevron": com o menu em coluna única, tocar num item filtra direto, não abre outra tela. */ .menu-subs-wrap { min-width: 0; padding: 8px 16px 18px; } .menu-subs { gap: 4px; } .menu-sub { font-size: 14px; width: 100%; border-radius: 8px; padding: 10px 12px; } .ordem-wrap { margin-left: 0; flex: 0 0 auto; } .ordem-wrap select { min-width: 0; font-size: 13px; padding: 0 10px; } select.campo { min-width: 0; flex: 0 0 auto; font-size: 13px; padding: 0 10px; } .campo { min-height: 36px; font-size: 13px; } .busca-caixa { flex: 1 1 140px; min-width: 120px; } /* dois produtos por linha no celular */ .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .card { padding: 7px; gap: 7px; } .card-titulo { font-size: 11.5px; } .preco { font-size: 17px; } .preco-antigo { font-size: 10.5px; } .card-btn { font-size: 11.5px; padding: 8px 10px; } .selo { font-size: 9.5px; padding: 3px 7px; } } /* Telas estreitas: mesmo depois de tirar o botão "Ver ofertas" do topo (26/08/2026, pedido do Bruno), o cabeçalho ainda não cabia numa linha só no iPhone 12/13/14 padrão (390px de largura, um dos mais comuns). Medido de verdade (Playwright, larguras de 320 a 430px): a régua estava em 380px e sobrava 23px faltando exatamente nessa largura. Subindo o corte para 400px, essa régua passa a cobrir o 390px também. Aqui o topo encolhe o suficiente para caber sem precisar rolar de lado (a rolagem de .topo-inner, ver mais acima, continua como rede de segurança para quem tiver uma tela ainda mais estreita, tipo um iPhone SE antigo). */ @media (max-width: 400px) { .topo-inner { gap: 7px; } .marca img { width: 30px; height: 30px; } .marca-nome { font-size: 10.5px; letter-spacing: 0.05em; } .marca-tag { display: none; } .btn-topo { font-size: 11px; padding: 6px 10px; } /* 14/09/2026 — na tela mais estreita o crachá abre mão do bonequinho. Medido a 320px: com o ícone e 118px de teto, o cabeçalho ia de 127px para 170px (uma terceira linha). Sem o ícone e com 88px, fica igual ao de quem não entrou. O bonequinho era enfeite; o e-mail é a informação, e ele continua inteiro. */ .cracha-conta { font-size: 11px; padding: 6px 10px; max-width: 88px; } .cracha-conta svg { display: none; } .nav-topo a { font-size: 10px; padding: 8px 4px; } } /* telas bem estreitas: um produto por linha */ @media (max-width: 330px) { .grade { grid-template-columns: 1fr; } } /* ---------------- botão "Voltar Início" do topo (15/09/2026) ---------- Amarelo e em formato de pílula porque precisa ser lido como SAÍDA, e não como mais um item da navegação. É o único botão amarelo do cabeçalho, de propósito: dois botões amarelos na mesma barra e nenhum dos dois chama atenção. O flex-shrink: 0 acompanha a regra dos outros itens do topo — a barra rola de lado quando aperta, ninguém encolhe. */ .bt-topo-voltar { flex-shrink: 0; white-space: nowrap; background: var(--color-accent); color: #14225a; font-size: 13px; font-weight: 700; letter-spacing: .01em; padding: 9px 16px; border-radius: 999px; } .bt-topo-voltar:hover { background: #ffd53d; color: #14225a; } @media (max-width: 640px) { /* No celular a navegação desce para uma linha só dela (.nav-topo tem order:10 e width:100%), então o botão fica ao lado da marca, na primeira linha. Menor, para caber junto do nome do site. */ .bt-topo-voltar { font-size: 12px; padding: 8px 13px; } } .miolo { max-width: 1120px; margin: 0 auto; padding: 0 22px; } .trilha { font-size: 13px; color: rgba(238,241,250,.55); padding: 18px 0 6px; } .trilha a { color: rgba(238,241,250,.75); text-decoration: none; } .trilha a:hover { color: var(--color-accent); } .trilha span { margin: 0 7px; opacity: .5; } .ficha { display: grid; grid-template-columns: 380px 1fr; gap: 34px; align-items: start; padding: 10px 0 34px; } .ficha-foto { background: #fff; border-radius: 18px; padding: 18px; display: flex; align-items: center; justify-content: center; } .ficha-foto img { width: 100%; height: auto; display: block; border-radius: 8px; } /* 17/09/2026 — a caixa que fica no lugar da foto quando ela não existe. Produto que saiu da coleta antes das fichas existirem perdeu o arquivo da foto, e a ficha sem nada ali desmontava o alinhamento das duas colunas. Cinza claro e quadrada: ocupa o mesmo espaço, sem fingir que há uma imagem carregando. */ .ficha-foto.ficha-sem-foto { aspect-ratio: 1; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.14); } .rel-sem-foto { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.12); } .selo-loja { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); border: 1px solid rgba(255,201,7,.4); border-radius: 999px; padding: 6px 13px; } .ficha h1 { font-size: 30px; line-height: 1.22; margin: 14px 0 0; letter-spacing: -.01em; } .veredito { border-radius: 16px; padding: 20px 22px; margin-top: 22px; border: 1px solid; display: flex; gap: 16px; align-items: flex-start; } .veredito .marca-v { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 900; } .veredito h2 { font-size: 19px; margin: 1px 0 6px; letter-spacing: -.01em; } .veredito p { font-size: 15px; line-height: 1.5; margin: 0; color: rgba(238,241,250,.82); } .veredito p b { color: #fff; } .veredito.bom { background: rgba(31,168,102,.13); border-color: rgba(31,168,102,.45); } .veredito.bom .marca-v { background: #1fa866; color: #04270f; } .veredito.bom h2 { color: #4fd493; } .veredito.ruim { background: rgba(224,78,78,.13); border-color: rgba(224,78,78,.45); } .veredito.ruim .marca-v { background: #e04e4e; color: #2a0505; } .veredito.ruim h2 { color: #ff8f8f; } .veredito.neutro { background: rgba(255,201,7,.11); border-color: rgba(255,201,7,.40); } .veredito.neutro .marca-v { background: var(--color-accent); color: var(--navy-ink); } .veredito.neutro h2 { color: var(--color-accent); } .preco-linha { display: flex; align-items: baseline; gap: 14px; margin-top: 24px; flex-wrap: wrap; } .preco-agora { font-family: var(--font-mono); font-size: 44px; font-weight: 700; color: var(--color-accent); letter-spacing: -.02em; line-height: 1; } .preco-de { font-family: var(--font-mono); font-size: 17px; color: rgba(238,241,250,.5); text-decoration: line-through; } .preco-tag { font-size: 12.5px; font-weight: 700; background: rgba(255,201,7,.16); color: var(--color-accent); border-radius: 999px; padding: 5px 12px; } .quando { font-size: 13px; color: rgba(238,241,250,.5); margin-top: 9px; } .bt-oferta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--color-accent); color: var(--navy-ink); font-family: var(--font); font-size: 17px; font-weight: 700; border-radius: 12px; padding: 16px 30px; margin-top: 20px; text-decoration: none; } .bt-oferta:hover { background: var(--color-accent-300); color: var(--navy-ink); } .numeros-hist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-divider); border-radius: 14px; overflow: hidden; margin: 6px 0 34px; } .numeros-hist div { background: var(--color-section); padding: 18px 20px; } .numeros-hist b { display: block; font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--color-accent); letter-spacing: -.02em; } .numeros-hist span { display: block; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: rgba(238,241,250,.55); margin-top: 6px; } h2.secao { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; } p.secao-sub { font-size: 14.5px; color: rgba(238,241,250,.6); margin: 0 0 18px; } .grafico { background: var(--color-section); border: 1px solid var(--color-divider); border-radius: 16px; padding: 22px 20px 14px; margin-bottom: 34px; } .grafico svg { width: 100%; height: auto; display: block; } .tabela-hist { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 34px; } .tabela-hist th { text-align: left; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: rgba(238,241,250,.55); padding: 0 14px 10px; font-weight: 700; } .tabela-hist td { padding: 12px 14px; border-top: 1px solid var(--color-divider); font-family: var(--font-mono); } .tabela-hist td:first-child { color: rgba(238,241,250,.72); } .tabela-hist tr.menor td { background: rgba(31,168,102,.10); } .tabela-hist tr.maior td { background: rgba(224,78,78,.10); } .tabela-hist .nota { font-family: var(--font); font-size: 12.5px; font-weight: 700; } .tabela-hist .nota.v { color: #4fd493; } .tabela-hist .nota.r { color: #ff8f8f; } .tabela-hist .subiu { color: #ff8f8f; } .tabela-hist .caiu { color: #4fd493; } .metodo { background: rgba(255,255,255,.04); border: 1px solid var(--color-divider); border-radius: 16px; padding: 24px 26px; margin-bottom: 34px; } .metodo h2 { font-size: 19px; margin: 0 0 14px; } .metodo ul { margin: 0; padding-left: 20px; } .metodo li { font-size: 14.5px; line-height: 1.62; color: rgba(238,241,250,.78); margin-bottom: 9px; } .metodo li b { color: #fff; } .metodo .franco { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: rgba(238,241,250,.6); border-left: 3px solid var(--color-accent); padding-left: 14px; } .aviso-alerta { background: var(--color-section); border: 1px solid rgba(255,201,7,.35); border-radius: 16px; padding: 22px 24px; margin-bottom: 40px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .aviso-alerta > div { flex: 1 1 320px; } .aviso-alerta h2 { font-size: 18px; margin: 0 0 5px; } .aviso-alerta p { font-size: 14.5px; color: rgba(238,241,250,.7); margin: 0; } .relacionados { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 44px; } .rel-card { background: var(--color-surface); border-radius: 14px; padding: 12px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; } .rel-card img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; } .rel-t { font-size: 13px; line-height: 1.35; color: var(--navy); font-weight: 600; } .rel-p { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--navy); } .rodape-preco { border-top: 1px solid var(--color-divider); padding: 30px 0 46px; margin-top: 20px; } .rodape-preco p { font-size: 14.5px; margin: 0 0 8px; } .rodape-preco .miudo { font-size: 13px; color: rgba(238,241,250,.55); line-height: 1.55; } .rodape-preco a { color: var(--color-accent); text-decoration: none; } @media (max-width: 860px) { .ficha { grid-template-columns: 1fr; gap: 22px; } .ficha-foto { max-width: 300px; } .ficha h1 { font-size: 24px; } .numeros-hist { grid-template-columns: 1fr 1fr; } .preco-agora { font-size: 38px; } .miolo { padding: 0 16px; } .relacionados { grid-template-columns: 1fr 1fr; } .tabela-hist { font-size: 14px; } .tabela-hist td, .tabela-hist th { padding-left: 8px; padding-right: 8px; } }