fix(ecommerce): comillas en url() del zoom, rompia con espacios/parentesis en el nombre de archivo

workloads/docs-portal/docs/decisiones/0010-pago-envio-reales-y-storefront.md

@@ -425,27 +425,49 @@ Resultados reales, uno por uno (código de cada prueba en
     un dispositivo real.
 21b. **Accesibilidad del checkout completo** por teclado (no solo el
     buscador) — tab order y foco visible en los 3 pasos.
-22. **Importación manual de imágenes no se refleja en el storefront**
-    (reportado por el usuario 2026-09-20): subir/editar imágenes de un
-    producto a mano (vs. importación por CSV, que sí funciona) no
-    aparece del lado del storefront. Falta reproducir contra el flujo
-    real de importación manual del admin de Medusa (ver
-    `temp-admin`/`ari-shopping-tienda` en memoria) y confirmar si es
-    caché (ISR de Next, `force-dynamic` ya está en la página de
-    producto — ver más arriba), staleness de Meilisearch (ver memoria
-    `search-inventory-staleness`, mismo síntoma de "el catálogo directo
-    sí, la búsqueda no") o algo específico del pipeline de importación
-    en `commerce-backend`.
-23. **En mobile, la visualización de imágenes de producto se corta y
-    obliga a scrollear** (reportado por el usuario 2026-09-20, con
-    captura real de `shop.cruzcloud.net` en un producto con múltiples
-    fotos). Toda la clase de bug de overflow por falta de `min-w-0` ya
-    se revisó en vivo en esta sesión y sigue presente en
-    `product-gallery.tsx` y `app/product/[slug]/page.tsx` — sospecha
-    sin confirmar: el modal "Zoom interactivo"
-    (`ProductGallery`/`DialogContent`, `min-h-[70vh]` +
-    `overflow-hidden`) en viewport móvil real, donde la barra de
-    direcciones de Chrome/Safari hace que `100vh` mida más que el área
-    visible real. Pendiente reproducir con un dispositivo real o
-    emulación de `visualViewport` (Playwright con viewport móvil no
-    replica el comportamiento dinámico de la barra de direcciones).
+22. **Importación manual de imágenes no se reflejaba en el storefront**
+    (reportado por el usuario 2026-09-20) — **causa raíz encontrada y
+    arreglada en código (2026-09-20), pendiente confirmar con una
+    edición real.** `medusaFetch()` en `lib/headless/providers/medusa.ts`
+    usaba `next:{revalidate:60,tags:["medusa-products"]}`, caché en
+    memoria por-pod que sobrevivía a `force-dynamic`. Con
+    `frontend-deploy` en 2 réplicas sin cacheHandler compartido, el POST
+    de `/api/revalidate` del subscriber de Medusa solo llegaba a uno de
+    los dos pods — el otro seguía sirviendo datos viejos hasta que el
+    TTL expirara solo. Una edición puntual + revisar al toque tenía
+    ~50% de chance de pegarle al pod stale; una importación CSV (mucho
+    más lenta) le daba tiempo de sobra al TTL para expirar en ambos.
+    **Fix:** se sacó el `next.revalidate`/`tags` del fetch — ya en
+    producción. Falta la prueba con una edición manual real (vía
+    `temp-admin`/`ari-shopping-tienda` en memoria) para confirmar que
+    el síntoma original desapareció, no solo que la causa técnica tiene
+    sentido.
+23. **En mobile (viewport real de 320px), la página se cortaba y
+    obligaba a scrollear horizontalmente — RESUELTO 2026-09-20.**
+    Reportado por el usuario con captura real de `shop.cruzcloud.net`.
+    **No era la galería de imágenes** (esa clase de bug con `min-w-0`
+    ya estaba corregida desde la sesión anterior, confirmado en vivo
+    que seguía sana). Dos causas reales encontradas por separado,
+    reproducidas con Playwright contra un viewport de 320×480 real:
+    - **Footer, bloque "Newsletter"** (`components/layout/footer.tsx`):
+      el párrafo de texto, sin `min-w-0`, le pedía al grid item su
+      ancho de una sola línea sin wrappear (~335px, medido en vivo)
+      en vez de dejarse achicar — forzaba la única columna del grid
+      (`sm:grid-cols-2 lg:grid-cols-4`, sin `grid-cols-1` propio pero
+      con auto-stacking correcto por debajo de `sm`) a 335px de ancho,
+      arrastrando la página entera. Mismo bug de fondo que el ya
+      documentado en la galería, en un grid en vez de un
+      `overflow-x-auto`.
+    - **Navbar, fila de "Departamentos"/"Todo"** (`components/layout/navbar.tsx`):
+      los 3 items de esa fila (botón de menú, "Departamentos", "Todo")
+      tenían los tres `shrink-0` — ninguno podía achicarse, así que si
+      los tres no entraban en 320px, desbordaban sí o sí (`min-w-0` no
+      aplica cuando el ítem no está pensado para achicarse). Fix:
+      ocultar el texto "Departamentos" en mobile (queda ícono + flecha,
+      con `aria-label` agregado para no perder accesibilidad), libera
+      espacio suficiente para que quepan los tres.
+    Verificado en vivo con Playwright (viewport 320×480 real, no
+    emulación de dispositivo con DPR) contra staging y producción
+    después del deploy: `document.documentElement.scrollWidth ===
+    clientWidth` en home y en página de producto, en ambos ambientes —
+    sin overflow.

workloads/ecommerce/components/product/product-gallery.tsx

@@ -179,7 +179,18 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin
                 className="pointer-events-none absolute inset-0 bg-slate-50 transition-opacity duration-150 ease-out"
                 style={{
                   opacity: hoverZoom && !hoverZoom.showPanel ? 1 : 0,
-                  backgroundImage: `url(${selected})`,
+                  // Comillas dentro de url() a proposito: sin ellas, un
+                  // espacio o parentesis literal en el nombre de archivo
+                  // (ej. "descarga (4)-xxx.png", el patron por defecto de
+                  // Chrome al descargar una imagen sin renombrarla -- asi
+                  // quedan las subidas manuales, a diferencia de las
+                  // importadas por CSV) rompe la sintaxis de url() sin
+                  // comillas -- el navegador descarta el valor completo en
+                  // silencio (backgroundImage queda "none"). Confirmado en
+                  // vivo 2026-09-20: reportado por el usuario como "el zoom
+                  // interactivo no se visualiza" solo en fotos subidas a
+                  // mano por el admin, nunca en las de CSV.
+                  backgroundImage: `url("${selected}")`,
                   backgroundRepeat: "no-repeat",
                   backgroundSize: `${HOVER_ZOOM_SCALE * 100}%`,
                   backgroundPosition: hoverZoom ? `${hoverZoom.bgX}% ${hoverZoom.bgY}%` : "center",
@@ -217,7 +228,9 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin
               top: hoverZoom.panelTop,
               width: hoverZoom.panelSize,
               height: hoverZoom.panelSize,
-              backgroundImage: `url(${selected})`,
+              // Ver el comentario en el overlay in-place de arriba -- mismo
+              // fix, mismo motivo (comillas necesarias dentro de url()).
+              backgroundImage: `url("${selected}")`,
               backgroundRepeat: "no-repeat",
               backgroundSize: `${HOVER_ZOOM_SCALE * 100}%`,
               backgroundPosition: `${hoverZoom.bgX}% ${hoverZoom.bgY}%`,