feat(ecommerce): mega-menu de Departamentos multi-columna en el navbar

Reemplaza la fila horizontal de pildoras por categoria (ADR 0005 seccion
3, patron Walmart) por un trigger unico "Departamentos" que abre un
panel multi-columna con las 6 categorias raiz y sus hijos, activado por
hover (mouse) o tap (touch), con cierre por click-fuera y Escape.

.gitea/workflows/build.yaml

@@ -122,11 +122,12 @@ jobs:
     needs: gitleaks
     if: github.event_name == 'push'
     runs-on: ubuntu-latest
-    timeout-minutes: 20
+    timeout-minutes: 30
 
     env:
       APP_DIR: workloads/ecommerce
       MANIFEST_FILE: workloads/ecommerce/frontend/patches/deployment.yaml
+      KUSTOMIZE_DIR: workloads/ecommerce/frontend
       IMAGE_NAME: gitea.cruzcloud.net/devops/ecommerce-frontend
 
     steps:
@@ -213,22 +214,25 @@ jobs:
             exit 1
           }
 
-          grep -q 'currentCollection' "${NAVBAR_FILE}" || {
+          # Desde Etapa 2 sub-fase 2 (2026-08-25) el nav es data-driven
-            echo "ERROR: navbar.tsx no calcula currentCollection."
+          # contra el arbol real de categorias de Medusa, no un array
+          # hardcodeado -- esta version anterior del check no detectaba
+          # que "category=Mochilas"/"collection=Marvel" eran strings
+          # hardcodeadas que ya no correspondian a ningun dato real (rotas
+          # en silencio desde que se elimino legacyProductMeta, PR #29).
+          # "currentCollection" tampoco existe mas: las colecciones ya no
+          # se usan para resaltar el item activo del menu de categorias.
+          grep -q 'buildCategoryTree' "${NAVBAR_FILE}" || {
+            echo "ERROR: navbar.tsx ya no arma el arbol de categorias desde datos reales."
             exit 1
           }
 
-          grep -q 'collection=Marvel' "${NAVBAR_FILE}" || {
+          grep -q 'encodeURIComponent(root.name)' "${NAVBAR_FILE}" || {
-            echo "ERROR: falta collection=Marvel en navbar.tsx."
+            echo "ERROR: navbar.tsx ya no linkea por el nombre real de categoria."
             exit 1
           }
 
-          grep -q 'category=Mochilas' "${NAVBAR_FILE}" || {
+          grep -q 'aria-current={isActive(' "${NAVBAR_FILE}" || {
-            echo "ERROR: falta category=Mochilas en navbar.tsx."
-            exit 1
-          }
-
-          grep -q 'aria-current={active ? "page" : undefined}' "${NAVBAR_FILE}" || {
             echo "ERROR: navbar.tsx no expone correctamente el menú activo."
             exit 1
           }
@@ -257,7 +261,7 @@ jobs:
 
           echo "Validando remontaje por parámetros: ${PAGE_FILE}"
 
-          grep -q 'key={`${category}:${collection}:${query}:${section}`}' "${PAGE_FILE}" || {
+          grep -q 'key={`${category}:${collection}:${query}`}' "${PAGE_FILE}" || {
             echo "ERROR: app/catalog/page.tsx no remonta CatalogClient al cambiar la URL."
             exit 1
           }
@@ -276,6 +280,32 @@ jobs:
           chmod +x /tmp/trivy
           /tmp/trivy version
 
+      - name: Instalar kubectl
+        shell: bash
+        run: |
+          set -euo pipefail
+          KUBECTL_VERSION="v1.31.2"
+          curl -sSfL \
+            "https://dl.k8s.io/release/${KUBECTL_VERSION}/bin/linux/amd64/kubectl" \
+            -o /tmp/kubectl
+          chmod +x /tmp/kubectl
+          /tmp/kubectl version --client
+
+      # ${MANIFEST_FILE} es solo el patch de Kustomize del Deployment, no el
+      # manifiesto que de verdad corre en el clúster -- escanearlo directo
+      # generaba falsos positivos en todo lo que hereda del base remoto de
+      # platform-templates (runAsNonRoot, seccompProfile), porque ese patch
+      # nunca repite lo que ya trae el base (visto en vivo 2026-08-24:
+      # comparando el patch aislado contra el output real de
+      # "kubectl kustomize", 2 de 5 hallazgos desaparecían). Renderizamos el
+      # kustomization completo (${KUSTOMIZE_DIR}, que sí trae el base vía
+      # git remoto) y escaneamos eso.
+      - name: Renderizar manifiesto Kustomize
+        shell: bash
+        run: |
+          set -euo pipefail
+          /tmp/kubectl kustomize "${KUSTOMIZE_DIR}" > /tmp/frontend-rendered.yaml
+
       # Escanea el manifiesto Kubernetes real del frontend (no la imagen):
       # contenedores como root, falta de resource limits, falta de
       # readiness/liveness probes, etc. Informativo por ahora — no bloquea
@@ -287,7 +317,7 @@ jobs:
           /tmp/trivy config \
             --severity CRITICAL,HIGH,MEDIUM \
             --exit-code 0 \
-            "${MANIFEST_FILE}"
+            /tmp/frontend-rendered.yaml
 
       # Instalado directo con pip (no como container aparte): el runner de
       # Gitea ejecuta cada job ya dentro de un contenedor propio que habla
@@ -367,6 +397,12 @@ jobs:
 
       # CRITICAL bloquea el pipeline: no se sube una imagen con una CVE
       # crítica conocida y con fix disponible.
+      # --timeout 15m0s: el default de Trivy (5m) dejó de alcanzar también
+      # para el frontend (visto en vivo: "context deadline exceeded" a los
+      # ~4m45s, en un run justo después de terminar el docker build, con
+      # el host bajo la misma inestabilidad de nodo vista ese día). Mismo
+      # fix ya aplicado en build-medusa.yaml el 2026-08-16 -- el supuesto
+      # de que el frontend era más liviano y no lo necesitaba ya no vale.
       - name: Escanear imagen (Trivy) — CRITICAL bloquea
         shell: bash
         run: |
@@ -375,6 +411,7 @@ jobs:
             --severity CRITICAL \
             --exit-code 1 \
             --ignore-unfixed \
+            --timeout 15m0s \
             "${IMAGE_NAME}:${{ steps.vars.outputs.VERSION }}"
 
       # HIGH solo informa por ahora — no bloquea mientras aprendemos a leer
@@ -387,6 +424,7 @@ jobs:
             --severity HIGH \
             --exit-code 0 \
             --ignore-unfixed \
+            --timeout 15m0s \
             "${IMAGE_NAME}:${{ steps.vars.outputs.VERSION }}"
 
       # SBOM de la imagen que ya pasó el gate de CRITICAL — describe

workloads/commerce-backend/src/api/middlewares.ts

@@ -0,0 +1,22 @@
+import { defineMiddlewares } from "@medusajs/medusa"
+
+// GET /store/products descarta en silencio la relacion `categories`
+// aunque `/admin/products` si la expone -- confirmado en vivo en la
+// auditoria de Fase 5 (ver docs/decisiones/0004-evaluacion-stack-multi-categoria.md).
+// Este es el patron oficial de Medusa v2 para ampliar los campos
+// permitidos de una ruta core restringida (middleware global sobre
+// req.allowed), no un query-config custom:
+// https://docs.medusajs.com/learn/fundamentals/api-routes/retrieve-custom-links
+export default defineMiddlewares({
+  routes: [
+    {
+      matcher: "/store/products",
+      middlewares: [
+        (req, res, next) => {
+          ;(req.allowed ??= []).push("categories")
+          next()
+        },
+      ],
+    },
+  ],
+})

workloads/docs-portal/patches/deployment.yaml

@@ -25,7 +25,7 @@ spec:
         runAsNonRoot: false
       containers:
         - name: app
-          image: gitea.cruzcloud.net/devops/docs-portal:v1.0.123
+          image: gitea.cruzcloud.net/devops/docs-portal:v1.0.125
           # El base saca TODAS las capabilities. Probado en vivo y
           # revertido: con drop: ALL (aunque se agregue NET_BIND_SERVICE
           # de vuelta) el propio entrypoint de nginx:1.27-alpine falla al

workloads/ecommerce/app/catalog/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { CatalogClient } from "@/components/catalog/catalog-client";
-import { getProducts } from "@/lib/headless/client";
+import { getCategories, getProducts } from "@/lib/headless/client";
 
 export const metadata: Metadata = {
   title: "Catálogo",
@@ -17,17 +17,31 @@ function single(value: string | string[] | undefined): string {
 
 export default async function CatalogPage({ searchParams }: CatalogPageProps) {
   const params = await searchParams;
-  const products = await getProducts();
+  const [products, categories] = await Promise.all([getProducts(), getCategories()]);
 
   const category = single(params.category) || "Todos";
   const collection = single(params.collection);
   const query = single(params.q);
-  const section = single(params.section);
+
+  // Los links de navbar/tiles apuntan a categorias raiz (ej. "Mochilas y
+  // morrales"), pero ningun producto tiene esa categoria asignada
+  // directamente -- solo sus hijos ("Marvel", "Frozen", etc.). Este mapa
+  // expande cada raiz-con-hijos al nombre real de sus hijos para que el
+  // filtro siga funcionando por igualdad exacta de `product.category`.
+  const categoryGroups: Record<string, string[]> = {};
+  for (const node of categories) {
+    if (node.parentId) continue;
+    const children = categories.filter((child) => child.parentId === node.id);
+    if (children.length > 0) {
+      categoryGroups[node.name] = children.map((child) => child.name);
+    }
+  }
 
   return (
     <CatalogClient
-      key={`${category}:${collection}:${query}:${section}`}
+      key={`${category}:${collection}:${query}`}
       products={products}
+      categoryGroups={categoryGroups}
       initialCategory={category}
       initialCollection={collection}
       initialQuery={query}

workloads/ecommerce/app/layout.tsx

@@ -4,7 +4,14 @@ import { CartDrawer } from "@/components/cart/cart-drawer";
 import { Footer } from "@/components/layout/footer";
 import { Navbar } from "@/components/layout/navbar";
 import { WishlistDrawer } from "@/components/wishlist/wishlist-drawer";
-import { getProducts } from "@/lib/headless/client";
+import { getCategories, getProducts } from "@/lib/headless/client";
+
+// El Navbar (categorias/colecciones/predictive search) vive en este layout
+// compartido -- si alguna pagina futura queda estatica, este fetch se
+// congelaria con datos de build time (mock) igual que le paso al home
+// (ver app/page.tsx). Forzarlo aca protege el nav en cualquier ruta, no
+// solo en las que hoy ya son dinamicas por otro motivo (searchParams, etc.).
+export const dynamic = "force-dynamic";
 
 export const metadata: Metadata = {
   metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? "https://shop.cruzcloud.net"),
@@ -16,6 +23,6 @@ export const metadata: Metadata = {
 export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#0f172a" };
 
 export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
-  const products = await getProducts();
+  const [products, categories] = await Promise.all([getProducts(), getCategories()]);
-  return <html lang="es"><body><Navbar products={products} /><main>{children}</main><Footer /><CartDrawer /><WishlistDrawer /></body></html>;
+  return <html lang="es"><body><Navbar products={products} categories={categories} /><main>{children}</main><Footer /><CartDrawer /><WishlistDrawer /></body></html>;
 }

workloads/ecommerce/app/page.tsx

@@ -5,10 +5,17 @@ import { HeroBento } from "@/components/home/hero-bento";
 import { TrustBar } from "@/components/home/trust-bar";
 import { ProductCarousel } from "@/components/product/product-carousel";
 import { Button } from "@/components/ui/button";
-import { getProducts } from "@/lib/headless/client";
+import { getCategories, getProducts } from "@/lib/headless/client";
+
+// Sin esto, Next.js prerenderiza "/" en build time dentro del Dockerfile,
+// donde HEADLESS_PROVIDER/MEDUSA_* todavia no existen (solo se inyectan en
+// runtime via el Deployment) -- cae al provider mock y ese HTML queda
+// cacheado 1 año (visto en vivo: x-nextjs-prerender:1, s-maxage=31536000),
+// violando el flujo Admin -> revalidate del ADR 0005 justo en el home.
+export const dynamic = "force-dynamic";
 
 export default async function HomePage() {
-  const products = await getProducts();
+  const [products, categories] = await Promise.all([getProducts(), getCategories()]);
   const treasures = products.filter((product) => product.isNew || product.featured).slice(0, 8);
-  return <><HeroBento /><TrustBar /><div className="content-auto"><CategoryTiles /></div><section className="content-auto mx-auto max-w-7xl px-4 py-14"><div className="mb-8 flex items-end justify-between gap-5"><div><span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">Novedades</span><h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Tesoros recién llegados</h2><p className="mt-3 text-slate-500">Desliza y encuentra nuevos favoritos.</p></div><Button asChild variant="outline" className="hidden sm:inline-flex"><Link href="/catalog">Ver catálogo <ArrowRight className="size-4" /></Link></Button></div><ProductCarousel products={treasures} /></section><section className="content-auto mx-auto max-w-7xl px-4 pb-20"><div className="grid overflow-hidden rounded-[2rem] bg-gradient-to-r from-cyan-500 via-blue-600 to-violet-600 text-white shadow-2xl lg:grid-cols-[1fr_.7fr]"><div className="p-8 sm:p-12"><span className="text-xs font-black uppercase tracking-[.18em] text-yellow-300">Club ARI</span><h2 className="mt-3 text-4xl font-black tracking-tight sm:text-6xl">Promociones, lanzamientos y mucha diversión.</h2><p className="mt-5 max-w-xl text-white/80">Únete a nuestra comunidad y recibe primero las novedades del catálogo.</p><Button variant="yellow" size="lg" className="mt-7">Quiero unirme</Button></div><div className="min-h-64 bg-[url('/images/promo/promo-backpacks.webp')] bg-cover bg-center" /></div></section></>;
+  return <><HeroBento /><TrustBar /><div className="content-auto"><CategoryTiles categories={categories} /></div><section className="content-auto mx-auto max-w-7xl px-4 py-14"><div className="mb-8 flex items-end justify-between gap-5"><div><span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">Novedades</span><h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Tesoros recién llegados</h2><p className="mt-3 text-slate-500">Desliza y encuentra nuevos favoritos.</p></div><Button asChild variant="outline" className="hidden sm:inline-flex"><Link href="/catalog">Ver catálogo <ArrowRight className="size-4" /></Link></Button></div><ProductCarousel products={treasures} /></section><section className="content-auto mx-auto max-w-7xl px-4 pb-20"><div className="grid overflow-hidden rounded-[2rem] bg-gradient-to-r from-cyan-500 via-blue-600 to-violet-600 text-white shadow-2xl lg:grid-cols-[1fr_.7fr]"><div className="p-8 sm:p-12"><span className="text-xs font-black uppercase tracking-[.18em] text-yellow-300">Club ARI</span><h2 className="mt-3 text-4xl font-black tracking-tight sm:text-6xl">Promociones, lanzamientos y mucha diversión.</h2><p className="mt-5 max-w-xl text-white/80">Únete a nuestra comunidad y recibe primero las novedades del catálogo.</p><Button variant="yellow" size="lg" className="mt-7">Quiero unirme</Button></div><div className="min-h-64 bg-[url('/images/promo/promo-backpacks.webp')] bg-cover bg-center" /></div></section></>;
 }

workloads/ecommerce/commerce/medusa/patches/deployment.yaml

@@ -65,7 +65,7 @@ spec:
               memory: 64Mi
 
         - name: migrations
-          image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.121
+          image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.127
           imagePullPolicy: IfNotPresent
           command:
             - node
@@ -86,7 +86,7 @@ spec:
 
       containers:
         - name: app
-          image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.121
+          image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.127
           imagePullPolicy: IfNotPresent
           envFrom:
             - configMapRef:

workloads/ecommerce/components/catalog/catalog-client.tsx

@@ -9,6 +9,7 @@ import type { Product } from "@/lib/headless/types";
 
 type CatalogClientProps = {
   products: Product[];
+  categoryGroups?: Record<string, string[]>;
   initialCategory?: string;
   initialCollection?: string;
   initialQuery?: string;
@@ -16,6 +17,7 @@ type CatalogClientProps = {
 
 export function CatalogClient({
   products,
+  categoryGroups = {},
   initialCategory = "Todos",
   initialCollection = "",
   initialQuery = "",
@@ -48,6 +50,12 @@ export function CatalogClient({
     setMaxPrice(maxCatalogPrice);
   }, [initialCategory, initialCollection, initialQuery, maxCatalogPrice]);
 
+  // Si `category` es una raiz con hijos (ej. "Mochilas y morrales"), se
+  // expande a la lista de nombres reales de sus hijos -- ningun producto
+  // tiene la raiz asignada directamente. Si no es una raiz conocida, se
+  // trata como el nombre de categoria exacto de siempre.
+  const allowedCategories = categoryGroups[category] ?? [category];
+
   const filtered = useMemo(
     () =>
       products
@@ -63,7 +71,7 @@ export function CatalogClient({
 
           return (
             (!query || search.includes(query.toLowerCase())) &&
-            (category === "Todos" || product.category === category) &&
+            (category === "Todos" || allowedCategories.includes(product.category)) &&
             (!collection || product.collection === collection) &&
             (brand === "Todas" || product.brand === brand) &&
             (age === "Todas" || product.ageRange === age) &&
@@ -77,7 +85,7 @@ export function CatalogClient({
               ? Number(b.isNew) - Number(a.isNew)
               : Number(b.featured) - Number(a.featured),
         ),
-    [age, brand, category, collection, maxPrice, products, query, sort],
+    [age, allowedCategories, brand, category, collection, maxPrice, products, query, sort],
   );
 
   const reset = () => {

workloads/ecommerce/components/home/category-tiles.tsx

@@ -1,14 +1,68 @@
 import Image from "next/image";
 import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
+import type { Category } from "@/lib/headless/types";
 
-const categories = [
+type TileContent = { subtitle: string; image?: string; color: string };
-  { title: "Juguetes", subtitle: "Personajes que inspiran", image: "/images/categories/figuras.webp", href: "/catalog?category=Figuras", color: "from-yellow-300 to-orange-400" },
-  { title: "Peluches", subtitle: "Compañeros para regalar", image: "/images/categories/peluches.webp", href: "/catalog?category=Peluches", color: "from-pink-400 to-fuchsia-500" },
-  { title: "Mochilas", subtitle: "Estilo para cada aventura", image: "/images/categories/mochilas.webp", href: "/catalog?category=Mochilas", color: "from-cyan-400 to-blue-500" },
-  { title: "Marvel", subtitle: "Tu héroe favorito", image: "/images/categories/marvel.webp", href: "/catalog?collection=Marvel", color: "from-red-500 to-rose-700" },
-];
 
-export function CategoryTiles() {
+// No hay fotografia real todavia para las 6 categorias raiz de la taxonomia
-  return <section className="mx-auto max-w-7xl px-4 py-14"><div className="mb-8 flex items-end justify-between gap-4"><div><span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">Explora por mundos</span><h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Encuentra tu próximo tesoro</h2></div><Link href="/catalog" className="hidden font-black text-cyan-700 sm:block">Ver todo →</Link></div><div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">{categories.map((item) => <Link key={item.title} href={item.href} className={`group relative min-h-80 overflow-hidden rounded-[2rem] bg-gradient-to-br ${item.color} shadow-xl`}><Image src={item.image} alt={item.title} fill sizes="(max-width: 640px) 100vw, 25vw" className="object-cover transition duration-500 group-hover:scale-105" /><div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-white/5" /><div className="absolute inset-x-0 bottom-0 flex items-end justify-between p-6 text-white"><div><h3 className="text-2xl font-black">{item.title}</h3><p className="mt-1 text-sm font-semibold text-white/80">{item.subtitle}</p></div><span className="grid size-11 place-items-center rounded-full bg-white text-slate-950 transition group-hover:rotate-45"><ArrowUpRight /></span></div></Link>)}</div></section>;
+// (ver ADR 0005) -- solo se mapean imagen/subtitulo para las que ya tienen
+// un asset en public/images/categories/. Las demas caen al tile de solo
+// gradiente en vez de mostrar una imagen que no les corresponde.
+const tileContent: Record<string, TileContent> = {
+  juguetes: { subtitle: "Personajes que inspiran", image: "/images/categories/figuras.webp", color: "from-yellow-300 to-orange-400" },
+  "mochilas-y-morrales": { subtitle: "Estilo para cada aventura", image: "/images/categories/mochilas.webp", color: "from-cyan-400 to-blue-500" },
+  "bebes-y-primera-infancia": { subtitle: "Primeros descubrimientos", color: "from-pink-300 to-fuchsia-400" },
+  educativos: { subtitle: "Aprender jugando", color: "from-emerald-400 to-teal-600" },
+  "accion-y-aventura": { subtitle: "Para explorar sin límites", color: "from-red-500 to-rose-700" },
+  variedades: { subtitle: "Un poco de todo", color: "from-violet-400 to-purple-600" },
+};
+
+const defaultTile: TileContent = { subtitle: "Explora esta categoría", color: "from-slate-400 to-slate-600" };
+
+export function CategoryTiles({ categories }: { categories: Category[] }) {
+  const roots = categories.filter((category) => !category.parentId);
+
+  if (roots.length === 0) return null;
+
+  return (
+    <section className="mx-auto max-w-7xl px-4 py-14">
+      <div className="mb-8 flex items-end justify-between gap-4">
+        <div>
+          <span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">Explora por mundos</span>
+          <h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Encuentra tu próximo tesoro</h2>
+        </div>
+        <Link href="/catalog" className="hidden font-black text-cyan-700 sm:block">Ver todo →</Link>
+      </div>
+      <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+        {roots.map((category) => {
+          const content = tileContent[category.handle] ?? defaultTile;
+
+          return (
+            <Link
+              key={category.id}
+              href={`/catalog?category=${encodeURIComponent(category.name)}`}
+              className={`group relative min-h-64 overflow-hidden rounded-[2rem] bg-gradient-to-br ${content.color} shadow-xl`}
+            >
+              {content.image && (
+                <>
+                  <Image src={content.image} alt={category.name} fill sizes="(max-width: 640px) 100vw, (max-width: 1024px) 33vw, 16vw" className="object-cover transition duration-500 group-hover:scale-105" />
+                  <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-white/5" />
+                </>
+              )}
+              <div className="absolute inset-x-0 bottom-0 flex items-end justify-between p-6 text-white">
+                <div>
+                  <h3 className="text-xl font-black">{category.name}</h3>
+                  <p className="mt-1 text-sm font-semibold text-white/80">{content.subtitle}</p>
+                </div>
+                <span className="grid size-11 shrink-0 place-items-center rounded-full bg-white text-slate-950 transition group-hover:rotate-45">
+                  <ArrowUpRight />
+                </span>
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </section>
+  );
 }

workloads/ecommerce/components/layout/navbar.tsx

@@ -3,42 +3,28 @@
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
-import { Heart, Menu, MessageCircle, PackageCheck, ShoppingCart, UserRound } from "lucide-react";
+import { ChevronDown, Heart, LayoutGrid, Menu, MessageCircle, PackageCheck, ShoppingCart, UserRound } from "lucide-react";
-import { Suspense, useState } from "react";
+import { Suspense, useEffect, useMemo, useRef, useState } from "react";
 import { PredictiveSearch } from "@/components/search/predictive-search";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
-import type { Product } from "@/lib/headless/types";
+import type { Category, Product } from "@/lib/headless/types";
 import { useCartStore } from "@/store/cart-store";
 import { useWishlistStore } from "@/store/wishlist-store";
 
-type CategoryLink = {
+type CategoryNode = Category & { children: Category[] };
-  label: string;
-  href: string;
-  category?: string;
-  collection?: string;
-  section?: string;
-  root?: boolean;
-};
 
-const categories: CategoryLink[] = [
+function buildCategoryTree(categories: Category[]): CategoryNode[] {
-  { label: "Juguetes para bebés", href: "/catalog?category=Figuras", category: "Figuras" },
+  return categories
-  {
+    .filter((category) => !category.parentId)
-    label: "Educativos",
+    .map((root) => ({
-    href: "/catalog?category=Figuras&section=educativos",
+      ...root,
-    category: "Figuras",
+      children: categories.filter((category) => category.parentId === root.id),
-    section: "educativos",
+    }));
-  },
+}
-  { label: "Muñecas y peluches", href: "/catalog?category=Peluches", category: "Peluches" },
-  { label: "Acción y aventura", href: "/catalog?collection=Marvel", collection: "Marvel" },
-  { label: "Mochilas", href: "/catalog?category=Mochilas", category: "Mochilas" },
-  { label: "Variedades", href: "/catalog", root: true },
-];
 
-const collections = ["Toy Story", "Marvel", "Intensamente", "Lilo & Stitch", "Frozen"];
+export function Navbar({ products, categories }: { products: Product[]; categories: Category[] }) {
-
-export function Navbar({ products }: { products: Product[] }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const [accountOpen, setAccountOpen] = useState(false);
   const items = useCartStore((state) => state.items);
@@ -50,6 +36,14 @@ export function Navbar({ products }: { products: Product[] }) {
   const count = cartHydrated ? items.reduce((sum, item) => sum + item.quantity, 0) : 0;
   const wishlistCount = wishlistHydrated ? wishlistProducts.length : 0;
 
+  const tree = useMemo(() => buildCategoryTree(categories), [categories]);
+  // Derivado de los productos reales (no de un endpoint de colecciones):
+  // solo aparecen colecciones que de verdad tienen productos hoy.
+  const collections = useMemo(
+    () => [...new Set(products.map((product) => product.collection).filter(Boolean))],
+    [products],
+  );
+
   return (
     <header className="sticky top-0 z-40 border-b border-slate-200/80 bg-white/95 shadow-sm backdrop-blur-xl">
       <div className="bg-gradient-to-r from-amber-300 via-yellow-200 to-lime-200 px-4 py-2 text-center text-xs font-black text-slate-950 sm:text-sm">
@@ -77,8 +71,8 @@ export function Navbar({ products }: { products: Product[] }) {
         </div>
       </div>
 
-      <Suspense fallback={<DesktopCategoryNavigationFallback onOpenMenu={() => setMenuOpen(true)} />}>
+      <Suspense fallback={<DesktopCategoryNavigationFallback tree={tree} onOpenMenu={() => setMenuOpen(true)} />}>
-        <DesktopCategoryNavigation onOpenMenu={() => setMenuOpen(true)} />
+        <DesktopCategoryNavigation tree={tree} onOpenMenu={() => setMenuOpen(true)} />
       </Suspense>
 
       <Sheet open={menuOpen} onOpenChange={setMenuOpen}>
@@ -90,14 +84,18 @@ export function Navbar({ products }: { products: Product[] }) {
           <div className="flex-1 overflow-y-auto p-6">
             <p className="mb-3 text-xs font-black uppercase tracking-[.16em] text-fuchsia-600">Categorías</p>
             <div className="grid gap-2">
-              <Suspense fallback={<MobileCategoryLinksFallback onNavigate={() => setMenuOpen(false)} />}>
+              <Suspense fallback={<MobileCategoryLinksFallback tree={tree} onNavigate={() => setMenuOpen(false)} />}>
-                <MobileCategoryLinks onNavigate={() => setMenuOpen(false)} />
+                <MobileCategoryLinks tree={tree} onNavigate={() => setMenuOpen(false)} />
               </Suspense>
             </div>
-            <p className="mb-3 mt-8 text-xs font-black uppercase tracking-[.16em] text-violet-600">Colecciones</p>
+            {collections.length > 0 && (
-            <div className="flex flex-wrap gap-2">
+              <>
-              {collections.map((collection) => <Link key={collection} href={`/catalog?collection=${encodeURIComponent(collection)}`} onClick={() => setMenuOpen(false)} className="rounded-full bg-slate-100 px-4 py-2 text-sm font-bold hover:bg-violet-100 hover:text-violet-700">{collection}</Link>)}
+                <p className="mb-3 mt-8 text-xs font-black uppercase tracking-[.16em] text-violet-600">Colecciones</p>
-            </div>
+                <div className="flex flex-wrap gap-2">
+                  {collections.map((collection) => <Link key={collection} href={`/catalog?collection=${encodeURIComponent(collection)}`} onClick={() => setMenuOpen(false)} className="rounded-full bg-slate-100 px-4 py-2 text-sm font-bold hover:bg-violet-100 hover:text-violet-700">{collection}</Link>)}
+                </div>
+              </>
+            )}
             <div className="mt-8 grid grid-cols-2 gap-3 sm:hidden">
               <Button variant="outline" onClick={() => { setMenuOpen(false); setAccountOpen(true); }}><UserRound className="size-4" />Cuenta</Button>
               <Button variant="outline" onClick={() => { setMenuOpen(false); openWishlist(); }}><Heart className="size-4" />Favoritos</Button>
@@ -127,140 +125,218 @@ function useCategoryNavigationState() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const currentCategory = searchParams.get("category") ?? "";
-  const currentCollection = searchParams.get("collection") ?? "";
-  const currentSection = searchParams.get("section") ?? "";
   const isCatalog = pathname === "/catalog";
 
-  const isCategoryActive = (item: CategoryLink) => {
+  return {
-    if (!isCatalog) return false;
+    isAllActive: isCatalog && !currentCategory,
-
+    isActive: (name: string) => isCatalog && currentCategory === name,
-    if (item.root) {
-      return !currentCategory && !currentCollection && !currentSection;
-    }
-
-    return (
-      (item.category ?? "") === currentCategory &&
-      (item.collection ?? "") === currentCollection &&
-      (item.section ?? "") === currentSection
-    );
   };
-
-  return { isCategoryActive };
 }
 
-function DesktopCategoryNavigation({ onOpenMenu }: { onOpenMenu: () => void }) {
+function pillClass(active: boolean): string {
-  const { isCategoryActive } = useCategoryNavigationState();
+  return `shrink-0 rounded-full px-4 py-2 text-sm font-extrabold transition ${
+    active
+      ? "bg-gradient-to-r from-cyan-500 to-violet-500 text-white shadow-lg shadow-violet-950/30"
+      : "text-white/90 hover:bg-gradient-to-r hover:from-cyan-500 hover:to-violet-500 hover:text-white"
+  }`;
+}
 
+function mobileLinkClass(active: boolean): string {
+  return `rounded-2xl border px-4 py-3 font-extrabold transition ${
+    active
+      ? "border-violet-500 bg-violet-50 text-violet-700"
+      : "border-slate-200 hover:border-cyan-400 hover:bg-cyan-50"
+  }`;
+}
+
+function DesktopCategoryNavigation({ tree, onOpenMenu }: { tree: CategoryNode[]; onOpenMenu: () => void }) {
+  const { isActive, isAllActive } = useCategoryNavigationState();
+  return <CategoryNavBar tree={tree} onOpenMenu={onOpenMenu} isActive={isActive} isAllActive={isAllActive} />;
+}
+
+function DesktopCategoryNavigationFallback({ tree, onOpenMenu }: { tree: CategoryNode[]; onOpenMenu: () => void }) {
+  return <CategoryNavBar tree={tree} onOpenMenu={onOpenMenu} isActive={() => false} isAllActive={false} />;
+}
+
+function CategoryNavBar({
+  tree,
+  onOpenMenu,
+  isActive,
+  isAllActive,
+}: {
+  tree: CategoryNode[];
+  onOpenMenu: () => void;
+  isActive: (name: string) => boolean;
+  isAllActive: boolean;
+}) {
   return (
     <nav className="border-b-4 border-fuchsia-500 bg-slate-950 text-white">
-      <div className="mx-auto flex max-w-7xl items-center gap-1 overflow-x-auto px-4 py-2 [scrollbar-width:none]">
+      <div className="mx-auto flex max-w-7xl items-center gap-1 px-4 py-2">
         <Button
           variant="ghost"
           size="icon"
           onClick={onOpenMenu}
           aria-label="Abrir menú principal"
-          className="mr-3 shrink-0 text-white hover:bg-white/10"
+          className="mr-2 shrink-0 text-white hover:bg-white/10"
         >
           <Menu />
         </Button>
 
-        {categories.map((category) => {
+        <DepartmentsMegaMenu tree={tree} isActive={isActive} />
-          const active = isCategoryActive(category);
 
-          return (
+        <Link href="/catalog" prefetch={false} aria-current={isAllActive ? "page" : undefined} className={pillClass(isAllActive)}>
-            <Link
+          Todo
-              key={category.label}
-              href={category.href}
-              prefetch={false}
-              aria-current={active ? "page" : undefined}
-              className={`shrink-0 rounded-full px-4 py-2 text-sm font-extrabold transition ${
-                active
-                  ? "bg-gradient-to-r from-cyan-500 to-violet-500 text-white shadow-lg shadow-violet-950/30"
-                  : "text-white/90 hover:bg-gradient-to-r hover:from-cyan-500 hover:to-violet-500 hover:text-white"
-              }`}
-            >
-              {category.label}
-            </Link>
-          );
-        })}
-      </div>
-    </nav>
-  );
-}
-
-function DesktopCategoryNavigationFallback({ onOpenMenu }: { onOpenMenu: () => void }) {
-  return (
-    <nav className="border-b-4 border-fuchsia-500 bg-slate-950 text-white">
-      <div className="mx-auto flex max-w-7xl items-center gap-1 overflow-x-auto px-4 py-2 [scrollbar-width:none]">
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={onOpenMenu}
-          aria-label="Abrir menú principal"
-          className="mr-3 shrink-0 text-white hover:bg-white/10"
-        >
-          <Menu />
-        </Button>
-
-        {categories.map((category) => (
-          <Link
-            key={category.label}
-            href={category.href}
-            prefetch={false}
-            className="shrink-0 rounded-full px-4 py-2 text-sm font-extrabold text-white/90 transition hover:bg-gradient-to-r hover:from-cyan-500 hover:to-violet-500 hover:text-white"
-          >
-            {category.label}
-          </Link>
-        ))}
-      </div>
-    </nav>
-  );
-}
-
-function MobileCategoryLinks({ onNavigate }: { onNavigate: () => void }) {
-  const { isCategoryActive } = useCategoryNavigationState();
-
-  return (
-    <>
-      {categories.map((category) => {
-        const active = isCategoryActive(category);
-
-        return (
-          <Link
-            key={category.label}
-            href={category.href}
-            prefetch={false}
-            aria-current={active ? "page" : undefined}
-            onClick={onNavigate}
-            className={`rounded-2xl border px-4 py-3 font-extrabold transition ${
-              active
-                ? "border-violet-500 bg-violet-50 text-violet-700"
-                : "border-slate-200 hover:border-cyan-400 hover:bg-cyan-50"
-            }`}
-          >
-            {category.label}
-          </Link>
-        );
-      })}
-    </>
-  );
-}
-
-function MobileCategoryLinksFallback({ onNavigate }: { onNavigate: () => void }) {
-  return (
-    <>
-      {categories.map((category) => (
-        <Link
-          key={category.label}
-          href={category.href}
-          prefetch={false}
-          onClick={onNavigate}
-          className="rounded-2xl border border-slate-200 px-4 py-3 font-extrabold transition hover:border-cyan-400 hover:bg-cyan-50"
-        >
-          {category.label}
         </Link>
+      </div>
+    </nav>
+  );
+}
+
+function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActive: (name: string) => boolean }) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handlePointerDown(event: PointerEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) setOpen(false);
+    }
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+
+  return (
+    <div ref={containerRef} className="relative shrink-0" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        aria-expanded={open}
+        aria-haspopup="true"
+        className={`flex items-center gap-1.5 ${pillClass(open)}`}
+      >
+        <LayoutGrid className="size-4" />
+        Departamentos
+        <ChevronDown className={`size-3.5 opacity-70 transition-transform ${open ? "rotate-180" : ""}`} />
+      </button>
+
+      {open && (
+        <div className="absolute left-0 top-full z-50 mt-1 w-[min(92vw,64rem)] rounded-2xl border border-slate-800 bg-slate-950 p-6 shadow-2xl">
+          <div className="grid grid-cols-2 gap-x-6 gap-y-5 sm:grid-cols-3 lg:grid-cols-6">
+            {tree.map((root) => (
+              <div key={root.id}>
+                <Link
+                  href={`/catalog?category=${encodeURIComponent(root.name)}`}
+                  prefetch={false}
+                  aria-current={isActive(root.name) ? "page" : undefined}
+                  onClick={() => setOpen(false)}
+                  className={`block text-sm font-black uppercase tracking-wide transition ${
+                    isActive(root.name) ? "text-fuchsia-400" : "text-white hover:text-fuchsia-400"
+                  }`}
+                >
+                  {root.name}
+                </Link>
+                {root.children.length > 0 && (
+                  <ul className="mt-2.5 grid gap-1.5">
+                    {root.children.map((child) => (
+                      <li key={child.id}>
+                        <Link
+                          href={`/catalog?category=${encodeURIComponent(child.name)}`}
+                          prefetch={false}
+                          aria-current={isActive(child.name) ? "page" : undefined}
+                          onClick={() => setOpen(false)}
+                          className={`block text-sm transition ${isActive(child.name) ? "font-bold text-violet-300" : "text-white/70 hover:text-white"}`}
+                        >
+                          {child.name}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function MobileCategoryLinks({ tree, onNavigate }: { tree: CategoryNode[]; onNavigate: () => void }) {
+  const { isActive, isAllActive } = useCategoryNavigationState();
+
+  return (
+    <>
+      <Link
+        href="/catalog"
+        prefetch={false}
+        aria-current={isAllActive ? "page" : undefined}
+        onClick={onNavigate}
+        className={mobileLinkClass(isAllActive)}
+      >
+        Todo el catálogo
+      </Link>
+
+      {tree.map((root) => (
+        <div key={root.id} className="contents">
+          <Link
+            href={`/catalog?category=${encodeURIComponent(root.name)}`}
+            prefetch={false}
+            aria-current={isActive(root.name) ? "page" : undefined}
+            onClick={onNavigate}
+            className={mobileLinkClass(isActive(root.name))}
+          >
+            {root.name}
+          </Link>
+          {root.children.map((child) => (
+            <Link
+              key={child.id}
+              href={`/catalog?category=${encodeURIComponent(child.name)}`}
+              prefetch={false}
+              aria-current={isActive(child.name) ? "page" : undefined}
+              onClick={onNavigate}
+              className={`${mobileLinkClass(isActive(child.name))} ml-4 text-sm`}
+            >
+              {child.name}
+            </Link>
+          ))}
+        </div>
       ))}
     </>
   );
 }
 
+function MobileCategoryLinksFallback({ tree, onNavigate }: { tree: CategoryNode[]; onNavigate: () => void }) {
+  return (
+    <>
+      <Link href="/catalog" prefetch={false} onClick={onNavigate} className={mobileLinkClass(false)}>
+        Todo el catálogo
+      </Link>
+
+      {tree.map((root) => (
+        <div key={root.id} className="contents">
+          <Link href={`/catalog?category=${encodeURIComponent(root.name)}`} prefetch={false} onClick={onNavigate} className={mobileLinkClass(false)}>
+            {root.name}
+          </Link>
+          {root.children.map((child) => (
+            <Link
+              key={child.id}
+              href={`/catalog?category=${encodeURIComponent(child.name)}`}
+              prefetch={false}
+              onClick={onNavigate}
+              className={`${mobileLinkClass(false)} ml-4 text-sm`}
+            >
+              {child.name}
+            </Link>
+          ))}
+        </div>
+      ))}
+    </>
+  );
+}

workloads/ecommerce/frontend/patches/deployment.yaml

@@ -25,7 +25,7 @@ spec:
         runAsUser: 1001
       containers:
         - name: app
-          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.122
+          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.143
           env:
             - name: HEADLESS_PROVIDER
               value: medusa
@@ -64,9 +64,20 @@ spec:
           # binario de node para esto, pero eso solo funciona si el
           # bounding set del contenedor lo permite -- drop: ALL del base
           # lo bloquea igual, root o no root. Mismo motivo que docs-portal.
+          #
+          # readOnlyRootFilesystem: true -- revisado en código (2026-08-24,
+          # aún no probado en vivo con este cambio) que esta imagen sí
+          # escribe a disco en runtime, no solo en build: el servidor
+          # standalone de Next.js cachea a ./.next/cache tanto el
+          # optimizador de imágenes (next.config.ts trae remotePatterns,
+          # sin "unoptimized: true") como el revalidateTag("medusa-products")
+          # de app/api/revalidate/route.ts (cache handler por default, sin
+          # uno custom tipo Redis). De ahí los dos volumeMounts de abajo:
+          # sin ellos, con root filesystem de solo lectura, ambas rutas
+          # fallarían al intentar escribir.
           securityContext:
             allowPrivilegeEscalation: false
-            readOnlyRootFilesystem: false
+            readOnlyRootFilesystem: true
             capabilities:
               drop:
                 - ALL
@@ -79,3 +90,13 @@ spec:
             limits:
               cpu: "1"
               memory: 768Mi
+          volumeMounts:
+            - name: next-cache
+              mountPath: /app/.next/cache
+            - name: tmp
+              mountPath: /tmp
+      volumes:
+        - name: next-cache
+          emptyDir: {}
+        - name: tmp
+          emptyDir: {}

workloads/ecommerce/lib/headless/client.ts

@@ -22,3 +22,7 @@ export async function getProductBySlug(slug: string) {
 export async function searchProducts(query: string, limit?: number) {
   return provider().searchProducts(query, limit);
 }
+
+export async function getCategories() {
+  return provider().getCategories();
+}

workloads/ecommerce/lib/headless/providers/medusa.ts

@@ -1,5 +1,6 @@
 import type {
   CatalogProvider,
+  Category,
   Product,
   ProductFilters,
   ProductVariant,
@@ -66,188 +67,16 @@ type MedusaProductsResponse = {
   offset?: number;
 };
 
-type LegacyMeta = {
+type MedusaProductCategory = {
-  category: string;
+  id: string;
-  collection: string;
+  name?: string | null;
-  brand: string;
+  handle?: string | null;
-  ageRange: string;
+  parent_category_id?: string | null;
-  featured: boolean;
+  rank?: number | null;
-  isNew: boolean;
-  fallbackImage: string;
-  fallbackThumbnail: string;
 };
 
-const legacyProductMeta: Record<string, LegacyMeta> = {
+type MedusaCategoriesResponse = {
-  "toy-story-5-rex": {
+  product_categories: MedusaProductCategory[];
-    "category": "Figuras",
-    "collection": "Toy Story",
-    "brand": "Disney Pixar",
-    "ageRange": "3+",
-    "featured": true,
-    "isNew": true,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-001-toy-story-5-rex.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-001-toy-story-5-rex.webp"
-  },
-  "toy-story-5-buzz-lightyear": {
-    "category": "Figuras",
-    "collection": "Toy Story",
-    "brand": "Disney Pixar",
-    "ageRange": "3+",
-    "featured": true,
-    "isNew": true,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-002-toy-story-5-buzz-lightyear.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-002-toy-story-5-buzz-lightyear.webp"
-  },
-  "toy-story-5-jessie": {
-    "category": "Figuras",
-    "collection": "Toy Story",
-    "brand": "Disney Pixar",
-    "ageRange": "3+",
-    "featured": true,
-    "isNew": true,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-003-toy-story-5-jessie.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-003-toy-story-5-jessie.webp"
-  },
-  "toy-story-5-woody": {
-    "category": "Figuras",
-    "collection": "Toy Story",
-    "brand": "Disney Pixar",
-    "ageRange": "3+",
-    "featured": true,
-    "isNew": true,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-004-toy-story-5-woody.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-004-toy-story-5-woody.webp"
-  },
-  "intensamente-furia": {
-    "category": "Peluches",
-    "collection": "Intensamente",
-    "brand": "Disney",
-    "ageRange": "3+",
-    "featured": true,
-    "isNew": true,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-005-intensamente-furia.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-005-intensamente-furia.webp"
-  },
-  "intensamente-tristeza": {
-    "category": "Peluches",
-    "collection": "Intensamente",
-    "brand": "Disney",
-    "ageRange": "3+",
-    "featured": true,
-    "isNew": true,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-006-intensamente-tristeza.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-006-intensamente-tristeza.webp"
-  },
-  "minnie-y-mickey-mouse": {
-    "category": "Peluches",
-    "collection": "Mickey & Minnie",
-    "brand": "Disney",
-    "ageRange": "3+",
-    "featured": true,
-    "isNew": false,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-007-minnie-y-mickey-mouse.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-007-minnie-y-mickey-mouse.webp"
-  },
-  "angel-lilo-y-stitch": {
-    "category": "Peluches",
-    "collection": "Lilo & Stitch",
-    "brand": "Disney",
-    "ageRange": "3+",
-    "featured": true,
-    "isNew": false,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-008-angel-lilo-y-stitch.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-008-angel-lilo-y-stitch.webp"
-  },
-  "mochilas-disney-coleccion-marvel": {
-    "category": "Mochilas",
-    "collection": "Marvel",
-    "brand": "Marvel",
-    "ageRange": "6+",
-    "featured": false,
-    "isNew": false,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-009-mochilas-disney-coleccion-marvel.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-009-mochilas-disney-coleccion-marvel.webp"
-  },
-  "mochila-ligera-y-resistente-al-agua-de-disney-frozen-mochila-escolar-y-de-viaje-con-multiples-compa": {
-    "category": "Mochilas",
-    "collection": "Frozen",
-    "brand": "Disney",
-    "ageRange": "6+",
-    "featured": false,
-    "isNew": false,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-010-mochila-ligera-y-resistente-al-agua-de-d.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-010-mochila-ligera-y-resistente-al-agua-de-d.webp"
-  },
-  "mochila-escolar-de-spider-man-de-disney-moda-estudiantil-libro-de-gran-capacidad-mochila-ligera": {
-    "category": "Mochilas",
-    "collection": "Marvel",
-    "brand": "Marvel",
-    "ageRange": "6+",
-    "featured": false,
-    "isNew": false,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-011-mochila-escolar-de-spider-man-de-disney-.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-011-mochila-escolar-de-spider-man-de-disney-.webp"
-  },
-  "disney-mochila-de-poliester-ultraligera-y-transpirable-de-gran-tamano-y-multiples-colores-dimension": {
-    "category": "Mochilas",
-    "collection": "Disney",
-    "brand": "Disney",
-    "ageRange": "6+",
-    "featured": false,
-    "isNew": false,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-012-disney-mochila-de-poliester-ultraligera-.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-012-disney-mochila-de-poliester-ultraligera-.webp"
-  },
-  "mochila-pequena-bob-esponja": {
-    "category": "Mochilas",
-    "collection": "Bob Esponja",
-    "brand": "Disney",
-    "ageRange": "6+",
-    "featured": false,
-    "isNew": false,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-013-mochila-pequena-bob-esponja.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-013-mochila-pequena-bob-esponja.webp"
-  },
-  "mochila-casual-de-gran-capacidad-con-estampado-de-bob-esponja-unisex-bolsa-escolar-de-dibujos-anim": {
-    "category": "Mochilas",
-    "collection": "Bob Esponja",
-    "brand": "Disney",
-    "ageRange": "6+",
-    "featured": false,
-    "isNew": false,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-014-mochila-casual-de-gran-capacidad-con-est.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-014-mochila-casual-de-gran-capacidad-con-est.webp"
-  },
-  "mochila-escolar-estilo-britanico-de-disney-con-proteccion-de-la-columna-vertebral-nueva-mochila-de": {
-    "category": "Mochilas",
-    "collection": "Disney",
-    "brand": "Disney",
-    "ageRange": "6+",
-    "featured": false,
-    "isNew": false,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-015-mochila-escolar-estilo-britanico-de-disn.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-015-mochila-escolar-estilo-britanico-de-disn.webp"
-  },
-  "disney-mochila-iron-man-de-poliester-ultraligera-y-transpirable-de-gran-tamano-dimensiones-46-cm-x": {
-    "category": "Mochilas",
-    "collection": "Marvel",
-    "brand": "Marvel",
-    "ageRange": "6+",
-    "featured": false,
-    "isNew": false,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-016-disney-mochila-iron-man-de-poliester-ult.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-016-disney-mochila-iron-man-de-poliester-ult.webp"
-  },
-  "mochila-de-disney-marvel-capitan-america-de-gran-capacidad-ligera-y-resistente-a-salpicaduras-par": {
-    "category": "Mochilas",
-    "collection": "Marvel",
-    "brand": "Marvel",
-    "ageRange": "6+",
-    "featured": false,
-    "isNew": false,
-    "fallbackImage": "https://shop.cruzcloud.net/images/products/ari-017-mochila-de-disney-marvel-capitan-america.webp",
-    "fallbackThumbnail": "https://shop.cruzcloud.net/images/thumbnails/ari-017-mochila-de-disney-marvel-capitan-america.webp"
-  }
 };
 
 function backendUrl(): string {
@@ -338,7 +167,6 @@ function mapVariant(variant: MedusaVariant): ProductVariant {
 
 function mapProduct(product: MedusaProduct): Product {
   const slug = product.handle || product.id;
-  const legacy = legacyProductMeta[slug];
 
   const variant = product.variants?.[0];
   const calculated = variant?.calculated_price;
@@ -346,24 +174,16 @@ function mapProduct(product: MedusaProduct): Product {
   const category =
     product.categories?.[0]?.name ||
     stringMetadata(product.metadata, "category") ||
-    legacy?.category ||
     "Variedades";
 
   const collection =
     product.collection?.title ||
     stringMetadata(product.metadata, "collection") ||
-    legacy?.collection ||
     "";
 
-  const brand =
+  const brand = stringMetadata(product.metadata, "brand") || "ARI Shopping";
-    stringMetadata(product.metadata, "brand") ||
-    legacy?.brand ||
-    "ARI Shopping";
 
-  const ageRange =
+  const ageRange = stringMetadata(product.metadata, "ageRange") || "Todas";
-    stringMetadata(product.metadata, "ageRange") ||
-    legacy?.ageRange ||
-    "Todas";
 
   const images = [
     ...(product.images || [])
@@ -371,15 +191,8 @@ function mapProduct(product: MedusaProduct): Product {
       .filter(Boolean),
   ];
 
-  if (images.length === 0 && legacy?.fallbackImage) {
-    images.push(legacy.fallbackImage);
-  }
-
   const thumbnail =
-    product.thumbnail ||
+    product.thumbnail || images[0] || "/images/brand/logo-ari.png";
-    images[0] ||
-    legacy?.fallbackThumbnail ||
-    "/images/brand/logo-ari.png";
 
   const price =
     typeof calculated?.calculated_amount === "number"
@@ -426,14 +239,8 @@ function mapProduct(product: MedusaProduct): Product {
     currency: normalizeCurrency(calculated?.currency_code),
     priceLabel: price === null ? "Consultar disponibilidad" : "",
     available,
-    featured:
+    featured: booleanMetadata(product.metadata, "featured"),
-      booleanMetadata(product.metadata, "featured") ||
+    isNew: booleanMetadata(product.metadata, "isNew"),
-      legacy?.featured ||
-      false,
-    isNew:
-      booleanMetadata(product.metadata, "isNew") ||
-      legacy?.isNew ||
-      false,
     image: images[0] || thumbnail,
     thumbnail,
     images: images.length > 0 ? images : [thumbnail],
@@ -528,7 +335,7 @@ async function fetchProducts(
     // region_id.
     region_id: regionId(),
     fields:
-      "+metadata,+images,+tags,+categories,+collection,+variants.inventory_quantity,+variants.calculated_price,+variants.options",
+      "+metadata,+images,+tags,+categories.*,+collection,+variants.inventory_quantity,+variants.calculated_price,+variants.options",
   });
 
   if (filters?.query) {
@@ -545,11 +352,40 @@ async function fetchProducts(
     .filter((product) => matchesFilters(product, filters));
 }
 
+async function fetchCategories(): Promise<Category[]> {
+  const params = new URLSearchParams({
+    limit: "100",
+    fields: "id,name,handle,rank,parent_category_id",
+  });
+
+  const response = await medusaFetch<MedusaCategoriesResponse>(
+    "/store/product-categories",
+    params,
+  );
+
+  // Ordenar por rank preserva el orden de la taxonomia tal como se creo
+  // (ver ADR 0005) -- los hijos de cada padre quedan en el mismo orden
+  // relativo porque el arbol se arma filtrando este arreglo ya ordenado.
+  return response.product_categories
+    .slice()
+    .sort((a, b) => (a.rank ?? 0) - (b.rank ?? 0))
+    .map((category) => ({
+      id: category.id,
+      name: category.name || "",
+      handle: category.handle || category.id,
+      parentId: category.parent_category_id ?? null,
+    }));
+}
+
 export const medusaCatalogProvider: CatalogProvider = {
   async getProducts(filters) {
     return fetchProducts(filters);
   },
 
+  async getCategories() {
+    return fetchCategories();
+  },
+
   async getProductBySlug(slug) {
     const params = new URLSearchParams({
       handle: slug,
@@ -559,7 +395,7 @@ export const medusaCatalogProvider: CatalogProvider = {
       // region_id.
       region_id: regionId(),
       fields:
-        "+metadata,+images,+tags,+categories,+collection,+variants.inventory_quantity,+variants.calculated_price,+variants.options",
+        "+metadata,+images,+tags,+categories.*,+collection,+variants.inventory_quantity,+variants.calculated_price,+variants.options",
     });
 
     const response = await medusaFetch<MedusaProductsResponse>(

workloads/ecommerce/lib/headless/providers/mock.ts

@@ -1,5 +1,5 @@
 import catalog from "@/data/products.json";
-import type { CatalogProvider, Product, ProductFilters } from "@/lib/headless/types";
+import type { CatalogProvider, Category, Product, ProductFilters } from "@/lib/headless/types";
 
 const products = catalog satisfies Product[];
 
@@ -39,4 +39,16 @@ export const mockCatalogProvider: CatalogProvider = {
   async searchProducts(query, limit = 6) {
     return products.filter((product) => matches(product, { query })).slice(0, limit);
   },
+  async getCategories(): Promise<Category[]> {
+    // El catalogo mock no tiene jerarquia real (a diferencia de Medusa) --
+    // se devuelve una lista plana de las categorias que ya usan los
+    // productos mock, todas sin padre.
+    const names = [...new Set(products.map((product) => product.category))].filter(Boolean);
+    return names.map((name) => ({
+      id: name,
+      name,
+      handle: normalize(name).replace(/\s+/g, "-"),
+      parentId: null,
+    }));
+  },
 };

workloads/ecommerce/lib/headless/providers/shopify.ts

@@ -42,4 +42,7 @@ export const shopifyCatalogProvider: CatalogProvider = {
   async searchProducts(): Promise<Product[]> {
     return notImplemented();
   },
+  async getCategories() {
+    return notImplemented();
+  },
 };

workloads/ecommerce/lib/headless/types.ts

@@ -39,8 +39,16 @@ export interface ProductFilters {
   maxPrice?: number;
 }
 
+export interface Category {
+  id: string;
+  name: string;
+  handle: string;
+  parentId: string | null;
+}
+
 export interface CatalogProvider {
   getProducts(filters?: ProductFilters): Promise<Product[]>;
   getProductBySlug(slug: string): Promise<Product | null>;
   searchProducts(query: string, limit?: number): Promise<Product[]>;
+  getCategories(): Promise<Category[]>;
 }