diff --git a/workloads/ecommerce/app/product/[slug]/page.tsx b/workloads/ecommerce/app/product/[slug]/page.tsx
index 0e418db..2c15726 100644
--- a/workloads/ecommerce/app/product/[slug]/page.tsx
+++ b/workloads/ecommerce/app/product/[slug]/page.tsx
@@ -52,7 +52,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
           esperar a que termine la columna más alta antes de aparecer. */}
       <section className="mx-auto grid max-w-[1600px] gap-x-10 gap-y-12 px-4 py-10 lg:grid-cols-[1.08fr_.92fr] lg:py-16 xl:grid-cols-[1.1fr_.75fr_360px] xl:grid-rows-[auto_auto]">
         <ProductGallery images={product.images} name={product.name} />
-        <div>
+        <div className="min-w-0">
           <span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral">{product.category} · {product.collection}</span>
           <h1 className="mt-3 text-4xl font-black tracking-tight sm:text-6xl">{product.name}</h1>
           <p className="mt-5 text-lg leading-8 text-slate-600">{product.description}</p>
@@ -79,7 +79,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
             scrollea. Los sugeridos (hasta 2) usan el mismo cálculo de
             "recommended" que ya alimenta el carrusel de abajo -- mismo
             criterio real (categoría/colección), no un dato inventado. */}
-        <div className="xl:sticky xl:top-24 xl:row-span-2 xl:self-start">
+        <div className="min-w-0 xl:sticky xl:top-24 xl:row-span-2 xl:self-start">
           <div className="rounded-2xl border border-slate-200 p-6 shadow-sm">
             <ProductPurchase product={product} />
           </div>
@@ -92,8 +92,16 @@ export default async function ProductPage({ params }: ProductPageProps) {
             </div>
           )}
         </div>
+        {/* min-w-0 es necesario: sin esto, el carrusel horizontal
+            (overflow-x-auto interno) contaba como item de este grid, y su
+            ancho minimo intrinseco (la suma de TODAS las cards sin
+            wrappear, ya que el scroller no tiene flex-wrap) empujaba todo
+            el grid completo a ~800px en mobile -- afectaba a TODA la
+            columna compartida (imagen, titulo, specs), no solo al
+            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="pb-16 lg:col-span-2">
+          <div 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/product-gallery.tsx b/workloads/ecommerce/components/product/product-gallery.tsx
index 621cc1d..665e68a 100644
--- a/workloads/ecommerce/components/product/product-gallery.tsx
+++ b/workloads/ecommerce/components/product/product-gallery.tsx
@@ -109,7 +109,14 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin
   };
 
   return (
-    <div className="grid gap-4 lg:grid-cols-[86px_1fr]">
+    <div className="min-w-0 grid gap-4 lg:grid-cols-[86px_1fr]">
+      {/* min-w-0: esta tira de miniaturas es un overflow-x-auto (scroll
+          horizontal) igual que el carrusel de "También te puede gustar"
+          en app/product/[slug]/page.tsx -- mismo bug si este componente
+          termina como item de un grid externo sin min-w-0: para productos
+          con muchas fotos, el ancho minimo intrinseco de TODAS las
+          miniaturas sin wrappear puede forzar overflow horizontal en toda
+          la pagina en mobile. */}
       <div className="order-2 flex gap-3 overflow-x-auto lg:order-1 lg:flex-col">
         {images.map((image) => <button type="button" key={image} onClick={() => { setSelected(image); reset(); }} onMouseEnter={() => { setSelected(image); reset(); }} className={`relative aspect-square w-20 shrink-0 overflow-hidden rounded-2xl border-2 ${selected === image ? "border-fuchsia-500" : "border-transparent"}`}><Image src={image} alt="" fill sizes="80px" className="object-cover" /></button>)}
       </div>