fix(ecommerce): "También te puede gustar" ya no espera a la columna más alta

El buy-box (precio/carrito/sugeridos) es sticky y suele terminar
siendo la columna más alta del grid de producto -- al ser un grid de
una sola fila, el carrusel de recomendaciones de abajo (sección
aparte) solo empezaba una vez terminaba la columna MÁS alta,
dejando un hueco vacío enorme debajo de galería+descripción cuando
esas dos son más cortas que el buy-box.

Se reestructura a un grid de 2 filas desde xl: el buy-box ahora ocupa
ambas filas (row-span-2, sigue sticky), y "También te puede gustar"
pasa a ser la 2da fila pero solo debajo de galería+descripción
(col-span-2) -- corre en paralelo al buy-box en vez de esperarlo.

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

workloads/ecommerce/app/product/[slug]/page.tsx

@@ -44,8 +44,13 @@ export default async function ProductPage({ params }: ProductPageProps) {
           lado (ver ProductGallery). Por debajo de xl, el buy box cae al
           flujo normal en la 2da columna, sin duplicar el componente en
           el DOM (evita el id="product-buy-button" repetido que rompería
-          el IntersectionObserver de MobileAddToCart). */}
-      <section className="mx-auto grid max-w-[1600px] gap-10 px-4 py-10 lg:grid-cols-[1.08fr_.92fr] lg:py-16 xl:grid-cols-[1.1fr_.75fr_360px]">
+          el IntersectionObserver de MobileAddToCart).
+          El buy box ocupa las 2 filas (xl:row-span-2) para no quedar
+          atado a la altura de galería+descripción -- "También te puede
+          gustar" pasa a ser la 2da fila debajo de esas dos columnas
+          (xl:col-span-2), en paralelo al buy box sticky, en vez de
+          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>
           <span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral">{product.category} · {product.collection}</span>
@@ -74,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:self-start">
+        <div className="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>
@@ -87,13 +92,13 @@ export default async function ProductPage({ params }: ProductPageProps) {
             </div>
           )}
         </div>
+        {recommended.length > 0 && (
+          <div className="pb-16 lg:col-span-2">
+            <h2 className="mb-7 text-3xl font-black">También te puede gustar</h2>
+            <ProductCarousel products={recommended} />
+          </div>
+        )}
       </section>
-      {recommended.length > 0 && (
-        <section className="mx-auto max-w-[1600px] px-4 pb-24">
-          <h2 className="mb-7 text-3xl font-black">También te puede gustar</h2>
-          <ProductCarousel products={recommended} />
-        </section>
-      )}
       <MobileAddToCart product={product} />
     </>
   );