diff --git a/workloads/ecommerce/app/product/[slug]/page.tsx b/workloads/ecommerce/app/product/[slug]/page.tsx
index 2c15726..2b9b944 100644
--- a/workloads/ecommerce/app/product/[slug]/page.tsx
+++ b/workloads/ecommerce/app/product/[slug]/page.tsx
@@ -101,7 +101,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
             carrusel. Confirmado en vivo: sin min-w-0 el grid medía 783px
             en un viewport real de 380px; con min-w-0 vuelve a 380px. */}
         {recommended.length > 0 && (
-          <div className="min-w-0 pb-16 lg:col-span-2">
+          <div id="recommendations-section" className="min-w-0 pb-16 lg:col-span-2">
             <h2 className="mb-7 text-3xl font-black">También te puede gustar</h2>
             <ProductCarousel products={recommended} />
           </div>
diff --git a/workloads/ecommerce/components/product/mobile-add-to-cart.tsx b/workloads/ecommerce/components/product/mobile-add-to-cart.tsx
index 20501b7..e91ffaa 100644
--- a/workloads/ecommerce/components/product/mobile-add-to-cart.tsx
+++ b/workloads/ecommerce/components/product/mobile-add-to-cart.tsx
@@ -10,7 +10,7 @@ const SCROLL_THRESHOLD_PX = 80;
 
 // Antes esta barra quedaba fija desde el primer render en mobile,
 // tapando permanentemente parte de la imagen del producto solo para
-// duplicar un boton que ya está visible más abajo. Ahora combina dos
+// duplicar un boton que ya está visible más abajo. Ahora combina tres
 // condiciones, igual que el "Buy Now" sticky de Amazon:
 // - scrolled: recien aparece despues de que el usuario empieza a
 //   scrollear (nunca sobre la vista inicial de la imagen/hero).
@@ -18,9 +18,16 @@ const SCROLL_THRESHOLD_PX = 80;
 //   ProductPurchase, visible tambien en mobile) no esta en pantalla --
 //   ya sea porque todavia no se llego a el, o porque se scrolleo mas
 //   alla.
+// - !pastRecommendations: una vez que se llega a "También te puede
+//   gustar" (#recommendations-section en app/product/[slug]/page.tsx)
+//   la barra se oculta y ya no vuelve a aparecer bajando mas -- pedido
+//   explicito del usuario (antes quedaba pegada hasta el footer, sin
+//   sentido una vez que el contenido principal del producto ya quedó
+//   atrás).
 export function MobileAddToCart({ product }: { product: Product }) {
   const addItem = useCartStore((state) => state.addItem);
   const [buttonVisible, setButtonVisible] = useState(true);
+  const [pastRecommendations, setPastRecommendations] = useState(false);
   const [scrolled, setScrolled] = useState(false);
   const outOfStock = product.variants[0]?.available === false;
 
@@ -35,6 +42,17 @@ export function MobileAddToCart({ product }: { product: Product }) {
     return () => observer.disconnect();
   }, []);
 
+  useEffect(() => {
+    const target = document.getElementById("recommendations-section");
+    if (!target) return;
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setPastRecommendations(entry.boundingClientRect.top <= 0);
+    }, { threshold: 0 });
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, []);
+
   useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > SCROLL_THRESHOLD_PX);
     onScroll();
@@ -42,7 +60,7 @@ export function MobileAddToCart({ product }: { product: Product }) {
     return () => window.removeEventListener("scroll", onScroll);
   }, []);
 
-  const visible = scrolled && !buttonVisible;
+  const visible = scrolled && !buttonVisible && !pastRecommendations;
 
   return (
     <div