Merge fix/adr0008-tiles-foto-flotante into main

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

@@ -4,7 +4,7 @@ import { ArrowUpRight } from "lucide-react";
 import type { Category } from "@/lib/headless/types";
 import { cn } from "@/lib/utils";
 
-type TileContent = { subtitle: string; image?: string; color: string; scrim?: string };
+type TileContent = { subtitle: string; image?: string; color: string };
 
 // No hay fotografia real todavia para las 6 categorias raiz de la taxonomia
 // (ver ADR 0005) -- solo se mapean imagen/subtitulo para las que ya tienen
@@ -15,8 +15,8 @@ type TileContent = { subtitle: string; image?: string; color: string; scrim?: st
 // un tono pastel distinto por categoria, no una escala de marca (serian
 // todos casi iguales), pero coordinados en la misma temperatura suave.
 const tileContent: Record<string, TileContent> = {
-  juguetes: { subtitle: "Personajes que inspiran", image: "/images/categories/figuras.webp", color: "bg-amber-100", scrim: "from-amber-100" },
-  "mochilas-y-morrales": { subtitle: "Estilo para cada aventura", image: "/images/categories/mochilas.webp", color: "bg-sky-100", scrim: "from-sky-100" },
+  juguetes: { subtitle: "Personajes que inspiran", image: "/images/categories/figuras.webp", color: "bg-amber-100" },
+  "mochilas-y-morrales": { subtitle: "Estilo para cada aventura", image: "/images/categories/mochilas.webp", color: "bg-sky-100" },
   "bebes-y-primera-infancia": { subtitle: "Primeros descubrimientos", color: "bg-rose-100" },
   educativos: { subtitle: "Aprender jugando", color: "bg-emerald-100" },
   "accion-y-aventura": { subtitle: "Para explorar sin límites", color: "bg-orange-100" },
@@ -37,15 +37,16 @@ export function PromoTile({ category, className = "" }: { category: Category; cl
       href={`/catalog?category=${encodeURIComponent(category.name)}`}
       className={cn(`group relative min-h-64 overflow-hidden rounded-[2rem] ${content.color} shadow-sm ring-1 ring-slate-900/5`, className)}
     >
+      {/* Patron real de Walmart (confirmado con referencia del usuario):
+          la foto NO cubre la tarjeta completa -- flota, contenida, sobre
+          el fondo pastel solido, igual que las tarjetas sin foto. Un
+          intento anterior con la foto a pantalla completa + una franja
+          de degradado abajo para el texto quedaba desconectado del resto
+          de tarjetas solidas, reportado en produccion. */}
       {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" />
-          {/* Franja tintada con el pastel propio de la categoria (no
-              blanco generico) -- sin esto la tarjeta con foto se veia
-              desconectada de las tarjetas solidas vecinas, reportado
-              en produccion. */}
-          <div className={`absolute inset-x-0 bottom-0 h-3/5 bg-gradient-to-t ${content.scrim ?? "from-white"} via-white/50 to-transparent`} />
-        </>
+        <div className="absolute inset-x-6 top-6 bottom-24">
+          <Image src={content.image} alt="" fill sizes="(max-width: 640px) 45vw, (max-width: 1024px) 25vw, 14vw" className="object-contain object-top drop-shadow-xl transition duration-500 group-hover:scale-105" />
+        </div>
       )}
       <div className="absolute inset-x-0 bottom-0 flex items-end justify-between p-6 text-slate-900">
         <div>