/* ═══════════════════════════════════════════════════════════════════════
As cores da Alpha Case.
O site nasceu da Maresias, que é azul-marinho e âmbar. Aqui a marca é
preto, dourado e o vermelho do escudo — o que está no cartão.
Os NOMES dos tokens continuam `--azul-*`, e isso é de propósito. Eles
aparecem em umas 400 linhas de CSS espalhadas por cinco arquivos;
renomear tudo seria uma varredura enorme com uma chance real de deixar
um para trás e ninguém notar. O nome virou o que sempre foi na
prática: "a cor da marca". Quem ler `--azul` aqui encontra preto, e
este comentário explica por quê.
O vermelho do escudo NÃO entra como cor de interface. Ele já é usado
pelo site para erro de preenchimento e para ação destrutiva, e duas
coisas opostas na mesma cor é como se erra em tela de pedido. Ele fica
onde nasceu: no logotipo.
═══════════════════════════════════════════════════════════════════════ */
:root {
--azul-escuro: #0d0d11; /* preto do cartão, o mais fundo */
--azul: #1a1a20; /* grafite: faixas, cabeçalhos, botões */
--azul-claro: #c9a227; /* dourado: fios, ícones, realce */
--azul-suave: #e6cf8a; /* dourado claro: texto de apoio sobre preto */
--branco: #ffffff;
--cinza: #f6f5f2; /* fundo de página, puxado para o quente */
--texto: #1b1b1f;
--texto-fraco: #6f6f78;
--raio: 14px;
--sombra: 0 4px 20px rgba(13, 13, 17, .12);
/* o vermelho do escudo, para o logotipo e nada mais */
--escudo: #c8102e;
/* ==========================================================
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.
preto = a marca e a navegação
dourado = "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.
Na Maresias o "olhe aqui" era âmbar e a marca era azul: duas cores
bem separadas. Aqui a marca é preta e o realce é dourado, que são
vizinhos no cartão — então o dourado do realce é mais saturado que
o dos fios do logotipo, para "promoção" não se confundir com
"enfeite".
========================================================== */
--promo: #e0a92a;
--promo-forte: #a97c12; /* texto dourado sobre claro */
--promo-escuro: #6d4e08; /* texto sobre fundo dourado claro */
--promo-fundo: #fdf6e3;
--promo-borda: #f0d590;
/* ---------- oferta: o dourado forte ----------
A promoção não muda de cor: muda de INTENSIDADE.
O erro original não era usar dourado, era usar o dourado errado. A
faixa vinha de #a97c12 para #6d4e08 — dourado escuro e dessaturado,
que sobre o preto do site vira marrom-oliva e não anuncia nada.
Passaram por aqui um vermelho e um violeta antes de ficar claro que
o problema era o tom, não a cor.
Agora a faixa vai de #edbe3c (dourado aceso, mais claro que o da
marca) para #c9a227 (o dourado da marca). Fica luminosa em vez de
terrosa, e é a marca em cheio: num catálogo de cards de faixa preta,
o card de promoção é o dourado.
A consequência que decide tudo: nesta escala o texto NÃO pode ser
branco. Branco sobre #edbe3c dá 1,9:1 — ilegível. Por isso existe
--oferta-tinta, o quase-preto que vai escrito NA faixa, e por isso
o fio do topo é preto e não dourado: sobre uma faixa dourada quem
amarra à marca é a outra metade dela.
--promo* continua dourado e continua sendo só o "preencha aqui" dos
campos. Os dois são dourados de propósito: um é a oferta em cheio,
o outro é fundo creme com fio. Não se encontram na mesma tela. */
--oferta: #edbe3c; /* dourado aceso: a faixa */
--oferta-forte: #c9a227; /* o dourado da marca: fim do gradiente e contornos */
--oferta-escuro: #6d4e08; /* texto dourado sobre fundo claro */
--oferta-tinta: #1c1503; /* texto escrito SOBRE a faixa dourada */
--oferta-fundo: #fdf6e3;
--oferta-borda: #f0d590;
--ok: #2f7d4f; /* economia, confirmado */
--ok-fundo: #f0f8f3;
--ok-borda: #b8dcc6;
--zap: #25d366; /* verde do WhatsApp — só nele */
--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 */
/* fundo do aviso da marca e da linha escolhida. Creme e não cinza: com
a marca preta, um cinza claro aqui não se distingue do fundo da
página, e a linha que o cliente acabou de preencher some. */
--azul-fundo: #f7f1e2;
/* Í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: 14px;
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); }
}
/* ---------- Abertura ----------
Primeira coisa da página. Era uma arte grande com o mostruário inteiro;
virou o logotipo montado em HTML porque foto de produto aqui custava a
primeira tela toda e o arquivo mais pesado do site (ver o comentário no
catalogo-novo.html).
O painel desce até o contato sem emenda: os dois são o mesmo azul, e o
que separa é um fio, não uma troca de fundo. */
/* Sem folga embaixo, de propósito: a abertura e o contato formam um
painel azul só, e quando os dois têm padding as duas folgas se somam.
O vão entre o botão de pedido e as redes sociais ficava quase o dobro
de qualquer outro espaço da faixa, e a página parecia partida ao meio.
Quem manda no vão entre os dois é o `padding-top` do `.contato`, num
lugar só. */
.abertura {
position: relative;
margin: 0;
padding: 46px 20px 0;
overflow: hidden;
background:
radial-gradient(115% 78% at 50% 0%, rgba(93, 154, 214, .30) 0%, transparent 60%),
/* 180deg, e não os 168 das faixas menores: inclinado, o degradê chega
ao tom final no canto de baixo à esquerda antes de chegar no da
direita — a borda de baixo fica com dois azuis, e contra o fundo
chapado do contato aparecia uma emenda. Reto, a última linha do
painel é exatamente a mesma cor que começa o bloco seguinte. */
linear-gradient(180deg, var(--azul) 0%, var(--azul-escuro) 100%);
color: var(--branco);
text-align: center;
}
/* 700px e não menos: é onde as quatro pastilhas de fato cabem numa linha
só no desktop. Em 620px a última caía sozinha para a segunda linha e o
bloco ficava torto. */
.ab-miolo { max-width: 700px; margin: 0 auto; }
/* `margin-inline: auto` e não só o `text-align: center` do pai: a folha
tem `img { display: block }` lá em cima, e bloco não obedece a
text-align — o escudo nascia encostado à esquerda do miolo enquanto o
nome e o resto ficavam centrados. */
.ab-escudo { width: 84px; height: auto; margin-inline: auto; }
.ab-nome {
margin-top: 12px;
font-size: var(--t-hero);
font-weight: 800; /* peso de logotipo, como no impresso */
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 e joga a palavra um
tico para a esquerda do centro. */
.ab-capas {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 9px;
color: var(--azul-suave);
font-size: var(--t-body);
font-weight: var(--p-forte);
letter-spacing: var(--ls-marca);
text-indent: var(--ls-marca);
text-transform: uppercase;
}
.ab-capas i {
flex: 1;
max-width: 84px;
height: 1px;
background: var(--azul-claro);
}
.ab-chamada {
margin-top: 14px;
color: var(--azul-suave);
font-size: var(--t-lead);
line-height: var(--lh-corpo);
}
/* As respostas que o comprador de atacado procura antes de olhar produto.
Estavam espalhadas entre a arte e o rodapé. */
.ab-fatos {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 22px;
list-style: none;
}
.ab-fatos li {
padding: 5px 13px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 999px;
font-size: var(--t-2xs);
font-weight: var(--p-forte);
}
/* Âmbar e não branco: é o único botão âmbar da página, e é o caminho que
a loja quer que o cliente tome. */
.ab-cta {
display: inline-block;
margin-top: 26px;
padding: 13px 30px;
border-radius: 999px;
background: var(--promo);
color: #3a2a02;
font-size: var(--t-body);
font-weight: var(--p-bold);
text-decoration: none;
box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
transition: background .14s;
}
.ab-cta:hover { background: var(--promo-borda); }
/* ---------- Contato, logo abaixo da abertura ----------
Continua o mesmo painel azul: separa do índice (branco) sem criar um
segundo bloco. O fundo é o azul em que a abertura termina — repetir o
gradiente inteiro fazia a cor clarear de novo no meio da faixa, e a
emenda aparecia. */
.contato {
/* 34px em cima é o vão ENTRE os dois blocos, e é o mesmo ritmo dos
espaços de dentro da abertura (22 entre as pastilhas e o título, 26
antes do botão). Antes eram 42 + 30 somados, quase o dobro de
qualquer outro vão da faixa. */
padding: 34px 24px 40px;
text-align: center;
background: var(--azul-escuro);
color: var(--branco);
}
@media (max-width: 560px) {
.abertura { padding: 32px 16px 0; }
.ab-escudo { width: 66px; }
.ab-capas i { max-width: 44px; }
.ab-fatos { gap: 6px; margin-top: 18px; }
.ab-cta { margin-top: 22px; padding: 12px 24px; }
/* mesmo vão de dentro da abertura no celular (18 e 22): 26 entre os
dois blocos mantém o ritmo em vez de abrir um buraco */
.contato { padding: 26px 16px 32px; }
}
.contato .redes { margin: 0 auto 22px; }
.contato .endereco { max-width: 420px; margin: 0 auto; }
/* ---------- Í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 #e6e3dc;
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 #e6e3dc;
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) ---------- */
.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 #e6e3dc;
}
.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: var(--oferta-fundo);
border-color: var(--oferta);
color: var(--oferta-escuro);
font-weight: var(--p-bold);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.chip-promo::before { content: '★ '; }
.chip-promo:hover { background: var(--oferta-borda); border-color: var(--oferta-forte); }
.chip-promo.ativo {
background: var(--oferta);
border-color: var(--oferta-forte);
color: var(--oferta-tinta);
}
.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;
}
.rodape img { width: 78px; 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 dourado, que aqui é a cor
da marca e a cor de "aja nesta tela". Não é mais a mesma do selo de
promoção: o selo virou violeta em 17/08/2026 justamente para não
disputar atenção com este botã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, #eab944 0%, var(--promo, #e0a92a) 100%);
border-radius: 999px;
color: #3a2a02;
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: #6d4e08; }
.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; }
}