/* ============================================================
   Responsivo
   ============================================================ */

@media (max-width: 1024px) {
  .secao { padding: 72px 0; }
  .hero-grid { gap: 36px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .produtos-grid { grid-template-columns: repeat(2, 1fr); }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .passo .seta { display: none; }
  .sobre-valores { gap: 12px; }
}

@media (max-width: 860px) {
  .nav, .header .btn-wpp.desktop { display: none; }
  .menu-toggle { display: inline-flex; }

  .hero { padding: 48px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 440px; margin: 8px auto 0; order: -1; }
  .hero-mini { gap: 20px; }

  .sobre-grid { grid-template-columns: 1fr; gap: 44px; }
  .sobre-foto { max-width: 380px; margin-inline: auto; }
  .sobre-foto .selo-flutua { right: 0; }

  .destaque-grid { grid-template-columns: 1fr; gap: 40px; }
  .destaque-foto { max-width: 420px; margin-inline: auto; order: -1; }

  .contato-card { grid-template-columns: 1fr; gap: 34px; padding: 40px 30px; text-align: center; }
  .contato-card .head-left { display: flex; flex-direction: column; align-items: center; }
  .canal { text-align: left; }
}

@media (max-width: 560px) {
  .container { padding-inline: 18px; }
  .secao { padding: 58px 0; }
  .header-inner { height: 72px; }
  .brand img { width: 46px; height: 46px; }
  .brand-name { font-size: 1.4rem; }

  .cat-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .cat-card .cat-conteudo h3 { font-size: 1.35rem; }
  .cat-card .cat-conteudo { padding: 18px 16px; }

  .produtos-grid { grid-template-columns: 1fr; gap: 20px; }
  .filtros { gap: 9px; }
  .filtro-btn { font-size: .86rem; padding: 9px 16px; }

  .passos { grid-template-columns: 1fr; }
  .sobre-valores { grid-template-columns: 1fr; }
  .valor-card { display: flex; align-items: center; gap: 16px; text-align: left; padding: 16px; }
  .valor-card .ico { margin: 0; flex: none; }

  .aviso-confianca { flex-direction: column; text-align: center; }

  .hero-badge-amor { left: 0; }
  .fab-wpp { width: 56px; height: 56px; right: 18px; bottom: 18px; }

  .footer-links { gap: 16px; }
}

/* Telas muito pequenas (320–375px) */
@media (max-width: 375px) {
  /* Garante que a bolha de preço do cupuaçu não toque a borda da seção */
  .destaque-foto .preco-bolha { left: -8px; }
}

/* Animações de entrada por scroll — só escondem quando o JS está ativo */
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.visivel { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .fab-wpp, .hero-selo { animation: none; }
  html { scroll-behavior: auto; }
}