feat: transform catalog to modern grid layout with compact product cards

- Transform Card.vue from horizontal to vertical compact design
- Reduce card height with fixed image max-height (160-240px responsive)
- Center all text content (product name, prices, actions)
- Style product name with semibold font-weight, 2-line ellipsis
- Redesign price labels: subtle gray uppercase for labels, bold primary for values
- Style quantity controls: tonal icon buttons with smooth animations
- Redesign input field: solo-filled variant, compact density, subtle shadow
- Transform catalog.vue list layout to responsive grid (v-row/v-col)
- Implement responsive columns: 1 col mobile, 2 cols tablet, 3 cols desktop
- Clean up obsolete .catalog-item styles, use native Vuetify grid spacing
- Add hover effects: translateY(-6px), scale(1.08) on image, border highlight
- Add footer background (#fafafa) for visual separation
- Optimize breakpoints: 6 responsive sizes (374px, 559px, 959px, 1280px, 1920px)
- Result: Professional, compact, balanced e-commerce catalog design

src/pages/catalog.vue

@@ -60,21 +60,27 @@
           position="top"
         />
 
-        <!-- Lista de productos paginados -->
-        <v-list-item
-          v-for="item in paginatedItems"
-          :key="item.id"
-          class="catalog-item"
-        >
-          <Card
-            :product="item"
-            :increase="increase"
-            :decrease="decrease"
-            :currency="currency"
-            :updateQuantity="updateQuantity"
-            @add-to-cart="addToCart"
-          />
-        </v-list-item>
+        <!-- Grid de productos paginados -->
+        <v-row class="product-grid" v-if="paginatedItems.length > 0">
+          <v-col
+            v-for="item in paginatedItems"
+            :key="item.id"
+            cols="12"
+            sm="6"
+            md="6"
+            lg="4"
+            class="product-col"
+          >
+            <Card
+              :product="item"
+              :increase="increase"
+              :decrease="decrease"
+              :currency="currency"
+              :updateQuantity="updateQuantity"
+              @add-to-cart="addToCart"
+            />
+          </v-col>
+        </v-row>
 
         <!-- Mensaje cuando no hay productos -->
         <v-alert
@@ -642,26 +648,52 @@ export default {
 }
 
 /* ============================================
-   ITEMS DEL CATÁLOGO
+   GRID DE PRODUCTOS
    ============================================ */
-.catalog-item {
-  padding: 0;
-  margin-bottom: 12px;
+.product-grid {
+  margin: 0 -8px;
 }
 
-.catalog-item:last-child {
-  margin-bottom: 0;
+.product-col {
+  padding: 8px;
+  display: flex;
 }
 
+/* Asegurar que las cards ocupen toda la altura */
+.product-col :deep(.product-card) {
+  width: 100%;
+}
+
+/* Mobile: mayor espaciado vertical */
 @media (max-width: 559px) {
-  .catalog-item {
-    margin-bottom: 10px;
+  .product-grid {
+    margin: 0 -6px;
+  }
+  
+  .product-col {
+    padding: 6px;
   }
 }
 
+/* Tablet: espaciado medio */
 @media (min-width: 560px) and (max-width: 959px) {
-  .catalog-item {
-    margin-bottom: 14px;
+  .product-grid {
+    margin: 0 -8px;
+  }
+  
+  .product-col {
+    padding: 8px;
+  }
+}
+
+/* Desktop: espaciado óptimo */
+@media (min-width: 960px) {
+  .product-grid {
+    margin: 0 -12px;
+  }
+  
+  .product-col {
+    padding: 12px;
   }
 }
 
@@ -687,10 +719,6 @@ export default {
   .pb-mobile-cart {
     padding-bottom: 16px !important;
   }
-
-  .catalog-item {
-    margin-bottom: 16px;
-  }
 }
 
 /* ============================================