feat(ecommerce): ADR 0007 Opcion 2 "Atelier calido" - Sub-fase 1+3

Identidad visual propia premium (ver docs-portal/docs/decisiones/0007-identidad-visual-propia.md,
revision 2). Correccion de proceso respecto al intento anterior
(v1.0.176, revertido): en vez de un token aislado en un solo boton,
esta pasada toca de punta a punta los componentes que se ven juntos en
la misma pantalla para que ninguna card quede a mitad de camino.

- globals.css: paleta ciruela/carbon-oscuro/cobre/hueso (reemplaza
  cyan/magenta/yellow/blue, confirmado sin uso previo). Domine
  (titulares/precio) + Inter (UI/cuerpo) via next/font/google -- antes
  "Inter" era solo un fallback de CSS sin garantia real de carga.
- button.tsx: variant "magenta" renombrada a "primary" (ya no es
  magenta, es ciruela solida) y su color redefinido -- renombrada en
  los 8 archivos que la usaban para no dejar un nombre enganoso.
  Radio base rounded-full -> rounded-lg, ring de foco retintado.
- product-card.tsx: badges NUEVO/TOP/descuento en la paleta nueva (no
  mas fucsia/amarillo neon), precio en Domine, radio y sombra
  consistentes con el boton.
- catalog-client.tsx: solo clases de color/radio en breadcrumb, filtro
  de precio, pills de filtro y boton de reset -- cero cambios de
  logica.

Header, footer, home y pagina de producto/drawers quedan con la
paleta anterior a proposito -- Sub-fases 2, 4 y 5 pendientes.

Validado con `docker build --target builder` (npm ci + next build con
typecheck completo) -- compila limpio.

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

@@ -323,18 +323,18 @@ export function CatalogClient({
       <div className="mb-8">
         {breadcrumb.length > 0 && (
           <nav aria-label="Breadcrumb" className="mb-4 flex flex-wrap items-center gap-1.5 text-xs font-bold text-slate-500">
-            <Link href="/catalog" prefetch={false} className="hover:text-fuchsia-600">
+            <Link href="/catalog" prefetch={false} className="hover:text-ari-ciruela">
               Inicio
             </Link>
             {breadcrumb.map((node, index) => (
               <span key={node.id} className="flex items-center gap-1.5">
                 <ChevronRight className="size-3" />
                 {index === breadcrumb.length - 1 ? (
-                  <span aria-current="page" className="text-slate-900">
+                  <span aria-current="page" className="text-ari-carbon">
                     {node.name}
                   </span>
                 ) : (
-                  <Link href={`/catalog?category=${encodeURIComponent(node.name)}`} prefetch={false} className="hover:text-fuchsia-600">
+                  <Link href={`/catalog?category=${encodeURIComponent(node.name)}`} prefetch={false} className="hover:text-ari-ciruela">
                     {node.name}
                   </Link>
                 )}
@@ -342,23 +342,23 @@ export function CatalogClient({
             ))}
           </nav>
         )}
-        <span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">
+        <span className="text-xs font-black uppercase tracking-[.18em] text-ari-ciruela">
           Catálogo completo
         </span>
-        <h1 className="mt-2 text-5xl font-black tracking-tight">Todos los tesoros</h1>
+        <h1 className="font-display mt-2 text-5xl font-bold tracking-tight text-ari-carbon">Todos los tesoros</h1>
         <p className="mt-3 text-slate-500">
           Filtra por categoría, marca o edad sin recargar la página.
         </p>
       </div>
 
       <div className="grid gap-8 lg:grid-cols-[260px_1fr]">
-        <aside className="h-fit space-y-6 rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-slate-900/5 lg:sticky lg:top-44">
+        <aside className="h-fit space-y-6 rounded-lg border border-slate-100 bg-white p-6 shadow-lg shadow-ari-carbon-oscuro/5 lg:sticky lg:top-44">
           <div className="flex items-center justify-between">
             <strong className="flex items-center gap-2 text-lg font-black">
-              <SlidersHorizontal className="size-5 text-cyan-600" />
+              <SlidersHorizontal className="size-5 text-ari-cobre" />
               Filtros
             </strong>
-            <button onClick={reset} className="text-xs font-black text-fuchsia-600">
+            <button onClick={reset} className="text-xs font-black text-ari-ciruela">
               <X className="mr-1 inline size-3" />
               Limpiar
             </button>
@@ -392,7 +392,7 @@ export function CatalogClient({
                   step={5000}
                   value={maxPrice}
                   onChange={(event) => setMaxPrice(Number(event.target.value))}
-                  className="w-full accent-fuchsia-500"
+                  className="w-full accent-ari-ciruela"
                 />
                 <p className="mt-2 text-xs font-bold text-slate-500">
                   Hasta ${maxPrice.toLocaleString("es-CO")}
@@ -412,7 +412,7 @@ export function CatalogClient({
             <select
               value={sort}
               onChange={(event) => setSort(event.target.value)}
-              className="h-11 rounded-full border border-slate-200 bg-white px-4 text-sm font-bold"
+              className="h-11 rounded-lg border border-slate-200 bg-white px-4 text-sm font-bold"
             >
               <option value="featured">Destacados</option>
               <option value="new">Novedades</option>
@@ -431,10 +431,10 @@ export function CatalogClient({
               )}
             </div>
           ) : (
-            <div className="grid min-h-80 place-items-center rounded-3xl border border-dashed border-slate-300 text-center">
+            <div className="grid min-h-80 place-items-center rounded-lg border border-dashed border-slate-300 text-center">
               <div>
                 <p className="text-xl font-black">No encontramos productos</p>
-                <Button variant="magenta" className="mt-4" onClick={reset}>
+                <Button variant="primary" className="mt-4" onClick={reset}>
                   Restablecer filtros
                 </Button>
               </div>
@@ -468,10 +468,10 @@ function Filter({
             type="button"
             key={value}
             onClick={() => onChange(value)}
-            className={`rounded-full px-3 py-2 text-xs font-bold transition ${
+            className={`rounded-md px-3 py-2 text-xs font-bold transition ${
               selected === value
-                ? "bg-slate-950 text-white"
-                : "bg-slate-100 text-slate-600 hover:bg-cyan-100"
+                ? "bg-ari-carbon-oscuro text-white"
+                : "bg-slate-100 text-slate-600 hover:bg-ari-cobre/10"
             }`}
           >
             {value}