diff --git a/app/tienda/[slug]/producto/[productId]/page.tsx b/app/tienda/[slug]/producto/[productId]/page.tsx
index 7b33604..17c5a8f 100644
--- a/app/tienda/[slug]/producto/[productId]/page.tsx
+++ b/app/tienda/[slug]/producto/[productId]/page.tsx
@@ -48,6 +48,32 @@ export default async function ProductoDetallePage(props: {
     })),
   }
 
+  const recommended = await prisma.product.findMany({
+    where: {
+      companyId: company.id,
+      id: { not: productId },
+      deletedAt: null,
+      isActive: true,
+      isPublic: true,
+    },
+    include: {
+      images: {
+        where: { deletedAt: null },
+        orderBy: { order: 'asc' },
+      },
+    },
+    take: 8,
+    orderBy: { name: 'asc' },
+  })
+
+  const serializedRecommended = recommended.map((p) => ({
+    id: p.id,
+    name: p.name,
+    salePrice: Number(p.salePrice),
+    currentStock: Number(p.currentStock),
+    images: (p.images || []).map((i) => ({ url: i.url, publicId: i.publicId })),
+  }))
+
   const companyInfo = {
     name: company.name,
     slug: company.slug,
@@ -55,5 +81,5 @@ export default async function ProductoDetallePage(props: {
     whatsapp: company.whatsapp,
   }
 
-  return <ProductoDetalleClient product={serialized} company={companyInfo} />
+  return <ProductoDetalleClient product={serialized} company={companyInfo} recommended={serializedRecommended} />
 }
diff --git a/app/tienda/[slug]/producto/[productId]/producto-detalle-client.tsx b/app/tienda/[slug]/producto/[productId]/producto-detalle-client.tsx
index 4be285c..c3dbbb1 100644
--- a/app/tienda/[slug]/producto/[productId]/producto-detalle-client.tsx
+++ b/app/tienda/[slug]/producto/[productId]/producto-detalle-client.tsx
@@ -3,7 +3,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react'
 import { Button } from '@/components/ui/button'
 import { formatCurrency } from '@/lib/utils'
-import { ArrowLeft, Plus, ShoppingCart, Minus, Check } from 'lucide-react'
+import { ArrowLeft, Plus, ShoppingCart, Minus, Check, ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 
 interface Product {
@@ -15,6 +15,14 @@ interface Product {
   ingredients: { name: string; quantity: number; unit: string }[]
 }
 
+interface RecommendedProduct {
+  id: string
+  name: string
+  salePrice: number
+  currentStock: number
+  images: { url: string; publicId: string }[]
+}
+
 interface Company {
   name: string
   slug: string
@@ -24,7 +32,7 @@ interface Company {
 
 const ZOOM = 4
 
-export function ProductoDetalleClient({ product, company }: { product: Product; company: Company }) {
+export function ProductoDetalleClient({ product, company, recommended = [] }: { product: Product; company: Company; recommended?: RecommendedProduct[] }) {
   const [selectedImage, setSelectedImage] = useState(0)
   const [qty, setQty] = useState(1)
   const [added, setAdded] = useState(false)
@@ -87,29 +95,39 @@ export function ProductoDetalleClient({ product, company }: { product: Product;
   const imgY = px.y - imgOffset.y
 
   return (
-    <div className="min-h-screen bg-background">
-      <header className="border-b border-border/40 bg-card/30 backdrop-blur-md sticky top-0 z-40">
-        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            {company.logo && <img src={company.logo} alt="" className="w-8 h-8 rounded-lg object-cover" />}
-            <Link href={`/tienda/${company.slug}`} className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors">
-              <ArrowLeft className="w-4 h-4" />
-              {company.name}
+    <div className="min-h-screen bg-gradient-to-b from-background to-accent/5">
+      {/* Header */}
+      <header className="border-b border-border/20 bg-card/80 backdrop-blur-xl sticky top-0 z-40">
+        <div className="max-w-6xl mx-auto px-4 h-14 flex items-center justify-between">
+          <div className="flex items-center gap-3 min-w-0">
+            {company.logo && (
+              <img src={company.logo} alt="" className="w-8 h-8 rounded-lg object-cover ring-2 ring-border/20 shrink-0" />
+            )}
+            <Link
+              href={`/tienda/${company.slug}`}
+              className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors truncate"
+            >
+              <ArrowLeft className="w-4 h-4 shrink-0" />
+              <span className="truncate font-medium">{company.name}</span>
             </Link>
           </div>
-          <Link href={`/tienda/${company.slug}`} className="flex items-center gap-2 text-sm font-medium">
-            <ShoppingCart className="w-4 h-4" /> Volver a tienda
+          <Link
+            href={`/tienda/${company.slug}`}
+            className="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-primary hover:text-primary/80 transition-colors shrink-0"
+          >
+            <ShoppingCart className="w-4 h-4" />
+            <span className="hidden sm:inline">Volver</span>
           </Link>
         </div>
       </header>
 
-      <main className="max-w-6xl mx-auto px-4 py-8">
+      <main className="max-w-6xl mx-auto px-4 py-8 lg:py-12">
         <div className="grid md:grid-cols-2 gap-8 lg:gap-12">
           {/* Gallery */}
           <div className="space-y-4">
             <div
               ref={containerRef}
-              className="relative bg-black rounded-xl overflow-hidden cursor-crosshair"
+              className="relative bg-black rounded-2xl overflow-hidden cursor-crosshair"
               style={{ aspectRatio: '4/3' }}
               onMouseEnter={() => setShowZoom(true)}
               onMouseLeave={() => setShowZoom(false)}
@@ -132,10 +150,10 @@ export function ProductoDetalleClient({ product, company }: { product: Product;
                 }} />
             </div>
             {product.images.length > 1 && (
-              <div className="flex gap-2 overflow-x-auto pb-2">
+              <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-none">
                 {product.images.map((img, i) => (
                   <button key={i} onClick={() => setSelectedImage(i)}
-                    className={`w-20 h-20 rounded-lg overflow-hidden shrink-0 border-2 transition-colors ${i === selectedImage ? 'border-primary' : 'border-transparent hover:border-border/50'}`}>
+                    className={`w-20 h-20 rounded-xl overflow-hidden shrink-0 border-2 transition-all duration-200 ${i === selectedImage ? 'border-primary ring-2 ring-primary/20' : 'border-transparent hover:border-border/30'}`}>
                     <img src={img.url} alt="" className="w-full h-full object-cover" />
                   </button>
                 ))}
@@ -166,8 +184,8 @@ export function ProductoDetalleClient({ product, company }: { product: Product;
             )}
             <div>
               {outOfStock && <span className="text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 bg-rose-500/10 text-rose-500 rounded-md">Sin stock</span>}
-              <h1 className="text-3xl font-bold mt-2">{product.name}</h1>
-              <p className="text-3xl font-black text-emerald-500 mt-3">{formatCurrency(product.salePrice)}</p>
+              <h1 className="text-3xl lg:text-4xl font-bold mt-2">{product.name}</h1>
+              <p className="text-3xl lg:text-4xl font-black text-emerald-500 mt-3">{formatCurrency(product.salePrice)}</p>
             </div>
 
             {product.ingredients.length > 0 && (
@@ -200,6 +218,50 @@ export function ProductoDetalleClient({ product, company }: { product: Product;
             </div>
           </div>
         </div>
+
+        {/* Recommended Products */}
+        {recommended.length > 0 && (
+          <section className="mt-16 lg:mt-24">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-lg font-bold">También te puede gustar</h2>
+              <Link
+                href={`/tienda/${company.slug}`}
+                className="flex items-center gap-1 text-xs font-bold uppercase tracking-wider text-primary hover:text-primary/80 transition-colors"
+              >
+                Ver todo <ChevronRight className="w-3.5 h-3.5" />
+              </Link>
+            </div>
+            <div className="flex gap-4 overflow-x-auto pb-4 scrollbar-none -mx-4 px-4 snap-x snap-mandatory">
+              {recommended.map((rp) => {
+                const storeUrl = `/tienda/${company.slug}/producto/${rp.id}`
+                return (
+                  <Link
+                    key={rp.id}
+                    href={storeUrl}
+                    className="group snap-start shrink-0 w-44 sm:w-48 rounded-xl border border-border/30 bg-card/50 hover:bg-card hover:border-primary/30 transition-all duration-300 overflow-hidden"
+                  >
+                    <div className="aspect-square bg-muted/10 flex items-center justify-center overflow-hidden">
+                      {rp.images[0] ? (
+                        <img src={rp.images[0].url} alt={rp.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                      ) : (
+                        <div className="text-muted-foreground/20 text-4xl">🛍️</div>
+                      )}
+                      {rp.currentStock <= 0 && (
+                        <span className="absolute top-2 right-2 text-[10px] font-bold px-2 py-0.5 bg-rose-500/80 text-white rounded-md">
+                          Sin stock
+                        </span>
+                      )}
+                    </div>
+                    <div className="p-3 space-y-1.5">
+                      <p className="text-sm font-bold truncate">{rp.name}</p>
+                      <p className="text-sm font-black text-emerald-500">{formatCurrency(rp.salePrice)}</p>
+                    </div>
+                  </Link>
+                )
+              })}
+            </div>
+          </section>
+        )}
       </main>
     </div>
   )
diff --git a/app/tienda/[slug]/tienda-client.tsx b/app/tienda/[slug]/tienda-client.tsx
index 97825a1..adc45e2 100644
--- a/app/tienda/[slug]/tienda-client.tsx
+++ b/app/tienda/[slug]/tienda-client.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react'
 import { Button } from '@/components/ui/button'
 import { formatCurrency } from '@/lib/utils'
 import Link from 'next/link'
-import { ShoppingCart, Plus, Minus, X, Send, Loader2, CheckCircle } from 'lucide-react'
+import { ShoppingCart, Plus, Minus, X, Send, Loader2, CheckCircle, Store } from 'lucide-react'
 
 interface Product {
   id: string
@@ -97,21 +97,32 @@ export function TiendaClient({ company, products }: { company: Company; products
   }
 
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen bg-gradient-to-b from-background to-accent/5">
       {/* Header */}
-      <header className="border-b border-border/40 bg-card/30 backdrop-blur-md sticky top-0 z-40">
-        <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            {company.logo && <img src={company.logo} alt="" className="w-10 h-10 rounded-lg object-cover" />}
-            <div>
-              <h1 className="font-bold text-lg">{company.name}</h1>
-              {company.description && <p className="text-xs text-muted-foreground">{company.description}</p>}
+      <header className="border-b border-border/20 bg-card/80 backdrop-blur-xl sticky top-0 z-40">
+        <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
+          <div className="flex items-center gap-3 min-w-0">
+            {company.logo ? (
+              <img src={company.logo} alt="" className="w-10 h-10 rounded-xl object-cover ring-2 ring-border/20 shrink-0" />
+            ) : (
+              <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
+                <Store className="w-5 h-5 text-primary" />
+              </div>
+            )}
+            <div className="min-w-0">
+              <h1 className="font-bold text-lg truncate">{company.name}</h1>
+              {company.description && (
+                <p className="text-xs text-muted-foreground truncate">{company.description}</p>
+              )}
             </div>
           </div>
-          <button onClick={() => setShowCart(!showCart)} className="relative">
-            <ShoppingCart className="w-6 h-6" />
+          <button
+            onClick={() => setShowCart(!showCart)}
+            className="relative w-10 h-10 rounded-xl hover:bg-accent transition-colors flex items-center justify-center"
+          >
+            <ShoppingCart className="w-5 h-5" />
             {cartCount > 0 && (
-              <span className="absolute -top-2 -right-2 w-5 h-5 bg-primary text-primary-foreground text-[10px] font-bold rounded-full flex items-center justify-center">
+              <span className="absolute -top-0.5 -right-0.5 w-5 h-5 bg-primary text-primary-foreground text-[10px] font-bold rounded-full flex items-center justify-center shadow-lg shadow-primary/30">
                 {cartCount}
               </span>
             )}
@@ -119,7 +130,7 @@ export function TiendaClient({ company, products }: { company: Company; products
         </div>
       </header>
 
-      <main className="max-w-6xl mx-auto px-4 py-8">
+      <main className="max-w-6xl mx-auto px-4 py-8 lg:py-12">
         {products.length === 0 ? (
           <div className="text-center py-20">
             <p className="text-muted-foreground font-medium">No hay productos en la tienda aún</p>
@@ -132,17 +143,17 @@ export function TiendaClient({ company, products }: { company: Company; products
               return (
                 <div
                   key={p.id}
-                  className="rounded-xl border border-border/40 bg-card/30 backdrop-blur-md overflow-hidden hover:border-primary/30 transition-all"
+                  className="rounded-xl border border-border/30 bg-card/40 hover:bg-card/80 hover:border-primary/30 transition-all duration-300 overflow-hidden group"
                 >
                   <Link href={storeUrl} className="block">
-                    <div className="aspect-square bg-muted/20 flex items-center justify-center overflow-hidden relative">
+                    <div className="aspect-square bg-muted/10 flex items-center justify-center overflow-hidden relative">
                       {p.images[0] ? (
-                        <img src={p.images[0].url} alt={p.name} className="w-full h-full object-cover" />
+                        <img src={p.images[0].url} alt={p.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                       ) : (
-                        <div className="text-muted-foreground/30 text-6xl">🛍️</div>
+                        <div className="text-muted-foreground/20 text-6xl">🛍️</div>
                       )}
                       {p.currentStock <= 0 && (
-                        <span className="absolute top-2 right-2 text-[10px] font-bold px-2 py-0.5 bg-rose-500/80 text-white rounded-md">
+                        <span className="absolute top-3 right-3 text-[10px] font-bold px-2 py-0.5 bg-rose-500/80 text-white rounded-md backdrop-blur-sm">
                           Sin stock
                         </span>
                       )}
@@ -150,11 +161,11 @@ export function TiendaClient({ company, products }: { company: Company; products
                     <div className="p-4 space-y-3">
                       <h3 className="font-bold">{p.name}</h3>
                       {p.ingredients.length > 0 && (
-                        <p className="text-xs text-muted-foreground line-clamp-2">
+                        <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">
                           {p.ingredients.map((ig) => `${ig.name}`).join(', ')}
                         </p>
                       )}
-                      <div className="flex items-center justify-between">
+                      <div className="flex items-center justify-between pt-1">
                         <span className="text-lg font-black text-emerald-500">{formatCurrency(p.salePrice)}</span>
                         <Button
                           size="sm"
@@ -178,11 +189,11 @@ export function TiendaClient({ company, products }: { company: Company; products
       {/* Cart Sidebar */}
       {showCart && (
         <div className="fixed inset-0 z-50 flex justify-end">
-          <div className="bg-black/40 flex-1" onClick={() => setShowCart(false)} />
-          <div className="w-full max-w-sm bg-background border-l border-border/40 flex flex-col">
-            <div className="flex items-center justify-between p-4 border-b">
-              <h2 className="font-bold">Carrito ({cartCount})</h2>
-              <button onClick={() => setShowCart(false)}><X className="w-5 h-5" /></button>
+          <div className="bg-black/40 flex-1 animate-in fade-in duration-200" onClick={() => setShowCart(false)} />
+          <div className="w-full max-w-sm bg-background border-l border-border/40 flex flex-col animate-in slide-in-from-right duration-300">
+            <div className="flex items-center justify-between p-4 border-b border-border/20">
+              <h2 className="font-bold text-lg">Carrito <span className="text-muted-foreground font-normal text-sm">({cartCount})</span></h2>
+              <button onClick={() => setShowCart(false)} className="w-8 h-8 rounded-lg hover:bg-muted flex items-center justify-center transition-colors"><X className="w-4 h-4" /></button>
             </div>
             <div className="flex-1 overflow-y-auto p-4 space-y-3">
               {cart.length === 0 && <p className="text-center text-muted-foreground py-10">Carrito vacío</p>}
@@ -202,7 +213,7 @@ export function TiendaClient({ company, products }: { company: Company; products
               ))}
             </div>
             {cart.length > 0 && (
-              <div className="p-4 border-t space-y-3">
+              <div className="p-4 border-t border-border/20 space-y-3">
                 <div className="flex justify-between font-bold text-lg">
                   <span>Total</span>
                   <span>{formatCurrency(cartTotal)}</span>
@@ -218,21 +229,21 @@ export function TiendaClient({ company, products }: { company: Company; products
 
       {/* Checkout Modal */}
       {showCheckout && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => !submitting && setShowCheckout(false)}>
-          <div className="bg-background rounded-xl p-6 w-full max-w-md mx-4" onClick={(e) => e.stopPropagation()}>
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 animate-in fade-in duration-200" onClick={() => !submitting && setShowCheckout(false)}>
+          <div className="bg-background rounded-xl p-6 w-full max-w-md mx-4 shadow-2xl animate-in zoom-in-95 duration-200" onClick={(e) => e.stopPropagation()}>
             <h2 className="text-lg font-bold mb-4">Confirmar Pedido</h2>
             <div className="space-y-4">
               <div>
                 <label className="text-xs font-bold uppercase tracking-widest text-muted-foreground">Nombre</label>
-                <input value={customerName} onChange={(e) => setCustomerName(e.target.value)} className="mt-1 w-full h-12 px-4 rounded-lg border border-border/50 bg-background/50" placeholder="Tu nombre" />
+                <input value={customerName} onChange={(e) => setCustomerName(e.target.value)} className="mt-1 w-full h-12 px-4 rounded-lg border border-border/50 bg-background/50 focus:border-primary/50 focus:ring-2 focus:ring-primary/10 transition-all outline-none" placeholder="Tu nombre" />
               </div>
               <div>
                 <label className="text-xs font-bold uppercase tracking-widest text-muted-foreground">Teléfono</label>
-                <input value={customerPhone} onChange={(e) => setCustomerPhone(e.target.value)} className="mt-1 w-full h-12 px-4 rounded-lg border border-border/50 bg-background/50" placeholder="+573001234567" />
+                <input value={customerPhone} onChange={(e) => setCustomerPhone(e.target.value)} className="mt-1 w-full h-12 px-4 rounded-lg border border-border/50 bg-background/50 focus:border-primary/50 focus:ring-2 focus:ring-primary/10 transition-all outline-none" placeholder="+573001234567" />
               </div>
               <div>
                 <label className="text-xs font-bold uppercase tracking-widest text-muted-foreground">Notas (opcional)</label>
-                <textarea value={customerNotes} onChange={(e) => setCustomerNotes(e.target.value)} className="mt-1 w-full h-20 px-4 py-3 rounded-lg border border-border/50 bg-background/50 resize-none" placeholder="Dirección, hora de entrega, etc." />
+                <textarea value={customerNotes} onChange={(e) => setCustomerNotes(e.target.value)} className="mt-1 w-full h-20 px-4 py-3 rounded-lg border border-border/50 bg-background/50 focus:border-primary/50 focus:ring-2 focus:ring-primary/10 transition-all outline-none resize-none" placeholder="Dirección, hora de entrega, etc." />
               </div>
               <div className="p-3 bg-muted/30 rounded-lg space-y-1 text-sm">
                 {cart.map((i) => (