feat(ecommerce): ADR 0008 "Navy & Coral" - Sub-fase 2 (header + footer)

Aplica la paleta marino/coral al navbar y footer, reemplazando los ultimos restos del esquema arcoiris original (barra de promo amber/lima, linea decorativa cyan/violeta/fucsia, pills y mega-menu fucsia/violeta) documentados en el ADR 0008 seccion 5. Aplica logo-ari.svg (lockup nuevo) en navbar y footer, reemplazando logo-ari.png y el marco circular que no encajaba con el aspect ratio del lockup. Ver docs-portal/docs/decisiones/0008-identidad-navy-coral.md.
chore(gitops): deploy Docs Portal v1.0.181 [skip ci]
2026-08-27 09:42:59 -05:00 · 2026-08-27 14:05:14 +00:00 · 2026-08-27 14:00:48 +00:00 · 2026-08-27 08:52:01 -05:00 · 2026-08-27 08:42:47 -05:00 · 2026-08-27 06:30:42 +00:00
45 changed files with 1821 additions and 198 deletions
@@ -21,7 +21,9 @@ ENV CI=true \
    S3_ACCESS_KEY_ID=build-access-key \
    S3_SECRET_ACCESS_KEY=build-secret-key \
    S3_BUCKET=ari-shopping \
-    S3_ENDPOINT=http://127.0.0.1:9000
+    S3_ENDPOINT=http://127.0.0.1:9000 \
+    MEILISEARCH_HOST=http://127.0.0.1:7700 \
+    MEILISEARCH_API_KEY=build-only-meili-key

 COPY package.json package-lock.json .npmrc ./

@@ -10,6 +10,91 @@ const required = (name: string): string => {
  return value
 }

+// Mismos campos derivados de metadata/categories/collection/variants que
+// mapProduct() en workloads/ecommerce/lib/headless/providers/medusa.ts --
+// el documento indexado debe reflejar exactamente lo que el storefront
+// ya muestra, no una vista distinta del catálogo.
+function stringMetadata(
+  metadata: Record<string, unknown> | null | undefined,
+  key: string,
+): string {
+  const value = metadata?.[key]
+  return typeof value === "string" ? value : ""
+}
+
+function booleanMetadata(
+  metadata: Record<string, unknown> | null | undefined,
+  key: string,
+): boolean {
+  const value = metadata?.[key]
+  return value === true || value === "true"
+}
+
+async function meilisearchProductTransformer(
+  document: Record<string, unknown>,
+) {
+  const metadata = (document.metadata ?? null) as Record<
+    string,
+    unknown
+  > | null
+  const categories = document.categories as
+    | Array<{ name?: string | null }>
+    | null
+    | undefined
+  const collection = document.collection as { title?: string | null } | null
+  const variants = document.variants as
+    | Array<{
+        inventory_quantity?: number | null
+        manage_inventory?: boolean | null
+        allow_backorder?: boolean | null
+        prices?: Array<{
+          amount?: number | null
+          currency_code?: string | null
+        }> | null
+      }>
+    | null
+    | undefined
+  const variant = variants?.[0]
+  const tags = document.tags as Array<{ value?: string | null }> | null
+
+  const category =
+    categories?.[0]?.name || stringMetadata(metadata, "category") || "Variedades"
+
+  const available =
+    !variant ||
+    variant.allow_backorder === true ||
+    variant.manage_inventory === false ||
+    (variant.inventory_quantity ?? 0) > 0
+
+  // variants.calculated_price requiere currency_code/region_id en el
+  // contexto de pricing, que el workflow de sync interno del plugin no
+  // provee -- hace fallar TODO el job de indexado (confirmado en vivo:
+  // "Method calculatePrices requires currency_code in the pricing
+  // context"). variants.prices es la lista cruda de precios (sin
+  // resolver promociones/reglas), no necesita contexto -- alcanza para
+  // el filtro/orden por precio en la busqueda, que no necesita el
+  // precio final promocional.
+  const copPrice = variant?.prices?.find(
+    (price) => price.currency_code?.toLowerCase() === "cop",
+  )
+
+  return {
+    id: document.id,
+    name: document.title || "Producto ARI Shopping",
+    shortDescription: document.subtitle || document.title || "",
+    description: document.description || "",
+    category,
+    collection: collection?.title || stringMetadata(metadata, "collection") || "",
+    brand: stringMetadata(metadata, "brand") || "ARI Shopping",
+    ageRange: stringMetadata(metadata, "ageRange") || "Todas",
+    tags: (tags || []).map((tag) => tag.value).filter(Boolean),
+    price: typeof copPrice?.amount === "number" ? copPrice.amount : null,
+    available,
+    isNew: booleanMetadata(metadata, "isNew"),
+    featured: booleanMetadata(metadata, "featured"),
+  }
+}
+
 module.exports = defineConfig({
  projectConfig: {
    databaseUrl: required("DATABASE_URL"),
@@ -73,4 +158,72 @@ module.exports = defineConfig({
      },
    },
  ],
+
+  // ADR 0006 Etapa 2. Sin required(): a diferencia de S3/DB, Meilisearch
+  // es un servicio nuevo y todavia no probado en produccion en un host
+  // con historial de swap saturado -- si esta caido o mal configurado,
+  // el plugin se degrada solo (soporta enabled:false, "silently skipped"
+  // segun su propio README) en vez de tumbar el arranque de Medusa
+  // entero, que es lo que si haria required().
+  plugins: [
+    {
+      resolve: "@rokmohar/medusa-plugin-meilisearch",
+      options: {
+        config: {
+          host: process.env.MEILISEARCH_HOST ?? "",
+          apiKey: process.env.MEILISEARCH_API_KEY ?? "",
+        },
+        settings: {
+          products: {
+            type: "products",
+            enabled: Boolean(process.env.MEILISEARCH_HOST),
+            primaryKey: "id",
+            // Campos que el plugin pide via query.graph antes de pasarlos
+            // al transformer de arriba -- si falta alguno acá, llega
+            // undefined al transformer sin importar lo que este haga.
+            fields: [
+              "id",
+              "title",
+              "subtitle",
+              "description",
+              "handle",
+              "status",
+              "thumbnail",
+              "metadata",
+              "tags.value",
+              "categories.name",
+              "collection.title",
+              "variants.inventory_quantity",
+              "variants.manage_inventory",
+              "variants.allow_backorder",
+              "variants.prices.amount",
+              "variants.prices.currency_code",
+            ],
+            indexSettings: {
+              // Tabla de ADR 0006 §3: Buscable / Filtrable-faceta / Ordenable.
+              searchableAttributes: [
+                "name",
+                "shortDescription",
+                "description",
+                "category",
+                "collection",
+                "brand",
+                "tags",
+              ],
+              filterableAttributes: [
+                "category",
+                "collection",
+                "brand",
+                "ageRange",
+                "price",
+                "available",
+              ],
+              sortableAttributes: ["price", "isNew", "featured"],
+            },
+            transformer: meilisearchProductTransformer,
+          },
+        },
+      },
+    },
+  ],
 })
@@ -12,7 +12,8 @@
        "@medusajs/admin-sdk": "2.18.0",
        "@medusajs/cli": "2.18.0",
        "@medusajs/framework": "2.18.0",
-        "@medusajs/medusa": "2.18.0"
+        "@medusajs/medusa": "2.18.0",
+        "@rokmohar/medusa-plugin-meilisearch": "^1.4.1"
      },
      "devDependencies": {
        "@swc/core": "^1.7.28",
@@ -6561,6 +6562,28 @@
        "node": ">=14.0.0"
      }
    },
+    "node_modules/@rokmohar/medusa-plugin-meilisearch": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@rokmohar/medusa-plugin-meilisearch/-/medusa-plugin-meilisearch-1.4.3.tgz",
+      "integrity": "sha512-+iStv5sc2vuLk+O7OcQLlNR99fMBhGdBOJMCmDJYoTFGhzBA4ZEV18IIr2xqxUDgdQo1haF0TtYv3JmRQUuY1w==",
+      "license": "MIT",
+      "dependencies": {
+        "meilisearch": "^0.56.0"
+      },
+      "engines": {
+        "node": ">=22"
+      },
+      "peerDependencies": {
+        "@medusajs/admin-sdk": "^2.15.2",
+        "@medusajs/framework": "^2.15.2",
+        "@medusajs/medusa": "^2.15.2",
+        "@medusajs/ui": "^4.1.12",
+        "@tanstack/react-query": "5.64.2",
+        "awilix": "^8.0.1",
+        "react": "^18",
+        "react-dom": "^18"
+      }
+    },
    "node_modules/@rolldown/pluginutils": {
      "version": "1.0.0-beta.27",
      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -11774,6 +11797,12 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/meilisearch": {
+      "version": "0.56.0",
+      "resolved": "https://registry.npmjs.org/meilisearch/-/meilisearch-0.56.0.tgz",
+      "integrity": "sha512-kBXba8DcSrLWHYqopCm2JL90oBy97VdIfHkP1ii7/eHufeEEEk9Zu5Vv/IFQpNzmhEpWszVFVlGvZoI6QJeGzA==",
+      "license": "MIT"
+    },
    "node_modules/merge-descriptors": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
@@ -14,7 +14,8 @@
    "@medusajs/admin-sdk": "2.18.0",
    "@medusajs/cli": "2.18.0",
    "@medusajs/framework": "2.18.0",
-    "@medusajs/medusa": "2.18.0"
+    "@medusajs/medusa": "2.18.0",
+    "@rokmohar/medusa-plugin-meilisearch": "^1.4.1"
  },
  "devDependencies": {
    "@swc/core": "^1.7.28",
@@ -0,0 +1,197 @@
+import type { MedusaRequest, MedusaResponse } from "@medusajs/framework";
+import {
+  ContainerRegistrationKeys,
+  QueryContext,
+} from "@medusajs/framework/utils";
+import {
+  MEILISEARCH_MODULE,
+  type MeiliSearchService,
+} from "@rokmohar/medusa-plugin-meilisearch";
+
+// Las rutas /store/meilisearch/* que trae el plugin (ver ADR 0006 nota de
+// implementacion) no devuelven facetDistribution -- necesitamos esta
+// ruta propia para pedirlo explicitamente via additionalOptions.facets,
+// que el servicio del plugin reenvia tal cual al cliente Meilisearch.
+const FACETS = ["category", "collection", "brand", "ageRange"];
+
+// Mismos campos que ya usa el storefront contra /store/products
+// (workloads/ecommerce/lib/headless/providers/medusa.ts) -- una vez que
+// Meilisearch nos da los ids candidatos, volvemos a Medusa via
+// query.graph para precio/inventario reales, nunca confiamos en el
+// valor indexado (puede tener unos segundos de retraso respecto al
+// evento de sincronizacion).
+const PRODUCT_FIELDS = [
+  "id",
+  "handle",
+  "title",
+  "subtitle",
+  "description",
+  "thumbnail",
+  "external_id",
+  "metadata",
+  "images.url",
+  "tags.value",
+  "categories.name",
+  "collection.title",
+  "variants.id",
+  "variants.title",
+  "variants.sku",
+  "variants.manage_inventory",
+  "variants.allow_backorder",
+  "variants.inventory_quantity",
+  "variants.calculated_price.calculated_amount",
+  "variants.calculated_price.original_amount",
+  "variants.calculated_price.currency_code",
+  "variants.options.value",
+  "variants.options.option.title",
+];
+
+function stringParam(
+  query: MedusaRequest["query"],
+  name: string,
+): string | undefined {
+  const value = query[name];
+  return typeof value === "string" && value.length > 0 ? value : undefined;
+}
+
+function numberParam(
+  query: MedusaRequest["query"],
+  name: string,
+): number | undefined {
+  const value = stringParam(query, name);
+  if (!value) return undefined;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+// Meilisearch usa comillas dobles para valores de filtro con espacios;
+// escapamos las que vengan en el propio valor para no romper la sintaxis.
+function escapeFilterValue(value: string): string {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+
+export async function GET(req: MedusaRequest, res: MedusaResponse) {
+  const meilisearchService = req.scope.resolve<MeiliSearchService>(
+    MEILISEARCH_MODULE,
+  );
+  const query = req.scope.resolve(ContainerRegistrationKeys.QUERY);
+
+  const q = stringParam(req.query, "q") ?? "";
+  const limit = numberParam(req.query, "limit") ?? 24;
+  const offset = numberParam(req.query, "offset") ?? 0;
+  // calculated_price exige region_id/currency_code en el contexto de
+  // pricing o query.graph tira "Method calculatePrices requires
+  // currency_code in the pricing context" (mismo error que ya rompio el
+  // job de sync -- ver medusa-config.ts). El storefront ya manda
+  // region_id contra /store/products (medusa.ts, regionId()); esta ruta
+  // espera el mismo query param.
+  const regionId = stringParam(req.query, "region_id");
+
+  const filterParts: string[] = [];
+  for (const facet of ["category", "collection", "brand", "ageRange"]) {
+    const value = stringParam(req.query, facet);
+    if (value) {
+      filterParts.push(`${facet} = "${escapeFilterValue(value)}"`);
+    }
+  }
+  const minPrice = numberParam(req.query, "minPrice");
+  const maxPrice = numberParam(req.query, "maxPrice");
+  if (typeof minPrice === "number") filterParts.push(`price >= ${minPrice}`);
+  if (typeof maxPrice === "number") filterParts.push(`price <= ${maxPrice}`);
+
+  const indexes = await meilisearchService.getIndexesByType("products");
+
+  if (indexes.length === 0) {
+    // Meilisearch no configurado o el indice "products" esta
+    // deshabilitado -- degradar a "sin resultados" en vez de 500, el
+    // frontend cae de nuevo a su propio filtrado si esta ruta falla.
+    res.json({ products: [], facetDistribution: {}, count: 0, limit, offset });
+    return;
+  }
+
+  const results = await Promise.all(
+    indexes.map((indexKey) =>
+      meilisearchService.search(indexKey, q, {
+        filter: filterParts.length ? filterParts.join(" AND ") : undefined,
+        paginationOptions: { limit, offset },
+        additionalOptions: { facets: FACETS },
+      }),
+    ),
+  );
+
+  const hits = results.flatMap((result) => result.hits);
+  const totalCount = results.reduce(
+    (sum, result) => sum + result.estimatedTotalHits,
+    0,
+  );
+
+  const facetDistribution: Record<string, Record<string, number>> = {};
+  for (const result of results) {
+    const resultFacets = (
+      result as unknown as {
+        facetDistribution?: Record<string, Record<string, number>>;
+      }
+    ).facetDistribution;
+    if (!resultFacets) continue;
+    for (const [facet, values] of Object.entries(resultFacets)) {
+      facetDistribution[facet] ??= {};
+      for (const [value, count] of Object.entries(values)) {
+        facetDistribution[facet][value] =
+          (facetDistribution[facet][value] ?? 0) + count;
+      }
+    }
+  }
+
+  const productIds = hits.map((hit) => (hit as { id: string }).id);
+
+  if (productIds.length === 0) {
+    res.json({ products: [], facetDistribution, count: 0, limit, offset });
+    return;
+  }
+
+  // calculatePrices exige currency_code en el contexto -- no alcanza con
+  // region_id solo (a diferencia de /store/products nativo, que lo
+  // resuelve el middleware setPricingContext; esta ruta no pasa por esa
+  // cadena). Resolvemos la moneda real de la region en vez de asumir COP
+  // fijo, por si el catalogo suma otra region/moneda mas adelante.
+  let currencyCode: string | undefined;
+  if (regionId) {
+    const { data: regions = [] } = await query.graph({
+      entity: "region",
+      fields: ["id", "currency_code"],
+      filters: { id: regionId },
+    });
+    currencyCode = regions[0]?.currency_code;
+  }
+
+  const { data: products = [] } = await query.graph({
+    entity: "product",
+    fields: PRODUCT_FIELDS,
+    filters: { id: productIds },
+    context:
+      regionId && currencyCode
+        ? {
+            variants: {
+              calculated_price: QueryContext({
+                region_id: regionId,
+                currency_code: currencyCode,
+              }),
+            },
+          }
+        : {},
+  });
+
+  // Preserva el ranking de relevancia de Meilisearch -- query.graph no
+  // garantiza el mismo orden que la busqueda.
+  const orderedProducts = [...products].sort(
+    (a, b) => productIds.indexOf(a.id) - productIds.indexOf(b.id),
+  );
+
+  res.json({
+    products: orderedProducts,
+    facetDistribution,
+    count: totalCount,
+    limit,
+    offset,
+  });
+}
@@ -1,20 +1,9 @@
 # Notas sueltas / aprendizajes

-> **TODO (fase 2+):** esto es un scratchpad estructurado, no un
-> playbook — va creciendo con notas cortas a medida que aparecen. Las
-> entradas de abajo son semillas reales extraídas de incidentes ya
-> documentados; expandir cada una con más contexto en fases siguientes.
-
-## Qué haría distinto
-
- **Fijar `TUNNEL_TRANSPORT_PROTOCOL=http2` desde el día uno**, no
-  después de un incidente — QUIC/UDP sobre NAT doméstico fue un problema
-  predecible en retrospectiva. Ver [ADR 0003](../decisiones/0003-por-que-http2-sobre-quic-tunnel.md).
- **Separar siempre "chequeo de disponibilidad" de "migraciones"** en
-  init containers distintos, y que el chequeo use el mínimo de
-  parámetros posible (host/puerto/usuario/db) en vez de reusar una URI
-  de conexión pensada para la app. Confirmado como decisión correcta en
-  el [incidente de crashloop de Medusa](../playbooks/incidente-crashloop-medusa.md).
+> Esto es un scratchpad estructurado, no un playbook — sigue creciendo
+> con notas cortas a medida que aparecen. Cada entrada está extraída de
+> un incidente o hallazgo real ya documentado en otra parte del sitio,
+> no es especulación.

 ## Gotchas de Medusa v2

@@ -26,8 +15,70 @@
  del array `images` — hay que setearlo explícito desde el Admin si el
  frontend lo usa como imagen hero en listados.

-## TODO
+## MinIO / S3 provider

- Notas sobre MinIO / S3 provider.
- Notas sobre el subscriber `revalidate-storefront.ts` y sus límites.
- Qué automatizaría si volviera a montar este lab desde cero.
+- Medusa sube imágenes de producto a MinIO (`minio-svc:9000`, bucket
+  `ari-products`) usando el provider S3-compatible estándar — MinIO no
+  sabe que no es AWS real, y Medusa tampoco necesita saberlo.
+- La URL pública que termina viendo el navegador **no** es la interna
+  (`minio-svc:9000`): es `S3_FILE_URL=https://media.cruzcloud.net/ari-products`,
+  un dominio propio proxied por NPM hacia el mismo MinIO. Esto tiene
+  una consecuencia directa que ya rompió producción una vez: si
+  `media.cruzcloud.net` deja de rutear bien (mismo patrón de
+  `forward_host` roto que el resto del sitio), **todas** las imágenes
+  de producto del storefront se caen aunque MinIO y Medusa estén
+  perfectamente sanos — porque el navegador nunca habla con MinIO
+  directo, solo con esa URL pública. Ver [Red y exposición](../arquitectura/red-y-exposicion.md).
+
+## Subscriber `revalidate-storefront.ts` y sus límites
+
+- Escucha 6 eventos de Medusa (`product.created/updated/deleted` +
+  los 3 equivalentes de `product-variant`) y por cada uno hace un
+  único `POST` a `${STOREFRONT_URL}/api/revalidate` con un header
+  secreto (`x-revalidate-secret`) — esa ruta del frontend llama
+  `revalidateTag("medusa-products")` de Next.js.
+- **Se degrada solo, no tira el evento entero**: si
+  `STOREFRONT_URL`/`REVALIDATE_SECRET` no están configurados, o el
+  `fetch` falla, solo loguea un `warn` y sigue — un fallo de red hacia
+  el frontend nunca revierte ni bloquea la operación real en Medusa
+  (crear/editar un producto). Mismo criterio de "degradar, no romper"
+  que se repite en el resto del storefront (`searchWithFacets`
+  opcional, `/api/search` cayendo a `{}` si Meilisearch no responde).
+- **Límite real, todavía no un problema**: no hay debounce ni
+  deduplicación — si una operación dispara varios eventos juntos (ej.
+  editar un producto con 3 variantes a la vez), son varios `POST`
+  independientes al mismo endpoint. `revalidateTag` de Next.js es
+  barato e idempotente, así que hoy no se nota, pero si el catálogo
+  creciera mucho y las ediciones masivas se volvieran frecuentes, sería
+  el primer lugar donde agregar algún tipo de agrupación.
+
+## Qué haría distinto si volviera a montar este lab desde cero
+
+- **Fijar `TUNNEL_TRANSPORT_PROTOCOL=http2` desde el día uno** (ver
+  [ADR 0003](../decisiones/0003-por-que-http2-sobre-quic-tunnel.md)) y
+  **ajustar el MTU de `flannel.1` desde el primer `deploy-lab.sh`** —
+  ambos terminaron siendo incidentes reales
+  (504 intermitente, blackhole cross-node) que en retrospectiva eran
+  predecibles: red doméstica con NAT agresivo + Docker-in-Docker
+  multi-nodo son una combinación conocida para tener problemas de MTU
+  y de transporte UDP. Hoy los dos ya están automatizados
+  (`fix_flannel_mtu` en `deploy-lab.sh`, la variable de entorno del
+  túnel), pero se aprendieron reactivamente, no se anticiparon.
+- **Usar `git merge-base --is-ancestor` para la promoción segura del
+  CI desde el primer pipeline**, no después de ver la condición de
+  carrera en vivo (dos pipelines corriendo en serie sobre el mismo
+  commit, el segundo pisando o saltándose la promoción del primero).
+  El patrón correcto no es complicado una vez que se conoce — el costo
+  fue no anticiparlo.
+- **Separar siempre "chequeo de disponibilidad" de "migraciones"** en
+  init containers distintos, y que el chequeo use el mínimo de
+  parámetros posible (host/puerto/usuario/db) en vez de reusar una URI
+  de conexión pensada para la app. Confirmado como decisión correcta en
+  el [incidente de crashloop de Medusa](../playbooks/incidente-crashloop-medusa.md).
+- **No escribir un script que regenere credenciales completas en cada
+  corrida** (`create-commerce-secrets.sh` rota JWT/COOKIE/passwords de
+  Postgres/Redis/MinIO enteros cada vez que se ejecuta, incluso si solo
+  hacía falta agregar una clave nueva) — un script de setup inicial y
+  uno de "agregar una clave a un secret ya vivo" deberían haber sido
+  dos herramientas distintas desde el principio, no una sola que hay
+  que saber cuándo NO correr completa.
@@ -1,9 +1,9 @@
 # Del commit al despliegue: flujo GitOps

-> **TODO (fase 2+):** narrar cada paso con ejemplos reales tomados de
-> `.gitea/workflows/build-medusa.yaml` y `build.yaml`. El diagrama de
-> secuencia de abajo refleja el pipeline real (build → push imagen →
-> promoción segura → commit del tag → sync de Argo CD).
+El diagrama de abajo refleja el pipeline real (build → push imagen →
+promoción segura → commit del tag → sync de Argo CD). Después del
+diagrama hay un ejemplo con hashes de commit reales, tomado de un
+cambio real hecho sobre este mismo repo.

 ## Secuencia: un commit hasta quedar corriendo en el cluster

@@ -42,9 +42,53 @@ sequenceDiagram
  evita que un pipeline viejo sobreescriba el tag con una versión
  anterior si hubo un push más reciente mientras corría.

-## TODO
+## Ejemplo real: un commit de principio a fin

- Ejemplo real con hashes de commit (tomar del historial de
-  `apps-registry`).
- Explicar `syncPolicy.automated.selfHeal` con un caso concreto (qué
-  pasa si alguien hace `kubectl edit` a mano).
+Fase 3b del ADR 0006 (facetas del sidebar del catálogo, ver
+`decisiones/0006-motor-busqueda-facetas.md`) recorrió el flujo
+completo dos veces seguidas el mismo día:
+
+| Paso | Commit / evento real |
+|---|---|
+| Feature | `83d448b` — `feat(ecommerce): facetas reales de Meilisearch en el sidebar del catalogo`, en `fix/adr0006-etapa2-fase3b-facetas-sidebar` |
+| Merge a `main` | `6b5450f` |
+| CI build+push | Gitea Actions task 258, imagen `gitea.cruzcloud.net/devops/ecommerce-frontend` |
+| Release commit (CD) | `951682a` — `chore: release v1.0.171 [skip ci]`, bump automático del tag en `frontend/patches/deployment.yaml` |
+| Sync de Argo CD | dos ciclos distintos: primero sincronizó contra `6b5450f` (el merge, todavía con el tag viejo), y en el ciclo siguiente detectó `951682a` y aplicó el tag nuevo |
+| Rollout | `frontend-deploy` con 2/2 réplicas en `v1.0.171` |
+
+El gate en vivo contra ese mismo cambio encontró un bug real
+(`estimatedTotalHits` en 0 con `limit=0` en Meilisearch) — el fix
+repitió el mismo ciclo completo: `884dbd1` → merge `ba3e6c7` → release
+`v1.0.172` → sync → rollout. Dos vueltas completas del diagrama de
+arriba en la misma sesión, cada una verificada contra el endpoint real
+antes de darla por cerrada.
+
+**Detalle no obvio:** Argo CD sincroniza el *merge commit* primero
+(todavía con la imagen vieja, porque el bump de tag es un commit
+*posterior* que hace el propio pipeline) y recién en un segundo ciclo
+de poll detecta el commit de release. Son dos sincronizaciones
+distintas, no una sola — hay que esperar ambas antes de asumir que el
+pod nuevo está corriendo.
+
+## `selfHeal`, con la configuración real
+
+Todas las Applications de este repo comparten el mismo `syncPolicy`
+(`apps/ecommerce-app.yaml`):
+
+```yaml
+syncPolicy:
+  automated:
+    prune: true
+    selfHeal: true
+```
+
+Con `selfHeal: true`, si alguien corre `kubectl scale deployment
+frontend-deploy --replicas=1` directo contra el cluster (saltándose
+Git por completo), Argo CD no se queda en mostrar `OutOfSync` — en el
+siguiente ciclo de reconciliación vuelve a aplicar el manifiesto tal
+como está en `main` y el Deployment queda otra vez en las réplicas
+declaradas ahí. El cambio manual no se pierde silenciosamente: queda
+un instante como drift visible en la UI de Argo CD, pero nunca se
+vuelve el estado final. La única forma de que ese cambio persista es
+que exista en Git — lo mismo que describe [ADR 0002](../decisiones/0002-por-que-argocd-vs-manual.md).
@@ -65,9 +65,142 @@ plantillas (a diferencia de Helm).
 incluir y qué parches aplicarles, sin necesidad de un lenguaje de
 templating separado.

-## TODO
+## Namespace

- Namespace, ResourceQuota, LimitRange, NetworkPolicy
- Ingress vs. Service vs. Deployment
- StatefulSet (por qué Postgres lo usa y el frontend no)
- Init container
+**En una frase:** una partición lógica dentro del mismo cluster físico
+— agrupa recursos relacionados y les pone un límite alrededor.
+
+**Detalle:** este lab tiene un namespace por dominio de negocio
+(`ecommerce`, `docs-portal`) más `argocd` para el propio Argo CD. Todo
+lo que gobierna a un namespace (cuotas, políticas de red) vive en
+`platform-infra`, separado de los manifiestos de la app — así una app
+nueva no puede "olvidarse" de traer su propia gobernanza.
+
+## ResourceQuota
+
+**En una frase:** el techo total de recursos que un namespace entero
+puede consumir, sumando todos sus pods.
+
+**Detalle:** la cuota real de `ecommerce`
+(`platform-infra/ecommerce-governance/resourcequota.yaml`):
+
+```yaml
+hard:
+  requests.cpu: "3"
+  requests.memory: 4Gi
+  limits.cpu: "8"
+  limits.memory: 8Gi
+  pods: "12"
+  persistentvolumeclaims: "6"
+  requests.storage: 80Gi
+```
+
+Si un Deployment nuevo pidiera más `requests.memory` del que queda
+disponible bajo ese techo, Kubernetes rechaza el pod directamente — no
+lo deja arrancar y luego fallar.
+
+## LimitRange
+
+**En una frase:** los valores por defecto (y los mínimos/máximos) que
+aplican a un contenedor *individual* dentro de un namespace, para
+cuando el manifiesto no los declara explícitos.
+
+**Detalle:** complementa a `ResourceQuota` (que mira el namespace
+entero) a nivel de un solo contenedor. La de `ecommerce`
+(`limitrange.yaml`) pone `defaultRequest: 100m/128Mi`,
+`default: 500m/512Mi` (límites si el contenedor no los declara), y un
+rango permitido de `10m/16Mi` a `2 CPU/1Gi` por contenedor — evita
+tanto el contenedor que no pide nada y termina compitiendo mal por
+recursos, como el que pide de más y se come la cuota del namespace
+entero él solo.
+
+## NetworkPolicy
+
+**En una frase:** un firewall a nivel de Kubernetes — qué tráfico de
+red se permite entrar (o salir) de un pod.
+
+**Detalle:** sin ninguna `NetworkPolicy`, todos los pods de un cluster
+pueden hablarse entre sí libremente. La de `ecommerce`
+(`networkpolicy.yaml`) usa `podSelector: {}` (aplica a todos los pods
+del namespace) y permite ingress solo desde `namespaceSelector: {}`
+(cualquier namespace del cluster, típicamente Traefik llegando desde
+`kube-system` o el namespace de ingress) — bloquea tráfico externo al
+cluster que intentara saltarse Traefik y pegarle directo a un Service
+interno.
+
+## Deployment
+
+**En una frase:** el controlador para cargas de trabajo **sin
+estado** — réplicas intercambiables entre sí, ninguna con identidad
+propia.
+
+**Detalle:** `frontend-deploy` es un Deployment de 2 réplicas: no
+importa cuál de las dos atienda una petición, ambas sirven exactamente
+lo mismo y ninguna guarda datos propios en disco. Si un pod muere,
+Kubernetes crea otro cualquiera para reemplazarlo — no hay "el pod
+original" que recuperar. Contrastar con **StatefulSet** abajo.
+
+## Service
+
+**En una frase:** un nombre de red estable que apunta a un grupo de
+pods, aunque esos pods cambien.
+
+**Detalle:** los pods son efímeros (mueren y se recrean con IP nueva
+cada vez); un Service (ej. `frontend-svc`, `postgres-svc`) les da un
+nombre DNS interno fijo (`frontend-svc.ecommerce.svc.cluster.local`,
+o simplemente `frontend-svc` desde dentro del mismo namespace) que no
+cambia aunque los pods de atrás sí. `postgres-svc` en este lab es
+además un Service `clusterIP: None` ("headless") — necesario porque
+`commerce-postgres` es un StatefulSet y cada pod necesita su propia
+identidad de red estable, no una IP compartida balanceada entre
+réplicas.
+
+## Ingress
+
+**En una frase:** la regla que dice "las peticiones a este dominio y
+esta ruta van a este Service", para tráfico HTTP que entra al cluster.
+
+**Detalle:** `ecommerce-ingress` enruta por *path*, no solo por
+dominio: `shop.cruzcloud.net/api/catalog` va a `catalog-api-svc`, y
+todo lo demás (`/`) va a `frontend-svc` — un solo objeto Ingress con
+dos backends distintos según el prefijo de la URL. Es Traefik (el
+Ingress Controller del cluster) quien lee estos objetos y hace el
+enrutamiento real; el Ingress en sí es solo la declaración de la
+regla, no el componente que la ejecuta.
+
+## StatefulSet
+
+**En una frase:** el controlador para cargas de trabajo **con
+estado** — cada réplica tiene identidad propia y almacenamiento propio
+que sobrevive a que el pod se reinicie.
+
+**Detalle:** `commerce-postgres` es un StatefulSet, no un Deployment,
+porque el frontend puede tener 2 réplicas idénticas sin datos propios,
+pero Postgres no — sus datos tienen que vivir en un disco específico
+que sobreviva un reinicio del pod y sepa exactamente cuál pod es
+"el suyo". Cada pod de un StatefulSet obtiene su propio
+`PersistentVolumeClaim` vía `volumeClaimTemplates` (acá,
+`postgres-data`, 10Gi en `local-path`) y un nombre de red estable y
+numerado (`commerce-postgres-0`), a diferencia de los nombres
+aleatorios de un Deployment. Meilisearch, Redis y MinIO en este lab
+siguen el mismo patrón por la misma razón — todos guardan datos en
+disco que tienen que sobrevivir al pod.
+
+## Init container
+
+**En una frase:** un contenedor que corre **antes** que los
+contenedores principales de un pod, y tiene que terminar bien (exit
+0) para que el resto arranque.
+
+**Detalle:** `medusa-deploy` usa dos, y a propósito están separados en
+vez de ser uno solo: `wait-for-postgres` (`pg_isready` en loop, solo
+espera a que Postgres acepte conexiones) y `migrations`
+(`db:migrate`, corre las migraciones de verdad). Un incidente real
+mostró por qué separarlos importa: cuando el chequeo de disponibilidad
+reusaba la misma `DATABASE_URL` completa de la app (con
+`?sslmode=disable` incluido), el parser de `pg_isready` no la entendía
+y el pod quedaba atascado en `Init` — reportado como si fuera
+`CrashLoopBackOff`, sin serlo. El fix fue que el chequeo de
+disponibilidad use el mínimo de parámetros posible
+(host/puerto/usuario/db), nunca la URI completa pensada para la app.
+Ver el [playbook del crashloop de Medusa](../playbooks/incidente-crashloop-medusa.md).
@@ -1,8 +1,7 @@
 # Red y exposición

-> **TODO (fase 2+):** explicar cada dominio, por qué está proxied vs
-> DNS-only en Cloudflare, y el manejo de TLS extremo a extremo. Tabla
-> de dominios abajo es real, pendiente de expandir con capturas/ejemplos.
+Los 5 dominios de abajo son reales y comparten exactamente el mismo
+camino de red — ninguno tiene un caso especial.

 ## Dominios activos

@@ -14,12 +13,63 @@
 | `gitea.cruzcloud.net` | Gitea | — | Cloudflare (edge) |
 | `docs.cruzcloud.net` | Este portal | `docs` | Cloudflare (edge) |

-## TODO
+## Por qué todos van "proxied" (naranja), ninguno "DNS-only"

- Diagrama de TLS termination (dónde termina TLS realmente: en
-  Cloudflare, no en Traefik — el tráfico interno NPM→k3d es HTTP plano).
- Explicar por qué el transporte del túnel se fijó a HTTP/2 en vez de
-  QUIC (ver [ADR 0003](../decisiones/0003-por-que-http2-sobre-quic-tunnel.md)
-  y el [playbook del 504](../playbooks/incidente-504-gitea-tunnel.md)).
- Patrón de diagnóstico "interno sano, público roto" (ver
-  [playbook de imágenes NPM](../playbooks/incidente-imagenes-npm.md)).
+Un registro DNS-only en Cloudflare expondría directamente la IP real
+del túnel — pero acá no hay IP pública fija que exponer: el NAS está
+detrás de NAT residencial. El modo proxied es lo que hace que
+Cloudflare Tunnel tenga sentido en primer lugar (el tráfico entra por
+el edge de Cloudflare, nunca directo al origen), así que no hay ningún
+dominio de este lab para el que DNS-only sea una opción real.
+
+## Dónde termina TLS de verdad
+
+```mermaid
+flowchart LR
+    User(["Usuario"]) -->|HTTPS| CF["Cloudflare edge<br/>🔒 TLS termina acá"]
+    CF -->|túnel cifrado, HTTP/2| CFD["cloudflared"]
+    CFD -->|HTTP plano| NPM["Nginx Proxy Manager"]
+    NPM -->|HTTP plano| LB["k3d-proxy :90"]
+    LB -->|HTTP plano| TR["Traefik"]
+    TR -->|HTTP plano| SVC["Service interno"]
+```
+
+TLS termina en el **edge de Cloudflare**, no en Traefik ni en NPM. De
+ahí hacia adentro (`cloudflared` → NPM → `k3d-proxy` → Traefik →
+Service) todo el tráfico va en HTTP plano — seguro en este contexto
+porque ese tramo entero vive dentro de la red local del NAS, nunca
+sale a internet. Ningún componente interno necesita certificado propio
+ni gestionar renovación de TLS.
+
+## Por qué HTTP/2 y no QUIC en el túnel
+
+`cloudflared` puede usar QUIC (UDP) o HTTP/2 (TCP) para sus conexiones
+salientes hacia el edge. Este lab fuerza HTTP/2 explícitamente — no es
+el default. Un incidente real de `504 Gateway Timeout` intermitente en
+**todos** los subdominios (no solo uno) se rastreó hasta fallos
+recurrentes del "control stream" de QUIC sobre la red doméstica del
+NAS. Ver [ADR 0003](../decisiones/0003-por-que-http2-sobre-quic-tunnel.md)
+para la decisión completa y el [playbook del 504](../playbooks/incidente-504-gitea-tunnel.md)
+para el diagnóstico paso a paso.
+
+## Patrón de diagnóstico: "interno sano, público roto"
+
+Cuando un dominio público falla pero todo dentro del cluster responde
+bien (pods `Running`, probes verdes, `kubectl exec` con `curl` al
+Service funciona), la causa casi nunca está en Kubernetes — está en la
+capa NPM. La forma rápida de confirmarlo es saltarse NPM a propósito:
+`curl -H "Host: <dominio>" http://192.168.68.61:90/` habla directo con
+`k3d-proxy`/Traefik sin pasar por NPM. Si eso funciona pero el dominio
+público no, el problema está específicamente en el `forward_host`/
+`forward_port` del proxy host en NPM (ej.: un scheme o un path colado
+en `forward_host`, que rompe todo el enrutamiento).
+
+Este patrón se repitió dos veces en este lab con la misma causa raíz
+exacta: el [incidente de imágenes en `media.cruzcloud.net`](../playbooks/incidente-imagenes-npm.md)
+(playbook completo) y un incidente posterior de `commerce.cruzcloud.net`
+devolviendo 400 por el mismo tipo de `forward_host` roto (sin playbook
+propio todavía). Una lección adicional de ese segundo incidente:
+editar el `proxy_host` a mano en el sqlite de NPM **no** regenera el
+`.conf` de nginx automáticamente — el cambio tiene que pasar por la
+propia UI/API de NPM, o el `.conf` hay que parchearlo a mano y
+recargar nginx.
@@ -1,10 +1,10 @@
 # Visión general

-> **TODO (fase 2+):** narrativa completa explicando cada capa del
-> diagrama, con foco en el "por qué" de cada frontera de confianza. El
-> diagrama de abajo es real (validado contra `docs/known-issues.md` y
-> los playbooks de incidentes de `apps-registry`), pero el texto que lo
-> acompaña es solo el esqueleto.
+Este lab corre sobre un NAS ZimaOS doméstico, sin IP pública ni
+presupuesto de nube — cada capa del diagrama de abajo existe por una
+razón concreta de ese contexto, no por moda arquitectónica. Esta
+página explica el "por qué" de cada frontera; el "cómo" vive en las
+páginas enlazadas al final de cada sección.

 ## Flujo de una petición pública

@@ -40,4 +40,52 @@ flowchart LR
 | Argo CD | Sincroniza el estado del cluster con Git (patrón App of Apps) | Namespace `argocd` |
 | Gitea | Origen de verdad de los manifiestos y del código de las apps | Contenedor propio, expuesto vía túnel |

+## Por qué cada frontera está donde está
+
+**Cloudflare Tunnel, no port-forwarding.** El NAS vive detrás de NAT
+residencial, sin IP pública fija. En vez de abrir puertos en el router
+(superficie de ataque directa contra el hogar), `cloudflared` abre una
+conexión **saliente** hacia Cloudflare y todo el tráfico público viaja
+hacia adentro por esa misma conexión — el origen nunca expone un
+puerto escuchando en internet. El transporte de esa conexión se fijó a
+HTTP/2 en vez del QUIC por defecto tras un incidente real de
+inestabilidad; ver [ADR 0003](../decisiones/0003-por-que-http2-sobre-quic-tunnel.md).
+
+**Nginx Proxy Manager, fuera del cluster.** No todo lo que sirve
+`*.cruzcloud.net` vive dentro de k3d — Gitea, por ejemplo, corre como
+contenedor Docker aparte. NPM es el único punto de enrutamiento por
+dominio que necesita conocer *ambos* mundos (cluster y no-cluster), así
+que vive fuera de Kubernetes a propósito, no por descuido.
+
+**`k3d-lab-cluster-serverlb`, la frontera de entrada al cluster.** Es
+el load balancer que el propio k3d monta automáticamente para publicar
+puertos del host hacia los nodos internos — no es un componente que
+este lab configuró a mano, viene con la topología multi-nodo elegida
+en [ADR 0001](../decisiones/0001-por-que-k3d.md).
+
+**Traefik, enrutamiento por `Host` dentro del cluster.** Una vez el
+tráfico entra al cluster por un único puerto (90/9443), Traefik es
+quien decide a qué Service mandarlo según el header `Host` de cada
+petición — así NPM solo necesita saber "todo `*.cruzcloud.net` va al
+puerto 90 del cluster", sin tener que aprender un forward_host nuevo
+cada vez que se agrega un servicio interno. Cuando esta capa falla en
+silencio (`forward_host`/`forward_port` mal apuntado en NPM), el
+síntoma es siempre el mismo: "internamente sano, públicamente roto" —
+ver [Red y exposición](red-y-exposicion.md).
+
+**Argo CD, el único escritor del cluster.** Ningún pipeline de CI ni
+ninguna persona corre `kubectl apply` contra producción — Argo CD es
+la única pieza con permisos de escritura, y reconstruye
+automáticamente cualquier diferencia entre Git y el cluster real
+(`selfHeal: true`). El porqué completo de esa elección está en
+[ADR 0002](../decisiones/0002-por-que-argocd-vs-manual.md); el paso a
+paso de un commit real hasta quedar corriendo, en
+[Flujo GitOps](gitops-flujo.md).
+
+**Gitea, autoalojado.** Además de alojar el código, Gitea corre el CI
+(Gitea Actions) y el registry de imágenes en el mismo lugar — un solo
+componente autoalojado en vez de depender de la disponibilidad y los
+límites de un servicio externo gratuito para un lab que ya de por sí
+no tiene presupuesto de nube.
+
 Ver también: [Red y exposición](red-y-exposicion.md) · [Flujo GitOps](gitops-flujo.md) · [Glosario](glosario.md)
@@ -1,33 +1,67 @@
 # ADR 0001 — Por qué k3d (y no k3s directo, minikube, o un cluster cloud)

-> **TODO (fase 2+):** completar contexto/opciones/consecuencias con
-> criterio real (recursos del NAS ZimaOS, necesidad de multi-nodo para
-> reproducir el blackhole de MTU documentado en `known-issues.md`,
-> costo cero vs. cluster gestionado).
-
-**Estado:** aceptada (placeholder — pendiente de redactar)
-**Fecha:** TODO
+**Estado:** aceptada
+**Fecha:** 2026-08 (retroactiva — decisión tomada al arrancar el lab, documentada en Fase 2 del portal)

 ## Contexto

-TODO
+El lab corre sobre un NAS ZimaOS doméstico, sin presupuesto para un
+cluster gestionado y con recursos modestos y compartidos con otras
+apps del NAS (Gitea, Nginx Proxy Manager, este mismo portal). El
+propósito del lab es doble: servir de portafolio técnico real y de
+material de estudio para el hijo del usuario (7mo semestre de
+Ingeniería de Sistemas) — ver [guía del estudiante](../guia-estudiante/README.md).
+Para que ambos objetivos tengan sentido, el cluster necesitaba
+comportarse como un Kubernetes real y multi-nodo, no como una caja de
+arena de un solo proceso: patrones como afinidad de pods, StatefulSets
+con almacenamiento persistente por nodo, y tráfico cross-node debían
+poder reproducirse y depurarse de verdad, no simularse.
+
+También pesó la restricción del propio sistema operativo: `/` en
+ZimaOS es un `squashfs` de solo lectura y `/usr` es un overlay
+igualmente inmutable — instalar un binario nativo como `k3s` que
+espera escribir en `/usr/local/bin`, `/etc/rancher`, etc. de forma
+persistente no encaja bien con ese filesystem sin trabajo extra de
+por medio.

 ## Opciones consideradas

 | Opción | A favor | En contra |
 |---|---|---|
-| k3d | | |
-| k3s directo (sin Docker) | | |
-| minikube | | |
-| Cluster gestionado (cloud) | | |
+| **k3d** | Multi-nodo real corriendo como contenedores Docker (server + agent), se crea/destruye en segundos, no toca el filesystem inmutable de ZimaOS más allá de `/DATA` | Al ser Docker-in-Docker, hereda las capas de red de Docker — un blackhole de MTU/PMTUD real apareció por esto (ver Consecuencias) |
+| k3s directo (sin Docker) | Sin la capa extra de red de Docker-in-Docker, más cercano a un nodo "real" | Necesita instalar servicios systemd y escribir en rutas de sistema (`/usr/local/bin`, `/etc/rancher`) que en ZimaOS son de solo lectura o requieren workarounds — solo `/DATA` y `/etc` quedan escribibles |
+| minikube | Instalación simple, muy documentado, ideal para aprender lo básico | Single-node por defecto — no permite reproducir tráfico cross-node, afinidad de pods, ni el tipo de incidentes de infraestructura real que este lab busca documentar como aprendizaje |
+| Cluster gestionado (cloud) | Cero mantenimiento de infraestructura, SLA real | Costo recurrente que este lab no tiene presupuestado; además reduce el valor de aprendizaje — gran parte de lo documentado en `playbooks/` (MTU, DNS, límites de recursos) es justamente lo que un proveedor gestionado abstrae |

 ## Decisión

-TODO
+k3d, multi-nodo (hoy: 1 server + 1 agent, `k3d-lab-cluster-server-0` /
+`k3d-lab-cluster-agent-0`), corriendo como contenedores Docker sobre
+el propio NAS.

 ## Consecuencias

-TODO — mencionar explícitamente el blackhole de red cross-node
-(MTU/PMTUD) como consecuencia real y documentada de correr multi-nodo
-sobre Docker-in-Docker sin ajuste de MTU (ver
-[playbook del crashloop de Medusa](../playbooks/incidente-crashloop-medusa.md)).
+- **Se ganó** un cluster real y gratuito, reproducible con un solo
+  script (`scripts/deploy-lab.sh`), y suficientemente parecido a un
+  Kubernetes de producción como para que los incidentes documentados
+  en `playbooks/` sean transferibles a un entorno cloud real.
+- **Se pagó** con un blackhole de red cross-node real: cualquier pod
+  agendado en un nodo distinto al de `commerce-postgres-0`
+  (StatefulSet, fijo a un nodo) fallaba de forma consistente al hablar
+  con Postgres — diagnosticado hasta el bit exacto (payload interno
+  1420 bytes OK, 1450 bytes blackhole total, sin ICMP "frag needed")
+  y resuelto ajustando el MTU real de la interfaz `flannel.1` a 1400
+  en cada nodo. Ver [known-issues.md](https://gitea.cruzcloud.net/devops/apps-registry/src/branch/main/docs/known-issues.md)
+  y el [playbook del crashloop de Medusa](../playbooks/incidente-crashloop-medusa.md)
+  para el diagnóstico completo. El fix no persiste solo — está
+  automatizado en `scripts/deploy-lab.sh` (función `fix_flannel_mtu`),
+  se reaplica cada vez que el cluster arranca o se recrea.
+- **Deuda aceptada a propósito**: el `podAffinity` que fuerza a
+  `medusa-deploy` a compartir nodo con Postgres se dejó como red de
+  contención extra después del fix de fondo — no es estrictamente
+  necesario, pero es barato mantenerlo.
+- **Para revertir esta decisión** haría falta migrar a un cluster
+  gestionado o a `k3s` nativo, lo que implicaría asumir el costo
+  recurrente (cloud) o resolver las restricciones de filesystem
+  inmutable de ZimaOS (k3s nativo) — ninguna de las dos se justifica
+  hoy con el tamaño real del lab.
@@ -1,30 +1,80 @@
 # ADR 0002 — Por qué Argo CD (y no `kubectl apply` manual o un script de CI)

-> **TODO (fase 2+):** completar con el criterio real detrás de elegir
-> reconciliación continua (`selfHeal`) sobre despliegue imperativo desde
-> CI.
-
-**Estado:** aceptada (placeholder — pendiente de redactar)
-**Fecha:** TODO
+**Estado:** aceptada
+**Fecha:** 2026-08 (retroactiva — decisión tomada al arrancar el lab, documentada en Fase 2 del portal)

 ## Contexto

-TODO
+Desde el principio el lab iba a tener más de un repo Git (hoy:
+`apps-registry` para las Applications y los manifiestos reales de los
+workloads, `platform-infra` para la gobernanza de cada namespace,
+`scripts` para bootstrap/operación) y más de una app corriendo en el
+cluster (ecommerce, docs-portal, nginx, cada una con su propia
+gobernanza). Se necesitaba una forma de mantener el estado del
+cluster sincronizado con lo declarado en Git que escalara a "agregar
+una app nueva" sin volverse un proceso manual que dependiera de que
+una sola persona recordara qué `kubectl apply` correr y en qué orden.
+
+También importaba la trazabilidad: en un lab que sirve de portafolio,
+poder señalar "este commit es exactamente lo que está corriendo en
+producción" (y por qué) tiene valor por sí mismo — no solo operativo.

 ## Opciones consideradas

 | Opción | A favor | En contra |
 |---|---|---|
-| Argo CD (GitOps, pull-based) | | |
-| `kubectl apply` manual | | |
-| `kubectl apply` desde el pipeline de CI (push-based) | | |
+| **Argo CD (GitOps, pull-based)** | Reconciliación continua: un proceso dentro del cluster compara el estado real contra Git y corrige la diferencia solo, sin que nadie tenga que acordarse de aplicar nada. Patrón App of Apps nativo — agregar una app nueva es un archivo YAML más en `apps/`, no un paso manual nuevo | Componente extra que mantener sano (su propio namespace, su propio consumo de recursos) |
+| `kubectl apply` manual | Cero infraestructura extra, control total en cada comando | Sin detección de drift — si alguien edita algo a mano y lo olvida, nadie se entera hasta que rompe; no escala más allá de un solo operador que recuerde el estado completo de memoria |
+| `kubectl apply` desde el pipeline de CI (push-based) | No agrega un componente nuevo al cluster, reutiliza el CI que ya existe para construir imágenes | El pipeline de CI necesitaría credenciales de escritura amplias sobre el cluster — más superficie de riesgo si esas credenciales se filtran. Push-based además significa que nada vuelve a comparar el estado después de aplicado: un drift posterior (alguien con `kubectl` directo) queda invisible hasta el siguiente deploy |

 ## Decisión

-TODO
+Argo CD, patrón App of Apps: una Application raíz
+(`apps-registry/application.yaml`) vigila la carpeta `apps/`, y cada
+archivo ahí dentro es una Application hija que apunta a un workload
+real. Toda Application se declara con el mismo `syncPolicy`:
+
+```yaml
+syncPolicy:
+  automated:
+    prune: true
+    selfHeal: true
+  syncOptions:
+    - CreateNamespace=true
+```
+
+(configuración real de `apps/ecommerce-app.yaml`, repetida en cada
+Application del repo)

 ## Consecuencias

-TODO — mencionar el patrón App of Apps (`application.yaml` +
-`apps/*.yaml`) y cómo `selfHeal:true` cambia el modelo mental de
-"quién puede tocar el cluster".
+- **`selfHeal: true` cambia el modelo mental de quién puede tocar el
+  cluster de verdad.** No es solo que Argo CD detecte diferencias y
+  las muestre como `OutOfSync` — las revierte activamente. Si alguien
+  corre `kubectl scale` o `kubectl edit` directo contra un recurso
+  gestionado, en el siguiente ciclo de reconciliación (poll periódico,
+  o inmediato si el commit llegó por webhook) Argo CD lo vuelve a
+  dejar exactamente como dice Git. Git deja de ser "la intención" y
+  pasa a ser literalmente la única fuente de la que el cluster puede
+  aprender su propio estado — ver [flujo GitOps](../arquitectura/gitops-flujo.md).
+- **`prune: true`** significa que borrar un recurso del repo (por
+  ejemplo, quitar `meilisearch.yaml` de una `kustomization.yaml`) lo
+  borra también del cluster en el siguiente sync, sin un paso manual
+  de limpieza — confirmado en la práctica en varias fases de este lab
+  (ver los ADRs de rediseño del storefront y de Meilisearch).
+- **El rol de CI se redujo a "construir, publicar imagen, y dejar un
+  commit en Git"** — nunca aplica nada directo al cluster. Esto evitó
+  tener que darle a CI credenciales de cluster, y dejó un problema real
+  documentado (la condición de carrera de promoción cuando dos
+  pipelines corren en serie sobre el mismo commit) resoluble
+  comparando contra Git (`git merge-base --is-ancestor`) en vez de
+  contra el estado del cluster.
+- **Se paga con un componente más que mantener sano**: Argo CD corre
+  en su propio namespace, con su propio consumo de recursos y su
+  propia superficie de fallo — un Argo CD caído no rompe lo que ya
+  está corriendo (el cluster sigue con el último estado aplicado),
+  pero sí detiene la sincronización de cambios nuevos.
+- **Para revertir esta decisión** haría falta volver a un modelo
+  push-based (CI aplicando directo) o puramente manual, perdiendo la
+  reconciliación continua y aceptando que un drift manual pueda pasar
+  desapercibido.
@@ -282,7 +282,7 @@ contra estos 9 productos demo:
   intercalados en la grilla (PR #41, con fix-forward de tipos en
   PR #42).

-**Pendiente:** borrar el usuario admin temporal `[email protected]`
-de Medusa Admin (creado para la auditoría de la sección 5, ya no
-necesario). Sin próxima etapa definida todavía — este ADR no
-especifica una Etapa 3.
+El usuario admin temporal `[email protected]` (creado para la
+auditoría de la sección 5) fue borrado el 2026-08-27 vía Medusa Admin.
+Sin próxima etapa definida todavía — este ADR no especifica una
+Etapa 3.
@@ -295,3 +295,36 @@ desviaciones reales respecto al diseño de §4/§5 de este ADR:
 Ninguna de las tres cambia la decisión ni sus consecuencias — cambian
 el cómo, no el qué. Plan de implementación completo, fase por fase,
 en la sesión que aprobó esta Etapa 2 (2026-08-26).
+
+## Nota de implementación 2 (2026-08-26, gate en vivo de Fase 2)
+
+Dos bugs reales encontrados y corregidos durante el gate de
+verificación en vivo (crear/editar productos, categoría y colección
+reales y confirmar que llegan a Meilisearch), ambos con la misma causa
+raíz: `variants.calculated_price` de Medusa exige `region_id` **y**
+`currency_code` resueltos en el contexto de pricing de la consulta, y
+ninguno de los dos caminos nuevos de este ADR pasa por el middleware
+nativo (`setPricingContext`) que se lo da gratis a `/store/products`:
+
+1. El job de sync inicial del plugin (`sync-products.js`, corre una
+   vez al boot) hacía fallar el indexado de **todos** los productos
+   con `Method calculatePrices requires currency_code in the pricing
+   context` — las categorías sí indexaban bien (no llevan precio).
+   Arreglado indexando el precio crudo (`variants.prices`, sin
+   resolver promociones/reglas) en vez de `calculated_price` — alcanza
+   para el filtro/orden por precio de la búsqueda.
+2. La ruta propia `/store/search` pegaba el mismo error al re-hidratar
+   productos vía `query.graph`. Pasar `region_id` solo no alcanzó;
+   hubo que resolver el `currency_code` real de la región con una
+   consulta adicional antes de armar el `QueryContext`.
+
+Confirmado en vivo, con el fix aplicado: búsqueda por texto, facetas
+sobre las 27 unidades del catálogo real, y precio calculado correcto
+(`calculated_amount`/`currency_code`) en la respuesta de
+`/store/search`. También confirmado en vivo que los tres eventos que
+el ADR original marcaba como "verificar, no asumir" — `product.*`,
+`product-category.*` y **`product-collection.updated`** (el que tenía
+un reporte público de no disparar siempre) — sí sincronizan de forma
+confiable en esta combinación exacta (Medusa 2.18.0 + plugin 1.4.1),
+propagando un rename de categoría/colección al documento indexado en
+menos de 10 segundos.
@@ -0,0 +1,232 @@
+# ADR 0007 — Identidad visual propia para ARI Shopping
+
+**Estado:** reemplazada por [ADR 0008](0008-identidad-navy-coral.md) (2026-08-27)
+**Fecha:** 2026-08-27
+
+> **Superseded (2026-08-27):** la Opción 2 "Atelier cálido" (ciruela/
+> carbón/cobre + Domine) descrita en este ADR se descartó — no
+> convenció combinada con el resto del sitio sin cambiar (header,
+> footer, home y producto seguían con la paleta anterior, ver §7). El
+> ADR 0008 documenta la dirección final ("Navy & Coral") y su
+> cronología completa. Este documento se conserva como registro
+> histórico, sin editar el resto de su contenido.
+
+> **Corrección de dirección #1 (2026-08-27):** la primera versión de
+> este ADR proponía clonar la estética visual de Amazon. Se corrigió a
+> adoptar *principios* de UX, no la estética de un competidor —
+> resultó en una paleta "cálida, confiable, ligeramente lúdica"
+> (terracota/espresso/pino/crema, Fraunces).
+
+> **Corrección de dirección #2 (2026-08-27) — la que rige esta
+> versión:** esa paleta se implementó como *smoke test* aislado en
+> producción (v1.0.176: solo el botón CTA de `ProductCard` en
+> terracota + el precio en Fraunces) y se revirtió por dos motivos
+> reales, no de gusto superficial:
+>
+> 1. **Error de proceso**: un token aislado rodeado del resto del
+>    esquema viejo (badges en fucsia/amarillo neón, fondo blanco) no
+>    es evaluable — el choque visual que se vio no era "la dirección
+>    de marca", era la mezcla incompleta. Ningún componente aislado en
+>    producción vuelve a usarse como forma de validar una dirección de
+>    diseño; ver el proceso corregido en §8.
+> 2. **Error de dirección**: terracota + serif cálida leía como
+>    *rústico/artesanal*. Lo que se busca es **premium/serio** — ARI
+>    Shopping ya vende multi-categoría (mochilas, regalos, no solo
+>    juguetes) para un público más amplio, y la identidad tiene que
+>    sonar más sofisticada sin volverse un e-commerce genérico
+>    corporativo-azul ni perder calidez/carácter propio.
+>
+> §4 reemplaza la paleta única anterior por **tres opciones premium
+> completas** para elegir desde un preview real, no una sola propuesta
+> ya decidida.
+
+> Alcance (sin cambios): **solo visual** (paleta, tipografía, radios,
+> densidad) — ARI Shopping sigue siendo la marca, el catálogo sigue
+> siendo el mismo. No se toca taxonomía, backend, ni la estructura de
+> navegación ya construida en el ADR 0005 — se re-expresa visualmente
+> sobre esa misma estructura.
+
+## 1. Resumen de la auditoría del estado actual
+
+(Sin cambios — sigue siendo la descripción real del código, no de la
+propuesta.)
+
+El storefront hoy tiene una identidad visual deliberadamente lúdica,
+tipo "juguetería": paleta arcoíris de alta saturación
+(`--color-ari-cyan/magenta/yellow`, gradientes `cyan→violet→fuchsia`),
+`rounded-full` en casi todo, `font-black`/`font-extrabold` como
+default en título, precio, botones y texto secundario por igual. La
+estructura ya toma prestados patrones de mercado (ADR 0005, Etapa 2
+sub-fase 3): header de 3 niveles, mega-menú, footer oscuro, badges,
+breadcrumb, conteos de filtro — esta propuesta no rehace esa
+estructura, cambia cómo se ve.
+
+## 2. Principios de UX a adoptar (funcionales, no estéticos)
+
+(Sin cambios respecto a la revisión anterior.)
+
+| Principio | Por qué funciona | Cómo se aplica sin copiar estética |
+|---|---|---|
+| Jerarquía visual clara precio/CTA/info secundaria | Si todo pesa igual, el ojo no sabe dónde mirar primero | Precio y CTA son los únicos elementos con peso reservado; categoría/SKU bajan a texto liviano |
+| Alta densidad sin saturación | Más información real visible compite mejor que decoración vacía | Los gradientes decorativos se liberan para mostrar señales reales del producto |
+| Señales de confianza visibles | Urgencia de inventario, garantías, envíos leídos como información seria | Se conservan/refuerzan elementos reales ya existentes ("Quedan N", `TrustBar`) en colores serios |
+| Contraste suficiente para escaneo rápido | Un usuario escanea, no lee | Cada par de color se valida contra WCAG AA con números reales, no se asume |
+
+## 3. Por qué no clonar la estética de un competidor
+
+(Sin cambios — sigue vigente independientemente de qué opción de §4
+se elija.)
+
+## 4. Tres opciones premium completas
+
+Las tres evitan por igual: azul corporativo genérico, la paleta
+arcoíris actual, y el terracota/serif "rústico" ya descartado. Las
+tres se apoyan en los mismos principios de §2. Difieren en cuánta
+calidez vs. formalidad tienen, y en el carácter tipográfico exacto.
+Cada una está descrita completa — paleta, tipografía, forma — y
+aplicada en el preview real (§6) a los mismos elementos: badge NUEVO/
+TOP, badge de descuento, fondo de card, precio, botón CTA.
+
+### Opción 1 — "Boutique de regalos"
+
+La más formal de las tres. Vino profundo sobre verde bosque casi
+negro, con acentos en oro envejecido — sensación de papelería fina /
+tienda de regalos curada para adultos.
+
+| Rol | Token | Valor |
+|---|---|---|
+| CTA / acción única | `--color-ari-vino` | `#8C2F4B` |
+| Ancla oscura (header/footer) | `--color-ari-bosque` | `#1B2A22` |
+| Acento (destacado/confianza) | `--color-ari-oro-viejo` | `#C9A227` |
+| Fondo general | `--color-ari-marfil` | `#FAF6EF` |
+| Texto principal | `--color-ari-carbon` | `#241C1A` |
+| Badge descuento | `--color-ari-vino-oscuro` | `#6E2338` |
+
+- **Tipografía**: [Playfair Display](https://fonts.google.com/specimen/Playfair+Display)
+  para titulares/precio (serif editorial, dramática, con contraste
+  alto entre trazos gruesos/finos — la más "premium boutique" de las
+  tres) + Inter para cuerpo/UI.
+- **Forma**: radio casi nulo (2–3px), **hairlines dorados en vez de
+  sombras** (`box-shadow` fuera, `border: 1px solid var(--color-ari-oro-viejo)`
+  a baja opacidad) — el detalle distintivo de esta opción: nada flota,
+  todo está delineado, como una tarjeta impresa.
+- **Contraste validado**: blanco/bosque 15.8:1, blanco/vino 6.1:1,
+  carbón/marfil 13.1:1 — todos superan AA con margen amplio.
+
+### Opción 2 — "Atelier cálido"
+
+Punto medio: sigue siendo premium pero con más calidez que la Opción 1
+— ciruela en vez de vino (menos "formal/rojo", más "artesanía fina"),
+cobre en vez de oro.
+
+| Rol | Token | Valor |
+|---|---|---|
+| CTA / acción única | `--color-ari-ciruela` | `#5B3256` |
+| Ancla oscura | `--color-ari-carbon-oscuro` | `#221D1A` |
+| Acento | `--color-ari-cobre` | `#B5723A` |
+| Fondo general | `--color-ari-hueso` | `#F7F1E6` |
+| Texto principal | `--color-ari-carbon` | `#2A2420` |
+| Badge descuento | `--color-ari-terracota-oscuro` | `#9C4A2E` |
+
+- **Tipografía**: [Domine](https://fonts.google.com/specimen/Domine)
+  para titulares/precio (serif con más peso y autoridad que Fraunces,
+  menos "suave/artesanal", sin el dramatismo editorial de Playfair —
+  el punto medio deliberado entre las otras dos opciones) + Inter.
+- **Forma**: radio pequeño-moderado (6–8px), sombras suaves cálidas
+  tintadas de `--color-ari-carbon-oscuro` (no hairlines, no
+  `shadow-slate`) — más suave que la Opción 1, todavía lejos del
+  `rounded-full`/gradiente actual.
+- **Contraste validado**: blanco/carbón-oscuro 15.1:1, blanco/ciruela
+  8.9:1, carbón/hueso 11.7:1 — todos superan AA con margen amplio.
+
+### Opción 3 — "Minimal cálido"
+
+La más restringida de las tres — casi monocromática, un solo acento
+de color por composición, mucho blanco. Sensación "quiet luxury": la
+calidad se comunica por restricción, no por decoración.
+
+| Rol | Token | Valor |
+|---|---|---|
+| CTA / acción única | `--color-ari-ambar` | `#B8842E` |
+| Ancla oscura | `--color-ari-negro-calido` | `#1C1917` |
+| Acento secundario | `--color-ari-oliva` | `#5C6650` |
+| Fondo general | `--color-ari-blanco-calido` | `#FAF8F5` |
+| Texto principal | `--color-ari-negro-calido` | `#1C1917` |
+| Badge descuento | `--color-ari-negro-calido` con texto ámbar | `#1C1917` / `#B8842E` |
+
+- **Tipografía**: [Newsreader](https://fonts.google.com/specimen/Newsreader)
+  itálica para precio/titulares (serif moderna diseñada para lectura,
+  calmada, "editorial silencioso" — la menos decorativa de las tres)
+  + Inter.
+- **Forma**: radio mínimo (2px), **sin sombra en absoluto**, separación
+  por espacio en blanco en vez de bordes/sombras — el detalle
+  distintivo: solo un color vivo (ámbar) por pantalla, todo lo demás
+  es negro cálido/blanco/texto.
+- **Contraste validado**: negro-cálido/blanco-cálido 17.9:1, blanco/
+  ámbar 3.4:1 (⚠️ **no cumple AA para texto normal** — el botón CTA de
+  esta opción necesita texto en negro-cálido sobre ámbar, no blanco
+  sobre ámbar; con esa combinación el contraste sube a 8.1:1, sí
+  cumple), oliva/blanco-cálido 4.9:1.
+
+## 5. Tabla comparativa rápida
+
+| | Opción 1 · Boutique | Opción 2 · Atelier | Opción 3 · Minimal |
+|---|---|---|---|
+| CTA | Vino `#8C2F4B` | Ciruela `#5B3256` | Ámbar `#B8842E` |
+| Ancla oscura | Bosque `#1B2A22` | Carbón oscuro `#221D1A` | Negro cálido `#1C1917` |
+| Acento | Oro viejo `#C9A227` | Cobre `#B5723A` | Oliva `#5C6650` |
+| Fondo | Marfil `#FAF6EF` | Hueso `#F7F1E6` | Blanco cálido `#FAF8F5` |
+| Display | Playfair Display | Domine | Newsreader (itálica) |
+| Radio | 2–3px | 6–8px | 2px |
+| Elevación | Hairline dorado, sin sombra | Sombra suave tintada | Sin sombra, solo espacio |
+| Personalidad | Formal, editorial, "boutique" | Cálido, artesanal-fino, punto medio | Restringido, "quiet luxury" |
+
+## 6. Decisión final: Opción 2 — "Atelier cálido"
+
+El usuario delegó la elección final entre las 3 opciones de §4 en vez
+de revisarlas una por una. Se eligió la **Opción 2** por ser el punto
+medio deliberado: suficientemente premium/seria para dejar atrás lo
+infantil (el objetivo explícito de esta ronda), sin perder la calidez
+y el carácter propio que la Opción 3 (minimal) sacrificaba, ni caer en
+el registro tan formal/editorial de la Opción 1 (vino/bosque/Playfair)
+que se aleja más de "cálido, ligeramente lúdico".
+
+## 7. Decisión de proceso (corregida)
+
+Se descartó construir un `/design-preview` de comparación de las 3
+opciones — el usuario pidió explícitamente decidir directo y revisar
+el resultado ya aplicado, no volver a mediar cada paso. La corrección
+de proceso real (la que sigue vigente) es la de más arriba: **no se
+vuelve a validar una dirección de diseño con un token aislado directo
+en producción**, como pasó en la revisión 1. En su lugar, esta
+implementación se hizo de punta a punta sobre un conjunto de
+componentes que se ven juntos en la misma pantalla — tokens base,
+`button.tsx`, `badge.tsx`, `product-card.tsx` y los estados
+interactivos de `catalog-client.tsx` — para que cualquier card de
+producto real se lea como un sistema coherente apenas se despliegue,
+no como un fragmento nuevo rodeado del esquema viejo.
+
+Header, footer, home y página de producto/drawers (Sub-fases 2, 4 y 5
+del plan original) **quedan pendientes** de una siguiente pasada —
+mientras tanto se van a ver con la paleta anterior, a propósito, no
+por un olvido.
+
+## 8. Consecuencias
+
+- Producto de esta pasada: catálogo (`/catalog`) y sus cards quedan
+  con una identidad completa y coherente entre sí. Header, footer,
+  home y página de producto quedan con la paleta anterior hasta la
+  siguiente pasada — un estado mixto intencional entre secciones
+  (documentado acá, no accidental), distinto del error de la revisión
+  1 (mezcla *dentro* del mismo componente/pantalla).
+- El catálogo, backend, taxonomía y flujo de búsqueda/facetas (ADR
+  0006) quedan completamente intactos.
+- Trabajo puramente de frontend: no requiere cambios en
+  `commerce-backend`, `platform-infra`, ni CI nuevo.
+- Al redefinir directamente las variants existentes de `button.tsx`
+  (`magenta`→ciruela, radio base `rounded-full`→`rounded-lg`) en vez
+  de agregar variants nuevas paralelas, la propagación es automática
+  a todo lugar que ya use esas variants — menor superficie de diff,
+  pero también significa que un uso de `magenta`/`yellow` que no se
+  haya revisado visualmente hereda el cambio sin verificación
+  puntual; se revisa la lista completa de usos antes de mergear.
@@ -0,0 +1,170 @@
+# ADR 0008 — Identidad visual "Navy & Coral" para ARI Shopping
+
+**Estado:** aceptada (implementación en curso, por sub-fases)
+**Fecha:** 2026-08-27
+**Reemplaza a:** [ADR 0007](0007-identidad-visual-propia.md) (Opción 2, "Atelier cálido")
+
+## 1. Contexto
+
+Este es el tercer intento de identidad visual propia para ARI Shopping,
+después de dos ciclos de implementar-y-descartar en producción (ver
+cronología en §2). El costo real de esos dos ciclos no fue el tiempo
+de escribir el código, fue el tiempo de verlo mal en producción antes
+de poder juzgarlo — y en ambos casos el veredicto real no era sobre la
+paleta en sí, sino sobre verla mezclada con partes del sitio que
+todavía no se habían tocado.
+
+## 2. Cronología completa
+
+1. **Arcoíris original** — la identidad "juguetería" con la que arrancó
+   el storefront: paleta de alta saturación (cian/violeta/fucsia/ámbar/
+   amarillo/lima), `rounded-full` en casi todo, `font-black` como
+   default. Nunca fue una decisión de marca, era el estado por defecto
+   del scaffold inicial.
+2. **Intento de clon de Amazon** (descartado antes de implementarse) —
+   la primera versión de ADR 0007 proponía clonar la estética visual de
+   un competidor directamente. Se corrigió a adoptar *principios* de UX
+   (jerarquía, densidad, señales de confianza), no la estética de nadie
+   — ver la memoria de este cambio de dirección.
+3. **Terracota/espresso/pino/crema + Fraunces** ("cálido, confiable,
+   ligeramente lúdico") — se implementó como *smoke test* aislado en
+   producción (v1.0.176: solo el botón CTA de `ProductCard` en
+   terracota + precio en Fraunces, todo lo demás sin tocar) y se
+   revirtió. Dos motivos reales: (a) un token aislado rodeado del resto
+   del esquema viejo (badges fucsia/amarillo neón) no es evaluable — el
+   choque visual no era "la dirección de marca", era la mezcla
+   incompleta; (b) terracota + serif cálida leía como *rústico/
+   artesanal*, y el objetivo era premium/serio.
+4. **Ciruela/carbón/cobre "Atelier cálido"** (ADR 0007, Opción 2 de 3) —
+   esta vez la implementación cubrió un conjunto completo de
+   componentes que se ven juntos en la misma pantalla (tokens base,
+   `button.tsx`, `badge.tsx`, `product-card.tsx`,
+   `catalog-client.tsx`), evitando el error de proceso del punto
+   anterior. Aun así, header, footer, home y página de producto/drawers
+   quedaron deliberadamente pendientes de una siguiente pasada (ADR
+   0007 §7). Resultado: se descartó — no convenció combinada con el
+   resto del sitio sin cambiar. El catálogo aislado se veía coherente,
+   pero el sitio completo (con el header/footer viejos alrededor)
+   seguía sin leerse como una marca terminada.
+5. **"Navy & Coral"** (esta dirección, final) — marino/coral/coral
+   claro + Poppins para momentos de marca. Ver especificación completa
+   en §4.
+
+## 3. Mejora de proceso: validar barato antes de implementar
+
+A diferencia de los dos intentos anteriores, esta dirección se validó
+visualmente con el usuario mediante mockups de referencia simulados
+**fuera de este entorno, antes de tocar código real**. Ningún ciclo de
+implementación se gastó en generar opciones que después se
+descartarían por gusto — el código de esta ADR se escribe ya sobre una
+dirección aprobada.
+
+Esto vale la pena dejarlo como práctica para el playbook de diseño de
+este proyecto: cuando el costo de deshacer una implementación en
+producción es alto (como pasó en los puntos 3 y 4 de §2), vale la pena
+invertir primero en una validación visual barata y rápida (mockup,
+preview, captura) antes de comprometer ciclos de implementación real,
+en vez de decidir la dirección *mientras* se implementa.
+
+## 4. Especificación de marca
+
+### Paleta
+
+| Rol | Token | Valor |
+|---|---|---|
+| Ancla (header, footer, badge "Nuevo", fondo de hero) | `--color-ari-marino` | `#122844` |
+| Acento único de acción (CTA "Agregar al carrito", precio destacado) | `--color-ari-coral` | `#D85A30` |
+| Acento secundario (subtítulos sobre marino, ala inferior del isotipo) | `--color-ari-coral-claro` | `#F0997B` |
+| Fondo general | — | `#FFFFFF` (blanco puro; reemplaza `--color-ari-hueso`) |
+| Texto secundario / bordes | escala `slate-*` ya usada en el proyecto | sin token nuevo |
+
+### Tipografía
+
+- **Poppins, peso 700** — solo para los "momentos de marca": wordmark
+  del logo, títulos de sección (`h1`/`h2`), precio de producto, texto
+  de CTA. Es el único peso que se carga.
+- **Inter** (ya integrada) se mantiene para body/UI/navegación — no
+  todo el sitio pasa a Poppins.
+- Domine (Opción 2 de ADR 0007) se elimina por completo, incluida su
+  carga vía `next/font`.
+
+### Isotipo
+
+Mariposa geométrica simplificada, construida con 4 elipses (no el
+filigrana intrincado del logo original, que se perdía en tamaños
+chicos):
+
+| Elemento | Parámetros | Color |
+|---|---|---|
+| Ala superior izquierda | elipse `rx=9 ry=7`, `cx=10 cy=8`, rotada -18° | `#D85A30` |
+| Ala superior derecha | elipse `rx=9 ry=7`, `cx=24 cy=8`, rotada 18° | `#D85A30` |
+| Ala inferior izquierda | elipse `rx=6 ry=5`, `cx=12 cy=16`, rotada -10° | `#F0997B` |
+| Ala inferior derecha | elipse `rx=6 ry=5`, `cx=22 cy=16`, rotada 10° | `#F0997B` |
+| Cuerpo | rectángulo `x=16 y=3 width=2 height=18`, redondeado | `#122844` |
+
+Coordenadas base sobre `viewBox 34x24`, sobre fondo circular marino.
+Wordmark "ARI" (Poppins 700, blanco) + "shopping" debajo (Poppins 700,
+`#F0997B`, más chico, letter-spacing amplio).
+
+Assets: `public/images/brand/logo-ari.svg` (lockup completo,
+reemplaza `logo-ari.png`) y `app/icon.svg` (versión reducida — solo
+círculo + mariposa, sin wordmark — favicon/app icon vía la convención
+de Next.js App Router).
+
+## 5. Hallazgo: causa raíz del estado mixto anterior
+
+Al auditar `navbar.tsx` para esta implementación se encontró que,
+desde el arranque de este proyecto de reskin, nunca se había tocado:
+una barra superior con gradiente `from-amber-300 via-yellow-200
+to-lime-200` y una línea decorativa `from-cyan-400 via-violet-500
+to-fuchsia-500`, ambas del esquema arcoíris original (punto 1 de §2).
+Esto confirma que el "estado mixto" visto en producción durante ADR
+0007 no era solo "header pendiente de una pasada futura" en abstracto
+— eran restos concretos y nunca inventariados del esquema anterior,
+conviviendo con cada iteración de paleta desde entonces sin que nadie
+los marcara como deuda. Se eliminan en la sub-fase 2 de esta
+implementación.
+
+## 6. Plan de implementación
+
+Por sub-fases, cada una con rama `fix/*`, diff mostrado y PR sin
+mergear hasta confirmación explícita del usuario. Cada sub-fase debe
+dejar el sitio en un estado internamente coherente (no fragmentos
+aislados en producción — la lección de los puntos 3 y 4 de §2) y debe
+confirmar con evidencia real (no supuesta) que el flujo de
+auto-refresh desde Medusa Admin (precio/descripción/imagen) sigue
+funcionando.
+
+1. Tokens base + logo (`globals.css`, `logo-ari.svg`, favicon).
+2. Header + footer (`navbar.tsx` — incluida la limpieza de §5 —,
+   `footer.tsx`, logo aplicado).
+3. Product card + grid de catálogo + badges.
+4. Home (hero, tiles de categoría, secciones).
+5. Página de producto + drawers de carrito/wishlist.
+
+### Nota de implementación: alias de compatibilidad de tokens
+
+La sub-fase 1 solo toca `globals.css`/`layout.tsx`/assets — no
+`catalog-client.tsx`, `product-card.tsx` ni `button.tsx`, que hoy
+siguen usando los nombres de token de ADR 0007
+(`ari-ciruela`, `ari-carbon-oscuro`, `ari-cobre`, `ari-carbon`,
+`ari-terracota-oscuro`, `ari-hueso`). Para no dejar esos usos sin
+estilo entre sub-fases, `globals.css` define esos nombres como alias
+temporales resueltos ya contra la paleta nueva. Cada sub-fase que
+toque esos archivos reemplaza el nombre de clase por el token
+definitivo; los alias se eliminan por completo al cerrar la sub-fase
+5.
+
+## 7. Consecuencias
+
+- El sitio completo adopta la paleta nueva en un solo despliegue desde
+  la sub-fase 1 (vía los alias de §6), incluso antes de que cada
+  componente migre al nombre de token definitivo — evita repetir el
+  error de "token aislado rodeado del esquema viejo" de los puntos 3 y
+  4 de §2.
+- Domine y su carga de fuente se eliminan; Poppins se agrega mínimo
+  (solo peso 700).
+- Trabajo puramente de frontend: no requiere cambios en
+  `commerce-backend`, `platform-infra`, ni CI nuevo.
+- `docs-portal` se actualiza con capturas/descripción del resultado
+  final una vez cada sub-fase esté validada en producción, no antes.
@@ -93,6 +93,8 @@ nav:
      - "0004 · Stack multi-categoría": decisiones/0004-evaluacion-stack-multi-categoria.md
      - "0005 · Rediseño storefront": decisiones/0005-rediseno-storefront.md
      - "0006 · Motor de búsqueda y facetas": decisiones/0006-motor-busqueda-facetas.md
+      - "0007 · Identidad visual propia": decisiones/0007-identidad-visual-propia.md
+      - "0008 · Identidad Navy & Coral": decisiones/0008-identidad-navy-coral.md
      - Plantilla ADR: decisiones/plantilla-adr.md
  - Playbooks:
      - Crashloop Medusa: playbooks/incidente-crashloop-medusa.md
@@ -25,7 +25,7 @@ spec:
        runAsNonRoot: false
      containers:
        - name: app
-          image: gitea.cruzcloud.net/devops/docs-portal:v1.0.162
+          image: gitea.cruzcloud.net/devops/docs-portal:v1.0.181
          # El base saca TODAS las capabilities. Probado en vivo y
          # revertido: con drop: ALL (aunque se agregue NET_BIND_SERVICE
          # de vuelta) el propio entrypoint de nginx:1.27-alpine falla al
@@ -0,0 +1,45 @@
+import { searchWithFacets } from "@/lib/headless/client";
+import type { ProductFilters } from "@/lib/headless/types";
+
+// PredictiveSearch es un componente cliente y no puede pegarle directo
+// al provider server-side (MEDUSA_BACKEND_URL es un nombre DNS interno
+// del cluster, no resuelve desde el navegador) -- esta ruta es el
+// puente same-origin.
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+
+  const filters: ProductFilters = {
+    query: searchParams.get("q") ?? undefined,
+    category: searchParams.get("category") ?? undefined,
+    collection: searchParams.get("collection") ?? undefined,
+    brand: searchParams.get("brand") ?? undefined,
+    ageRange: searchParams.get("ageRange") ?? undefined,
+  };
+
+  const minPrice = searchParams.get("minPrice");
+  if (minPrice) filters.minPrice = Number(minPrice);
+  const maxPrice = searchParams.get("maxPrice");
+  if (maxPrice) filters.maxPrice = Number(maxPrice);
+  const limit = searchParams.get("limit");
+  if (limit) filters.limit = Number(limit);
+
+  try {
+    const result = await searchWithFacets(filters);
+    // provider actual no implementa searchWithFacets (mock/shopify) --
+    // degradar a vacío, no a 500; el componente cliente cae de nuevo a
+    // su propio filtrado si esta ruta no trae nada útil.
+    return Response.json(
+      result ?? { products: [], facetDistribution: {}, count: 0 },
+    );
+  } catch (error) {
+    return Response.json(
+      {
+        products: [],
+        facetDistribution: {},
+        count: 0,
+        error: (error as Error).message,
+      },
+      { status: 502 },
+    );
+  }
+}
@@ -1,10 +1,26 @@
@import "tailwindcss";

@theme {
-  --color-ari-cyan: #06b6d4;
-  --color-ari-magenta: #ec4899;
-  --color-ari-yellow: #fde047;
-  --color-ari-blue: #0f172a;
+  /* ADR 0008 ("Navy & Coral") -- reemplaza ADR 0007 (Opcion 2, "Atelier
+     calido"). Ver docs-portal/docs/decisiones/0008-identidad-navy-coral.md */
+  --color-ari-marino: #122844;        /* ancla: header, footer, badge "Nuevo", fondo de hero */
+  --color-ari-coral: #D85A30;         /* acento unico de accion: CTA, precio destacado */
+  --color-ari-coral-claro: #F0997B;   /* acento secundario: subtitulos sobre marino, ala inferior del isotipo */
+
+  /* Alias de compatibilidad -- ADR 0007 definio estos nombres y hoy los
+     siguen consumiendo catalog-client.tsx, product-card.tsx y button.tsx
+     (migracion pendiente en las sub-fases 3-5 del ADR 0008). Se resuelven
+     ya contra la paleta nueva para que ningun uso existente quede sin
+     estilo entre sub-fases; se eliminan por completo al cerrar la
+     sub-fase 5. No usar estos alias en código nuevo. */
+  --color-ari-ciruela: var(--color-ari-coral);
+  --color-ari-carbon-oscuro: var(--color-ari-marino);
+  --color-ari-cobre: var(--color-ari-coral-claro);
+  --color-ari-carbon: var(--color-ari-marino);
+  --color-ari-terracota-oscuro: var(--color-ari-coral);
+  --color-ari-hueso: #FFFFFF;
+
+  --font-display: var(--font-poppins), ui-sans-serif, system-ui, sans-serif;
  --animate-accordion-down: accordion-down .2s ease-out;
  --animate-accordion-up: accordion-up .2s ease-out;
 }
@@ -15,10 +31,10 @@
 :root { color-scheme: light; }
 * { border-color: rgb(226 232 240); }
 html { scroll-behavior: smooth; }
-body { margin: 0; background: #fff; color: #0f172a; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
+body { margin: 0; background: #FFFFFF; color: var(--color-slate-900); font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
 button, a { -webkit-tap-highlight-color: transparent; }
-button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(167 139 250 / .55); outline-offset: 3px; }
-::selection { background: #fde047; color: #0f172a; }
+button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(216 90 48 / .5); outline-offset: 3px; }
+::selection { background: rgb(216 90 48 / .15); color: var(--color-slate-900); }

 .content-auto {
  content-visibility: auto;
@@ -0,0 +1,14 @@
+<!-- ADR 0008 ("Navy & Coral"). Version reducida del isotipo para favicon/
+     app icon: solo circulo marino + mariposa, sin wordmark (no cabe
+     legible a este tamano). Convencion de Next.js App Router: este
+     archivo se sirve automaticamente como favicon/app icon. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34" role="img" aria-label="ARI shopping">
+  <circle cx="17" cy="17" r="17" fill="#122844"/>
+  <g transform="translate(0 5)">
+    <ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#D85A30"/>
+    <ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#D85A30"/>
+    <ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#F0997B"/>
+    <ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#F0997B"/>
+    <rect x="16" y="3" width="2" height="18" rx="1" fill="#122844"/>
+  </g>
+</svg>
@@ -1,4 +1,5 @@
 import type { Metadata, Viewport } from "next";
+import { Inter, Poppins } from "next/font/google";
 import "./globals.css";
 import { CartDrawer } from "@/components/cart/cart-drawer";
 import { Footer } from "@/components/layout/footer";
@@ -20,9 +21,15 @@ export const metadata: Metadata = {
  openGraph: { title: "ARI Shopping", description: "Tesoros para cada aventura.", type: "website", locale: "es_CO" },
 };

-export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#0f172a" };
+export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#122844" };
+
+// ADR 0008 ("Navy & Coral"): Poppins peso 700 para los "momentos de marca"
+// (wordmark, h1/h2, precio, CTA) + Inter para body/UI -- solo se carga el
+// peso 700, es el unico que usa --font-display.
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
+const poppins = Poppins({ subsets: ["latin"], weight: ["700"], variable: "--font-poppins", display: "swap" });

 export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  const [products, categories] = await Promise.all([getProducts(), getCategories()]);
-  return <html lang="es"><body><Navbar products={products} categories={categories} /><main>{children}</main><Footer /><CartDrawer /><WishlistDrawer /></body></html>;
+  return <html lang="es" className={`${inter.variable} ${poppins.variable}`}><body><Navbar products={products} categories={categories} /><main>{children}</main><Footer /><CartDrawer /><WishlistDrawer /></body></html>;
 }
@@ -2,5 +2,5 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";

 export default function NotFound() {
-  return <section className="grid min-h-[60vh] place-items-center px-4 text-center"><div><span className="text-7xl font-black text-cyan-500">404</span><h1 className="mt-3 text-3xl font-black">Este tesoro no existe</h1><p className="mt-3 text-slate-500">Regresa al catálogo para continuar explorando.</p><Button asChild variant="magenta" className="mt-6"><Link href="/catalog">Ir al catálogo</Link></Button></div></section>;
+  return <section className="grid min-h-[60vh] place-items-center px-4 text-center"><div><span className="text-7xl font-black text-cyan-500">404</span><h1 className="mt-3 text-3xl font-black">Este tesoro no existe</h1><p className="mt-3 text-slate-500">Regresa al catálogo para continuar explorando.</p><Button asChild variant="primary" className="mt-6"><Link href="/catalog">Ir al catálogo</Link></Button></div></section>;
 }
@@ -19,3 +19,8 @@ data:
  S3_ENDPOINT: http://minio-svc:9000
  S3_REGION: us-east-1
  S3_BUCKET: ari-products
+
+  # Leido por el plugin @rokmohar/medusa-plugin-meilisearch (nombre de
+  # env var del plugin, no del servidor Meilisearch en si -- ver
+  # MEILI_MASTER_KEY en secrets.template.yaml).
+  MEILISEARCH_HOST: http://meilisearch-svc:7700
@@ -7,6 +7,7 @@ resources:
  - redis.yaml
  - minio.yaml
  - minio-bootstrap-job.yaml
+  - meilisearch.yaml
  - medusa/
  - ingress-commerce.yaml
  - middleware-commerce-redirect.yaml
@@ -65,7 +65,7 @@ spec:
              memory: 64Mi

        - name: migrations
-          image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.127
+          image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.168
          imagePullPolicy: IfNotPresent
          command:
            - node
@@ -86,7 +86,7 @@ spec:

      containers:
        - name: app
-          image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.127
+          image: gitea.cruzcloud.net/devops/ecommerce-medusa:v1.0.168
          imagePullPolicy: IfNotPresent
          envFrom:
            - configMapRef:
@@ -0,0 +1,86 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: meilisearch-svc
+spec:
+  selector:
+    app: commerce-meilisearch
+  ports:
+    - name: http
+      port: 7700
+      targetPort: 7700
+---
+apiVersion: apps/v1
+kind: StatefulSet
+metadata:
+  name: commerce-meilisearch
+spec:
+  serviceName: meilisearch-svc
+  replicas: 1
+  selector:
+    matchLabels:
+      app: commerce-meilisearch
+  template:
+    metadata:
+      labels:
+        app: commerce-meilisearch
+    spec:
+      terminationGracePeriodSeconds: 30
+      containers:
+        - name: meilisearch
+          image: getmeili/meilisearch:v1.53.1
+          imagePullPolicy: IfNotPresent
+          env:
+            - name: MEILI_MASTER_KEY
+              valueFrom:
+                secretKeyRef:
+                  name: commerce-secrets
+                  key: MEILI_MASTER_KEY
+            - name: MEILI_ENV
+              value: production
+            # Sin telemetria a un tercero por defecto (misma postura del
+            # resto del namespace: nada de egress no explicado).
+            - name: MEILI_NO_ANALYTICS
+              value: "true"
+          ports:
+            - name: http
+              containerPort: 7700
+          # /health no requiere auth (confirmado en vivo) -- sirve tal
+          # cual para las dos probes, igual que minio usa sus propios
+          # endpoints /minio/health/*.
+          readinessProbe:
+            httpGet:
+              path: /health
+              port: http
+            initialDelaySeconds: 5
+            periodSeconds: 10
+            timeoutSeconds: 5
+            failureThreshold: 6
+          livenessProbe:
+            httpGet:
+              path: /health
+              port: http
+            initialDelaySeconds: 15
+            periodSeconds: 20
+            timeoutSeconds: 5
+            failureThreshold: 6
+          resources:
+            requests:
+              cpu: 100m
+              memory: 256Mi
+            limits:
+              cpu: 500m
+              memory: 768Mi
+          volumeMounts:
+            - name: meilisearch-data
+              mountPath: /meili_data
+  volumeClaimTemplates:
+    - metadata:
+        name: meilisearch-data
+      spec:
+        accessModes:
+          - ReadWriteOnce
+        storageClassName: local-path
+        resources:
+          requests:
+            storage: 5Gi
@@ -23,6 +23,14 @@ stringData:
  JWT_SECRET: CAMBIAR
  COOKIE_SECRET: CAMBIAR

+  # Master key del servidor Meilisearch (StatefulSet commerce-meilisearch,
+  # env MEILI_MASTER_KEY del propio contenedor getmeili/meilisearch) Y
+  # credencial que usa el plugin de Medusa para autenticarse contra el
+  # -- MISMO valor, dos nombres de secret porque cada lado (servidor vs.
+  # plugin cliente) usa su propia convencion de nombre de env var.
+  MEILI_MASTER_KEY: CAMBIAR
+  MEILISEARCH_API_KEY: CAMBIAR
+
  # Debe ser el MISMO valor que REVALIDATE_SECRET en el Secret
  # commerce-storefront: el subscriber de Medusa lo envía como header
  # x-revalidate-secret al invocar POST /api/revalidate en el storefront.
@@ -49,7 +49,7 @@ export function CartDrawer() {
        <div className="space-y-4 border-t border-slate-100 p-6">
          <div><div className="mb-2 flex justify-between text-xs font-bold text-slate-600"><span>{pricedItems ? "Progreso para envío gratis" : "Cotización personalizada"}</span><span>{pricedItems ? `${Math.round(progress)}%` : "Por confirmar"}</span></div><Progress value={progress} /></div>
          <div className="flex items-center justify-between"><span className="font-bold text-slate-600">Subtotal</span><strong className="text-xl font-black">{pricedItems ? formatMoney(subtotal) : "Por confirmar"}</strong></div>
-          <Button variant="magenta" size="lg" className="w-full" disabled={!items.length} onClick={checkout}>Continuar por WhatsApp</Button>
+          <Button variant="primary" size="lg" className="w-full" disabled={!items.length} onClick={checkout}>Continuar por WhatsApp</Button>
          <Button variant="ghost" className="w-full" disabled={!items.length} onClick={clearCart}>Vaciar carrito</Button>
        </div>
      </SheetContent>
@@ -7,7 +7,7 @@ import { PromoTile } from "@/components/home/category-tiles";
 import { ProductCard } from "@/components/product/product-card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import type { Category, Product } from "@/lib/headless/types";
+import type { Category, FacetDistribution, Product } from "@/lib/headless/types";

 // Cada cuantas tarjetas de producto se intercala un tile promocional en
 // la grilla (patron Walmart, ADR 0005 seccion 3): grid con tiles
@@ -156,8 +156,10 @@ export function CatalogClient({
  // Conteos por valor de filtro (patron Amazon: "Marca (12)"), calculados
  // sobre los productos que ya pasan el resto de filtros activos -- cada
  // dimension se cuenta excluyendose a si misma para reflejar cuantos
-  // resultados habria si se eligiera ese valor.
-  const categoryCounts = useMemo(() => {
+  // resultados habria si se eligiera ese valor. Sirven de fallback cuando
+  // el provider activo no soporta facetas reales (mock/shopify) o cuando
+  // la busqueda en vivo todavia no respondio.
+  const fallbackCategoryCounts = useMemo(() => {
    const base = products.filter(
      (product) => matchesQuery(product, query) && matchesCollection(product, collection) && matchesBrand(product, brand) && matchesAge(product, age) && matchesPrice(product, maxPrice),
    );
@@ -170,7 +172,7 @@ export function CatalogClient({
    return counts;
  }, [age, brand, categories, categoryGroups, collection, maxPrice, products, query]);

-  const brandCounts = useMemo(() => {
+  const fallbackBrandCounts = useMemo(() => {
    const base = products.filter(
      (product) =>
        matchesQuery(product, query) &&
@@ -187,7 +189,7 @@ export function CatalogClient({
    return counts;
  }, [age, allowedCategories, brands, category, collection, maxPrice, products, query]);

-  const ageCounts = useMemo(() => {
+  const fallbackAgeCounts = useMemo(() => {
    const base = products.filter(
      (product) =>
        matchesQuery(product, query) &&
@@ -204,6 +206,108 @@ export function CatalogClient({
    return counts;
  }, [ages, allowedCategories, brand, category, collection, maxPrice, products, query]);

+  // "Mochilas y morrales" etc.: nombre sintetico de grupo que no existe
+  // como valor indexado en Meilisearch (ningun producto lo tiene como
+  // category real, solo sus hijos -- ver categoryGroups arriba). Mientras
+  // esa sea la categoria activa, las facetas en vivo de marca/edad no
+  // pueden filtrar por ella y se degrada al conteo client-side, que si
+  // sabe expandir el grupo via matchesCategory/allowedCategories.
+  const categoryIsLeafOrNone = category === "Todos" || !categoryGroups[category];
+
+  // Conteos reales via Meilisearch (ADR 0006 Etapa 2 Fase 3b): un fetch
+  // por dimension contra /api/search, cada uno omitiendo su propio filtro
+  // (mismo criterio de auto-exclusion que el fallback de arriba) para que
+  // los conteos reflejen el subconjunto ya filtrado por las OTRAS
+  // dimensiones y se puedan seguir eligiendo otros valores. `limit=0` evita
+  // rehidratar precios de productos que no vamos a mostrar -- solo importan
+  // `facetDistribution` y `count`.
+  const [liveFacets, setLiveFacets] = useState<{
+    category: Record<string, number> | null;
+    categoryTotal: number | null;
+    brand: Record<string, number> | null;
+    brandTotal: number | null;
+    ageRange: Record<string, number> | null;
+    ageTotal: number | null;
+  }>({ category: null, categoryTotal: null, brand: null, brandTotal: null, ageRange: null, ageTotal: null });
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    function buildParams(omit: "category" | "brand" | "ageRange"): URLSearchParams {
+      const params = new URLSearchParams({ limit: "0" });
+      if (query) params.set("q", query);
+      if (collection) params.set("collection", collection);
+      if (omit !== "category" && category !== "Todos" && categoryIsLeafOrNone) {
+        params.set("category", category);
+      }
+      if (omit !== "brand" && brand !== "Todas") params.set("brand", brand);
+      if (omit !== "ageRange" && age !== "Todas") params.set("ageRange", age);
+      if (maxPrice > 0) params.set("maxPrice", String(maxPrice));
+      return params;
+    }
+
+    async function fetchFacet(omit: "category" | "brand" | "ageRange") {
+      const response = await fetch(`/api/search?${buildParams(omit).toString()}`, {
+        signal: controller.signal,
+      });
+      return (await response.json()) as { facetDistribution?: FacetDistribution };
+    }
+
+    // El "count"/estimatedTotalHits que devuelve /api/search viene en 0 con
+    // limit=0 (confirmado en vivo contra Meilisearch real -- limit>=1 lo
+    // reporta bien, limit=0 no). facetDistribution si es correcto con
+    // limit=0, y cada producto tiene siempre un valor para cada dimension
+    // (mapProduct usa defaults como "ARI Shopping"/"Todas", nunca null), asi
+    // que sumar sus valores da el total real sin depender de ese campo.
+    function sumFacetValues(facet: Record<string, number> | null): number {
+      return facet ? Object.values(facet).reduce((sum, value) => sum + value, 0) : 0;
+    }
+
+    const timer = setTimeout(() => {
+      Promise.all([fetchFacet("category"), fetchFacet("brand"), fetchFacet("ageRange")])
+        .then(([categoryRes, brandRes, ageRes]) => {
+          // Un facetDistribution vacio ({}) es la senal de degrade explicita
+          // de /api/search (provider sin searchWithFacets, o Meilisearch
+          // sin indices todavia) -- distinto de una faceta real con 0
+          // resultados, que igual trae la clave presente.
+          const categoryFacet = categoryRes.facetDistribution && "category" in categoryRes.facetDistribution ? categoryRes.facetDistribution.category : null;
+          const brandFacet = brandRes.facetDistribution && "brand" in brandRes.facetDistribution ? brandRes.facetDistribution.brand : null;
+          const ageFacet = ageRes.facetDistribution && "ageRange" in ageRes.facetDistribution ? ageRes.facetDistribution.ageRange : null;
+          setLiveFacets({
+            category: categoryFacet,
+            categoryTotal: categoryFacet ? sumFacetValues(categoryFacet) : null,
+            brand: categoryIsLeafOrNone ? brandFacet : null,
+            brandTotal: categoryIsLeafOrNone && brandFacet ? sumFacetValues(brandFacet) : null,
+            ageRange: categoryIsLeafOrNone ? ageFacet : null,
+            ageTotal: categoryIsLeafOrNone && ageFacet ? sumFacetValues(ageFacet) : null,
+          });
+        })
+        .catch((error) => {
+          if ((error as Error).name !== "AbortError") {
+            setLiveFacets({ category: null, categoryTotal: null, brand: null, brandTotal: null, ageRange: null, ageTotal: null });
+          }
+        });
+    }, 300);
+
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [age, brand, category, categoryIsLeafOrNone, collection, maxPrice, query]);
+
+  const categoryCounts = useMemo(
+    () => (liveFacets.category ? { Todos: liveFacets.categoryTotal ?? 0, ...liveFacets.category } : fallbackCategoryCounts),
+    [fallbackCategoryCounts, liveFacets.category, liveFacets.categoryTotal],
+  );
+  const brandCounts = useMemo(
+    () => (liveFacets.brand ? { Todas: liveFacets.brandTotal ?? 0, ...liveFacets.brand } : fallbackBrandCounts),
+    [fallbackBrandCounts, liveFacets.brand, liveFacets.brandTotal],
+  );
+  const ageCounts = useMemo(
+    () => (liveFacets.ageRange ? { Todas: liveFacets.ageTotal ?? 0, ...liveFacets.ageRange } : fallbackAgeCounts),
+    [fallbackAgeCounts, liveFacets.ageRange, liveFacets.ageTotal],
+  );
+
  const reset = () => {
    setQuery("");
    setCategory("Todos");
@@ -219,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>
                )}
@@ -238,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>
@@ -288,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")}
@@ -308,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>
@@ -327,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>
@@ -364,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}
@@ -1,11 +1,10 @@
-import Image from "next/image";
 import Link from "next/link";
 import { Facebook, Instagram, MessageCircle } from "lucide-react";

 export function Footer() {
-  return <footer className="bg-slate-950 text-white"><div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:grid-cols-2 lg:grid-cols-4"><div><div className="flex items-center gap-4"><div className="relative size-16 overflow-hidden rounded-full"><Image src="/images/brand/logo-ari.png" alt="ARI Shopping" fill sizes="64px" className="object-cover" /></div><div><strong className="text-xl font-black">ARI Shopping</strong><p className="text-xs text-white/60">Tesoros para cada aventura.</p></div></div><div className="mt-5 flex gap-3"><Instagram /><Facebook /><MessageCircle /></div></div><FooterColumn title="Compra" links={["Novedades", "Juguetes", "Mochilas", "Regalos"]} /><FooterColumn title="Ayuda" links={["Preguntas frecuentes", "Envíos", "Cambios", "Contacto"]} /><div><h3 className="font-black">Newsletter</h3><p className="mt-3 text-sm leading-6 text-white/60">Recibe lanzamientos y promociones especiales.</p><div className="mt-4 flex rounded-full bg-white p-1"><input className="min-w-0 flex-1 bg-transparent px-4 text-sm text-slate-950 outline-none" placeholder="Tu correo" /><button className="rounded-full bg-yellow-300 px-4 text-sm font-black text-slate-950">Unirme</button></div></div></div><div className="border-t border-white/10 py-5 text-center text-xs text-white/50">© 2026 ARI Shopping · Frontend headless v4.1 · GitOps</div></footer>;
+  return <footer className="bg-ari-marino text-white"><div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:grid-cols-2 lg:grid-cols-4"><div><div className="flex flex-col items-start gap-3"><img src="/images/brand/logo-ari.svg" alt="ARI shopping" className="h-11 w-auto" width={200} height={64} />{/* eslint-disable-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}<p className="text-xs text-white/60">Tesoros para cada aventura.</p></div><div className="mt-5 flex gap-3"><Instagram /><Facebook /><MessageCircle /></div></div><FooterColumn title="Compra" links={["Novedades", "Juguetes", "Mochilas", "Regalos"]} /><FooterColumn title="Ayuda" links={["Preguntas frecuentes", "Envíos", "Cambios", "Contacto"]} /><div><h3 className="font-black">Newsletter</h3><p className="mt-3 text-sm leading-6 text-white/60">Recibe lanzamientos y promociones especiales.</p><div className="mt-4 flex rounded-full bg-white p-1"><input className="min-w-0 flex-1 bg-transparent px-4 text-sm text-slate-950 outline-none" placeholder="Tu correo" /><button className="rounded-full bg-ari-coral px-4 text-sm font-black text-white">Unirme</button></div></div></div><div className="border-t border-white/10 py-5 text-center text-xs text-white/50">© 2026 ARI Shopping · Frontend headless v4.1 · GitOps</div></footer>;
 }

 function FooterColumn({ title, links }: { title: string; links: string[] }) {
-  return <div><h3 className="font-black">{title}</h3><div className="mt-4 grid gap-3 text-sm text-white/60">{links.map((link) => <Link key={link} href="/catalog" className="hover:text-yellow-300">{link}</Link>)}</div></div>;
+  return <div><h3 className="font-black">{title}</h3><div className="mt-4 grid gap-3 text-sm text-white/60">{links.map((link) => <Link key={link} href="/catalog" className="hover:text-ari-coral-claro">{link}</Link>)}</div></div>;
 }
@@ -1,6 +1,5 @@
 "use client";

-import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
 import { ChevronDown, Heart, LayoutGrid, Menu, MessageCircle, PackageCheck, ShoppingCart, UserRound } from "lucide-react";
@@ -46,26 +45,27 @@ export function Navbar({ products, categories }: { products: Product[]; categori

  return (
    <header className="sticky top-0 z-40 border-b border-slate-200/80 bg-white/95 shadow-sm backdrop-blur-xl">
-      <div className="bg-gradient-to-r from-amber-300 via-yellow-200 to-lime-200 px-4 py-2 text-center text-xs font-black text-slate-950 sm:text-sm">
-        Paga tus compras a cuotas · Envíos nacionales · <span className="underline decoration-2 underline-offset-2">Compra segura con ARI</span>
+      <div className="bg-ari-marino px-4 py-2 text-center text-xs font-black text-white sm:text-sm">
+        Paga tus compras a cuotas · Envíos nacionales · <span className="underline decoration-ari-coral-claro decoration-2 underline-offset-2">Compra segura con ARI</span>
      </div>

      <div className="relative overflow-visible bg-white">
-        <div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-cyan-400 via-violet-500 to-fuchsia-500" />
-        <div className="mx-auto grid max-w-7xl grid-cols-[72px_1fr_auto] items-center gap-4 px-4 py-4 lg:grid-cols-[92px_minmax(420px,1fr)_auto] lg:gap-8">
-          <Link href="/" className="relative size-16 overflow-hidden rounded-full border-2 border-slate-900 bg-black shadow-lg lg:size-20">
-            <Image src="/images/brand/logo-ari.png" alt="ARI Shopping" fill priority sizes="80px" className="object-cover" />
+        <div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-ari-coral" />
+        <div className="mx-auto grid max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-4 px-4 py-4 lg:gap-8">
+          <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} />
          </Link>
-          <PredictiveSearch products={products} />
+          <PredictiveSearch />
          <div className="flex items-center gap-2">
-            <Button variant="outline" size="icon" aria-label="Mi cuenta" className="hidden border-slate-300 bg-white text-slate-900 hover:border-violet-400 hover:bg-violet-50 sm:inline-flex" onClick={() => setAccountOpen(true)}><UserRound /></Button>
-            <Button variant="outline" size="icon" aria-label={`Favoritos: ${wishlistCount}`} className="relative hidden border-slate-300 bg-white text-slate-900 hover:border-fuchsia-400 hover:bg-fuchsia-50 sm:inline-flex" onClick={openWishlist}>
+            <Button variant="outline" size="icon" aria-label="Mi cuenta" className="hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={() => setAccountOpen(true)}><UserRound /></Button>
+            <Button variant="outline" size="icon" aria-label={`Favoritos: ${wishlistCount}`} className="relative hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={openWishlist}>
              <Heart />
-              {wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-violet-600 text-[10px] font-black text-white">{wishlistCount}</span>}
+              {wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-ari-marino text-[10px] font-black text-white">{wishlistCount}</span>}
            </Button>
-            <Button variant="magenta" size="icon" onClick={openCart} aria-label={`Carrito con ${count} productos`} className="relative shadow-lg shadow-fuchsia-500/20">
+            <Button variant="primary" size="icon" onClick={openCart} aria-label={`Carrito con ${count} productos`} className="relative">
              <ShoppingCart />
-              <span className="absolute -right-2 -top-2 grid size-6 place-items-center rounded-full bg-yellow-300 text-[11px] font-black text-slate-950">{count}</span>
+              <span className="absolute -right-2 -top-2 grid size-6 place-items-center rounded-full bg-ari-marino text-[11px] font-black text-white">{count}</span>
            </Button>
          </div>
        </div>
@@ -82,7 +82,7 @@ export function Navbar({ products, categories }: { products: Product[]; categori
            <SheetDescription>Categorías y colecciones del catálogo.</SheetDescription>
          </SheetHeader>
          <div className="flex-1 overflow-y-auto p-6">
-            <p className="mb-3 text-xs font-black uppercase tracking-[.16em] text-fuchsia-600">Categorías</p>
+            <p className="mb-3 text-xs font-black uppercase tracking-[.16em] text-ari-coral">Categorías</p>
            <div className="grid gap-2">
              <Suspense fallback={<MobileCategoryLinksFallback tree={tree} onNavigate={() => setMenuOpen(false)} />}>
                <MobileCategoryLinks tree={tree} onNavigate={() => setMenuOpen(false)} />
@@ -90,9 +90,9 @@ export function Navbar({ products, categories }: { products: Product[]; categori
            </div>
            {collections.length > 0 && (
              <>
-                <p className="mb-3 mt-8 text-xs font-black uppercase tracking-[.16em] text-violet-600">Colecciones</p>
+                <p className="mb-3 mt-8 text-xs font-black uppercase tracking-[.16em] text-ari-marino">Colecciones</p>
                <div className="flex flex-wrap gap-2">
-                  {collections.map((collection) => <Link key={collection} href={`/catalog?collection=${encodeURIComponent(collection)}`} onClick={() => setMenuOpen(false)} className="rounded-full bg-slate-100 px-4 py-2 text-sm font-bold hover:bg-violet-100 hover:text-violet-700">{collection}</Link>)}
+                  {collections.map((collection) => <Link key={collection} href={`/catalog?collection=${encodeURIComponent(collection)}`} onClick={() => setMenuOpen(false)} className="rounded-full bg-slate-100 px-4 py-2 text-sm font-bold hover:bg-ari-coral/10 hover:text-ari-coral">{collection}</Link>)}
                </div>
              </>
            )}
@@ -107,11 +107,11 @@ export function Navbar({ products, categories }: { products: Product[]; categori
      <Dialog open={accountOpen} onOpenChange={setAccountOpen}>
        <DialogContent className="max-w-lg p-7">
          <div className="pr-10">
-            <span className="text-xs font-black uppercase tracking-[.16em] text-violet-600">Atención personalizada</span>
+            <span className="text-xs font-black uppercase tracking-[.16em] text-ari-coral">Atención personalizada</span>
            <h2 className="mt-3 text-3xl font-black">Tu cuenta ARI</h2>
            <p className="mt-3 text-sm leading-6 text-slate-600">El inicio de sesión quedará conectado al backend headless. Mientras tanto, puedes gestionar pedidos y disponibilidad directamente por WhatsApp.</p>
            <div className="mt-6 grid gap-3">
-              <Button asChild variant="magenta" size="lg"><a href={process.env.NEXT_PUBLIC_WHATSAPP_URL ?? "https://wa.link/rvcqqc"} target="_blank" rel="noopener noreferrer"><MessageCircle />Hablar con ARI</a></Button>
+              <Button asChild variant="primary" size="lg"><a href={process.env.NEXT_PUBLIC_WHATSAPP_URL ?? "https://wa.link/rvcqqc"} target="_blank" rel="noopener noreferrer"><MessageCircle />Hablar con ARI</a></Button>
              <Button asChild variant="outline"><Link href="/catalog" onClick={() => setAccountOpen(false)}><PackageCheck />Ver mis opciones de compra</Link></Button>
            </div>
          </div>
@@ -136,16 +136,16 @@ function useCategoryNavigationState() {
 function pillClass(active: boolean): string {
  return `shrink-0 rounded-full px-4 py-2 text-sm font-extrabold transition ${
    active
-      ? "bg-gradient-to-r from-cyan-500 to-violet-500 text-white shadow-lg shadow-violet-950/30"
-      : "text-white/90 hover:bg-gradient-to-r hover:from-cyan-500 hover:to-violet-500 hover:text-white"
+      ? "bg-white text-ari-marino shadow-lg shadow-black/10"
+      : "text-white/90 hover:bg-white/10 hover:text-white"
  }`;
 }

 function mobileLinkClass(active: boolean): string {
  return `rounded-2xl border px-4 py-3 font-extrabold transition ${
    active
-      ? "border-violet-500 bg-violet-50 text-violet-700"
-      : "border-slate-200 hover:border-cyan-400 hover:bg-cyan-50"
+      ? "border-ari-coral bg-ari-coral/5 text-ari-coral"
+      : "border-slate-200 hover:border-ari-coral/50 hover:bg-ari-coral/5"
  }`;
 }

@@ -170,7 +170,7 @@ function CategoryNavBar({
  isAllActive: boolean;
 }) {
  return (
-    <nav className="border-b-4 border-fuchsia-500 bg-slate-950 text-white">
+    <nav className="bg-ari-marino text-white">
      <div className="mx-auto flex max-w-7xl items-center gap-1 px-4 py-2">
        <Button
          variant="ghost"
@@ -227,7 +227,7 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
      </button>

      {open && (
-        <div className="absolute left-0 top-full z-50 mt-1 w-[min(92vw,64rem)] rounded-2xl border border-slate-800 bg-slate-950 p-6 shadow-2xl">
+        <div className="absolute left-0 top-full z-50 mt-1 w-[min(92vw,64rem)] rounded-2xl border border-white/10 bg-ari-marino p-6 shadow-2xl">
          <div className="grid grid-cols-2 gap-x-6 gap-y-5 sm:grid-cols-3 lg:grid-cols-6">
            {tree.map((root) => (
              <div key={root.id}>
@@ -237,7 +237,7 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
                  aria-current={isActive(root.name) ? "page" : undefined}
                  onClick={() => setOpen(false)}
                  className={`block text-sm font-black uppercase tracking-wide transition ${
-                    isActive(root.name) ? "text-fuchsia-400" : "text-white hover:text-fuchsia-400"
+                    isActive(root.name) ? "text-ari-coral-claro" : "text-white hover:text-ari-coral-claro"
                  }`}
                >
                  {root.name}
@@ -251,7 +251,7 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
                          prefetch={false}
                          aria-current={isActive(child.name) ? "page" : undefined}
                          onClick={() => setOpen(false)}
-                          className={`block text-sm transition ${isActive(child.name) ? "font-bold text-violet-300" : "text-white/70 hover:text-white"}`}
+                          className={`block text-sm transition ${isActive(child.name) ? "font-bold text-ari-coral-claro" : "text-white/70 hover:text-white"}`}
                        >
                          {child.name}
                        </Link>
@@ -7,5 +7,5 @@ import { useCartStore } from "@/store/cart-store";

 export function MobileAddToCart({ product }: { product: Product }) {
  const addItem = useCartStore((state) => state.addItem);
-  return <div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur lg:hidden"><Button variant="magenta" size="lg" className="w-full" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag />Añadir al carrito</Button></div>;
+  return <div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur lg:hidden"><Button variant="primary" size="lg" className="w-full" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag />Añadir al carrito</Button></div>;
 }
@@ -33,15 +33,15 @@ export function ProductCard({ product, priority = false }: { product: Product; p
      : null;

  return (
-    <article className="group flex h-full flex-col overflow-hidden rounded-3xl border border-slate-100 bg-white shadow-lg shadow-slate-900/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-violet-500/10">
-      <div className="relative aspect-square overflow-hidden bg-slate-50">
+    <article className="group flex h-full flex-col overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg shadow-ari-carbon-oscuro/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-ari-ciruela/10">
+      <div className="relative aspect-square overflow-hidden bg-ari-hueso">
        <Link href={`/product/${product.slug}`} prefetch={false}><Image src={product.thumbnail} alt={product.name} fill priority={priority} sizes="(max-width: 640px) 82vw, (max-width: 1024px) 44vw, 280px" className="object-cover transition duration-500 group-hover:scale-[1.035]" /></Link>
-        <div className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-rose-600 text-white">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-fuchsia-500 text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-yellow-300 text-slate-950"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
-        <button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-fuchsia-500 text-white" : "bg-white/95 text-slate-900 hover:text-fuchsia-500"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
+        <div className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-ari-terracota-oscuro text-white">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-carbon-oscuro text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-cobre text-white"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
+        <button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-ari-ciruela text-white" : "bg-white/95 text-slate-900 hover:text-ari-ciruela"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
      </div>
      <div className="flex flex-1 flex-col space-y-3 p-5">
-        <div className="flex items-center justify-between gap-2 text-xs font-bold text-slate-500"><span>{product.category}</span><span className="rounded-full bg-cyan-50 px-2 py-1 text-cyan-700">{product.collection}</span></div>
-        <Link href={`/product/${product.slug}`} prefetch={false}><h3 className="line-clamp-2 min-h-12 text-lg font-black leading-6 text-slate-950 group-hover:text-fuchsia-600">{product.name}</h3></Link>
+        <div className="flex items-center justify-between gap-2 text-xs font-bold text-slate-500"><span>{product.category}</span><span className="rounded-md bg-ari-cobre/10 px-2 py-1 text-ari-cobre">{product.collection}</span></div>
+        <Link href={`/product/${product.slug}`} prefetch={false}><h3 className="line-clamp-2 min-h-12 text-lg font-black leading-6 text-ari-carbon group-hover:text-ari-ciruela">{product.name}</h3></Link>
        <p className="line-clamp-2 min-h-10 text-sm leading-5 text-slate-500">{product.shortDescription}</p>
        {product.variants.length > 1 && (
          <div className="flex flex-wrap gap-1.5">
@@ -53,9 +53,9 @@ export function ProductCard({ product, priority = false }: { product: Product; p
                aria-pressed={selectedVariantId === variant.id}
                aria-label={`${variant.name}: ${variant.value}`}
                onClick={() => setSelectedVariantId(variant.id)}
-                className={`rounded-full border px-2.5 py-1 text-xs font-bold transition ${
+                className={`rounded-md border px-2.5 py-1 text-xs font-bold transition ${
                  selectedVariantId === variant.id
-                    ? "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-700"
+                    ? "border-ari-ciruela bg-ari-ciruela/10 text-ari-ciruela"
                    : "border-slate-200 text-slate-600 hover:border-slate-400"
                } ${!variant.available ? "cursor-not-allowed opacity-40" : ""}`}
              >
@@ -70,9 +70,9 @@ export function ProductCard({ product, priority = false }: { product: Product; p
        <div className="mt-auto flex items-center justify-between gap-3 pt-1">
          <div className="flex flex-col">
            {product.compareAtPrice && <span className="text-xs font-bold text-slate-400 line-through">{formatMoney(product.compareAtPrice, product.currency)}</span>}
-            <strong className="text-sm font-black">{formatMoney(product.price, product.currency)}</strong>
+            <strong className="font-display text-base font-bold text-ari-carbon">{formatMoney(product.price, product.currency)}</strong>
          </div>
-          <Button variant="magenta" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
+          <Button variant="primary" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
        </div>
      </div>
    </article>
@@ -18,5 +18,5 @@ export function ProductPurchase({ product }: { product: Product }) {
    selectedVariant.inventoryQuantity <= LOW_STOCK_THRESHOLD
      ? selectedVariant.inventoryQuantity
      : null;
-  return <div><div className="mb-5 flex flex-wrap gap-2">{product.variants.map((variant) => <button key={variant.id} onClick={() => setVariantId(variant.id)} className={`rounded-full border px-4 py-2 text-sm font-bold ${variantId === variant.id ? "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-700" : "border-slate-200"}`}>{variant.value}</button>)}</div><div className="mb-6 flex items-end gap-3"><strong className="text-3xl font-black">{formatMoney(product.price, product.currency)}</strong>{product.compareAtPrice && <del className="text-slate-400">{formatMoney(product.compareAtPrice, product.currency)}</del>}</div><Button variant="magenta" size="lg" className="w-full" onClick={() => addItem(product, variantId)}><ShoppingBag />Añadir al carrito</Button><div className="mt-5 grid gap-3 rounded-2xl bg-slate-50 p-4 text-sm">{lowStock !== null ? <span className="flex items-center gap-2 font-bold text-amber-600"><TriangleAlert className="size-4" />Quedan {lowStock} unidades</span> : <span className="flex items-center gap-2 font-bold"><CheckCircle2 className="size-4 text-emerald-500" />Disponibilidad por confirmar</span>}<span className="flex items-center gap-2 font-bold"><Truck className="size-4 text-cyan-600" />Envíos nacionales</span></div></div>;
+  return <div><div className="mb-5 flex flex-wrap gap-2">{product.variants.map((variant) => <button key={variant.id} onClick={() => setVariantId(variant.id)} className={`rounded-full border px-4 py-2 text-sm font-bold ${variantId === variant.id ? "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-700" : "border-slate-200"}`}>{variant.value}</button>)}</div><div className="mb-6 flex items-end gap-3"><strong className="text-3xl font-black">{formatMoney(product.price, product.currency)}</strong>{product.compareAtPrice && <del className="text-slate-400">{formatMoney(product.compareAtPrice, product.currency)}</del>}</div><Button variant="primary" size="lg" className="w-full" onClick={() => addItem(product, variantId)}><ShoppingBag />Añadir al carrito</Button><div className="mt-5 grid gap-3 rounded-2xl bg-slate-50 p-4 text-sm">{lowStock !== null ? <span className="flex items-center gap-2 font-bold text-amber-600"><TriangleAlert className="size-4" />Quedan {lowStock} unidades</span> : <span className="flex items-center gap-2 font-bold"><CheckCircle2 className="size-4 text-emerald-500" />Disponibilidad por confirmar</span>}<span className="flex items-center gap-2 font-bold"><Truck className="size-4 text-cyan-600" />Envíos nacionales</span></div></div>;
 }
@@ -4,20 +4,45 @@ import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Search, X } from "lucide-react";
-import { FormEvent, useMemo, useState } from "react";
+import { FormEvent, useEffect, useState } from "react";
 import { Input } from "@/components/ui/input";
 import type { Product } from "@/lib/headless/types";

-export function PredictiveSearch({ products }: { products: Product[] }) {
+export function PredictiveSearch() {
  const router = useRouter();
  const [query, setQuery] = useState("");
-  const normalized = query.trim().toLocaleLowerCase("es");
-  const matches = useMemo(
-    () => normalized.length < 2
-      ? []
-      : products.filter((product) => [product.name, product.category, product.collection, product.brand].join(" ").toLocaleLowerCase("es").includes(normalized)).slice(0, 6),
-    [normalized, products],
-  );
+  const [matches, setMatches] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(false);
+  const normalized = query.trim();
+
+  useEffect(() => {
+    if (normalized.length < 2) {
+      setMatches([]);
+      setLoading(false);
+      return;
+    }
+
+    const controller = new AbortController();
+    setLoading(true);
+    const timer = setTimeout(() => {
+      fetch(`/api/search?q=${encodeURIComponent(normalized)}`, {
+        signal: controller.signal,
+      })
+        .then((response) => response.json())
+        .then((data: { products?: Product[] }) => {
+          setMatches((data.products ?? []).slice(0, 6));
+        })
+        .catch((error) => {
+          if ((error as Error).name !== "AbortError") setMatches([]);
+        })
+        .finally(() => setLoading(false));
+    }, 250);
+
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [normalized]);

  const submit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
@@ -36,6 +61,11 @@ export function PredictiveSearch({ products }: { products: Product[] }) {
          {query && <button type="button" aria-label="Limpiar búsqueda" className="absolute right-4 top-1/2 -translate-y-1/2 rounded-full p-1 text-slate-400 hover:bg-slate-100" onClick={() => setQuery("")}><X className="size-4" /></button>}
        </div>
      </div>
+      {loading && normalized.length >= 2 && matches.length === 0 && (
+        <div className="absolute left-0 right-0 top-[calc(100%+10px)] z-50 rounded-2xl border border-slate-200 bg-white p-4 text-center text-sm text-slate-500 shadow-2xl">
+          Buscando…
+        </div>
+      )}
      {matches.length > 0 && (
        <div className="absolute left-0 right-0 top-[calc(100%+10px)] z-50 overflow-hidden rounded-2xl border border-slate-200 bg-white p-2 shadow-2xl">
          {matches.map((product) => (
@@ -4,14 +4,20 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";

 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-extrabold transition-all focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-cyan-300/40 disabled:pointer-events-none disabled:opacity-50",
+  // ADR 0007 (Opcion 2, "Atelier calido"): radio moderado en vez de
+  // rounded-full, ring de foco tintado con el acento de marca en vez de
+  // cyan generico.
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-extrabold transition-all focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ari-cobre/40 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-slate-950 text-white shadow-lg hover:-translate-y-0.5 hover:bg-slate-800",
-        magenta: "bg-gradient-to-r from-fuchsia-500 to-pink-500 text-white shadow-lg shadow-pink-500/25 hover:-translate-y-0.5",
+        // Unico color reservado a accion (nunca decorativo) -- bloque
+        // solido, no gradiente, sobre toda la superficie del sitio que
+        // ya usaba esta variant (carrito, WhatsApp, checkout, "Agregar").
+        primary: "bg-ari-ciruela text-white shadow-lg shadow-ari-ciruela/25 hover:-translate-y-0.5 hover:brightness-110",
        yellow: "bg-yellow-300 text-slate-950 shadow-lg shadow-yellow-400/25 hover:-translate-y-0.5 hover:bg-yellow-200",
-        outline: "border border-slate-200 bg-white text-slate-950 hover:border-cyan-400 hover:bg-cyan-50",
+        outline: "border border-slate-200 bg-white text-slate-950 hover:border-ari-cobre hover:bg-ari-cobre/10",
        ghost: "text-slate-700 hover:bg-slate-100",
      },
      size: {
@@ -35,7 +35,7 @@ export function WishlistDrawer() {
              <div>
                <Link href={`/product/${product.slug}`} onClick={closeWishlist} prefetch={false} className="text-sm font-black leading-5 hover:text-fuchsia-600">{product.name}</Link>
                <p className="mt-1 text-xs text-slate-500">{product.category} · {product.collection}</p>
-                <Button size="sm" variant="magenta" className="mt-3" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag className="size-3.5" />Agregar</Button>
+                <Button size="sm" variant="primary" className="mt-3" onClick={() => addItem(product, product.variants[0]?.id)}><ShoppingBag className="size-3.5" />Agregar</Button>
              </div>
              <button className="self-start rounded-full p-2 text-slate-400 hover:bg-rose-50 hover:text-rose-600" onClick={() => removeProduct(product.id)} aria-label="Quitar favorito"><Trash2 className="size-4" /></button>
            </article>
@@ -25,7 +25,7 @@ spec:
        runAsUser: 1001
      containers:
        - name: app
-          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.157
+          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.180
          env:
            - name: HEADLESS_PROVIDER
              value: medusa
@@ -26,3 +26,7 @@ export async function searchProducts(query: string, limit?: number) {
 export async function getCategories() {
  return provider().getCategories();
 }
+
+export async function searchWithFacets(filters?: ProductFilters) {
+  return provider().searchWithFacets?.(filters);
+}
@@ -1,6 +1,8 @@
 import type {
  CatalogProvider,
  Category,
+  FacetDistribution,
+  FacetedSearchResult,
  Product,
  ProductFilters,
  ProductVariant,
@@ -385,6 +387,56 @@ async function fetchCategories(): Promise<Category[]> {
    }));
 }

+type MedusaSearchResponse = {
+  products: MedusaProduct[];
+  facetDistribution?: FacetDistribution;
+  count?: number;
+};
+
+// Pega contra /store/search (ADR 0006 Etapa 2) en vez de /store/products
+// -- Meilisearch resuelve texto tolerante a errores de tipeo y facetas
+// reales, la ruta del backend re-hidrata precio/inventario vía
+// query.graph antes de responder, así que el shape de MedusaProduct es
+// exactamente el mismo que ya mapea mapProduct().
+async function fetchWithFacets(
+  filters?: ProductFilters,
+  limit = 24,
+): Promise<FacetedSearchResult> {
+  const params = new URLSearchParams({
+    limit: String(limit),
+    region_id: regionId(),
+  });
+
+  if (filters?.query) params.set("q", filters.query);
+  if (filters?.category && filters.category !== "Todos") {
+    params.set("category", filters.category);
+  }
+  if (filters?.collection) params.set("collection", filters.collection);
+  if (filters?.brand && filters.brand !== "Todas") {
+    params.set("brand", filters.brand);
+  }
+  if (filters?.ageRange && filters.ageRange !== "Todas") {
+    params.set("ageRange", filters.ageRange);
+  }
+  if (typeof filters?.minPrice === "number") {
+    params.set("minPrice", String(filters.minPrice));
+  }
+  if (typeof filters?.maxPrice === "number") {
+    params.set("maxPrice", String(filters.maxPrice));
+  }
+
+  const response = await medusaFetch<MedusaSearchResponse>(
+    "/store/search",
+    params,
+  );
+
+  return {
+    products: response.products.map(mapProduct),
+    facetDistribution: response.facetDistribution ?? {},
+    count: response.count ?? response.products.length,
+  };
+}
+
 export const medusaCatalogProvider: CatalogProvider = {
  async getProducts(filters) {
    return fetchProducts(filters);
@@ -416,6 +468,11 @@ export const medusaCatalogProvider: CatalogProvider = {
  },

  async searchProducts(query, limit = 8) {
-    return fetchProducts({ query }, limit);
+    const { products } = await fetchWithFacets({ query }, limit);
+    return products;
+  },
+
+  async searchWithFacets(filters) {
+    return fetchWithFacets(filters, filters?.limit ?? 24);
  },
 };
@@ -38,6 +38,10 @@ export interface ProductFilters {
  ageRange?: string;
  minPrice?: number;
  maxPrice?: number;
+  // Solo lo usa searchWithFacets -- limit=0 pide facetDistribution/count
+  // sin rehidratar precios de productos que no se van a mostrar (ver
+  // sidebar de facetas en catalog-client.tsx).
+  limit?: number;
 }

 export interface Category {
@@ -47,9 +51,23 @@ export interface Category {
  parentId: string | null;
 }

+// facet -> valor -> cuantos productos del resultado filtrado tienen ese
+// valor (ej. { brand: { Marvel: 5, Disney: 10 } }).
+export type FacetDistribution = Record<string, Record<string, number>>;
+
+export interface FacetedSearchResult {
+  products: Product[];
+  facetDistribution: FacetDistribution;
+  count: number;
+}
+
 export interface CatalogProvider {
  getProducts(filters?: ProductFilters): Promise<Product[]>;
  getProductBySlug(slug: string): Promise<Product | null>;
  searchProducts(query: string, limit?: number): Promise<Product[]>;
  getCategories(): Promise<Category[]>;
+  // Opcional a propósito: mock.ts y shopify.ts no lo implementan y
+  // siguen compilando igual -- los llamadores caen de nuevo al
+  // filtrado/conteo 100% client-side que ya existe cuando no está.
+  searchWithFacets?(filters?: ProductFilters): Promise<FacetedSearchResult>;
 }
@@ -1,21 +0,0 @@
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: frontend-deploy
-spec:
-  template:
-    spec:
-      containers:
-        - name: web
-          env:
-            - name: HEADLESS_PROVIDER
-              value: medusa
-
-            - name: MEDUSA_BACKEND_URL
-              value: http://medusa-svc:9000
-
-            - name: MEDUSA_PUBLISHABLE_KEY
-              valueFrom:
-                secretKeyRef:
-                  name: commerce-storefront
-                  key: MEDUSA_PUBLISHABLE_KEY
@@ -0,0 +1,15 @@
+<!-- ADR 0008 ("Navy & Coral"). Isotipo: mariposa geometrica de 4 elipses
+     sobre circulo/campo marino + wordmark "ARI shopping".
+     Ver docs-portal/docs/decisiones/0008-identidad-navy-coral.md -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 64" role="img" aria-label="ARI shopping">
+  <rect width="200" height="64" rx="12" fill="#122844"/>
+  <g transform="translate(14 20)">
+    <ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#D85A30"/>
+    <ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#D85A30"/>
+    <ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#F0997B"/>
+    <ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#F0997B"/>
+    <rect x="16" y="3" width="2" height="18" rx="1" fill="#122844"/>
+  </g>
+  <text x="64" y="38" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="26" fill="#FFFFFF">ARI</text>
+  <text x="64" y="53" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="11" letter-spacing="2.5" fill="#F0997B">shopping</text>
+</svg>