fix(catalog): scroll propio en el sidebar de filtros

El <aside> de Filtros es sticky pero sin altura máxima ni overflow
propio -- con 30+ categorías más marca/edad/precio, el panel se pasa
del viewport y queda inalcanzable (reportado en vivo: había que bajar
el zoom del navegador para ver "Marca"/"Edad"/"Precio").

overflow-y-auto + max-h acotado al viewport (solo en lg, que es donde
aplica sticky) le da scroll propio al panel sin depender del scroll de
la página.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01THZFwPzrwv6VAbuwmaf5vR

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

@@ -352,7 +352,11 @@ export function CatalogClient({
       </div>
 
       <div className="grid gap-8 lg:grid-cols-[260px_1fr]">
-        <aside className="h-fit space-y-6 rounded-lg border border-slate-100 bg-white p-6 shadow-lg shadow-ari-marino/5 lg:sticky lg:top-44">
+        {/* overflow-y-auto + max-h propio en lg: sticky no le da scroll
+            propio al contenido, y con 30+ categorias mas marca/edad/precio
+            el panel se pasa del viewport sin forma de llegar al resto salvo
+            bajando el zoom del navegador (reportado en vivo). */}
+        <aside className="h-fit space-y-6 overflow-y-auto rounded-lg border border-slate-100 bg-white p-6 shadow-lg shadow-ari-marino/5 lg:sticky lg:top-44 lg:max-h-[calc(100vh-13rem)]">
           <div className="flex items-center justify-between">
             <strong className="flex items-center gap-2 text-lg font-black">
               <SlidersHorizontal className="size-5 text-ari-coral-claro" />

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

@@ -2,19 +2,36 @@
 
 import Image from "next/image";
 import { Maximize2, Minus, Plus, RotateCcw, ZoomIn } from "lucide-react";
-import { PointerEvent, WheelEvent, useRef, useState } from "react";
+import { MouseEvent, PointerEvent, WheelEvent, useRef, useState } from "react";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 
 interface Offset { x: number; y: number }
 interface DragState { pointerId: number; startX: number; startY: number; originX: number; originY: number }
+interface HoverZoomOrigin { x: number; y: number }
+
+// Zoom automatico al pasar el cursor (estilo lupa clasico de e-commerce)
+// sobre la imagen principal -- solo mouse (mousemove no dispara de forma
+// continua en touch, asi que en mobile simplemente no aparece el efecto,
+// sin romper nada). Independiente del zoom interactivo del modal
+// (click -> Dialog con scale/drag), que sigue igual.
+const HOVER_ZOOM_SCALE = 2.2;
 
 export function ProductGallery({ images, name }: { images: string[]; name: string }) {
   const [selected, setSelected] = useState(images[0] ?? "");
   const [open, setOpen] = useState(false);
   const [scale, setScale] = useState(1);
   const [offset, setOffset] = useState<Offset>({ x: 0, y: 0 });
+  const [hoverZoom, setHoverZoom] = useState<HoverZoomOrigin | null>(null);
   const drag = useRef<DragState | null>(null);
 
+  const trackHoverZoom = (event: MouseEvent<HTMLButtonElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    setHoverZoom({
+      x: ((event.clientX - rect.left) / rect.width) * 100,
+      y: ((event.clientY - rect.top) / rect.height) * 100,
+    });
+  };
+
   const applyScale = (next: number) => {
     const value = Math.min(3, Math.max(1, Number(next.toFixed(2))));
     setScale(value);
@@ -44,8 +61,24 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin
       </div>
       <Dialog open={open} onOpenChange={changeOpen}>
         <DialogTrigger asChild>
-          <button type="button" className="group relative order-1 aspect-square overflow-hidden rounded-[2rem] bg-slate-50 lg:order-2">
-            <Image src={selected} alt={name} fill priority sizes="(max-width: 1024px) 100vw, 50vw" className="object-cover transition duration-500 group-hover:scale-[1.03]" />
+          <button
+            type="button"
+            className="group relative order-1 aspect-square cursor-zoom-in overflow-hidden rounded-[2rem] bg-slate-50 lg:order-2"
+            onMouseMove={trackHoverZoom}
+            onMouseLeave={() => setHoverZoom(null)}
+          >
+            <Image
+              src={selected}
+              alt={name}
+              fill
+              priority
+              sizes="(max-width: 1024px) 100vw, 50vw"
+              className="object-cover transition-transform duration-150 ease-out"
+              style={{
+                transform: `scale(${hoverZoom ? HOVER_ZOOM_SCALE : 1})`,
+                transformOrigin: hoverZoom ? `${hoverZoom.x}% ${hoverZoom.y}%` : "center",
+              }}
+            />
             <span className="absolute bottom-5 right-5 inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-xs font-black shadow-xl"><ZoomIn className="size-4" />Zoom interactivo</span>
           </button>
         </DialogTrigger>