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/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/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>