@charset "UTF-8";
/* ============================================================
app.css - Papelaria Classic (site novo)
------------------------------------------------------------
Um arquivo de estilo so, escrito primeiro para o CELULAR.
As telas maiores entram nos @media la embaixo.
Nada de tabela de layout: a grade de produtos e feita com
CSS Grid, entao ela se ajusta sozinha de 2 colunas no celular
ate 5 colunas no monitor.
============================================================ */
/* ---------- 1. Cores, medidas e sombras ---------- */
:root {
--azul: #0090cb; /* cor da marca, ja usada no site atual */
--azul-escuro: #0072a3;
--azul-claro: #e8f6fd;
--verde: #067d3c; /* economia / desconto de caixa */
--vermelho: #c0392b; /* falta, erro */
--amarelo: #fff4d6;
--texto: #1c2b36;
--texto-fraco: #63747f;
--borda: #e2e8ec;
--fundo: #f5f7f9;
--branco: #fff;
--raio: 10px;
--raio-g: 16px;
--sombra: 0 1px 3px rgba(20,40,60,.08);
--sombra-md: 0 4px 14px rgba(20,40,60,.10);
--topo-altura: 56px;
--largura-max: 1220px;
}
/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
font-size: 15px;
line-height: 1.5;
color: var(--texto);
background: var(--fundo);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .6rem; line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
.container {
width: 100%;
max-width: var(--largura-max);
margin: 0 auto;
padding: 0 12px;
}
.somente-leitor { /* visivel so para leitor de tela */
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* ---------- 2b. Faixa de contato (topo do topo) ----------
Telefone e WhatsApp visiveis em toda pagina - alem de ajudar
quem esta com pressa, sites com telefone/whatsapp visivel no
cabecalho tendem a se sair melhor no Google (dado de contato
facil de achar). */
.faixa-contato {
background: #072235;
color: #cfe3ee;
font-size: .74rem;
}
.faixa-contato-linha {
display: flex;
align-items: center;
gap: 14px;
height: 30px;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
}
.faixa-contato-linha::-webkit-scrollbar { display: none; }
.faixa-contato a {
display: inline-flex;
align-items: center;
gap: 4px;
color: #fff;
font-weight: 600;
}
.faixa-contato a:hover { text-decoration: none; opacity: .85; }
.faixa-contato-horario { color: #8fabbc; margin-left: auto; display: none; }
/* ---------- 3. Cabecalho ---------- */
.topo {
position: sticky;
top: 0;
z-index: 40;
background: var(--branco);
border-bottom: 1px solid var(--borda);
box-shadow: var(--sombra);
}
.topo-linha {
display: flex;
align-items: center;
gap: 10px;
height: var(--topo-altura);
}
.topo-logo {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
gap: 8px;
font-weight: 800;
font-size: 1.05rem;
color: var(--texto);
letter-spacing: -.02em;
white-space: nowrap;
}
.topo-logo:hover { text-decoration: none; }
.topo-logo span { color: var(--azul); }
/* A logo cresce junto com a altura do topo em cada faixa de tela
(ver os @media la embaixo). Valor fixo por faixa, e nao
calc(var(--topo-altura)...), porque a --topo-altura fica em 56px
sempre - quem muda a altura de verdade e o .topo-linha em cada
breakpoint, entao um calc() em cima da variavel travaria a logo
no tamanho do celular mesmo no monitor. */
.topo-logo img {
display: block;
width: auto;
max-height: 40px;
max-width: 150px;
object-fit: contain;
}
/* botao de tres tracinhos (so aparece no celular) */
.botao-menu {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
flex: 0 0 40px;
border: 1px solid var(--borda);
border-radius: var(--raio);
background: var(--branco);
color: var(--texto);
cursor: pointer;
font-size: 1.1rem;
}
.topo-acoes {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
}
.topo-botao {
display: inline-flex;
align-items: center;
gap: 6px;
height: 40px;
padding: 0 10px;
border-radius: var(--raio);
color: var(--texto);
font-size: .82rem;
font-weight: 600;
white-space: nowrap;
}
.topo-botao:hover { background: var(--azul-claro); text-decoration: none; }
.topo-botao .rotulo { display: none; }
/* ---------- Menu de conta (Entrar/Cadastrar, ou o nome do cliente) ---------- */
.conta-menu { position: relative; }
.conta-gatilho {
border: 0;
background: none;
font-family: inherit;
cursor: pointer;
}
.conta-seta {
display: none;
font-size: .65rem;
color: var(--texto-fraco);
transition: transform .15s ease;
}
.conta-gatilho[aria-expanded="true"] .conta-seta { transform: rotate(180deg); }
.conta-painel {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 70;
min-width: 190px;
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
box-shadow: var(--sombra-md);
padding: 6px;
display: flex;
flex-direction: column;
}
.conta-painel[hidden] { display: none; }
.conta-painel a {
padding: 10px 12px;
border-radius: var(--raio);
color: var(--texto);
font-size: .86rem;
font-weight: 500;
}
.conta-painel a:hover { background: var(--azul-claro); text-decoration: none; color: var(--azul-escuro); }
.conta-painel a:last-child { color: var(--vermelho); }
/* ---------- Previa do carrinho ao passar o mouse (desktop) ----------
So liga com mouse de verdade (mesma checagem do flyout de
categorias) - em touch continua sendo so um link normal pro
carrinho.php. O conteudo vem de carrinho_previa.php por AJAX, e
so na PRIMEIRA vez que o mouse passa (o app.js guarda em cache -
carrinho_itens() consulta o ERP por item, custa caro pra rodar
em toda pagina so por precaucao). */
.carrinho-topo-wrap { position: relative; display: flex; }
.carrinho-previa {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 70;
width: 280px;
max-width: 84vw;
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
box-shadow: var(--sombra-md);
padding: 10px;
text-align: left;
color: var(--texto);
font-weight: 400;
}
.carrinho-previa[hidden] { display: none; }
.carrinho-previa-vazio { padding: 8px 4px; color: var(--texto-fraco); font-size: .86rem; }
.carrinho-previa-carregando { padding: 8px 4px; color: var(--texto-fraco); font-size: .86rem; }
.carrinho-previa-lista { list-style: none; margin: 0 0 6px; padding: 0; }
.carrinho-previa-lista li {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 2px;
border-bottom: 1px solid var(--borda);
}
.carrinho-previa-lista li:last-child { border-bottom: 0; }
.carrinho-previa-link {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
color: var(--texto);
}
.carrinho-previa-link:hover { color: var(--azul); text-decoration: none; }
.carrinho-previa-link:hover .carrinho-previa-nome { text-decoration: underline; }
.carrinho-previa-lista img {
flex: 0 0 auto;
width: 40px; height: 40px;
object-fit: contain;
border: 1px solid var(--borda);
border-radius: 6px;
background: #fff;
}
.carrinho-previa-nome {
flex: 1 1 auto;
min-width: 0;
font-size: .82rem;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.carrinho-previa-qtde { flex: 0 0 auto; font-size: .8rem; color: var(--texto-fraco); }
.carrinho-previa-resto { margin: 0 0 8px; font-size: .78rem; color: var(--texto-fraco); }
.carrinho-previa-total {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 2px 10px;
font-size: .88rem;
}
/* bolinha com a quantidade de itens no carrinho */
.carrinho-contador {
display: inline-flex;
align-items: center; justify-content: center;
min-width: 20px; height: 20px;
padding: 0 5px;
border-radius: 999px;
background: var(--azul);
color: #fff;
font-size: .7rem;
font-weight: 700;
}
/* ---------- 4. Busca ----------
Existem DUAS buscas no HTML: uma dentro da linha do topo (que
so aparece no desktop) e outra na linha de baixo (que so
aparece no celular). Uma esconde a outra - nunca as duas. */
.busca {
display: flex;
gap: 6px;
padding: 0 0 10px;
}
.busca-topo { display: none; } /* no celular quem vale e a de baixo */
/* moldura em volta so do campo de texto, pra o dropdown de
sugestoes ficar exatamente embaixo dele (nao do botao junto) */
.busca-campo {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
.busca input[type="search"] {
width: 100%;
height: 42px;
padding: 0 12px;
font-size: 16px; /* 16px evita o zoom automatico do iPhone */
border: 1px solid var(--borda);
border-radius: var(--raio);
background: var(--fundo);
color: var(--texto);
}
.busca input[type="search"]:focus {
outline: 2px solid var(--azul);
outline-offset: -1px;
background: var(--branco);
}
.busca button {
flex: 0 0 auto;
height: 42px;
padding: 0 16px;
border: 0;
border-radius: var(--raio);
background: var(--azul);
color: #fff;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
}
.busca button:hover { background: var(--azul-escuro); }
/* ---------- 4a. Sugestoes da busca (dropdown) ----------
Aparece embaixo do campo enquanto o cliente digita. Some
sozinho se o JS nao carregar - o campo continua um : ele ancora no
.mestres-linha (a barra inteira), e o app.js calcula o "left"
pra ele nascer centralizado embaixo do item e so ser empurrado
quando fosse estourar a borda da tela. Por isso o precisa
ficar position:static - se voltasse a ser relative, o painel
passaria a se posicionar dentro do e a conta do JS
(feita em relacao a barra) sairia errada. */
.mestre-item { position: static; }
/* Painel largo tipo "mega menu" (igual kalunga.com.br): os grupos
viram colunas lado a lado, cada uma ja mostrando os subgrupos
embaixo - nada de flyout abrindo pro lado nem lista vertical
gigante. Uma mestre com 60 grupos vira ~6 colunas x 10 linhas
em vez de uma lista de 60 itens, entao cabe sem rolar NADA,
nem a pagina nem o painel - resolve de vez o problema de quem
nao tem rodinha no mouse: sair de cima do grupo pra rolar a
barra fazia o dropdown inteiro fechar antes de conseguir ver
os subgrupos de baixo. */
.mestre-dropdown {
display: none;
position: absolute;
top: 100%;
/* O "left" de verdade e calculado no app.js na hora de abrir:
centraliza embaixo do item e so empurra se fosse estourar a
borda da tela (painel de Automacao e estreito, o de Papelaria
e largo - centralizar todos na barra jogava os estreitos pro
meio da tela, longe do icone). Este 0 e so o ponto de partida
pra quem chega pelo teclado antes do JS medir. */
left: 0;
z-index: 75;
width: max-content;
max-width: min(92vw, 1100px);
max-height: 75vh;
overflow-y: auto;
/* Sem isso, quando o conteudo do painel acaba de rolar (ou em
alguns navegadores mesmo antes disso), a rodinha do mouse
"vaza" pro scroll da PAGINA em vez de ficar so no painel - a
pessoa girava a rodinha achando que ia ver o resto da lista e
via a pagina toda rolar (o painel, que e position:absolute
ancorado la em cima, ia junto pra fora da tela). contain trava
o scroll dentro do painel enquanto o mouse estiver sobre ele. */
overscroll-behavior: contain;
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
box-shadow: var(--sombra-md);
padding: 14px;
}
.mestre-mega {
/* Colunas tipo jornal, nao grid: com grid, a LINHA inteira
fica com a altura do maior item dela (se um grupo tiver
muitos subgrupos, a linha toda incha, mesmo os vizinhos sem
nada a ver). Coluna tipo jornal flui direto pra baixo e so
pula de coluna quando enche - cada grupo ocupa so o espaco
que precisa. O numero de colunas vem inline do PHP.
O "width" tambem vem inline do PHP (precisa de uma largura
definida pra column-count saber quanto dar pra cada coluna) -
ver MESTRE_MEGA_COLUNA_LARGURA/GAP em views/layout.php, tem
que bater com o column-gap abaixo. Colunas mais estreitas
(128px, referencia visual: menu da Kalunga) cabem melhor em
notebooks 1366x768 sem estourar a pagina. max-width:100% e
um cinto-de-seguranca a mais, pro caso de algum mestre ainda
assim pedir mais largura do que .mestre-dropdown permite. */
max-width: 100%;
column-gap: 14px;
}
.mestre-mega-coluna { min-width: 0; break-inside: avoid; margin-bottom: 4px; }
.mestre-mega-titulo {
display: block;
padding: 3px 3px;
font-size: .82rem;
font-weight: 700;
color: var(--texto);
border-bottom: 1px solid var(--borda);
margin-bottom: 1px;
}
.mestre-mega-titulo:hover { color: var(--azul); text-decoration: none; }
.mestre-mega-sublista { list-style: none; margin: 0; padding: 0; }
.mestre-mega-sublista a {
display: block;
padding: 1px 3px;
border-radius: var(--raio);
color: var(--texto-fraco);
font-size: .78rem;
line-height: 1.15;
}
.mestre-mega-sublista a:hover { background: var(--azul-claro); color: var(--azul-escuro); text-decoration: none; }
/* ---------- 5. Gaveta de categorias ---------- */
.fundo-escuro {
position: fixed;
inset: 0;
background: rgba(15,30,45,.45);
opacity: 0;
visibility: hidden;
transition: opacity .2s ease;
z-index: 50;
}
.fundo-escuro.aberto { opacity: 1; visibility: visible; }
.gaveta {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 84%;
max-width: 320px;
background: var(--branco);
z-index: 60;
transform: translateX(-100%);
transition: transform .22s ease;
display: flex;
flex-direction: column;
overflow: hidden;
}
.gaveta.aberta { transform: translateX(0); }
.gaveta-topo {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
border-bottom: 1px solid var(--borda);
font-weight: 700;
}
.gaveta-fechar {
border: 0; background: none; font-size: 1.5rem;
line-height: 1; cursor: pointer; color: var(--texto-fraco);
width: 44px; height: 44px; /* alvo confortavel pro dedo */
}
.gaveta-corpo { overflow-y: auto; padding: 6px 0 24px; flex: 1; }
/* ---------- Arvore de navegacao: mestre > grupo > subgrupo ----------
Usada na gaveta do celular E na coluna do desktop. So um CSS
trata os tres niveis: o recuo (padding-left) e que aumenta a
cada nivel, tudo o mais e igual. */
.arvore-expandir-tudo {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 7px 14px;
border: 0;
border-bottom: 1px solid var(--borda);
background: var(--fundo);
color: var(--texto-fraco);
font-size: .78rem;
font-weight: 600;
cursor: pointer;
text-align: left;
}
.arvore-expandir-tudo:hover { color: var(--azul); }
/* Link "Catalogo" no topo da gaveta Departamentos - destacado, pra
quem quer ver todo mundo de uma vez sem entrar categoria por
categoria. Os outros institucionais (empresa, blog...) ficam
discretos, embaixo da arvore - ver .gaveta-institucional. */
.gaveta-catalogo-topo {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--azul-claro);
color: var(--azul-escuro);
font-weight: 700;
font-size: .86rem;
border-radius: var(--raio);
}
.gaveta-catalogo-topo:hover { background: #d8f0fb; text-decoration: none; }
/* Links institucionais discretos, depois da arvore de categorias -
fonte menor e cor apagada de proposito, pra nao competir com as
categorias (o foco principal da gaveta). */
/* Continuam mais discretos que as categorias (que sao o foco da
gaveta), mas dentro de uma "caixinha" propria e com a cor da
marca - soltos e cinza-claros no fim da lista, passavam batido. */
.gaveta-institucional {
list-style: none;
margin: 14px 14px 0;
padding: 12px 12px 10px;
border: 1px solid var(--borda);
border-radius: var(--raio);
background: var(--fundo);
display: flex;
flex-wrap: wrap;
gap: 2px 8px;
}
.gaveta-institucional a {
display: inline-block;
font-size: .82rem;
font-weight: 600;
color: var(--azul-escuro);
padding: 5px 8px;
border-radius: 999px;
}
.gaveta-institucional a:hover { background: var(--azul-claro); color: var(--azul-escuro); text-decoration: none; }
.arvore, .arvore-filhos { list-style: none; margin: 0; padding: 0; }
.arvore > li { border-bottom: 1px solid var(--borda); }
.arvore > li:last-child { border-bottom: 0; }
/* .arvore-linha aparece de DUAS formas no HTML:
- como uma DIV que embrulha um + o botao "+/-" (mestre e grupo)
- como o proprio das folhas (subgrupo), que carrega a classe
direto nele (nao tem botao do lado, entao nao precisa de div)
Por isso toda regra abaixo repete "a.arvore-linha" ao lado de
".arvore-linha > a" - sem isso, as folhas ficavam sem o fundo
azul de "selecionado" (a regra so pegava a variante com div). */
.arvore-linha { display: flex; align-items: stretch; }
.arvore-linha > a,
a.arvore-linha {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
color: var(--texto);
font-size: .84rem;
min-width: 0;
}
.arvore-linha > a:hover,
a.arvore-linha:hover { background: var(--azul-claro); text-decoration: none; }
/* Grupo (a "linha" e uma DIV que embrulha o + o botao "+/-")
sempre em negrito, pra servir de "cabecalho" mesmo fechado -
antes tinha o MESMO peso/cor do subgrupo enquanto fechado, so
dava pra perceber a diferenca pelo recuo. */
.arvore-linha > a { font-weight: 400; }
.arvore-icone {
flex: 0 0 auto;
display: inline-flex;
color: var(--azul);
}
.arvore-icone svg { width: 20px; height: 20px; }
/* Icone das categorias extras (ver icone_categoria_extra() e
catex_listar() em arvore_navegacao) - o mesmo gradiente
metade-rosa-metade-azul do botao no menu superior
(.mestre-extra-botao), so que num circulo com o icone dentro em
vez de atras do texto inteiro. */
.arvore-icone-extra {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
border-radius: 999px;
color: #5a2140;
background: linear-gradient(90deg, var(--cor-1, #ffc2dd) 0%, var(--cor-1, #ffc2dd) 50%, var(--cor-2, #bfe3ff) 50%, var(--cor-2, #bfe3ff) 100%);
}
.arvore-abrir {
flex: 0 0 40px;
border: 0;
border-left: 1px solid var(--borda);
background: none;
color: var(--texto-fraco);
font-size: 1rem;
cursor: pointer;
}
/* Enquanto o "+" esta aberto (mostrando os subgrupos), o botao E a
linha inteira do grupo ficam com fundo azul - fica bem visivel
qual grupo esta expandido. A classe "aberto" quem liga/desliga
e o JS (app.js), junto com o aria-expanded. */
.arvore-abrir[aria-expanded="true"] { background: var(--azul); color: #fff; }
.arvore-linha.aberto > a { background: var(--azul); color: #fff; }
.arvore-linha.aberto > a .arvore-icone { color: #fff; }
.arvore-filhos { background: #fafbfc; }
.arvore-filhos[hidden] { display: none; }
/* Subgrupo (a "linha" E o proprio , sem DIV nem botao do lado -
e sempre uma folha) - menor, cinza, peso normal e com espaco
vertical mais apertado entre eles: fica um "blocao" compacto
embaixo do grupo, em vez de parecer outra lista de cabecalhos. */
a.arvore-linha {
padding: 3px 14px 3px 28px;
font-size: .81rem;
color: var(--texto-fraco);
font-weight: 700;
}
.arvore-filhos .arvore-filhos a.arvore-linha { padding-left: 42px; }
/* Grupo aninhado (mestre > grupo, na gaveta Departamentos) so
ganha o recuo extra - continua com a cara de cabecalho de cima. */
.arvore-filhos .arvore-linha > a { padding-left: 28px; }
.arvore-filhos li { border-top: 1px solid var(--borda); }
.arvore-filhos li:first-child { border-top: 0; }
.arvore-folha > a { display: block; }
/* ---------- Flyout: subcategorias abrindo AO LADO (desktop) ----------
No desktop com mouse, passar o mouse num grupo abre as
subcategorias numa abinha AO LADO, em vez de empurrar a lista pra
baixo (sanfona) e obrigar a clicar no "+".
Por que ao lado e nao pra baixo: ja tentamos hover com a sanfona
antes e foi revertido - ao sair de cima do grupo pra alcancar a
barra de rolagem, tudo fechava e parecia que os itens sumiram
(ver o comentario em arvore_navegacao, views/layout.php). Abrindo
ao lado esse problema nao existe: o painel fica parado num canto
proprio e o mouse anda dentro dele a vontade.
Quem LIGA isso e o app.js, poendo .flyout-ok no , e so
quando o aparelho tem mouse de verdade e tela larga. Em celular,
tablet, e com o JS desligado, nada disso vale: continua tudo no
clique do "+", exatamente como sempre foi.
So os ramos FECHADOS ([hidden]) viram flyout. O ramo do grupo em
que a pessoa esta agora (aberto na marra pelo PHP, sem [hidden])
continua aberto na lista, como sempre - senao ela perderia de
vista as "irmas" da subcategoria que esta olhando.
position:fixed (e nao absolute) de proposito: a gaveta
"Departamentos" tem rolagem propria (.gaveta-corpo com
overflow-y), e um absolute seria CORTADO por ela. Com fixed o
painel escapa e o app.js calcula onde encostar. */
html.flyout-ok .arvore-filhos[hidden].flyout-aberto {
display: block;
position: fixed;
z-index: 80; /* acima da gaveta (60) */
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio);
box-shadow: var(--sombra-md);
padding: 4px 0;
overflow-y: auto;
overscroll-behavior: contain; /* rolar aqui dentro nao rola a pagina */
}
/* dentro do flyout as linhas voltam ao recuo normal: o painel ja
esta deslocado pro lado, nao precisa do recuo que existia pra
dar a entender "sou filho de quem esta acima". Espacamento
tambem fica igual ao de subgrupo (bem mais compacto que os 8px
verticais do grupo normal) - com mestre tipo "Papelaria" tendo
dezenas de grupos, o espacamento "solto" de fora do flyout
deixava a lista comprida demais a toa. */
html.flyout-ok .arvore-filhos.flyout-aberto a.arvore-linha,
html.flyout-ok .arvore-filhos.flyout-aberto .arvore-linha > a {
padding: 3px 14px;
font-weight: 400;
}
html.flyout-ok .arvore-filhos.flyout-aberto li { border-top: 0; }
/* mestre com muitos grupos (Papelaria, Higiene e Limpeza...) vira
colunas em vez de uma lista comprida com rolagem - o app.js decide
QUANTAS colunas (column-count vai por inline style) e a largura do
painel; aqui so o comportamento visual de cada coluna. */
html.flyout-ok .arvore-filhos.flyout-aberto.flyout-colunas {
column-gap: 8px;
}
html.flyout-ok .arvore-filhos.flyout-aberto.flyout-colunas li {
break-inside: avoid;
}
/* o "+" vira uma setinha ">" apontando pro lado - avisa que abre
ali do lado, nao pra baixo. Continua sendo um de
verdade (teclado e leitor de tela seguem funcionando, e clicar
ainda abre a sanfona como alternativa). */
html.flyout-ok .arvore-abrir {
flex-basis: 26px;
border-left: 0;
font-size: 0;
color: var(--texto-fraco);
}
html.flyout-ok .arvore-abrir::after { content: '\203A'; font-size: 1.15rem; line-height: 1; }
html.flyout-ok .arvore-abrir[aria-expanded="true"] { background: none; color: var(--texto-fraco); }
html.flyout-ok .arvore-linha.flyout-ativo > a { background: var(--azul-claro); }
html.flyout-ok .arvore-linha.flyout-ativo .arvore-abrir { color: var(--azul); }
/* "Voce esta aqui" - por ULTIMO no arquivo de proposito, pra sempre
ganhar de qualquer regra de recuo/cor acima, nao importa o nivel. */
.arvore-linha.ativa > a,
a.arvore-linha.ativa {
background: var(--azul) !important;
color: #fff !important;
font-weight: 600;
}
.arvore-linha.ativa > a .arvore-icone { color: #fff; }
/* ---------- 6. Estrutura da pagina ---------- */
.pagina { padding: 14px 0 40px; }
.coluna-lateral { display: none; } /* no celular vira gaveta */
.caminho { /* Categorias > Papelaria > Canetas */
font-size: .8rem;
color: var(--texto-fraco);
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.caminho a { color: var(--texto-fraco); }
.caminho .separador { opacity: .5; }
.cabecalho-lista {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.cabecalho-lista h1 { flex: 1 1 100%; margin: 0; }
.contagem { font-size: .82rem; color: var(--texto-fraco); }
.ordenar {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
font-size: .82rem;
color: var(--texto-fraco);
}
/* "Mostrar" (quantidade por pagina) fica logo depois da contagem,
sem empurrar pra direita - so o "Ordenar" (.ordenar sem essa
classe) e que vai pro extremo direito. */
.ordenar-esquerda { margin-left: 0; }
.ordenar select {
height: 36px;
padding: 0 8px;
border: 1px solid var(--borda);
border-radius: var(--raio);
background: var(--branco);
color: var(--texto);
font-size: .82rem;
}
/* ---------- 6a. Banners da home ----------
O trilho anda na horizontal com transform, que e o jeito mais
leve pro celular (nao repinta a tela toda a cada passo). */
.banners {
position: relative;
margin-bottom: 16px;
border-radius: var(--raio-g);
overflow: hidden;
background: var(--branco);
border: 1px solid var(--borda);
}
.banners-janela { overflow: hidden; }
.banners-trilho {
display: flex;
transition: transform .35s ease;
will-change: transform;
}
.banner {
flex: 0 0 100%;
min-width: 100%;
}
.banner img {
width: 100%;
height: auto;
display: block;
}
.banner-seta {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px; height: 36px;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,.86);
color: var(--texto);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
box-shadow: var(--sombra);
display: none; /* no celular o dedo arrasta; setas so no desktop */
}
.banner-anterior { left: 8px; }
.banner-proximo { right: 8px; }
.banner-pontos {
position: absolute;
left: 0; right: 0; bottom: 8px;
display: flex;
justify-content: center;
gap: 6px;
}
.banner-ponto {
width: 22px; height: 22px; /* alvo grande pro dedo... */
padding: 0;
border: 0;
background: none;
cursor: pointer;
position: relative;
}
.banner-ponto::after { /* ...com a bolinha pequena desenhada dentro */
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 8px; height: 8px;
border-radius: 999px;
background: rgba(255,255,255,.65);
box-shadow: 0 0 0 1px rgba(20,40,60,.25);
transition: width .2s ease, background .2s ease;
}
.banner-ponto.ativo::after {
width: 20px;
border-radius: 999px;
background: #fff;
}
/* ---------- 6b. Chamada da home e atalhos ---------- */
.chamada {
background: linear-gradient(135deg, var(--azul) 0%, #00648f 100%);
color: #fff;
border-radius: var(--raio-g);
padding: 22px 18px;
margin-bottom: 18px;
}
.chamada h1 { color: #fff; font-size: 1.25rem; margin-bottom: .4rem; }
.chamada p { margin: 0 0 14px; font-size: .88rem; opacity: .92; line-height: 1.5; max-width: 46ch; }
.chamada-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.chamada .botao { background: #fff; color: var(--azul); }
.chamada .botao:hover { background: #eaf6fc; color: var(--azul-escuro); }
.chamada .botao-vazado { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.chamada .botao-vazado:hover { background: rgba(255,255,255,.14); color: #fff; }
.atalhos-categorias { margin-top: 28px; }
.lista-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.atalho-categoria {
display: inline-flex;
align-items: center;
padding: 9px 14px;
background: var(--branco);
border: 1px solid var(--borda);
border-radius: 999px;
font-size: .82rem;
font-weight: 600;
color: var(--texto);
}
.atalho-categoria:hover {
border-color: var(--azul);
color: var(--azul);
text-decoration: none;
}
.atalho-categoria.ativo {
background: var(--azul);
border-color: var(--azul);
color: #fff;
}
.ajuda-caixa {
margin: 8px 0 0;
font-size: .76rem;
color: var(--texto-fraco);
}
/* ---------- 6c. Vitrine em carrossel (home: "outros produtos", "Fofos") ----------
Trilho com rolagem horizontal nativa (arrastar com o dedo no celular
funciona de graca) + duas setas que so empurram o scroll - mais simples
e mais leve que o carrossel de banners (nao precisa saber "qual slide
esta ativo", so rola). */
.vitrine-carrossel { margin-top: 28px; }
.vitrine-ver-tudo { font-size: .82rem; font-weight: 700; color: var(--azul); }
.vitrine-ver-tudo:hover { text-decoration: none; }
.vitrine-setas { margin-left: auto; display: flex; gap: 6px; }
.vitrine-seta {
width: 32px; height: 32px;
border: 1px solid var(--borda);
border-radius: 999px;
background: var(--branco);
color: var(--texto);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
}
.vitrine-seta:hover { border-color: var(--azul); color: var(--azul); }
.vitrine-trilho {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x proximity;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.vitrine-trilho::-webkit-scrollbar { display: none; }
/* Largura do item calculada pra bater com o numero de colunas do
.grade NESSA MESMA largura de tela (2/3/4/4/5), com o mesmo gap -
assim o carrossel mostra cards do mesmo tamanho dos das paginas
de categoria, so que em linha e com rolagem, em vez de grade. */
/* min-width:0 e essencial aqui: sem ele, um item flex nao encolhe
além do tamanho "natural" do conteudo de dentro (o card tem
botao, seletor de quantidade etc.) e o card ficava bem maior do
que o calc() pedia - a mesma razao pela qual .grade usa
minmax(0, 1fr) em vez de so 1fr nas colunas do grid.
display:flex + .card{flex:1} faz o CARD esticar pra altura
INTEIRA do item (que por sua vez ja fica igual ao vizinho mais
alto, comportamento padrao de flex-row) - sem isso, um card com
"Leve + pague -" ou preco de duas linhas ficava mais alto que os
outros da mesma fileira, porque cada .card so tinha a propria
altura de conteudo, nao a altura da fileira toda. */
.vitrine-item { flex: 0 0 calc((100% - 10px) / 2); min-width: 0; display: flex; scroll-snap-align: start; }
.vitrine-item .card { flex: 1; }
@media (min-width: 480px) {
.vitrine-trilho { gap: 12px; }
.vitrine-item { flex-basis: calc((100% - 24px) / 3); }
}
@media (min-width: 768px) {
.vitrine-trilho { gap: 14px; }
.vitrine-item { flex-basis: calc((100% - 42px) / 4); }
}
@media (min-width: 1024px) {
.vitrine-trilho { gap: 16px; }
.vitrine-item { flex-basis: calc((100% - 48px) / 4); }
}
@media (min-width: 1280px) {
.vitrine-item { flex-basis: calc((100% - 64px) / 5); }
}
/* Variante mais densa - "Quem viu este, viu tambem" e "Produtos
parecidos" na pagina do produto (produto.php) pedem mais itens
visiveis por tela do que a vitrine da home (que continua igual ao
.grade, ver acima). So os breakpoints largos mudam: no celular e
tablet nao tem espaco de sobra pra caber mais um sem espremer. */
@media (min-width: 1024px) {
.vitrine-densa .vitrine-item { flex-basis: calc((100% - 5 * 16px) / 6); }
}
@media (min-width: 1280px) {
.vitrine-densa .vitrine-item { flex-basis: calc((100% - 6 * 16px) / 7); }
}
/* linha "Fofos": fundo rosa-bebe pra destacar como algo a parte,
feminino, como pedido - so muda o fundo, o card continua branco. */
.vitrine-rosa {
background: linear-gradient(180deg, #fff0f7 0%, #fef6fa 100%);
border: 1px solid #ffd9ec;
border-radius: var(--raio-g);
padding: 16px 14px;
}
.vitrine-rosa h1 { color: #a1215f; }
/* "Mais acessados" - mesma ideia da caixa do "Fofos", so que num
cinza bem discreto (nao e uma categoria especial, e so pra
destacar visualmente do resto da pagina). */
.vitrine-cinza {
background: var(--fundo);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
padding: 16px 14px;
}
/* ---------- 7. Grade de produtos ---------- */
.grade {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.card {
display: flex;
flex-direction: column;
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
overflow: hidden;
transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: var(--sombra-md); }
/* A moldura da foto e um quadrado feito com padding-top:100%.
Foi de proposito: o "aspect-ratio" nao existe em celular antigo,
e sem ele a foto EM PE estourava a altura do card. Com padding
a moldura tem altura garantida em qualquer navegador, e a foto
se encaixa dentro dela deitada ou em pe. */
.card-foto {
display: block;
position: relative;
height: 0;
padding-top: 100%;
background: var(--branco);
overflow: hidden;
}
.card-selo-caixa {
position: absolute;
top: 6px; left: 6px;
z-index: 2;
background: var(--verde);
color: #fff;
font-size: .58rem;
font-weight: 700;
line-height: 1;
padding: 2px 6px;
border-radius: 999px;
max-width: calc(100% - 12px);
}
.card-foto img {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto; /* centraliza nos dois eixos */
width: auto; height: auto;
max-width: calc(100% - 20px);
max-height: calc(100% - 20px);
object-fit: contain;
mix-blend-mode: multiply; /* some com o fundo branco das fotos do ERP */
}
.card-corpo {
padding: 0 10px 10px;
display: flex;
flex-direction: column;
flex: 1;
gap: 6px;
}
.card-nome {
font-size: .82rem;
line-height: 1.35;
color: var(--texto);
font-weight: 500;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 3.3em;
}
.card-nome:hover { color: var(--azul); text-decoration: none; }
.card-codigo { font-size: .7rem; color: var(--texto-fraco); }
.card-preco {
font-size: 1.1rem;
font-weight: 800;
color: var(--texto);
letter-spacing: -.02em;
}
.card-preco .unidade {
font-size: .72rem;
font-weight: 500;
color: var(--texto-fraco);
}
.preco-caixa {
font-size: .74rem;
font-weight: 600;
color: var(--verde);
background: #eaf7ef;
border-radius: 6px;
padding: 3px 6px;
line-height: 1.3;
}
/* ---------- Blog ---------- */
.grade-blog {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 18px;
}
.card-blog {
display: flex;
flex-direction: column;
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
overflow: hidden;
transition: box-shadow .15s ease;
}
.card-blog:hover { box-shadow: var(--sombra-md); }
.card-blog-foto { display: block; height: 0; padding-top: 56%; position: relative; background: var(--fundo); }
.card-blog-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-blog-corpo { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-blog-data { font-size: .72rem; color: var(--texto-fraco); }
.card-blog-titulo { font-size: 1.02rem; font-weight: 700; color: var(--texto); line-height: 1.3; }
.card-blog-titulo:hover { color: var(--azul); text-decoration: none; }
.card-blog-resumo { font-size: .86rem; color: var(--texto-fraco); line-height: 1.5; flex: 1; margin: 0; }
.card-blog-link { font-size: .84rem; font-weight: 700; color: var(--azul); margin-top: 4px; }
.card-blog-link:hover { text-decoration: none; }
.post-blog { max-width: 760px; margin: 0 auto; }
.post-blog h1 { margin: 0 0 4px; font-size: 1.5rem; line-height: 1.3; }
.post-blog-data { font-size: .82rem; color: var(--texto-fraco); margin: 0 0 16px; }
.post-blog-foto { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--raio-g); margin-bottom: 18px; }
.post-blog-texto { font-size: .96rem; line-height: 1.7; color: var(--texto); }
.post-blog-texto p { margin: 0 0 1em; }
.post-blog-texto ul, .post-blog-texto ol { margin: 0 0 1em; padding-left: 1.4em; }
.post-blog-texto a { color: var(--azul); }
.sem-preco { font-size: .8rem; color: var(--texto-fraco); }
.em-falta {
display: inline-block;
font-size: .7rem; font-weight: 700;
color: var(--vermelho);
background: #fdeceb;
padding: 2px 6px; border-radius: 6px;
}
.card-acoes { margin-top: auto; padding-top: 4px; }
/* ---------- 8. Botoes ---------- */
.botao {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
min-height: 40px; /* alvo confortavel pro dedo */
padding: 0 14px;
border: 1px solid transparent;
border-radius: var(--raio);
background: var(--azul);
color: #fff;
font-size: .85rem;
font-weight: 700;
font-family: inherit;
cursor: pointer;
text-align: center;
}
.botao:hover { background: var(--azul-escuro); text-decoration: none; color: #fff; }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao-vazado {
background: var(--branco);
color: var(--azul);
border-color: var(--azul);
}
.botao-vazado:hover { background: var(--azul-claro); color: var(--azul-escuro); }
.botao-neutro {
background: var(--branco);
color: var(--texto-fraco);
border-color: var(--borda);
}
.botao-neutro:hover { background: var(--fundo); color: var(--texto); }
.botao-largura-auto { width: auto; }
.botao-pequeno { min-height: 38px; font-size: .78rem; padding: 0 10px; }
/* ---------- 9. Avisos ---------- */
.aviso {
padding: 10px 12px;
border-radius: var(--raio);
font-size: .86rem;
margin-bottom: 12px;
border: 1px solid transparent;
}
.aviso-ok { background: #eaf7ef; color: #14663a; border-color: #bfe5cd; }
.aviso-erro { background: #fdeceb; color: #8f2b20; border-color: #f3c8c3; }
.aviso-info { background: var(--azul-claro); color: #0a5b80; border-color: #bfe4f4; }
.aviso-atencao { background: var(--amarelo); color: #7a5200; border-color: #f0dca6; }
.vazio {
background: var(--branco);
border: 1px dashed var(--borda);
border-radius: var(--raio-g);
padding: 32px 18px;
text-align: center;
color: var(--texto-fraco);
}
/* ---------- 9b. Preview do catalogo em PDF ---------- */
.catalogo-preview {
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
overflow: hidden;
height: 70vh;
min-height: 420px;
}
.catalogo-preview iframe {
width: 100%;
height: 100%;
border: 0;
}
/* ---------- 9c. Pagina Empresa: galeria, Facebook, Instagram ---------- */
.galeria-empresa {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.galeria-item {
display: block;
aspect-ratio: 1 / 1;
border-radius: var(--raio);
overflow: hidden;
background: var(--fundo);
}
.galeria-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.galeria-item:hover img { transform: scale(1.06); }
.lightbox-fundo {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(10,20,30,.92);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.lightbox-fundo[hidden] { display: none; }
.lightbox-fundo img { max-width: 100%; max-height: 100%; border-radius: var(--raio); }
.lightbox-fechar {
position: absolute;
top: 16px; right: 16px;
width: 44px; height: 44px;
border: 0; border-radius: 999px;
background: rgba(255,255,255,.15);
color: #fff;
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
}
.lightbox-fechar:hover { background: rgba(255,255,255,.28); }
.facebook-embed {
display: flex;
justify-content: center;
overflow: hidden;
border-radius: var(--raio);
}
.facebook-embed iframe { width: 100%; max-width: 500px; height: 560px; }
.instagram-card {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
padding: 14px;
border: 1px solid var(--borda);
border-radius: var(--raio-g);
background: var(--fundo);
}
.instagram-card-icone {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px; height: 46px;
border-radius: 999px;
background: var(--branco);
color: var(--azul);
border: 1px solid var(--borda);
}
.instagram-card > div:nth-child(2) { flex: 1; min-width: 0; }
@media (min-width: 768px) {
.galeria-empresa { grid-template-columns: repeat(5, 1fr); }
}
/* ---------- 10. Paginacao ---------- */
.paginacao {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
max-width: 80%;
margin: 22px auto 0;
}
.paginacao a, .paginacao span {
min-width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 10px;
border: 1px solid var(--borda);
border-radius: var(--raio);
background: var(--branco);
color: var(--texto);
font-size: .84rem;
font-weight: 600;
}
.paginacao a:hover { border-color: var(--azul); color: var(--azul); text-decoration: none; }
.paginacao .atual { background: var(--azul); border-color: var(--azul); color: #fff; }
.paginacao .reticencias { border: 0; background: none; color: var(--texto-fraco); }
/* ---------- 11. Pagina do produto ---------- */
.produto { display: grid; gap: 16px; }
/* mesma tecnica do card: quadrado garantido, foto encaixada dentro */
.produto-foto {
position: relative;
height: 0;
padding-top: 100%;
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
overflow: hidden;
}
.produto-foto-zoom {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0; padding: 0;
background: none;
cursor: zoom-in;
}
.produto-foto img {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
width: auto; height: auto;
max-width: calc(100% - 32px);
max-height: calc(100% - 32px);
object-fit: contain;
mix-blend-mode: multiply;
}
.produto-foto-zoom-icone {
position: absolute;
right: 10px; bottom: 10px;
width: 34px; height: 34px;
border-radius: 999px;
background: rgba(255,255,255,.92);
color: var(--texto);
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
box-shadow: var(--sombra);
}
/* ---------- Lightbox (zoom da foto) ---------- */
.lightbox {
position: fixed; inset: 0;
z-index: 200;
background: rgba(10,20,30,.92);
display: flex; align-items: center; justify-content: center;
padding: 24px;
cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; }
.lightbox-fechar {
position: absolute; top: 16px; right: 16px;
width: 44px; height: 44px;
border-radius: 999px;
border: 0;
background: rgba(255,255,255,.15);
color: #fff;
font-size: 1.6rem; line-height: 1;
cursor: pointer;
}
.lightbox-fechar:hover { background: rgba(255,255,255,.28); }
.produto-info { display: flex; flex-direction: column; gap: 12px; }
.produto-info h1 { font-size: 1.2rem; margin: 0; }
.produto-variantes { display: flex; flex-direction: column; gap: 8px; }
.produto-variantes-titulo { font-size: .84rem; font-weight: 700; color: var(--texto); }
.produto-variantes-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.produto-variante-item {
display: flex; flex-direction: column; align-items: center; gap: 3px;
width: 56px;
}
.produto-variante-item:hover { text-decoration: none; }
.produto-variante-item img {
display: block; width: 56px; height: 56px;
border: 1px solid var(--borda); border-radius: var(--raio);
background: var(--branco);
object-fit: contain; mix-blend-mode: multiply;
}
.produto-variante-item:hover img { border-color: var(--azul); }
.produto-variante-legenda {
font-size: .68rem; color: var(--texto-fraco); text-align: center;
line-height: 1.2; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.estrelas { color: #f5a623; font-size: 1rem; letter-spacing: 1px; }
.produto-nota {
display: flex; align-items: center; gap: 6px;
font-size: .82rem; color: var(--texto-fraco); margin-top: -8px;
}
.produto-nota:hover { text-decoration: none; }
a.produto-nota:hover span { text-decoration: underline; }
.produto-meta {
display: flex; flex-wrap: wrap; gap: 6px;
font-size: .76rem; color: var(--texto-fraco);
}
.produto-meta span {
background: var(--branco);
border: 1px solid var(--borda);
border-radius: 999px;
padding: 3px 10px;
}
.produto-meta-botao {
font: inherit;
font-size: .76rem;
color: var(--texto-fraco);
background: var(--branco);
border: 1px solid var(--borda);
border-radius: 999px;
padding: 3px 10px;
cursor: pointer;
}
.produto-meta-botao:hover { background: var(--azul-claro); color: var(--azul); border-color: var(--azul); }
.produto-aviso-especificacoes {
margin: 10px 0 0;
font-size: .72rem;
line-height: 1.5;
color: var(--texto-fraco);
}
.caixa-compra {
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.preco-grande {
font-size: 1.9rem;
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.1;
}
.preco-grande small {
font-size: .8rem; font-weight: 500; color: var(--texto-fraco);
letter-spacing: 0;
}
/* ---------- Desconto por quantidade, em destaque ----------
Antes era uma linha de texto pequena; agora e um bloco proprio
com selo de porcentagem, que MUDA DE COR quando a quantidade
digitada ja atinge o desconto (classe .ativo, ligada pelo JS
em app.js - sem JS fica sempre no estado normal/verde-claro,
ainda bem visivel). */
.preco-caixa-destaque {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--raio-g);
background: #eaf7ef;
border: 1.5px solid #bfe5cd;
transition: background .2s ease, border-color .2s ease;
}
.preco-caixa-destaque.ativo {
background: var(--verde);
border-color: var(--verde);
}
.preco-caixa-destaque.ativo .preco-caixa-titulo,
.preco-caixa-destaque.ativo .preco-caixa-valor { color: #fff; }
.preco-caixa-destaque.ativo .preco-caixa-valor span { color: #d8f3e3; }
.preco-caixa-destaque.ativo .preco-caixa-selo { background: #fff; color: var(--verde); }
.preco-caixa-selo {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
height: 52px;
border-radius: 999px;
background: var(--verde);
color: #fff;
font-size: 1.05rem;
font-weight: 800;
}
.preco-caixa-corpo { min-width: 0; }
.preco-caixa-titulo {
font-size: .82rem;
font-weight: 600;
color: #14663a;
margin-bottom: 2px;
}
.preco-caixa-valor {
font-size: 1.25rem;
font-weight: 800;
color: #14663a;
letter-spacing: -.02em;
}
.preco-caixa-valor span {
font-size: .74rem;
font-weight: 500;
color: #3f8f63;
}
.preco-caixa-progresso { display: flex; flex-direction: column; gap: 5px; }
.preco-caixa-progresso[hidden] { display: none; }
.preco-caixa-progresso-barra {
height: 6px;
border-radius: 999px;
background: var(--borda);
overflow: hidden;
}
.preco-caixa-progresso-preenche {
height: 100%;
width: 0%;
background: var(--verde);
border-radius: 999px;
transition: width .2s ease;
}
#preco-desconto-falta {
font-size: .74rem;
color: var(--texto-fraco);
}
.linha-compra { display: flex; gap: 8px; align-items: stretch; }
/* seletor de quantidade - / numero / + */
.qtde {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--borda);
border-radius: var(--raio);
overflow: hidden;
background: var(--branco);
flex: 0 0 auto;
}
.qtde button {
width: 40px;
border: 0;
background: var(--branco);
color: var(--texto);
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
}
.qtde button:hover { background: var(--fundo); }
.qtde input {
width: 52px;
border: 0;
border-left: 1px solid var(--borda);
border-right: 1px solid var(--borda);
text-align: center;
font-size: 16px;
font-family: inherit;
color: var(--texto);
-moz-appearance: textfield;
}
.qtde input::-webkit-outer-spin-button,
.qtde input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.card-form-comprar { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.qtde-card { align-self: stretch; }
.qtde-card button { width: 32px; font-size: 1rem; }
.qtde-card input { width: auto; flex: 1; min-width: 0; }
.card-form-comprar .botao { width: 100%; }
.descricao-produto {
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
padding: 14px;
font-size: .88rem;
color: var(--texto-fraco);
line-height: 1.6;
white-space: pre-line;
}
/* ---------- 12. Carrinho ---------- */
.item-carrinho {
display: grid;
grid-template-columns: 72px 1fr;
gap: 10px;
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
padding: 10px;
margin-bottom: 10px;
}
.item-carrinho .foto {
width: 72px; height: 72px;
object-fit: contain;
mix-blend-mode: multiply;
}
.item-dados { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.item-nome { font-size: .86rem; font-weight: 600; line-height: 1.35; }
.item-linha {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
}
.item-subtotal { font-weight: 800; margin-left: auto; white-space: nowrap; }
.remover {
border: 0; background: none; color: var(--texto-fraco);
font-size: .78rem; cursor: pointer; padding: 4px; text-decoration: underline;
}
.remover:hover { color: var(--vermelho); }
/* Remover item - agora um icone de lixeira ao lado do preco (era
um texto "Remover item" solto embaixo do card, passava
despercebido e ocupava uma linha inteira a toa). */
.item-remover {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
border: 0;
border-radius: var(--raio);
background: none;
color: var(--texto-fraco);
cursor: pointer;
}
.item-remover:hover { background: #fdeaea; color: var(--vermelho); }
.item-carrinho-atencao { background: #fff8e6; border-color: #f0d78c; }
.item-aviso-estoque {
font-size: .78rem;
color: #8a6100;
background: #fff1cc;
border-radius: var(--raio);
padding: 6px 8px;
line-height: 1.4;
}
.item-aviso-estoque a {
display: inline-block;
margin-left: 4px;
font-weight: 700;
color: #1a7a3c;
text-decoration: underline;
}
.resumo {
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
padding: 14px;
}
.resumo-linha {
display: flex; justify-content: space-between;
gap: 12px;
padding: 6px 0; font-size: .88rem;
}
/* "faltam R$ X para frete gratis" - o texto e mais comprido que os
outros, entao alinha a direita pra nao brigar com o rotulo */
.resumo-linha-atencao > span:last-child { text-align: right; color: var(--texto-fraco); }
.resumo-linha-atencao strong { color: var(--azul-escuro); }
.resumo-total {
display: flex; justify-content: space-between; align-items: baseline;
border-top: 1px solid var(--borda);
margin-top: 6px; padding-top: 10px;
font-size: 1.05rem; font-weight: 800;
}
.resumo-total strong { font-size: 1.35rem; letter-spacing: -.02em; }
.calculo-frete-retirada {
font-size: .78rem; color: var(--texto-fraco); margin: -2px 0 6px; line-height: 1.5;
}
.calculo-frete-retirada a { color: var(--texto-fraco); }
.calculo-frete {
border-top: 1px solid var(--borda);
margin-top: 6px; padding-top: 10px;
}
.calculo-frete-form label {
display: block; font-size: .8rem; color: var(--texto-fraco); margin-bottom: 6px;
}
.calculo-frete-linha { display: flex; gap: 8px; }
.calculo-frete-linha input {
flex: 1; min-width: 0; padding: 10px; height: 42px;
border: 1px solid var(--borda); border-radius: 8px; font-size: 1rem; letter-spacing: .03em;
}
.calculo-frete-linha button { flex: 0 0 auto; width: auto; height: 42px; padding: 0 16px; font-size: .85rem; }
.calculo-frete-opcoes { list-style: none; margin: 10px 0 0; padding: 0; }
.calculo-frete-opcoes li {
display: flex; justify-content: space-between; gap: 10px;
padding: 7px 0; font-size: .85rem;
border-bottom: 1px dashed var(--borda);
}
.calculo-frete-opcoes li:last-child { border-bottom: none; }
.calculo-frete-aviso { font-size: .82rem; color: var(--texto-fraco); margin: 10px 0 0; line-height: 1.5; }
.calculo-frete-faltando { margin: 6px 0 0; padding-left: 18px; font-size: .82rem; color: var(--texto-fraco); }
/* ---------- 13. Formularios ---------- */
.formulario {
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
padding: 18px;
max-width: 460px;
margin: 0 auto;
}
.campo { margin-bottom: 14px; }
.campo.esconder { display: none; }
.campo label {
display: block;
font-size: .8rem;
font-weight: 600;
margin-bottom: 5px;
color: var(--texto-fraco);
}
.campo input, .campo select, .campo textarea {
width: 100%;
min-height: 44px;
padding: 10px 12px;
font-size: 16px;
font-family: inherit;
color: var(--texto);
border: 1px solid var(--borda);
border-radius: var(--raio);
background: var(--branco);
}
.campo textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
outline: 2px solid var(--azul);
outline-offset: -1px;
}
.campo .ajuda { font-size: .74rem; color: var(--texto-fraco); margin-top: 4px; }
/* ---------- 13b. Editor rico (texto do blog) ---------- */
.editor-rico-barra {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
padding: 6px;
border: 1px solid var(--borda);
border-bottom: 0;
border-radius: var(--raio) var(--raio) 0 0;
background: var(--fundo);
}
.editor-rico-barra button {
min-height: 32px;
padding: 4px 10px;
font-size: .82rem;
font-family: inherit;
color: var(--texto);
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio);
cursor: pointer;
}
.editor-rico-barra button:hover { background: var(--azul-claro); border-color: var(--azul); }
.editor-rico-separador { width: 1px; align-self: stretch; background: var(--borda); margin: 2px 2px; }
.editor-rico-cor {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
font-size: .82rem;
font-weight: 700;
color: var(--texto);
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio);
cursor: pointer;
min-height: 32px;
}
.editor-rico-cor input[type="color"] {
width: 20px; height: 20px;
min-height: 0;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.editor-rico-area {
min-height: 220px;
padding: 10px 12px;
font-size: 16px;
line-height: 1.5;
color: var(--texto);
border: 1px solid var(--borda);
border-radius: 0 0 var(--raio) var(--raio);
background: var(--branco);
}
.editor-rico-area:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.editor-rico-area p { margin: 0 0 .8em; }
.editor-rico-area ul, .editor-rico-area ol { margin: 0 0 .8em; padding-left: 1.4em; }
/* Quando o JS nao roda, o editor visual fica escondido (hidden no
HTML) e a textarea de sempre aparece normal por baixo - ver
comentario no admin_loja.php e a checagem de queryCommandSupported
no app.js. */
/* ---------- 14. Rodape ---------- */
.rodape {
background: #16242f;
color: #b9c6d0;
padding: 28px 0 90px; /* espaco extra pra barra fixa do celular */
font-size: .82rem;
margin-top: 30px;
}
.rodape a { color: #e7eef3; }
.rodape h3 { color: #fff; font-size: .86rem; margin-bottom: .5rem; }
.rodape-colunas { display: grid; gap: 20px; }
.rodape-lista { list-style: none; margin: 0; padding: 0; }
.rodape-lista li { padding: 3px 0; }
/* Coluna "Institucional" em destaque - e a que mais vale a pena a
pessoa notar (empresa, catalogo, blog, listas escolares...), por
isso ganha uma borda de cor e o titulo na cor da marca em vez do
branco padrao das outras colunas. */
.rodape-col-destaque {
border-left: 3px solid var(--azul);
padding-left: 12px;
}
.rodape-col-destaque h3 { color: #6cc5ec; }
.rodape-col-destaque .rodape-lista a { font-weight: 600; }
.rodape-social {
display: flex;
gap: 10px;
margin-top: 22px;
}
.rodape-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 999px;
background: #16283a;
color: #cfe3ee;
}
.rodape-social a:hover { background: var(--azul); color: #fff; }
.rodape-fim {
border-top: 1px solid #24384a;
margin-top: 20px; padding-top: 14px;
font-size: .74rem; color: #7d8f9d;
}
.rodape-fim a { color: #9db3c2; }
/* ---------- 15. Barra fixa do celular ---------- */
.barra-inferior {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 45;
display: flex;
background: var(--branco);
border-top: 1px solid var(--borda);
box-shadow: 0 -2px 10px rgba(20,40,60,.07);
padding-bottom: env(safe-area-inset-bottom);
}
/* Botao flutuante do WhatsApp - fica ACIMA da barra fixa do
celular (que ocupa o rodape inteiro por baixo), senao uma coisa
cobre a outra. No desktop nao tem barra fixa, entao a distancia
do rodape e menor. */
.whatsapp-flutuante {
position: fixed;
right: 16px;
bottom: calc(72px + env(safe-area-inset-bottom));
z-index: 60;
width: 54px; height: 54px;
display: flex; align-items: center; justify-content: center;
background: #25d366;
color: #fff;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(0,0,0,.25);
transition: transform .15s ease;
}
.whatsapp-flutuante:hover { transform: scale(1.06); color: #fff; }
.barra-inferior a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 8px 4px;
font-size: .66rem;
color: var(--texto-fraco);
font-weight: 600;
}
.barra-inferior a:hover { text-decoration: none; color: var(--azul); }
.barra-inferior a.ativo { color: var(--azul); }
.barra-inferior .icone { font-size: 1.15rem; line-height: 1; }
/* ============================================================
TELAS MAIORES
============================================================ */
/* --- celular grande / tablet pequeno --- */
@media (min-width: 480px) {
.grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.card-nome { font-size: .84rem; }
}
/* --- tablet --- */
@media (min-width: 768px) {
body { font-size: 15.5px; }
.container { padding: 0 20px; }
.grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.topo-linha { height: 72px; gap: 16px; }
.topo-logo { font-size: 1.2rem; }
.topo-logo img { max-height: 54px; max-width: 200px; }
.topo-botao .rotulo { display: inline; }
.conta-seta { display: inline; }
.faixa-contato-horario { display: inline; }
.busca { padding: 0 0 12px; max-width: 560px; }
.produto { grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.rodape-colunas { grid-template-columns: repeat(2, 1fr); }
.banner-seta { display: block; }
.item-carrinho { grid-template-columns: 90px 1fr; }
.item-carrinho .foto { width: 90px; height: 90px; }
/* Tablet: ja sobra espaco, entao as categorias param de encolher
pra caber (isso e coisa de celular) e voltam a ter largura
fixa, centralizadas - mesma ideia do monitor, so que num
tamanho intermediario. No monitor (1024+) elas crescem mais. */
.mestres-lista { justify-content: center; gap: 8px; flex: 1; padding: 5px 0; }
.mestres-lista > li { flex: 0 0 auto; }
.mestre { width: 76px; padding: 3px 2px; gap: 4px; }
.mestre-icone { width: 44px; height: 44px; }
.mestre-icone svg { width: 18px; height: 18px; }
.mestre-nome { font-size: .64rem; }
}
/* --- desktop: a busca sobe pro cabecalho e nasce a coluna de categorias --- */
@media (min-width: 1024px) {
.barra-inferior { display: none; }
.rodape { padding-bottom: 28px; }
.whatsapp-flutuante { bottom: 24px; }
.botao-menu { display: none; }
/* Topo mais alto (ago/2026) pra logo caber maior - a busca
encolheu e ganhou margem automatica dos dois lados, entao ela
fica centralizada e sobra espaco pra logo respirar na esquerda
sem empurrar os botoes da direita. */
.topo-linha { height: 88px; }
.topo-logo img { max-height: 68px; max-width: 260px; }
.busca-topo { display: flex; flex: 0 1 480px; padding: 0; margin: 0 auto; }
.busca-linha { display: none; } /* a busca da segunda linha some */
.pagina-com-lateral {
display: grid;
grid-template-columns: 248px minmax(0, 1fr);
gap: 22px;
align-items: start;
}
/* SEM altura maxima, SEM rolagem propria e SEM "sticky" de
proposito: a lista inteira de categorias sempre aparece
inteira, e quem rola pra ve-la e a PAGINA toda (uma unica
barra de rolagem), nunca uma caixinha separada dentro do
menu. (O "sticky" foi tirado porque com uma lista longa -
tem mestre com quase 70 grupos - ele prendia o topo do menu
na tela e o resto da lista ficava inalcancavel ate a pagina
rolar bem mais que o menu. Uma tentativa posterior de rolagem
PROPRIA - so um teto de altura - tambem foi revertida a
pedido do Eduardo: ele prefere ver a arvore inteira, mesmo
que fique comprida, a ter uma barra de rolagem extra dentro
do menu.) */
.coluna-lateral {
display: block;
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
}
.coluna-lateral h2 {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--texto-fraco);
padding: 14px 14px 8px;
margin: 0;
}
/* No celular a gaveta e um painel de tela inteira (o menu
"Departamentos" inteiro). No desktop ela vira um painel
flutuante ancorado embaixo do botao "Departamentos" - a
posicao exata (top/left) e calculada em JS (app.js) porque
o botao e a gaveta nao sao pai/filho no HTML. Sem fundo
escuro aqui: e so um dropdown, nao precisa apagar a tela. */
.fundo-escuro { display: none; }
.gaveta {
position: fixed;
top: 0; left: 0; bottom: auto;
width: 380px;
max-width: 90vw;
max-height: 75vh;
border-radius: var(--raio-g);
border: 1px solid var(--borda);
box-shadow: var(--sombra-md);
transform: none;
opacity: 0;
visibility: hidden;
transition: opacity .15s ease;
}
/* precisa repetir "transform: none" aqui com .aberta junto:
a regra do celular ".gaveta.aberta { transform: translateX(0) }"
(mais especifica que so ".gaveta") continua valendo tambem no
desktop quando a gaveta esta aberta, e QUALQUER transform
diferente de "none" - mesmo um translateX(0) que nao move nada
na tela - cria um novo "containing block" pra filhos
position:fixed. Isso fazia o flyout de subcategorias (que
calcula a posicao em coordenada da JANELA) ficar fora do
lugar/invisivel so dentro da gaveta aberta no desktop, porque
o fixed passava a ser relativo a gaveta, nao mais a tela.
(bug real, achado ago/2026 - o flyout no menu lateral nunca
teve esse problema porque a coluna lateral nunca usa transform). */
.gaveta.aberta { opacity: 1; visibility: visible; transform: none; }
.gaveta-corpo { max-height: calc(75vh - 50px); }
.botao-departamentos { display: inline-flex; }
/* painel do menu de cima: so ativa a partir daqui.
Nao e mais so :hover - o painel agora fica centralizado na
barra inteira (pra nao cortar na lateral da tela), entao pra
mestres perto da borda o painel nao fica embaixo do item que
abriu ele. Descer o mouse em linha reta sairia da area de
:hover antes de entrar no painel. Por isso abrir/fechar e
controlado em JS (app.js) com uma pequena tolerancia -
classe .aberto no lugar de :hover. :focus-within continua
pra quem navega por teclado. */
.mestre-item.aberto .mestre-dropdown,
.mestre-item:focus-within .mestre-dropdown { display: block; }
.grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.produto { grid-template-columns: 5fr 6fr; gap: 30px; }
.rodape-colunas { grid-template-columns: 2fr 1fr 1fr 1fr; }
/* No monitor sobra espaco, entao as 8 categorias voltam a ter
largura FIXA e ficam centralizadas como um grupo, com bastante
respiro - fica mais bonito do que espalhado de ponta a ponta.
O "esticar pra caber numa linha so" (flex:1 1 0 la em cima) e
coisa de celular, onde o espaco e curto; aqui ele precisa ser
desfeito, senao os itens esticam e a centralizacao nao tem
efeito nenhum. */
/* padding vertical enxuto (ago/2026): a faixa de icones estava
ocupando altura demais logo abaixo do topo, que agora e mais
alto por causa da logo maior. */
.mestres-lista { justify-content: center; overflow-x: visible; gap: 10px; padding: 6px 0; flex: 1; }
.mestres-lista > li { flex: 0 0 auto; }
.mestre { width: 96px; padding: 2px 2px; gap: 4px; }
.mestre-icone { width: 58px; height: 58px; }
.mestre-icone svg { width: 18px; height: 18px; }
.mestre-nome { font-size: .74rem; }
.arvore-expandir-tudo { border-radius: var(--raio-g) var(--raio-g) 0 0; }
}
@media (min-width: 1280px) {
.grade { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* So a partir daqui sobra espaco de verdade pras 8 mestres (96px
cada) + botao Departamentos + a categoria extra tudo na mesma
linha - testado e MEDIDO: em 1024px ainda estoura (a barra fica
mais larga que a tela), por isso o corte fica em 1280px e nao
em 1024px como as outras regras desta faixa. Abaixo disso a
categoria extra cai pra propria linha (regra base, mobile-first,
la em cima). */
.mestres-linha { flex-wrap: nowrap; }
.mestres-extra { flex: 0 0 auto; margin: 0 0 0 20px; padding: 8px 0; justify-content: flex-start; }
}
/* ============================================================
16. Landing page da empresa (empresa.php)
------------------------------------------------------------
Tudo com prefixo .lp- de proposito: e a UNICA pagina de
largura total do site (ver 'largura_total' em layout.php), e
nada aqui pode vazar pro resto da loja.
A pagina nao usa o .container global - cada secao ocupa a
tela inteira pra poder ter o seu proprio fundo, e quem
centraliza o conteudo por dentro e o .lp-largura.
============================================================ */
.pagina-larga { padding: 0 0 40px; }
.lp-largura {
width: 100%;
max-width: var(--largura-max);
margin: 0 auto;
padding: 0 12px;
}
.lp-secao { padding: 44px 0; background: var(--branco); }
.lp-secao-clara { background: var(--fundo); }
.lp-centro { text-align: center; }
.lp-so-desktop { display: none; }
/* ---------- cabecalho de secao ---------- */
.lp-cabecalho { max-width: 60ch; margin: 0 auto 26px; text-align: center; }
.lp-cabecalho h2 { font-size: 1.4rem; line-height: 1.25; margin: 0 0 .5rem; }
.lp-cabecalho p { margin: 0; color: var(--texto-fraco); line-height: 1.6; }
.lp-olho {
display: inline-block;
margin-bottom: 8px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--azul);
}
.lp-olho-claro { color: #7fd0f0; }
/* ---------- 1. hero ---------- */
.lp-hero {
position: relative;
display: flex;
align-items: center;
min-height: 460px;
padding: 52px 0;
overflow: hidden;
background: #0c2231; /* cor de base enquanto a foto nao carrega */
color: #fff;
}
/* A foto fica numa camada propria (nao no ) pra receber
o escurecimento sem afetar o texto por cima dela. */
.lp-hero-fundo {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-position: center;
background-size: cover;
opacity: .28;
}
.lp-hero::after { /* degrade por cima da foto: garante contraste do texto */
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(150deg, rgba(9,32,46,.94) 0%, rgba(0,86,124,.82) 55%, rgba(0,144,203,.62) 100%);
}
.lp-hero-conteudo { position: relative; z-index: 2; }
.lp-tag {
display: inline-block;
padding: 5px 12px;
border: 1px solid rgba(255,255,255,.34);
border-radius: 999px;
background: rgba(255,255,255,.10);
font-size: .72rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.lp-hero h1 {
margin: 14px 0 12px;
font-size: 1.75rem;
line-height: 1.2;
color: #fff;
letter-spacing: -.01em;
}
.lp-hero-texto {
max-width: 54ch;
margin: 0 0 22px;
font-size: 1rem;
line-height: 1.65;
color: rgba(255,255,255,.92);
}
.lp-hero-texto strong { color: #fff; }
.lp-hero-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-hero-botoes .botao { background: #fff; color: var(--azul-escuro); font-weight: 700; }
.lp-hero-botoes .botao:hover { background: #eaf6fc; }
.lp-hero-botoes .botao-vazado { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.lp-hero-botoes .botao-vazado:hover { background: rgba(255,255,255,.16); color: #fff; }
.lp-centro-botoes { justify-content: center; }
.lp-hero-selos {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin: 24px 0 0;
padding: 0;
font-size: .82rem;
color: rgba(255,255,255,.88);
}
.lp-hero-selos li { display: flex; align-items: center; gap: 7px; }
.lp-hero-selos li::before {
content: "";
flex: 0 0 auto;
width: 16px; height: 16px;
border-radius: 999px;
background: rgba(255,255,255,.18) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px 10px no-repeat;
}
/* ---------- 2. faixa de numeros ---------- */
.lp-secao-numeros { padding: 30px 0; background: var(--azul-claro); }
.lp-numeros {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 10px;
text-align: center;
}
.lp-numero strong {
display: block;
font-size: 1.9rem;
line-height: 1.1;
font-weight: 800;
color: var(--azul-escuro);
letter-spacing: -.02em;
}
.lp-numero span {
display: block;
margin-top: 4px;
font-size: .78rem;
line-height: 1.35;
color: var(--texto-fraco);
}
/* ---------- 3. cards "para quem" ---------- */
.lp-cards { display: grid; gap: 12px; }
.lp-card {
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
padding: 20px 18px;
box-shadow: var(--sombra);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lp-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); border-color: #cfe3ee; }
.lp-card-icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px; height: 46px;
margin-bottom: 12px;
border-radius: 12px;
background: var(--azul-claro);
color: var(--azul);
}
.lp-card-icone svg { width: 24px; height: 24px; }
.lp-card h3 { font-size: 1rem; margin: 0 0 .4rem; }
.lp-card p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--texto-fraco); }
/* ---------- 3b. card "Voce, na sua casa" com destaque rosa ----------
Mesmo card dos outros 4 perfis de cliente, so que com fundo rosado
pra chamar atencao de quem esta procurando os itens fofos/
diferenciados - pedido do Eduardo pra atrair publico feminino. */
.lp-card-fofos {
background: linear-gradient(135deg, #ffe9f4 0%, #fef1f8 100%);
border-color: #ffc2dd;
}
.lp-card-fofos .lp-card-icone { background: #ffd6ea; color: #c23c78; }
.lp-card-fofos a { color: #c23c78; font-weight: 600; }
/* ---------- 4. categorias ---------- */
.lp-cats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.lp-cat {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 18px 10px;
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
color: var(--texto);
text-align: center;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lp-cat:hover {
transform: translateY(-3px);
border-color: var(--azul);
box-shadow: var(--sombra-md);
text-decoration: none;
color: var(--azul-escuro);
}
.lp-cat-icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px; height: 46px;
border-radius: 999px;
background: var(--azul-claro);
color: var(--azul);
}
.lp-cat-nome { font-size: .82rem; font-weight: 600; line-height: 1.25; }
/* ---------- 5. diferenciais ---------- */
.lp-vantagens { display: grid; gap: 20px; }
.lp-vantagem { display: flex; gap: 14px; align-items: flex-start; }
.lp-vantagem-icone {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px; height: 42px;
border-radius: 12px;
background: var(--azul-claro);
color: var(--azul);
}
.lp-vantagem-icone svg { width: 22px; height: 22px; }
.lp-vantagem h3 { font-size: .98rem; margin: 2px 0 .3rem; }
.lp-vantagem p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--texto-fraco); }
/* ---------- 6. compras corporativas (secao escura) ---------- */
.lp-secao-escura {
background: linear-gradient(155deg, #0b2434 0%, #0a4a6b 60%, #0072a3 100%);
color: #fff;
}
.lp-secao-escura h2 { color: #fff; font-size: 1.4rem; line-height: 1.25; margin: 0 0 .6rem; }
.lp-secao-escura p { color: rgba(255,255,255,.88); line-height: 1.65; }
.lp-secao-escura strong { color: #fff; }
.lp-corp { display: grid; gap: 26px; }
.lp-corp-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lp-corp-botoes .botao { background: #fff; color: var(--azul-escuro); font-weight: 700; }
.lp-corp-botoes .botao:hover { background: #eaf6fc; }
.lp-corp-botoes .botao-vazado { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.lp-corp-botoes .botao-vazado:hover { background: rgba(255,255,255,.16); color: #fff; }
.lp-corp-passos {
list-style: none;
counter-reset: passo;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.lp-corp-passos li {
counter-increment: passo;
position: relative;
padding: 14px 16px 14px 54px;
border: 1px solid rgba(255,255,255,.20);
border-radius: var(--raio-g);
background: rgba(255,255,255,.07);
}
.lp-corp-passos li::before {
content: counter(passo);
position: absolute;
left: 14px; top: 14px;
width: 26px; height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #fff;
color: var(--azul-escuro);
font-size: .8rem;
font-weight: 800;
}
.lp-corp-passos strong { display: block; font-size: .92rem; margin-bottom: 2px; }
.lp-corp-passos span { display: block; font-size: .84rem; line-height: 1.55; color: rgba(255,255,255,.82); }
/* ---------- 7. passos "como comecar" ---------- */
.lp-passos { display: grid; gap: 12px; margin-bottom: 22px; }
.lp-passo {
position: relative;
padding: 20px 18px;
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
box-shadow: var(--sombra);
}
.lp-passo-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
margin-bottom: 10px;
border-radius: 999px;
background: var(--azul);
color: #fff;
font-weight: 800;
font-size: .9rem;
}
.lp-passo h3 { font-size: .98rem; margin: 0 0 .35rem; }
.lp-passo p { margin: 0; font-size: .87rem; line-height: 1.6; color: var(--texto-fraco); }
/* ---------- 8. linha do tempo ---------- */
.lp-linha-tempo {
display: grid;
gap: 0;
margin-bottom: 26px;
border-left: 2px solid var(--azul-claro);
padding-left: 20px;
}
.lp-momento { position: relative; padding: 0 0 22px; }
.lp-momento:last-child { padding-bottom: 0; }
.lp-momento::before {
content: "";
position: absolute;
left: -27px; top: 4px;
width: 12px; height: 12px;
border-radius: 999px;
background: var(--azul);
box-shadow: 0 0 0 3px var(--azul-claro);
}
.lp-momento-ano {
display: inline-block;
margin-bottom: 4px;
font-size: .76rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--azul);
}
.lp-momento h3 { font-size: 1rem; margin: 0 0 .3rem; }
.lp-momento p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--texto-fraco); }
.lp-valores { display: grid; gap: 12px; }
.lp-valores > div {
padding: 18px;
background: var(--fundo);
border-radius: var(--raio-g);
border: 1px solid var(--borda);
}
.lp-valores h3 { font-size: .92rem; margin: 0 0 .35rem; color: var(--azul-escuro); }
.lp-valores p { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--texto-fraco); }
.lp-grupo { margin: 20px 0 0; text-align: center; font-size: .84rem; color: var(--texto-fraco); }
/* ---------- 10. contato ---------- */
.lp-secao-contato { background: var(--branco); }
.lp-contato { display: grid; gap: 16px; }
/* "auto 1fr": o bloco de endereco ocupa o que precisa e o MAPA
estica pra preencher o resto, casando a altura da coluna da
esquerda com a do formulario ao lado (no desktop). */
.lp-contato-lado { display: grid; grid-template-rows: auto 1fr; gap: 16px; }
.lp-contato-bloco {
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio-g);
box-shadow: var(--sombra);
padding: 20px 18px;
}
.lp-contato-bloco h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.lp-mapa {
width: 100%;
height: 100%;
min-height: 300px;
border: 1px solid var(--borda);
border-radius: var(--raio-g);
display: block;
}
/* ---------- 12. chamada final ---------- */
.lp-secao-final {
background: linear-gradient(135deg, var(--azul) 0%, #00648f 100%);
color: #fff;
}
.lp-secao-final h2 { color: #fff; font-size: 1.4rem; margin: 0 0 .6rem; }
.lp-secao-final p { max-width: 52ch; margin: 0 auto 20px; color: rgba(255,255,255,.92); line-height: 1.65; }
/* ---------- animacao de entrada ao rolar ----------
O padrao e SEMPRE visivel. So quando o app.js confirma que o
navegador tem IntersectionObserver ele marca com
.js-anima e ai os blocos passam a entrar suaves. Assim, sem
JS (ou com JS quebrado), a pagina inteira continua legivel. */
.js-anima .lp-revelar {
opacity: 0;
transform: translateY(18px);
transition: opacity .55s ease, transform .55s ease;
}
.js-anima .lp-revelar.lp-visivel { opacity: 1; transform: none; }
/* ---------- telas maiores ---------- */
@media (min-width: 640px) {
.lp-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-valores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.lp-largura { padding: 0 20px; }
.lp-secao { padding: 60px 0; }
.lp-secao-numeros { padding: 36px 0; }
.lp-so-desktop { display: inline; }
.lp-hero { min-height: 540px; padding: 70px 0; }
.lp-hero h1 { font-size: 2.4rem; }
.lp-hero-texto { font-size: 1.06rem; }
.lp-cabecalho { margin-bottom: 34px; }
.lp-cabecalho h2, .lp-secao-escura h2, .lp-secao-final h2 { font-size: 1.75rem; }
.lp-numero strong { font-size: 2.4rem; }
.lp-numero span { font-size: .84rem; }
.lp-vantagens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 30px; }
.lp-corp { grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
/* stretch (e nao "start"): as duas colunas ficam com a mesma
altura, e ai o mapa - que e "1fr" dentro da coluna da
esquerda - cresce ate acompanhar o formulario do lado. */
.lp-contato { grid-template-columns: 1fr 1fr; align-items: stretch; }
.lp-contato-bloco { padding: 24px; }
}
@media (min-width: 1024px) {
.lp-hero { min-height: 580px; }
.lp-hero h1 { font-size: 2.9rem; }
/* Sao 5 perfis de cliente. Em 4 colunas sobraria um sozinho na
segunda linha (feio); 3+2 fica equilibrado. Na tela larga
(1280+, onde o container ja bateu o maximo) os 5 cabem numa
linha so - ver o bloco de 1280 mais abaixo. */
.lp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-cats { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.lp-passos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-vantagens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-linha-tempo {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
border-left: 0;
border-top: 2px solid var(--azul-claro);
padding-left: 0;
padding-top: 26px;
}
.lp-momento { padding-bottom: 0; }
.lp-momento::before { left: 0; top: -33px; }
}
/* Precisa vir DEPOIS do bloco de 1024 acima: mesma especificidade,
entao quem ganha e quem vem por ultimo no arquivo. */
@media (min-width: 1280px) {
/* tela larga: os 5 perfis de cliente cabem numa linha so */
.lp-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* --- impressao (pedido / carrinho) --- */
@media print {
.topo, .rodape, .barra-inferior, .coluna-lateral, .botao, .busca, .whatsapp-flutuante { display: none !important; }
body { background: #fff; }
.card, .item-carrinho, .resumo { border-color: #ccc; box-shadow: none; }
}
/* --- respeita quem pediu menos animacao no sistema --- */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
/* sem transicao, o "aparecer ao rolar" da landing nao faz
sentido - mostra tudo de uma vez e pronto */
.js-anima .lp-revelar { opacity: 1 !important; transform: none !important; }
}