feat(ecommerce): logo circular en el header (pedido del usuario)

Reemplaza el lockup rectangular (logo-ari.svg) por un isotipo circular
nuevo (logo-ari-circular.svg) con el icono mariposa + wordmark 'ARI
shopping' integrados dentro del mismo circulo azul -- el formato que
tenia la version previa a ADR 0008, preferido sobre el rectangulo
segun mockup de referencia del usuario. El footer conserva el lockup
rectangular, donde si tiene sentido como bloque de color autocontenido
sobre el fondo oscuro.

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

@@ -10,16 +10,20 @@ type TileContent = { subtitle: string; image?: string; color: string };
 // (ver ADR 0005) -- solo se mapean imagen/subtitulo para las que ya tienen
 // un asset en public/images/categories/. Las demas caen al tile de solo
 // gradiente en vez de mostrar una imagen que no les corresponde.
+// Fondos pastel solidos (patron Walmart-inspirado, ADR 0008 sub-fase 4)
+// en vez de los gradientes saturados originales del esquema arcoiris --
+// 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: "from-yellow-300 to-orange-400" },
+  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: "from-cyan-400 to-blue-500" },
+  "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: "from-pink-300 to-fuchsia-400" },
+  "bebes-y-primera-infancia": { subtitle: "Primeros descubrimientos", color: "bg-rose-100" },
-  educativos: { subtitle: "Aprender jugando", color: "from-emerald-400 to-teal-600" },
+  educativos: { subtitle: "Aprender jugando", color: "bg-emerald-100" },
-  "accion-y-aventura": { subtitle: "Para explorar sin límites", color: "from-red-500 to-rose-700" },
+  "accion-y-aventura": { subtitle: "Para explorar sin límites", color: "bg-orange-100" },
-  variedades: { subtitle: "Un poco de todo", color: "from-violet-400 to-purple-600" },
+  variedades: { subtitle: "Un poco de todo", color: "bg-violet-100" },
 };
 
-const defaultTile: TileContent = { subtitle: "Explora esta categoría", color: "from-slate-400 to-slate-600" };
+const defaultTile: TileContent = { subtitle: "Explora esta categoría", color: "bg-slate-100" };
 
 // Tile individual reutilizado tanto por la seccion de mundos del home
 // como por el grid del catalogo (tiles promocionales intercalados,
@@ -31,20 +35,20 @@ export function PromoTile({ category, className = "" }: { category: Category; cl
   return (
     <Link
       href={`/catalog?category=${encodeURIComponent(category.name)}`}
-      className={cn(`group relative min-h-64 overflow-hidden rounded-[2rem] bg-gradient-to-br ${content.color} shadow-xl`, className)}
+      className={cn(`group relative min-h-64 overflow-hidden rounded-[2rem] ${content.color} shadow-sm ring-1 ring-slate-900/5`, className)}
     >
       {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" />
-          <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-white/5" />
+          <div className="absolute inset-x-0 bottom-0 h-2/5 bg-gradient-to-t from-white/95 via-white/70 to-transparent" />
         </>
       )}
-      <div className="absolute inset-x-0 bottom-0 flex items-end justify-between p-6 text-white">
+      <div className="absolute inset-x-0 bottom-0 flex items-end justify-between p-6 text-slate-900">
         <div>
           <h3 className="text-xl font-black">{category.name}</h3>
-          <p className="mt-1 text-sm font-semibold text-white/80">{content.subtitle}</p>
+          <p className="mt-1 text-sm font-semibold text-slate-600">{content.subtitle}</p>
         </div>
-        <span className="grid size-11 shrink-0 place-items-center rounded-full bg-white text-slate-950 transition group-hover:rotate-45">
+        <span className="grid size-11 shrink-0 place-items-center rounded-full bg-ari-marino text-white transition group-hover:rotate-45">
           <ArrowUpRight />
         </span>
       </div>
@@ -61,10 +65,10 @@ export function CategoryTiles({ categories }: { categories: Category[] }) {
     <section className="mx-auto max-w-7xl px-4 py-14">
       <div className="mb-8 flex items-end justify-between gap-4">
         <div>
-          <span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">Explora por mundos</span>
+          <span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral">Explora por mundos</span>
           <h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Encuentra tu próximo tesoro</h2>
         </div>
-        <Link href="/catalog" className="hidden font-black text-cyan-700 sm:block">Ver todo →</Link>
+        <Link href="/catalog" className="hidden font-black text-ari-marino sm:block">Ver todo →</Link>
       </div>
       <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
         {roots.map((category) => (

workloads/ecommerce/components/layout/navbar.tsx

@@ -52,9 +52,13 @@ export function Navbar({ products, categories }: { products: Product[]; categori
       <div className="relative overflow-visible bg-white">
         <div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-ari-coral-claro" />
         <div className="mx-auto grid max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-4 px-4 py-4 lg:gap-8">
+          {/* Isotipo circular con icono + wordmark integrados (como en la
+              version previa a ADR 0008), pedido explicito del usuario en
+              vez del lockup rectangular. logo-ari.svg (rectangular) se
+              mantiene para el footer. */}
           <Link href="/" aria-label="ARI shopping" className="shrink-0">
             {/* eslint-disable-next-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}
-            <img src="/images/brand/logo-ari.svg" alt="ARI shopping" className="h-11 w-auto lg:h-14" width={200} height={64} />
+            <img src="/images/brand/logo-ari-circular.svg" alt="ARI shopping" className="size-16 lg:size-20" width={200} height={200} />
           </Link>
           <PredictiveSearch />
           <div className="flex items-center gap-2">

workloads/ecommerce/components/search/predictive-search.tsx

@@ -5,7 +5,6 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Search, X } from "lucide-react";
 import { FormEvent, useEffect, useState } from "react";
-import { Input } from "@/components/ui/input";
 import type { Product } from "@/lib/headless/types";
 
 export function PredictiveSearch() {
@@ -55,7 +54,29 @@ export function PredictiveSearch() {
   return (
     <form onSubmit={submit} className="relative w-full">
       <div className="flex items-center rounded-full border-2 border-slate-200 bg-white pl-5 pr-1.5 shadow-sm transition focus-within:border-ari-marino focus-within:ring-4 focus-within:ring-ari-coral-claro/30">
-        <Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Busca juguetes, mochilas, personajes…" className="h-[48px] border-0 bg-transparent p-0 shadow-none focus-visible:ring-0" />
+        {/* input propio (no el <Input> compartido) -- ese componente trae su
+            propio focus:ring-4 focus:ring-cyan-300/30 hardcodeado que no se
+            anulaba de forma confiable via tailwind-merge dentro de este
+            contenedor compuesto (input + boton circular), causando un
+            segundo ring visible al hacer foco. Mas simple y robusto no
+            heredar clases de foco que hay que pelear despues.
+
+            focus-visible:outline-none (no outline-none a secas): globals.css
+            define un outline de accesibilidad global por teclado
+            (input:focus-visible, azul de marca) que le gana en
+            especificidad a un outline-none plano. El wrapper de este
+            componente ya tiene su propio indicador de foco visible
+            (focus-within:border-ari-marino + ring amarillo, mismo patron
+            que button.tsx) que cumple el mismo proposito de accesibilidad
+            sin duplicarlo -- variante focus-visible: en vez de la base
+            iguala la especificidad de la regla global (mismo truco que ya
+            usa button.tsx) y evita el doble indicador de foco. */}
+        <input
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder="Busca juguetes, mochilas, personajes…"
+          className="h-[48px] w-full border-0 bg-transparent p-0 text-sm text-slate-950 focus-visible:outline-none"
+        />
         {query && <button type="button" aria-label="Limpiar búsqueda" className="mr-1 shrink-0 rounded-full p-1.5 text-slate-400 hover:bg-slate-100" onClick={() => setQuery("")}><X className="size-4" /></button>}
         <button type="submit" aria-label="Buscar" className="grid size-10 shrink-0 place-items-center rounded-full bg-ari-marino text-white transition hover:brightness-110">
           <Search className="size-4.5" />

workloads/ecommerce/frontend/patches/deployment.yaml

@@ -25,7 +25,7 @@ spec:
         runAsUser: 1001
       containers:
         - name: app
-          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.189
+          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.195
           env:
             - name: HEADLESS_PROVIDER
               value: medusa

workloads/ecommerce/public/images/brand/logo-ari-circular.svg

@@ -0,0 +1,17 @@
+<!-- ADR 0008, paleta "Azul & Amarillo". Isotipo circular (formato de la
+     version previa a ADR 0008, pedido explicito del usuario en vez del
+     lockup rectangular de logo-ari.svg): mariposa geometrica de 4 elipses
+     + wordmark "ARI shopping", todo dentro del mismo circulo azul.
+     Ver docs-portal/docs/decisiones/0008-identidad-navy-coral.md -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" role="img" aria-label="ARI shopping">
+  <circle cx="100" cy="100" r="98" fill="#0055B8"/>
+  <g transform="translate(100 68) scale(2.6) translate(-17 -11)">
+    <ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#FFC220"/>
+    <ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#FFC220"/>
+    <ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#FFDD73"/>
+    <ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#FFDD73"/>
+    <rect x="16" y="3" width="2" height="18" rx="1" fill="#0055B8"/>
+  </g>
+  <text x="100" y="132" text-anchor="middle" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="38" fill="#FFFFFF">ARI</text>
+  <text x="100" y="153" text-anchor="middle" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="14" letter-spacing="3" fill="#FFC220">shopping</text>
+</svg>