feat: selector de region en catalogo publico (MX/USA/CA, Europa, Asia, Todos)

Filtra marcas por mercado regional. 4 opciones:
- Mexico/USA/Canada (36 marcas)
- Europa (27 marcas)
- Asia (15 marcas)
- Todos (546 marcas)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

dashboard/catalog-public.html

@@ -87,6 +87,34 @@
     }
     .search-wrapper button:hover { background: var(--btn-primary-bg-hover); }
 
+    /* ── Region bar ── */
+    .region-bar {
+      background: var(--color-bg-elevated);
+      border-bottom: 1px solid var(--color-border);
+      padding: var(--space-2) 0;
+    }
+    .region-inner {
+      max-width: var(--content-xl); margin: 0 auto;
+      padding: 0 var(--space-6);
+      display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
+    }
+    .region-label {
+      font-size: var(--text-caption); font-weight: var(--font-weight-semibold);
+      color: var(--color-text-muted); text-transform: uppercase;
+      letter-spacing: var(--tracking-wider); margin-right: var(--space-2);
+    }
+    .region-btn {
+      background: var(--btn-ghost-bg); border: 1px solid var(--btn-ghost-border);
+      color: var(--btn-ghost-text); padding: var(--space-1) var(--space-3);
+      border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-caption);
+      font-family: var(--font-body); transition: var(--transition-fast);
+    }
+    .region-btn:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
+    .region-btn.is-active {
+      background: var(--color-primary-muted); color: var(--color-primary);
+      border-color: var(--color-primary); font-weight: var(--font-weight-semibold);
+    }
+
     /* ── Breadcrumb ── */
     .breadcrumb {
       max-width: var(--content-xl); margin: 0 auto;
@@ -309,6 +337,17 @@
     </div>
   </header>
 
+  <!-- Country / Region selector -->
+  <div class="region-bar">
+    <div class="region-inner">
+      <span class="region-label">Región:</span>
+      <button class="region-btn is-active" data-region="north-america" onclick="setRegion('north-america')">🇲🇽 México, 🇺🇸 USA, 🇨🇦 Canadá</button>
+      <button class="region-btn" data-region="europe" onclick="setRegion('europe')">🇪🇺 Europa</button>
+      <button class="region-btn" data-region="asia" onclick="setRegion('asia')">🇯🇵 Asia</button>
+      <button class="region-btn" data-region="all" onclick="setRegion('all')">🌐 Todos</button>
+    </div>
+  </div>
+
   <div class="search-bar">
     <div class="search-wrapper">
       <input type="text" id="searchInput" placeholder="Buscar por numero de parte o nombre..." autocomplete="off">