Todos los cafes

<style>
  .grupo-filtros {
    text-align: center;
    margin-bottom: 30px;
  }
  .filtro-btn {
    display: inline-block;
    padding: 10px 16px;
    margin: 5px;
    font-size: 15px;
    border: none;
    border-radius: 30px;
    background-color: #f0f0f0;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: all 0.25s ease;
  }
  .filtro-btn.active,
  .filtro-btn:hover {
    background-color: #ffd54f;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  .grid-productos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
  .producto {
    width: 280px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fff;
    transition: 0.3s ease;
  }
  .producto.oculto {
    display: none;
  }
</style>

<div class="grupo-filtros">
  <button class="filtro-btn active" onclick="filtrarGrupo('todos')">☕ Todos</button>
  <button class="filtro-btn" onclick="filtrarGrupo('grupo-recienmolidos')">🌱 Recién Molidos</button>
  <button class="filtro-btn" onclick="filtrarGrupo('grupo-filtrofijo')">✨ Filtro Fijo</button>
  <button class="filtro-btn" onclick="filtrarGrupo('grupo-catadores')">🎯 Catadores de la Casa</button>
</div>

<div class="grid-productos">
  <!-- Ejemplo 1: Producto Recién Molidos -->
  <div class="producto grupo-recienmolidos">
    <h3>Marthina & Roberta</h3>
    <p>Blend dulce de Antioquia</p>
    <a href="/products/marthina-roberta">Ver producto</a>
  </div>

  <!-- Ejemplo 2: Producto Filtro Fijo -->
  <div class="producto grupo-filtrofijo">
    <h3>Luisa Elena</h3>
    <p>Pink Bourbon lavado – Palestina, Huila</p>
    <a href="/products/luisa-elena">Ver producto</a>
  </div>

  <!-- Ejemplo 3: Producto Catadores -->
  <div class="producto grupo-catadores">
    <h3>Tía Vita</h3>
    <p>Caturra Natural – Ciudad Bolívar</p>
    <a href="/products/tia-vita">Ver producto</a>
  </div>

  <!-- Podés seguir copiando bloques como este y asignarles su clase correspondiente -->
</div>

<script>
  function filtrarGrupo(grupo) {
    const productos = document.querySelectorAll('.producto');
    const botones = document.querySelectorAll('.filtro-btn');

    botones.forEach(btn => btn.classList.remove('active'));
    event.target.classList.add('active');

    productos.forEach(p => {
      if (grupo === 'todos') {
        p.classList.remove('oculto');
      } else {
        p.classList.toggle('oculto', !p.classList.contains(grupo));
      }
    });
  }
</script>