/* =========================================================
FONTES HOSPEDADAS AQUI, não no Google Fonts
O para fonts.googleapis.com custava 780 ms bloqueando
a renderização — 1,6 KB de CSS, mas com DNS, TLS e ida e volta
a um domínio de terceiro antes de a página poder pintar. E ele
só então mandava buscar os arquivos em fonts.gstatic.com, que
é uma SEGUNDA conexão. Era o maior item do relatório do
PageSpeed (27/08/2026), num site cujo cliente abre no 4G da obra.
Agora os .woff2 saem do mesmo servidor do site, sem conexão
nova, sem bloquear a pintura, e a CSP não precisa mais liberar
domínio do Google.
`unicode-range` faz o navegador baixar só o subconjunto que a
página realmente escreve: em português, `latin-ext` costuma nem
ser pedido. `font-display:swap` mostra o texto na fonte do
sistema enquanto a certa não chegou — nunca em branco.
SÓ O PESO 800 do Barlow. Havia também 600 e 700 declarados; o
700 chegava tarde e refluía a seção do catálogo — 0,47 de CLS
na medição. Mas ele nunca foi escolha de design: quatro títulos
( e
) caíam em 700 porque é o negrito padrão do
navegador, enquanto as outras 13 regras de display do site já
pediam 800. Declarado o 800 nos quatro, sobrou um arquivo só —
e ele é pré-carregado, então não há troca de fonte para
deslocar nada.
Para atualizar: pegue o CSS do Google Fonts, filtre latin e
latin-ext, baixe os woff2 para fontes/ e cole as regras aqui.
========================================================= */
/* latin-ext */
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(fontes/barlow-condensed-800-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(fontes/barlow-condensed-800-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fontes/inter-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fontes/inter-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fontes/inter-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fontes/inter-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fontes/inter-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fontes/inter-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fontes/inter-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fontes/inter-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =========================================================
Armazém do Ferro — todo o visual do site
PALETA DA MARCA (24/08/2026), extraída das peças da loja:
vinho institucional #6F0807
vermelho da marca #9D0612
vermelho de destaque #B5050D
Mais branco, off-white, preto, grafite e cinza.
Regra de uso, do briefing: página NÃO é vermelha inteira.
Fundo do catálogo é branco/off-white; grafite e vinho fazem
as áreas institucionais; o vermelho vivo é reservado para
ação — botão, selo, seleção, oferta. Vermelho em tudo tira o
destaque justamente de onde ele precisa estar.
Nenhum HEX solto no resto do arquivo: para trocar qualquer
cor, mexa só aqui.
========================================================= */
:root{
/* vinho institucional — topo, rodapé, seções fortes */
--marca-noite:#4A0504;
--marca-profundo:#6F0807;
--marca-sol:#F0BDB9; /* texto de apoio sobre o vinho */
/* ação — botão, selo, seleção, preço/oferta */
--acao:#B5050D;
--acao-clara:#D7141D;
--acao-vidro:rgba(181,5,13,.07);
/* grafite — chip de unidade de venda e áreas neutras escuras */
--grafite:#26221F;
--alerta:#26221F; /* fundo do chip de unidade */
--alerta-forte:#FFFFFF; /* texto do chip */
/* verde do WhatsApp — só no botão flutuante, que é dele */
--wpp:#128C4B;
--branco:#FFFFFF;
--gelo:#F7F5F3; /* off-white quente */
--gelo-2:#EBE6E2;
--borda:#DFD8D3;
--texto:#1A1613;
--texto-fraco:#6B615B;
--sucesso:#128C4B;
--e1:4px; --e2:8px; --e3:12px; --e4:16px; --e6:24px;
--e8:32px; --e12:48px; --e16:64px; --e20:80px;
--raio:10px; --raio-g:18px;
--sombra:0 1px 3px rgba(26,22,19,.08);
--sombra-alta:0 14px 40px rgba(74,5,4,.18);
--display:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
--corpo:'Inter',system-ui,-apple-system,sans-serif;
--max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* O atributo hidden vale mais que qualquer display do CSS.
Sem esta linha, um elemento com display:inline-block (o selo de anos de
casa, por exemplo) continua aparecendo mesmo escondido pelo app.js —
e o cliente vê uma pílula vazia na capa. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
/* o topo é fixo: sem isso, clicar num link do menu esconde o começo da seção */
section[id],div[id]{scroll-margin-top:104px}
@media (min-width:900px){section[id],div[id]{scroll-margin-top:76px}}
body{font-family:var(--corpo);font-size:16px;line-height:1.6;color:var(--texto);background:var(--branco);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
button{font-family:inherit;cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--acao-clara);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--e4)}
.display{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acao)}
.skip{
position:absolute;left:-9999px;top:0;z-index:100;
background:var(--branco);color:var(--marca-profundo);
padding:12px 20px;border-radius:0 0 var(--raio) 0;font-weight:600;
}
.skip:focus{left:0}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
.mvp-bar{background:var(--marca-noite);color:var(--marca-sol);font-size:.78rem;text-align:center;padding:var(--e2) var(--e4)}
.mvp-bar b{color:#fff}
/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:40;background:var(--marca-profundo);color:var(--branco);box-shadow:var(--sombra)}
.topo__linha{display:flex;align-items:center;gap:var(--e3);padding:10px var(--e4);max-width:var(--max);margin:0 auto}
.logo{height:22px;width:auto;flex-shrink:0}
.nav{display:none;gap:var(--e6);margin-left:var(--e6);font-size:.9rem;font-weight:500}
.nav a{color:#C6D2DE;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{color:#fff;border-color:var(--marca-sol)}
.topo__acoes{display:flex;align-items:center;gap:var(--e2);margin-left:auto}
/* navegação do celular: linha rolável, sem hambúrguer escondendo tudo */
.nav-mob{
display:flex;gap:6px;overflow-x:auto;
padding:0 var(--e4) 10px;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.nav-mob::-webkit-scrollbar{display:none}
.nav-mob a{
flex:0 0 auto;white-space:nowrap;
display:inline-flex;align-items:center;min-height:38px;
background:rgba(255,255,255,.12);color:#DCE8FB;
padding:0 14px;border-radius:999px;
font-size:.8rem;font-weight:600;
}
.nav-mob a:active{background:rgba(255,255,255,.24)}
/* mostrar só num tamanho de tela */
.so-mob{display:block}
.so-desk{display:none}
.txt-curto{display:inline}
.txt-longo{display:none}
/* foto do hero no celular */
/* barra de pedido fixa no rodapé do celular */
.barra-pedido{
position:fixed;left:0;right:0;bottom:0;z-index:36;
display:flex;align-items:center;gap:var(--e4);
padding:var(--e3) var(--e4);
padding-bottom:calc(var(--e3) + env(safe-area-inset-bottom));
background:var(--marca-profundo);color:#fff;text-align:left;
box-shadow:0 -6px 24px rgba(4,20,60,.28);
}
.barra-pedido[hidden]{display:none}
.barra-pedido__esq{flex:1;min-width:0}
.barra-pedido__esq b{display:block;font-size:.78rem;font-weight:600;color:var(--marca-sol)}
.barra-pedido__esq small{display:block;font-family:var(--display);font-size:1.5rem;font-weight:800;color:#fff;line-height:1.1}
.barra-pedido__btn{
background:var(--branco);color:var(--marca-profundo);
padding:12px 20px;border-radius:var(--raio);
font-size:.9rem;font-weight:700;white-space:nowrap;
}
.icone-btn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;transition:background .15s}
.icone-btn:hover{background:rgba(255,255,255,.24)}
.icone-btn--claro{background:var(--branco);color:var(--marca-profundo)}
.icone-btn--claro:hover{background:var(--gelo-2)}
.carrinho-btn{position:relative}
.carrinho-badge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--branco);color:var(--marca-profundo);font-size:.68rem;font-weight:700;display:none;place-items:center;box-shadow:0 0 0 2px var(--marca-profundo)}
.carrinho-badge.on{display:grid}
/* ---------- hero ---------- */
.stat b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:800;color:#fff;line-height:1}
.stat span{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--marca-sol);line-height:1.25;display:block;margin-top:3px}
@media (min-width:560px){.stat span{font-size:.7rem;letter-spacing:.12em}.stat b{font-size:1.7rem}}
/* No celular a destaque entra logo depois dos CTAs da capa. Sem respiro no
topo o card encostava na faixa de cima e a troca de azul caía exatamente
na borda dele, fazendo o produto parecer solto na página. */
.destaque{background:var(--marca-profundo);padding:var(--e6) 0 var(--e8)}
/* Card do destaque — grid achatado: foto, topo, info e botão são irmãos,
e cada tela os recoloca. No celular a foto é miniatura ao lado do preço;
no desktop vira a coluna esquerda inteira. */
.hero__card{
background:var(--branco);color:var(--texto);
border-radius:var(--raio-g);overflow:hidden;box-shadow:var(--sombra-alta);
max-width:380px;width:100%;
display:grid;align-items:center;
grid-template-columns:68px 1fr;
grid-template-areas:
"topo topo"
"foto info"
"btn btn";
column-gap:var(--e3);row-gap:var(--e4);
}
.hero__card-topo{grid-area:topo;align-self:stretch;background:var(--marca-noite);color:#fff;padding:var(--e3) var(--e4)}
.hero__card-topo b{font-family:var(--display);font-weight:800;font-size:1.3rem;display:block;line-height:1.05;text-transform:uppercase}
.hero__card-topo span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--marca-sol)}
.hero__card-foto{grid-area:foto;width:68px;height:68px;margin-left:var(--e4);
border-radius:10px;overflow:hidden;background:var(--gelo-2);display:grid;place-items:center}
.hero__card-foto img{width:100%;height:100%;object-fit:contain;display:block}
.hero__card-info{grid-area:info;min-width:0;margin-right:var(--e4)}
.hero__card-marca{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-fraco)}
.hero__card-un{font-family:var(--display);font-size:1.35rem;font-weight:800;color:var(--marca-profundo);line-height:1.05;text-transform:uppercase}
.hero__card-nota{font-size:.72rem;font-weight:600;color:var(--acao);line-height:1.3}
.hero__card-btn{grid-area:btn;margin:0 var(--e4) var(--e4);justify-content:center}
@media (min-width:900px){
.destaque{padding:var(--e12) 0}
/* Faixa horizontal. Antes o card herdava margin-left:auto do hero de duas
colunas que não existe mais e ficava colado na direita, com ~780px de
vazio ao lado — era o buraco que aparecia na tela. */
.hero__card{
max-width:none;
grid-template-columns:300px 1fr auto;
grid-template-areas:
"foto topo topo"
"foto info btn";
column-gap:var(--e8);row-gap:var(--e3);
}
.hero__card-foto{width:100%;height:100%;min-height:230px;margin:0;border-radius:0;background:var(--gelo)}
.hero__card-foto img{padding:var(--e6)}
.hero__card-topo{background:transparent;color:var(--texto);padding:var(--e8) var(--e8) 0 0}
.hero__card-topo span{color:var(--acao)}
.hero__card-topo b{font-size:1.9rem}
.hero__card-info{margin:0}
.hero__card-un{font-size:1.9rem}
.hero__card-nota{font-size:.85rem}
.hero__card-btn{margin:0 var(--e8) var(--e8) 0;align-self:center;padding-inline:var(--e8)}
}
/* ---------- reserva de espaço para o que o JS preenche ----------
Todo container abaixo nasce vazio no HTML e é preenchido pelo app.js.
Enquanto o CSS do Google Fonts bloqueava a pintura, isso não aparecia: a
página só pintava depois de o JS já ter rodado. Com as fontes locais ela
pinta em 0,9 s, ANTES do JS — e aí o catálogo nascia dentro da primeira
tela e descia quando o conteúdo entrava. Deu 0,47 de CLS na medição do
PageSpeed (o bom é abaixo de 0,1).
`:empty` casa só enquanto o container não tem filho, então a reserva se
desliga sozinha no instante em que o app.js escreve — sem JS, sem classe
para remover, sem estado.
As alturas são medidas reais, entre 375 px e os 412 px que o Lighthouse
usa. Não precisam ser exatas: o que conta é a página nascer com mais ou
menos o comprimento final, para o que está na primeira tela não pular. O
`#grade` reserva uma tela cheia porque o resto dele fica abaixo da dobra,
onde deslocamento não pontua.
⚠️ Isto só funciona porque as seções deixaram de nascer com `hidden` —
reserva dentro de `display:none` não reserva nada. Ver a nota no
index.html, acima da seção `#fortes`. */
#fortesGrid:empty{min-height:360px} /* 371 em 375px, 349 em 412px — o meio */
#destaqueCard:empty{min-height:240px}
#setores-grid:empty{min-height:532px}
#filtros:empty{min-height:52px}
#grade:empty{min-height:100vh}
#procuradosGrid:empty{min-height:1886px}
/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:var(--raio);font-size:.94rem;font-weight:600;min-height:48px;transition:background .15s,transform .1s,border-color .15s,color .15s;text-align:center}
.btn:active{transform:translateY(1px)}
.btn--acao{background:var(--acao);color:#fff}
.btn--acao:hover{background:var(--marca-profundo)}
.btn--branco{background:var(--branco);color:var(--marca-profundo)}
.btn--branco:hover{background:var(--gelo-2)}
.btn--vidro{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.34)}
.btn--vidro:hover{background:rgba(255,255,255,.26)}
.btn--linha{background:transparent;color:var(--acao);border:1.5px solid var(--borda)}
.btn--linha:hover{border-color:var(--acao)}
.btn--bloco{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
/* ---------- seções ---------- */
.secao{padding:var(--e8) 0}
@media (min-width:560px){.secao{padding:var(--e12) 0}}
.secao--gelo{background:var(--gelo)}
.secao--marca{background:var(--marca-profundo);color:#fff}
.secao__cabeca{margin-bottom:var(--e4)}
@media (min-width:560px){.secao__cabeca{margin-bottom:var(--e6)}}
.secao__cabeca h2{font-size:clamp(1.6rem,5.5vw,3rem);margin:6px 0 10px;line-height:1}
.secao__cabeca h2 em{font-style:normal;color:var(--acao);display:block}
.secao--marca .secao__cabeca h2 em{color:var(--marca-sol)}
.secao--marca .eyebrow{color:var(--marca-sol)}
.secao__cabeca p{color:var(--texto-fraco);max-width:56ch;font-size:.92rem;line-height:1.5;text-wrap:pretty}
.secao--marca .secao__cabeca p{color:#C6D2DE}
/* ---------- banner de capa ----------
No desktop entra a arte inteira (banner@2x), que é composição única.
No celular o título é TEXTO, não imagem: a arte vertical que existia aqui
tinha sido remontada recortando pedaços do banner horizontal, e as emendas
apareciam na tela. Só a foto vem como imagem. */
.capa{background:
radial-gradient(900px 440px at 80% 6%,rgba(159,177,196,.26),transparent 62%),
linear-gradient(160deg,var(--marca-noite) 0%,var(--marca-profundo) 62%,var(--marca-noite) 100%)}
.capa picture{display:block}
.capa img,.capa__img{width:100%;height:auto;display:block}
/* A arte já traz título e subtítulo desenhados, nas duas telas. O bloco de
texto continua no DOM mas fora da tela: é ele que dá o
à página, para
busca e leitor de tela. Sem ele o site ficaria sem cabeçalho de nível 1. */
/* A arte de capa traz título, diferenciais, endereço e WhatsApp desenhados,
nas duas telas. O bloco de texto fica no DOM mas fora da tela: é ele que dá
o
à página, para busca e leitor de tela. Sem ele o site ficaria sem
cabeçalho de nível 1. Mesmo padrão do site do Bruno das Tintas. */
.capa__texto{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
@media (min-width:900px){
.capa__texto{padding-top:var(--e16);padding-bottom:var(--e6)}
}
/* fundo transparente: quem pinta é o gradiente da seção. Cor chapada aqui
criava uma emenda visível logo abaixo da arte. */
.capa__ctas{background:transparent;padding:0 var(--e4) var(--e6)}
.capa__ctas .wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:var(--e4)}
.capa__ctas .btn{padding:14px 10px;font-size:.86rem;white-space:nowrap}
@media (min-width:560px){
.capa__ctas .wrap{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center;padding-top:var(--e6)}
.capa__ctas .btn{padding:14px 24px;font-size:.94rem}
}
.capa__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e2);grid-column:1/-1;padding-top:var(--e3);border-top:1px solid rgba(255,255,255,.2)}
@media (min-width:560px){.capa__stats{display:flex;gap:var(--e6);flex-wrap:wrap;margin-left:auto;grid-column:auto;padding-top:0;border:none}}
/* faixa de campanha no meio */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* sem display:block aqui — esta regra vem DEPOIS de .so-desk{display:none} e
estava anulando o esconde-no-celular. O global já é block. */
.arte-secao{
width:100%;height:auto;
border-radius:var(--raio-g);
border:1px solid var(--borda);
box-shadow:var(--sombra);
margin-bottom:var(--e4);
}
/* dentro de seção azul a arte já tem o próprio fundo: sem borda clara */
.arte-secao--solta{border:none;box-shadow:none;margin-bottom:0}
/* As artes entram INTEIRAS, na proporção original de 1912x823. Nada de
aspect-ratio forçado nem object-fit:cover aqui: qualquer um dos dois
recortaria a arte, e a composição é do designer, não minha. No celular ela
aparece menor, nunca cortada. */
.secao--arte{padding:var(--e12) 0}
.faixa-arte{display:block;line-height:0;border-radius:var(--raio-g);overflow:hidden;box-shadow:var(--sombra-alta)}
.faixa-arte img{width:100%;height:auto}
/* ---------- marcas ---------- */
.marcas{position:relative}
.trilho-caixa{position:relative}
.trilho-seta{
position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:36px;height:36px;border-radius:50%;
background:var(--branco);color:var(--marca-profundo);
border:1px solid var(--borda);box-shadow:var(--sombra-alta);
font-size:1.5rem;line-height:1;display:none;place-items:center;
padding-bottom:3px;
}
.trilho-seta--esq{left:-6px}
.trilho-seta--dir{right:-6px}
.trilho-caixa.tem-overflow .trilho-seta{display:grid}
.trilho-seta[disabled]{opacity:.3;pointer-events:none}
.marcas__trilho{display:flex;gap:var(--e2);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:var(--e2);scrollbar-width:none}
.marcas__trilho::-webkit-scrollbar{display:none}
.marca-card{
flex:0 0 150px;scroll-snap-align:start;
height:96px;border-radius:var(--raio);
background:var(--branco);border:1px solid var(--borda);
display:grid;place-items:center;padding:var(--e3);text-align:center;
transition:border-color .15s,transform .15s;
}
.marca-card:hover{border-color:var(--acao-clara);transform:translateY(-2px)}
.marca-card b{font-family:var(--display);font-size:1.28rem;font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:var(--marca-profundo);line-height:1.05;display:block}
.marca-card__logo{width:auto;max-width:100%;max-height:52px;margin:0 auto 4px;object-fit:contain}
.marca-card small{display:block;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-fraco);margin-top:4px}
/* ---------- setores ---------- */
.setores{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:8px}
.setores::-webkit-scrollbar{display:none}
.setor{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:var(--e3) 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;text-align:center;transition:border-color .15s,transform .15s,box-shadow .15s}
.setor:hover{border-color:var(--acao-clara);transform:translateY(-2px);box-shadow:var(--sombra)}
.setor__ico{width:38px;height:38px;flex:0 0 38px;min-width:0;border-radius:10px;background:var(--acao);display:grid;place-items:center;flex-shrink:0}
.setor__ico svg{width:19px;height:19px}
.setor h3{font-family:var(--display);font-size:.92rem;font-weight:800;text-transform:uppercase;line-height:1.05}
.setor p{display:none;font-size:.72rem;color:var(--texto-fraco);line-height:1.25}
/* ---------- catálogo ---------- */
.filtros{display:flex;gap:var(--e2);flex-wrap:wrap;margin-bottom:var(--e6)}
.filtro{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--borda);background:var(--branco);font-size:.85rem;font-weight:600;color:var(--texto-fraco);transition:all .15s}
.filtro:hover{border-color:var(--acao-clara);color:var(--acao)}
.filtro.on{background:var(--acao);border-color:var(--acao);color:#fff}
.busca{display:flex;align-items:center;gap:var(--e2);background:var(--branco);border:1.5px solid var(--borda);border-radius:var(--raio);padding:0 var(--e4);margin-bottom:var(--e4);max-width:420px}
.busca input{border:none;outline:none;padding:13px 0;font-family:inherit;font-size:.95rem;width:100%;background:none;color:var(--texto)}
.grade{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){.grade{gap:var(--e4);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
.prod{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio-g);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s,transform .15s}
.prod:hover{border-color:var(--acao-clara);box-shadow:var(--sombra-alta);transform:translateY(-2px)}
.prod__img{aspect-ratio:1/1;background:var(--gelo-2);position:relative;overflow:hidden}
/* contain, não cover: as fotos vêm recortadas em fundo transparente, e o
cover cortava a ponta da barra e a alça do carrinho. O padding dá respiro
para a peça não encostar na borda do card. */
.prod__img img{width:100%;height:100%;object-fit:contain;padding:10px}
/* foto e nome abrem o detalhe; o botao nao pode herdar visual de botao */
.prod__abrir{display:block;width:100%;padding:0;border:0;cursor:pointer;font:inherit;color:inherit}
/* alvo de toque: o texto tem 17px de altura, entao a area clicavel cresce por
padding sem deslocar o texto (margin negativa compensa) */
.prod__nome-btn{background:none;border:0;margin:-8px -8px -6px;padding:8px 8px 6px;
font:inherit;color:inherit;text-align:left;cursor:pointer;min-height:44px}
.prod__nome-btn:hover{text-decoration:underline}
.prod__abrir:focus-visible,.prod__nome-btn:focus-visible{outline:2px solid var(--acao-clara);outline-offset:2px}
/* ---------- detalhe do produto no modal ---------- */
.det__foto{aspect-ratio:1/1;max-width:320px;margin:0 auto var(--e4);border-radius:var(--raio-g);
overflow:hidden;background:var(--gelo-2)}
.det__foto img{width:100%;height:100%;object-fit:contain;padding:14px;display:block}
.det__setor{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--texto-fraco);margin-bottom:var(--e4)}
.det__bloco{padding-top:var(--e4);margin-top:var(--e4);border-top:1px solid var(--gelo-2,#E7EDF7)}
.det__bloco:first-of-type{border-top:0;margin-top:0}
.det__rotulo{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--texto-fraco);margin-bottom:var(--e2)}
.det__cor{font-size:.9rem;line-height:1.45;color:var(--texto)}
.det__cor-ajuda{font-size:.82rem;line-height:1.45;color:var(--texto-fraco);margin-top:4px}
.det__un{font-family:var(--display);font-size:1.7rem;font-weight:800;color:var(--marca-profundo);line-height:1.05;text-transform:uppercase}
.det__un small{display:block;font-family:var(--corpo);font-size:.8rem;font-weight:500;text-transform:none;color:var(--texto-fraco);margin-top:4px}
.det .btn{margin-top:var(--e6)}
/* Produto ainda sem foto: inicial da marca sobre o azul da marca, em vez de
ícone de imagem quebrada. Sai de cena sozinho quando a foto for cadastrada. */
.sem-foto{
display:flex;align-items:center;justify-content:center;
width:100%;height:100%;
background:linear-gradient(150deg,var(--gelo-2),var(--borda));
color:rgba(26,22,19,.42);
font-family:var(--display);font-weight:800;line-height:1;
font-size:clamp(1.6rem,7vw,3rem);letter-spacing:-.02em;
user-select:none;
}
.sugestao__img .sem-foto,.item__img .sem-foto{font-size:1.1rem;border-radius:inherit}
.prod__ph{position:absolute;inset:0;display:grid;place-items:center;gap:10px;align-content:center;background:var(--gelo-2);color:var(--texto-fraco)}
.prod__ph span{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.prod__marca{position:absolute;top:7px;left:7px;font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(15,20,26,.82);color:#fff;padding:4px 8px;border-radius:5px;backdrop-filter:blur(3px)}
.prod__oferta{position:absolute;top:7px;right:7px;font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--branco);color:var(--marca-profundo);padding:4px 8px;border-radius:5px}
.prod__corSel{position:absolute;bottom:10px;right:10px;width:30px;height:30px;border-radius:8px;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.25)}
.prod__corpo{padding:var(--e3);display:flex;flex-direction:column;gap:5px;flex:1}
@media (min-width:560px){.prod__corpo{padding:var(--e4);gap:var(--e2)}}
.prod__cat{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-fraco)}
@media (min-width:560px){.prod__cat{font-size:.66rem;letter-spacing:.1em}}
.prod__nome{font-size:.82rem;font-weight:600;line-height:1.3;color:var(--texto)}
@media (min-width:560px){.prod__nome{font-size:.95rem;line-height:1.35}}
.prod__nota{display:none;font-size:.7rem;color:var(--acao);font-weight:600;line-height:1.3}
@media (min-width:560px){.prod__nota{display:block}}
.setor--vazio,.marca-card--vazio{opacity:.55;cursor:default}
.setor--vazio:hover,.marca-card--vazio:hover{border-color:var(--borda);transform:none;box-shadow:none}
.selo-breve{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-fraco)}
/* ---------- como funciona ---------- */
/* ---------- lojas ---------- */
/* Duas colunas fixas era herança do Bruno das Tintas, que tem duas lojas.
Aqui existe uma só: no celular ela caía em meia largura, o card ficava
espremido e o botão "Falar com a loja" vazava para fora da borda.
Agora a grade se ajusta à quantidade de lojas que existir no dados.js. */
.lojas{display:grid;gap:var(--e3);grid-template-columns:1fr}
@media (min-width:560px){
.lojas{gap:var(--e4);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
}
/* Loja única não precisa atravessar 1180px de tela: fica ao lado do mapa. */
@media (min-width:900px){
.lojas:has(> :only-child){grid-template-columns:minmax(300px,380px)}
}
.loja{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio-g);overflow:hidden;display:flex;flex-direction:column}
.loja__topo{background:var(--marca-profundo);color:#fff;padding:var(--e3) var(--e4)}
@media (min-width:560px){.loja__topo{padding:var(--e4) var(--e6)}}
.loja__topo b{font-family:var(--display);font-weight:800;font-size:1.2rem;text-transform:uppercase;display:block;line-height:1}
@media (min-width:560px){.loja__topo b{font-size:1.55rem}}
.loja__topo span{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--marca-sol)}
.loja__l{padding:10px var(--e4);border-bottom:1px solid var(--borda)}
@media (min-width:560px){.loja__l{padding:var(--e3) var(--e6)}}
.loja__l:last-child{border:none}
.loja__l small{display:block;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-fraco);margin-bottom:2px}
.loja__l p{font-size:.8rem;font-weight:500;line-height:1.35}
@media (min-width:560px){.loja__l p{font-size:.92rem}}
/* Três ações por loja: falar, mapa e Instagram. O problema anterior era pôr
as três lado a lado com larguras diferentes (1.4fr 1fr 1fr): o rótulo mais
longo quebrava em duas linhas e os botões ficavam com alturas desiguais.
Agora a hierarquia é explícita: "Falar com a loja" é a ação principal e
ocupa a linha inteira; mapa e Instagram são secundárias e dividem a linha de
baixo, em colunas iguais. Some a quebra de linha e some o desalinhamento. */
.loja__acoes{
display:grid;gap:var(--e2);
grid-template-columns:1fr 1fr;
padding:var(--e3) var(--e4) var(--e4);margin-top:auto;
}
.loja__acoes .btn{width:100%;padding:12px 10px;font-size:.85rem;min-height:46px;gap:6px;
white-space:nowrap;min-width:0}
/* min-width:0 e o texto encolhendo: sem isso o rótulo com nowrap define a
largura mínima do botão e estoura o card em tela estreita. */
.loja__acoes .btn span{overflow:hidden;text-overflow:ellipsis}
/* a principal atravessa as duas colunas */
.loja__acoes .btn--acao{grid-column:1 / -1}
@media (min-width:560px){
.loja__acoes{padding:var(--e4) var(--e6) var(--e6);gap:var(--e3)}
.loja__acoes .btn{padding:14px 20px;font-size:.92rem;min-height:50px;gap:9px}
}
.escolha-loja{
display:flex;align-items:center;gap:var(--e4);
padding:var(--e4);margin-bottom:var(--e3);
border:1.5px solid var(--borda);border-radius:var(--raio);
transition:border-color .15s,background .15s,transform .1s;
}
.escolha-loja:hover{border-color:var(--acao);background:var(--acao-vidro)}
.escolha-loja:active{transform:translateY(1px)}
.escolha-loja__ico{
width:44px;height:44px;flex:0 0 44px;min-width:0;border-radius:12px;
background:var(--acao);color:#fff;display:grid;place-items:center;
}
.escolha-loja__txt b{display:block;font-size:1rem;font-weight:700;line-height:1.2}
.escolha-loja__txt small{display:block;font-size:.78rem;color:var(--texto-fraco);line-height:1.35}
/* ---------- rodapé ---------- */
.rodape{background:var(--marca-noite);color:var(--marca-sol);padding:var(--e8) 0 var(--e6);font-size:.84rem}
@media (min-width:560px){.rodape{font-size:.9rem;padding:var(--e12) 0 var(--e6)}}
.rodape__topo{display:grid;gap:var(--e4);margin-bottom:var(--e6)}
.rodape__marca .logo{height:26px;margin-bottom:10px}
.rodape__marca p{max-width:44ch;line-height:1.45}
.rodape__lojas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e4);margin-bottom:var(--e6)}
.rodape__loja h4{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:8px}
.rodape__loja p{line-height:1.4;margin-bottom:4px}
.rodape__loja a{border-bottom:1px solid rgba(255,255,255,.25)}
.rodape__loja a:hover{color:#fff;border-color:#fff}
.rodape__links{
display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);
padding-bottom:var(--e4);margin-bottom:var(--e4);
border-bottom:1px solid rgba(255,255,255,.16);
}
.rodape__links a{font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.rodape__links a:hover{border-color:#fff}
.rodape__base{
display:grid;gap:4px;padding-right:72px;
font-size:.72rem;color:#7FA3D6;line-height:1.5;
}
@media (min-width:560px){
.rodape__topo{grid-template-columns:1fr auto;align-items:center}
.rodape__lojas{grid-template-columns:repeat(2,minmax(0,240px))}
.rodape__base{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e6);justify-content:space-between;font-size:.76rem}
}
.wpp-float{position:fixed;right:16px;bottom:16px;z-index:35;transition:bottom .2s;width:58px;height:58px;border-radius:50%;background:var(--wpp);display:grid;place-items:center;box-shadow:0 8px 26px rgba(14,138,74,.42);border:2px solid #fff}
/* ---------- carrinho ---------- */
body.com-barra .wpp-float{bottom:96px}
body.com-barra{padding-bottom:84px}
.veu{position:fixed;inset:0;background:rgba(15,20,26,.62);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(2px)}
.veu.on{opacity:1;pointer-events:auto}
.gaveta{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(430px,100%);background:var(--branco);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;box-shadow:-10px 0 40px rgba(15,20,26,.24)}
.gaveta.on{transform:translateX(0)}
.gaveta__topo{display:flex;align-items:center;gap:var(--e3);padding:var(--e4) var(--e6);border-bottom:1px solid var(--borda)}
.gaveta__topo h3{font-family:var(--display);font-weight:800;font-size:1.5rem;text-transform:uppercase;flex:1}
.gaveta__corpo{flex:1;overflow-y:auto;padding:var(--e4) var(--e6)}
.gaveta__pe{padding:var(--e6);border-top:1px solid var(--borda);background:var(--gelo)}
.item{display:flex;gap:var(--e3);padding:var(--e3) 0;border-bottom:1px solid var(--borda)}
.item__img{width:62px;height:62px;flex:0 0 62px;min-width:0;border-radius:9px;background:var(--gelo-2);overflow:hidden;display:grid;place-items:center}
/* contain, não cover: a lata é alta e o cover cortava topo e base */
.item__img img{width:100%;height:100%;object-fit:contain;padding:3px}
.item__meio{flex:1;min-width:0}
.item__nome{font-size:.86rem;font-weight:600;line-height:1.3}
.item__cor{font-size:.72rem;color:var(--texto-fraco);margin-top:2px;display:flex;align-items:center;gap:5px}
.item__cor i{width:12px;height:12px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(19,26,33,.2)}
.item__un{font-size:.8rem;font-weight:600;color:var(--texto-fraco);margin-top:4px}
.qtd{display:flex;align-items:center;gap:var(--e2);margin-top:6px}
.qtd button{width:44px;height:44px;flex:0 0 44px;border-radius:9px;background:var(--gelo-2);font-weight:700;color:var(--marca-profundo);display:grid;place-items:center;font-size:1.15rem}
.qtd button:hover{background:var(--acao);color:#fff}
.qtd span{font-size:.85rem;font-weight:600;min-width:20px;text-align:center}
.item__x{color:var(--texto-fraco);font-size:1.1rem;align-self:flex-start;width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;margin:-8px -12px 0 0}
.item__x:hover{color:var(--acao)}
.sugestoes{margin-top:var(--e6);padding-top:var(--e4);border-top:2px dashed var(--borda)}
.sugestoes__titulo{font-family:var(--display);font-size:1.15rem;font-weight:800;text-transform:uppercase;color:var(--marca-profundo);margin-bottom:var(--e3)}
.sugestao{display:flex;align-items:center;gap:var(--e3);padding:var(--e2) 0}
.sugestao__img{width:48px;height:48px;flex:0 0 48px;min-width:0;border-radius:8px;background:var(--gelo-2);overflow:hidden}
.sugestao__img img{width:100%;height:100%;object-fit:contain;padding:3px}
.sugestao__meio{flex:1;min-width:0}
.sugestao__nome{font-size:.8rem;font-weight:600;line-height:1.3}
.sugestao__un{font-size:.78rem;font-weight:500;color:var(--texto-fraco);margin-top:2px}
.sugestao__add{
width:44px;height:44px;flex:0 0 44px;min-width:0;border-radius:10px;
background:var(--acao);color:#fff;font-size:1.35rem;font-weight:600;line-height:1;
display:grid;place-items:center;transition:background .15s,transform .1s;
}
.sugestao__add:hover{background:var(--marca-profundo)}
.sugestao__add:active{transform:scale(.94)}
.aviso-corte{
font-size:.82rem;line-height:1.4;color:var(--sucesso);font-weight:600;
background:#E8F5EE;border-radius:var(--raio);padding:10px var(--e3);margin-bottom:var(--e4);
}
.aviso-corte--off{color:var(--texto-fraco);background:var(--gelo);font-weight:500}
.vazio{text-align:center;padding:var(--e16) var(--e4);color:var(--texto-fraco)}
.vazio b{display:block;font-size:1.05rem;color:var(--texto);margin-bottom:6px}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--e4)}
.total span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-fraco)}
.total b{font-family:var(--display);font-size:1.7rem;font-weight:800;color:var(--marca-profundo);text-transform:uppercase}
/* ---------- checkout ---------- */
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:flex-end;justify-content:center;overflow-y:auto}
.modal.on{display:flex}
.modal__caixa{
background:var(--branco);width:min(520px,100%);
border-radius:var(--raio-g) var(--raio-g) 0 0;
overflow-y:auto;box-shadow:var(--sombra-alta);
/* 94vh era o bug: no iOS o `vh` mede a tela SEM a barra do Safari, então o
painel ficava mais alto que o espaço real e empurrava o próprio
cabeçalho — com o X — para fora da tela, por cima. Ficava sem saída.
`dvh` acompanha a barra; o `- 56px` garante que sempre sobre uma faixa
do fundo visível, que é onde o dedo toca para fechar. */
max-height:94vh;
max-height:calc(100dvh - 56px);
}
.modal__topo{position:sticky;top:0;background:var(--branco);z-index:2;display:flex;align-items:center;gap:var(--e3);padding:var(--e4) var(--e6);border-bottom:1px solid var(--borda)}
/* Puxador de painel: no celular, avisa que aquilo é uma folha que fecha. */
.modal__caixa::before{
content:'';display:block;width:40px;height:4px;border-radius:2px;
background:var(--gelo-2);margin:8px auto 0;
}
@media (min-width:560px){.modal__caixa::before{display:none}}
.modal__topo h3{font-family:var(--display);font-weight:800;font-size:1.45rem;text-transform:uppercase;flex:1}
.modal__corpo{padding:var(--e6)}
.campo{display:grid;gap:6px;margin-bottom:var(--e4)}
.campo label{font-size:.78rem;font-weight:600}
.campo input,.campo select,.campo textarea{padding:13px var(--e3);border:1.5px solid var(--borda);border-radius:var(--raio);font-family:inherit;font-size:.95rem;min-height:48px;background:var(--branco);color:var(--texto)}
.campo input:focus,.campo textarea:focus{border-color:var(--acao);outline:none;box-shadow:0 0 0 3px var(--acao-vidro)}
.campo__erro{font-size:.75rem;color:#B4232B;display:none}
.campo.erro input,.campo.erro textarea{border-color:#B4232B}
.campo.erro .campo__erro{display:block}
.opcoes{display:grid;gap:var(--e2);margin-bottom:var(--e4)}
.opcao{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);border:1.5px solid var(--borda);border-radius:var(--raio);cursor:pointer;transition:border-color .15s,background .15s}
.opcao:hover{border-color:var(--acao-clara)}
.opcao input{accent-color:var(--acao);width:18px;height:18px;flex-shrink:0}
.opcao b{display:block;font-size:.9rem;font-weight:600}
.opcao small{display:block;font-size:.76rem;color:var(--texto-fraco)}
.opcao.on{border-color:var(--acao);background:var(--acao-vidro)}
.resumo{background:var(--gelo);border-radius:var(--raio);padding:var(--e4);margin-bottom:var(--e4)}
.resumo__l{display:flex;justify-content:space-between;font-size:.88rem;padding:5px 0}
.resumo__l--total{border-top:1px solid var(--borda);margin-top:6px;padding-top:10px;font-weight:700;font-size:1.05rem;color:var(--marca-profundo)}
.resumo__l--desconto{color:var(--sucesso);font-weight:600}
.passos-nav{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin:0 0 var(--e6)}
.passos-nav__linha{flex:1;max-width:44px;height:2px;background:var(--borda);margin-top:15px;border-radius:2px}
.passo-bola{display:grid;justify-items:center;gap:5px;width:74px;text-align:center}
.passo-bola b{
width:32px;height:32px;border-radius:50%;
display:grid;place-items:center;
background:var(--gelo-2);color:var(--texto-fraco);
font-family:var(--corpo);font-size:.85rem;font-weight:700;
}
.passo-bola small{font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-fraco);line-height:1.2}
.passo-bola.on b{background:var(--acao);color:#fff}
.passo-bola.on small{color:var(--acao)}
.passo-bola.feito b{background:var(--sucesso);color:#fff}
.passo-bola.feito small{color:var(--texto)}
.rotulo-grupo{font-size:.78rem;font-weight:600;margin-bottom:8px}
.campo__ajuda{font-size:.74rem;color:var(--texto-fraco);line-height:1.4}
.dica-orcamento{font-size:.78rem;color:var(--acao);background:var(--acao-vidro);border-radius:var(--raio);padding:10px var(--e3);margin-bottom:var(--e4);line-height:1.4}
.aviso{background:var(--gelo);border:1px solid var(--borda);border-left:4px solid var(--acao);border-radius:var(--raio);padding:var(--e3) var(--e4);font-size:.8rem;color:var(--texto-fraco);margin-bottom:var(--e4)}
.nota{background:var(--gelo);border-radius:var(--raio);padding:var(--e4);font-family:ui-monospace,monospace;font-size:.78rem;white-space:pre-wrap;line-height:1.55;color:var(--texto);max-height:280px;overflow-y:auto;margin-bottom:var(--e4);border:1px solid var(--borda)}
.ok-selo{width:64px;height:64px;border-radius:50%;background:var(--acao);display:grid;place-items:center;margin:0 auto var(--e4)}
@media (min-width:560px){
.setores{display:flex;gap:var(--e2);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:var(--e2);scrollbar-width:none}
.setor{flex:0 0 208px;scroll-snap-align:start;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--e3);padding:var(--e3) var(--e4);text-align:left}
.setor h3{font-size:1.12rem;line-height:1;margin-bottom:3px}
.setor p{display:block}
}
@media (min-width:640px){
.lojas{grid-template-columns:repeat(2,1fr)}
.rodape__grid{grid-template-columns:repeat(2,1fr)}
.modal{align-items:center;padding:var(--e4)}
.modal__caixa{border-radius:var(--raio-g)}
}
@media (min-width:900px){
.nav-mob{display:none}
.barra-pedido{display:none !important}
.so-mob{display:none}
.so-desk{display:block}
.txt-curto{display:none}
.txt-longo{display:inline}
}
@media (min-width:960px){
.nav{display:flex}
.rodape__grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--e6)}
.logo{height:30px}
.marca-card{flex:0 0 168px}
}
/* cada tela recebe a versão da arte feita para ela:
vertical no celular, horizontal no desktop */
/* ---------- escolha de medida/bitola no detalhe do produto ----------
O mesmo mecanismo que no Bruno das Tintas escolhia a COR aqui escolhe a
MEDIDA: bitola do vergalhão, diâmetro do cano, espessura da telha. É o
dado que a loja precisa para separar, e que muda o item — 2 medidas são
2 linhas no pedido, não uma com quantidade 2. */
.medidas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--e3)}
.medida{
border:1px solid var(--borda);background:var(--branco);color:var(--texto);
padding:9px 12px;border-radius:999px;font-size:.82rem;font-weight:500;
min-height:38px;transition:border-color .15s,background .15s,color .15s;
}
.medida:hover{border-color:var(--acao-clara)}
.medida.on{background:var(--acao);border-color:var(--acao);color:#fff;font-weight:600}
.medida:focus-visible{outline:2px solid var(--acao-clara);outline-offset:2px}
/* convite de item sob encomenda: é conversa, não item de tabela — por isso
não parece um card de produto */
.sob-medida{
background:linear-gradient(150deg,var(--marca-profundo),var(--marca-noite));
color:#fff;border-radius:var(--raio-g);padding:var(--e4);
}
.sob-medida b{display:block;font-family:var(--display);font-size:1.35rem;
font-weight:800;text-transform:uppercase;line-height:1.05;margin-bottom:6px}
.sob-medida p{font-size:.86rem;line-height:1.45;color:#C6D2DE;margin-bottom:var(--e3)}
.sob-medida__btn{width:100%;background:var(--branco);color:var(--marca-profundo)}
.sob-medida__btn:hover{background:var(--gelo-2)}
/* medida do item no carrinho */
.item__medida{font-size:.78rem;color:var(--acao);font-weight:600}
/* ---------- ficha técnica no detalhe ---------- */
.ficha{display:grid;grid-template-columns:auto 1fr;gap:6px var(--e4);font-size:.88rem}
.ficha dt{color:var(--texto-fraco);font-weight:600;white-space:nowrap}
.ficha dd{color:var(--texto);line-height:1.4}
.ficha__aviso{margin-top:var(--e3);font-size:.82rem;color:var(--acao);font-weight:600}
/* ---------- ação sempre alcançável no detalhe do produto ----------
Com 27 cores na carta, o botão "Adicionar ao pedido" caía a 1500px do topo
num celular de 812px: o cliente rolava a carta inteira antes de conseguir
comprar. Agora ele gruda no rodapé do modal e fica sempre à mão. */
.det__acao{
position:sticky;bottom:0;z-index:3;
margin:var(--e6) calc(var(--e6) * -1) calc(var(--e6) * -1);
padding:var(--e3) var(--e6) calc(var(--e3) + env(safe-area-inset-bottom));
background:var(--branco);
border-top:1px solid var(--borda);
box-shadow:0 -6px 20px rgba(15,20,26,.10);
}
.det__acao .btn{width:100%;margin:0}
/* a tabela de medidas não precisa de altura infinita: rola dentro do
próprio bloco em vez de esticar o modal */
@media (max-width:559px){
.medidas{max-height:184px;overflow-y:auto;padding-right:4px}
}
/* =========================================================
Blocos que não existem no site do Bruno das Tintas
========================================================= */
/* ---------- catálogo ainda sem produto ----------
Estado normal deste site enquanto o levantamento com o dono não fecha.
Não é erro, e não pode parecer erro: a loja existe, o catálogo é que
ainda está sendo montado. O caminho do WhatsApp continua aberto. */
.catalogo-vazio{
grid-column:1/-1;text-align:center;
border:2px dashed var(--borda);border-radius:var(--raio-g);
padding:var(--e12) var(--e4);background:var(--gelo);
}
.catalogo-vazio b{
display:block;font-family:var(--display);font-size:1.5rem;font-weight:800;
text-transform:uppercase;color:var(--marca-profundo);margin-bottom:var(--e2);
}
.catalogo-vazio p{color:var(--texto-fraco);font-size:.92rem;max-width:44ch;margin:0 auto var(--e4);line-height:1.5}
.catalogo-vazio .btn{max-width:320px;margin:0 auto}
/* ---------- aviso de "aqui não tem preço" ----------
Aparece uma vez, no topo do catálogo. O cliente que vem de um e-commerce
comum estranha a ausência de valor e acha que a página quebrou; dizer isso
na cara evita a desconfiança e já explica o próximo passo. */
.sem-preco{
display:flex;gap:var(--e3);align-items:flex-start;
background:var(--acao-vidro);border-radius:var(--raio);
padding:var(--e3) var(--e4);margin-bottom:var(--e4);
font-size:.86rem;line-height:1.45;color:var(--texto);
}
.sem-preco svg{flex:0 0 20px;margin-top:2px}
.sem-preco b{font-weight:700}
/* ---------- botão de instalar o app (PWA) ----------
Só aparece quando o navegador oferece a instalação — o app.js mostra.
Fica escondido por padrão para não prometer o que o iOS não dá. */
.instalar{display:none;align-items:center;gap:8px}
.instalar.on{display:inline-flex}
/* ---------- unidade de venda no detalhe ---------- */
.det__venda{
display:inline-block;font-family:var(--display);font-size:1.15rem;font-weight:800;
text-transform:uppercase;background:var(--alerta);color:var(--alerta-forte);
padding:7px 12px;border-radius:6px;
}
/* A foto do destaque tinha 68px de coluna e 16px de margem: os 16px vazavam
para dentro da coluna do texto, e no celular a linha "Valor no WhatsApp"
encostava na foto. A coluna passa a contar a margem.
Escopado até 899px porque a partir daí o card vira faixa horizontal. */
@media (max-width:899px){
.hero__card{grid-template-columns:88px 1fr}
.hero__card-foto{width:72px;height:72px}
}
/* =========================================================
Blocos comerciais — Armazém do Ferro
========================================================= */
/* ---------- busca no topo ----------
A busca é o caminho mais curto entre "preciso de cimento" e o card do
cimento, então mora no cabeçalho, visível em qualquer rolagem. */
.topo__busca{background:var(--marca-noite);padding:0 var(--e4) var(--e3)}
.topo__busca .busca{max-width:var(--max);margin:0 auto;background:var(--branco);border-color:transparent}
.topo__busca .busca input{background:transparent}
/* ---------- pilares da marca na capa ---------- */
.capa__pilares{margin-top:var(--e4);font-size:.72rem;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--marca-sol)}
/* ---------- carro-chefe: ferro e cimento ----------
Dois cards grandes, com peso visual acima do resto do catálogo: é onde a
loja compete em preço e é por onde entra quem vem de anúncio. */
.secao--fortes{background:var(--gelo)}
.fortes{display:grid;gap:var(--e3);grid-template-columns:1fr}
@media (min-width:720px){.fortes{grid-template-columns:1fr 1fr;gap:var(--e4)}}
.forte{
display:grid;grid-template-columns:auto 1fr;align-items:center;
gap:var(--e4);text-align:left;width:100%;
background:linear-gradient(140deg,var(--marca-profundo),var(--marca-noite));
color:#fff;border-radius:var(--raio-g);padding:var(--e6);
box-shadow:var(--sombra);transition:transform .12s,box-shadow .15s;
}
.forte:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.forte__ico{width:52px;height:52px;display:grid;place-items:center;
background:rgba(255,255,255,.14);border-radius:14px}
.forte__ico svg{width:28px;height:28px}
.forte__txt b{display:block;font-size:1.7rem;line-height:1;text-transform:uppercase}
.forte__txt small{display:block;margin-top:6px;font-size:.86rem;color:var(--marca-sol);line-height:1.35}
.forte__cta{grid-column:1/-1;font-size:.82rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:#fff;border-top:1px solid rgba(255,255,255,.22);
padding-top:var(--e3)}
/* ---------- cobrimos orçamento ----------
O diferencial que a loja já usa no balcão, virado botão. */
.orcamento{display:grid;gap:var(--e6);align-items:center}
@media (min-width:820px){.orcamento{grid-template-columns:1.4fr 1fr;gap:var(--e12)}}
.orcamento__txt h2{font-size:clamp(1.7rem,6vw,3rem);margin:6px 0 10px;line-height:1}
.orcamento__txt h2 em{font-style:normal;color:var(--marca-sol);display:block}
.orcamento__txt p{color:#F3DEDC;max-width:52ch;line-height:1.5;font-size:.95rem}
.orcamento__acao{background:rgba(0,0,0,.18);border-radius:var(--raio-g);padding:var(--e6)}
.orcamento__acao small{display:block;margin-top:var(--e3);text-align:center;
font-size:.78rem;color:var(--marca-sol)}
/* ---------- diferenciais ---------- */
.diferenciais{display:grid;gap:var(--e3);grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){.diferenciais{grid-template-columns:repeat(5,1fr);gap:var(--e4)}}
.dif{background:var(--gelo);border:1px solid var(--borda);border-radius:var(--raio-g);
padding:var(--e4);text-align:center}
.dif b{display:block;font-size:1.5rem;line-height:1;text-transform:uppercase;color:var(--marca-profundo)}
.dif span{display:block;margin-top:6px;font-size:.8rem;color:var(--texto-fraco);line-height:1.35}
/* ---------- contato ---------- */
.contato{display:grid;gap:var(--e2);margin-top:var(--e6);grid-template-columns:1fr}
@media (min-width:620px){.contato{grid-template-columns:repeat(2,1fr);gap:var(--e3)}}
@media (min-width:960px){.contato{grid-template-columns:repeat(4,1fr)}}
.contato__item{
display:block;width:100%;text-align:left;
background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);
padding:var(--e3) var(--e4);min-height:64px;transition:border-color .15s;
}
.contato__item:hover{border-color:var(--acao)}
.contato__rot{display:block;font-size:.66rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--texto-fraco);margin-bottom:3px}
.contato__item b{font-size:1rem;color:var(--texto)}
.contato__item--wpp{border-color:var(--wpp)}
.contato__item--wpp b{color:var(--wpp)}
/* ---------- faixa de campanha ---------- */
.campanha{background:var(--acao);color:#fff}
.campanha__miolo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3);
padding:var(--e3) var(--e4)}
.campanha__miolo b{font-size:1.35rem;text-transform:uppercase;line-height:1}
.campanha__miolo span{font-size:.88rem;flex:1;min-width:180px}
.campanha__miolo .btn{padding:10px 18px;min-height:42px}
/* ---------- variação de medida no detalhe ---------- */
.det__varia{font-size:.92rem;line-height:1.45;color:var(--texto)}
/* ---------- filtros do catálogo em trilho ----------
Com 11 categorias, as pílulas quebravam em 7 linhas no celular e empurravam
o catálogo para fora da tela. Agora rolam na horizontal, como o menu.
No desktop cabe tudo, então voltam a quebrar em linha. */
@media (max-width:899px){
.filtros{
flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;scrollbar-width:none;
padding-bottom:var(--e2);margin-inline:calc(var(--e4) * -1);
padding-inline:var(--e4);
}
.filtros::-webkit-scrollbar{display:none}
.filtros .filtro{flex:0 0 auto;scroll-snap-align:start}
}
/* A foto vazia é neutra de propósito: cinza claro com a inicial, e não o
vermelho da marca. Com quase 50 produtos ainda sem foto, o vermelho
transformava o catálogo inteiro numa parede vermelha e tirava o destaque
dos botões, que é onde ele precisa estar. */
/* ---------- mapa da loja ----------
O endereço escrito responde "onde fica?"; o mapa responde "como chego?".
Para quem vai buscar material de caminhonete, a segunda pergunta é a que
importa. Entra com loading=lazy: só baixa se a pessoa rolar até aqui. */
.mapa{
margin-top:var(--e4);border-radius:var(--raio-g);overflow:hidden;
border:1px solid var(--borda);box-shadow:var(--sombra);
background:var(--gelo-2);line-height:0;
}
.mapa iframe{width:100%;height:280px;border:0;display:block}
@media (min-width:900px){
/* No desktop o mapa fica ao lado do card da loja, não embaixo. */
.lojas-e-mapa{display:grid;grid-template-columns:auto 1fr;gap:var(--e6);align-items:start}
.lojas-e-mapa .mapa{margin-top:0}
.lojas-e-mapa .mapa iframe{height:100%;min-height:380px}
}
/* ---------- destaques da semana ---------- */
.destaque-grade{display:grid;gap:var(--e3);grid-template-columns:repeat(2,1fr);margin-top:var(--e4)}
@media (min-width:900px){
.destaque-grade{grid-template-columns:repeat(3,1fr);gap:var(--e4);margin-top:var(--e6)}
}
/* O selo de "principal" no card grande: o cimento é sempre o carro-chefe. */
.hero__card-topo em{
font-style:normal;display:inline-block;margin-left:8px;
font-family:var(--corpo);font-size:.6rem;font-weight:700;letter-spacing:.1em;
background:var(--acao);color:#fff;padding:3px 7px;border-radius:4px;vertical-align:middle;
}
/* ---------- lista de argumentos do "cobrimos orçamento" ---------- */
.orcamento__itens{list-style:none;margin-top:var(--e4);display:grid;gap:8px}
.orcamento__itens li{
position:relative;padding-left:24px;font-size:.9rem;line-height:1.4;color:#F3DEDC;
}
.orcamento__itens li::before{
content:'';position:absolute;left:0;top:6px;width:12px;height:7px;
border-left:2px solid var(--marca-sol);border-bottom:2px solid var(--marca-sol);
transform:rotate(-45deg);
}
/* A arte de "como comprar" fica dentro da seção escura: sem borda clara nem
sombra, que ali só criariam uma moldura boiando. */
.secao--marca .arte-secao{border:none;box-shadow:none;margin-bottom:var(--e6)}
/* ---------- grade com poucos itens ----------
No desktop a grade é `auto-fill` com faixas de 220px: com um produto só,
ela reserva as outras quatro colunas e sobra um vazio enorme do lado
direito — foi o "furo" que apareceu na seção Novidades. Com poucos itens,
a grade passa a ter exatamente o número de colunas necessário, e o card
mantém tamanho de card em vez de esticar pela largura toda. */
@media (min-width:560px){
.grade--um{grid-template-columns:minmax(220px,300px)}
.grade--dois{grid-template-columns:repeat(2,minmax(220px,300px))}
}
/* ---------- novidade única ----------
Com um produto só, a linha inteira ficava vazia à direita no desktop.
Em vez de esticar o card, o título vai para o lado dele: a linha se fecha
e a seção lê como "temos uma novidade", que é a verdade. */
@media (min-width:900px){
#novidades .wrap:has(.grade--um){
display:grid;grid-template-columns:1fr minmax(240px,290px);
gap:var(--e12);align-items:center;
}
#novidades .wrap:has(.grade--um) .secao__cabeca{margin-bottom:0}
}
/* ---------- nota do Google no card da loja ----------
317 pessoas avaliaram: para quem nunca comprou aqui, isso pesa mais do que
qualquer adjetivo que a gente escrevesse. */
.nota-google{display:flex;align-items:center;gap:7px;margin-top:8px;
font-size:.74rem;color:#fff;opacity:.92}
.nota-google:hover{opacity:1;text-decoration:underline}
.estrelas{display:inline-flex;gap:1px}
.estrelas i{
width:13px;height:13px;display:block;
background:linear-gradient(90deg,#FFC53D var(--p),rgba(255,255,255,.32) var(--p));
-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .9-5 4.9 1.2 7L12 18l-6.2 3.3L7 14.3 2 9.4l7-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .9-5 4.9 1.2 7L12 18l-6.2 3.3L7 14.3 2 9.4l7-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* ---------- foto no card de carro-chefe ----------
As fotos são recortes em fundo transparente, e vergalhão é cinza escuro:
sobre o vinho do card ele sumiria. A caixa clara devolve o contraste e
ainda repete a linguagem do card de produto do catálogo. */
.forte__foto{
width:76px;height:76px;flex:0 0 76px;border-radius:14px;
background:var(--branco);display:grid;place-items:center;overflow:hidden;
}
.forte__foto img{width:100%;height:100%;object-fit:contain;padding:7px}
@media (min-width:720px){
.forte__foto{width:92px;height:92px;flex-basis:92px;border-radius:16px}
}
/* ---------- foto no card de categoria ----------
Mesmo raciocínio do card de carro-chefe: o cliente reconhece o produto
antes de ler o nome da categoria. A caixa é maior que a do ícone porque
foto de 38px não se lê — e clara, porque as fotos são recortes e metade
dos produtos é cinza. */
.setor__foto{
width:62px;height:62px;flex:0 0 62px;min-width:0;border-radius:12px;
background:var(--gelo);display:grid;place-items:center;overflow:hidden;flex-shrink:0;
}
.setor__foto img{width:100%;height:100%;object-fit:contain;padding:5px}
@media (min-width:560px){
.setores{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
.setor__foto{width:74px;height:74px;flex-basis:74px}
}
/* ---------- endereço e horário na capa ----------
Linha de apoio, não CTA: peso visual abaixo dos botões, mas o endereço é
clicável e leva ao mapa. Responde "onde fica" e "está aberto agora" sem
gastar um terceiro botão. */
.capa__local{
grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--e3) var(--e6);
align-items:center;margin-top:var(--e4);
padding-top:var(--e4);border-top:1px solid rgba(255,255,255,.16);
}
.capa__local-item{
display:inline-flex;align-items:center;gap:7px;
font-size:.82rem;color:#E9D5D3;line-height:1.3;
}
.capa__local-item svg{flex:0 0 16px;width:16px;height:16px;opacity:.75}
a.capa__local-item:hover{color:#fff}
a.capa__local-item:hover span{text-decoration:underline}
/* bolinha de estado: verde aberto, cinza fechado — lida antes do texto */
.capa__local-item--estado i{
width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);
flex:0 0 8px;
}
.capa__local-item--estado.aberto i{
background:#37D67A;box-shadow:0 0 0 3px rgba(55,214,122,.22);
}
.capa__local-item--estado.aberto{color:#fff;font-weight:600}
@media (min-width:560px){
/* Ao lado dos botões, a divisória horizontal ficava boiando no meio da
capa e o bloco caía abaixo da linha dos botões. Aqui ela vira vertical e
o texto alinha pelo centro deles. */
.capa__local{
margin-top:0;padding-top:0;border-top:none;
align-self:center;flex:0 1 auto;
padding:var(--e2) 0 var(--e2) var(--e6);
border-left:1px solid rgba(255,255,255,.18);
gap:var(--e2) var(--e6);
}
.capa__local-item{font-size:.88rem}
}
/* Numa faixa estreita entre o botão e a borda, endereço e horário empilham:
melhor duas linhas curtas do que uma linha espremida. */
@media (min-width:560px) and (max-width:1080px){
.capa__local{flex-direction:column;align-items:flex-start;gap:6px}
}