:root {
  --verde: #1fa855;
  --verde-escuro: #128c43;
  --roxo: #5b2be0;
  --roxo-escuro: #3d1a9e;
  --fundo: #f6f5fb;
  --texto: #1d1b2b;
  --suave: #6b6880;
  --raio: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Segoe UI", system-ui, sans-serif; background: var(--fundo); color: var(--texto); line-height: 1.5; }
a { text-decoration: none; color: inherit; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.logo { font-weight: 800; font-size: 1.15rem; color: var(--roxo); }

/* Botões */
.btn { display: inline-block; border: 0; cursor: pointer; font: inherit; font-weight: 700; border-radius: 999px;
  padding: 10px 20px; background: var(--roxo); color: #fff; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(91,43,224,.35); }
.btn-mini { padding: 8px 16px; font-size: .9rem; }
.btn-grande { padding: 14px 28px; font-size: 1.05rem; background: #fff; color: var(--roxo); }
.btn-claro { padding: 14px 28px; font-size: 1.05rem; background: var(--verde); }
.btn-claro:hover { box-shadow: 0 8px 20px rgba(31,168,85,.45); }

/* Hero */
.hero { background: linear-gradient(135deg, var(--roxo), var(--roxo-escuro), #b02be0); background-size: 200% 200%;
  animation: fluxo 10s ease infinite; color: #fff; text-align: center; padding: 70px 20px 80px; }
@keyframes fluxo { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero h1 { font-size: clamp(2rem, 7vw, 3.4rem); margin: 14px 0 8px; }
.hero p { font-size: 1.1rem; opacity: .92; max-width: 520px; margin: 0 auto 26px; }
.selo { display: inline-block; background: rgba(255,255,255,.18); padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; animation: pulsa 2s infinite; }
@keyframes pulsa { 50% { transform: scale(1.05); } }
.hero-botoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Benefícios */
.beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px;
  max-width: 960px; margin: -36px auto 0; padding: 0 20px; position: relative; }
.beneficio { background: #fff; border-radius: var(--raio); padding: 18px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.beneficio span { font-size: 1.8rem; display: block; }
.beneficio small { display: block; color: var(--suave); }

/* Vitrine */
.vitrine { max-width: 1100px; margin: 50px auto; padding: 0 20px; }
.vitrine h2, .como h2 { font-size: 1.7rem; margin-bottom: 16px; }
.ferramentas { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
#busca { width: 100%; padding: 13px 18px; border-radius: 999px; border: 2px solid #e1def0; font: inherit; outline: none; transition: border-color .2s; }
#busca:focus { border-color: var(--roxo); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro { border: 2px solid #e1def0; background: #fff; padding: 7px 16px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; transition: all .2s; }
.filtro:hover { border-color: var(--roxo); }
.filtro.ativo { background: var(--roxo); border-color: var(--roxo); color: #fff; }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.card { background: #fff; border-radius: var(--raio); overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.06);
  display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(91,43,224,.18); }
.card-visual { position: relative; height: 170px; display: grid; place-items: center; background: linear-gradient(135deg, #ece7ff, #f9e9ff); }
.card-visual img { width: 100%; height: 100%; object-fit: cover; }
.emoji { font-size: 4.2rem; transition: transform .3s; }
.card:hover .emoji { transform: scale(1.2) rotate(-6deg); }
.card-corpo { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.categoria { font-size: .75rem; font-weight: 700; color: var(--roxo); text-transform: uppercase; letter-spacing: .5px; }
.card h3 { font-size: 1.1rem; }
.card p { color: var(--suave); font-size: .92rem; flex: 1; }
.card-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.preco { font-size: 1.25rem; color: var(--verde-escuro); }
.btn-comprar { background: var(--verde); padding: 10px 16px; font-size: .88rem; }
.btn-comprar:hover { box-shadow: 0 8px 20px rgba(31,168,85,.4); }
.btn-comprar:disabled { background: #bbb; cursor: not-allowed; transform: none; box-shadow: none; }
.esgotado .card-visual { filter: grayscale(1); opacity: .7; }
.tag-esgotado { position: absolute; top: 10px; right: 10px; background: #e0245e; color: #fff; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.vazio { text-align: center; color: var(--suave); padding: 30px 0; }

/* Como comprar */
.como { max-width: 700px; margin: 60px auto; padding: 0 20px; text-align: center; }
.como ol { list-style: none; counter-reset: passo; display: grid; gap: 12px; text-align: left; }
.como li { counter-increment: passo; background: #fff; border-radius: var(--raio); padding: 16px 16px 16px 60px; position: relative; box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.como li::before { content: counter(passo); position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; background: var(--roxo); color: #fff; display: grid; place-items: center; font-weight: 800; }

.rodape { text-align: center; padding: 30px 20px 90px; color: var(--suave); font-size: .9rem; }

/* WhatsApp flutuante */
.zap-flutuante { position: fixed; right: 18px; bottom: 18px; width: 58px; height: 58px; border-radius: 50%; background: var(--verde);
  display: grid; place-items: center; font-size: 1.8rem; box-shadow: 0 6px 20px rgba(31,168,85,.55); z-index: 30; animation: balanca 3s infinite; }
@keyframes balanca { 0%,90%,100% { transform: scale(1); } 94% { transform: scale(1.18) rotate(-8deg); } 97% { transform: scale(1.18) rotate(8deg); } }

/* Animação ao rolar */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}