/* ============================================================
TIPOGRAFIA — Cosmetic é a fonte-título oficial da Amarolli.
Os arquivos estavam instalados na máquina e foram copiados
para assets/fonts/. A fonte agora é servida pelo site, então
vale para qualquer visitante, não só para quem a tem instalada.
São 5 pesos estáticos. Declaramos cada um no seu peso real
(100/300/400/700/900) e deixamos o navegador casar o mais
próximo: os títulos que pedem 500 caem na Regular e os que
pedem 600 caem na Bold. Nenhum negrito é falsificado.
Cormorant (Google Fonts) fica na pilha como rede de segurança
caso um arquivo falhe ao carregar.
PENDENTE: converter os .otf para .woff2 (corta ~60% do peso)
e confirmar que a licença da Cosmetic cobre uso como webfont.
============================================================ */
@font-face{
font-family:'Cosmetic'; font-style:normal; font-display:swap;
src:url('assets/fonts/cosmetic-thin.otf') format('opentype');
font-weight:100;
}
@font-face{
font-family:'Cosmetic'; font-style:normal; font-display:swap;
src:url('assets/fonts/cosmetic-light.otf') format('opentype');
font-weight:300;
}
@font-face{
font-family:'Cosmetic'; font-style:normal; font-display:swap;
src:url('assets/fonts/cosmetic-regular.otf') format('opentype');
font-weight:400;
}
@font-face{
font-family:'Cosmetic'; font-style:normal; font-display:swap;
src:url('assets/fonts/cosmetic-bold.otf') format('opentype');
font-weight:700;
}
@font-face{
font-family:'Cosmetic'; font-style:normal; font-display:swap;
src:url('assets/fonts/cosmetic-black.otf') format('opentype');
font-weight:900;
}
:root{
--verde-musgo:#626E40;
--verde-musgo-escuro:#4c5631;
--oliva:#8C8B55;
--creme:#F8F6EC; /* fundo claro principal (brand book) */
--creme-fundo:#EFEBDC; /* creme um tom abaixo, atrás do app */
--branco:#FFFFFF;
--quase-preto:#212121;
--font-display:'Cosmetic', 'Cormorant', Georgia, serif;
--font-body:'Raleway', sans-serif;
/* Pattern da marca: círculos em malha quadrada, raio = lado/√2,
de modo que cada círculo tangencia os vizinhos na diagonal e
cruza os ortogonais — é isso que forma a flor de 4 pétalas. */
--pattern-claro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%238C8B55' stroke-opacity='0.30' stroke-width='1.1'%3E%3Ccircle cx='0' cy='0' r='70.71'/%3E%3Ccircle cx='100' cy='0' r='70.71'/%3E%3Ccircle cx='0' cy='100' r='70.71'/%3E%3Ccircle cx='100' cy='100' r='70.71'/%3E%3C/g%3E%3C/svg%3E");
--pattern-escuro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%238C8B55' stroke-opacity='0.20' stroke-width='1.2'%3E%3Ccircle cx='0' cy='0' r='70.71'/%3E%3Ccircle cx='100' cy='0' r='70.71'/%3E%3Ccircle cx='0' cy='100' r='70.71'/%3E%3Ccircle cx='100' cy='100' r='70.71'/%3E%3C/g%3E%3C/svg%3E");
/* Versão bem apagada, pra superfícies onde o pattern estava competindo
com o texto: capa e rodapé. O banner promo segue no --pattern-escuro. */
--pattern-tenue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%238C8B55' stroke-opacity='0.07' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='70.71'/%3E%3Ccircle cx='100' cy='0' r='70.71'/%3E%3Ccircle cx='0' cy='100' r='70.71'/%3E%3Ccircle cx='100' cy='100' r='70.71'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
font-family:var(--font-body);
color:var(--quase-preto);
background:var(--creme-fundo);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input{font-family:inherit;}
ul{list-style:none;}
svg{display:block;}
/* Acessibilidade: quem pediu redução de movimento não vê nenhuma animação.
iteration-count:1 é essencial — sem ele, o pulso infinito do WhatsApp
continuaria rodando, só que rápido demais. */
@media (prefers-reduced-motion: reduce){
*{
animation-duration:0.001ms !important;
animation-iteration-count:1 !important;
animation-delay:0s !important;
transition-duration:0.001ms !important;
scroll-behavior:auto !important;
}
.wa-flutuante::before{ display:none; }
.card-produto:hover .card-img{ transform:none; }
.card-produto:hover .card-marca{ transform:none; }
}
/* ---------- App shell ---------- */
.app-wrap{
min-height:100dvh;
display:flex; align-items:center; justify-content:center;
padding:0;
}
.app-frame{
width:100%;
height:100dvh;
background:var(--creme);
position:relative;
overflow:hidden;
display:flex; flex-direction:column;
}
/* Nav e rodapé só aparecem no desktop — ver media query no fim do arquivo */
.nav-desktop{ display:none; }
.rodape-desktop{ display:none; }
/* ---------- Marca ----------
Arquivos reais em assets/ (conferidos um a um):
logo-horizontal.png ....... monograma oliva + AMAROLLI, deitado
logo-vertical.png ......... monograma + AMAROLLI + ACESSÓRIOS
simbolo-elipse-verde.png .. selo redondo, tudo oliva
simbolo-verde.png ......... selo redondo, monograma oliva + texto preto
simbolo-branco.png ........ selo redondo, tudo creme
simbolo-preto.png ......... selo redondo, tudo preto
Não há arquivo com o monograma solto — os quatro "simbolo-*" são o
selo redondo com o texto em volta, mudando só a cor.
Cada logo é um ![]()
seguido de um fallback textual/vetorial. O ![]()
traz onerror="this.remove()": se o arquivo sumir da pasta, ele sai do
DOM e o irmão seguinte reaparece — a página nunca quebra. */
.marca-img + .marca-fallback{ display:none; }
/* Deixa o logo branco sobre fundo escuro, seja qual for a cor do PNG */
.marca-negativa{ filter:brightness(0) invert(1); }
.screen{ display:none; flex-direction:column; flex:1; min-height:0; }
.screen.ativa{ display:flex; }
.scroll-area{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.topbar{
flex:0 0 auto;
display:flex; align-items:center; justify-content:space-between;
padding:16px 18px;
background:var(--creme);
position:relative; z-index:5;
}
.topbar-title{ font-family:var(--font-display); font-size:19px; font-weight:600; }
/* Topbar sobreposta à imagem (tela de produto) */
.topbar-flutuante{ position:absolute; top:0; left:0; right:0; background:none; z-index:10; }
/* Espaçador que equilibra a topbar quando só há botão de um lado */
.topbar-espaco{ width:36px; }
.icon-btn{
width:36px; height:36px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:var(--branco);
}
.icon-btn svg{ width:18px; height:18px; }
.sticky-cta{
flex:0 0 auto;
padding:14px 18px calc(16px + env(safe-area-inset-bottom));
background:var(--branco);
}
.sticky-cta .linha-total{
display:flex; justify-content:space-between; font-size:13px; margin-bottom:10px; color:#555;
}
.btn{
display:block; width:100%; text-align:center;
padding:15px 20px;
font-size:12.5px; letter-spacing:1.2px; text-transform:uppercase; font-weight:600;
border-radius:10px;
transition:background 0.2s ease, opacity 0.2s ease;
}
.btn-primary{ background:var(--verde-musgo); color:var(--branco); }
.btn-primary:active{ background:var(--verde-musgo-escuro); }
.btn-primary:disabled{ opacity:0.4; }
.btn-ghost{ border:1px solid var(--quase-preto); color:var(--quase-preto); }
/* ---------- Bottom tab bar ---------- */
.tabbar{
flex:0 0 auto;
display:flex;
background:var(--branco);
padding:10px 12px calc(8px + env(safe-area-inset-bottom));
}
.tab-item{
flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
font-size:10px; letter-spacing:0.4px; text-transform:uppercase;
color:#9a9a9a; position:relative;
}
.tab-item svg{ width:21px; height:21px; }
.tab-item.ativo{ color:var(--verde-musgo); }
.tab-badge{
position:absolute; top:-2px; right:26%;
background:var(--verde-musgo); color:var(--branco);
font-size:9px; font-weight:700; width:15px; height:15px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
}
/* ---------- Onboarding ---------- */
/* Capa enxuta: logo, título, apoio e botão. Nada mais.
O selo grande atrás do texto saiu e o pattern caiu pra --pattern-tenue —
era ele que estava disputando atenção com o título. */
.onboarding-bg{
position:relative; flex:1;
background:
var(--pattern-tenue),
radial-gradient(circle at 20% 15%, rgba(140,139,85,0.28), transparent 55%),
radial-gradient(circle at 85% 75%, rgba(98,110,64,0.45), transparent 60%),
linear-gradient(160deg, #2a2f1c 0%, var(--quase-preto) 55%, #1a1a1a 100%);
background-size:126px 126px, auto, auto, auto;
display:flex; flex-direction:column; justify-content:flex-end;
padding:32px 26px calc(40px + env(safe-area-inset-bottom));
overflow:hidden;
}
.onboarding-marca{ margin-bottom:26px; }
.onboarding-marca .marca-img{ height:78px; width:auto; opacity:0.95; }
.onboarding-eyebrow{
color:var(--oliva); font-size:11px; letter-spacing:3px; text-transform:uppercase;
display:inline-block;
}
.onboarding-title{
font-family:var(--font-display); font-weight:500; color:var(--branco);
font-size:40px; line-height:1.12; margin-bottom:14px; position:relative;
}
.onboarding-sub{
color:rgba(235,235,235,0.75); font-size:13.5px; line-height:1.6; max-width:32ch; margin-bottom:28px; position:relative;
}
/* ---------- Home ---------- */
.home-header{
display:flex; align-items:center; justify-content:space-between;
padding:18px 18px 4px;
}
.home-acoes{ display:flex; gap:8px; flex:0 0 auto; }
/* Atalhos de seção (Ofertas / Lançamentos / Categorias) — só mobile */
.atalhos-secao{ display:flex; gap:8px; padding:0 18px 18px; }
.atalho{
flex:1; padding:11px 6px; border-radius:10px;
background:var(--branco); font-size:11.5px; font-weight:700;
letter-spacing:0.4px; text-align:center;
}
.atalho-oferta{ background:#A8452F; color:var(--branco); }
.home-greeting p{ font-size:11px; color:#777; letter-spacing:0.5px; text-transform:uppercase; }
.home-greeting .logo{ font-family:var(--font-display); font-size:24px; font-weight:600; letter-spacing:1px; }
/* Versão compacta da marca no topo do mobile */
.home-greeting .logo .marca-img{ height:27px; width:auto; margin-top:2px; }
.search-bar{
margin:14px 18px; padding:13px 16px;
background:var(--branco); border-radius:12px;
display:flex; align-items:center; gap:10px;
color:#8a8a8a; font-size:13px; width:calc(100% - 36px);
}
.search-bar svg{ width:16px; height:16px; flex:0 0 auto; }
.search-bar span:last-child{ font-size:13px; }
.promo-banner{
margin:6px 18px 22px; padding:20px;
border-radius:14px;
background:
var(--pattern-escuro),
linear-gradient(120deg, var(--verde-musgo) 0%, #4f5936 100%);
background-size:106px 106px, auto;
color:var(--branco);
position:relative; overflow:hidden;
}
/* .deco é o que recebe o SVG por JS — o seletor antigo (svg.deco)
nunca casava, e o ícone vazava em tamanho cheio dentro do banner. */
.promo-banner .deco{ position:absolute; right:-10px; bottom:-16px; width:90px; height:90px; opacity:0.18; }
.promo-banner .deco svg{ width:100%; height:100%; }
.promo-banner p.tag{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.75); margin-bottom:8px; }
.promo-banner h3{ font-family:var(--font-display); font-size:21px; font-weight:500; max-width:15ch; margin-bottom:14px; position:relative; }
.promo-banner button{
background:var(--branco); color:var(--quase-preto);
padding:8px 16px; border-radius:8px;
font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
position:relative;
}
.secao-titulo{
display:flex; align-items:baseline; justify-content:space-between;
padding:0 18px; margin-bottom:12px;
}
/* ATENÇÃO ao mexer nas duas regras abaixo (.secao-titulo h4 e .card-nome):
elas usam Raleway de propósito, não por descuido.
A Cosmetic é uma didone — as hastes horizontais são fio de cabelo em
TODOS os pesos (subir o peso engrossa a haste vertical, não a horizontal).
Abaixo de ~30px num monitor 1x elas somem na rasterização e "Essência"
vira "Issência", "Em destaque" vira "Im destaque". Testado e reprovado
em 400, 700 e 900, inclusive a 27px. Em tela 2x (todo celular) fica
perfeito, mas metade dos desktops ainda é 1x.
É também o papel que o brand book dá a cada uma: Cosmetic é a display,
Raleway é a secundária. A Cosmetic segue em tudo que é grande. */
.secao-titulo h4{ font-family:var(--font-body); font-size:16px; font-weight:700; letter-spacing:0.2px; }
.secao-titulo .ver-todas{ font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--verde-musgo); }
.colecoes-row{
display:flex; gap:10px; overflow-x:auto; padding:0 18px 26px;
-webkit-overflow-scrolling:touch;
}
.colecoes-row::-webkit-scrollbar{ display:none; }
.colecao-pill{
flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:7px;
width:68px;
}
.colecao-icone{
width:56px; height:56px; border-radius:50%;
background:var(--branco);
display:flex; align-items:center; justify-content:center;
border:1.5px solid transparent;
transition:border-color 0.2s ease, background 0.2s ease;
}
.colecao-icone svg{ width:22px; height:22px; stroke:var(--verde-musgo); }
.colecao-pill.ativa .colecao-icone{ background:var(--verde-musgo); border-color:var(--verde-musgo); }
.colecao-pill.ativa .colecao-icone svg{ stroke:var(--branco); }
.colecao-pill span{ font-size:10.5px; text-align:center; letter-spacing:0.2px; }
.destaques-row{
display:flex; gap:14px; overflow-x:auto; padding:0 18px 26px;
-webkit-overflow-scrolling:touch;
}
.destaques-row::-webkit-scrollbar{ display:none; }
.card-mini{ flex:0 0 auto; width:132px; }
.card-mini .card-img{ width:132px; height:132px; border-radius:12px; margin-bottom:8px; }
.card-mini .nome{ font-size:12.5px; font-weight:600; line-height:1.3; margin-bottom:2px; }
.card-mini .preco{ font-size:12px; color:var(--verde-musgo); font-weight:700; }
/* ---------- Card de produto (imagem placeholder) ---------- */
.card-img{
position:relative;
aspect-ratio:1/1;
background:linear-gradient(135deg, var(--oliva) 0%, var(--verde-musgo) 100%);
display:flex; align-items:center; justify-content:center;
border-radius:14px;
overflow:hidden;
}
.card-img svg{ width:32%; opacity:0.9; }
/* Marca-d'água do selo enquanto não há foto real do produto.
Usa a versão CREME e não a verde: o card é um degradê oliva→verde-musgo,
e um selo oliva em cima dele fica literalmente invisível no topo. */
.card-marca{ width:64%; opacity:0.3; }
.card-img .placeholder-label{
position:absolute; bottom:8px; left:0; right:0; text-align:center;
font-size:9px; letter-spacing:0.8px; text-transform:uppercase; color:rgba(255,255,255,0.85);
}
.esgotado-badge{
position:absolute; top:8px; left:8px;
background:var(--quase-preto); color:var(--branco);
font-size:8.5px; letter-spacing:0.8px; text-transform:uppercase;
padding:4px 7px; border-radius:6px;
}
.fav-btn{
position:absolute; top:8px; right:8px;
width:26px; height:26px; border-radius:50%;
background:rgba(255,255,255,0.9);
display:flex; align-items:center; justify-content:center;
}
.fav-btn svg{ width:13px; height:13px; }
/* ---------- Vitrine ---------- */
.vitrine-search{
margin:0 18px 14px; padding:11px 14px;
background:var(--branco); border-radius:10px;
display:flex; align-items:center; gap:8px; color:#8a8a8a;
}
.vitrine-search svg{ width:15px; height:15px; }
.vitrine-search input{ border:none; outline:none; background:none; font-size:13px; flex:1; color:var(--quase-preto); }
/* Rótulo das duas linhas de filtro (tipo e coleção), que só aparecem
dentro de Ofertas / Lançamentos / Destaques */
.filtro-rotulo{
font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
color:#9a9a9a; padding:0 18px 7px;
}
.filtro-rotulo:empty, .vitrine-tipos:empty{ display:none; }
.vitrine-tipos{ padding-top:2px; }
.vitrine-tipos .vitrine-pills{ padding-bottom:14px; }
.vitrine-pills{ display:flex; gap:8px; overflow-x:auto; padding:0 18px 16px; -webkit-overflow-scrolling:touch; }
.vitrine-pills::-webkit-scrollbar{ display:none; }
.pill-texto{
flex:0 0 auto; padding:8px 16px; font-size:11.5px; letter-spacing:0.5px; text-transform:uppercase;
border:1px solid rgba(33,33,33,0.15); border-radius:20px; white-space:nowrap;
transition:all 0.2s ease; background:transparent;
}
.pill-texto.ativa{ background:var(--verde-musgo); border-color:var(--verde-musgo); color:var(--branco); }
.grid-produtos{
display:grid; grid-template-columns:1fr 1fr; gap:16px;
padding:4px 18px 24px;
}
.card-produto{ display:flex; flex-direction:column; }
.card-produto .card-body{ padding:10px 2px 0; display:flex; flex-direction:column; flex:1; }
.card-produto .card-colecao{ font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--verde-musgo); margin-bottom:4px; }
/* Raleway aqui pelo mesmo motivo da .secao-titulo h4 — ver nota acima */
.card-produto .card-nome{ font-family:var(--font-body); font-size:13.5px; font-weight:600; line-height:1.35; margin-bottom:5px; }
.card-produto .card-preco{ font-size:13px; font-weight:700; margin-top:auto; }
.sem-resultado{ padding:60px 20px; text-align:center; color:#999; font-size:13px; }
/* ---------- Produto ---------- */
#tela-produto .card-img{ border-radius:0; aspect-ratio:1/1; }
.produto-info{ padding:20px 18px 0; }
.produto-tag{
display:inline-block; font-size:10px; letter-spacing:1px; text-transform:uppercase;
color:var(--verde-musgo); background:rgba(98,110,64,0.1); padding:4px 10px; border-radius:20px; margin-bottom:12px;
}
.produto-nome{ font-family:var(--font-display); font-size:27px; font-weight:600; line-height:1.15; margin-bottom:8px; }
.produto-preco{ font-size:18px; font-weight:700; color:var(--verde-musgo); margin-bottom:18px; }
.produto-desc{ font-size:13.5px; line-height:1.7; color:#555; margin-bottom:22px; padding:0 18px; }
.qtd-control{ display:flex; align-items:center; gap:18px; margin-bottom:6px; }
.qtd-control button{
width:34px; height:34px; border:1px solid var(--quase-preto); border-radius:50%; font-size:17px;
}
.qtd-control span{ font-size:15px; font-weight:600; min-width:16px; text-align:center; }
/* ---------- Carrinho ---------- */
.item-carrinho{
display:flex; gap:12px; padding:14px 18px;
border-bottom:1px solid rgba(33,33,33,0.07);
}
.item-thumb{
width:66px; height:66px; border-radius:10px; flex:0 0 auto;
background:linear-gradient(135deg, var(--oliva) 0%, var(--verde-musgo) 100%);
display:flex; align-items:center; justify-content:center;
}
.item-thumb svg{ width:40%; opacity:0.9; }
.item-thumb .card-marca{ width:62%; }
.item-info{ flex:1; }
.item-nome{ font-size:13.5px; font-weight:700; margin-bottom:2px; }
.item-colecao{ font-size:10.5px; color:var(--verde-musgo); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.item-qtd{ display:flex; align-items:center; gap:10px; font-size:12.5px; }
.item-qtd button{ width:22px; height:22px; border:1px solid rgba(33,33,33,0.3); border-radius:50%; font-size:12px; }
.item-remover{ font-size:10.5px; text-decoration:underline; color:#999; margin-top:8px; display:inline-block; }
.item-preco{ font-size:13px; font-weight:700; white-space:nowrap; }
.carrinho-vazio{ padding:70px 20px; text-align:center; color:#999; font-size:13px; }
.cupom-linha{
display:flex; gap:8px; margin:16px 18px;
}
.cupom-linha input{
flex:1; padding:11px 14px; border:1px solid rgba(33,33,33,0.15); border-radius:10px; font-size:12.5px; outline:none;
}
.cupom-linha button{
padding:0 16px; border:1px solid var(--quase-preto); border-radius:10px; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; font-weight:600;
}
/* ---------- Checkout ---------- */
.checkout-area{ padding:18px; }
.checkout-area label{
display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:0.6px; margin-bottom:7px; color:#666;
}
.checkout-area input{
width:100%; padding:13px 14px; margin-bottom:12px;
border:1px solid rgba(33,33,33,0.15); border-radius:10px; font-size:14px; font-family:inherit; outline:none;
}
.frete-resultado{
font-size:12.5px; padding:12px 14px; background:var(--branco); border-radius:10px; margin-bottom:16px; display:none;
}
.frete-resultado.visivel{ display:block; }
.resumo-linha{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:9px; color:#555; }
.resumo-linha.total{ font-weight:700; font-size:16px; color:var(--quase-preto); margin-top:6px; }
.aviso-placeholder{
font-size:11px; color:#888; line-height:1.6; margin-top:18px; padding-top:14px;
border-top:1px dashed rgba(33,33,33,0.15);
}
/* ---------- Pagamento placeholder ---------- */
.pagamento-conteudo{
flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; padding:40px 30px;
}
.pagamento-conteudo svg{ width:56px; height:56px; stroke:var(--verde-musgo); margin-bottom:20px; }
.pagamento-conteudo h3{ font-family:var(--font-display); font-size:22px; margin-bottom:10px; }
.pagamento-conteudo p{ font-size:13px; color:#666; line-height:1.6; margin-bottom:28px; }
/* ============================================================
MICROINTERAÇÕES
Tudo curto (0,15s–0,45s) e com curva de desaceleração. A régua é:
confirmar a ação, nunca chamar atenção pra si. Todas caem sozinhas
sob prefers-reduced-motion — ver o bloco lá em cima.
============================================================ */
/* Troca de tela: entra com fade e um deslize de 10px */
.screen.ativa{ animation:telaEntra 0.34s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes telaEntra{
from{ opacity:0; transform:translateY(10px); }
to{ opacity:1; transform:none; }
}
/* Botões: cor e escala. O :active dá o "afunda" no toque. */
.btn{
transition:background 0.25s ease, opacity 0.25s ease,
transform 0.14s ease, box-shadow 0.28s ease;
}
.btn-primary:hover:not(:disabled){ box-shadow:0 7px 20px rgba(98,110,64,0.3); }
.btn-ghost:hover:not(:disabled){ background:rgba(33,33,33,0.05); }
.btn:active:not(:disabled){ transform:scale(0.975); }
.btn:disabled{ transform:none; box-shadow:none; }
.icon-btn{ transition:background 0.2s ease, transform 0.14s ease; }
.icon-btn:active{ transform:scale(0.9); }
.qtd-control button, .item-qtd button{ transition:background 0.18s ease, transform 0.14s ease; }
.qtd-control button:active, .item-qtd button:active{
transform:scale(0.88); background:rgba(33,33,33,0.06);
}
.promo-banner button{ transition:transform 0.14s ease, box-shadow 0.25s ease; }
.promo-banner button:active{ transform:scale(0.96); }
.menu-item{ transition:background 0.18s ease, padding-left 0.18s ease; }
.menu-item:active{ background:rgba(140,139,85,0.1); }
/* Pills de filtro: o estado ativo entra com um respiro */
.pill-texto{
transition:background 0.24s ease, border-color 0.24s ease,
color 0.24s ease, transform 0.16s ease;
}
.pill-texto:active{ transform:scale(0.95); }
.pill-texto.ativa{ animation:pillAtiva 0.3s ease; }
@keyframes pillAtiva{
0%{ transform:scale(0.94); }
55%{ transform:scale(1.04); }
100%{ transform:scale(1); }
}
.colecao-icone{ transition:border-color 0.2s ease, background 0.2s ease, transform 0.18s ease; }
.colecao-pill:active .colecao-icone{ transform:scale(0.92); }
.cat-card{ transition:border-color 0.22s ease, transform 0.18s ease, box-shadow 0.28s ease; }
/* Coração de favoritar: pulso curto ao ativar (só ao ativar) */
.fav-btn{ transition:background 0.2s ease, transform 0.16s ease; }
.fav-btn:active{ transform:scale(0.85); }
.fav-btn svg, #botao-favorito svg{ transform-origin:center; }
.fav-pulso{ animation:favPulso 0.44s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes favPulso{
0%{ transform:scale(1); }
35%{ transform:scale(1.4); }
62%{ transform:scale(0.92); }
100%{ transform:scale(1); }
}
/* Contador do carrinho: pulsa quando o número muda */
.tab-badge, .nav-badge{ transition:transform 0.16s ease; }
.badge-pulso{ animation:badgePulso 0.5s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes badgePulso{
0%{ transform:scale(1); }
30%{ transform:scale(1.5); }
60%{ transform:scale(0.9); }
100%{ transform:scale(1); }
}
/* Micro-toast de confirmação */
.toast{
position:fixed; z-index:90; left:50%; bottom:100px;
transform:translate(-50%, 14px);
max-width:calc(100% - 44px);
padding:12px 20px; border-radius:999px;
background:var(--quase-preto); color:var(--creme);
font-size:12.5px; font-weight:600; letter-spacing:0.3px;
box-shadow:0 8px 26px rgba(0,0,0,0.28);
opacity:0; pointer-events:none;
transition:opacity 0.26s ease, transform 0.26s cubic-bezier(0.22,1,0.36,1);
}
.toast.visivel{ opacity:1; transform:translate(-50%, 0); }
/* ============================================================
CATÁLOGO AO VIVO — carregamento, erro e seções vazias
============================================================ */
/* Seção sem conteúdo some da navegação e volta sozinha quando a
planilha for preenchida. Ver aplicarSecoesVazias() no app.js. */
.secao-oculta{ display:none !important; }
.carregando-marca{
display:flex; flex-direction:column; align-items:center; gap:14px;
padding:44px 24px 30px;
}
.carregando-marca img{ width:74px; opacity:0.5; animation:pulsarMarca 1.7s ease-in-out infinite; }
.carregando-marca p{ font-size:12.5px; letter-spacing:0.4px; color:#8d8d8d; }
@keyframes pulsarMarca{
0%,100%{ opacity:0.28; transform:scale(0.97); }
50% { opacity:0.62; transform:scale(1); }
}
.skeleton-grid{
display:grid; grid-template-columns:1fr 1fr; gap:16px;
padding:0 18px 28px;
}
.sk-card{
aspect-ratio:1/1.34; border-radius:14px;
background:linear-gradient(100deg,
rgba(140,139,85,0.10) 30%, rgba(140,139,85,0.20) 50%, rgba(140,139,85,0.10) 70%);
background-size:220% 100%;
animation:brilhoSk 1.5s ease-in-out infinite;
}
@keyframes brilhoSk{ from{ background-position:180% 0; } to{ background-position:-40% 0; } }
.estado-erro{
display:flex; flex-direction:column; align-items:center; text-align:center;
gap:14px; padding:56px 26px 40px; max-width:420px; margin:0 auto;
}
.estado-erro img{ width:66px; opacity:0.42; }
.estado-erro h4{ font-family:var(--font-body); font-size:16px; font-weight:700; line-height:1.4; }
.estado-erro p{ font-size:13.5px; line-height:1.7; color:#6b6b6b; }
.estado-erro .btn{ max-width:270px; }
.erro-detalhe{ font-size:10.5px; color:#b3b3b3; word-break:break-word; margin-top:4px; }
/* Foto real da peça; sem ela, fica a marca-d'água que já existia */
.foto-peca{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card-img.tem-foto .card-marca,
.card-img.tem-foto .marca-fallback,
.card-img.tem-foto .placeholder-label{ display:none; }
.item-thumb{ position:relative; overflow:hidden; }
.item-thumb .foto-peca + .card-marca,
.item-thumb .foto-peca ~ .marca-fallback{ display:none; }
.galeria-mini{
display:flex; gap:8px; overflow-x:auto; padding:10px 18px 0;
}
.galeria-mini .mini{
flex:0 0 auto; width:56px; height:56px; border-radius:8px; overflow:hidden;
border:1.5px solid transparent; opacity:0.6; transition:opacity .2s, border-color .2s;
}
.galeria-mini .mini.ativa{ opacity:1; border-color:var(--verde-musgo); }
.galeria-mini .mini img{ width:100%; height:100%; object-fit:cover; }
/* Seletor de cor na tela de produto */
.produto-cores{ margin:0 0 18px; }
.produto-cores:empty{ display:none; }
/* O rótulo de filtro é centralizado no desktop; aqui ele acompanha o
texto do produto, que é alinhado à esquerda. */
.produto-cores .filtro-rotulo{ padding:0 0 8px; text-align:left; }
.cores-lista{ display:flex; gap:8px; flex-wrap:wrap; }
.pill-esgotada{ opacity:0.45; }
.pill-nota{ font-size:9px; letter-spacing:0.4px; opacity:0.8; }
.produto-estoque{
font-size:12px; color:var(--verde-musgo); font-weight:600;
margin-top:10px; min-height:1em;
}
.produto-estoque:empty{ display:none; }
.card-cores{ font-size:10.5px; color:#8d8d8d; letter-spacing:0.3px; margin-bottom:4px; }
.preco-apartir{ font-size:0.72em; color:#8d8d8d; font-weight:500; letter-spacing:0.2px; }
.item-limite{ font-size:10.5px; color:#A8452F; margin-top:6px; }
.card-produto.esgotado .card-img{ opacity:0.62; }
/* Já tentei content-visibility:auto aqui com contain-intrinsic-size.
NÃO refaça: `auto 300px` vale para os DOIS eixos, então o card fora
da dobra reservava 300px de largura numa coluna de ~165px e estourava
a grade em 259px de scroll lateral. Quem cuida das 209 peças é o
renderEmBlocos() do app.js, que já dá conta. */
/* ---------- Ofertas / Lançamentos: preço e selos ---------- */
.preco-antigo{
text-decoration:line-through; color:#9a9a9a; font-weight:500;
margin-right:7px; font-size:0.88em;
}
.preco-novo{ color:var(--verde-musgo); font-weight:700; }
.selo-oferta, .selo-novo{
position:absolute; top:8px; left:8px;
font-size:9px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase;
padding:5px 8px; border-radius:6px; color:var(--branco);
}
.selo-oferta{ background:#A8452F; }
.selo-novo{ background:var(--verde-musgo); }
.selo-inline{ position:static; display:inline-block; margin-left:10px; vertical-align:middle; }
/* ---------- Categorias (navegação por tipo) ---------- */
.secao-apoio{ font-size:12.5px; color:#7d7d7d; padding:2px 18px 16px; line-height:1.6; }
.grid-categorias{
display:grid; grid-template-columns:1fr 1fr; gap:12px;
padding:0 18px 26px;
}
.cat-card{
display:flex; flex-direction:column; align-items:flex-start; gap:5px;
padding:18px 16px; border-radius:14px; text-align:left;
background:var(--branco);
border:1px solid transparent;
transition:border-color 0.2s ease, transform 0.2s ease;
}
.cat-card:not(.vazia):active{ transform:scale(0.98); }
.cat-icone{ margin-bottom:6px; }
.cat-icone svg{ width:24px; height:24px; stroke:var(--verde-musgo); }
.cat-nome{ font-size:14.5px; font-weight:700; }
.cat-qtd{ font-size:11px; color:#8f8f8f; letter-spacing:0.3px; }
.cat-card.vazia{ opacity:0.45; cursor:not-allowed; }
.cat-card.vazia .cat-qtd{ color:var(--oliva); font-weight:600; }
/* ---------- Login / Registro ---------- */
.pagina-form{ padding-top:8px; }
.form-erro{
font-size:12.5px; color:#A8452F; line-height:1.55;
margin:-4px 0 14px; min-height:0;
}
.form-erro:empty{ display:none; }
.form-link{
font-size:13px; color:#6b6b6b; text-align:center; margin-top:16px; line-height:1.6;
}
.form-link button{ font-size:13px; color:var(--verde-musgo); text-decoration:underline; }
/* ---------- Botão flutuante de WhatsApp ---------- */
.wa-flutuante{
position:fixed; z-index:80;
right:18px; bottom:calc(78px + env(safe-area-inset-bottom));
display:flex; align-items:center; gap:0;
height:54px; padding:0; border-radius:999px;
background:#25D366; color:var(--branco);
box-shadow:0 6px 20px rgba(0,0,0,0.22);
/* Entrada: sobe e assenta, uma vez só, depois que a página carregou */
animation:waEntrada 0.55s cubic-bezier(0.22,1,0.36,1) 1.1s both;
}
.wa-icone{
flex:0 0 auto; width:54px; height:54px;
display:flex; align-items:center; justify-content:center;
}
.wa-icone svg{ width:29px; height:29px; }
.wa-rotulo{
overflow:hidden; white-space:nowrap;
max-width:0; opacity:0;
font-size:13px; font-weight:600; letter-spacing:0.3px;
transition:max-width 0.32s ease, opacity 0.22s ease, padding 0.32s ease;
padding-right:0;
}
/* Anel de pulso — nasce atrás do botão e se dissolve pra fora */
.wa-flutuante::before{
content:''; position:absolute; inset:0; z-index:-1;
border-radius:999px; background:#25D366;
animation:waPulso 3.2s ease-out 2s infinite;
}
@keyframes waEntrada{
from{ opacity:0; transform:translateY(14px) scale(0.9); }
to{ opacity:1; transform:none; }
}
@keyframes waPulso{
0%{ transform:scale(1); opacity:0.45; }
65%{ transform:scale(1.45); opacity:0; }
100%{ transform:scale(1.45); opacity:0; }
}
/* Desktop: o rótulo abre no hover */
@media (hover:hover){
.wa-flutuante:hover .wa-rotulo{ max-width:150px; opacity:1; padding-right:20px; }
}
/* Toque: o rótulo se apresenta sozinho e recolhe */
@media (hover:none){
.wa-rotulo{ animation:waConvite 7.5s ease 1.8s 1 both; }
@keyframes waConvite{
0%{ max-width:0; opacity:0; padding-right:0; }
9%{ max-width:150px; opacity:1; padding-right:20px; }
62%{ max-width:150px; opacity:1; padding-right:20px; }
78%{ max-width:0; opacity:0; padding-right:0; }
100%{ max-width:0; opacity:0; padding-right:0; }
}
}
/* Some no onboarding — a cliente ainda nem entrou na loja */
.app-frame:has(#tela-onboarding.ativa) .wa-flutuante{ display:none; }
/* Nas telas com CTA fixo, sobe pra não cobrir o botão principal */
.app-frame:has(#tela-produto.ativa) .wa-flutuante,
.app-frame:has(#tela-carrinho.ativa) .wa-flutuante,
.app-frame:has(#tela-checkout.ativa) .wa-flutuante{
bottom:calc(152px + env(safe-area-inset-bottom));
}
/* ---------- Páginas institucionais ---------- */
.pagina{ padding:4px 18px 34px; }
.aviso-provisorio{
font-size:11.5px; line-height:1.6; color:#7a7458;
background:rgba(140,139,85,0.11);
border-left:2px solid var(--oliva);
padding:11px 13px; border-radius:0 8px 8px 0; margin-bottom:22px;
}
.pagina-lead{
font-family:var(--font-display); font-weight:400;
font-size:22px; line-height:1.35; margin-bottom:18px;
}
.pagina p{ font-size:14px; line-height:1.75; color:#4d4d4d; margin-bottom:14px; }
.pagina h4{
font-family:var(--font-body); font-size:12px; font-weight:700;
letter-spacing:1.4px; text-transform:uppercase; color:var(--verde-musgo);
margin:26px 0 12px;
}
.pagina ul{ margin-bottom:16px; }
.pagina ul li{
position:relative; padding-left:20px; margin-bottom:11px;
font-size:14px; line-height:1.65; color:#4d4d4d;
}
.pagina ul li::before{
content:''; position:absolute; left:2px; top:9px;
width:6px; height:6px; border-radius:50%; background:var(--oliva);
}
.pagina strong{ color:var(--quase-preto); font-weight:700; }
/* FAQ — acordeão nativo, sem JS */
.faq-item{
background:var(--branco); border-radius:10px;
margin-bottom:10px; overflow:hidden;
}
.faq-item summary{
cursor:pointer; list-style:none; padding:15px 17px;
font-size:13.5px; font-weight:600; line-height:1.45;
display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
content:'+'; flex:0 0 auto; color:var(--verde-musgo);
font-size:17px; line-height:1; transition:transform 0.2s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ padding:0 17px 16px; margin:0; font-size:13.5px; }
/* Formulários das páginas (contato, rastreio) */
.form-campo{ margin-bottom:13px; }
.form-campo label{
display:block; font-size:10.5px; text-transform:uppercase;
letter-spacing:0.6px; margin-bottom:7px; color:#666;
}
.form-campo input, .form-campo textarea{
width:100%; padding:13px 14px; font-size:14px; font-family:inherit;
border:1px solid rgba(33,33,33,0.15); border-radius:10px;
outline:none; background:var(--branco); color:var(--quase-preto);
}
.form-campo textarea{ resize:vertical; min-height:92px; line-height:1.55; }
.form-campo input:focus, .form-campo textarea:focus{ border-color:var(--oliva); }
.form-nota{ font-size:11.5px; color:#8a8a8a; line-height:1.6; margin-top:14px; }
/* Menu "Mais" (só mobile — no desktop isso mora na nav e no rodapé) */
.menu-lista{ padding:6px 0 20px; }
.menu-grupo{
font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase;
color:#9a9a9a; padding:20px 18px 8px;
}
.menu-item{
display:flex; align-items:center; justify-content:space-between;
width:100%; padding:15px 18px; font-size:14px; text-align:left;
background:var(--branco); border-bottom:1px solid rgba(33,33,33,0.06);
}
.menu-item::after{
content:''; width:7px; height:7px; flex:0 0 auto;
border-right:1.5px solid #b0b0b0; border-top:1.5px solid #b0b0b0;
transform:rotate(45deg);
}
/* Favoritos */
.vazio-estado{ padding:70px 24px; text-align:center; }
.vazio-estado p{ font-size:13.5px; color:#999; line-height:1.7; margin-bottom:20px; }
.vazio-estado .btn{ max-width:240px; margin:0 auto; }
/* ============================================================
DESKTOP (≥769px) — vira loja web: sem moldura de celular,
sem abas inferiores, menu horizontal no topo, conteúdo
centralizado em 1200px e rodapé com as seções de apoio.
As telas e o JS de navegação são exatamente os mesmos.
============================================================ */
@media (min-width:769px){
html, body{ height:auto; min-height:100%; }
body{ background:var(--creme); }
/* --- shell: a página inteira rola, não mais a .scroll-area --- */
.app-wrap{ display:block; min-height:100dvh; padding:0; }
.app-frame{
height:auto; min-height:100dvh;
overflow:visible;
display:flex; flex-direction:column;
}
.screen{ min-height:0; }
.screen.ativa{ display:block; flex:1 0 auto; }
.scroll-area{ flex:none; overflow:visible; }
.tabbar{ display:none; }
.topbar-espaco{ display:none; }
/* --- barra de navegação --- */
.nav-desktop{
display:block;
position:sticky; top:0; z-index:50;
flex:0 0 auto;
background:var(--branco);
border-bottom:1px solid rgba(33,33,33,0.08);
}
.nav-inner{
max-width:1200px; margin:0 auto;
padding:0 32px; height:78px;
display:flex; align-items:center; gap:32px;
}
.nav-logo{
flex:0 0 auto;
display:flex; align-items:center;
font-family:var(--font-display); font-size:27px; font-weight:600; letter-spacing:1px;
}
.nav-logo .marca-img{ height:38px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:30px; margin-left:auto; margin-right:6px; }
.nav-link{
position:relative; padding:6px 0;
font-size:11.5px; letter-spacing:1.2px; text-transform:uppercase; font-weight:600;
transition:color 0.2s ease;
}
.nav-link::after{
content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
background:var(--verde-musgo);
transform:scaleX(0); transform-origin:left;
transition:transform 0.22s ease;
}
.nav-link:hover{ color:var(--verde-musgo); }
.nav-link:hover::after{ transform:scaleX(1); }
/* Ofertas é a seção principal — ganha cor mesmo sem hover */
.nav-link.nav-destaque{ color:#A8452F; }
.nav-link.nav-destaque::after{ background:#A8452F; }
.nav-sacola{
flex:0 0 auto; position:relative;
width:42px; height:42px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:var(--creme);
}
.nav-sacola svg{ width:19px; height:19px; }
.nav-badge{
position:absolute; top:-2px; right:-2px;
width:18px; height:18px; border-radius:50%;
background:var(--verde-musgo); color:var(--branco);
font-size:9.5px; font-weight:700;
align-items:center; justify-content:center;
}
/* No onboarding a cliente ainda não "entrou na loja" */
.app-frame:has(#tela-onboarding.ativa) .nav-desktop,
.app-frame:has(#tela-onboarding.ativa) .rodape-desktop{ display:none; }
/* --- Onboarding: vira hero de tela cheia --- */
#tela-onboarding.ativa{ display:flex; flex:1 0 auto; }
.onboarding-bg{
align-items:center; justify-content:center; text-align:center;
padding:90px 40px;
}
.onboarding-marca{ margin-bottom:34px; }
.onboarding-marca .marca-img{ height:112px; }
.onboarding-eyebrow{ font-size:12px; letter-spacing:4px; }
.onboarding-title{ font-size:clamp(48px, 5.2vw, 70px); max-width:15ch; margin:0 auto 20px; }
/* A frase precisa de ~495px numa linha só; 48ch dava 470 e quebrava em
duas por 25px. 58ch (~568px) resolve com folga e ainda cabe sobrando
no desktop mais estreito (769px, onde há 689px livres). Preferi
alargar o container a diminuir a fonte. No mobile segue quebrando. */
.onboarding-sub{ font-size:16px; max-width:58ch; margin:0 auto 40px; }
#tela-onboarding .btn{ max-width:290px; margin:0 auto; }
/* --- Home --- */
.home-header{ display:none; }
.atalhos-secao{ display:none; } /* no desktop isso é a nav do topo */
.search-bar{ max-width:520px; margin:44px auto 0; padding:15px 20px; }
.search-bar span:last-child{ font-size:14px; }
.promo-banner{
max-width:1200px; margin:32px auto 60px; padding:60px 56px;
border-radius:20px;
}
.promo-banner p.tag{ font-size:11px; letter-spacing:2px; margin-bottom:12px; }
.promo-banner h3{ font-size:clamp(30px, 3.2vw, 42px); max-width:17ch; margin-bottom:24px; }
.promo-banner button{ padding:12px 28px; font-size:11.5px; }
.promo-banner .deco{ right:56px; bottom:-38px; width:210px; height:210px; opacity:0.14; }
.secao-titulo{ max-width:1200px; margin:0 auto 22px; padding:0 32px; }
.secao-titulo h4{ font-size:19px; }
.secao-titulo .ver-todas{ font-size:12px; }
.colecoes-row{
max-width:1200px; margin:0 auto; padding:0 32px 60px;
gap:20px; overflow-x:visible;
}
.colecao-pill{ width:104px; }
.colecao-icone{ width:80px; height:80px; }
.colecao-icone svg{ width:30px; height:30px; }
.colecao-pill span{ font-size:12.5px; }
.colecao-pill:hover .colecao-icone{ border-color:var(--verde-musgo); }
.destaques-row{
max-width:1200px; margin:0 auto; padding:0 32px 72px;
display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px;
overflow:visible;
}
/* A régua agora vem do campo destaque (4 peças) e fecha a linha certinho.
O corte fica de rede de segurança caso a Andressa marque uma 5ª. */
.destaques-row .card-mini:nth-child(n+5){ display:none; }
.card-mini{ width:auto; }
.card-mini .card-img{ width:100%; height:auto; aspect-ratio:1/1; margin-bottom:12px; }
.card-mini .nome{ font-size:15px; }
.card-mini .preco{ font-size:14px; }
/* --- Cabeçalhos de página (vitrine / carrinho / checkout) --- */
/* Cabeçalho de seção: pattern da marca bem discreto atrás do título.
O pattern vai num ::before mascarado — sem a máscara ele termina
numa borda reta embaixo do título e vira faixa, não textura. */
#tela-vitrine .topbar,
#tela-carrinho .topbar,
#tela-checkout .topbar{
position:relative;
flex-direction:column; align-items:center; gap:0;
padding:56px 32px 22px; background:none;
}
#tela-vitrine .topbar::before,
#tela-carrinho .topbar::before,
#tela-checkout .topbar::before{
content:''; position:absolute; inset:0; pointer-events:none;
background-image:var(--pattern-claro);
background-size:124px 124px;
background-position:center -26px;
-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
mask-image:linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
}
#tela-vitrine .topbar > *,
#tela-carrinho .topbar > *,
#tela-checkout .topbar > *{ position:relative; }
#tela-vitrine .topbar-title,
#tela-carrinho .topbar-title,
#tela-checkout .topbar-title{ font-size:clamp(30px, 3.4vw, 38px); }
#tela-vitrine .topbar .icon-btn,
#tela-carrinho .topbar .icon-btn{ display:none; }
/* --- Vitrine --- */
.vitrine-search{ max-width:440px; margin:0 auto 22px; padding:13px 18px; }
.filtro-rotulo{ text-align:center; padding:0 32px 9px; font-size:10.5px; }
.vitrine-tipos .vitrine-pills{ padding-bottom:22px; }
.vitrine-pills{
max-width:1000px; margin:0 auto; padding:0 32px 34px;
justify-content:center; flex-wrap:wrap; overflow-x:visible;
}
.pill-texto{ font-size:12px; padding:9px 18px; }
.pill-texto:hover{ border-color:var(--verde-musgo); color:var(--verde-musgo); }
.pill-texto.ativa:hover{ color:var(--branco); }
.grid-produtos{
max-width:1200px; margin:0 auto; padding:0 32px 90px;
grid-template-columns:repeat(3, minmax(0,1fr)); gap:34px 28px;
}
/* Card: eleva com sombra e a marca-d'água dá um zoom lento por dentro */
.card-produto .card-img{
transition:transform 0.38s cubic-bezier(0.22,1,0.36,1), box-shadow 0.38s ease;
}
.card-produto:hover .card-img{
transform:translateY(-6px);
box-shadow:0 16px 30px rgba(33,33,33,0.17);
}
.card-marca{ transition:transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.card-produto:hover .card-marca{ transform:scale(1.09); }
.card-produto .card-nome{ transition:color 0.22s ease; }
.card-produto:hover .card-nome{ color:var(--verde-musgo); }
.card-mini .card-img{ transition:transform 0.38s cubic-bezier(0.22,1,0.36,1), box-shadow 0.38s ease; }
.card-mini:hover .card-img{ transform:translateY(-5px); box-shadow:0 14px 26px rgba(33,33,33,0.15); }
.cat-card:not(.vazia):hover{ transform:translateY(-4px); box-shadow:0 14px 26px rgba(33,33,33,0.12); }
.nav-sacola{ transition:background 0.22s ease, transform 0.16s ease; }
.nav-sacola:hover{ background:rgba(140,139,85,0.18); }
.toast{ bottom:36px; }
.card-produto .card-body{ padding:14px 2px 0; }
.card-produto .card-nome{ font-size:15px; }
.card-produto .card-preco{ font-size:15px; }
.fav-btn{ width:32px; height:32px; top:12px; right:12px; }
.fav-btn svg{ width:15px; height:15px; }
.sem-resultado{ padding:110px 20px; font-size:15px; }
/* --- Produto: imagem à esquerda (sticky), info à direita --- */
#tela-produto.ativa{
display:grid; flex:1 0 auto;
grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
grid-template-areas:
"topo topo"
"img info"
"img desc"
"img cta"
"img resto";
/* a última linha absorve a sobra, senão as linhas esticam
junto com a imagem e abrem buracos entre info, desc e CTA */
grid-template-rows:auto auto auto auto 1fr;
align-content:start;
max-width:1200px; margin:0 auto; padding:28px 32px 100px;
column-gap:64px;
}
#tela-produto .scroll-area{ display:contents; }
#tela-produto .topbar-flutuante{
grid-area:topo; position:static;
padding:8px 0 26px; justify-content:space-between;
}
#produto-img-slot{ grid-area:img; position:sticky; top:110px; }
#tela-produto .card-img{ border-radius:18px; }
#tela-produto .produto-info{ grid-area:info; padding:0; }
#tela-produto .produto-desc{ grid-area:desc; padding:0; max-width:54ch; }
#tela-produto .sticky-cta{
grid-area:cta; position:static; background:none; padding:6px 0 0;
}
#tela-produto .sticky-cta .btn{ max-width:340px; }
.produto-tag{ font-size:11px; margin-bottom:16px; }
.produto-nome{ font-size:clamp(32px, 3.6vw, 42px); }
.produto-preco{ font-size:24px; margin-bottom:24px; }
.produto-desc{ font-size:15px; }
/* --- Carrinho --- */
#carrinho-itens{ max-width:820px; width:100%; margin:0 auto; }
.item-carrinho{ padding:20px 0; gap:18px; }
.item-thumb{ width:88px; height:88px; }
.item-nome{ font-size:15px; }
.item-preco{ font-size:15px; }
.carrinho-vazio{ padding:130px 20px; font-size:15px; }
.cupom-linha{ max-width:820px; margin:22px auto; }
#tela-carrinho .sticky-cta{
max-width:820px; margin:0 auto; padding:10px 0 100px; background:none;
}
#tela-carrinho .sticky-cta .linha-total{ font-size:15px; margin-bottom:16px; }
#tela-carrinho .sticky-cta .btn{ max-width:320px; margin-left:auto; }
/* --- Checkout --- */
.checkout-area{ max-width:620px; margin:0 auto; padding:8px 32px; }
.checkout-area .btn-ghost{ max-width:240px; }
#tela-checkout .sticky-cta{
max-width:620px; margin:0 auto; padding:18px 32px 100px; background:none;
}
#tela-checkout .sticky-cta .btn{ max-width:320px; margin-left:auto; }
/* --- Pagamento --- */
#tela-pagamento .topbar{ max-width:1200px; margin:0 auto; padding:26px 32px; background:none; }
.pagamento-conteudo{ padding:70px 30px 120px; }
.pagamento-conteudo svg{ width:70px; height:70px; }
.pagamento-conteudo h3{ font-size:32px; }
.pagamento-conteudo p{ font-size:15px; max-width:48ch; }
/* --- Categorias, login e registro no desktop --- */
#tela-categorias .topbar,
#tela-login .topbar,
#tela-registro .topbar{
flex-direction:column; align-items:center; gap:0;
padding:56px 32px 18px; background:none;
}
#tela-categorias .topbar-title,
#tela-login .topbar-title,
#tela-registro .topbar-title{ font-size:clamp(28px, 3.2vw, 36px); }
#tela-categorias .topbar .icon-btn,
#tela-login .topbar .icon-btn{ display:none; }
.secao-apoio{ text-align:center; font-size:14px; padding:0 32px 34px; }
.grid-categorias{
max-width:1100px; margin:0 auto; padding:0 32px 96px;
grid-template-columns:repeat(5, minmax(0,1fr)); gap:20px;
}
.cat-card{ align-items:center; text-align:center; padding:34px 18px; }
.cat-icone svg{ width:32px; height:32px; }
.cat-nome{ font-size:16px; }
.cat-card:not(.vazia):hover{ border-color:var(--verde-musgo); }
.pagina-form{ max-width:440px; }
/* Botão flutuante: sem tabbar embaixo, volta pro canto */
.wa-flutuante{ right:28px; bottom:28px; }
.app-frame:has(#tela-produto.ativa) .wa-flutuante,
.app-frame:has(#tela-carrinho.ativa) .wa-flutuante,
.app-frame:has(#tela-checkout.ativa) .wa-flutuante{ bottom:28px; }
/* --- Páginas institucionais --- */
#tela-pagina .topbar,
#tela-favoritos .topbar{
position:relative;
flex-direction:column; align-items:center; gap:0;
padding:56px 32px 22px; background:none;
}
#tela-pagina .topbar::before,
#tela-favoritos .topbar::before{
content:''; position:absolute; inset:0; pointer-events:none;
background-image:var(--pattern-claro);
background-size:124px 124px; background-position:center -26px;
-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
mask-image:linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
}
#tela-pagina .topbar > *,
#tela-favoritos .topbar > *{ position:relative; }
#tela-pagina .topbar-title,
#tela-favoritos .topbar-title{ font-size:clamp(28px, 3.2vw, 36px); }
#tela-pagina .topbar .icon-btn,
#tela-favoritos .topbar .icon-btn{ display:none; }
.pagina{ max-width:720px; margin:0 auto; padding:10px 32px 96px; }
.pagina-lead{ font-size:26px; margin-bottom:22px; }
.pagina p, .pagina ul li{ font-size:15px; }
.faq-item summary, .faq-item p{ font-size:14.5px; }
.vazio-estado{ padding:120px 24px; }
/* O menu "Mais" é uma muleta de mobile — no desktop tudo isso está na
nav e no rodapé. A aba some junto com a tabbar, mas se alguém chegar
aqui redimensionando a janela, a tela ainda tem que se comportar. */
#tela-mais .menu-lista{ max-width:560px; margin:0 auto; padding:32px 32px 96px; }
#tela-mais .menu-item{ border-radius:10px; margin-bottom:8px; border-bottom:none; }
/* --- Rodapé com as seções de apoio --- */
.rodape-desktop{
display:block; flex:0 0 auto;
background-color:var(--quase-preto);
background-image:var(--pattern-tenue); /* estava competindo com os links */
background-size:126px 126px;
padding:64px 32px 34px;
}
.rodape-inner{
max-width:1200px; margin:0 auto;
display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:48px;
}
.rodape-logo{
font-family:var(--font-display); font-size:30px; font-weight:600;
letter-spacing:1px; color:var(--branco); margin-bottom:12px;
}
.rodape-logo .marca-img{ height:96px; width:auto; margin-bottom:4px; }
.rodape-marca p{ font-size:13px; line-height:1.75; max-width:34ch; color:rgba(235,235,235,0.6); }
.rodape-col h5{
font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase;
font-weight:700; color:var(--oliva); margin-bottom:16px;
}
.rodape-col li{ font-size:13.5px; line-height:2.15; color:rgba(235,235,235,0.72); }
.rodape-col li button{
font-size:13.5px; text-align:left; color:inherit;
transition:color 0.2s ease;
}
.rodape-col li button:hover{ color:var(--branco); }
.rodape-nota{
max-width:1200px; margin:46px auto 0; padding-top:24px;
border-top:1px solid rgba(235,235,235,0.12);
font-size:11.5px; color:rgba(235,235,235,0.42);
}
}
/* Layout mobile numa tela de BAIXA densidade (1x) — janela estreita num
monitor comum. É a mesma limitação da Cosmetic descrita lá no topo: a
19-27px em 1x, "Fale" vira "I ale". Celular de verdade é 2x/3x e não
passa por aqui, então mantém a serifada. */
@media (max-width:768px) and (max-resolution:1.5dppx){
.topbar-title{ font-family:var(--font-body); font-size:16px; font-weight:700; letter-spacing:0.3px; }
.produto-nome{ font-family:var(--font-body); font-size:21px; font-weight:700; line-height:1.3; }
.pagina-lead{ font-family:var(--font-body); font-size:16px; font-weight:700; line-height:1.5; }
}
/* Tablet: 4 colunas de rodapé apertam demais e quebram os títulos */
@media (min-width:769px) and (max-width:1023px){
.rodape-inner{ grid-template-columns:1fr 1fr; gap:38px 40px; }
.nav-inner{ gap:20px; }
.nav-links{ gap:22px; }
}
/* Telas largas: a grade do catálogo abre pra 4 colunas */
@media (min-width:1180px){
.grid-produtos{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
/* ============================================================
ALVOS DE TOQUE (≤768px)
Mínimo de 44x44 no que se toca, medido com auditoria no
Chrome em 375 e 390px. Escopo só no mobile de propósito: o
desktop tem mouse e já está aprovado como está.
Onde crescer a caixa visível estragaria o desenho — o coração
no canto do card, links de texto — a área cresce por fora,
com um ::after invisível. Ver .alvo-ampliado.
============================================================ */
@media (max-width:768px){
.icon-btn{ width:44px; height:44px; }
.icon-btn svg{ width:20px; height:20px; }
.topbar-espaco{ width:44px; }
.tab-item{ min-height:44px; justify-content:center; }
.pill-texto{ min-height:44px; display:inline-flex; align-items:center; }
.atalho{ min-height:44px; }
.btn{ min-height:48px; }
.search-bar{ min-height:50px; }
/* O input tinha 15px de altura: o toque só pegava na linha do texto.
Agora ele ocupa a barra inteira. */
.vitrine-search{ min-height:50px; padding:0 14px; }
.vitrine-search input{ align-self:stretch; height:50px; }
.promo-banner button{ min-height:44px; padding:12px 18px; }
.qtd-control button{ width:44px; height:44px; font-size:19px; }
.cupom-linha input, .cupom-linha button{ min-height:46px; }
.checkout-area input, .form-campo input{ min-height:46px; }
.form-campo textarea{ min-height:96px; }
.pagamento-conteudo .btn-ghost{ min-height:46px; }
.faq-item summary{ min-height:48px; }
.menu-item{ min-height:52px; }
.fav-btn{ width:44px; height:44px; top:6px; right:6px; }
.fav-btn svg{ width:18px; height:18px; }
/* No carrinho o botão flutuante caía em cima do campo de cupom e do
"Aplicar" — a linha do cupom é fixa acima do CTA e não sobra canto
livre. Some só nesta tela; o WhatsApp continua na aba "Mais". */
.app-frame:has(#tela-carrinho.ativa) .wa-flutuante{ display:none; }
/* Área de toque ampliada sem mexer no tamanho visível.
.fav-btn fica FORA desta lista: ela já é position:absolute na base,
o que também ancora o ::after. Declarar relative aqui tirava o
coração de cima da imagem e jogava pro fluxo, abaixo do card. */
.ver-todas, .item-remover, .form-link button, .item-qtd button{
position:relative;
}
.fav-btn::after, .ver-todas::after, .item-remover::after,
.form-link button::after, .item-qtd button::after{
content:''; position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%);
width:max(100%, 44px); height:max(100%, 44px);
}
/* Os +/− ficam acima da área ampliada do "Remover", que passa por baixo */
.item-qtd button{ z-index:1; }
.item-qtd{ gap:14px; }
.ver-todas{ padding:10px 0 10px 14px; }
/* Padding de verdade, não só ::after: pra cima a área ampliada esbarra
nos botões de quantidade, que ficam por cima. */
/* Os +/− têm área de toque de 44px, que descia 11px abaixo da caixa
visível e comia o topo do "Remover". Esta folga separa as duas. */
.item-qtd{ margin-bottom:12px; }
.item-remover{ padding:14px 0; font-size:11.5px; margin-top:0; }
.item-carrinho{ padding:18px; }
}