simplifica buscador unificando clasificadores

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

simplifica buscador unificando clasificadores
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Rafael Lopez
Commit 4a3b055cf8cd11000100d26ac3db8a9f58abaa10 4a3b055c 1 parent f2550ee2
Showing 1 changed file with 275 additions and 231 deletions
src/routes/+page.svelte
--- a/src/routes/+page.svelte
View file @4a3b055
+++ b/src/routes/+page.svelte
View file @4a3b055
@@ -97,73 +97,56 @@
   $: hasMoreResults = results && allHits.length < results.found;
   // Modo de búsqueda
-  let searchMode = 'gastos';       // 'gastos' | 'ingresos'
+  // Modo de búsqueda simplificado: 'programas' | 'clasificadores'
-  let searchSubmode = 'programas'; // 'programas' | 'clasificadores'
+  let searchMode = 'programas';
   let selectedClassifiers = [];
-  const CLASIFICADORES_GASTOS = [
+  // Clasificadores unificados (transversales)
-    { id: 'finfun',  label: 'Finalidad y función' },
+  const CLASIFICADORES = [
-    { id: 'objeto',  label: 'Objetos de gasto' },
+    { id: 'entidad',    label: 'Entidades',           icon: '🏛️' },
-    { id: 'acteco',  label: 'Actividad económica' },
+    { id: 'objeto',     label: 'Objetos de gasto',    icon: '📦' },
-    { id: 'entidad', label: 'Entidades' },
+    { id: 'finfun',     label: 'Finalidad y función', icon: '🎯' },
-    { id: 'geografico', label: 'Geográfico', disabled: true },
+    { id: 'geografico', label: 'Geográfico',          icon: '📍', disabled: true },
+    { id: 'rubro',      label: 'Rubro',               icon: '💰', disabled: true },
+    { id: 'organismo',  label: 'Organismo',           icon: '🏦', disabled: true },
+    { id: 'fuente',     label: 'Fuente',              icon: '💵', disabled: true },
   ];
-  const CLASIFICADORES_INGRESOS = [
-    { id: 'rubro',     label: 'Rubro',      disabled: true },
-    { id: 'organismo', label: 'Organismo',  disabled: true },
-    { id: 'fuente',    label: 'Fuente',     disabled: true },
-    { id: 'entidad',   label: 'Entidades' },
-    { id: 'geografico',label: 'Geográfico', disabled: true },
-  ];
-
-  $: activeClasificadores = searchMode === 'gastos' ? CLASIFICADORES_GASTOS : CLASIFICADORES_INGRESOS;
-
   function toggleClassifier(id) {
     if (selectedClassifiers.includes(id)) {
       selectedClassifiers = selectedClassifiers.filter(c => c !== id);
     } else {
       selectedClassifiers = [...selectedClassifiers, id];
     }
-    // Mantener foco en el buscador
+    // Cambiar a modo clasificadores si no estaba
+    if (searchMode !== 'clasificadores') {
+      searchMode = 'clasificadores';
+    }
     setTimeout(() => searchInput?.focus(), 10);
   }
   function setMode(mode) {
     searchMode = mode;
+    if (mode === 'programas') {
       selectedClassifiers = [];
-    if (mode === 'gastos') {
-      searchSubmode = 'programas';
-    } else {
-      searchSubmode = 'clasificadores';
     }
   }
-  function setSubmode(sub) {
-    searchSubmode = sub;
-    selectedClassifiers = [];
-  }
-
   // Placeholder dinámico
-  $: placeholderText = getPlaceholderText(searchMode, searchSubmode, selectedClassifiers);
+  $: placeholderText = getPlaceholderText(searchMode, selectedClassifiers);
-  function getPlaceholderText(mode, submode, classifiers) {
+  function getPlaceholderText(mode, classifiers) {
-    if (mode === 'gastos') {
+    if (mode === 'programas') {
-      if (submode === 'programas') return 'Buscar gastos en programas y proyectos...';
+      return 'Buscar en programas y proyectos...';
-      if (classifiers.length === 0) return 'Selecciona al menos un clasificador...';
+    }
-      const nombres = classifiers.map(id => {
+    if (classifiers.length === 0) {
-        const clf = CLASIFICADORES_GASTOS.find(c => c.id === id);
+      return 'Selecciona al menos un clasificador...';
-        return clf?.label?.toLowerCase() || id;
+    }
-      }).join(', ');
-      return `Buscar gastos en ${nombres}...`;
-    } else {
-      if (classifiers.length === 0) return 'Selecciona al menos un clasificador...';
     const nombres = classifiers.map(id => {
-        const clf = CLASIFICADORES_INGRESOS.find(c => c.id === id);
+      const clf = CLASIFICADORES.find(c => c.id === id);
       return clf?.label?.toLowerCase() || id;
     }).join(', ');
-      return `Buscar ingresos en ${nombres}...`;
+    return `Buscar en ${nombres}...`;
-    }
   }
   // Debounce
@@ -191,21 +174,32 @@
     }
   }
-  // Ejemplos
+  // Ejemplos para cada card
   const EXAMPLES_PROGRAMAS = [
-    { label: 'Vía férrea Bulo Bulo',    color: 'rgba(232,146,124,0.22)', textColor: '#E8927C' },
+    { label: 'Planta siderúrgica del Mutún' },
-    { label: 'Siderúrgica del Mutún',   color: 'rgba(160,165,185,0.18)', textColor: '#B8BDCC' },
+    { label: 'Aeropuerto internacional de Potosí' },
   ];
-  const EXAMPLES_ENTIDADES = [
+  const EXAMPLES_CLASIFICADORES = [
-    { label: 'Fondo Indígena',   color: 'rgba(126,184,216,0.22)', textColor: '#8EC8E8' },
+    { label: 'YPFB', classifier: 'entidad' },
-    { label: 'YPFB',             color: 'rgba(168,196,160,0.22)', textColor: '#B8D4B0' },
+    { label: 'viáticos', classifier: 'objeto' },
+    { label: 'Ministerio de Salud', classifier: 'entidad' },
   ];
-  // Ejemplos dinámicos según selección
+  // Función para buscar desde pills
-  $: currentExamples = (selectedClassifiers.includes('entidad') && selectedClassifiers.length === 1)
+  function searchFromPill(label, classifier = null) {
-    ? EXAMPLES_ENTIDADES
+    if (classifier) {
-    : EXAMPLES_PROGRAMAS;
+      searchMode = 'clasificadores';
+      if (!selectedClassifiers.includes(classifier)) {
+        selectedClassifiers = [classifier];
+      }
+    } else {
+      searchMode = 'programas';
+    }
+    searchVal = label;
+    performSearch(label);
+    searchInput?.focus();
+  }
   // Datos para secciones
   const WIDGETS_INGRESOS = [
@@ -294,12 +288,6 @@
     return () => sectionObserver?.disconnect();
   });
-  function searchExample(label) {
-    searchVal = label;
-    performSearch(label);
-    searchInput?.focus();
-  }
-
   async function handleInput(e) {
     searchVal = e.target.value;
     clearTimeout(debounceTimer);
@@ -317,8 +305,7 @@
       return;
     }
-    const needsClassifiers = searchMode === 'ingresos' ||
+    const needsClassifiers = searchMode === 'clasificadores';
-                            (searchMode === 'gastos' && searchSubmode === 'clasificadores');
     if (needsClassifiers && selectedClassifiers.length === 0) {
       results = null;
       error = null;
@@ -342,12 +329,11 @@
     currentPage = page;
     try {
-      const isClassSearch = searchMode === 'ingresos' ||
+      const isClassSearch = searchMode === 'clasificadores';
-                           (searchMode === 'gastos' && searchSubmode === 'clasificadores');
       const params = new URLSearchParams({
         q: query,
         is_class: isClassSearch ? 'true' : 'false',
-        mode: searchMode,
+        mode: 'gastos',
         page: page.toString()
       });
       // Para clasificadores, pedir más resultados para tener conteos precisos
@@ -544,11 +530,10 @@
   $: {
     const _mode = searchMode;
-    const _submode = searchSubmode;
     const _classifiers = selectedClassifiers;
     if (searchVal.length >= 3 && mounted) {
       clearTimeout(debounceTimer);
-      const needsClassifiers = _mode === 'ingresos' || (_mode === 'gastos' && _submode === 'clasificadores');
+      const needsClassifiers = _mode === 'clasificadores';
       if (!needsClassifiers || _classifiers.length > 0) {
         debounceTimer = setTimeout(() => performSearch(searchVal), DEBOUNCE_MS);
       } else {
@@ -559,10 +544,6 @@
     }
   }
-  // ¿Mostrar chips de clasificadores?
-  $: showClassifierChips = searchMode === 'ingresos' ||
-                           (searchMode === 'gastos' && searchSubmode === 'clasificadores');
-
   // ¿Hay búsqueda activa?
   $: isSearching = searchVal.length >= 3;
 </script>
@@ -574,7 +555,7 @@
 <div class="page" class:mounted>
   <!-- Dots de navegación -->
-  <nav class="section-dots">
+  <nav class="section-dots" class:section-dots-hidden={currentSection === 'hero'}>
     {#each SECTIONS_NAV as s}
       <button
         class="section-dot"
@@ -590,7 +571,7 @@
   <!-- Hero -->
   <main data-section="hero">
-    <div class="nav-logo">
+    <div class="nav-logo" class:nav-hidden={currentSection !== 'hero'}>
       <img src="/logos_oscuro/05_Imago MEFP horizontal espacio negativo.png" alt="MEFP" />
     </div>
@@ -604,6 +585,9 @@
     <div class="search-container anim" style="--d:200ms">
+      <!-- Ambient glow -->
+      <div class="ambient-glow"></div>
+
       <!-- Título -->
       <h1 class="hero-title" class:hero-collapsed={allHits.length > 0}>
         Presupuesto <span class="gold">Abierto</span>
@@ -630,10 +614,11 @@
               on:focus={() => searchFocused = true}
               on:blur={() => searchFocused = false}
               placeholder=""
+              class:has-text={searchVal.length > 0}
             />
             {#if !searchVal}
               <div class="search-placeholder">
-                <span class="blink-cursor" class:cursor-hidden={searchFocused}></span>
+                <span class="blink-cursor"></span>
                 <span class="placeholder-text">{placeholderText}</span>
               </div>
             {/if}
@@ -650,114 +635,138 @@
           </div>
         </div>
-        <!-- ─── FILTROS INLINE ─── -->
+        <!-- ─── ÁREA DE RESULTADOS ─── -->
-        <div class="filters-row" class:filters-hidden={isSearching}>
+        <div class="results-area">
-          <!-- Nivel 1: Segmented control Gastos / Ingresos -->
+        <!-- ─── CARDS DE MODO (se tapan con resultados) ─── -->
-          <div class="filter-level filter-level-1">
+        <div class="section-group" class:section-group-hidden={allHits.length > 0}>
-            <div class="segmented-control">
+          <span class="section-label">Configura tu búsqueda</span>
-              <button
+          <div class="mode-cards">
-                class="segment"
-                class:segment-active={searchMode === 'gastos'}
-                on:click={() => setMode('gastos')}
-              >
-                Gastos
-              </button>
-              <button
-                class="segment"
-                class:segment-active={searchMode === 'ingresos'}
-                on:click={() => setMode('ingresos')}
-              >
-                Ingresos
-              </button>
-            </div>
-            <!-- Nivel 2: Segmented control Programas / Clasificadores (solo Gastos) -->
+            <!-- Card: Programas y Proyectos -->
-            {#if searchMode === 'gastos'}
+          <div
-              <div class="segmented-control segmented-control-secondary">
+            class="mode-card"
-                <button
+            class:mode-card-active={searchMode === 'programas'}
-                  class="segment segment-secondary"
+            on:click={() => setMode('programas')}
-                  class:segment-active={searchSubmode === 'programas'}
+            on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && setMode('programas')}
-                  on:click={() => setSubmode('programas')}
+            role="button"
+            tabindex="0"
           >
-                  Programas y proyectos
+            <div class="mode-card-header">
-                </button>
+              <span class="mode-card-icon">
-                <button
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-                  class="segment segment-secondary"
+                  <rect x="3" y="3" width="7" height="7" rx="1"/>
-                  class:segment-active={searchSubmode === 'clasificadores'}
+                  <rect x="14" y="3" width="7" height="7" rx="1"/>
-                  on:click={() => setSubmode('clasificadores')}
+                  <rect x="3" y="14" width="7" height="7" rx="1"/>
+                  <rect x="14" y="14" width="7" height="7" rx="1"/>
+                </svg>
+              </span>
+              <span class="mode-card-title">Programas y Proyectos</span>
+            </div>
+            <p class="mode-card-desc">
+              <strong>735k+</strong> proyectos y programas (2016-2025). Para encontrar iniciativas específicas.
+            </p>
+            <div class="mode-card-pills">
+              <span class="pills-hint"><span class="hint-desktop">Ej:</span><span class="hint-mobile">Ej:</span></span>
+              {#each EXAMPLES_PROGRAMAS as ex}
+                <span
+                  class="mode-pill"
+                  on:click|stopPropagation={() => searchFromPill(ex.label)}
+                  on:keydown={(e) => e.key === 'Enter' && searchFromPill(ex.label)}
+                  role="button"
+                  tabindex="0"
                 >
-                  Clasificadores
+                  {ex.label}
-                </button>
+                </span>
+              {/each}
+            </div>
+            <div class="mode-card-radio">
+              <span class="radio-dot" class:radio-dot-active={searchMode === 'programas'}></span>
             </div>
-            {/if}
           </div>
-          <!-- Nivel 3: Clasificadores con checkboxes (cuando aplica) -->
+          <!-- Card: Clasificadores -->
-          {#if showClassifierChips}
+          <div
-            <div class="filter-level filter-level-2">
+            class="mode-card"
-              <span class="filter-level-label">Selecciona clasificadores:</span>
+            class:mode-card-active={searchMode === 'clasificadores'}
-              <div class="checkbox-group">
+            on:click={() => setMode('clasificadores')}
-                {#each activeClasificadores as clf}
+            on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && setMode('clasificadores')}
+            role="button"
+            tabindex="0"
+          >
+            <div class="mode-card-header">
+              <span class="mode-card-icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M4 4h6l2 2h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"/>
+                  <path d="M9 13h6"/>
+                  <path d="M9 17h4"/>
+                </svg>
+              </span>
+              <span class="mode-card-title">Clasificadores</span>
+            </div>
+            <p class="mode-card-desc">
+              <strong>2500+</strong> categorías de gasto e ingreso (2006-2025). Para comparar y analizar tendencias.
+            </p>
+            <div class="mode-card-classifiers">
+              {#each CLASIFICADORES as clf}
                 <button
-                    class="checkbox-chip"
+                  class="clf-chip"
-                    class:checkbox-chip-active={selectedClassifiers.includes(clf.id)}
+                  class:clf-chip-active={selectedClassifiers.includes(clf.id)}
-                    class:checkbox-chip-disabled={clf.disabled}
+                  class:clf-chip-disabled={clf.disabled}
-                    on:click={() => { if (!clf.disabled) toggleClassifier(clf.id); }}
+                  on:click|stopPropagation={() => { if (!clf.disabled) toggleClassifier(clf.id); }}
                   disabled={clf.disabled}
                 >
-                    <span class="checkbox-box">
+                  <span class="clf-check">
                     {#if selectedClassifiers.includes(clf.id)}
-                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                         <polyline points="20 6 9 17 4 12"/>
                       </svg>
                     {/if}
                   </span>
-                    <span class="checkbox-label">{clf.label}</span>
+                  <span class="clf-label">{clf.label}</span>
                 </button>
               {/each}
             </div>
-            </div>
+            <div class="mode-card-pills">
-          {/if}
+              {#each EXAMPLES_CLASIFICADORES as ex}
-        </div>
+                <span
-
+                  class="mode-pill"
-        <!-- ─── ÁREA DE RESULTADOS / EJEMPLOS / HINT ─── -->
+                  on:click|stopPropagation={() => searchFromPill(ex.label, ex.classifier)}
-        <div class="results-area">
+                  on:keydown={(e) => e.key === 'Enter' && searchFromPill(ex.label, ex.classifier)}
-
+                  role="button"
-          <!-- Ejemplos -->
+                  tabindex="0"
-          <div class="examples" class:examples-hidden={isSearching}>
-            <span class="examples-label">Ej.:</span>
-            {#each currentExamples as ex}
-              <button
-                class="example-chip"
-                style="background:{ex.color}; color:{ex.textColor}"
-                on:click={() => searchExample(ex.label)}
                 >
                   {ex.label}
-              </button>
+                </span>
               {/each}
             </div>
+            <div class="mode-card-radio">
+              <span class="radio-dot" class:radio-dot-active={searchMode === 'clasificadores'}></span>
+            </div>
+          </div>
+          </div>
-          <!-- Hint diario -->
+          <!-- Sección: Ir a -->
-          {#if !isSearching && !dailyLoading}
+          <span class="section-label section-label-goto">Ir a</span>
-            <a
+          <a href="/vista-diaria" class="daily-card">
-              href="/vista-diaria"
+            <div class="daily-card-left">
-              class="daily-hint"
-              class:daily-hint-visible={!isSearching}
-            >
               <span class="daily-dot"></span>
-              <span class="daily-text">
+              <span class="daily-card-title">Vista diaria</span>
-                {#if dailyData}
+            </div>
-                  Ayer el Estado ejecutó <strong>{formatMonto(dailyData.monto)}</strong>
+            <div class="daily-card-content">
+              {#if !dailyLoading && dailyData}
+                <span class="daily-card-text">Ayer el Estado ejecutó <strong>{formatMonto(dailyData.monto)}</strong></span>
+              {:else if !dailyLoading}
+                <span class="daily-card-text">Ver el resumen de ejecución de ayer</span>
               {:else}
-                  Ver el resumen de ejecución de ayer
+                <span class="daily-card-text">Cargando datos...</span>
               {/if}
-              </span>
+            </div>
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg class="daily-card-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M5 12h14M12 5l7 7-7 7"/>
             </svg>
           </a>
-          {/if}
+        </div>
           <!-- Estados de búsqueda (mensajes) -->
           {#if showMinLengthHint && searchVal.length > 0 && searchVal.length < 3}
@@ -1341,7 +1350,8 @@
   .page{--serif:'Qanelas',system-ui,sans-serif;--sans:'Qanelas',system-ui,sans-serif;--mono:'JetBrains Mono',monospace;font-family:var(--serif);color:#1C1C1A;width:100%;min-width:100%;overflow-x:hidden;scroll-snap-type:y mandatory;overflow-y:scroll;height:100vh}
   /* Section Navigation Dots */
-  .section-dots{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);padding:12px 8px;border-radius:20px}
+  .section-dots{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);padding:12px 8px;border-radius:20px;transition:opacity 0.4s ease,transform 0.4s ease}
+  .section-dots-hidden{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(20px)}
   .section-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(100,100,100,0.4);background:rgba(150,150,150,0.2);cursor:pointer;transition:all 0.3s;padding:0;position:relative}
   .section-dot:hover{border-color:rgba(100,100,100,0.6);background:rgba(150,150,150,0.4);transform:scale(1.2)}
   .section-dot-active{background:#C9A751;border-color:#C9A751}
@@ -1411,7 +1421,8 @@
   .search-divider{width:1px;height:32px;background:rgba(255,255,255,0.08);margin:0 16px;flex-shrink:0}
   .search-icon{flex-shrink:0;transition:stroke 0.3s;margin-left:4px}
   .search-input-wrap{flex:1;position:relative;display:flex;align-items:center}
-  .search-input-wrap input{width:100%;background:transparent;border:none;outline:none;color:#FFFFFF;font-size:22px;font-weight:500;font-family:var(--sans);padding:14px 12px 14px 10px;caret-color:#F0C14D;letter-spacing:-0.01em}
+  .search-input-wrap input{width:100%;background:transparent;border:none;outline:none;color:#FFFFFF;font-size:22px;font-weight:500;font-family:var(--sans);padding:14px 12px 14px 10px;caret-color:transparent;letter-spacing:-0.01em}
+  .search-input-wrap input.has-text{caret-color:#FFFFFF}
   .search-placeholder{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none}
   .blink-cursor{width:2px;height:20px;margin-right:2px;animation:blink 1s step-end infinite;border-radius:1px;flex-shrink:0;background:#F0C14D}
   .cursor-hidden{opacity:0}
@@ -1495,61 +1506,77 @@
   .scroll-icon-touch{display:none}
   /* ── NEW SEARCH STYLES ── */
-  .search-container{width:100%;max-width:900px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;align-items:center;flex:1;justify-content:center}
+  .search-container{width:100%;max-width:900px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;align-items:center;flex:1;justify-content:center;position:relative}
-  .hero-title{font-size:clamp(44px,5.5vw,72px);font-weight:900;line-height:1.02;letter-spacing:-0.035em;color:#F5F0E8;text-align:center;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);margin-bottom:4px}
+
-  .hero-sub{font-family:var(--sans);font-size:clamp(16px,1.6vw,18px);color:#D0CCC4;text-align:center;line-height:1.6;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);margin-bottom:32px;margin-top:0}
+  /* Ambient glow - subtle premium lighting */
+  .ambient-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:140%;max-width:1200px;aspect-ratio:1.5;background:radial-gradient(ellipse at center,rgba(240,193,77,0.06) 0%,rgba(240,193,77,0.02) 35%,transparent 70%);pointer-events:none;z-index:0}
+
+  .hero-title{font-family:var(--sans);font-size:clamp(44px,5.5vw,72px);font-weight:900;line-height:1.02;letter-spacing:-0.035em;color:#F5F0E8;text-align:center;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);margin-bottom:4px;position:relative;z-index:1}
+  .hero-sub{font-family:var(--sans);font-size:clamp(16px,1.6vw,18px);color:#D0CCC4;text-align:center;line-height:1.6;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);margin-bottom:32px;margin-top:0;position:relative;z-index:1}
   .hero-collapsed{opacity:0;height:0;margin:0;overflow:hidden;pointer-events:none}
   .cursor-hidden{opacity:0}
-  /* Filters */
+  /* Section Group */
-  .filters-row{display:flex;flex-direction:column;gap:16px;margin-top:20px;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
+  .section-group{margin-top:16px;transition:all 0.4s cubic-bezier(0.16,1,0.3,1)}
-  .filters-hidden{opacity:0;height:0;margin:0;overflow:hidden;pointer-events:none}
+  .section-group-hidden{opacity:0;pointer-events:none;position:absolute;z-index:-1}
-  .filter-level{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
+  .section-label{display:block;font-family:var(--sans);font-size:10px;font-weight:500;color:#6B6860;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;padding-left:4px}
-  .filter-level-1{justify-content:center}
+  .section-label-goto{margin-top:12px}
-  .filter-level-2{flex-direction:column;gap:8px}
+
-  .filter-level-label{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:#9B9890}
+  /* Mode Cards */
-
+  .mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
-  /* Segmented Control */
+
-  .segmented-control{display:inline-flex;background:rgba(255,255,255,0.06);border-radius:10px;padding:4px;gap:2px}
+  .mode-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:16px 18px;text-align:left;cursor:pointer;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);position:relative;display:flex;flex-direction:column;gap:8px}
-  .segmented-control-secondary{background:rgba(255,255,255,0.04)}
+  .mode-card:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);transform:translateY(-2px)}
-  .segment{font-family:var(--sans);font-size:14px;font-weight:500;color:#8B8880;padding:10px 20px;border:none;background:transparent;border-radius:8px;cursor:pointer;transition:all 0.2s}
+  .mode-card-active{background:rgba(240,193,77,0.06);border-color:rgba(240,193,77,0.25);box-shadow:0 8px 32px rgba(0,0,0,0.2),0 0 0 1px rgba(240,193,77,0.1)}
-  .segment:hover{color:#B8B5AD}
+  .mode-card-active:hover{background:rgba(240,193,77,0.08);border-color:rgba(240,193,77,0.35)}
-  .segment-active{background:rgba(255,255,255,0.12);color:#F5F0E8}
+
-  .segment-secondary{font-size:13px;padding:8px 16px}
+  .mode-card-header{display:flex;align-items:center;gap:10px}
-
+  .mode-card-icon{display:flex;align-items:center;justify-content:center;color:#9B9890;transition:color 0.3s}
-  /* Checkbox Chips */
+  .mode-card:hover .mode-card-icon{color:#D0CCC4}
-  .checkbox-group{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
+  .mode-card-active .mode-card-icon{color:#F0C14D}
-  .checkbox-chip{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:20px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);cursor:pointer;transition:all 0.2s;font-family:var(--sans);font-size:13px;color:#8B8880}
+  .mode-card-title{font-family:var(--sans);font-size:16px;font-weight:600;color:#F5F0E8;letter-spacing:-0.01em}
-  .checkbox-chip:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.12)}
+
-  .checkbox-chip-active{background:rgba(74,139,110,0.15);border-color:rgba(74,139,110,0.4);color:#5AAF8A}
+  .mode-card-desc{font-family:var(--sans);font-size:13px;color:#9B9890;line-height:1.5;margin:0}
-  .checkbox-chip-disabled{opacity:0.4;cursor:not-allowed}
+  .mode-card-desc strong{color:#D0CCC4;font-weight:600}
-  .checkbox-chip-disabled:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.08)}
+
-  .checkbox-box{width:16px;height:16px;border-radius:4px;border:1.5px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0}
+  .mode-card-classifiers{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
-  .checkbox-chip-active .checkbox-box{background:#4A8B6E;border-color:#4A8B6E}
+
-  .checkbox-label{line-height:1}
+  .clf-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);cursor:pointer;transition:all 0.2s;font-family:var(--sans);font-size:12px;color:#8B8880}
-  .chip-soon{font-family:var(--mono);font-size:9px;letter-spacing:0.05em;color:#6B6860;background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:4px;margin-left:4px}
+  .clf-chip:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15)}
+  .clf-chip-active{background:rgba(90,175,138,0.15);border-color:rgba(90,175,138,0.4);color:#5AAF8A}
+  .clf-chip-disabled{opacity:0.35;cursor:not-allowed}
+  .clf-chip-disabled:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.08)}
+  .clf-check{width:14px;height:14px;border-radius:4px;border:1.5px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0}
+  .clf-chip-active .clf-check{background:#4A8B6E;border-color:#4A8B6E}
+  .clf-label{line-height:1}
+
+  .mode-card-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;align-items:center}
+  .pills-hint{font-family:var(--sans);font-size:10px;color:#7B7870;font-weight:500}
+  .hint-desktop{display:inline}
+  .hint-mobile{display:none}
+  .mode-pill{font-family:var(--sans);font-size:11px;font-weight:500;padding:5px 10px;border-radius:8px;cursor:pointer;transition:all 0.2s;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);color:#D0CCC4}
+  .mode-pill:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.25);color:#F5F0E8}
+
+  .mode-card-radio{position:absolute;top:16px;right:16px}
+  .radio-dot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,0.2);display:block;transition:all 0.2s;position:relative}
+  .radio-dot::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#F0C14D;opacity:0;transition:all 0.2s}
+  .radio-dot-active{border-color:#F0C14D}
+  .radio-dot-active::after{opacity:1}
   /* Results Area */
-  .results-area{width:100%;margin-top:24px;position:relative;min-height:60px;text-align:center}
+  .results-area{width:100%;position:relative;min-height:60px;text-align:center}
-  .area-spacer{height:100px;transition:height 0.3s}
+
-  .area-spacer-hidden{height:0}
+  /* Daily Card */
-
+  .daily-card{display:flex;align-items:center;gap:12px;padding:14px 18px;background:rgba(232,168,76,0.04);border:1px solid rgba(232,168,76,0.15);border-radius:12px;text-decoration:none;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
-  /* Examples */
+  .daily-card:hover{background:rgba(232,168,76,0.08);border-color:rgba(232,168,76,0.3);transform:translateY(-2px)}
-  .examples{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;transition:all 0.3s}
+  .daily-card-left{display:flex;align-items:center;gap:10px;flex-shrink:0}
-  .examples-hidden{opacity:0;height:0;overflow:hidden;pointer-events:none}
+  .daily-dot{width:8px;height:8px;border-radius:50%;background:#E8A84C;animation:pulse 2s ease-in-out infinite;flex-shrink:0;box-shadow:0 0 10px rgba(232,168,76,0.5)}
-  .examples-label{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:#9B9890}
+  .daily-card-title{font-family:var(--sans);font-size:15px;font-weight:600;color:#E8A84C;letter-spacing:-0.01em}
-  .example-chip{font-family:var(--sans);font-size:13px;font-weight:500;padding:8px 14px;border-radius:20px;border:1px solid rgba(255,255,255,0.1);cursor:pointer;transition:all 0.2s}
+  .daily-card-content{flex:1;text-align:left}
-  .example-chip:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
+  .daily-card-text{font-family:var(--sans);font-size:13px;color:#9B9890}
-
+  .daily-card-text strong{color:#D4A84C;font-weight:600}
-  /* Daily Hint */
+  .daily-card-arrow{color:#E8A84C;opacity:0.5;transition:all 0.2s;flex-shrink:0}
-  .daily-hint{display:inline-flex;align-items:center;gap:8px;margin-top:28px;padding:8px 14px;background:transparent;border:1px solid rgba(74,139,110,0.25);border-radius:20px;transition:all 0.3s;opacity:0;transform:translateY(10px);text-decoration:none;font-size:13px}
+  .daily-card:hover .daily-card-arrow{opacity:1;transform:translateX(4px)}
-  .daily-hint-visible{opacity:1;transform:translateY(0)}
-  .daily-hint:hover{background:rgba(74,139,110,0.08);border-color:rgba(74,139,110,0.4)}
-  .daily-dot{width:6px;height:6px;border-radius:50%;background:#E8A84C;animation:pulse 2s ease-in-out infinite;flex-shrink:0;box-shadow:0 0 8px rgba(232,168,76,0.4)}
-  .daily-text{font-family:var(--sans);font-size:12px;color:#9B9890}
-  .daily-text strong{color:#4A8B6E}
-  .daily-hint svg{color:#4A8B6E;opacity:0.6;transition:all 0.2s}
-  .daily-hint:hover svg{opacity:1;transform:translateX(3px)}
   /* Results Messages */
   .results-message{text-align:center;padding:20px}
@@ -1559,7 +1586,7 @@
   /* Results Content */
   .results-content{max-height:0;overflow:hidden;opacity:0;transition:all 0.4s cubic-bezier(0.16,1,0.3,1)}
-  .results-content-visible{max-height:60vh;overflow-y:auto;opacity:1;background:transparent;border-radius:0;border:none;padding:14px 10px;text-align:left}
+  .results-content-visible{max-height:60vh;overflow-y:auto;opacity:1;background:#1C1C1A;border-radius:16px;border:none;padding:14px 10px;text-align:left;position:relative;z-index:10}
   /* Results Summary */
   .results-summary{background:transparent;border-radius:0;padding:0 0 12px 0;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.08)}
@@ -1620,9 +1647,10 @@
   .search-loading{display:flex;align-items:center;justify-content:center}
   /* Nav elements in hero */
-  main[data-section="hero"] .nav-logo{position:absolute;top:24px;left:24px}
+  main[data-section="hero"] .nav-logo{position:fixed;top:24px;left:24px;z-index:100;transition:opacity 0.4s ease,transform 0.4s ease}
-  .nav-menu-btn{position:absolute;top:24px;right:24px;background:rgba(255,255,255,0.06);border:none;border-radius:10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#B8B5AD;transition:all 0.2s}
+  .nav-menu-btn{position:fixed;top:24px;right:24px;z-index:100;background:rgba(255,255,255,0.06);border:none;border-radius:10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#B8B5AD;transition:all 0.3s ease}
   .nav-menu-btn:hover{background:rgba(255,255,255,0.1);color:#F5F0E8}
+  .nav-hidden{opacity:0;pointer-events:none;transform:translateY(-10px)}
   /* ── DIRECTORY ── */
   .directory{background:#f5f5f7;min-height:100vh;display:flex;align-items:center;scroll-snap-align:start;scroll-snap-stop:always;padding:48px}
@@ -1805,6 +1833,7 @@
     /* Section dots - bottom horizontal bar */
     .section-dots{position:fixed;right:auto;left:50%;top:auto;bottom:20px;transform:translateX(-50%);flex-direction:row;gap:10px;padding:12px 20px;border-radius:24px;background:rgba(28,28,26,0.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);z-index:1000}
+    .section-dots-hidden{transform:translateX(-50%) translateY(30px)}
     .section-dot{width:8px;height:8px}
     .section-dot-label{display:none}
@@ -1850,20 +1879,28 @@
     .search-container{padding:0 16px;justify-content:flex-start;padding-top:100px}
     .hero-title{font-size:clamp(38px,9vw,52px);margin-bottom:4px}
     .hero-sub{font-size:14px;margin-bottom:20px}
-    .filters-row{gap:12px;margin-top:16px}
+    .section-group{margin-top:16px}
-    .filter-level{flex-direction:column;gap:8px}
+    .section-label{font-size:10px;margin-bottom:10px}
-    .segmented-control{width:auto;justify-content:center}
+    .section-label-goto{margin-top:16px}
-    .segment{text-align:center;padding:10px 16px;font-size:13px}
+    .mode-cards{grid-template-columns:1fr;gap:12px}
-    .checkbox-group{justify-content:flex-start}
+    .mode-card{padding:18px;gap:10px;border-radius:16px}
-    .checkbox-chip{font-size:12px;padding:6px 12px}
+    .mode-card-title{font-size:15px}
-    .examples{flex-direction:row;gap:8px;margin-top:16px}
+    .mode-card-desc{font-size:12px}
-    .examples-label{display:inline;font-size:10px}
+    .clf-chip{padding:5px 10px;font-size:11px}
-    .example-chip{font-size:12px;padding:6px 12px}
+    .clf-check{width:12px;height:12px}
+    .mode-pill{font-size:12px;padding:7px 12px}
+    .hint-desktop{display:none}
+    .hint-mobile{display:inline}
+    .pills-hint{font-size:11px}
+    .pills-list{gap:5px}
+    .mode-card-radio{top:14px;right:14px}
+    .radio-dot{width:16px;height:16px}
     .results-area{margin-top:4px;min-height:40px}
     .results-content-visible{padding:2px 4px}
     .search-wrap-with-results{padding:2px}
-    .daily-hint{padding:10px 14px;gap:8px}
+    .daily-card{padding:16px 18px;gap:12px;border-radius:14px}
-    .daily-text{font-size:13px}
+    .daily-card-title{font-size:14px}
+    .daily-card-text{font-size:12px}
     .results-summary{padding:4px 0}
     .summary-row{flex-direction:row;gap:6px;flex-wrap:nowrap}
     .summary-stats{gap:2px;flex:1}
@@ -1975,23 +2012,30 @@
     .placeholder-text{font-size:12px}
     .hero-title{font-size:clamp(34px,10vw,44px)}
     .hero-sub{font-size:13px;margin-bottom:16px}
-    .examples-label{font-size:9px}
+    main[data-section="hero"] .nav-logo{top:16px;left:16px;height:56px}
-    main[data-section="hero"] .nav-logo{top:16px;left:16px;height:60px}
+    .nav-menu-btn{top:16px;right:16px;width:38px;height:38px}
-    .nav-menu-btn{top:16px;right:16px;width:40px;height:40px}
+    .mode-cards{gap:10px;margin-top:12px}
-    .segmented-control{padding:3px}
+    .mode-card{padding:14px;gap:8px;border-radius:14px}
-    .segment{padding:8px 10px;font-size:12px}
+    .mode-card-icon svg{width:18px;height:18px}
-    .segment-secondary{font-size:11px;padding:6px 8px}
+    .mode-card-title{font-size:14px}
-    .filter-level-label{font-size:10px}
+    .mode-card-desc{font-size:11px}
-    .checkbox-chip{font-size:11px;padding:5px 10px;gap:6px}
+    .mode-card-classifiers{gap:4px}
-    .checkbox-box{width:14px;height:14px}
+    .clf-chip{padding:4px 8px;font-size:10px;gap:4px}
-    .examples{margin-top:14px}
+    .clf-check{width:10px;height:10px}
-    .example-chip{font-size:11px;padding:5px 10px}
+    .mode-pill{font-size:11px;padding:6px 10px;border-radius:8px}
+    .mode-card-radio{top:12px;right:12px}
+    .radio-dot{width:14px;height:14px}
+    .radio-dot::after{width:6px;height:6px}
     .results-area{margin-top:2px;min-height:28px}
     .results-content-visible{padding:0 2px}
     .search-wrap-with-results{padding:2px}
-    .daily-hint{padding:8px 12px;border-radius:10px}
+    .section-group{margin-top:12px}
+    .section-label{font-size:9px;margin-bottom:8px}
+    .section-label-goto{margin-top:12px}
+    .daily-card{padding:14px 16px;gap:10px;border-radius:12px}
     .daily-dot{width:6px;height:6px}
-    .daily-text{font-size:12px}
+    .daily-card-title{font-size:13px}
+    .daily-card-text{font-size:11px}
     .results-summary{padding:2px 0}
     .summary-count{font-size:11px}
     .summary-tag-gold{font-size:13px}