/* ===== Cores e fontes (mude aqui para trocar o visual do site todo) ===== */
:root{
  --bg:#F3F6F1; --surface:#FFFFFF; --ink:#121814; --muted:#4F5C53;
  --green:#2F9E44; --green-deep:#14532D; --line:#D9E1D8; --on-green:#FFFFFF; --on-deep:#FFFFFF; --on-deep-muted:#D6EDDB;
  --head:"Bricolage Grotesque","Trebuchet MS",Arial,sans-serif;
  --body:"DM Sans",Arial,Helvetica,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Modo escuro automático (segue a configuração do aparelho) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#0E1310; --surface:#171E19; --ink:#EEF3EE; --muted:#A5B3A9; --green:#4CC264; --green-deep:#7BDB8E; --line:#2A352D; --on-green:#0E1310; --on-deep:#0E1310; --on-deep-muted:#1D3324;}
}
:root[data-theme="dark"]{--bg:#0E1310; --surface:#171E19; --ink:#EEF3EE; --muted:#A5B3A9; --green:#4CC264; --green-deep:#7BDB8E; --line:#2A352D; --on-green:#0E1310; --on-deep:#0E1310; --on-deep-muted:#1D3324;}

html{scroll-padding-top:98px;scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
a{color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.wrap{max-width:1280px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--head);line-height:1.08;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,7vw,4.4rem);font-weight:800}
h2{font-size:clamp(1.8rem,4.5vw,2.6rem);font-weight:800}
h3{font-size:1.3rem;font-weight:600}
p{margin:0}

/* ===== Botões ===== */
.btn{display:inline-block;padding:14px 26px;border-radius:999px;background:var(--green);color:var(--on-green);font-weight:700;text-decoration:none;border:2px solid var(--green);transition:transform .2s,filter .2s}
.btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}

/* ===== Tela de entrada (logo grande que some sozinha) ===== */
.entrada{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);pointer-events:none;animation:entrada-sai .4s ease 1.15s forwards}
.entrada .logo-g{position:relative;width:min(74vw,440px);aspect-ratio:900/499;animation:entrada-zoom .4s ease-in 1.15s forwards}
/* Cada parte entra na sua vez: a folha cai girando, o "JT" desliza e o nome sobe */
.entrada .logo-img{position:absolute;inset:0;height:auto}
.entrada .folha{-webkit-mask-image:url(imagens/logo-folha.webp);mask-image:url(imagens/logo-folha.webp);transform-origin:13% 85%;animation:entrada-folha .55s cubic-bezier(.2,.9,.3,1.35) both,entrada-balanco 1.4s ease-in-out .55s infinite}
.entrada .jt{-webkit-mask-image:url(imagens/logo-jt.webp);mask-image:url(imagens/logo-jt.webp);animation:entrada-jt .4s cubic-bezier(.2,.9,.3,1.2) .2s both}
.entrada .nome{-webkit-mask-image:url(imagens/logo-nome.webp);mask-image:url(imagens/logo-nome.webp);animation:entrada-nome .35s ease .4s both}
@keyframes entrada-folha{from{opacity:0;transform:translateY(-45%) rotate(-60deg) scale(.4)}}
@keyframes entrada-balanco{50%{transform:rotate(5deg)}}
@keyframes entrada-jt{from{opacity:0;transform:translateX(-12%)}}
@keyframes entrada-nome{from{opacity:0;transform:translateY(12%)}}
@keyframes entrada-zoom{to{transform:scale(1.25)}}
@keyframes entrada-sai{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion: reduce){.entrada{display:none}}

/* ===== Topo ===== */
header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px);transition:box-shadow .3s}
header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.12)}
.bar{display:flex;align-items:center;justify-content:space-between;height:84px}
/* Logo oficial: a imagem serve de molde (máscara) e a cor vem daqui, para funcionar no tema claro e no escuro */
.logo{display:flex;align-items:center;text-decoration:none}
.logo-img{display:block;height:64px;aspect-ratio:900/499;background:#039141;-webkit-mask:url(imagens/logo.webp) center/contain no-repeat;mask:url(imagens/logo.webp) center/contain no-repeat;transition:transform .3s}
.logo:hover .logo-img{transform:scale(1.05)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-img{background:var(--green)}}
:root[data-theme="dark"] .logo-img{background:var(--green)}
nav{display:flex;gap:22px;align-items:center}
nav a{text-decoration:none;font-weight:500}
nav a.l:hover{color:var(--green-deep)}

/* Botão do menu (só aparece no celular) */
.menu-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;background:none;border:0;cursor:pointer}
.menu-btn span{display:block;height:3px;border-radius:3px;background:var(--ink);transition:transform .3s,opacity .3s}
.menu-btn.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:720px){
  .menu-btn{display:flex}
  nav{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:18px 22px 22px;gap:16px;display:none}
  nav.open{display:flex;animation:descer .25s ease}
}
@keyframes descer{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ===== Início ===== */
.hero{padding:64px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hero p.lead{font-size:1.2rem;color:var(--muted);margin:22px 0 32px;max-width:34ch}
.cta{display:flex;flex-wrap:wrap;gap:12px}
/* Foto dos produtos (o fundo da foto é preto, por isso a cor fixa) */
.vitrine{position:relative}
.vitrine .foto{width:100%;aspect-ratio:1022/675;object-fit:cover;display:block;border-radius:22px;background:#0B0B0B;box-shadow:0 14px 34px rgba(0,0,0,.18)}
/* Mascote na frente da foto, saindo um pouco para fora do canto */
.mascote{position:absolute;aspect-ratio:741/1000;perspective:700px;pointer-events:none}
.vitrine .mascote{left:-64px;bottom:-36px;height:96%}
/* O boneco inteiro flutua e gira de leve, sozinho */
.m-3d{position:absolute;inset:0;transform-style:preserve-3d;animation:balanco 4s ease-in-out infinite,giro 7s ease-in-out infinite}
.m-3d img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.28))}
/* Cabeça e braço ficam um pouco à frente do corpo e giram em volta do pescoço e do ombro */
.m-cabeca{transform-origin:52.7% 27.3%;animation:cabeca 5s ease-in-out infinite}
.m-braco{transform-origin:34% 34.4%;animation:braco 2.6s ease-in-out infinite}
@keyframes balanco{50%{translate:0 -8px}}
@keyframes giro{0%,100%{rotate:y -9deg}50%{rotate:y 9deg}}
@keyframes cabeca{0%,100%{transform:translateZ(14px) rotate(-2.5deg)}50%{transform:translateZ(14px) rotate(3deg)}}
@keyframes braco{0%,100%{transform:translateZ(22px) rotate(-4deg)}50%{transform:translateZ(22px) rotate(5deg)}}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero{padding-top:40px}.vitrine{max-width:520px}.vitrine .mascote{left:-14px;bottom:-26px;height:84%}}

/* ===== Seções ===== */
section{padding:72px 0}
.intro{max-width:52ch;margin-bottom:38px}
.intro p{color:var(--muted);margin-top:12px}
.alt{background:var(--surface);border-block:1px solid var(--line)}

/* ===== Produtos ===== */
.prods{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px;grid-column:span 3;display:flex;flex-direction:column;gap:10px;min-height:210px;transition:transform .25s,box-shadow .25s}
/* 7 cartões: 3 na primeira linha, 4 na segunda */
.prod:nth-child(-n+3){grid-column:span 4}
.prod p{color:var(--muted);font-size:.98rem}
.prod svg{width:44px;height:44px;margin-bottom:6px;transition:transform .3s}
.prod:hover svg{transform:scale(1.15) rotate(-6deg)}
.prod.dark{background:var(--green-deep);border-color:var(--green-deep);color:var(--on-deep)}
.prod.dark p{color:var(--on-deep-muted)}
@media(max-width:820px){.prods{grid-template-columns:1fr}.prods .prod{grid-column:auto;min-height:0}}

/* ===== Como pedir ===== */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.steps li{counter-increment:s;padding-top:18px;border-top:3px solid var(--green)}
.steps li::before{content:counter(s);display:block;font-family:var(--head);font-weight:800;font-size:2rem;color:var(--green-deep);margin-bottom:6px}
.steps p{color:var(--muted);margin-top:6px}
@media(max-width:720px){.steps{grid-template-columns:1fr}}
/* Aviso de entrega e prazo embaixo dos passos */
.nota{margin-top:28px;padding:16px 20px;border-left:4px solid var(--green);border-radius:0 14px 14px 0;background:var(--bg);color:var(--muted);max-width:64ch}
.nota strong{color:var(--ink)}

/* ===== Datas ===== */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chips a,.filtros button{padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:inherit;font:inherit;font-weight:500;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.chips a:hover,.filtros button:hover{background:var(--green);color:var(--on-green);transform:translateY(-3px)}

/* ===== Sobre ===== */
.about{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:44px;align-items:center}
.about p{color:var(--muted);margin-top:14px;max-width:52ch}
/* Lista de pontos fortes, cada um com um "visto" verde desenhado no CSS */
.pontos{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.pontos li{position:relative;padding-left:30px;font-weight:500}
.pontos li::before{content:"";position:absolute;left:3px;top:.42em;width:14px;height:7px;border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg)}
.retrato{border-radius:22px;overflow:hidden;aspect-ratio:2/3;background:var(--line)}
.retrato img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:720px){.about{grid-template-columns:1fr;gap:26px}.retrato{max-width:420px;margin-inline:auto}}

/* ===== Blog (cartões dos textos e a janela de leitura) ===== */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.post.reveal.show:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(0,0,0,.14)}
.post .foto{aspect-ratio:16/10;overflow:hidden;background:var(--line)}
.post .foto img,.leitor-conteudo>img{width:100%;height:100%;object-fit:cover;display:block}
.post .info{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post .info p{color:var(--muted);font-size:.98rem}
.etiqueta{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green-deep)}
.ler{margin-top:auto;padding:6px 0 0;align-self:flex-start;background:none;border:0;color:var(--green-deep);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.leitor{width:min(720px,calc(100% - 28px));max-height:min(88vh,880px);padding:0;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--ink)}
.leitor::backdrop{background:rgba(0,0,0,.62)}
.leitor .fechar{position:sticky;top:12px;float:right;z-index:1;margin:12px 12px -52px 0;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer}
.leitor-conteudo>img{height:auto;aspect-ratio:16/9}
.leitor-texto{padding:26px 28px 6px}
.leitor-texto h2{font-size:clamp(1.5rem,4vw,2rem);margin-top:8px}
.leitor-texto h3{margin-top:24px;font-size:1.15rem}
.leitor-texto p{margin-top:12px;color:var(--muted)}
.leitor-texto ul{margin:12px 0 0;padding-left:20px;color:var(--muted);display:grid;gap:6px}
.leitor-fim{padding:22px 28px 28px}
@media(max-width:820px){.posts{grid-template-columns:1fr}}

/* ===== Contato ===== */
.contact{background:var(--green-deep);color:var(--on-deep);border-radius:28px;padding:52px 34px;text-align:center}
.contact p{max-width:44ch;margin:14px auto 28px;color:var(--on-deep-muted)}
.contact .btn{background:var(--on-deep);color:var(--green-deep);border-color:var(--on-deep)}
.contact .btn.ghost{background:transparent;color:var(--on-deep);border-color:var(--on-deep)}
.contact .cta{justify-content:center}
.contact{position:relative}
.contact .mascote{left:40px;bottom:0;height:112%}
@media(max-width:1200px){.contact .mascote{display:none}}

/* ===== Bolha do WhatsApp (fixa no canto, por cima da página) ===== */
.zap{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:9;display:flex;align-items:center;gap:10px;text-decoration:none}
/* A bola é um elemento à parte e a pulsação é um círculo atrás dela que cresce e some
   (animar a sombra direto no ícone sai quadrado no iPhone) */
.zap .bola{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#25D366;box-shadow:0 8px 22px rgba(0,0,0,.28);transition:transform .2s}
.zap .bola::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:#25D366;animation:pulso 2.6s ease-out infinite}
.zap svg{width:32px;height:32px;fill:#fff}
.zap:hover .bola{transform:scale(1.08)}
/* O texto só aparece ao passar o mouse ou navegar pelo teclado */
.zap .dica{padding:8px 14px;border-radius:999px;background:var(--surface);color:var(--ink);border:1px solid var(--line);font-weight:700;font-size:.92rem;box-shadow:0 6px 18px rgba(0,0,0,.16);opacity:0;transform:translateX(8px);transition:opacity .2s,transform .2s;pointer-events:none}
.zap:hover .dica,.zap:focus-visible .dica{opacity:1;transform:none}
@keyframes pulso{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.6);opacity:0}}

/* ===== Assistente virtual (botão com o rosto do robô, em cima da bolha do WhatsApp, e a janela de chat) ===== */
.robo-btn{position:fixed;right:18px;bottom:calc(90px + env(safe-area-inset-bottom,0px));z-index:9;display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;font:inherit;cursor:pointer}
.robo-btn .bola{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--surface);border:2px solid var(--green);box-shadow:0 8px 22px rgba(0,0,0,.28);overflow:hidden;transition:transform .2s}
.robo-btn img{width:100%;height:100%;display:block}
.robo-btn:hover .bola{transform:scale(1.08)}
.robo-btn .dica{padding:8px 14px;border-radius:999px;background:var(--surface);color:var(--ink);border:1px solid var(--line);font-weight:700;font-size:.92rem;box-shadow:0 6px 18px rgba(0,0,0,.16);opacity:0;transform:translateX(8px);transition:opacity .2s,transform .2s;pointer-events:none}
.robo-btn:hover .dica,.robo-btn:focus-visible .dica{opacity:1;transform:none}
.assistente{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:20;width:min(380px,calc(100vw - 20px));height:min(580px,calc(100dvh - 36px));display:flex;flex-direction:column;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 48px rgba(0,0,0,.32);overflow:hidden;animation:descer .25s ease}
.a-topo{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--green-deep);color:var(--on-deep)}
.a-topo img{width:44px;height:44px;border-radius:50%;background:#fff;flex:none}
.a-topo div{flex:1;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.a-topo span{font-size:.82rem;color:var(--on-deep-muted)}
.a-fechar{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:inherit;font-size:1.6rem;line-height:1;cursor:pointer}
.a-conversa{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;background:var(--bg);overscroll-behavior:contain}
/* Balões: os do robô ficam à esquerda e os do cliente à direita, em verde */
.a-msg{max-width:86%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:var(--surface);border:1px solid var(--line);font-size:.96rem;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere;align-self:flex-start}
.a-msg.eu{align-self:flex-end;border-radius:16px 16px 4px 16px;background:var(--green);border-color:var(--green);color:var(--on-green)}
.a-msg.pensando{display:flex;gap:5px;padding:14px}
.a-msg.pensando i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:pensando 1s ease-in-out infinite}
.a-msg.pensando i:nth-child(2){animation-delay:.15s}
.a-msg.pensando i:nth-child(3){animation-delay:.3s}
@keyframes pensando{50%{opacity:.3;transform:translateY(-3px)}}
.a-opcoes{display:flex;flex-wrap:wrap;gap:8px}
.a-opcoes button,.a-opcoes a{padding:8px 14px;border:1px solid var(--green);border-radius:999px;background:var(--surface);color:var(--green-deep);font:inherit;font-size:.92rem;font-weight:700;text-decoration:none;cursor:pointer}
.a-opcoes .forte{background:var(--green);color:var(--on-green)}
.a-form{display:flex;gap:8px;padding:10px 12px 6px;border-top:1px solid var(--line)}
.a-form input{flex:1;min-width:0;padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font:inherit;font-size:16px /* menor que isso, o iPhone dá zoom ao tocar */}
.a-form button{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;background:var(--green);color:var(--on-green);cursor:pointer}
.a-form svg{width:22px;height:22px}
.a-aviso{padding:0 14px 10px;font-size:.76rem;color:var(--muted);text-align:center}
@media(max-width:720px){.assistente{right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:min(580px,calc(100dvh - 20px))}}

/* ===== Rodapé: a loja à esquerda, três colunas de links e uma linha final ===== */
footer{background:var(--surface);border-top:1px solid var(--line);padding:56px 0 96px; /* a folga de baixo deixa o rodapé livre da bolha do WhatsApp */color:var(--muted);font-size:.95rem}
.rodape{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}
.rodape .logo-img{height:76px}
.sobre-rodape p{margin:16px 0 18px;max-width:30ch}
.contato-rodape{display:flex;align-items:center;gap:10px;margin-top:10px;text-decoration:none}
.contato-rodape svg{width:18px;height:18px;color:var(--green)}
.rodape h3{font-family:var(--body);font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.rodape ul a{text-decoration:none}
.rodape a:hover{color:var(--green-deep)}
.rodape-fim{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:.88rem}
@media(max-width:820px){
  .rodape{grid-template-columns:1fr 1fr;gap:34px 20px}
  .sobre-rodape{grid-column:1/-1}
  .rodape-fim{flex-direction:column}
}

/* ===== Animação de entrada ao rolar =====
   A classe "js" é colocada pelo script.js. Sem JavaScript, tudo aparece normal. */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.show{opacity:1;transform:none}
/* Efeito ao passar o mouse nos cartões (precisa vir depois da regra acima) */
.prod.reveal.show:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(0,0,0,.14)}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  /* O mascote é a exceção: continua se mexendo, porque o movimento dele é leve e lento */
  .m-3d{animation:balanco 4s ease-in-out infinite,giro 7s ease-in-out infinite!important}
  .m-cabeca{animation:cabeca 5s ease-in-out infinite!important}
  .m-braco{animation:braco 2.6s ease-in-out infinite!important}
}
/* ===== Produtos em destaque (cartões com foto) ===== */
.destaques{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.item{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.item.reveal.show:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(0,0,0,.14)}
.item .foto{aspect-ratio:4/5;overflow:hidden;background:var(--line)}
.item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.item:hover img{transform:scale(1.05)}
.item .info{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.item .info p{color:var(--muted);font-size:.98rem}
.item .preco{font-weight:700;color:var(--green-deep)}
.item .btn{margin-top:auto;text-align:center}
a.prod{text-decoration:none;color:inherit;cursor:pointer}
/* ===== Filtro por categoria ===== */
[hidden]{display:none!important}
button.btn{font:inherit;font-weight:700;cursor:pointer}
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.filtros button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--on-green)}
.vazio{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.vazio p{color:var(--muted);max-width:52ch}
/* Botão "Ver todos" embaixo dos destaques (o script.js mostra só duas fileiras no computador) */
.mais{display:flex;justify-content:center}
.mais .btn{margin-top:30px}

/* ===== Celular: listas viram fileiras que rolam para o lado ===== */
@media(max-width:720px){
  section{padding:48px 0}
  .hero{padding:32px 0 52px}
  .hero p.lead{font-size:1.1rem;margin:18px 0 26px}
  .intro{margin-bottom:26px}
  .cta .btn{flex:1 1 100%;text-align:center}
  .contact{padding:40px 22px}

  /* A fileira vai de ponta a ponta da tela e o próximo cartão aparece um pouco, mostrando que dá para arrastar */
  .destaques,.prods,.steps,.chips,.filtros{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overflow-y:hidden;margin-inline:-22px;padding:4px 22px 14px;scroll-snap-type:x mandatory;scroll-padding-inline:22px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .destaques::-webkit-scrollbar,.prods::-webkit-scrollbar,.steps::-webkit-scrollbar,.chips::-webkit-scrollbar,.filtros::-webkit-scrollbar{display:none}
  .destaques>*,.prods>*,.steps>*,.chips>*{scroll-snap-align:start}
  .destaques .item{flex:0 0 76%;max-width:300px}
  /* "Ver todos" aberto: a fileira vira uma grade de duas colunas, com cartões menores e sem a descrição */
  .destaques.aberta{display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow:visible;margin-inline:0;padding:0}
  .destaques.aberta .item{max-width:none}
  .destaques.aberta .info{padding:14px;gap:8px}
  .destaques.aberta .info p{display:none}
  .destaques.aberta h3{font-size:1rem}
  .destaques.aberta .preco{font-size:.85rem}
  .destaques.aberta .btn{padding:10px 8px;font-size:.92rem}
  .prods .prod{flex:0 0 68%;max-width:280px;padding:22px}
  .steps li{flex:0 0 76%;max-width:300px}
  .chips,.filtros{gap:10px;scroll-snap-type:x proximity}
  .chips a,.filtros button{flex:0 0 auto;white-space:nowrap}

  /* Dentro das fileiras os cartões já aparecem prontos (sem esperar a animação de entrada) */
  .js .stagger>.reveal{opacity:1;transform:none}
}