:root {
--azul-escuro: #0d0d11;
--azul: #1a1a20;
--azul-claro: #c9a227;
--azul-suave: #e6cf8a;
--branco: #ffffff;
--cinza: #f6f5f2;
--texto: #1c2333;
--texto-fraco: #6b7688;
--raio: 14px;
--sombra: 0 4px 20px rgba(26, 47, 92, .1);
/* Topo de loja. O azul da faixa utilitária é mais escuro que o
--azul-escuro da barra de propósito: são duas faixas coladas, e sem
um degrau de tom elas viram um bloco só de 70px de altura.
1220px é a largura do miolo do topo — mais larga que os 1100 das
ferramentas antigas porque aqui cabem nove categorias numa linha. */
--mx-noite: #07070a;
--mx-largura: 1220px;
/* ==========================================================
CORES DE SIGNIFICADO
Cada cor diz UMA coisa, nas duas páginas. Sem esta lista o
mesmo âmbar aparecia escrito à mão em dez lugares do
pedido.css, e o --promo só funcionava por causa do valor de
reserva: ele estava declarado no cards.css, que a página de
pedido nem carrega.
azul = a marca e a navegação
âmbar = "olhe aqui" — promoção e campo a preencher
verde = ganho confirmado — economia, item aceito, enviado
ocre = ação destrutiva (limpar pedido). Vermelho puro, não:
nesta página ele leria como erro de preenchimento.
========================================================== */
--promo: #e0a92a;
--promo-forte: #a97c12; /* faixa de promoção, texto sobre claro */
--promo-escuro: #6d4e08; /* texto sobre fundo âmbar claro */
--promo-fundo: #fdf6e3;
--promo-borda: #f0d590;
--ok: #2f7d4f; /* economia, confirmado */
--ok-fundo: #f0f8f3;
--ok-borda: #b8dcc6;
--zap: #25d366; /* verde do WhatsApp — só nele */
/* preto + ouro = a campanha da Black Week, e nada mais.
Ela nao reaproveita o ambar por um motivo de leitura: nesta casa
ambar quer dizer "produto em promocao", um estado que o produto tem
ou nao tem e que nao acaba em data marcada. A Black e outra coisa —
uma semana, com uma lista fechada e um prazo correndo. Pintando as
duas da mesma cor, o cliente que aprendeu o ambar na terca passaria a
ler "promocao de sempre" onde o preco volta ao normal no dia 24.
O ouro aparece como realce sobre o preto, onde ele tem contraste de
sobra; sobre fundo claro entra o --black-ouro-f, que e mais escuro. */
--black-noite: #0b0b0e;
--black-grafite: #1b1b21;
--black-borda: #3a3027;
--black-ouro: #f0b429; /* realce sobre preto */
--black-ouro-f: #a97508; /* texto sobre fundo claro */
--black-fundo: #fdf6e7;
/* O vermelho do corte no preco antigo, e so dele.
Ele abre uma excecao na regra escrita acima — "vermelho puro, nao:
ele leria como erro de preenchimento" — e a excecao se sustenta
porque aqui o vermelho nao esta em texto nem em campo: esta num
TRACO sobre um numero. Nessa forma ele nao diz "voce errou", diz
"este preco acabou", e e a convencao que qualquer pessoa ja viu em
encarte de loja a vida inteira. O dono pediu assim.
Fica fora do bloco da Black de proposito: o dia em que a loja fizer
outra promocao sem ser Black, o corte continua sendo este.
Nome proprio, e nao --risco: esse ja existe nesta folha e quer dizer
outra coisa — o ocre do botao que limpa o pedido. */
--corte: #e03131;
--zap-hover: #1fb855;
--risco: #9a5a5a; /* limpar pedido */
--risco-fundo: #fbeaea;
--risco-borda: #e6d0d0;
/* linhas e contornos: dois tons, não sete */
--borda: #e6e3dc; /* separador de card */
--borda-campo: #ded9d0; /* contorno de campo e botão */
--borda-fina: #f0ece4; /* fio interno entre linhas */
--azul-fundo: #f7f1e2; /* aviso azul, linha escolhida */
/* Ícones como máscara CSS: herdam a cor do bloco (currentColor não vale
em background) e não pesam requisição nem markup. SVG embutido em
data:, sem aspas duplas por causa da própria declaração. */
--icone-etiqueta: url('data:image/svg+xml;utf8,');
--icone-caixa: url('data:image/svg+xml;utf8,');
--icone-alerta: url('data:image/svg+xml;utf8,');
--icone-check: url('data:image/svg+xml;utf8,');
--icone-pincel: url('data:image/svg+xml;utf8,');
/* ==========================================================
SISTEMA TIPOGRÁFICO
Nenhum tamanho, peso ou espaçamento fora desta lista.
Antes existiam 51 tamanhos soltos no catálogo; um valor
avulso quebra a hierarquia inteira, então tudo passa por aqui.
========================================================== */
/* --- Escala de texto (razão ~1.15, ancorada em 16px) --- */
--t-hero: clamp(2rem, 7.5vw, 2.75rem); /* 44px nome da loja */
--t-h2: clamp(1.5rem, 5vw, 2rem); /* 32px título de seção */
--t-h3: clamp(1.25rem, 4.2vw, 1.5rem); /* 24px título de categoria */
--t-h4: 1.0625rem; /* 17px nome do produto */
--t-lead: .9375rem; /* 15px texto de apoio */
--t-body: .875rem; /* 14px corpo padrão */
--t-sm: .8125rem; /* 13px secundário, modelos */
--t-xs: .75rem; /* 12px legenda */
--t-2xs: .6875rem; /* 11px micro-rótulo */
--t-3xs: .625rem; /* 10px piso — nada menor */
/* --- Escala de preço (própria, para o número dominar o card) --- */
--t-preco-xl: 1.625rem; /* 26px preço por unidade */
--t-preco-lg: 1.25rem; /* 20px preço na caixa fechada */
--t-preco-md: 1.0625rem; /* 17px preço do pacote */
--t-preco-sm: .875rem; /* 14px preço em tabela/lista */
/* --- Pesos: só quatro. Negrito marca hierarquia, nunca ênfase solta. ---
400 frase corrida · 500 micro-rótulo · 600 nome/rótulo · 700 preço/título */
--p-normal: 400;
--p-medio: 500;
--p-forte: 600;
--p-bold: 700;
/* --- Espaçamento entre letras: inverso ao tamanho --- */
--ls-marca: .22em; /* "CAPAS" do logotipo: bem aberto */
--ls-hero: .06em; /* caixa alta grande: abre pouco */
--ls-titulo: -.005em; /* título grande: fecha de leve */
--ls-label: .07em; /* caixa alta pequena: precisa ar */
/* --- Altura de linha --- */
--lh-titulo: 1.2;
--lh-corpo: 1.5;
--lh-densa: 1.35;
--lh-solta: 1.7; /* endereço e rodapé: bloco curto que respira */
--lh-justa: 1.15; /* número grande de preço, uma linha só */
--lh-aperta: 1.05; /* nome da loja e número da caixa: bloco compacto */
/* --- Glifos (setas, play, lupa): são ícones, não texto --- */
--g-p: 1.25rem; /* setas sobre a foto do card */
--g-m: 1.5rem; /* seta de rolagem, botões do lightbox */
--g-g: 2rem; /* play do vídeo */
}
/* Preço é número comparável: dígitos de largura fixa alinham as colunas
e o valor nunca "dança" ao trocar de card. Sem tracking, nunca em caixa alta. */
.preco,
.grupo-valor,
.preco-unidade strong,
.caixa-valor strong,
.pacote-precos strong,
.caixa-qtd b,
.grupo-caixa b {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
letter-spacing: 0;
text-transform: none;
}
/* "R$" é serviço, não informação: recua para o número receber o olho. */
.rs {
margin-right: .18em;
font-weight: var(--p-forte);
opacity: .72;
}
/* O cifrão só encolhe nos preços de vitrine, que têm corpo para isso —
é o tratamento de Apple, Amazon e Samsung. Em preço de tabela (13px)
encolher deixaria o símbolo com 8px, ilegível. */
.preco-unidade strong .rs,
.caixa-valor strong .rs {
font-size: .58em;
vertical-align: .1em;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
color: var(--texto);
background: var(--cinza);
line-height: var(--lh-corpo);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* ---------- o atributo hidden manda ----------
A regra [hidden]{display:none} vem da folha do navegador, e QUALQUER
regra nossa com `display` a vence — origem de autor ganha da origem do
navegador, mesmo com especificidade menor. Foi assim que a linha acima
(`img { display: block }`) desligou o hidden de toda imagem do projeto,
e foi assim que a dica de economia, o aviso de mínimo e a lista de
modelos do catálogo reapareceram vazios em quatro ocasiões diferentes.
Com !important o atributo volta a ser a última palavra, e não é preciso
lembrar de escrever `seletor[hidden]{display:none}` a cada componente
novo. Esconder algo e ainda querer exibi-lo por CSS não é caso de uso. */
[hidden] { display: none !important; }
#barra-progresso {
position: fixed;
top: 0; left: 0;
width: 100%; height: 3px;
background: linear-gradient(90deg, var(--azul-claro), var(--branco));
transform: scaleX(0);
transform-origin: left;
z-index: 100;
}
/* ---------- Capa ---------- */
.capa {
min-height: 100svh;
display: grid;
place-items: center;
text-align: center;
padding: 48px 24px;
background:
radial-gradient(ellipse at 50% 0%, #2a4a85 0%, transparent 60%),
linear-gradient(165deg, var(--azul) 0%, var(--azul-escuro) 100%);
color: var(--branco);
position: relative;
overflow: hidden;
}
.capa::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 120px;
background: linear-gradient(transparent, rgba(0, 0, 0, .18));
pointer-events: none;
}
.capa-conteudo { max-width: 560px; position: relative; z-index: 1; }
.capa img {
width: min(140px, 34vw);
height: auto; /* preserva a proporcao real do arquivo */
aspect-ratio: 420 / 488;
object-fit: contain;
margin: 0 auto 20px;
filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .34));
}
/* único 800 do catálogo: é a marca, funciona como logotipo */
.capa h1 {
font-size: var(--t-hero);
font-weight: 800;
letter-spacing: var(--ls-hero);
text-transform: uppercase;
line-height: var(--lh-aperta);
}
.capa .subtitulo {
color: var(--azul-suave);
font-size: var(--t-xs);
font-weight: var(--p-medio);
letter-spacing: var(--ls-label);
text-transform: uppercase;
margin-top: 10px;
}
.capa .chamada {
margin-top: 12px;
color: var(--branco);
font-size: var(--t-lead);
font-weight: var(--p-normal);
letter-spacing: 0;
}
.linhas-produto {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 8px;
margin-top: 10px;
list-style: none;
}
.linhas-produto li {
padding: 4px 12px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 999px;
background: rgba(255, 255, 255, .08);
color: var(--azul-suave);
font-size: var(--t-2xs);
font-weight: var(--p-forte);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.divisor {
width: 64px; height: 2px;
background: var(--azul-claro);
margin: 26px auto;
border-radius: 2px;
}
.capa .descricao {
color: rgba(255, 255, 255, .84);
font-size: var(--t-lead);
max-width: 400px;
margin: 0 auto;
}
.endereco {
margin-top: 30px;
padding: 18px 22px;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: var(--raio);
background: rgba(255, 255, 255, .07);
backdrop-filter: blur(6px);
font-size: var(--t-body);
line-height: var(--lh-solta);
}
.endereco strong {
display: block;
color: var(--azul-suave);
font-size: var(--t-2xs);
font-weight: var(--p-forte);
letter-spacing: var(--ls-label);
text-transform: uppercase;
margin-bottom: 6px;
}
.capa-cta {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 26px;
padding: 14px 30px;
background: var(--branco);
color: var(--azul-escuro);
border-radius: 999px;
font-weight: var(--p-forte);
font-size: var(--t-body);
text-decoration: none;
transition: transform .18s, box-shadow .18s;
}
.capa-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.seta-scroll {
position: absolute;
bottom: 26px; left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, .55);
font-size: var(--g-m);
text-decoration: none;
animation: pula 2s ease-in-out infinite;
z-index: 1;
}
@keyframes pula {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, 9px); }
}
/* ---------- Topo de loja ----------
O que havia aqui: `.abertura` (uma tela inteira com o escudo, o nome e
as quatro pastilhas de fato), `.contato` logo abaixo e o `.indice` de
categorias mais embaixo ainda. Três blocos empilhados para dizer uma
coisa só — quem somos — e o primeiro produto só aparecia depois de
duas telas no celular.
No lugar entra o topo que loja grande usa, nesta ordem e por este
motivo:
1. `.mx-util` — faixa fina com o envio e o endereço da loja. Nasceu
com quatro pastilhas (atacado, mínimo, envio, horário) e em 1 de
outubro de 2026 o dono mandou deixar só o envio e o endereço: as
outras três já estão no cartão da marca, logo abaixo, e repetidas
aqui viravam ruído numa faixa que é leitura de uma vez só. Ela some
na rolagem.
2. `.mx-topo` — barra fixa com marca, busca grande e o botão de
pedido. Fica colada no alto: quem compra quarenta modelos busca,
não navega, e a busca precisa estar sempre à mão.
3. `.mx-cats` — a linha das nove categorias, que é o que faltava. O
índice antigo ficava no meio da página e, passado ele, o cliente
não tinha mais como trocar de categoria sem rolar de volta.
4. `.mx-trilha`, `.mx-destaque`, `.mx-selos` — trilha com os números
do catálogo, o cartão da marca ao lado de um carrossel que vende, e
as quatro garantias. É o que sobrou da abertura, encolhido para
caber na mesma dobra do primeiro produto.
O índice de ícones saiu de vez: ele era o terceiro lugar para escolher
categoria, e a linha `.mx-cats` agora filtra a página de verdade. Quem
ainda monta o índice é o `catalogo-pdf.html`. */
.mx-util {
background: var(--mx-noite);
color: #c3d4ec;
font-size: var(--t-2xs);
font-weight: var(--p-medio);
}
/* rola na horizontal no celular em vez de quebrar em duas linhas: a
faixa tem de continuar valendo uma linha de 30px */
.mx-util-inner {
max-width: var(--mx-largura);
margin: 0 auto;
padding: 0 20px;
height: 34px;
display: flex;
align-items: center;
gap: 22px;
/* Centralizado desde 1 de outubro de 2026. Eram quatro pastilhas e o
endereço na outra ponta, e `space-between` fazia sentido; com dois
itens só, as pontas deixavam um vão enorme no meio da faixa. */
justify-content: center;
overflow-x: auto;
scrollbar-width: none;
}
.mx-util-inner::-webkit-scrollbar { display: none; }
.mx-util b { color: var(--branco); font-weight: var(--p-forte); }
.mx-util span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.mx-util svg {
width: 13px; height: 13px;
flex-shrink: 0;
fill: none;
stroke: var(--azul-claro);
stroke-width: 2;
}
/* fio separando os dois, no lugar do antigo empurrão para a borda */
.mx-util .mx-fim {
padding-left: 22px;
border-left: 1px solid rgba(255, 255, 255, .18);
color: #9db4d2;
}
/* A pilha fixa: barra principal + categorias. A faixa utilitária fica
FORA dela de propósito — presa, roubaria 34px de tela em todo o
catálogo para repetir o que o cliente já leu. */
.mx-topo {
position: sticky;
top: 0;
z-index: 90;
background: linear-gradient(180deg, var(--azul) 0%, var(--azul-escuro) 100%);
box-shadow: 0 2px 14px rgba(9, 22, 48, .28);
}
.mx-barra {
max-width: var(--mx-largura);
margin: 0 auto;
padding: 11px 20px;
display: flex;
align-items: center;
gap: 16px;
}
.mx-marca { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.mx-marca img { width: 34px; height: auto; }
.mx-marca b {
display: block;
color: var(--branco);
font-size: var(--t-h4);
font-weight: 800; /* peso de logotipo, como no impresso */
letter-spacing: .04em;
line-height: var(--lh-aperta);
text-transform: uppercase;
}
/* "CASE" centralizado sob "ALPHA". O `text-indent` compensa o espaco que
o `letter-spacing` deixa depois da ultima letra: sem ele a palavra fica
um fio a esquerda do centro, que e justamente o que o dono viu. */
.mx-marca i {
display: block;
margin-top: 2px;
font-style: normal;
text-align: center;
text-indent: var(--ls-marca);
color: var(--azul-suave);
font-size: var(--t-3xs);
font-weight: var(--p-forte);
letter-spacing: var(--ls-marca);
text-transform: uppercase;
}
/* A busca ocupa o meio da barra e cresce com a tela. Era um campo
discreto numa barra branca; aqui ela é o que o olho acha primeiro. */
.mx-busca {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
background: var(--branco);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}
.mx-busca .lupa { padding-left: 14px; }
.mx-busca #busca {
flex: 1;
min-width: 0;
padding: 12px;
border: none;
background: none;
font: inherit;
font-size: var(--t-lead);
color: var(--texto);
outline: none;
}
.mx-busca #busca::placeholder { color: #93a0b4; }
/* azul claro e não âmbar: o âmbar é do botão de pedido, e dois âmbares
na mesma barra deixariam de apontar para um caminho só */
.mx-busca button {
flex-shrink: 0;
align-self: stretch;
padding: 0 20px;
border: none;
background: var(--azul-claro);
color: #10243f;
font: inherit;
font-size: var(--t-sm);
font-weight: var(--p-bold);
cursor: pointer;
}
.mx-busca button:hover { background: var(--azul-suave); }
.mx-atend { display: flex; align-items: center; gap: 9px; flex-shrink: 0; color: var(--branco); text-decoration: none; }
/* A marca do WhatsApp, e não um borrão verde. `fill: var(--zap)` pintava
bolha e fone da mesma cor, e o desenho sumia dentro de si mesmo. O
botão flutuante sempre fez o certo: círculo verde, traço branco. */
.mx-atend svg {
width: 30px; height: 30px;
flex-shrink: 0;
padding: 6px;
border-radius: 50%;
background: var(--zap);
fill: #fff;
}
.mx-atend small {
display: block;
color: var(--azul-suave);
font-size: var(--t-3xs);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.mx-atend b { display: block; font-size: var(--t-body); font-weight: var(--p-bold); }
.mx-cta {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 9px;
padding: 11px 20px;
border-radius: 10px;
background: var(--promo);
color: #3d2a00;
font-size: var(--t-body);
font-weight: var(--p-bold);
text-decoration: none;
white-space: nowrap;
}
.mx-cta:hover { background: var(--promo-borda); }
.mx-cta svg { width: 18px; height: 18px; fill: currentColor; }
.mx-cta .mx-curto { display: none; }
/* A linha de categorias. Sem `overflow` no desktop de propósito: scroll
aqui recorta o mega-menu, que é filho absoluto desta caixa — foi assim
que ele ficou invisível na primeira montagem. No celular o scroll
volta, e lá o mega-menu não existe. */
.mx-cats { position: relative; border-top: 1px solid rgba(255, 255, 255, .14); }
/* A linha de categorias é navegação, não texto corrido: pode passar da
coluna de leitura de 1220px para caber maior. O teto é 1400px e ela
nunca encosta nele em tela pequena, porque `max-width` cede primeiro.
O que não pode é voltar a rolar: rolagem recorta o mega-menu. */
.mx-cats-inner {
position: relative;
max-width: 1400px;
margin: 0 auto;
padding: 0 14px;
display: flex;
align-items: stretch;
/* No computador a linha NÃO rola, e o motivo é o mega-menu.
`overflow-x: auto` obriga o navegador a tratar o eixo vertical como
`auto` também, e o painel que desce de cada categoria passa a ser
recortado na altura da própria linha — ou seja, some. Era isso que o
dono via: passava o mouse e não aparecia nada, e ainda sobrava
categoria cortada na direita.
Então a linha passou a caber: os dez itens entram em 1220px porque o
ícone saiu de cada um (eram ~26px cada, 260px no total, quase
exatamente a sobra). O texto continua do tamanho que ele pediu em 1
de outubro — era o ícone que estava pagando a conta errada.
No celular ela volta a rolar, e lá o mega-menu já não existe. */
justify-content: center;
overflow: visible;
gap: 2px;
}
.mx-cats-inner::-webkit-scrollbar { display: none; }
.mx-cat { position: relative; display: flex; }
/* Maior e mais legível a pedido do dono, em 1 de outubro de 2026: era
11px num azul lavado, e ele leu como falta de capricho. O texto subiu
para o corpo pequeno padrão, clareou, e a área de clique cresceu — sem
virar botão, que competiria com o de pedido logo acima. */
/* Maior de novo, a pedido do dono em 2 de outubro de 2026: ele quer que
o cliente ache a categoria sem procurar. Subiu para o corpo padrão,
ganhou altura (que não custa largura nenhuma) e o texto clareou para
o branco — o azul lavado de antes era metade do problema de "ficar
visível". A largura paga isso no teto de 1400px da linha. */
.mx-cat > a {
display: flex;
align-items: center;
gap: 8px;
padding: 16px 15px;
border-bottom: 3px solid transparent;
border-radius: 8px 8px 0 0;
color: #f2f7fd;
font-size: var(--t-body);
font-weight: var(--p-bold);
text-decoration: none;
white-space: nowrap;
transition: background .14s ease, color .14s ease;
}
/* o fundo acende antes do fio: o olho pega a área, não a linha fina */
.mx-cat:hover > a { background: rgba(255, 255, 255, .08); }
/* o ícone saiu da aba para a linha caber inteira; ele continua montado no
HTML porque o mega-menu e a gaveta do PDF ainda o usam */
.mx-cat > a svg { display: none; }
.mx-cat:hover > a,
.mx-cat.ativo > a { color: var(--branco); border-bottom-color: var(--promo); }
.mx-cat:hover > a svg,
.mx-cat.ativo > a svg { opacity: 1; }
/* A linha é um filtro, então precisa dizer o que está ligado sem o
cliente ter de procurar: a escolhida acende com o fundo âmbar da marca
e as outras recuam. Fio embaixo sozinho era pouco — some assim que a
página rola e a aba sai do campo de visão do olho. */
.mx-cat.ativo > a {
background: var(--promo);
color: var(--azul-escuro);
border-bottom-color: var(--promo);
}
.mx-cat.apagada > a { opacity: .45; }
.mx-cat.apagada:hover > a { opacity: 1; }
/* "Todas" só aparece como botão de desfazer quando há o que desfazer */
.mx-todas > a { gap: 7px; }
.mx-cat.mx-todas.ativo > a { background: rgba(255, 255, 255, .14); color: var(--branco); }
/* Mega-menu: as faixas REAIS da categoria, as mesmas do catálogo
impresso. Não é decoração — clicar numa faixa escreve o nome dela na
busca, e o filtro que já existe responde. */
.mx-mega {
display: none;
grid-template-columns: minmax(0, 1fr) 148px;
gap: 18px;
position: absolute;
top: 100%;
left: 0;
width: 680px;
padding: 18px;
background: var(--branco);
border-radius: 0 0 12px 12px;
box-shadow: 0 18px 40px rgba(9, 22, 48, .26);
z-index: 5;
}
.mx-cat:hover .mx-mega,
.mx-cat:focus-within .mx-mega { display: grid; }
/* As três últimas abrem para a esquerda, senão o painel sai da tela.
Isto é a rede, não a regra: quantas abas estouram depende da LARGURA da
janela, e três é só o que bastava numa tela larga. Quem encaixa de
verdade é o `encaixarMega` do cards.js, que mede. Se o JS não rodar,
estas três continuam resolvidas. */
.mx-cat:nth-last-child(-n+3) .mx-mega { left: auto; right: 0; }
.mx-mega h4 {
grid-column: 1 / -1;
min-width: 0;
color: var(--azul-escuro);
font-size: var(--t-body);
font-weight: var(--p-bold);
}
.mx-mega h4 span {
display: block;
margin-top: 3px;
color: var(--texto-fraco);
font-size: var(--t-2xs);
font-weight: var(--p-medio);
}
/* `min-width: 0` obrigatório: item de grid tem largura mínima de
conteúdo, e um nome de faixa comprido empurrava a foto para fora do
painel */
.mx-mega ul { min-width: 0; columns: 2; column-gap: 22px; column-rule: 1px solid var(--borda-fina); list-style: none; }
.mx-mega li { break-inside: avoid; border-bottom: 1px solid var(--borda-fina); }
/* Nome comprido ganha uma segunda linha em vez de virar reticências: o
lojista procura a faixa pelo nome inteiro ("3D privacidade Motorola"),
e meio nome não se procura. Duas linhas é o teto — na terceira a
coluna vira parágrafo. */
.mx-mega li a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
padding: 4px 0;
color: var(--texto);
font-size: var(--t-xs);
line-height: 1.35;
text-decoration: none;
overflow: hidden;
}
/* Faixa sob o mouse (ou sob o Tab). A lista tinha 14 nomes empilhados sem
nada separando um do outro, e o dono leu isso como falta de acabamento.
Três coisas resolvem: fio entre as linhas, régua entre as colunas, e
este realce, que também é o que diz de quem é a foto ao lado. */
.mx-mega li a.mirando,
.mx-mega li a:hover,
.mx-mega li a:focus-visible {
margin-inline: -8px;
padding-inline: 8px;
border-radius: 6px;
background: var(--azul-fundo);
color: var(--azul-escuro);
font-weight: var(--p-forte);
}
/* a troca de foto não pode piscar: o painel inteiro ficaria nervoso */
.mx-mega-foto img { transition: opacity .12s ease; }
.mx-mega li a:hover { color: var(--azul); text-decoration: underline; }
.mx-mega-foto {
align-self: start;
border: 1px solid var(--borda);
border-radius: 10px;
overflow: hidden;
background: var(--branco);
}
.mx-mega-foto img { width: 100%; height: 118px; object-fit: contain; }
.mx-mega-foto b {
display: block;
padding: 7px 9px;
border-top: 1px solid var(--borda-fina);
background: var(--cinza);
color: var(--azul);
font-size: var(--t-2xs);
font-weight: var(--p-bold);
text-align: center;
}
.mx-mega-tudo {
grid-column: 1 / -1;
padding-top: 10px;
border-top: 1px solid var(--borda-fina);
color: var(--azul);
font-size: var(--t-xs);
font-weight: var(--p-bold);
text-decoration: none;
}
/* ---------- Trilha e números ---------- */
.mx-trilha { background: var(--branco); border-bottom: 1px solid var(--borda); }
.mx-trilha-inner {
max-width: var(--mx-largura);
margin: 0 auto;
padding: 10px 20px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
color: var(--texto-fraco);
font-size: var(--t-xs);
}
.mx-trilha a { color: var(--azul); font-weight: var(--p-forte); text-decoration: none; }
.mx-trilha b { color: var(--texto); font-weight: var(--p-forte); }
.mx-trilha .mx-nums { margin-left: auto; display: flex; gap: 14px; }
.mx-trilha .mx-nums strong { color: var(--azul); font-weight: var(--p-bold); }
/* ---------- Destaque: a marca à esquerda, o catálogo vendendo à direita ----------
É o que restou da abertura de tela cheia. O escudo e o nome continuam,
com as mesmas quatro pastilhas de fato; o que mudou é que agora dividem
a faixa com um carrossel montado a partir dos próprios dados — a maior
linha do catálogo, as promoções e o pedido online. */
.mx-destaque {
/* acompanha a largura da barra de categorias, e não a coluna de
leitura: a faixa de novidades é vitrine, não texto */
max-width: 1400px;
margin: 0 auto;
padding: 18px 0 6px;
display: grid;
/* uma coluna só desde que o cartão da marca saiu: o carrossel é o
único ocupante e ficar em 1fr ao lado de nada abriria buraco */
grid-template-columns: 1fr;
gap: 16px;
}
.mx-cartao-marca {
display: flex;
flex-direction: column;
justify-content: center;
padding: 22px 20px;
border-radius: var(--raio);
background:
radial-gradient(120% 80% at 50% 0%, rgba(93, 154, 214, .34) 0%, transparent 62%),
linear-gradient(180deg, var(--azul) 0%, var(--azul-escuro) 100%);
color: var(--branco);
text-align: center;
}
.mx-cartao-marca img { width: 74px; height: auto; margin-inline: auto; }
.mx-cartao-marca h1 {
margin-top: 10px;
font-size: var(--t-h3);
font-weight: 800;
letter-spacing: var(--ls-hero);
line-height: var(--lh-aperta);
text-transform: uppercase;
}
/* CAPAS entre dois fios, como na capa impressa. O `text-indent` compensa
o espaçamento largo, que sobra depois do último S. */
.mx-capas {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 7px;
color: var(--azul-suave);
font-size: var(--t-2xs);
font-weight: var(--p-forte);
letter-spacing: var(--ls-marca);
text-indent: var(--ls-marca);
text-transform: uppercase;
}
.mx-capas i { flex: 1; max-width: 54px; height: 1px; background: var(--azul-claro); }
/* As duas regras do atacado, dentro do cartão da marca. Contorno em vez
de fundo cheio: o cartão já é azul sólido, e pastilha preenchida aqui
brigaria com o botão de pedido, que é quem deve receber o clique. */
.mx-fatos {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 7px;
margin-top: 13px;
list-style: none;
}
.mx-fatos li {
padding: 4px 11px;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 999px;
color: var(--azul-suave);
font-size: var(--t-3xs);
font-weight: var(--p-medio);
white-space: nowrap;
}
.mx-chamada {
margin-top: 14px;
color: var(--azul-suave);
font-size: var(--t-sm);
line-height: var(--lh-corpo);
}
/* O banner tinha fundo branco liso e texto cinza: lido na tela, parecia
um aviso de documento, não a vitrine de uma loja. O azul da marca
entra por baixo em degradê e a foto ganha um halo claro, para o
produto flutuar em vez de ficar num quadrado branco recortado. */
/* ══════════════ A vitrine ══════════════
Substituiu o carrossel de três banners em 1 de outubro de 2026. O
princípio: no lugar mais nobre da página vai PRODUTO COM PREÇO, não
anúncio. E não se mexe sozinho — troca no clique da aba. */
/* ---------- Acabou de chegar ----------
A faixa mais nobre da página, e por isso a única que carrega arte: um
azul da marca em degradê, o clarão que o escudo já usa no cartão e uma
trama fina de pontos por cima. Tudo em CSS — a faixa não vale um
arquivo de imagem no caminho crítico, e assim ela também funciona
aberta direto do arquivo, sem servidor. */
.mx-novo {
position: relative;
/* `min(...)` e não `max-width: 1400px` puro: em monitor de 1280 o teto
de 1400 estourava a janela e a página inteira ganhava barra de
rolagem horizontal. Assim a faixa cede primeiro. */
max-width: min(1400px, calc(100% - 40px));
margin: 18px auto 0;
padding: 14px 20px 12px;
border-radius: var(--raio);
overflow: hidden;
background:
radial-gradient(90% 130% at 88% 0%, rgba(93, 154, 214, .38) 0%, transparent 58%),
linear-gradient(145deg, var(--azul) 0%, var(--azul-escuro) 62%, var(--mx-noite) 100%);
}
/* a trama: pontos de 1px a cada 22px, quase invisíveis, só para o fundo
não ser uma chapa lisa */
.mx-novo::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px);
background-size: 22px 22px;
pointer-events: none;
}
.mx-novo > * { position: relative; }
/* O título fica centralizado em cima dos cards, e não numa coluna à
esquerda. A coluna comia 240px da largura para carregar uma palavra;
em cima, a mesma palavra não custa largura nenhuma e os dois cards
ficam com a faixa inteira. */
.mx-novo-cabeca {
position: relative;
margin-bottom: 14px;
text-align: center;
}
/* as setas na ponta direita da linha do título, sem roubar a altura */
.mx-novo-setas {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
.mx-novo-pontos { justify-content: center; margin-top: 12px; }
/* Uma palavra só, e ela sozinha precisa segurar a faixa: caixa alta,
letra espaçada e um fio âmbar por baixo, do tamanho da palavra. Sem o
fio ela ficava boiando no azul. */
.mx-novo h2 {
display: inline-block;
padding-bottom: 9px;
border-bottom: 3px solid var(--promo);
color: var(--branco);
font-size: var(--t-h2);
font-weight: 800;
line-height: var(--lh-aperta);
letter-spacing: .06em;
text-transform: uppercase;
}
.mx-novo-setas { display: flex; gap: 8px; }
.mx-novo-setas button {
width: 38px; height: 38px;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 999px;
background: rgba(255, 255, 255, .1);
color: var(--branco);
font: inherit;
font-size: var(--g-m);
line-height: 1;
cursor: pointer;
transition: background .14s ease, opacity .14s ease;
}
.mx-novo-setas button:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.mx-novo-setas button:disabled { opacity: .3; cursor: default; }
/* o trilho rola na horizontal e encaixa card a card */
.mx-novo-trilho {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: 2px;
}
.mx-novo-trilho::-webkit-scrollbar { display: none; }
/* uma bolinha por novidade: diz quantas são e leva direto à escolhida */
/* Quebram em duas linhas quando sao muitas — na Black a faixa mostra as
ofertas todas, e vinte bolinhas numa linha so nao cabem no celular: sem
o wrap elas se esmagam uma contra a outra e a ativa, que cresce para
26px, deixa de ser distinguivel das outras. */
.mx-novo-pontos {
display: flex; flex-wrap: wrap;
justify-content: center; gap: 7px;
margin-top: 14px;
}
.mx-novo-pontos button {
width: 8px; height: 8px;
padding: 0;
border: none;
border-radius: 999px;
background: rgba(255, 255, 255, .34);
cursor: pointer;
transition: width .16s ease, background .16s ease;
}
.mx-novo-pontos button.ativo { width: 26px; background: var(--promo); }
/* Um produto por vez, deitado: a foto à esquerda e o texto à direita.
A fileira de seis cards em pé ocupava quase uma tela — o dono pediu
menor e passando um a um. Deitado, a mesma informação cabe em 160px
de altura. */
/* O slide é o mesmo no computador e no celular: foto grande em cima,
nome e preço embaixo, tudo num bloco estreito no meio da faixa.
Chegou aqui por eliminação. Deitado e esticado de ponta a ponta, a
foto encolhia de um lado e o preço ia parar no outro extremo da tela,
longe do nome a que ele pertence. O dono aprovou a forma empilhada do
celular e recusou a deitada do computador — então as duas viraram uma
só, e o azul da faixa faz o papel de moldura em volta. */
/* Duas peças, e a divisão importa: o SLIDE ocupa a faixa inteira, porque
é ele que o trilho encaixa; a CAIXA branca é estreita e fica no meio.
Quando o branco era o próprio slide, ele esticava de ponta a ponta e o
produto ficava perdido no meio de uma chapa branca. */
.mx-nv {
/* dois por tela: metade do trilho menos metade do vão entre eles */
flex: 0 0 calc(50% - 7px);
scroll-snap-align: start;
display: flex;
justify-content: center;
text-decoration: none;
color: var(--texto);
}
/* A coluna do texto era `1fr` e o nome ficava colado na esquerda, com
todo o vão sobrando à direita — meia caixa branca vazia. Agora o
conjunto foto+texto se centraliza e o texto vem centrado nele, então
o branco que sobra fica repartido dos dois lados em vez de empilhado
num canto só. */
.mx-nv-caixa {
display: grid;
grid-template-columns: 168px minmax(0, 300px);
justify-content: center;
align-items: center;
column-gap: 16px;
row-gap: 2px;
width: 100%;
padding: 12px;
border-radius: 12px;
background: var(--branco);
transition: box-shadow .14s ease;
}
.mx-nv:hover .mx-nv-caixa { box-shadow: 0 14px 28px rgba(5, 15, 36, .34); }
/* Sem moldura. A foto ficava dentro de um quadro cinza arredondado, e
como toda foto de produto já vem com fundo branco, o que se via era
uma borda cinza em volta de um produto pequeno — margem gasta de
graça. Tirado o quadro, o mesmo espaço cabe um produto bem maior, e o
branco da foto encosta no branco do card sem emenda. */
.mx-nv-foto {
display: flex;
align-items: center;
justify-content: center;
grid-column: 1;
grid-row: 1 / span 2;
height: 150px;
}
.mx-nv-foto img { width: 100%; height: 100%; object-fit: contain; }
.mx-nv-nome {
grid-column: 2;
align-self: end;
color: var(--azul-escuro);
font-size: var(--t-h4);
text-align: center;
font-weight: var(--p-bold);
line-height: var(--lh-densa);
/* duas linhas e para: nome comprido não pode empurrar o preço para
fora do card e deixar a fileira desalinhada */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.mx-nv-preco {
grid-column: 2;
align-self: start;
text-align: center;
color: var(--azul);
font-size: var(--t-preco-xl);
font-weight: var(--p-bold);
line-height: var(--lh-justa);
}
.mx-nv-preco small {
display: block;
margin-top: 1px;
color: var(--texto-fraco);
font-size: var(--t-3xs);
font-weight: var(--p-medio);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
@media (max-width: 720px) {
.mx-novo { margin: 12px 12px 0; padding: 18px 14px 20px; border-radius: 12px; }
.mx-novo h2 { font-size: var(--t-h3); }
.mx-novo-setas { display: none; }
.mx-novo-pontos { justify-content: center; }
.mx-nv { flex-basis: 100%; }
.mx-nv-caixa { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 12px; }
.mx-nv-foto { grid-column: 1; grid-row: auto; height: 160px; }
.mx-nv-nome { grid-column: 1; align-self: auto; text-align: center; }
.mx-nv-preco { grid-column: 1; align-self: auto; text-align: center; }
.mx-nv-foto { height: 118px; }
}
.mx-selos {
max-width: var(--mx-largura);
margin: 0 auto;
padding: 12px 20px 0;
display: grid;
/* `auto-fit` e não `repeat(4, …)`: os selos já foram quatro e hoje são
dois, e no dia em que voltarem a ser três a linha se ajusta sozinha
em vez de abrir buraco */
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 10px;
}
.mx-selos div {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 13px;
border: 1px solid var(--borda);
border-radius: 11px;
background: var(--branco);
}
.mx-selos svg {
width: 22px; height: 22px;
flex-shrink: 0;
fill: none;
stroke: var(--azul-claro);
stroke-width: 2;
}
/* a caixa fechada é desenho, não traço: é o mesmo símbolo que o lojista
vê nos cards e no catálogo impresso, e redesenhá-lo em SVG só produziu
uma caixa amassada */
.mx-selos .selo-caixa { width: 22px; height: auto; flex-shrink: 0; }
.mx-selos b { display: block; color: var(--azul-escuro); font-size: var(--t-xs); font-weight: var(--p-bold); }
.mx-selos small { display: block; margin-top: 1px; color: var(--texto-fraco); font-size: var(--t-2xs); line-height: var(--lh-densa); }
/* ---------- Filtros, logo antes dos produtos ---------- */
.mx-filtros {
max-width: var(--mx-largura);
margin: 0 auto;
padding: 20px 20px 0;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.mx-rotulo {
color: var(--texto-fraco);
font-size: var(--t-xs);
font-weight: var(--p-forte);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.mx-filtros .chips { flex: 1; }
.mx-filtros .contagem { margin-top: 0; }
/* ---------- Topo no celular ----------
860px: o destaque deixa de ser duas colunas.
720px: a barra vira escudo + busca + "Pedido". O nome escrito sai da
barra fixa porque a busca precisa da largura, e ele volta grande no
cartão da marca logo abaixo — o escudo continua lá, a marca nunca
desaparece da barra.
520px: só o escudo. */
/* Abaixo de 1200px a linha volta a rolar — e o mega-menu some junto.
Sem isto ela ficava num limbo: `overflow: visible` para o painel não ser
recortado, mas os dez itens pedem ~1130px e um 1024 oferece ~1010. Não
cabia e não rolava, então quem estourava era a PÁGINA: rolagem
horizontal no site inteiro e a última categoria cortada. Medido em
1024px antes do conserto: página 1128px numa janela de 1024.
O painel sumir aqui não é perda. Nessa largura a tela quase sempre é de
toque, e menu que abre no passar do mouse não existe no toque — o
clique na categoria já filtra, que é o caminho de verdade. */
@media (max-width: 1200px) {
.mx-cats-inner {
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
}
.mx-mega { display: none !important; }
}
/* Em monitor menor a linha aperta os vãos em vez de rolar: dez itens
maiores pedem ~1290px e um 1280 oferece ~1250. Quatro pixels por item
pagam a diferença com folga, e o texto não encolhe — encolher o texto
era justamente o que o dono não queria. */
@media (max-width: 1400px) {
.mx-cat > a { padding: 16px 11px; }
}
/* O painel fica aberto por cima do que a pessoa acabou de escolher: ela
clica em "Capas Aveludadas", a página rola até lá e o mouse continua
parado sobre a aba, então o mega-menu cobre o primeiro produto. Some
até o mouse sair da aba. */
.mx-cat.trancada .mx-mega { display: none !important; }
@media (max-width: 860px) {
.mx-destaque { grid-template-columns: 1fr; }
.mx-selos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.mx-atend,
.mx-marca i,
.mx-busca button,
.mx-cta .mx-longo { display: none; }
.mx-cta .mx-curto { display: inline; }
.mx-mega { display: none !important; }
.mx-barra { gap: 8px; padding: 8px 12px; }
.mx-marca img { width: 26px; }
.mx-marca b { font-size: var(--t-body); }
.mx-busca #busca { padding: 10px 8px; font-size: var(--t-body); }
.mx-cta { gap: 7px; padding: 10px 13px; font-size: var(--t-sm); }
.mx-cta svg { width: 16px; height: 16px; }
.mx-cats { overflow: hidden; }
.mx-cats-inner { padding: 0 8px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
.mx-cat > a { padding: 9px; font-size: var(--t-2xs); }
/* o fio escuro na borda avisa que a tira de categorias corre */
.mx-cats::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0;
width: 34px;
pointer-events: none;
background: linear-gradient(90deg, rgba(26, 47, 92, 0), var(--azul-escuro));
}
.mx-util-inner { height: 30px; gap: 16px; padding: 0 12px; }
/* O endereço CABE no celular desde 1 de outubro de 2026, quando a
barra deixou de ter quatro pastilhas e ficou com uma. Enquanto
eram quatro, ele era a primeira coisa a sair por falta de espaço. */
.mx-trilha-inner { padding: 9px 12px; gap: 8px; }
.mx-trilha .mx-nums { margin-left: 0; width: 100%; gap: 12px; }
.mx-destaque { padding: 12px 12px 0; gap: 12px; }
.mx-cartao-marca { padding: 16px 14px; }
.mx-cartao-marca img { width: 48px; }
.mx-chamada { margin-top: 9px; }
.mx-selos { padding: 12px 12px 0; gap: 8px; }
.mx-filtros { padding: 16px 12px 0; }
}
@media (max-width: 520px) {
.mx-marca span { display: none; }
}
/* ---------- Índice ----------
Sem `min-height: 100svh`, e o motivo importa.
A ideia era o índice ocupar a primeira tela inteira. Funcionava em
monitor de 1280: as 9 categorias em 3 linhas davam quase exatamente a
altura da janela. Em monitor grande, não — o conteúdo continua com
689px e a seção esticava até 988px, deixando **179px de branco** entre
a última categoria e a busca. O vão dizia "acabou a página" bem onde
ela continua.
Sem altura forçada, quem manda no espaço é o padding, e ele é o mesmo
em qualquer tela. Medido em 1920×1080, 1280×900 e no celular. */
.indice {
padding: 56px 20px 64px;
background: var(--branco);
}
.indice-inner { max-width: 1000px; margin: 0 auto; }
.secao-titulo { text-align: center; margin-bottom: 30px; }
/* título grande em caixa alta grita; caixa mista lê mais rápido e
é o que as grandes marcas usam acima de ~20px */
.secao-titulo h2 {
font-size: var(--t-h2);
font-weight: var(--p-bold);
color: var(--azul-escuro);
letter-spacing: var(--ls-titulo);
line-height: var(--lh-titulo);
}
.secao-titulo h2 b { color: var(--azul-claro); font-weight: var(--p-bold); }
.secao-titulo .risco {
display: block;
width: 74px; height: 4px;
margin: 12px auto 0;
background: var(--azul-claro);
border-radius: 2px;
}
.secao-titulo p { color: var(--texto-fraco); font-size: var(--t-body); margin-top: 12px; }
/* grade de categorias, no estilo da folha de navegação do impresso */
#indice-lista {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 14px;
}
.indice-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 4px;
padding: 22px 14px 16px;
background: var(--cinza);
border: 1.5px solid #e6ecf5;
border-radius: 14px;
text-align: center;
text-decoration: none;
color: var(--texto);
transition: background .16s, border-color .16s, transform .16s, box-shadow .16s;
}
.indice-item:hover {
background: var(--branco);
border-color: var(--azul-claro);
transform: translateY(-3px);
box-shadow: 0 8px 22px rgba(26, 47, 92, .12);
}
.indice-item.ativo {
background: var(--branco);
border-color: var(--azul);
box-shadow: var(--sombra);
}
.indice-icone {
width: 54px; height: 54px;
margin-bottom: 10px;
color: var(--azul);
}
.indice-item.ativo .indice-icone { color: var(--azul-claro); }
/* sem caixa alta: o rótulo carrega nome de marca (MagSafe, MacBook)
e maiúscula apagaria a grafia oficial */
.indice-item strong {
font-size: var(--t-body);
font-weight: var(--p-forte);
line-height: var(--lh-densa);
letter-spacing: var(--ls-titulo);
color: var(--azul-escuro);
}
.indice-item small {
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid #e2e9f3;
width: 100%;
color: var(--texto-fraco);
font-size: var(--t-2xs);
font-weight: var(--p-medio);
}
/* ---------- Categorias ---------- */
.categoria { padding: 52px 20px 20px; scroll-margin-top: 12px; }
.categoria:nth-child(even) { background: var(--branco); }
.categoria-head {
max-width: 1100px;
margin: 0 auto 26px;
display: flex;
align-items: center;
gap: 15px;
padding-bottom: 16px;
border-bottom: 2px solid var(--azul-suave);
}
.categoria-num {
flex-shrink: 0;
width: 46px; height: 46px;
display: grid;
place-items: center;
background: linear-gradient(145deg, var(--azul), var(--azul-escuro));
color: var(--branco);
border-radius: 12px;
font-weight: var(--p-bold);
font-size: var(--t-h4);
font-variant-numeric: tabular-nums;
}
.categoria-head h2 {
font-size: var(--t-h3);
font-weight: var(--p-bold);
color: var(--azul-escuro);
letter-spacing: var(--ls-titulo);
line-height: var(--lh-titulo);
}
.categoria-head p { color: var(--texto-fraco); font-size: var(--t-body); margin-top: 3px; }
/* ---------- Blocos de produto ---------- */
.blocos {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 18px;
}
.bloco {
background: var(--branco);
border: 1px solid #e3e9f2;
border-radius: var(--raio);
box-shadow: var(--sombra);
overflow: hidden;
}
.categoria:nth-child(even) .bloco { background: var(--cinza); }
.bloco-head {
padding: 14px 18px;
background: linear-gradient(135deg, var(--azul) 0%, var(--azul-escuro) 100%);
color: var(--branco);
}
.bloco-head h3 {
font-size: var(--t-h4);
font-weight: var(--p-bold);
letter-spacing: var(--ls-titulo);
line-height: var(--lh-titulo);
}
.obs {
margin: 0;
padding: 10px 16px;
background: #fff6e5;
border-bottom: 1px solid #f0e2c8;
color: #8a5f14;
font-size: var(--t-sm);
font-weight: var(--p-medio);
}
/* imagem original à esquerda, tabelas à direita */
.bloco-corpo {
display: grid;
grid-template-columns: minmax(220px, 300px) 1fr;
gap: 18px;
padding: 16px;
align-items: start;
}
.foto {
position: sticky;
top: 118px;
margin: 0;
cursor: zoom-in;
}
.foto img {
width: 100%;
height: auto;
border: 1px solid #e3e9f2;
border-radius: 10px;
background: var(--cinza);
transition: box-shadow .18s, transform .18s;
}
.foto:hover img { box-shadow: 0 8px 24px rgba(26, 47, 92, .2); transform: translateY(-2px); }
.foto figcaption {
margin-top: 7px;
color: var(--texto-fraco);
font-size: var(--t-2xs);
font-weight: var(--p-medio);
letter-spacing: var(--ls-label);
text-align: center;
text-transform: uppercase;
}
.tabelas { min-width: 0; }
.secao-bloco + .secao-bloco { margin-top: 18px; padding-top: 14px; border-top: 2px solid #e8eef7; }
.secao-produto {
margin-bottom: 10px;
color: var(--azul-escuro);
font-size: var(--t-body);
font-weight: var(--p-bold);
letter-spacing: 0;
}
.tabela-marca + .tabela-marca { margin-top: 14px; }
.marca-nome { margin-bottom: 7px; }
.marca-tag {
display: inline-block;
padding: 3px 11px;
background: var(--azul-suave);
color: var(--azul-escuro);
border-radius: 999px;
font-size: var(--t-2xs);
font-weight: var(--p-forte);
letter-spacing: 0;
/* a tag É o nome da marca — "iPhone", não "IPHONE" */
}
.bloco table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.bloco thead th {
padding: 6px 8px;
border-bottom: 1.5px solid var(--azul-suave);
color: var(--texto-fraco);
font-size: var(--t-2xs);
font-weight: var(--p-forte);
letter-spacing: var(--ls-label);
text-transform: uppercase;
text-align: left;
}
.bloco thead th:last-child { text-align: right; }
.bloco tbody td { padding: 7px 8px; border-bottom: 1px solid #eef2f8; }
.bloco tbody tr:last-child td { border-bottom: none; }
.bloco tbody tr:hover { background: #f0f5fc; }
.preco { text-align: right; font-weight: var(--p-bold); color: var(--azul); white-space: nowrap; }
.caixa { color: #2f7d4f; }
.sem-resultado {
max-width: 560px;
margin: 0 auto;
padding: 26px;
text-align: center;
color: var(--texto-fraco);
font-size: var(--t-lead);
}
/* ---------- Ferramentas (busca + filtro) ----------
Fica só no `catalogo-pdf.html`, que continua com a barra branca antiga
— aquela página existe para virar papel e não ganha o topo de loja. No
catálogo, a busca e os chips mudaram para dentro da `.mx-topo` e da
`.mx-filtros`; a marca que estava aqui (`.fer-marca`) saiu junto, porque
agora o escudo e o nome moram na barra fixa nova.
`.campo-busca`, `.chips` e `.chip`, logo abaixo, são usados também pela
página de pedido — não são código morto. */
.ferramentas {
position: sticky;
top: 0;
z-index: 80;
padding: 12px 20px;
background: rgba(255, 255, 255, .93);
backdrop-filter: blur(10px);
border-bottom: 1px solid #e3e9f2;
}
.ferramentas-inner { max-width: 1100px; margin: 0 auto; }
.campo-busca {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 15px;
background: var(--cinza);
border: 1.5px solid #dde5f0;
border-radius: 999px;
transition: border-color .16s;
}
.campo-busca:focus-within { border-color: var(--azul-claro); background: var(--branco); }
.lupa { color: var(--azul-claro); font-size: var(--t-h4); transform: rotate(-45deg); }
#busca {
flex: 1;
min-width: 0;
border: none;
background: none;
font: inherit;
font-size: var(--t-lead);
color: var(--texto);
outline: none;
}
.chips {
display: flex;
gap: 7px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.chips:not(:empty) { margin-top: 10px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
flex-shrink: 0;
padding: 7px 15px;
background: var(--cinza);
border: 1.5px solid #dde5f0;
border-radius: 999px;
color: var(--texto-fraco);
font: inherit;
font-size: var(--t-sm);
font-weight: var(--p-forte);
white-space: nowrap;
cursor: pointer;
transition: background .16s, color .16s, border-color .16s;
}
.chip:hover { border-color: var(--azul-claro); }
.chip.ativo {
background: var(--azul);
border-color: var(--azul);
color: var(--branco);
}
/* promoção em âmbar: vermelho lê como aviso; âmbar convida sem alarmar */
.chip-promo {
background: #fdf4e6;
border-color: #e9a13b;
color: #8a5a12;
font-weight: var(--p-bold);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.chip-promo::before { content: '★ '; }
.chip-promo:hover { background: #fbe9cd; border-color: #d98f22; }
.chip-promo.ativo {
background: #e9a13b;
border-color: #e9a13b;
color: #3d2a00;
}
.contagem {
margin-top: 9px;
color: var(--azul);
font-size: var(--t-sm);
font-weight: var(--p-forte);
font-variant-numeric: tabular-nums;
}
.indice-item.indisponivel { opacity: .35; }
.voltar-topo {
display: block;
width: fit-content;
margin: 28px auto 0;
padding: 9px 20px;
color: var(--azul);
font-size: var(--t-body);
font-weight: var(--p-forte);
text-decoration: none;
border: 1.5px solid var(--azul-suave);
border-radius: 999px;
transition: background .16s, color .16s;
}
.voltar-topo:hover { background: var(--azul); color: var(--branco); border-color: var(--azul); }
/* ---------- Rodapé ---------- */
.rodape {
margin-top: 48px;
/* o padding de baixo é generoso de propósito: os botões flutuantes
ficam por cima e não podem cobrir o endereço */
padding: 48px 24px 96px;
background: linear-gradient(165deg, var(--azul) 0%, var(--azul-escuro) 100%);
color: var(--branco);
text-align: center;
}
/* `height: auto` não é enfeite: o traz height="91" escrito no HTML, e
sem uma regra de altura aqui aquele 91 vale e esmaga a imagem. O escudo
da Alpha é alto (241x420) e saía gordo no rodapé enquanto o do topo, que
já tinha height:auto, saía certo. Na Maresias o defeito era o mesmo, só
não aparecia porque a arte dela por acaso tem quase a proporção do
atributo. */
.rodape img { width: 78px; height: auto; margin: 0 auto 18px; opacity: .95; }
.rodape h3 { font-size: var(--t-h4); font-weight: var(--p-bold); letter-spacing: var(--ls-label); text-transform: uppercase; }
.rodape p { color: rgba(255, 255, 255, .74); font-size: var(--t-body); margin-top: 8px; line-height: var(--lh-solta); }
.rodape-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 24px;
}
.rodape-links a {
padding: 10px 20px;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 999px;
color: var(--branco);
font-size: var(--t-body);
text-decoration: none;
transition: background .16s;
}
.rodape-links a:hover { background: rgba(255, 255, 255, .14); }
.copyright {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, .14);
font-size: var(--t-xs);
color: rgba(255, 255, 255, .5);
}
/* ---------- Chamada para o pedido ----------
Lateral direita, acima do WhatsApp. Pulsa em âmbar: vermelho lê como
aviso ou erro, âmbar convida. Mesma cor do selo de promoção. */
.fazer-pedido {
position: fixed;
right: 16px; bottom: 76px;
z-index: 91;
display: flex;
align-items: center;
gap: 11px;
max-width: calc(100vw - 32px);
padding: 12px 20px 12px 15px;
background: linear-gradient(135deg, #f2ae4a 0%, var(--promo, #e9a13b) 100%);
border-radius: 999px;
color: #3d2a00;
text-decoration: none;
box-shadow: 0 6px 22px rgba(180, 118, 20, .45);
animation: chama-pedido 2.2s ease-in-out infinite;
transition: transform .18s;
}
.fazer-pedido:hover { transform: scale(1.04); animation: none; }
.fp-icone {
display: grid;
place-items: center;
width: 34px; height: 34px;
flex-shrink: 0;
background: rgba(255, 255, 255, .85);
border-radius: 50%;
}
.fp-icone svg { width: 19px; height: 19px; fill: #8a5a12; }
.fp-texto { line-height: 1.2; }
.fp-texto b { display: block; font-size: var(--t-body); font-weight: var(--p-bold); }
/* a frase curta só aparece no celular — ver o bloco de 560px mais abaixo */
.fp-curto { display: none; }
.fp-texto small {
display: block;
margin-top: 1px;
font-size: var(--t-2xs);
font-weight: var(--p-medio);
color: #6b4a08;
}
@keyframes chama-pedido {
0%, 100% { box-shadow: 0 6px 22px rgba(180, 118, 20, .45), 0 0 0 0 rgba(233, 161, 59, .6); }
50% { box-shadow: 0 6px 22px rgba(180, 118, 20, .45), 0 0 0 12px rgba(233, 161, 59, 0); }
}
@media (max-width: 560px) {
/* Dois botões flutuantes com texto tapavam a primeira fileira de cards.
O do pedido é o caminho da compra e mantém o texto; o WhatsApp vira
só o ícone, redondo, ao lado — continua à mão sem roubar a tela. */
.fazer-pedido { right: 12px; bottom: 14px; padding: 10px 16px 10px 12px; gap: 9px; }
.fp-icone { width: 30px; height: 30px; }
.fp-texto b { font-size: var(--t-sm); }
.fp-texto small { display: none; }
/* "Clique aqui e faça seu pedido" tem 29 letras: em tela de 375px o
botão passava de 250px, chegava perto do botão verde do WhatsApp e
os dois juntos tapavam o título da seção. "Fazer pedido" diz a mesma
coisa em 12. */
.fp-longo { display: none; }
.fp-curto { display: inline; }
}
/* ---------- Botão flutuante ---------- */
.zap {
position: fixed;
right: 16px; bottom: 16px;
display: flex;
align-items: center;
gap: 9px;
padding: 13px 20px;
background: #25d366;
color: #fff;
border-radius: 999px;
font-weight: var(--p-forte);
font-size: var(--t-body);
text-decoration: none;
box-shadow: 0 6px 22px rgba(37, 211, 102, .42);
z-index: 90;
transition: transform .18s;
}
.zap:hover { transform: scale(1.05); }
.zap svg { width: 20px; height: 20px; fill: currentColor; }
/* ---------- Lightbox ---------- */
#lightbox {
position: fixed;
inset: 0;
display: none;
place-items: center;
padding: 20px;
background: rgba(10, 18, 38, .93);
z-index: 200;
cursor: zoom-out;
}
#lightbox.aberto { display: grid; }
#lightbox img {
max-width: 100%;
max-height: 92vh;
width: auto;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
#lightbox::after {
content: 'Toque para fechar';
position: absolute;
bottom: 18px; left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, .55);
font-size: var(--t-xs);
letter-spacing: var(--ls-label);
}
#lightbox figcaption {
margin-top: 14px;
color: rgba(255, 255, 255, .85);
font-size: var(--t-body);
font-weight: var(--p-forte);
letter-spacing: 0;
text-align: center;
}
@media (max-width: 780px) {
.bloco-corpo { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
.foto { position: static; max-width: 340px; margin: 0 auto; }
}
@media (max-width: 560px) {
.categoria { padding: 40px 14px 16px; }
.ferramentas { padding: 10px 14px; }
/* corpo e rótulos já estão no piso da escala: só o que é grande encolhe */
.bloco table { font-size: var(--t-sm); }
/* WhatsApp vira ícone redondo. Com os dois botões escritos, eles
tapavam a primeira fileira de cards. O do pedido é o caminho da
compra e fica com o texto; este continua à mão sem roubar tela.
Precisa estar NESTE bloco: é o último @media do arquivo e sobrescreve
qualquer regra .zap declarada antes.
Empilhado em cima do botão de pedido, do mesmo lado, e não sozinho no
canto oposto. Solto na esquerda ele caía justamente onde o fundo azul
encontra o branco, e uma bolinha verde cortada por essa emenda parece
erro de página — o dono estranhou, e estava certo. Do mesmo lado, os
dois viram um bloco só: o olho entende que são as duas ações da
página, não dois enfeites.
A borda branca é o que garante isso em qualquer fundo: o verde do
WhatsApp encosta no azul da marca e some. */
.zap {
right: 14px;
left: auto;
bottom: 72px; /* 14 de base + 44 do botão + 14 de folga */
width: 52px; height: 52px;
padding: 0;
justify-content: center;
font-size: 0;
border: 3px solid var(--branco);
box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.zap svg { width: 26px; height: 26px; }
/* Índice em duas colunas no celular.
Com minmax(190px) ele caía para uma coluna só e as 9 categorias
ocupavam 2,2 telas — o cliente rolava o atalho inteiro antes de
chegar no produto. Em duas colunas cabe em pouco mais de uma tela. */
.indice { padding: 30px 14px 34px; }
.secao-titulo { margin-bottom: 20px; }
#indice-lista {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.indice-item { padding: 14px 8px 12px; border-radius: 11px; }
.indice-icone { width: 38px; height: 38px; margin-bottom: 6px; }
.indice-item strong { font-size: var(--t-sm); }
.indice-item small { margin-top: 4px; padding-top: 6px; font-size: var(--t-3xs); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation: none !important; transition: none !important; }
}
/* ==========================================================================
BLACK WEEK — 16 a 23 de outubro de 2026
Tudo aqui tem prazo. Nenhuma destas regras vale sozinha: elas so pegam
em elemento que o cards.js desenha quando a campanha esta no ar, e
depois do dia 23 nada na pagina casa com estes seletores. Por isso o
bloco pode ficar no arquivo sem fazer nada — nao e preciso subir uma
limpeza no domingo a noite para a loja voltar ao normal.
========================================================================== */
/* ---------- a tarja do topo ----------
Acima de tudo, com as tres coisas que o lojista precisa saber antes de
rolar: que ha campanha, quantas ofertas e quanto tempo resta. Mesma
largura e mesmo raio da faixa de novidades logo abaixo — sao duas
faixas coladas, e larguras diferentes deixariam um degrau. */
.mx-black-tarja {
display: flex;
align-items: center;
gap: 16px;
max-width: min(1400px, calc(100% - 40px));
margin: 18px auto 0;
padding: 13px 20px;
border: 1px solid var(--black-borda);
border-radius: var(--raio);
background:
radial-gradient(70% 180% at 92% 50%, rgba(240, 180, 41, .16) 0%, transparent 60%),
linear-gradient(100deg, var(--black-noite) 0%, var(--black-grafite) 58%, #241d14 100%);
color: var(--branco);
}
.mx-bt-marca {
flex-shrink: 0;
font-size: var(--t-h3);
font-weight: 800;
line-height: var(--lh-aperta);
letter-spacing: .07em;
text-transform: uppercase;
}
.mx-bt-marca b { color: var(--black-ouro); font-weight: 800; }
/* o fio de ouro separa a marca do recado sem desenhar uma borda inteira */
.mx-bt-texto {
display: flex;
flex-direction: column;
gap: 2px;
padding-left: 16px;
border-left: 2px solid rgba(240, 180, 41, .35);
}
.mx-bt-texto b { font-size: var(--t-lead); font-weight: var(--p-bold); }
.mx-bt-texto small {
color: var(--black-ouro);
font-size: var(--t-2xs);
font-weight: var(--p-forte);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
/* O unico botao de ouro cheio da pagina. Ele e o caminho curto para a
lista inteira, e e a acao que a tarja existe para oferecer. */
.mx-bt-botao {
flex-shrink: 0;
padding: 11px 20px;
background: var(--black-ouro);
border: none;
border-radius: 999px;
color: #2b1d00;
font: inherit;
font-size: var(--t-sm);
font-weight: var(--p-bold);
letter-spacing: var(--ls-label);
text-transform: uppercase;
cursor: pointer;
transition: background .16s, transform .16s;
}
.mx-bt-botao:hover { background: #ffc846; transform: translateY(-1px); }
/* ---------- a faixa de novidades vestida de Black ----------
E a MESMA faixa, com outra roupa: o azul da casa sai, o preto entra, e
o fio sob o titulo e as bolinhas passam de ambar a ouro. O trilho, as
setas e o passo automatico nao sabem que isso aconteceu. */
/* A faixa de novidades veste a campanha nas DUAS janelas — no teaser e
na campanha — e por isso pendura no `black-no-ar`, que e a classe do
clima, e nao no `mx-novo-black`, que o cards.js so poe quando ha
oferta. Sem isto ela ficava azul no meio de uma pagina preta: a tarja
escura logo acima e o bloco azul colado nela davam a impressao de duas
paginas emendadas. O que muda com a campanha e o CONTEUDO dela — o
titulo e os cards —, nao a roupa. */
.black-no-ar .mx-novo {
background:
radial-gradient(90% 130% at 88% 0%, rgba(240, 180, 41, .14) 0%, transparent 58%),
linear-gradient(145deg, var(--black-grafite) 0%, var(--black-noite) 70%, #000 100%);
}
.black-no-ar .mx-novo h2 { border-bottom-color: var(--black-ouro); }
.black-no-ar .mx-novo-pontos button.ativo { background: var(--black-ouro); }
/* "Ver todas" mora na quina esquerda da cabeca, de frente para as setas
que ocupam a direita — a faixa tem duas pontas livres e cada acao fica
numa delas, sem nenhuma empurrar o titulo do centro. */
.mx-novo-todas {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
padding: 7px 14px;
background: transparent;
border: 1.5px solid rgba(240, 180, 41, .5);
border-radius: 999px;
color: var(--black-ouro);
font: inherit;
font-size: var(--t-2xs);
font-weight: var(--p-bold);
letter-spacing: var(--ls-label);
text-transform: uppercase;
cursor: pointer;
transition: background .16s, border-color .16s;
}
.mx-novo-todas:hover { background: rgba(240, 180, 41, .14); border-color: var(--black-ouro); }
/* ---------- o chip do filtro ----------
Preto e ouro, e nao o ambar do chip de promocao ao lado: sao duas
vitrines diferentes e elas ficam lado a lado na mesma linha. */
.chip-black {
background: var(--black-grafite);
border-color: var(--black-borda);
color: var(--black-ouro);
font-weight: var(--p-bold);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.chip-black::before { content: '◆ '; }
.chip-black:hover { background: #26262e; border-color: var(--black-ouro); }
.chip-black.ativo {
background: var(--black-noite);
border-color: var(--black-ouro);
color: var(--black-ouro);
}
/* ---------- celular ----------
A tarja empilha: lado a lado, o botao de ouro espremia o recado em duas
linhas quebradas e a marca perdia a forca. Empilhada, o botao ocupa a
largura toda e fica no polegar. */
@media (max-width: 760px) {
.mx-black-tarja {
flex-direction: column;
align-items: stretch;
gap: 11px;
max-width: none;
margin: 12px 12px 0;
padding: 14px;
border-radius: 12px;
text-align: center;
}
.mx-bt-texto {
padding-left: 0;
padding-top: 10px;
border-left: none;
border-top: 2px solid rgba(240, 180, 41, .35);
align-items: center;
}
.mx-bt-botao { width: 100%; padding: 13px; }
/* as setas estao escondidas no celular (ver .mx-novo-setas acima), e com
elas fora a quina esquerda deixa de ser um lado so: o botao volta para
o fluxo, centrado sob o titulo, em vez de ficar sobreposto a ele */
.mx-novo-todas {
position: static;
transform: none;
display: block;
margin: 11px auto 0;
}
}
/* ==========================================================================
BLACK WEEK — a roupa da loja
Enquanto a campanha esta no ar, o cromo da pagina — as duas faixas do
topo, a linha de categorias e o rodape — troca o azul da casa por
grafite com realce de ouro. Nenhuma destas regras pega sem a classe
`black-no-ar` na raiz, que o comum.js so poe enquanto a data vale: no
dia 24 a loja amanhece azul sozinha.
O que NAO muda: o card. Ele continua azul, e por isso o card da oferta,
que e preto e ouro, continua saltando. Uma loja inteiramente preta
apagaria a diferenca entre o que esta em oferta e o que nao esta.
========================================================================== */
/* o cinza de fundo esfria menos: ao lado do grafite, o #f4f6fa puxava
para o azul e brigava com o topo */
.black-no-ar body { background: #f2f1ee; }
/* a faixa utilitaria some no preto e os destaques dela viram ouro */
.black-no-ar .mx-util {
background: #000;
color: #bdb4a2;
}
.black-no-ar .mx-util b { color: var(--black-ouro); }
/* a barra da marca, com um fio de ouro na base — e ele que amarra o topo
a tarja da campanha, que vem logo abaixo */
.black-no-ar .mx-topo {
background: linear-gradient(180deg, var(--black-grafite) 0%, var(--black-noite) 100%);
border-bottom: 2px solid var(--black-ouro);
box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.black-no-ar .mx-marca i { color: var(--black-ouro); }
/* os dois botoes do topo em ouro cheio: sao as duas acoes da barra, e no
grafite o ambar de sempre ficava apagado */
.black-no-ar .mx-cta { background: var(--black-ouro); }
.black-no-ar .mx-cta:hover { background: #ffc846; }
.black-no-ar .mx-busca button {
background: var(--black-ouro);
color: #2b1d00;
}
.black-no-ar .mx-busca button:hover { background: #ffc846; }
/* a categoria escolhida se marca pelo mesmo ouro, no lugar do ambar */
.black-no-ar .mx-cats { border-top-color: rgba(240, 180, 41, .25); }
.black-no-ar .mx-cat:hover > a,
.black-no-ar .mx-cat.ativo > a { border-bottom-color: var(--black-ouro); }
/* o rodape fecha a pagina do mesmo tom em que ela abre */
.black-no-ar .rodape {
background: linear-gradient(165deg, var(--black-grafite) 0%, var(--black-noite) 100%);
}
/* ---------- o relogio da tarja ----------
Quatro caixas de vidro sobre o preto, com o numero em ouro. Elas ficam
entre o recado e o botao de proposito: o olho vai da marca ao recado,
do recado ao prazo, e do prazo ao botao — a ordem em que a tarja
convence. */
.mx-bt-conta {
flex-shrink: 0;
display: flex;
gap: 6px;
}
.mx-bt-bloco {
min-width: 52px;
padding: 7px 8px 6px;
background: rgba(240, 180, 41, .1);
border: 1px solid rgba(240, 180, 41, .3);
border-radius: 9px;
text-align: center;
}
.mx-bt-bloco b {
display: block;
color: var(--black-ouro);
font-size: var(--t-h4);
font-weight: 800;
line-height: var(--lh-aperta);
/* sem isto o bloco dos segundos muda de largura a cada batida e a
tarja inteira treme de um em um segundo */
font-variant-numeric: tabular-nums;
}
.mx-bt-bloco small {
display: block;
margin-top: 2px;
color: rgba(255, 255, 255, .55);
font-size: var(--t-3xs);
font-weight: var(--p-forte);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.mx-bt-conta.encerrada {
color: rgba(255, 255, 255, .6);
font-size: var(--t-sm);
font-weight: var(--p-forte);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
@media (max-width: 760px) {
/* o relogio ganha a linha inteira e os quatro blocos a dividem por
igual: espremidos ao lado do recado, os segundos ficavam ilegiveis */
.mx-bt-conta { justify-content: center; }
.mx-bt-bloco { flex: 1; min-width: 0; }
}
/* ---------- o maior desconto, no vao da tarja ----------
A tarja tinha um palmo de preto vazio entre o recado e o relogio. Ele
nao era respiro: era a parte mais visivel da pagina sem nada dentro,
com o conteudo todo espremido nas duas pontas.
O que entra ali e o unico numero que resume a campanha inteira. As 27
ofertas caem de 13% a 50%, cada uma de um valor — "ate -50%" e a
frase que o lojista leva na cabeca antes de olhar produto nenhum, e e
verdade, varrida dos precos que o dono escreveu.
Ele toma o espaco que sobra (`flex: 1`) e se centra nele, entao a
tarja se reequilibra sozinha quando o texto muda de tamanho — "7
ofertas" numa campanha menor nao deixaria buraco de novo. */
.mx-bt-ate {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
line-height: var(--lh-aperta);
}
.mx-bt-ate small {
color: rgba(255, 255, 255, .5);
font-size: var(--t-3xs);
font-weight: var(--p-forte);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
/* o maior numero da tarja depois da propria marca — e e de proposito:
os dois sao o que se le de longe */
.mx-bt-ate b {
color: var(--black-ouro);
font-size: var(--t-h2);
font-weight: 800;
letter-spacing: -.01em;
}
@media (max-width: 760px) {
/* empilhada, ela vira uma linha so: na vertical, "descontos de ate"
em cima de "-50%" comia duas linhas de altura num lugar onde a
tarja ja tem quatro blocos de relogio para mostrar */
.mx-bt-ate {
flex: none;
flex-direction: row;
align-items: baseline;
gap: 9px;
}
.mx-bt-ate b { font-size: var(--t-h3); }
}
/* ---------- a tarja do teaser ----------
Mesma tarja da campanha, com dois ajustes. O botao e de contorno e nao
de ouro cheio: ouro cheio e a cor do "ver as ofertas", e nao ha oferta
para ver ainda — prometer com o mesmo peso o que ainda nao da para
fazer e o jeito mais rapido de gastar a atencao antes da hora.
E o recado vem em duas linhas de mesmo peso, porque aqui a data E a
noticia; na campanha, a noticia e o numero de ofertas e a data e so o
prazo. */
.mx-bt-teaser .mx-bt-botao {
background: transparent;
border: 1.5px solid var(--black-ouro);
color: var(--black-ouro);
text-decoration: none;
display: inline-flex;
align-items: center;
}
.mx-bt-teaser .mx-bt-botao:hover {
background: rgba(240, 180, 41, .14);
transform: translateY(-1px);
}
.mx-bt-teaser .mx-bt-texto small { color: var(--black-ouro); }
/* ==========================================================================
O CARTAZ DO TEASER
Enquanto a campanha nao comecou, este e o unico lugar da pagina que fala
dela — e por isso ele nao e uma tarja, e um cartaz. A tarja da campanha
divide a tela com 31 ofertas logo abaixo e tem de se comportar; aqui nao
ha nada competindo, e o que sobra de atencao e dele.
Tres pecas, em ordem de leitura: a marca grande, o tamanho do desconto,
o relogio. O botao fecha. Nenhuma delas diz QUAL e a oferta, que e o que
o dono pediu.
========================================================================== */
.mx-teaser {
display: flex;
align-items: center;
gap: 28px;
max-width: min(1400px, calc(100% - 40px));
margin: 18px auto 0;
padding: 26px 32px;
border: 1px solid var(--black-borda);
border-radius: var(--raio);
color: var(--branco);
/* o brilho dourado nasce atras do relogio, que e o centro do cartaz */
background:
radial-gradient(60% 150% at 72% 50%, rgba(240, 180, 41, .18) 0%, transparent 62%),
linear-gradient(104deg, #000 0%, var(--black-grafite) 52%, #241d14 100%);
}
.mx-teaser-capa { flex: 1; min-width: 0; }
.mx-teaser-chamada {
margin: 0 0 2px;
color: var(--black-ouro);
font-size: var(--t-2xs);
font-weight: var(--p-bold);
letter-spacing: .22em;
text-transform: uppercase;
}
/* O maior texto da pagina inteira enquanto o teaser esta no ar, e de
proposito: e a unica coisa que esta sendo anunciada. */
.mx-teaser-titulo {
margin: 0;
font-size: clamp(2rem, 5.2vw, 3.1rem);
font-weight: 800;
line-height: .95;
letter-spacing: .02em;
text-transform: uppercase;
}
.mx-teaser-titulo b { color: var(--black-ouro); font-weight: 800; }
.mx-teaser-linha {
margin: 10px 0 0;
color: rgba(255, 255, 255, .62);
font-size: var(--t-lead);
}
.mx-teaser-linha b { color: var(--branco); font-weight: var(--p-bold); }
/* O desconto fica no MEIO do cartaz, e nao empilhado sobre o relogio.
Empilhado, ele e o relogio formavam um bloco so na ponta direita e
sobrava um palmo de preto no centro — o dono viu e perguntou por que o
numero nao estava ali.
Com `flex: 1` nele e no texto da esquerda, os dois dividem a folga em
partes iguais e o numero cai no centro sozinho, em qualquer largura de
tela. Nao ha medida escrita em lugar nenhum. */
/* ---------- a placa do desconto ----------
Era texto solto no meio do preto, e ao lado do relogio — que tem quatro
caixas desenhadas — ele sumia. Agora e uma PLACA de ouro cheio com o
numero em preto.
A escolha do cheio e de hierarquia, nao de gosto. No cartaz tudo o mais
e contorno: as caixas do relogio, o botao. Uma unica peca preenchida
vira o ponto para onde o olho vai primeiro depois do titulo, e nao
disputa com ele porque o titulo e letra e esta e bloco.
O numero e o maior da placa e o rotulo cabe em cima dele, pequeno: quem
olha de longe le "50%", quem para meio segundo le "descontos de ate". */
.mx-teaser-ate {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
margin: 0;
padding: 12px 28px;
border-radius: 14px;
background: linear-gradient(145deg, #ffd166 0%, var(--black-ouro) 55%, #d99413 100%);
box-shadow: 0 6px 22px rgba(240, 180, 41, .26);
/* `flex: 1` daria a placa toda a folga do cartaz e ela viraria uma
faixa de ponta a ponta; o auto no basis deixa ela do tamanho do que
tem dentro, e a folga continua sendo dividida para centraliza-la */
flex-basis: auto;
flex-grow: 0;
}
/* o espaco entre o titulo e a placa, e entre a placa e o relogio, sai
daqui: dois vazios que crescem juntos e mantem a placa no centro */
.mx-teaser-capa { flex: 1; }
.mx-teaser-ate + .mx-bt-conta { margin-left: auto; }
.mx-teaser-ate small {
color: rgba(40, 26, 0, .7);
font-size: var(--t-3xs);
font-weight: var(--p-bold);
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1;
}
.mx-teaser-ate b {
color: #2b1d00;
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
font-weight: 800;
line-height: .98;
letter-spacing: -.02em;
}
.mx-teaser-botao {
flex-shrink: 0;
padding: 13px 24px;
border: 1.5px solid var(--black-ouro);
border-radius: 999px;
color: var(--black-ouro);
font-size: var(--t-sm);
font-weight: var(--p-bold);
letter-spacing: var(--ls-label);
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background .16s, transform .16s;
}
.mx-teaser-botao:hover {
background: rgba(240, 180, 41, .14);
transform: translateY(-1px);
}
@media (max-width: 860px) {
/* empilhado, o cartaz vira uma coluna centrada: lado a lado, o titulo
grande espremia o relogio ate os segundos ficarem ilegiveis */
.mx-teaser {
flex-direction: column;
gap: 18px;
max-width: none;
margin: 12px 12px 0;
padding: 22px 16px;
border-radius: 12px;
text-align: center;
}
/* empilhado o `flex: 1` nao tem folga para dividir, e so atrapalharia */
.mx-teaser-capa { flex: none; }
.mx-teaser-ate { flex: none; align-self: center; padding: 10px 26px; }
.mx-teaser .mx-bt-conta { width: 100%; justify-content: center; }
.mx-teaser .mx-bt-bloco { flex: 1; min-width: 0; }
.mx-teaser-botao { width: 100%; text-align: center; padding: 14px; }
}
/* ---------- a tarja da previa ----------
Fica colada no alto da janela, acima de tudo, e nao rola com a pagina:
o risco que ela existe para evitar e o dono esquecer que esta vendo uma
previa e contar ao cliente que a oferta ja esta no ar. Uma tarja que
sobe junto com a rolagem nao evita isso. */
.previa-black {
position: sticky;
top: 0;
z-index: 999;
padding: 7px 14px;
background: var(--corte);
color: #fff;
font-size: var(--t-2xs);
font-weight: var(--p-bold);
letter-spacing: var(--ls-label);
text-align: center;
text-transform: uppercase;
}