/* ══════════════════════════════════════════
   css/productos.css — Estilos para el Catálogo de Productos
   ══════════════════════════════════════════ */

.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.card-producto {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-producto:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.12);
}