chore: Styling catalog

src/pages/catalog/Catalog.module.css

@@ -0,0 +1,34 @@
+
+.layout {
+  display: flex;
+  gap: 2rem;
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.catalog {
+  flex: 2 1 0;          /* ocupa ~2/3 del ancho disponible */
+  min-width: 0;         /* evita desbordamientos horizontales */
+}
+
+.order {
+  flex: 1 1 0;          /* ocupa ~1/3 del ancho disponible */
+  position: sticky;
+  top: 2rem;            /* se queda pegada al hacer scroll */
+  height: fit-content;  /* sólo el alto que necesite su contenido */
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  padding: 1.5rem;
+}
+
+/* Responsive: en pantallas estrechas se apilan */
+@media (max-width: 768px) {
+  .layout {
+    flex-direction: column;
+  }
+  .order {
+    position: static;   /* quitamos sticky en móviles */
+  }
+}

src/pages/catalog/Catalog.tsx

@@ -1,6 +1,8 @@
 import { ProductCards } from "./components";
 import { useEffect, useState } from "react";
 import type { Product } from "../../types";
+import Order from "./components/order/Order";
+import styles from "./Catalog.module.css";
 
 
 const Catalog = () => {
@@ -21,9 +23,14 @@ const Catalog = () => {
 
 
   return (
-    <>
-      <ProductCards products={products}/>
-    </>
+    <div className={styles.layout}>
+      <section className={styles.catalog}>
+        <ProductCards products={products}/>
+      </section>
+      <aside className={styles.order}>
+        <Order/>
+      </aside>
+    </div>
   )
 }