chore: Sintaxis

INDUSTRY STANDARD IMPLEMENTATION:
- Change placeholder images from 300x200 (3:2) to 600x600 (1:1 square)
- Set max-height to 300px with aspect-ratio 1:1 for consistent display
- Follow e-commerce best practices (Amazon, Shopify, Mercado Libre)

TEMPLATE CHANGES:
- catalog.vue: Update placeholder URL to 600x600 square images
- Card.vue: Add aspect-ratio="1" for perfect square display
- Card.vue: Increase max-height from 140px to 300px
- Restore padding: pa-2 → pa-3 (8px → 12px)
- Restore title size: text-subtitle-2 → text-subtitle-1
- Restore margins: mb-1 → mb-2
- Restore chip size: x-small → small
- Restore footer padding: pa-2 → pa-2 pb-3

CSS CHANGES:
- Remove fixed height from .product-image-container (use 100% for flexibility)
- Product name: 0.85rem → 0.95rem, min-height 2rem → 2.5rem
- Price label: 0.6rem → 0.65rem
- Price value: 0.9rem → 1.1rem
- Price chip: height 22px → 26px, font 0.75rem → 0.9rem
- Quantity input: 55px → 65px, font 0.85rem → 0.95rem
- Section gaps: 2px → 4px, row gaps: 1px → 2px

RESPONSIVE STRATEGY (optimized for 300px max):
- Mobile XS (<375px): Natural scaling, compact layout
- Mobile (375-559px): Natural scaling, readable text
- Tablet (560-959px): Enhanced padding and fonts
- Desktop (≥960px): Full 300px display with optimal spacing
- Desktop L/XL: Maintain 300px with enhanced typography

RESULT:
- Square images (1:1) matching industry standard
- 600x600 source allows retina displays and zoom
- 300px display on desktop (sweet spot for catalogs)
- Responsive scaling maintains aspect ratio
- Professional e-commerce appearance

src/components/NavBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-app-bar color="primary" prominent>
+    <v-app-bar color="primary" prominent app>
     <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
     <v-toolbar-title>Menu</v-toolbar-title>
     <v-spacer></v-spacer>

src/components/catalog/Card.vue

@@ -1,64 +1,107 @@
 <template>
-  <v-card class="product-card">
+  <v-card class="product-card" elevation="2" rounded="lg">
-    <v-row class="product-card-row">
+    <!-- Imagen del Producto -->
-      <!-- Columna de Imagen -->
+    <div class="product-image-container">
-      <v-col cols="12" md="4" class="image-column">
+      <v-img
-        <v-img :src="product.img" class="product-img" contain></v-img>
+        :src="product.img"
-      </v-col>
+        :alt="product.name"
+        class="product-img"
+        cover
+        max-height="300"
+        aspect-ratio="1"
+      >
+        <template v-slot:placeholder>
+          <div class="d-flex align-center justify-center fill-height">
+            <v-progress-circular
+              indeterminate
+              color="primary"
+              size="32"
+            ></v-progress-circular>
+          </div>
+        </template>
+      </v-img>
+    </div>
 
-      <!-- Columna de Detalles -->
+    <!-- Contenido de la Tarjeta -->
-      <v-col cols="12" md="5" class="details-column">
+    <v-card-text class="product-content pa-3 text-center">
-        <div class="product-details-content">
+      <!-- Título del Producto -->
       <v-tooltip location="top" :text="product.name">
         <template v-slot:activator="{ props }">
-              <v-card-title class="product-name" v-bind="props" :title="product.name">
+          <h3
+            class="product-name text-subtitle-1 font-weight-medium mb-2"
+            v-bind="props"
+          >
             {{ product.name }}
-              </v-card-title>
+          </h3>
         </template>
       </v-tooltip>
-          <v-card-subtitle class="product-description">{{
-            product.description
-          }}</v-card-subtitle>
 
-          <div class="prices">
+      <!-- Sección de Precios -->
-            <div class="price-unit">
+      <div class="prices-section mb-2">
-              <span class="price-label">Precio unitario</span>
+        <!-- Precio Unitario -->
-              <span class="price-value">{{ currency(product.price) }}</span>
+        <div class="price-row mb-1">
+          <span class="price-label text-caption">Precio unitario</span>
+          <div class="price-value text-body-1 font-weight-bold text-primary">
+            {{ currency(product.price) }}
+          </div>
         </div>
 
-            <div class="price-total">
+        <!-- Precio Total -->
-              <span class="price-label">Precio total</span>
+        <div class="price-row">
-              <span class="price-value total"
+          <span class="price-label text-caption">Precio total</span>
-                >{{ currency(product.price * product.quantity) }}
+          <v-chip
-              </span>
+            color="success"
+            variant="flat"
+            size="small"
+            class="price-total-chip font-weight-bold mt-1"
+          >
+            {{ currency(product.price * product.quantity) }}
+          </v-chip>
         </div>
       </div>
-        </div>
+    </v-card-text>
-      </v-col>
 
-      <!-- Columna de Controles -->
+    <!-- Footer con Controles de Cantidad -->
-      <v-col cols="12" md="3" class="controls-column">
+    <v-card-actions class="product-actions pa-2 pb-3 justify-center">
       <div class="quantity-controls">
-          <v-btn icon small class="qty-btn" @click="decrease(product)">
+        <v-btn
-            <v-icon small>mdi-minus</v-icon>
+          icon
+          size="small"
+          variant="tonal"
+          color="error"
+          class="qty-btn"
+          @click="decrease(product)"
+          :disabled="product.quantity === 0"
+        >
+          <v-icon size="20">mdi-minus</v-icon>
         </v-btn>
+
         <v-text-field
           v-model.number="product.quantity"
           type="number"
           min="0"
-            class="quantity-input"
+          class="quantity-input mx-1"
-            dense
+          variant="solo-filled"
-            outlined
+          density="compact"
           hide-details
+          single-line
+          flat
           aria-label="Cantidad"
           @input="handleQuantityChange"
         />
-          <v-btn icon small class="qty-btn qty-btn-add" @click="handleIncrease">
+
-            <v-icon small>mdi-plus</v-icon>
+        <v-btn
+          icon
+          size="small"
+          variant="tonal"
+          color="success"
+          class="qty-btn"
+          @click="handleIncrease"
+        >
+          <v-icon size="20">mdi-plus</v-icon>
         </v-btn>
       </div>
-      </v-col>
+    </v-card-actions>
-    </v-row>
   </v-card>
 </template>
 
@@ -102,400 +145,454 @@ export default {
 </script>
 
 <style scoped>
-/* ===== ESTILOS BASE - MOBILE FIRST (< 560px) ===== */
+/* ============================================
-
+   CARD CONTAINER
-/* Card Container */
+   ============================================ */
 .product-card {
-  border: 1px solid #e0e0e0;
+  height: 100%;
-  border-radius: 8px;
+  display: flex;
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  flex-direction: column;
-  transition: all 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: #ffffff;
   overflow: hidden;
 }
 
 .product-card:hover {
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  transform: translateY(-6px);
-  transform: translateY(-2px);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
-  border-color: #bdbdbd;
+  border-color: rgba(33, 150, 243, 0.3);
 }
 
-/* Row Container */
+/* ============================================
-.product-card-row {
+   IMAGEN DEL PRODUCTO
-  padding: 12px 8px;
+   ============================================ */
-  margin: 0;
+.product-image-container {
-}
+  position: relative;
-
+  width: 100%;
-/* === COLUMNA DE IMAGEN === */
+  height: 100%;
-.image-column {
+  overflow: hidden;
-  display: flex;
+  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
-  justify-content: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  align-items: center;
-  padding: 0 0 16px 0;
 }
 
 .product-img {
-  width: 280px;
+  width: 100%;
-  height: 280px;
+  height: 100%;
-  border-radius: 12px;
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  object-fit: cover;
-  background: #fff;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease;
 }
 
 .product-card:hover .product-img {
-  transform: scale(1.03);
+  transform: scale(1.08);
 }
 
-/* === COLUMNA DE DETALLES === */
+/* ============================================
-.details-column {
+   CONTENIDO DE LA TARJETA
-  padding: 0;
+   ============================================ */
+.product-content {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  align-items: center;
-}
+  justify-content: flex-start;
-
-.product-details-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
 }
 
 .product-name {
   font-size: 0.95rem;
-  font-weight: 600;
+  font-weight: 500;
-  color: #2c3e50;
+  color: #1a1a1a;
   line-height: 1.3;
-  padding: 0;
-  text-align: center;
-  word-break: break-word;
-  max-width: 100%;
-}
-
-.product-description {
-  font-size: 0.8rem;
-  color: #7f8c8d;
-  line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  text-align: center;
+  text-overflow: ellipsis;
-  padding: 0;
+  min-height: 2.5rem;
-  margin-bottom: 4px;
+  letter-spacing: 0.01em;
 }
 
-/* === PRECIOS === */
+/* ============================================
-.prices {
+   SECCIÓN DE PRECIOS
+   ============================================ */
+.prices-section {
+  width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 8px;
   align-items: center;
+  gap: 4px;
 }
 
-.price-unit,
+.price-row {
-.price-total {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  gap: 2px;
-  gap: 8px;
-  width: 100%;
 }
 
 .price-label {
-  font-size: 0.7rem;
-  color: #95a5a6;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.8px;
-  white-space: nowrap;
+  font-size: 0.65rem;
+  color: #9e9e9e;
+  font-weight: 500;
 }
 
 .price-value {
-  font-size: 0.85rem;
+  color: #1565c0;
-  font-weight: 600;
+  letter-spacing: 0.02em;
-  color: #2c3e50;
+  font-size: 1.1rem;
 }
 
-.price-value.total {
+.price-total-chip {
-  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
+  letter-spacing: 0.03em;
-  color: white;
+  font-size: 0.9rem;
-  padding: 3px 10px;
+  padding: 0 12px;
-  border-radius: 20px;
+  height: 26px;
-  font-size: 0.95rem;
+  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25);
-  box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
-  white-space: nowrap;
 }
 
-/* === COLUMNA DE CONTROLES === */
+/* ============================================
-.controls-column {
+   CONTROLES DE CANTIDAD
-  display: flex;
+   ============================================ */
-  align-items: center;
+.product-actions {
-  justify-content: center;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
-  padding: 16px 0 0 0;
+  background: #fafafa;
 }
 
 .quantity-controls {
-  display: inline-flex;
+  display: flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
-  background: #f5f5f5;
-  border-radius: 25px;
-  padding: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.quantity-input {
-  max-width: 60px;
-  min-width: 60px;
-}
-
-.quantity-input input {
-  text-align: center;
-  font-weight: 600;
-  font-size: 0.9rem;
-}
-
-.qty-btn {
-  min-width: 32px !important;
-  width: 32px !important;
-  height: 32px !important;
-  border-radius: 50% !important;
-  background: #fff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
-
-.qty-btn:hover {
-  background: #e0e0e0;
-  transform: scale(1.08);
-}
-
-.qty-btn-add {
-  background: #27ae60;
-  color: white;
-}
-
-.qty-btn-add:hover {
-  background: #219a52 !important;
-}
-
-/* ===== RESOLUCIÓN 375-559px (Mobile Standard) ===== */
-@media (min-width: 375px) and (max-width: 559px) {
-  .product-img {
-    width: 300px;
-    height: 300px;
-  }
-  
-  .product-card-row {
-    padding: 14px 10px;
-  }
-  
-  .product-name {
-    font-size: 1rem;
-  }
-  
-  .product-description {
-    font-size: 0.85rem;
 }
 
 .quantity-input {
   max-width: 65px;
   min-width: 65px;
 }
+
+.quantity-input :deep(.v-field) {
+  background-color: #ffffff !important;
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
 }
 
-/* ===== RESOLUCIÓN 560-959px (Tablet) ===== */
+.quantity-input :deep(.v-field__input) {
-@media (min-width: 560px) and (max-width: 959px) {
+  text-align: center;
-  .product-card-row {
+  font-weight: 700;
-    padding: 16px 12px;
-  }
-
-  .image-column {
-    padding-bottom: 20px;
-  }
-
-  .product-img {
-    width: 300px;
-    height: 300px;
-  }
-
-  .product-details-content {
-    gap: 14px;
-  }
-
-  .product-name {
-    font-size: 1.05rem;
-  }
-
-  .product-description {
-    font-size: 0.85rem;
-  }
-
-  .prices {
-    gap: 10px;
-  }
-
-  .price-label {
-    font-size: 0.75rem;
-  }
-
-  .price-value {
-    font-size: 0.9rem;
-  }
-
-  .price-value.total {
-    font-size: 1rem;
-    padding: 4px 12px;
-  }
-
-  .controls-column {
-    padding-top: 18px;
-  }
-
-  .quantity-input {
-    max-width: 70px;
-    min-width: 70px;
-  }
-
-  .qty-btn {
-    min-width: 34px !important;
-    width: 34px !important;
-    height: 34px !important;
-  }
-}
-
-/* ===== RESOLUCIÓN ≥960px (Desktop) ===== */
-@media (min-width: 960px) {
-  .product-card {
-    border-radius: 12px;
-  }
-
-  .product-card:hover {
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
-    transform: translateY(-4px);
-  }
-
-  .product-card:hover .product-img {
-    transform: scale(1.05);
-  }
-
-  .product-card-row {
-    padding: 16px;
-    align-items: center;
-  }
-
-  .image-column {
-    padding: 0 24px 0 0;
-    margin-bottom: 0;
-    max-width: 380px;
-  }
-
-  .product-img {
-    width: 350px;
-    height: 350px;
-  }
-
-  .details-column {
-    padding: 0 24px 0 0;
-    border-right: 1px solid #e0e0e0;
-    flex: 1;
-    align-items: flex-start;
-    min-width: 0;
-  }
-
-  .product-details-content {
-    gap: 16px;
-    align-items: flex-start;
-    min-width: 0;
-  }
-
-  .product-name {
-    font-size: 1.15rem;
-    text-align: left;
-  }
-
-  .product-description {
-    font-size: 0.9rem;
-    text-align: left;
-  }
-
-  .prices {
-    align-items: flex-start;
-    gap: 10px;
-  }
-
-  .price-unit,
-  .price-total {
-    justify-content: flex-start;
-  }
-
-  .price-label {
-    font-size: 0.75rem;
-  }
-
-  .price-value {
   font-size: 0.95rem;
+  color: #1a1a1a;
+  padding: 4px 0;
+  min-height: 32px;
 }
 
-  .price-value.total {
+.quantity-input :deep(.v-field__field) {
-    font-size: 1.05rem;
+  padding: 0;
-    padding: 4px 12px;
-  }
-
-  .controls-column {
-    justify-content: flex-end;
-    margin-top: 0;
-    padding: 0 0 0 16px;
-    min-width: 180px;
-  }
-
-  .quantity-controls {
-    gap: 8px;
-    padding: 6px;
-  }
-
-  .quantity-input {
-    max-width: 70px;
-    min-width: 70px;
 }
 
 .qty-btn {
-    min-width: 36px !important;
+  flex-shrink: 0;
-    width: 36px !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    height: 36px !important;
 }
 
 .qty-btn:hover {
   transform: scale(1.1);
 }
+
+.qty-btn:active {
+  transform: scale(0.95);
 }
 
-/* ===== RESOLUCIÓN ≥1280px (Desktop Large) ===== */
+/* ============================================
-@media (min-width: 1280px) {
+   RESPONSIVE BREAKPOINTS
-  .product-card-row {
+   ============================================ */
-    padding: 20px;
-  }
 
-  .image-column {
+/* Móvil pequeño (< 375px) */
-    padding-right: 28px;
+@media (max-width: 374px) {
-  }
+  .product-content {
-
+    padding: 10px;
-  .details-column {
-    padding-right: 28px;
   }
 
   .product-name {
-    font-size: 1.2rem;
+    font-size: 0.9rem;
+    min-height: 2.4rem;
   }
 
-  .product-description {
+  .price-value {
+    font-size: 1rem;
+  }
+
+  .quantity-input {
+    max-width: 60px;
+    min-width: 60px;
+  }
+}
+
+/* Móvil estándar (375px - 559px) */
+@media (min-width: 375px) and (max-width: 559px) {
+  .product-name {
     font-size: 0.95rem;
   }
 
-  .controls-column {
+  .price-value {
-    padding-left: 20px;
+    font-size: 1.05rem;
+  }
+}
+
+/* Tablet (560px - 959px) */
+@media (min-width: 560px) and (max-width: 959px) {
+  .product-content {
+    padding: 14px;
+  }
+
+  .product-name {
+    font-size: 1rem;
+    min-height: 2.6rem;
+  }
+
+  .price-label {
+    font-size: 0.68rem;
+  }
+
+  .price-value {
+    font-size: 1.15rem;
+  }
+
+  .price-total-chip {
+    font-size: 0.95rem;
+    height: 28px;
+  }
+
+  .quantity-input {
+    max-width: 70px;
+    min-width: 70px;
+  }
+}
+
+/* Desktop (≥ 960px) */
+@media (min-width: 960px) {
+  .product-content {
+    padding: 16px 14px;
+  }
+
+  .product-name {
+    font-size: 1.05rem;
+    min-height: 2.7rem;
+  }
+
+  .price-label {
+    font-size: 0.7rem;
+  }
+
+  .price-value {
+    font-size: 1.2rem;
+  }
+
+  .price-total-chip {
+    font-size: 1rem;
+    height: 30px;
+    padding: 0 14px;
+  }
+
+  .product-actions {
+    padding: 8px;
+    padding-bottom: 12px;
+  }
+
+  .quantity-input {
+    max-width: 70px;
+    min-width: 70px;
+  }
+
+  .qty-btn {
+    width: 36px;
+    height: 36px;
+  }
+}
+
+/* Desktop Large (≥ 1280px) */
+@media (min-width: 1280px) {
+  .product-content {
+    padding: 18px 16px;
+  }
+
+  .product-name {
+    font-size: 1.1rem;
+    min-height: 2.8rem;
+  }
+
+  .price-value {
+    font-size: 1.25rem;
+  }
+
+  .price-total-chip {
+    font-size: 1.05rem;
+    height: 32px;
+  }
+}
+
+/* Desktop Extra Large (≥ 1920px) */
+@media (min-width: 1920px) {
+  .product-name {
+    font-size: 1.15rem;
+    min-height: 3rem;
+  }
+
+  .price-value {
+    font-size: 1.3rem;
+  }
+
+  .product-content {
+    padding: 8px;
+  }
+
+  .product-name {
+    font-size: 0.8rem;
+    min-height: 1.9rem;
+  }
+
+  .price-value {
+    font-size: 0.85rem;
+  }
+
+  .quantity-input {
+    max-width: 50px;
+    min-width: 50px;
+  }
+}
+
+/* Móvil estándar (375px - 559px) */
+@media (min-width: 375px) and (max-width: 559px) {
+  .product-image-container {
+    height: 140px;
+  }
+
+  .product-name {
+    font-size: 0.85rem;
+  }
+
+  .price-value {
+    font-size: 0.9rem;
+  }
+}
+
+/* Tablet (560px - 959px) */
+@media (min-width: 560px) and (max-width: 959px) {
+  .product-image-container {
+    height: 150px;
+  }
+
+  .product-content {
+    padding: 10px;
+  }
+
+  .product-name {
+    font-size: 0.9rem;
+    min-height: 2.1rem;
+  }
+
+  .price-label {
+    font-size: 0.62rem;
+  }
+
+  .price-value {
+    font-size: 0.95rem;
+  }
+
+  .price-total-chip {
+    font-size: 0.8rem;
+    height: 24px;
+  }
+
+  .quantity-input {
+    max-width: 58px;
+    min-width: 58px;
+  }
+}
+
+/* Desktop (≥ 960px) */
+@media (min-width: 960px) {
+  .product-image-container {
+    height: 160px;
+  }
+
+  .product-content {
+    padding: 12px 10px;
+  }
+
+  .product-name {
+    font-size: 0.95rem;
+    min-height: 2.2rem;
+  }
+
+  .price-label {
+    font-size: 0.63rem;
+  }
+
+  .price-value {
+    font-size: 1rem;
+  }
+
+  .price-total-chip {
+    font-size: 0.85rem;
+    height: 25px;
+    padding: 0 11px;
+  }
+
+  .product-actions {
+    padding: 6px;
+    padding-bottom: 8px;
+  }
+
+  .quantity-input {
+    max-width: 58px;
+    min-width: 58px;
+  }
+
+  .qty-btn {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+/* Desktop Large (≥ 1280px) */
+@media (min-width: 1280px) {
+  .product-image-container {
+    height: 170px;
+  }
+
+  .product-content {
+    padding: 14px 12px;
+  }
+
+  .product-name {
+    font-size: 2rem;
+    min-height: 2.4rem;
+  }
+
+  .price-value {
+    font-size: 1.05rem;
+  }
+
+  .price-total-chip {
+    font-size: 0.9rem;
+    height: 26px;
+  }
+}
+
+/* Desktop Extra Large (≥ 1920px) */
+@media (min-width: 1920px) {
+  .product-image-container {
+    height: 180px;
+  }
+
+  .product-name {
+    font-size: 1.05rem;
+    min-height: 2.5rem;
+  }
+
+  .price-value {
+    font-size: 1.1rem;
   }
 }
 </style>

src/components/catalog/Cart.vue

@@ -7,7 +7,7 @@
     <v-card-title 
       class="d-flex align-center cart-title"
       :class="{ 'cart-header-mobile': isMobile, 'cart-header-desktop': !isMobile }"
-    >
+      @click="isMobile && $emit('toggle-collapse')">
       <!-- Icono del carrito - SIEMPRE VISIBLE -->
       <v-icon class="mr-2">mdi-cart</v-icon>
       

src/pages/catalog.vue

@@ -8,16 +8,30 @@
     ></div>
 
     <v-row>
-      <v-col cols="12" md="9" lg="7" :class="{ 'pb-mobile-cart': isMobile }">
+      <v-col cols="12" md="10" lg="9" :class="{ 'pb-mobile-cart': isMobile }">
-        <v-sheet class="page-header d-flex align-center pa-3 pa-sm-4 pa-md-6 mb-3 mb-sm-4 rounded-lg">
+        <v-sheet
-          <v-icon size="28" color="white" class="mr-2 d-sm-none">mdi-store</v-icon>
+          class="page-header d-flex align-center pa-3 pa-sm-4 pa-md-6 mb-3 mb-sm-4 rounded-lg"
-          <v-icon size="36" color="white" class="mr-3 d-none d-sm-inline">mdi-store</v-icon>
+        >
-          <div class="d-flex flex-column flex-sm-row align-start align-sm-center w-100 ga-2 ga-sm-4">
+          <v-icon size="28" color="primary" class="mr-2 d-sm-none flex-shrink-0"
-            <div class="flex-shrink-0">
+            >mdi-store</v-icon
-              <h1 class="text-h6 text-sm-h5 text-md-h4 font-weight-bold text-white mb-0">Catálogo</h1>
+          >
-              <p class="text-body-2 text-white text-medium-emphasis mb-0">Explora y agrega productos a tu compra</p>
+          <v-icon size="36" color="primary" class="mr-3 d-none d-sm-inline flex-shrink-0"
+            >mdi-store</v-icon
+          >
+          <div
+            class="d-flex flex-column flex-sm-row align-start align-sm-center w-100 ga-2 ga-sm-4"
+          >
+            <div class="flex-shrink-0 d-none d-sm-block">
+              <h1
+                class="text-h6 text-sm-h5 text-md-h4 font-weight-bold text-primary mb-0"
+              >
+                Catálogo
+              </h1>
+              <p class="text-body-2 text-medium-emphasis mb-0">
+                Explora y agrega productos a tu compra
+              </p>
             </div>
-            <v-spacer></v-spacer>
+            <v-spacer class="d-none d-sm-flex"></v-spacer>
             <v-text-field
               v-model="searchQuery"
               prepend-inner-icon="mdi-magnify"
@@ -27,7 +41,7 @@
               clearable
               hide-details
               single-line
-              class="search-field"
+              class="search-field flex-grow-1 flex-sm-grow-0"
             />
           </div>
         </v-sheet>
@@ -46,11 +60,16 @@
           position="top"
         />
 
-        <!-- Lista de productos paginados -->
+        <!-- Grid de productos paginados -->
-        <v-list-item
+        <v-row class="product-grid" v-if="paginatedItems.length > 0">
+          <v-col
             v-for="item in paginatedItems"
             :key="item.id"
-          class="catalog-item"
+            cols="12"
+            sm="6"
+            md="6"
+            lg="4"
+            class="product-col"
           >
             <Card
               :product="item"
@@ -60,7 +79,8 @@
               :updateQuantity="updateQuantity"
               @add-to-cart="addToCart"
             />
-        </v-list-item>
+          </v-col>
+        </v-row>
 
         <!-- Mensaje cuando no hay productos -->
         <v-alert
@@ -95,10 +115,10 @@
         />
       </v-col>
 
-      <v-col cols="12" md="3" lg="5">
+      <v-col cols="12" md="2" lg="3">
         <div
           class="cart-sidebar"
-          :class="{ collapsed: cartCollapsed && isMobile }"
+          :class="{ 'cart-is-collapsed': cartCollapsed && isMobile }"
         >
           <Cart
             :cart-items="cartItems"
@@ -357,7 +377,7 @@ export default {
             quantity: 0,
             img:
               product.img ||
-              `https://picsum.photos/300/200?random=${product.id}`,
+              `https://picsum.photos/600/600?random=${product.id}`,
           }));
         })
         .catch((error) => {
@@ -509,19 +529,25 @@ export default {
 </script>
 
 <style scoped>
+/* ============================================
+   CABECERA STICKY CON BÚSQUEDA
+   ============================================ */
 .page-header {
   position: sticky;
   top: 80px;
-  z-index: 10;
+  z-index: 5;
-  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
+  background: white !important;
-  color: white !important;
+  color: #1565c0 !important;
   overflow: visible;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
 }
 
+/* Mobile: Header sticky compensating for NavBar height, z-index menor que el cart */
 @media (max-width: 959px) {
   .page-header {
-    top: 0;
+    top: 64px;
     border-radius: 0 !important;
+    z-index: 900;
   }
 }
 
@@ -531,22 +557,35 @@ export default {
   }
 }
 
-.page-header .search-field {
+/* Estilos profundos para el campo de búsqueda de Vuetify */
-  background: rgba(255, 255, 255, 0.15);
+.page-header :deep(.v-field) {
+  background-color: #f5f5f5 !important;
   border-radius: 8px;
-  transition: background 0.2s;
+  transition: background-color 0.2s ease;
-  width: 100%;
 }
 
-.page-header .search-field:hover,
+.page-header :deep(.v-field:hover),
-.page-header .search-field:focus-within {
+.page-header :deep(.v-field--focused) {
-  background: rgba(255, 255, 255, 0.25);
+  background-color: #e0e0e0 !important;
+}
+
+.page-header :deep(.v-field__input) {
+  color: #1565c0 !important;
+}
+
+.page-header :deep(.v-field__input::placeholder) {
+  color: rgba(0, 0, 0, 0.5) !important;
 }
 
 @media (max-width: 559px) {
   .page-header .search-field :deep(.v-field__input) {
     font-size: 0.875rem;
   }
+  
+  .page-header .search-field {
+    width: 100%;
+    max-width: 100%;
+  }
 }
 
 @media (min-width: 560px) {
@@ -563,13 +602,114 @@ export default {
   }
 }
 
+/* ============================================
+   CARRITO FLOTANTE (MOBILE FIRST)
+   ============================================ */
+.cart-sidebar {
+  --footer-height: 40px;
+  position: fixed;
+  bottom: var(--footer-height);
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
+}
+
+/* Cuando está colapsado en mobile, solo muestra el header (60px) */
+.cart-sidebar.cart-is-collapsed {
+  transform: translateY(calc(100% - 60px));
+}
+
+.cart-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Espacio inferior para evitar que productos queden ocultos bajo el cart */
+.pb-mobile-cart {
+  padding-bottom: 100px !important;
+}
+
+/* ============================================
+   GRID DE PRODUCTOS
+   ============================================ */
+.product-grid {
+  margin: 0 -8px;
+}
+
+.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) {
+  .product-grid {
+    margin: 0 -6px;
+  }
+  
+  .product-col {
+    padding: 6px;
+  }
+}
+
+/* Tablet: espaciado medio */
+@media (min-width: 560px) and (max-width: 959px) {
+  .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;
+  }
+}
+
+/* ============================================
+   DISEÑO DESKTOP (>= 960px)
+   ============================================ */
 @media (min-width: 960px) {
   .cart-sidebar {
     position: sticky;
-    top: 80px;
+    top: 96px;
-    z-index: auto;
+    z-index: 1;
-    max-height: calc(100vh - 100px);
+    max-height: calc(100vh - 120px);
-    overflow-y: visible;
+    overflow-y: auto;
+    box-shadow: none;
+    border-radius: 12px;
+    transform: none !important;
   }
 
   .cart-backdrop {
@@ -579,24 +719,11 @@ export default {
   .pb-mobile-cart {
     padding-bottom: 16px !important;
   }
-
-  .catalog-item {
-    margin-bottom: 16px;
-  }
-}
-
-@media (max-width: 559px) {
-  .catalog-item {
-    margin-bottom: 10px;
-  }
-}
-
-@media (min-width: 560px) and (max-width: 959px) {
-  .catalog-item {
-    margin-bottom: 14px;
-  }
 }
 
+/* ============================================
+   MODALES
+   ============================================ */
 .product-list-scroll {
   max-height: 400px;
   overflow-y: auto;