<script>
  import { onMount } from 'svelte';

  // Estado base
  let mounted = false;
  let searchFocused = false;
  let searchVal = '';
  let searchInput;
  let isLoading = false;
  let results = null;
  let error = null;

  // Ordenamiento
  let sortBy = 'amount';
  let sortOrder = 'desc';

  // Paginación
  let currentPage = 1;
  let isLoadingMore = false;
  let allHits = [];

  // Navegación por teclado
  let selectedResultIndex = -1;

  // Tracking para evitar re-animaciones
  let seenHitIds = new Set();
  let lastSearchKey = '';

  function getHitKey(hit, index) {
    const doc = hit.document;
    const m = parseMetadatos(doc.metadatos);

    // Key basado en contenido + índice como tiebreaker para evitar duplicados
    if (doc.is_class === true || doc.is_class === 'true') {
      return `c-${m.entidad || 'x'}-${doc.devengado || 0}-${index}`;
    }
    return `p-${m.entidad || 0}-${m.programa || 0}-${m.proyecto || 0}-${doc.gestion || 0}-${index}`;
  }

  function isNewHit(hit) {
    const key = getHitKey(hit);
    if (seenHitIds.has(key)) return false;
    seenHitIds.add(key);
    return true;
  }

  function resetSeenHits() {
    seenHitIds = new Set();
  }

  function toggleSort(field) {
    if (sortBy === field) {
      sortOrder = sortOrder === 'desc' ? 'asc' : 'desc';
    } else {
      sortBy = field;
      sortOrder = 'desc';
    }
  }

  $: sortedHits = allHits.length > 0 ? [...allHits].sort((a, b) => {
    let valA = sortBy === 'year' ? (a.document.gestion || 0) : (a.document.devengado || 0);
    let valB = sortBy === 'year' ? (b.document.gestion || 0) : (b.document.devengado || 0);
    return sortOrder === 'desc' ? valB - valA : valA - valB;
  }) : [];

  // ¿Es búsqueda de entidades?
  $: isEntidadSearchActive = results?.hits?.[0]?.document?.class_ === 'entidad';

  // Agrupar por subarea cuando es búsqueda de entidades
  $: groupedHits = (() => {
    if (!isEntidadSearchActive || allHits.length === 0) return null;

    const groups = {};
    allHits.forEach(hit => {
      const m = parseMetadatos(hit.document.metadatos);
      const subarea = extractAfterHyphen(m.entidad_desc_subarea) || 'Otros';
      if (!groups[subarea]) {
        groups[subarea] = { name: subarea, hits: [], totalMonto: 0 };
      }
      groups[subarea].hits.push(hit);
      groups[subarea].totalMonto += hit.document.devengado || 0;
    });

    // Ordenar items dentro de cada grupo
    Object.values(groups).forEach(group => {
      group.hits.sort((a, b) => {
        const valA = sortBy === 'year' ? (a.document.gestion || 0) : (a.document.devengado || 0);
        const valB = sortBy === 'year' ? (b.document.gestion || 0) : (b.document.devengado || 0);
        return sortOrder === 'desc' ? valB - valA : valA - valB;
      });
    });

    // Convertir a array y ordenar grupos por monto total
    return Object.values(groups).sort((a, b) => b.totalMonto - a.totalMonto);
  })();

  $: hasMoreResults = results && allHits.length < results.found;

  // Modo de búsqueda
  // Modo de búsqueda simplificado: 'programas' | 'clasificadores'
  let searchMode = 'programas';
  let selectedClassifiers = [];

  // Clasificadores unificados (transversales)
  const CLASIFICADORES = [
    { id: 'entidad',    label: 'Entidades',           icon: '🏛️' },
    { id: 'objeto',     label: 'Objetos de gasto',    icon: '📦' },
    { id: 'finfun',     label: 'Finalidad y función', icon: '🎯' },
    { 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 },
  ];

  function toggleClassifier(id) {
    if (selectedClassifiers.includes(id)) {
      selectedClassifiers = selectedClassifiers.filter(c => c !== id);
    } else {
      selectedClassifiers = [...selectedClassifiers, id];
    }
    // 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 = [];
    }
  }

  // Placeholder dinámico
  $: placeholderText = getPlaceholderText(searchMode, selectedClassifiers);

  function getPlaceholderText(mode, classifiers) {
    if (mode === 'programas') {
      return 'Buscar en programas y proyectos...';
    }
    if (classifiers.length === 0) {
      return 'Selecciona al menos un clasificador...';
    }
    const nombres = classifiers.map(id => {
      const clf = CLASIFICADORES.find(c => c.id === id);
      return clf?.label?.toLowerCase() || id;
    }).join(', ');
    return `Buscar en ${nombres}...`;
  }

  // Debounce
  let debounceTimer;
  let hintTimer;
  let showMinLengthHint = false;
  const DEBOUNCE_MS = 300;
  const HINT_DELAY_MS = 1500;

  const POBLACION = 12000000;
  const API_BASE = '/api/search';

  // Hint diario
  let dailyData = null;
  let dailyLoading = true;

  async function fetchDaily() {
    try {
      const res = await fetch('/api/daily-summary');
      if (res.ok) dailyData = await res.json();
    } catch {
      // silencioso — es un hint, no crítico
    } finally {
      dailyLoading = false;
    }
  }

  // Ejemplos para cada card
  const EXAMPLES_PROGRAMAS = [
    { label: 'Planta siderúrgica del Mutún' },
    { label: 'Aeropuerto internacional de Potosí' },
  ];

  const EXAMPLES_CLASIFICADORES = [
    { label: 'YPFB', classifier: 'entidad' },
    { label: 'viáticos', classifier: 'objeto' },
    { label: 'Ministerio de Salud', classifier: 'entidad' },
  ];

  // Función para buscar desde pills
  function searchFromPill(label, classifier = null) {
    if (classifier) {
      searchMode = 'clasificadores';
      if (!selectedClassifiers.includes(classifier)) {
        selectedClassifiers = [classifier];
      }
    } else {
      searchMode = 'programas';
    }
    searchVal = label;
    performSearch(label);
    searchInput?.focus();
  }

  // Datos para secciones
  const WIDGETS_INGRESOS = [
    { id: 'rubros', label: 'tipos de ingreso', d: 'Impuestos, regalías, ventas, créditos', t: 'Recursos por rubros', n: '324', href: '/clasificadores/rubros' },
    { id: 'fuentes', label: 'fuentes de financiamiento', d: 'TGN, crédito externo, donaciones', t: 'Fuentes', n: '22', href: '/clasificadores/fuentes' },
    { id: 'organismos', label: 'organismos financiadores', d: 'BID, Banco Mundial, cooperación', t: 'Organismos', n: '228', href: '/clasificadores/organismos' },
  ];

  const WIDGETS_GASTOS_QUE = [
    { id: 'objeto', label: 'objetos de gasto', d: 'Sueldos, consultorías, materiales', t: 'Objeto del gasto', n: '324', href: '/clasificadores/objeto-gasto' },
    { id: 'sector', label: 'sectores económicos', d: 'Industria, construcción, servicios', t: 'Sectores', n: '488', href: '/clasificadores/sectores' },
  ];

  const HISTORIAS = [
    { color: '#C9A751', title: '¿Cuánto gasta Bolivia en consultorías cada año?', desc: 'Un análisis de 20 años revela patrones que todo ciudadano debería conocer.', tag: 'INVESTIGACIÓN', tall: true },
    { color: '#C44B3F', title: 'Salud vs. Defensa: 20 años', desc: 'Cómo se redistribuyó el presupuesto entre sectores.', tag: 'COMPARATIVA', tall: false },
    { color: '#4A8B6E', title: 'El boom del gasto en infraestructura', desc: 'De 2006 a 2014 Bolivia multiplicó por 8 su inversión pública.', tag: 'CRÓNICA', tall: true },
    { color: '#6B8CA6', title: '¿Quién financia a Bolivia?', desc: 'Un mapa de los organismos internacionales que prestan al país.', tag: 'ANÁLISIS', tall: false },
  ];

  const VISUALIZACIONES = [
    { color: '#4A8B6E', title: 'Evolución del gasto en salud', desc: 'Cómo cambiaron las prioridades.', type: 'Serie temporal', href: null },
    { color: '#C9A751', title: '¿En qué se gasta?', desc: 'Explora el presupuesto por objeto de gasto.', type: 'Treemap', href: '/clasificadores/objeto-gasto' },
    { color: '#8B6E9B', title: 'Mapa de inversión', desc: 'Distribución geográfica de la inversión pública.', type: 'Mapa', href: null },
  ];

  // Hover states para secciones
  let hDiario = false;
  let hArchivo = false;
  let hWidget = null;
  let hHist = null;
  let hVis = null;

  // Reveal animation
  let revealStates = {};
  function reveal(node, { id, delay = 0 }) {
    revealStates[id] = false;
    revealStates = revealStates;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        setTimeout(() => { revealStates[id] = true; revealStates = revealStates; }, delay);
        obs.disconnect();
      }
    }, { threshold: 0.08 });
    obs.observe(node);
    return { destroy() { obs.disconnect(); } };
  }

  // Navegación interna - scroll a secciones
  const SECTIONS_NAV = [
    { id: 'hero', label: 'Inicio' },
    { id: 'datos', label: 'Datos' },
    { id: 'clasificadores', label: 'Clasificadores' },
    { id: 'historias', label: 'Historias' },
    { id: 'visualizaciones', label: 'Visualizaciones' },
    { id: 'manifiesto', label: 'Manifiesto' },
    { id: 'descargas', label: 'Descargas' },
  ];
  let currentSection = 'hero';

  function scrollToSection(id) {
    const el = document.querySelector(`[data-section="${id}"]`);
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  }

  // Observer para actualizar sección activa
  let sectionObserver;
  onMount(() => {
    setTimeout(() => { mounted = true; }, 80);
    fetchDaily();

    const isMobile = window.innerWidth < 768;
    if (!isMobile) setTimeout(() => searchInput?.focus(), 300);

    // IntersectionObserver para secciones
    const sections = document.querySelectorAll('[data-section]');
    sectionObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          currentSection = entry.target.dataset.section;
        }
      });
    }, { threshold: 0.3 });
    sections.forEach(section => sectionObserver.observe(section));

    return () => sectionObserver?.disconnect();
  });

  async function handleInput(e) {
    searchVal = e.target.value;
    clearTimeout(debounceTimer);
    clearTimeout(hintTimer);
    showMinLengthHint = false;

    if (searchVal.length < 3) {
      results = null;
      allHits = [];
      error = null;
      selectedResultIndex = -1;
      if (searchVal.length > 0) {
        hintTimer = setTimeout(() => { showMinLengthHint = true; }, HINT_DELAY_MS);
      }
      return;
    }

    const needsClassifiers = searchMode === 'clasificadores';
    if (needsClassifiers && selectedClassifiers.length === 0) {
      results = null;
      error = null;
      return;
    }

    debounceTimer = setTimeout(() => performSearch(searchVal), DEBOUNCE_MS);
  }

  async function performSearch(query, page = 1) {
    // NO borrar allHits inmediatamente - mantener resultados anteriores visibles
    if (page === 1) {
      isLoading = true;
      // Solo resetear sort en nueva búsqueda
      sortBy = 'amount';
      sortOrder = 'desc';
    } else {
      isLoadingMore = true;
    }
    error = null;
    currentPage = page;

    try {
      const isClassSearch = searchMode === 'clasificadores';
      const params = new URLSearchParams({
        q: query,
        is_class: isClassSearch ? 'true' : 'false',
        mode: 'gastos',
        page: page.toString()
      });
      // Para clasificadores, pedir más resultados para tener conteos precisos
      if (isClassSearch) {
        params.set('per_page', '250');
      }
      if (isClassSearch && selectedClassifiers.length > 0) {
        params.set('class_', selectedClassifiers.join(','));
      }

      console.log('[Search]', `${API_BASE}?${params}`);
      const res = await fetch(`${API_BASE}?${params}`);
      if (!res.ok) throw new Error(`Error ${res.status}`);
      const data = await res.json();

      // Actualizar resultados DESPUÉS de recibir datos (no antes)
      results = data;
      if (page === 1) {
        resetSeenHits();
        allHits = data.hits;
      } else {
        allHits = [...allHits, ...data.hits];
      }
    } catch (err) {
      console.error(err);
      error = 'Error al buscar. Intenta de nuevo.';
      if (page === 1) { results = null; allHits = []; }
    }

    isLoading = false;
    isLoadingMore = false;
  }

  function loadMore() {
    if (hasMoreResults && !isLoadingMore) performSearch(searchVal, currentPage + 1);
  }

  function handleKeydown(e) {
    if (e.key === 'Escape') {
      clearSearch();
      searchInput?.blur();
      selectedResultIndex = -1;
    }

    // Navegación por resultados
    if (sortedHits.length > 0) {
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        selectedResultIndex = Math.min(selectedResultIndex + 1, sortedHits.length - 1);
        scrollToSelectedResult();
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        selectedResultIndex = Math.max(selectedResultIndex - 1, -1);
        scrollToSelectedResult();
      } else if (e.key === 'Enter' && selectedResultIndex >= 0) {
        e.preventDefault();
        navigateToResult(sortedHits[selectedResultIndex]);
      }
    }
  }

  function scrollToSelectedResult() {
    if (selectedResultIndex >= 0) {
      const el = document.querySelector(`[data-result-index="${selectedResultIndex}"]`);
      el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
    }
  }

  function navigateToResult(hit) {
    const meta = parseMetadatos(hit.document.metadatos);
    const isEntidadClass = hit.document.class_ === 'entidad';
    const isClassResult = hit.document.is_class === true;

    let url;
    if (isEntidadClass) {
      url = `/entidad/${meta.entidad}`;
    } else if (isClassResult) {
      url = `/clasificador/${hit.document.class_}/${hit.document.id}`;
    } else {
      url = `/proyecto/${generateCodigo(hit)}`;
    }

    window.location.href = url;
  }

  function clearSearch() {
    searchVal = '';
    results = null;
    allHits = [];
    currentPage = 1;
    error = null;
    showMinLengthHint = false;
    selectedResultIndex = -1;
    clearTimeout(debounceTimer);
    clearTimeout(hintTimer);
    searchInput?.focus();
  }

  // Helpers
  function extractAfterHyphen(text) {
    if (!text) return '';
    const parts = text.split(' - ');
    return parts.length > 1 ? parts.slice(1).join(' - ').trim() : text;
  }

  function parseMetadatos(meta) {
    if (!meta) return {};
    if (typeof meta === 'object') return meta;
    try { return JSON.parse(meta); } catch { return {}; }
  }

  // Usar allHits para stats (no solo la última página)
  function getStats(hits, totalFound) {
    if (!hits?.length) return null;
    const isClassifier = hits[0]?.document?.is_class === true;
    const isEntidad = hits[0]?.document?.class_ === 'entidad';
    const montoTotal = hits.reduce((s, h) => s + (h.document.devengado || 0), 0);

    if (isClassifier) {
      const entidadesSet = new Set();
      hits.forEach(h => {
        const m = parseMetadatos(h.document.metadatos);
        if (m.entidad) entidadesSet.add(m.entidad);
      });
      return { found: totalFound, montoTotal, perCapita: montoTotal / POBLACION,
               numEntidades: entidadesSet.size,
               isClassifier: true, isEntidad, classType: hits[0]?.document?.class_ || null };
    } else {
      const entidadesSet = new Set();
      const allYears = [];
      hits.forEach(h => {
        const m = parseMetadatos(h.document.metadatos);
        if (m.entidad) entidadesSet.add(m.entidad);
        if (m.gestion) {
          const years = m.gestion.split(',').map(y => parseInt(y.trim())).filter(y => !isNaN(y));
          allYears.push(...years);
        }
      });
      const yearRange = allYears.length > 0 ? formatYearsArray(allYears) : null;
      return { found: totalFound, montoTotal, perCapita: montoTotal / POBLACION,
               numEntidades: entidadesSet.size,
               yearRange,
               isClassifier: false };
    }
  }

  function formatMonto(num) {
    if (num >= 1e9) return `${(num/1e9).toFixed(1)} mil millones de Bs`;
    if (num >= 1e6) return `${(num/1e6).toFixed(1)} millones de Bs`;
    if (num >= 1e3) return `${(num/1e3).toFixed(0)} mil Bs`;
    return `${num.toFixed(0)} Bs`;
  }

  function formatMontoFull(num) {
    return `${num.toLocaleString('es-BO', { minimumFractionDigits: 0, maximumFractionDigits: 0 })} Bs`;
  }

  function formatYearsArray(years) {
    if (!years || years.length === 0) return '';
    const sorted = [...new Set(years)].sort((a, b) => a - b);
    if (sorted.length === 1) return sorted[0].toString();

    // Group into continuous ranges
    const groups = [];
    let start = sorted[0];
    let end = sorted[0];

    for (let i = 1; i < sorted.length; i++) {
      if (sorted[i] === end + 1) {
        end = sorted[i];
      } else {
        groups.push(start === end ? `${start}` : `${start}-${end}`);
        start = sorted[i];
        end = sorted[i];
      }
    }
    groups.push(start === end ? `${start}` : `${start}-${end}`);

    return groups.join(', ');
  }

  function formatYears(yearsStr) {
    if (!yearsStr) return '';
    const years = yearsStr.split(',').map(y => parseInt(y.trim())).filter(y => !isNaN(y));
    return formatYearsArray(years);
  }

  function generateCodigo(hit) {
    const m = parseMetadatos(hit.document.metadatos);
    return `${m.entidad}-${m.programa}-${m.proyecto}-${m.actividad}-${hit.document.gestion}`;
  }

  $: stats = allHits.length > 0 ? getStats(allHits, results?.found || allHits.length) : null;

  $: {
    const _mode = searchMode;
    const _classifiers = selectedClassifiers;
    if (searchVal.length >= 3 && mounted) {
      clearTimeout(debounceTimer);
      const needsClassifiers = _mode === 'clasificadores';
      if (!needsClassifiers || _classifiers.length > 0) {
        debounceTimer = setTimeout(() => performSearch(searchVal), DEBOUNCE_MS);
      } else {
        // No hay clasificadores seleccionados - limpiar resultados
        results = null;
        allHits = [];
      }
    }
  }

  // ¿Hay búsqueda activa?
  $: isSearching = searchVal.length >= 3;
</script>

<svelte:head>
  <title>Buscador | Presupuesto Abierto</title>
</svelte:head>

<div class="page" class:mounted>

  <!-- Dots de navegación -->
  <nav class="section-dots" class:section-dots-hidden={currentSection === 'hero'}>
    {#each SECTIONS_NAV as s}
      <button
        class="section-dot"
        class:section-dot-active={currentSection === s.id}
        on:click={() => scrollToSection(s.id)}
        aria-label={s.label}
      >
        <span class="section-dot-label">{s.label}</span>
      </button>
    {/each}
  </nav>

  <!-- Hero -->
  <main data-section="hero">

    <div class="nav-logo" class:nav-hidden={currentSection !== 'hero'}>
      <img src="/logos_oscuro/05_Imago MEFP horizontal espacio negativo.png" alt="MEFP" />
    </div>

    <button class="nav-menu-btn" aria-label="Menú">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
        <line x1="3" y1="6" x2="21" y2="6"/>
        <line x1="3" y1="12" x2="21" y2="12"/>
        <line x1="3" y1="18" x2="21" y2="18"/>
      </svg>
    </button>

    <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>
      </h1>
      <p class="hero-sub" class:hero-collapsed={allHits.length > 0}>
        Información histórica y diaria de todo el Estado Boliviano.
      </p>

      <!-- Buscador -->
      <div class="search-wrap" class:search-wrap-with-results={allHits.length > 0}>
        <div class="search-bar" class:search-focused={searchVal.length > 0} class:has-results={isSearching}>
          <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none"
               stroke={searchVal.length > 0 ? '#FFFFFF' : '#F0C14D'} stroke-width="2" stroke-linecap="round">
            <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
          </svg>

          <div class="search-input-wrap">
            <input
              type="text"
              bind:this={searchInput}
              bind:value={searchVal}
              on:input={handleInput}
              on:keydown={handleKeydown}
              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"></span>
                <span class="placeholder-text">{placeholderText}</span>
              </div>
            {/if}
            {#if searchVal && !isLoading}
              <button class="search-clear" on:click={clearSearch}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
              </button>
            {/if}
            {#if isLoading}
              <div class="search-loading"><span class="loading-dot"></span></div>
            {/if}
          </div>
        </div>

        <!-- ─── ÁREA DE RESULTADOS ─── -->
        <div class="results-area">

        <!-- ─── CARDS DE MODO (se tapan con resultados) ─── -->
        <div class="section-group" class:section-group-hidden={allHits.length > 0}>
          <span class="section-label">Configura tu búsqueda</span>
          <div class="mode-cards">

            <!-- Card: Programas y Proyectos -->
          <div
            class="mode-card"
            class:mode-card-active={searchMode === 'programas'}
            on:click={() => setMode('programas')}
            on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && setMode('programas')}
            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">
                  <rect x="3" y="3" width="7" height="7" rx="1"/>
                  <rect x="14" y="3" width="7" height="7" rx="1"/>
                  <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"
                >
                  {ex.label}
                </span>
              {/each}
            </div>
            <div class="mode-card-radio">
              <span class="radio-dot" class:radio-dot-active={searchMode === 'programas'}></span>
            </div>
          </div>

          <!-- Card: Clasificadores -->
          <div
            class="mode-card"
            class:mode-card-active={searchMode === 'clasificadores'}
            on:click={() => setMode('clasificadores')}
            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="clf-chip"
                  class:clf-chip-active={selectedClassifiers.includes(clf.id)}
                  class:clf-chip-disabled={clf.disabled}
                  on:click|stopPropagation={() => { if (!clf.disabled) toggleClassifier(clf.id); }}
                  disabled={clf.disabled}
                >
                  <span class="clf-check">
                    {#if selectedClassifiers.includes(clf.id)}
                      <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="clf-label">{clf.label}</span>
                </button>
              {/each}
            </div>
            <div class="mode-card-pills">
              {#each EXAMPLES_CLASIFICADORES as ex}
                <span
                  class="mode-pill"
                  on:click|stopPropagation={() => searchFromPill(ex.label, ex.classifier)}
                  on:keydown={(e) => e.key === 'Enter' && searchFromPill(ex.label, ex.classifier)}
                  role="button"
                  tabindex="0"
                >
                  {ex.label}
                </span>
              {/each}
            </div>
            <div class="mode-card-radio">
              <span class="radio-dot" class:radio-dot-active={searchMode === 'clasificadores'}></span>
            </div>
          </div>
          </div>

          <!-- Sección: Ir a -->
          <span class="section-label section-label-goto">Ir a</span>
          <a href="/vista-diaria" class="daily-card">
            <div class="daily-card-left">
              <span class="daily-dot"></span>
              <span class="daily-card-title">Vista diaria</span>
            </div>
            <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}
                <span class="daily-card-text">Cargando datos...</span>
              {/if}
            </div>
            <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>
        </div>

          <!-- Estados de búsqueda (mensajes) -->
          {#if showMinLengthHint && searchVal.length > 0 && searchVal.length < 3}
            <div class="results-message">
              <div class="results-hint">Escribe al menos 3 letras para buscar</div>
            </div>
          {:else if error && !results}
            <div class="results-message">
              <div class="results-error">{error}</div>
            </div>
          {:else if isLoading && !results}
            <div class="results-message">
              <div class="results-loading">Buscando...</div>
            </div>
          {:else if results && results.hits?.length === 0}
            <div class="results-message">
              <div class="results-empty">Sin resultados para "{searchVal}"</div>
            </div>
          {/if}

          <!-- Contenedor de resultados (siempre montado para evitar flicker) -->
          <div
            class="results-content results-content-filled"
            class:results-content-visible={allHits.length > 0}
          >
            {#if stats}
                <div class="results-summary">
                  <div class="summary-row">
                    <div class="summary-stats">
                      <span class="summary-count">{stats.found.toLocaleString()}</span>
                      <span class="summary-label">resultados</span>
                      <span class="summary-sep">·</span>
                      <span class="summary-tag summary-tag-gold">{formatMonto(stats.montoTotal)}</span>
                      <span class="summary-sep">·</span>
                      {#if stats.isClassifier}
                        {#if stats.isEntidad && groupedHits}
                          <span class="summary-tag summary-tag-entities">{stats.numEntidades} {stats.numEntidades === 1 ? 'entidad' : 'entidades'}</span>
                          <span class="summary-sep">·</span>
                          <span class="summary-tag">{groupedHits.length} {groupedHits.length === 1 ? 'categoría' : 'categorías'}</span>
                        {/if}
                      {:else}
                        <span class="summary-tag">{stats.numEntidades} {stats.numEntidades === 1 ? 'entidad' : 'entidades'}</span>
                        {#if stats.yearRange}
                          <span class="summary-sep">·</span>
                          <span class="summary-tag">{stats.yearRange}</span>
                        {/if}
                      {/if}
                      {#if isLoading}<span class="updating-dot"></span>{/if}
                    </div>
                    <div class="sort-buttons">
                      {#if !stats.isClassifier}
                        <button class="sort-btn" class:sort-btn-active={sortBy === 'year'} on:click={() => toggleSort('year')}>
                          Año
                          {#if sortBy === 'year'}
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                              {#if sortOrder === 'desc'}<path d="M12 5v14M5 12l7 7 7-7"/>
                              {:else}<path d="M12 19V5M5 12l7-7 7 7"/>{/if}
                            </svg>
                          {/if}
                        </button>
                      {/if}
                      <button class="sort-btn" class:sort-btn-active={sortBy === 'amount'} on:click={() => toggleSort('amount')}>
                        Monto
                        {#if sortBy === 'amount'}
                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            {#if sortOrder === 'desc'}<path d="M12 5v14M5 12l7 7 7-7"/>
                            {:else}<path d="M12 19V5M5 12l7-7 7 7"/>{/if}
                          </svg>
                        {/if}
                      </button>
                    </div>
                  </div>
                </div>
              {/if}

              <div class="results-list">
                {#if groupedHits}
                  <!-- Vista agrupada para entidades -->
                  {#each groupedHits as group, gi}
                    <div class="result-group">
                      <div class="result-group-header">
                        <span class="result-group-name">{group.name}</span>
                        <span class="result-group-count">{group.hits.length}</span>
                        <span class="result-group-monto">{formatMonto(group.totalMonto)}</span>
                      </div>
                      <div class="result-group-items">
                        {#each group.hits as hit, i (getHitKey(hit, gi * 1000 + i))}
                          {@const meta = parseMetadatos(hit.document.metadatos)}
                          {@const isDA = meta.da && meta.entidad_desc_entidad}
                          {@const parentEntity = isDA ? extractAfterHyphen(meta.entidad_desc_entidad) : null}
                          <a href="/entidad/{meta.entidad}" class="result-card result-card-grouped">
                            <div class="result-content">
                              <div class="result-text">
                                {#if hit.highlights?.[0]?.snippet}
                                  {@html hit.highlights[0].snippet}
                                {:else}
                                  {hit.document.texto}
                                {/if}
                              </div>
                              <div class="result-meta">
                                {#if isDA}<span class="result-parent">Dependiente de {parentEntity}</span>{/if}
                                <span class="result-monto">{formatMonto(hit.document.devengado)}</span>
                              </div>
                            </div>
                          </a>
                        {/each}
                      </div>
                    </div>
                  {/each}
                {:else}
                  <!-- Vista plana para otros tipos -->
                  {#each sortedHits as hit, i (getHitKey(hit, i))}
                    {@const meta = parseMetadatos(hit.document.metadatos)}
                    {@const isEntidadClass = hit.document.class_ === 'entidad'}
                    {@const isDA = isEntidadClass && meta.da && meta.entidad_desc_entidad}
                    {@const subarea = isEntidadClass ? extractAfterHyphen(meta.entidad_desc_subarea) : null}
                    {@const parentEntity = isDA ? extractAfterHyphen(meta.entidad_desc_entidad) : null}
                    {@const isClassResult = hit.document.is_class === true}
                    <a
                      href={isEntidadClass
                        ? `/entidad/${meta.entidad}`
                        : (isClassResult ? `/clasificador/${hit.document.class_}/${hit.document.id}` : `/proyecto/${generateCodigo(hit)}`)}
                      class="result-card"
                      class:result-card-selected={selectedResultIndex === i}
                      data-result-index={i}
                    >
                      <div class="result-content">
                        <div class="result-text">
                          {#if hit.highlights?.[0]?.snippet}
                            {@html hit.highlights[0].snippet}
                          {:else}
                            {hit.document.texto}
                          {/if}
                        </div>
                        <div class="result-meta">
                          {#if isEntidadClass}
                            {#if isDA}<span class="result-parent">Dependiente de {parentEntity}</span>{/if}
                            {#if subarea}<span class="result-subarea">{subarea}</span>{/if}
                          {:else if isClassResult}
                            <span class="result-class-type">{hit.document.class_}</span>
                          {:else}
                            <span class="result-year">{formatYears(meta.gestion)}</span>
                            <span class="result-sep">·</span>
                            <span class="result-monto">{formatMonto(hit.document.devengado)}</span>
                            {#if meta.entidad_desc_entidad}
                              <span class="result-sep">·</span>
                              <span class="result-entity">{meta.entidad_desc_entidad}</span>
                            {/if}
                          {/if}
                          {#if isEntidadClass || isClassResult}
                            <span class="result-monto">{formatMonto(hit.document.devengado)}</span>
                          {/if}
                        </div>
                      </div>
                      <svg class="result-link-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                        <polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>
                      </svg>
                    </a>
                  {/each}
                {/if}
              </div>

              {#if hasMoreResults}
                <div class="load-more-container">
                  <button class="load-more-btn" on:click={loadMore} disabled={isLoadingMore}>
                    {#if isLoadingMore}
                      <span class="loading-dot"></span> Cargando...
                    {:else}
                      Cargar más ({allHits.length} de {results.found})
                    {/if}
                  </button>
                </div>
              {/if}
          </div>

          <div class="area-spacer" class:area-spacer-hidden={allHits.length > 0}></div>
        </div>
      </div>
    </div>

    <!-- Scroll hint -->
    <div class="scroll-hint anim" style="--d:800ms" class:scroll-hint-hidden={isSearching}>
      <svg class="scroll-icon-mouse" width="18" height="28" viewBox="0 0 18 28" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
        <rect x="1" y="1" width="16" height="26" rx="8"/><line x1="9" y1="7" x2="9" y2="12" opacity="0.7"/>
      </svg>
      <svg class="scroll-icon-touch" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M6 9l6 6 6-6"/>
      </svg>
      <span>Explora la página</span>
    </div>

  </main>

  <!-- ═══ PORTAL DIRECTORY ═══ -->
  <section class="directory" data-section="datos">
    <div class="directory-inner">
      <!-- Left: Title -->
      <div class="directory-left">
        <div use:reveal={{ id: 'dir-head' }} class="reveal" class:revealed={revealStates['dir-head']}>
          <p class="section-tag">LOS DATOS</p>
          <h2 class="section-title">Dos formas<br/>de ver el<br/>presupuesto.</h2>
        </div>
      </div>

      <!-- Right: Cards -->
      <div class="directory-right">
        <!-- Diario -->
        <div use:reveal={{ id: 'door-d', delay: 60 }} class="reveal" class:revealed={revealStates['door-d']}>
          <div class="door door-warm" class:door-hovered={hDiario} on:mouseenter={() => hDiario = true} on:mouseleave={() => hDiario = false} role="button" tabindex="0">
            <div class="door-content">
              <div class="door-header">
                <div class="door-icon" style="opacity:{hDiario ? 1 : 0.4}">
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4A8B6E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 12 7 12 9 6 12 18 15 9 17 12 21 12"/></svg>
                </div>
                <div class="door-badge">
                  <div class="pulse-dot-sm"></div>
                  <span class="door-badge-text" style="color:#4A8B6E">EN VIVO</span>
                </div>
              </div>
              <h3 class="door-title door-title-dark">Diariamente</h3>
              <div class="door-pills">
                <span class="door-pill door-pill-green">¿Cuánto se ejecutó hoy?</span>
                <span class="door-pill door-pill-green">¿Quién gastó más?</span>
                <span class="door-pill door-pill-green">¿Qué cambió desde ayer?</span>
                <span class="door-pill door-pill-green">Panorama del presupuesto en curso</span>
                <span class="door-pill door-pill-green">Bitácora de movimientos</span>
                <span class="door-pill door-pill-green">Descarga de datos diaria</span>
                <span class="door-pill door-pill-green">Vista de todo el Estado</span>
                <span class="door-pill door-pill-green">Vista por Institución</span>
              </div>
            </div>
            <div class="door-footer">
              <span class="door-meta">ACTUALIZADO HACE 2 HORAS</span>
              <span class="door-cta" style="color:{hDiario ? '#4A8B6E' : '#6B6860'}">Explorar →</span>
            </div>
          </div>
        </div>

        <!-- Archivo -->
        <div use:reveal={{ id: 'door-a', delay: 160 }} class="reveal" class:revealed={revealStates['door-a']}>
          <div class="door door-warm" class:door-hovered={hArchivo} on:mouseenter={() => hArchivo = true} on:mouseleave={() => hArchivo = false} role="button" tabindex="0">
            <div class="door-content">
              <div class="door-header">
                <div class="door-icon" style="opacity:{hArchivo ? 1 : 0.4}">
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#A68A3E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="6" width="14" height="14" rx="2"/><path d="M7 6V4.5A1.5 1.5 0 0 1 8.5 3h7A1.5 1.5 0 0 1 17 4.5V6"/><line x1="8" y1="11" x2="14" y2="11"/><line x1="8" y1="14.5" x2="12" y2="14.5"/></svg>
                </div>
                <span class="door-badge-text" style="color:#A68A3E">2005 — 2025</span>
              </div>
              <h3 class="door-title door-title-dark">Históricamente</h3>
              <div class="door-pills">
                <span class="door-pill door-pill-light">Tendencias</span>
                <span class="door-pill door-pill-light">Tipos de ingreso</span>
                <span class="door-pill door-pill-light">Tipos de gasto</span>
                <span class="door-pill door-pill-light">Por institución</span>
                <span class="door-pill door-pill-light">Por sector</span>
                <span class="door-pill door-pill-light">Por autonomías</span>
                <span class="door-pill door-pill-light">Comparar entidades</span>
              </div>
            </div>
            <div class="door-footer">
              <span class="door-meta">8M REGISTROS · 7 CLASIFICADORES</span>
              <span class="door-cta" style="color:{hArchivo ? '#C9A751' : '#6B6860'}">Explorar →</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ═══ CLASIFICADORES ═══ -->
  <section id="clasificadores" class="clasificadores" data-section="clasificadores">
    <div class="clas-container">
      <!-- Header -->
      <div use:reveal={{ id: 'clas-head' }} class="reveal clas-header-section" class:revealed={revealStates['clas-head']}>
        <div class="clas-header-row">
          <div>
            <p class="section-tag">CLASIFICADORES</p>
            <h2 class="section-title">Elige cómo explorar el presupuesto</h2>
            <p class="clas-subtitle">Navega por cada una de las 2,626 piezas de los 8 clasificadores.</p>
          </div>
          <a href="/clasificadores" class="clas-ver-todos">Ver todos →</a>
        </div>
      </div>

      <!-- ¿Quién? -->
      <div use:reveal={{ id: 'clas-quien', delay: 100 }} class="reveal" class:revealed={revealStates['clas-quien']}>
        <div class="clas-group-card">
          <div class="clas-group-header">
            <div class="clas-group-icon" style="--c:#1C1C1A">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            </div>
            <div>
              <div class="clas-group-label">¿QUIÉN?</div>
              <div class="clas-group-sub">La entidad que gasta o recibe</div>
            </div>
          </div>
          <a href="/clasificadores/institucional" class="widget-card widget-h" class:widget-hover={hWidget === 'quien'} on:mouseenter={() => hWidget = 'quien'} on:mouseleave={() => hWidget = null}>
            <div class="widget-left">
              <div class="widget-headline">
                <span class="widget-num-big">756</span>
                <span class="widget-label">instituciones públicas</span>
              </div>
              <div class="widget-desc">Ministerios, gobernaciones, municipios, empresas públicas, universidades</div>
            </div>
            <div class="widget-right">
              <span class="widget-tech">INSTITUCIONAL</span>
              <span class="widget-arrow" class:arrow-show={hWidget === 'quien'}>→</span>
            </div>
          </a>
        </div>
      </div>

      <!-- Grid: Ingresos + Gastos -->
      <div class="clas-main-grid">
        <!-- INGRESOS -->
        <div use:reveal={{ id: 'clas-ing', delay: 200 }} class="reveal clas-col" class:revealed={revealStates['clas-ing']}>
          <div class="clas-group-card">
            <div class="clas-group-header">
              <div class="clas-group-icon" style="--c:#C9A751">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
              </div>
              <div>
                <div class="clas-group-label" style="color:#C9A751">INGRESOS</div>
              </div>
            </div>
            <div class="widgets-col">
              {#each WIDGETS_INGRESOS as w}
                <a href={w.href} class="widget-card widget-grow" class:widget-hover={hWidget === w.id} on:mouseenter={() => hWidget = w.id} on:mouseleave={() => hWidget = null}>
                  <div class="widget-headline">
                    <span class="widget-num-big widget-num-gold">{w.n}</span>
                    <span class="widget-label">{w.label}</span>
                  </div>
                  <p class="widget-desc">{w.d}</p>
                  <div class="widget-footer">
                    <span class="widget-tech">{w.t}</span>
                    <span class="widget-arrow" class:arrow-show={hWidget === w.id}>→</span>
                  </div>
                </a>
              {/each}
            </div>
          </div>
        </div>

        <!-- GASTOS -->
        <div use:reveal={{ id: 'clas-gas', delay: 300 }} class="reveal clas-col" class:revealed={revealStates['clas-gas']}>
          <div class="clas-group-card">
            <div class="clas-group-header">
              <div class="clas-group-icon" style="--c:#4A8B6E">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
              </div>
              <div>
                <div class="clas-group-label" style="color:#4A8B6E">GASTOS</div>
              </div>
            </div>

            <!-- Gastos content wrapper -->
            <div class="gastos-content">
              <!-- ¿En qué? sub-group -->
              <div class="clas-subgroup">
                <div class="clas-subgroup-header">
                  <div class="clas-subgroup-icon" style="--c:#4A8B6E">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
                  </div>
                  <div>
                    <div class="clas-subgroup-label">¿EN QUÉ?</div>
                  </div>
                </div>
                <div class="widgets-row">
                  {#each WIDGETS_GASTOS_QUE as w}
                    <a href={w.href} class="widget-card widget-sm" class:widget-hover={hWidget === w.id} on:mouseenter={() => hWidget = w.id} on:mouseleave={() => hWidget = null}>
                      <div class="widget-headline">
                        <span class="widget-num-big widget-num-green">{w.n}</span>
                        <span class="widget-label">{w.label}</span>
                      </div>
                      <p class="widget-desc widget-desc-sm">{w.d}</p>
                      <div class="widget-footer">
                        <span class="widget-tech">{w.t}</span>
                        <span class="widget-arrow" class:arrow-show={hWidget === w.id}>→</span>
                      </div>
                    </a>
                  {/each}
                </div>
              </div>

              <!-- Bottom: Para qué + Dónde -->
              <div class="widgets-row">
                <!-- ¿Para qué? -->
                <div class="clas-subgroup">
                  <div class="clas-subgroup-header">
                    <div class="clas-subgroup-icon" style="--c:#4A8B6E">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>
                    </div>
                    <div>
                      <div class="clas-subgroup-label">¿PARA QUÉ?</div>
                    </div>
                  </div>
                  <a href="/clasificadores/funcional" class="widget-card widget-full" class:widget-hover={hWidget === 'finalidad'} on:mouseenter={() => hWidget = 'finalidad'} on:mouseleave={() => hWidget = null}>
                    <div class="widget-headline">
                      <span class="widget-num-big widget-num-green">132</span>
                      <span class="widget-label">finalidades y funciones</span>
                    </div>
                    <p class="widget-desc">Educación, salud, defensa</p>
                    <div class="widget-footer">
                      <span class="widget-tech">Finalidad</span>
                      <span class="widget-arrow" class:arrow-show={hWidget === 'finalidad'}>→</span>
                    </div>
                  </a>
                </div>

                <!-- ¿Dónde? -->
                <div class="clas-subgroup">
                  <div class="clas-subgroup-header">
                    <div class="clas-subgroup-icon" style="--c:#4A8B6E">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>
                    </div>
                    <div>
                      <div class="clas-subgroup-label">¿DÓNDE?</div>
                    </div>
                  </div>
                  <a href="/clasificadores/geografico" class="widget-card widget-full" class:widget-hover={hWidget === 'donde'} on:mouseenter={() => hWidget = 'donde'} on:mouseleave={() => hWidget = null}>
                    <div class="widget-headline">
                      <span class="widget-num-big widget-num-green">352</span>
                      <span class="widget-label">ubicaciones geográficas</span>
                    </div>
                    <p class="widget-desc">Departamentos, municipios</p>
                    <div class="widget-footer">
                      <span class="widget-tech">Geográfico</span>
                      <span class="widget-arrow" class:arrow-show={hWidget === 'donde'}>→</span>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ═══ HISTORIAS ═══ -->
  <section id="historias" class="historias" data-section="historias">
    <div class="container">
      <div use:reveal={{ id: 'hist-head' }} class="reveal" class:revealed={revealStates['hist-head']}>
        <div class="hist-header">
          <div>
            <div class="hist-tag-row">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6B6860" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
              <p class="section-tag">HISTORIAS</p>
            </div>
            <h2 class="section-title">Los datos, contados.</h2>
            <p class="hist-subtitle">Investigaciones y análisis narrativos sobre el presupuesto público.</p>
          </div>
          <a href="/historias" class="gold-link">Ver todas →</a>
        </div>
      </div>
      <div class="hist-grid">
        {#each HISTORIAS as h, i}
          <div use:reveal={{ id: `hist-${i}`, delay: 60 + i * 80 }} class="reveal hist-cell" class:revealed={revealStates[`hist-${i}`]} class:hist-tall={h.tall}>
            <div class="hist-card" class:hist-card-hovered={hHist === i} on:mouseenter={() => hHist = i} on:mouseleave={() => hHist = null} role="button" tabindex="0" style="--card-color:{h.color}">
              <div class="hist-accent" style="background:{h.color};transform:scaleX({hHist === i ? 1 : 0})"></div>
              <div class="hist-content">
                <span class="hist-tag" style="color:{h.color}">{h.tag}</span>
                <h4 class="hist-title">{h.title}</h4>
                <p class="hist-desc">{h.desc}</p>
              </div>
              <div class="hist-cta" style="color:{hHist === i ? h.color : '#6B6860'}">
                Leer historia <span class="hist-arrow" class:hist-arrow-moved={hHist === i}>→</span>
              </div>
            </div>
          </div>
        {/each}
      </div>
    </div>
  </section>

  <!-- ═══ VISUALIZACIONES ═══ -->
  <section id="visualizaciones" class="visualizaciones" data-section="visualizaciones">
    <div class="container">
      <div use:reveal={{ id: 'vis-head' }} class="reveal" class:revealed={revealStates['vis-head']}>
        <div class="vis-header">
          <div>
            <div class="vis-tag-row">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6B6860" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
              <p class="section-tag">VISUALIZACIONES</p>
            </div>
            <h2 class="section-title">Explora los datos.</h2>
            <p class="vis-subtitle">Herramientas interactivas para navegar el presupuesto.</p>
          </div>
          <a href="/visualizaciones" class="gold-link">Ver todas →</a>
        </div>
      </div>
      <div class="vis-grid-simple">
        {#each VISUALIZACIONES as v, i}
          <div use:reveal={{ id: `vis-${i}`, delay: 60 + i * 80 }} class="reveal" class:revealed={revealStates[`vis-${i}`]}>
            {#if v.href}
              <a href={v.href} class="vis-card vis-card-link" class:vis-card-hovered={hVis === i} on:mouseenter={() => hVis = i} on:mouseleave={() => hVis = null}>
                <div class="vis-accent" style="background:{v.color};transform:scaleX({hVis === i ? 1 : 0})"></div>
                <div>
                  <span class="vis-type" style="background:color-mix(in srgb, {v.color} 12%, transparent);color:{v.color}">{v.type}</span>
                  <h4 class="vis-title">{v.title}</h4>
                  <p class="vis-desc">{v.desc}</p>
                </div>
                <div class="vis-cta" style="color:{hVis === i ? v.color : '#6B6860'}">
                  Explorar <span class="vis-arrow" class:vis-arrow-moved={hVis === i}>→</span>
                </div>
              </a>
            {:else}
              <div class="vis-card vis-card-disabled" class:vis-card-hovered={hVis === i} on:mouseenter={() => hVis = i} on:mouseleave={() => hVis = null} role="button" tabindex="0">
                <div class="vis-accent" style="background:{v.color};transform:scaleX({hVis === i ? 1 : 0})"></div>
                <div>
                  <span class="vis-type" style="background:color-mix(in srgb, {v.color} 12%, transparent);color:{v.color}">{v.type}</span>
                  <h4 class="vis-title">{v.title}</h4>
                  <p class="vis-desc">{v.desc}</p>
                </div>
                <div class="vis-cta" style="color:#6B6860">
                  Próximamente
                </div>
              </div>
            {/if}
          </div>
        {/each}
      </div>
    </div>
  </section>

  <!-- ═══ MANIFIESTO ═══ -->
  <section class="manifiesto" data-section="manifiesto">
    <div class="dot-pattern"></div>
    <div class="manifiesto-inner">
      <div use:reveal={{ id: 'man' }} class="reveal" class:revealed={revealStates['man']}>
        <p class="section-tag-light">POR QUÉ EXISTE ESTO</p>
        <h2 class="manifiesto-title">El presupuesto público no es de los gobiernos.<br/><span class="gold">Es de todos.</span></h2>
      </div>
    </div>
  </section>

  <!-- ═══ DESCARGAS ═══ -->
  <section id="descargas" class="descargas" data-section="descargas">
    <div class="descargas-inner">
      <div use:reveal={{ id: 'desc' }} class="reveal" class:revealed={revealStates['desc']}>
        <h2 class="descargas-title">Descarga los datos.</h2>
        <div class="descargas-formats">
          <span class="format-pill">.csv</span>
          <span class="format-pill">.parquet</span>
          <span class="format-pill">.gpkg</span>
        </div>
        <a href="/descargas" class="descargas-link">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v12"/><polyline points="8 12 12 16 16 12"/><path d="M4 18h16"/></svg>
          Ir a página de descargas
        </a>
      </div>
    </div>
  </section>

  <!-- ═══ FOOTER ═══ -->
  <footer>
    <div class="footer-inner">
      <div class="footer-org">MINISTERIO DE ECONOMÍA Y FINANZAS PÚBLICAS</div>
      <div class="footer-right">DATOS ABIERTOS · 2005 — 2026</div>
    </div>
  </footer>
</div>

<style>
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');
  :global(*){margin:0;padding:0;box-sizing:border-box}
  :global(html){width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;background:#1C1C1A;scroll-behavior:smooth}
  :global(body){width:100%;min-height:100%;margin:0;padding:0;overflow-x:hidden;background:#1C1C1A}
  :global(::selection){background:#C9A751;color:#1C1C1A}
  :global(::-webkit-scrollbar){width:5px}
  :global(::-webkit-scrollbar-track){background:#1C1C1A}
  :global(::-webkit-scrollbar-thumb){background:#444;border-radius:3px}
  :global(a){color:inherit;text-decoration:none}

  @keyframes pulse{0%,100%{opacity:0.35}50%{opacity:1}}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
  @keyframes scrollHint{0%,100%{transform:translateY(0);opacity:0.6}50%{transform:translateY(5px);opacity:1}}
  @keyframes heartbeat{0%,100%{stroke-dashoffset:0}50%{stroke-dashoffset:48}}

  .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;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}
  .section-dot-active:hover{transform:scale(1.2)}
  .section-dot-label{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;letter-spacing:0.05em;color:#6B6860;white-space:nowrap;opacity:0;transition:opacity 0.2s;pointer-events:none}
  .section-dot:hover .section-dot-label{opacity:1}
  .gold{color:#F0C14D}
  .container{max-width:1060px;margin:0 auto}

  /* Reveal */
  .reveal{opacity:0;transform:translateY(28px);transition:all 0.8s cubic-bezier(0.16,1,0.3,1)}
  .revealed{opacity:1!important;transform:translateY(0)!important}
  .anim{opacity:0;transform:translateY(18px);transition:all 0.8s cubic-bezier(0.16,1,0.3,1);transition-delay:var(--d,0ms)}
  .mounted .anim{opacity:1;transform:translateY(0)}

  /* ── NAV ── */
  nav{background:#1C1C1A;padding:12px 48px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
  .nav-left{display:flex;align-items:center}
  .nav-right{display:flex;align-items:center;gap:24px}
  .nav-link{font-family:var(--sans);font-size:14px;color:#B8B5AD;letter-spacing:0.01em;font-weight:400;transition:color 0.2s}
  .nav-link:hover{color:#F5F0E8}
  .nav-link-icon{display:flex;align-items:center;gap:5px}
  .heartbeat-line{animation:heartbeat 3s ease-in-out infinite}
  .nav-date{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:0.06em;color:#B8B5AD;font-weight:400}
  .date-label{color:#9B9890}
  .date-sep{margin:0 3px;opacity:0.3}
  .pulse-dot{width:5px;height:5px;border-radius:50%;background:#4A8B6E;animation:pulse 2s ease-in-out infinite}
  .pulse-dot-sm{width:6px;height:6px;border-radius:50%;background:#4A8B6E;animation:pulse 2s ease-in-out infinite;box-shadow:0 0 8px rgba(74,139,110,0.37)}
  .nav-sep{width:1px;height:16px;background:#2A2A27}
  .nav-logo{height:88px;display:flex;align-items:center;flex-shrink:0}
  .nav-logo img{height:100%;width:auto;object-fit:contain}

  /* ── HERO ── */
  main[data-section="hero"]{height:100vh;background:#1C1C1A;display:flex;flex-direction:column;scroll-snap-align:start;scroll-snap-stop:always;overflow-x:hidden;overflow-y:visible;position:relative}
  .landing-screen{height:100vh;background:#1C1C1A;display:flex;flex-direction:column;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
  .hero{background:#1C1C1A;color:#F5F0E8;flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 48px 32px;position:relative;overflow:hidden}
  .dot-pattern{position:absolute;inset:0;opacity:0.02;background-image:radial-gradient(circle at 1px 1px,#B8B5AD 0.5px,transparent 0);background-size:40px 40px}
  .dot-pattern-sm{position:absolute;inset:0;opacity:0.015;background-image:radial-gradient(circle at 1px 1px,#fff 0.5px,transparent 0);background-size:32px 32px}
  .hero-inner{max-width:1060px;margin:0 auto;width:100%;position:relative;margin-top:-80px;text-align:center}
  .hero-identity{margin-bottom:20px}
  .hero-search{display:flex;justify-content:center;position:relative;z-index:50}
  .hero-tag{font-family:var(--mono);font-size:12px;letter-spacing:0.25em;color:#B8B5AD}
  .hero-title{font-size:clamp(44px,5.5vw,72px);font-weight:900;line-height:1.02;letter-spacing:-0.035em;max-width:720px;margin:14px auto 0}
  .hero-sub{font-family:var(--sans);font-size:clamp(16px,1.6vw,18px);color:#D0CCC4;max-width:100%;margin-top:14px;line-height:1.6}
  .hero-sub-link{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(165,162,154,0.5);transition:all 0.2s;padding-bottom:1px}
  .hero-sub-link:hover{color:#4A8B6E;border-bottom-color:#4A8B6E}
  .hero-stats{font-family:var(--mono);font-size:13px;letter-spacing:0.04em;color:#B8B5AD;margin-top:16px;line-height:1}
  .stat-num{color:#F5F0E8}
  .stat-dot{margin:0 10px;opacity:0.3}
  .stat-link{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(184,181,173,0.4);transition:all 0.2s;padding-bottom:1px}
  .stat-link:hover{color:#C9A751;border-bottom-color:#C9A751}

  /* Search */
  .search-wrap{max-width:960px;width:100%;margin:0 auto;position:relative;z-index:9999;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
  .search-wrap-with-results{background:rgba(255,255,255,0.04);border-radius:20px;border:1px solid rgba(255,255,255,0.08);padding:6px}
  .search-bar{display:flex;align-items:center;background:rgba(255,255,255,0.05);border-radius:16px;padding:8px 14px 8px 14px;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);box-shadow:0 12px 40px rgba(0,0,0,0.4),0 4px 12px rgba(0,0,0,0.2);position:relative}
  .search-focused{background:rgba(255,255,255,0.12)}
  .search-has-results{border-radius:16px 16px 0 0}
  .search-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:0 4px}
  .search-meta-item{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13px;font-weight:500;padding:10px 14px;border-radius:10px;text-decoration:none;transition:all 0.2s}
  .search-meta-item svg{display:block;flex-shrink:0}
  .search-badge{color:#4A8B6E;background:rgba(74,139,110,0.12)}
  .search-diario-link{color:#C9A751;background:rgba(201,167,81,0.12)}
  .search-diario-link:hover{background:rgba(201,167,81,0.22);color:#D4B65E}
  .search-diario-link svg{transition:transform 0.2s}
  .search-diario-link:hover svg{transform:translateX(3px)}
  .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: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}
  .cursor-diario{background:#4A8B6E}
  .cursor-archivo{background:#C9A751}
  .has-results{border-radius:14px;box-shadow:none;background:rgba(255,255,255,0.03)}
  .placeholder-text{font-family:var(--sans);font-size:17px;font-weight:400;color:#9B9890;letter-spacing:0}
  .placeholder-mobile{display:none}
  .gear-btn{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);cursor:pointer;transition:all 0.3s;flex-shrink:0;margin-left:8px}
  .gear-btn svg{transition:transform 0.3s ease}
  .gear-btn:hover svg{transform:rotate(45deg)}
  .gear-btn:hover,.gear-active{background:rgba(255,255,255,0.12)}
  .gear-wrap{position:relative}
  .gear-desktop{display:block}
  .gear-menu{position:absolute;top:calc(100% + 6px);right:0;background:rgba(28,28,26,0.92);backdrop-filter:blur(32px) saturate(1.2);-webkit-backdrop-filter:blur(32px) saturate(1.2);border-radius:16px;min-width:320px;z-index:9999;box-shadow:0 12px 48px rgba(0,0,0,0.5);padding:4px;animation:gearFadeIn 0.15s ease-out}
  @keyframes gearFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
  .gear-menu-title{font-family:var(--sans);font-size:11px;font-weight:400;color:#6B6860;padding:10px 14px 6px;letter-spacing:0.02em}
  .gear-row{display:flex;align-items:center;gap:12px;width:100%;background:transparent;border:none;padding:12px 14px;border-radius:12px;cursor:pointer;transition:background 0.15s;text-align:left}
  .gear-row:hover{background:rgba(255,255,255,0.04)}
  .gear-check{width:18px;height:18px;border-radius:6px;border:1.5px solid rgba(255,255,255,0.15);background:transparent;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0;color:transparent}
  .gear-check-on{border-color:transparent;background:#C9A751;color:#1C1C1A}
  .gear-row-content{flex:1;display:flex;align-items:baseline;gap:8px}
  .gear-row-question{font-family:var(--sans);font-size:12px;color:#5A5850;font-weight:400}
  .gear-row-label{font-family:var(--sans);font-size:14px;color:#8B8880;transition:color 0.15s}
  .gear-row-label-on{color:#F5F0E8}
  .gear-row-count{font-family:var(--mono);font-size:10px;color:#4A4840}

  /* Mobile settings button (hidden on desktop) */
  .mobile-settings-btn{display:none;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.06);border:none;cursor:pointer;align-items:center;justify-content:center;position:relative;transition:all 0.3s;flex-shrink:0}
  .mobile-settings-btn:hover,.mobile-settings-open{background:rgba(255,255,255,0.12)}
  .mobile-mode-indicator{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%}

  /* Mobile settings panel (hidden on desktop) */
  .mobile-settings-panel{display:none;overflow:hidden;max-height:0;opacity:0;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
  .mobile-settings-panel-open{max-height:300px;opacity:1;margin-top:12px}
  .mobile-meta-bar{display:flex;gap:10px;padding:4px 0}
  .mobile-meta-item{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-size:13px;font-weight:500;padding:12px 14px;border-radius:10px;text-decoration:none;transition:all 0.2s}
  .mobile-meta-item svg{flex-shrink:0}
  .mobile-search-badge{color:#4A8B6E;background:rgba(74,139,110,0.12)}
  .mobile-diario-link{color:#C9A751;background:rgba(201,167,81,0.12)}
  .mobile-diario-link:hover,.mobile-diario-link:active{background:rgba(201,167,81,0.22)}
  .mobile-filter-section{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.06)}
  .mobile-filter-title{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:0.1em;color:#6B6860;text-transform:uppercase;margin-bottom:8px}
  .mobile-filter-bar{display:flex;gap:8px;flex-wrap:wrap}
  .mobile-filter-chip{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:20px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.06);cursor:pointer;transition:all 0.2s;font-family:var(--sans);font-size:13px;color:#6B6860}
  .mobile-filter-chip.filter-chip-active{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15);color:#F5F0E8}
  .filter-chip-dot{width:6px;height:6px;border-radius:50%;opacity:0.4;transition:opacity 0.2s}
  .mobile-filter-chip.filter-chip-active .filter-chip-dot{opacity:1}

  /* Search clear button */
  .search-clear{background:none;border:none;cursor:pointer;color:#6B6860;padding:4px;display:flex;align-items:center;justify-content:center;transition:color 0.2s;flex-shrink:0}
  .search-clear:hover{color:#F5F0E8}

  /* Search Results Dropdown */
  .search-results{position:absolute;top:100%;left:0;right:0;background:rgba(28,28,26,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-top:none;border-radius:0 0 16px 16px;max-height:320px;overflow-y:auto;z-index:9999}
  .search-loading,.search-no-results{padding:16px 20px;font-family:var(--sans);font-size:14px;color:#9B9890;text-align:center}
  .search-error{margin-top:8px;font-family:var(--sans);font-size:13px;color:#C44B3F;text-align:center}

  .search-result-item{width:100%;text-align:left;background:none;border:none;border-top:1px solid rgba(255,255,255,0.06);padding:14px 20px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background 0.2s}
  .search-result-item:first-child{border-top:none}
  .search-result-item:hover,.result-selected{background:rgba(255,255,255,0.06)}

  .result-main{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
  .result-name{font-family:var(--sans);font-size:14px;color:#F5F0E8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .result-sigla{font-family:var(--sans);font-size:12px;color:#9B9890;flex-shrink:0}

  .result-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:12px}
  .result-code{font-family:var(--mono);font-size:10px;color:#9B9890;background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:4px}
  .result-type{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;font-weight:600}
  .pills{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;align-items:center;justify-content:center}
  .pills-label{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:#B8B5AD;margin-right:2px}
  .pill{font-family:var(--mono);font-size:12px;font-weight:300;letter-spacing:0.03em;border:none;border-radius:6px;padding:5px 12px;cursor:pointer;transition:all 0.25s;line-height:1.4;position:relative;overflow:hidden;text-decoration:none}
  .pill::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.12);opacity:0;transition:opacity 0.25s}
  .pill:hover::before{opacity:1}
  .pill:hover{transform:translateY(-1px)}

  .scroll-hint{position:absolute;bottom:28px;left:0;right:0;margin:0 auto;width:fit-content;display:flex;flex-direction:column;align-items:center;gap:10px;animation:scrollHint 2.5s ease-in-out infinite;z-index:100;transition:opacity 0.3s;color:#B8B5AD}
  .scroll-hint-hidden{opacity:0;pointer-events:none}
  .scroll-hint span{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;color:#B8B5AD;opacity:0.7}
  .scroll-icon-mouse{display:block}
  .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;position:relative}

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

  /* Section Group */
  .section-group{margin-top:16px;transition:all 0.4s cubic-bezier(0.16,1,0.3,1)}
  .section-group-hidden{opacity:0;pointer-events:none;position:absolute;z-index:-1}
  .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}
  .section-label-goto{margin-top:12px}

  /* Mode Cards */
  .mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}

  .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}
  .mode-card:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);transform:translateY(-2px)}
  .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)}
  .mode-card-active:hover{background:rgba(240,193,77,0.08);border-color:rgba(240,193,77,0.35)}

  .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}
  .mode-card:hover .mode-card-icon{color:#D0CCC4}
  .mode-card-active .mode-card-icon{color:#F0C14D}
  .mode-card-title{font-family:var(--sans);font-size:16px;font-weight:600;color:#F5F0E8;letter-spacing:-0.01em}

  .mode-card-desc{font-family:var(--sans);font-size:13px;color:#9B9890;line-height:1.5;margin:0}
  .mode-card-desc strong{color:#D0CCC4;font-weight:600}

  .mode-card-classifiers{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}

  .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}
  .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%;position:relative;min-height:60px;text-align:center}

  /* 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)}
  .daily-card:hover{background:rgba(232,168,76,0.08);border-color:rgba(232,168,76,0.3);transform:translateY(-2px)}
  .daily-card-left{display:flex;align-items:center;gap:10px;flex-shrink:0}
  .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)}
  .daily-card-title{font-family:var(--sans);font-size:15px;font-weight:600;color:#E8A84C;letter-spacing:-0.01em}
  .daily-card-content{flex:1;text-align:left}
  .daily-card-text{font-family:var(--sans);font-size:13px;color:#9B9890}
  .daily-card-text strong{color:#D4A84C;font-weight:600}
  .daily-card-arrow{color:#E8A84C;opacity:0.5;transition:all 0.2s;flex-shrink:0}
  .daily-card:hover .daily-card-arrow{opacity:1;transform:translateX(4px)}

  /* Results Messages */
  .results-message{text-align:center;padding:20px}
  .results-hint,.results-loading{font-family:var(--sans);font-size:14px;color:#6B6860}
  .results-error{font-family:var(--sans);font-size:14px;color:#C44B3F}
  .results-empty{font-family:var(--sans);font-size:14px;color:#8B8880}

  /* 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:#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)}
  .summary-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
  .summary-stats{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
  .summary-count{font-family:var(--mono);font-size:12px;font-weight:500;color:#D0CCC4}
  .summary-label{font-family:var(--sans);font-size:13px;color:#A5A29A}
  .summary-sep{color:#6B6860;font-size:10px;margin:0 6px}
  .updating-dot{width:6px;height:6px;border-radius:50%;background:#F0C14D;animation:pulse 1s ease-in-out infinite;margin-left:4px}
  .summary-tag{font-family:var(--mono);font-size:11px;letter-spacing:0.03em;color:#9B9890}
  .summary-tag-gold{font-size:14px;font-weight:600;color:#5AAF8A}
  .summary-tag-entities{color:#5AAF8A}

  /* Sort Buttons */
  .sort-buttons{display:flex;gap:8px}
  .sort-btn{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:#8B8880;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,0.04);border:none;cursor:pointer;transition:all 0.2s}
  .sort-btn:hover{background:rgba(255,255,255,0.08);color:#D0CCC4}
  .sort-btn-active{background:rgba(255,255,255,0.1);color:#F5F0E8}

  /* Results List */
  .results-list{display:flex;flex-direction:column;gap:0}

  /* Result Group (for entidades) */
  .result-group{background:transparent;border-radius:0;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:8px;margin-bottom:8px}
  .result-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
  .result-group-header{display:flex;align-items:center;gap:12px;padding:10px 12px;background:rgba(255,255,255,0.04);border-radius:8px;margin-bottom:6px}
  .result-group-name{font-family:var(--sans);font-size:14px;font-weight:600;color:#F5F0E8;flex:1}
  .result-group-count{font-family:var(--mono);font-size:11px;color:#A5A29A;background:rgba(255,255,255,0.08);padding:3px 10px;border-radius:4px}
  .result-group-monto{font-family:var(--mono);font-size:13px;font-weight:500;color:#5AAF8A}
  .result-group-items{display:flex;flex-direction:column}

  /* Result Card */
  .result-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:transparent;border-radius:8px;text-decoration:none;transition:all 0.15s;border-bottom:1px solid rgba(255,255,255,0.06)}
  .result-card:last-child{border-bottom:none}
  .result-card:hover{background:rgba(255,255,255,0.06)}
  .result-card-selected{background:rgba(240,193,77,0.1);border-left:2px solid #F0C14D}
  .result-card-grouped{border-radius:6px;border-bottom:1px solid rgba(255,255,255,0.04);padding:10px 14px;margin-left:12px;background:transparent}
  .result-card-grouped:last-child{border-bottom:none}
  .result-card-grouped:hover{background:rgba(255,255,255,0.04)}
  .result-content{flex:1;min-width:0}
  .result-text{font-family:var(--sans);font-size:14px;color:#F5F0E8;line-height:1.4}
  .result-text :global(mark){background:rgba(255,213,79,0.9);color:#1C1C1A;border-radius:3px;padding:1px 5px;font-weight:600}
  .result-meta{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
  .result-parent,.result-subarea,.result-class-type{font-family:var(--mono);font-size:11px;color:#8B8880}
  .result-year{font-family:var(--mono);font-size:12px;color:#8B8880;background:rgba(255,255,255,0.06);padding:2px 8px;border-radius:4px}
  .result-monto{font-family:var(--mono);font-size:12px;color:#5AAF8A}
  .result-entity{font-family:var(--sans);font-size:12px;color:#9B9890}
  .result-sep{color:#6B6860;font-size:10px;margin:0 2px}
  .result-link-icon{color:#6B6860;opacity:0;transition:all 0.2s;flex-shrink:0}
  .result-card:hover .result-link-icon{opacity:1}

  /* Load More */
  .load-more-container{display:flex;justify-content:center;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.06)}
  .load-more-btn{font-family:var(--sans);font-size:14px;color:#8B8880;padding:12px 24px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:8px}
  .load-more-btn:hover{background:rgba(255,255,255,0.08);color:#F5F0E8}
  .load-more-btn:disabled{opacity:0.5;cursor:not-allowed}
  .loading-dot{width:6px;height:6px;border-radius:50%;background:#C9A751;animation:pulse 1s ease-in-out infinite}
  .search-loading{display:flex;align-items:center;justify-content:center}

  /* Nav elements in hero */
  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: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}
  .directory-inner{display:grid;grid-template-columns:280px 1fr;gap:48px;width:100%;max-width:1200px;margin:0 auto;align-items:center}
  .directory-left{}
  .directory-right{display:flex;flex-direction:column;gap:20px}
  .section-tag{font-family:var(--mono);font-size:12px;letter-spacing:0.2em;color:#6B6860;margin-bottom:10px}
  .section-tag-light{font-family:var(--mono);font-size:12px;letter-spacing:0.2em;color:#B8B5AD}
  .section-title{font-size:clamp(40px,4.5vw,56px);font-weight:900;letter-spacing:-0.025em;line-height:1.05;color:#1C1C1A}
  .section-title-light{font-size:clamp(32px,4vw,46px);font-weight:900;letter-spacing:-0.02em;line-height:1.08;color:#F5F0E8}

  /* Door cards */
  .door{border-radius:24px;padding:44px 40px 40px;cursor:pointer;transition:all 0.5s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:260px}
  .door-hovered{transform:translateY(-4px)}
  .door-dark{background:#1C1C1A;color:#F5F0E8;box-shadow:none}
  .door-dark.door-hovered{box-shadow:0 24px 64px rgba(0,0,0,0.2)}
  .door-warm{background:#ffffff;color:#1C1C1A;box-shadow:none}
  .door-warm.door-hovered{box-shadow:0 24px 64px rgba(201,167,81,0.12)}
  .door-accent{position:absolute;top:0;left:0;right:0;height:3px;transform-origin:left;transition:transform 0.6s cubic-bezier(0.16,1,0.3,1)}
  .door-content{position:relative}
  .door-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
  .door-icon{transition:opacity 0.3s}
  .door-badge{display:flex;align-items:center;gap:6px}
  .door-badge-text{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;font-weight:500}
  .door-title{font-size:clamp(28px,3vw,38px);font-weight:900;letter-spacing:-0.02em;line-height:1.08;color:#F5F0E8}
  .door-title-dark{color:#1C1C1A}
  .door-desc{font-family:var(--sans);font-size:17px;color:#6B6860;line-height:1.55;margin-top:10px;max-width:480px}
  .door-desc-light{color:#9B9890}
  .door-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .door-pill{font-family:var(--sans);font-size:16px;padding:10px 16px;border-radius:8px;line-height:1.3}
  .door-pill-dark{background:rgba(74,139,110,0.12);color:#8ac4a8;font-weight:500}
  .door-pill-light{background:rgba(166,138,62,0.1);color:#a68a3e;font-weight:500}
  .door-pill-green{background:rgba(74,139,110,0.1);color:#3d7a5e;font-weight:500}
  .door-footer{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:24px}
  .door-meta{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:#4A4843}
  .door-meta-light{color:#B8B5AD}
  .door-cta{font-family:var(--sans);font-size:16px;font-weight:400;transition:color 0.3s}

  /* ── CLASIFICADORES ── */
  .clasificadores{background:#e8e8ea;color:#1C1C1A;padding:48px;height:100vh;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
  .clas-container{max-width:1100px;margin:0 auto;width:100%;max-height:calc(100vh - 96px);display:flex;flex-direction:column}
  .clas-header-section{margin-bottom:24px;flex-shrink:0}
  .clas-header-row{display:flex;justify-content:space-between;align-items:flex-end}
  .clas-subtitle{font-family:var(--sans);font-size:17px;color:#6B6860;margin-top:10px}
  .clas-ver-todos{font-family:var(--sans);font-size:15px;font-weight:500;color:#1C1C1A;transition:color 0.2s}
  .clas-ver-todos:hover{color:#4A8B6E}

  /* Group cards */
  .clas-group-card{background:#f2f2f4;border:1px solid rgba(0,0,0,0.04);border-radius:20px;padding:16px;margin-bottom:12px;height:100%;display:flex;flex-direction:column;transition:all 0.3s}
  /* Parent reacts to child hover */
  .clas-group-card:has(.widget-card:hover){background:#efefef;border-color:rgba(0,0,0,0.06)}
  .clas-group-card:has(.widget-card:hover) > .clas-group-header .clas-group-label{transform:scale(1.05);transform-origin:left}
  /* Parent hover highlights children */
  .clas-group-card:hover .widget-card{background:#fdfdfd;border-color:rgba(0,0,0,0.05)}
  .clas-group-card:hover .clas-subgroup{background:#f5f5f7}
  .gastos-content{display:flex;flex-direction:column;flex:1;gap:10px}
  .gastos-content .clas-subgroup{flex:1;margin-bottom:0}
  .gastos-content > .widgets-row{flex:1}
  .clas-group-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .clas-group-icon{width:32px;height:32px;border-radius:10px;background:color-mix(in srgb, var(--c) 10%, transparent);border:1px solid color-mix(in srgb, var(--c) 15%, transparent);display:flex;align-items:center;justify-content:center;color:var(--c);flex-shrink:0}
  .clas-group-label{font-family:var(--mono);font-size:12px;letter-spacing:0.15em;font-weight:600;color:#1C1C1A;transition:transform 0.3s cubic-bezier(0.16,1,0.3,1)}
  .clas-group-sub{font-family:var(--sans);font-size:13px;color:#6B6860;margin-top:2px}

  /* Subgroup */
  .clas-subgroup{background:#f7f7f9;border:1px solid rgba(0,0,0,0.03);border-radius:14px;padding:12px;margin-bottom:10px;display:flex;flex-direction:column;transition:all 0.3s}
  /* Subgroup parent reacts to child hover */
  .clas-subgroup:has(.widget-card:hover){background:#f3f3f5;border-color:rgba(0,0,0,0.05)}
  .clas-subgroup:has(.widget-card:hover) > .clas-subgroup-header .clas-subgroup-label{transform:scale(1.05);transform-origin:left}
  /* Subgroup hover highlights children */
  .clas-subgroup:hover .widget-card{background:#fdfdfd;border-color:rgba(0,0,0,0.05)}
  .clas-subgroup .widgets-row{flex:1}
  .clas-subgroup-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .clas-subgroup-icon{width:32px;height:32px;border-radius:10px;background:color-mix(in srgb, var(--c) 10%, transparent);border:1px solid color-mix(in srgb, var(--c) 15%, transparent);display:flex;align-items:center;justify-content:center;color:var(--c);flex-shrink:0}
  .clas-subgroup-label{font-family:var(--mono);font-size:12px;letter-spacing:0.15em;font-weight:600;color:#1C1C1A;transition:transform 0.3s cubic-bezier(0.16,1,0.3,1)}
  .clas-subgroup-tag{font-family:var(--sans);font-size:13px;color:#6B6860;margin-top:2px}

  /* Main grid */
  .clas-main-grid{display:grid;grid-template-columns:1fr 2fr;gap:12px;align-items:stretch;flex:1;min-height:0}
  .clas-col{display:flex;flex-direction:column}
  .clas-col .clas-group-card{flex:1}

  /* Widget cards */
  .widget-card{display:block;background:#fafafa;border:1px solid rgba(0,0,0,0.04);border-radius:14px;padding:14px;cursor:pointer;text-decoration:none;color:#1C1C1A;transition:all 0.35s cubic-bezier(0.16,1,0.3,1);box-shadow:0 1px 3px rgba(0,0,0,0.02)}
  .widget-hover{background:#ffffff;border-color:rgba(0,0,0,0.06);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.05)}
  .widget-h{display:flex;justify-content:space-between;align-items:center}
  .widget-left{flex:1}
  .widget-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
  .widget-grow{flex:1}
  .widget-sm{padding:12px}
  .widget-full{flex:1}
  .widgets-col{display:flex;flex-direction:column;gap:8px;flex:1}
  .widgets-col .widget-card{flex:1}
  .widgets-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1}
  .widgets-row .widget-card{display:flex;flex-direction:column;justify-content:space-between}
  .widget-headline{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
  .widget-num-big{font-family:var(--mono);font-size:24px;font-weight:700;line-height:1}
  .widget-num-gold{color:#a68a3e}
  .widget-num-green{color:#4A8B6E}
  .widget-label{font-family:var(--sans);font-size:14px;font-weight:700;color:#1C1C1A;line-height:1.2}
  .widget-desc{font-family:var(--sans);font-size:14px;color:#6B6860;line-height:1.4;font-weight:400}
  .widget-desc-sm{font-size:13px}
  .widget-footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
  .widget-tech{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;color:#9B9890;text-transform:uppercase}
  .widget-arrow{font-family:var(--sans);font-size:14px;color:transparent;transform:translateX(-6px);transition:all 0.35s cubic-bezier(0.16,1,0.3,1)}
  .arrow-show{color:#1C1C1A;transform:translateX(0)}

  /* ── HISTORIAS ── */
  .historias{background:#1C1C1A;padding:80px 48px;color:#F5F0E8;min-height:100vh;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always}
  .historias .container{width:100%;max-width:1060px;margin:0 auto}
  .hist-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px}
  .hist-tag-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .hist-tag-row svg{stroke:#9B9890}
  .hist-tag-row .section-tag{color:#9B9890}
  .historias .section-title{color:#F5F0E8}
  .hist-subtitle{font-family:var(--sans);font-size:17px;color:#9B9890;margin-top:10px}
  .hist-grid{display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:minmax(120px, auto);gap:16px}
  .hist-cell{grid-row:span 1}
  .hist-tall{grid-row:span 2}
  .hist-card{background:color-mix(in srgb, var(--card-color) 15%, #1C1C1A);border:1px solid color-mix(in srgb, var(--card-color) 25%, transparent);border-radius:18px;padding:28px 24px 24px;cursor:pointer;transition:all 0.5s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden;height:100%;display:flex;flex-direction:column;justify-content:space-between}
  .hist-card-hovered{background:color-mix(in srgb, var(--card-color) 22%, #1C1C1A);border-color:color-mix(in srgb, var(--card-color) 35%, transparent);transform:translateY(-3px)}
  .hist-accent{position:absolute;top:0;left:0;right:0;height:2px;transform-origin:left;transition:transform 0.5s cubic-bezier(0.16,1,0.3,1)}
  .hist-content{flex:1}
  .hist-tag{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;font-weight:500}
  .hist-title{font-family:var(--serif);font-size:18px;font-weight:800;margin-top:12px;line-height:1.25;letter-spacing:-0.01em;color:#F5F0E8}
  .hist-tall .hist-title{font-size:22px}
  .hist-desc{font-family:var(--sans);font-size:14px;color:#9B9890;line-height:1.5;margin-top:10px}
  .hist-cta{font-family:var(--sans);font-size:14px;margin-top:20px;transition:color 0.3s;display:flex;align-items:center;gap:3px;color:#6B6860}
  .hist-arrow{transition:transform 0.3s;display:inline-block}
  .hist-arrow-moved{transform:translateX(3px)}

  /* ── VISUALIZACIONES ── */
  .visualizaciones{background:#f5f5f7;padding:80px 48px;color:#1C1C1A;min-height:100vh;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always}
  .visualizaciones .container{width:100%;max-width:1060px;margin:0 auto}
  .vis-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px}
  .vis-tag-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .vis-subtitle{font-family:var(--sans);font-size:17px;color:#6B6860;margin-top:10px}
  .gold-link{font-family:var(--sans);font-size:15px;color:#C9A751;font-weight:600}
  .vis-grid-simple{display:grid;grid-template-columns:repeat(3, 1fr);gap:16px}
  .vis-card{background:#fafafc;border-radius:18px;padding:28px 24px 24px;cursor:pointer;transition:all 0.5s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden;height:100%;display:flex;flex-direction:column;justify-content:space-between}
  .vis-card-hovered{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,0.05)}
  .vis-accent{position:absolute;top:0;left:0;right:0;height:2px;transform-origin:left;transition:transform 0.5s cubic-bezier(0.16,1,0.3,1)}
  .vis-type{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;font-weight:500;padding:5px 10px;border-radius:6px;display:inline-block}
  .vis-title{font-family:var(--serif);font-size:18px;font-weight:800;margin-top:12px;line-height:1.25;letter-spacing:-0.01em;color:#1C1C1A}
  .vis-desc{font-family:var(--sans);font-size:14px;color:#6B6860;line-height:1.5;margin-top:10px}
  .vis-cta{font-family:var(--sans);font-size:14px;margin-top:20px;transition:color 0.3s;display:flex;align-items:center;gap:3px;color:#6B6860}
  .vis-arrow{transition:transform 0.3s;display:inline-block}
  .vis-arrow-moved{transform:translateX(3px)}
  .vis-card-link{text-decoration:none;color:inherit}
  .vis-card-disabled{opacity:0.6;cursor:default}
  .vis-card-disabled:hover{transform:none;box-shadow:none}

  /* ── MANIFIESTO ── */
  .manifiesto{background:#1C1C1A;color:#F5F0E8;padding:96px 48px;position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always}
  .manifiesto-inner{max-width:640px;width:100%;margin:0 auto;position:relative;text-align:center}
  .manifiesto-title{font-size:clamp(36px,4.5vw,56px);font-weight:900;line-height:1.08;letter-spacing:-0.025em;margin-top:18px}
  .manifiesto-text{font-family:var(--sans);font-size:17px;color:#9B9890;margin-top:20px;line-height:1.7}

  /* ── DESCARGAS ── */
  .descargas{background:#1C1C1A;padding:80px 48px;color:#F5F0E8;min-height:100vh;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always}
  .descargas-inner{max-width:640px;width:100%;margin:0 auto;text-align:center}
  .descargas-title{font-size:clamp(32px,4vw,48px);font-weight:900;line-height:1.1;letter-spacing:-0.02em;color:#F5F0E8}
  .descargas-formats{display:flex;justify-content:center;gap:12px;margin-top:24px}
  .format-pill{font-family:var(--mono);font-size:14px;letter-spacing:0.05em;color:#9B9890;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);padding:8px 16px;border-radius:8px}
  .descargas-link{display:inline-flex;align-items:center;gap:8px;margin-top:32px;font-family:var(--sans);font-size:15px;color:#C9A751;transition:all 0.3s}
  .descargas-link:hover{color:#d4b45a;gap:10px}

  /* ── FOOTER ── */
  footer{background:#1C1C1A;padding:40px 48px;border-top:1px solid #2A2A27}
  .footer-inner{max-width:1060px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
  .footer-org{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;color:#6B6860}
  .footer-unit{font-family:var(--sans);font-size:13px;color:#6B6860;margin-top:3px}
  .footer-right{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;color:#6B6860}

  /* ══════════════════════════════════════════════════════════════════════════
     RESPONSIVE - TABLET (768px)
     ══════════════════════════════════════════════════════════════════════════ */
  @media(max-width:768px){
    .page{scroll-snap-type:y proximity}
    main[data-section="hero"],.landing-screen,.directory,.clasificadores,.historias,.visualizaciones,.manifiesto,.descargas{scroll-snap-stop:normal}

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

    /* Nav */
    nav{padding:12px 24px}
    .nav-logo{height:60px}

    /* Hero */
    .hero{padding:32px 24px}
    .hero-inner{margin-top:0}
    .hero-title{font-size:clamp(36px,8vw,48px)}
    .hero-stats{font-size:11px;line-height:1.6}
    .stat-dot{margin:0 6px}

    /* Search bar - mobile compact */
    .search-bar{flex-wrap:nowrap;padding:8px 12px;gap:8px}
    .toggle-desktop{display:none}
    .search-divider{display:none}
    .gear-desktop{display:none}
    .mobile-settings-btn{display:flex}
    .mobile-settings-panel{display:block}
    .search-icon{margin-left:0}
    .search-input-wrap{order:1}
    .search-input-wrap input{font-size:16px;padding:10px 8px}
    .placeholder-text{font-size:14px}
    .placeholder-desktop{display:none}
    .placeholder-mobile{display:inline;font-size:14px}

    /* Search results mobile */
    .search-results{max-height:260px;border-radius:0 0 12px 12px}
    .search-result-item{padding:12px 16px}
    .result-name{font-size:13px}
    .result-meta{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}
    .result-code{font-size:9px}
    .result-type{font-size:8px}
    .pills{gap:6px}
    .pill{font-size:11px;padding:4px 10px}
    .scroll-hint{bottom:20px}
    .scroll-icon-mouse{display:none}
    .scroll-icon-touch{display:block}

    /* New search responsive */
    .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}
    .section-group{margin-top:16px}
    .section-label{font-size:10px;margin-bottom:10px}
    .section-label-goto{margin-top:16px}
    .mode-cards{grid-template-columns:1fr;gap:12px}
    .mode-card{padding:18px;gap:10px;border-radius:16px}
    .mode-card-title{font-size:15px}
    .mode-card-desc{font-size:12px}
    .clf-chip{padding:5px 10px;font-size:11px}
    .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-card{padding:16px 18px;gap:12px;border-radius:14px}
    .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}
    .summary-sep{margin:0 3px;font-size:10px}
    .summary-count{font-size:12px}
    .summary-tag-gold{font-size:14px}
    .summary-label{font-size:11px}
    .summary-tag{font-size:10px}
    .sort-buttons{flex-shrink:0}
    .sort-btn{font-size:11px;padding:5px 8px}
    .result-card{padding:12px 14px}
    .result-text{font-size:13px}
    .result-monto{font-size:11px}
    .result-year{font-size:11px;padding:2px 6px}
    .result-entity{font-size:11px}
    .result-sep{font-size:9px;margin:0 3px}
    .load-more-btn{font-size:13px;padding:10px 20px}

    /* Directory */
    .directory{padding:48px 24px}
    .directory-inner{grid-template-columns:1fr;gap:32px}
    .directory-left{text-align:center}
    .section-title{font-size:clamp(32px,7vw,42px)}
    .door{padding:28px 24px 24px;min-height:auto}
    .door-title{font-size:clamp(24px,5vw,32px)}
    .door-pills{gap:6px}
    .door-pill{font-size:14px;padding:8px 12px}
    .door-meta{font-size:10px}

    /* Clasificadores */
    .clasificadores{padding:32px 20px;height:auto;min-height:100vh;overflow-y:auto}
    .clas-container{max-height:none}
    .clas-header-row{flex-direction:column;align-items:flex-start;gap:12px}
    .clas-ver-todos{align-self:flex-start}
    .clas-main-grid{grid-template-columns:1fr;gap:12px}
    .widgets-row{grid-template-columns:1fr}
    .widget-h{flex-direction:column;align-items:flex-start;gap:12px}
    .widget-right{width:100%;justify-content:space-between}
    .widget-num-big{font-size:22px}
    .clas-group-icon,.clas-subgroup-icon{width:28px;height:28px}

    /* Historias */
    .historias{padding:60px 24px}
    .hist-header{flex-direction:column;align-items:flex-start;gap:16px}
    .hist-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:12px}
    .hist-tall{grid-row:span 1}
    .hist-card{padding:20px 18px 18px}
    .hist-title{font-size:16px}
    .hist-tall .hist-title{font-size:18px}
    .hist-desc{font-size:13px}

    /* Visualizaciones */
    .visualizaciones{padding:60px 24px}
    .vis-header{flex-direction:column;align-items:flex-start;gap:16px}
    .vis-grid-simple{grid-template-columns:1fr 1fr;gap:12px}
    .vis-card{padding:20px 18px 18px}
    .vis-title{font-size:16px}

    /* Manifiesto */
    .manifiesto{padding:60px 24px}
    .manifiesto-title{font-size:clamp(28px,6vw,40px)}

    /* Descargas */
    .descargas{padding:60px 24px}
    .descargas-title{font-size:clamp(28px,6vw,40px)}
    .descargas-formats{gap:8px}
    .format-pill{font-size:12px;padding:6px 12px}

    /* Footer */
    footer{padding:32px 24px}
    .footer-inner{flex-direction:column;gap:12px;text-align:center}
    .footer-org,.footer-right{font-size:10px}
  }

  /* ══════════════════════════════════════════════════════════════════════════
     RESPONSIVE - MOBILE (480px)
     ══════════════════════════════════════════════════════════════════════════ */
  @media(max-width:480px){
    /* Section dots - bottom bar smaller */
    .section-dots{bottom:16px;gap:8px;padding:10px 16px;border-radius:20px}
    .section-dot{width:7px;height:7px}

    /* Nav */
    nav{padding:10px 16px}
    .nav-logo{height:48px}

    /* Hero */
    .hero{padding:24px 16px}
    .hero-title{font-size:clamp(32px,9vw,40px)}
    .hero-sub{font-size:15px}
    .hero-stats{font-size:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0}
    .stat-dot{margin:0 4px}

    /* Search */
    .search-wrap{padding:0}
    .mobile-settings-btn{width:36px;height:36px}
    .mobile-meta-item{padding:10px 12px;font-size:12px}
    .search-results{max-height:220px}
    .search-result-item{padding:10px 14px}
    .result-name{font-size:12px}
    .result-sigla{font-size:10px}
    .pills-label{display:none}
    .pill{font-size:10px;padding:4px 8px}
    .scroll-hint{display:none}

    /* New search 480px */
    .search-container{padding:0 12px;padding-top:80px}
    .search-input-wrap input{font-size:15px}
    .placeholder-text{font-size:12px}
    .hero-title{font-size:clamp(34px,10vw,44px)}
    .hero-sub{font-size:13px;margin-bottom:16px}
    main[data-section="hero"] .nav-logo{top:16px;left:16px;height:56px}
    .nav-menu-btn{top:16px;right:16px;width:38px;height:38px}
    .mode-cards{gap:10px;margin-top:12px}
    .mode-card{padding:14px;gap:8px;border-radius:14px}
    .mode-card-icon svg{width:18px;height:18px}
    .mode-card-title{font-size:14px}
    .mode-card-desc{font-size:11px}
    .mode-card-classifiers{gap:4px}
    .clf-chip{padding:4px 8px;font-size:10px;gap:4px}
    .clf-check{width:10px;height: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}
    .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-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}
    .summary-label{font-size:10px}
    .summary-tag{font-size:9px}
    .summary-sep{font-size:9px}
    .sort-btn{font-size:10px;padding:4px 6px}
    .summary-header-text{font-size:12px}
    .result-group-header{padding:10px 12px}
    .result-group-name{font-size:12px}
    .result-card{padding:10px 12px;border-radius:8px}
    .result-text{font-size:12px}
    .result-meta{flex-direction:row;gap:6px;margin-top:4px}
    .result-parent,.result-subarea,.result-class-type{font-size:10px}
    .result-monto{font-size:10px}
    .result-entity{font-size:10px}
    .result-sep{font-size:8px;margin:0 2px}
    .load-more-btn{font-size:12px;padding:8px 16px;border-radius:8px}

    /* Directory */
    .directory{padding:40px 16px}
    .directory-inner{gap:24px}
    .section-tag{font-size:10px}
    .section-title{font-size:clamp(28px,8vw,36px)}
    .door{padding:24px 20px 20px;border-radius:18px}
    .door-icon svg{width:22px;height:22px}
    .door-title{font-size:clamp(22px,6vw,28px)}
    .door-pill{font-size:13px;padding:7px 10px}
    .door-footer{flex-direction:column;align-items:flex-start;gap:8px}
    .door-meta{font-size:9px}
    .door-cta{font-size:14px}

    /* Clasificadores */
    .clasificadores{padding:24px 16px}
    .clas-header-section{margin-bottom:16px}
    .section-title{font-size:clamp(24px,6vw,32px)}
    .clas-subtitle{font-size:14px}
    .clas-group-card{padding:12px;border-radius:14px;margin-bottom:10px}
    .clas-subgroup{padding:10px;border-radius:10px}
    .clas-group-header,.clas-subgroup-header{margin-bottom:8px}
    .clas-group-label,.clas-subgroup-label{font-size:10px}
    .clas-group-sub{font-size:12px}
    .widget-card{padding:12px;border-radius:10px}
    .widget-num-big{font-size:20px}
    .widget-label{font-size:13px}
    .widget-desc{font-size:12px}
    .widget-tech{font-size:8px}

    /* Historias */
    .historias{padding:48px 16px}
    .hist-subtitle{font-size:14px}
    .hist-grid{grid-template-columns:1fr;gap:10px}
    .hist-card{padding:18px 16px 16px;border-radius:14px}
    .hist-tag{font-size:9px}
    .hist-title{font-size:16px}
    .hist-desc{font-size:12px;margin-top:8px}
    .hist-cta{font-size:13px;margin-top:14px}

    /* Visualizaciones */
    .visualizaciones{padding:48px 16px}
    .vis-subtitle{font-size:14px}
    .vis-grid-simple{grid-template-columns:1fr;gap:10px}
    .vis-card{padding:18px 16px 16px;border-radius:14px}
    .vis-type{font-size:9px;padding:4px 8px}
    .vis-title{font-size:16px}
    .vis-desc{font-size:12px}
    .vis-cta{font-size:13px;margin-top:14px}

    /* Manifiesto */
    .manifiesto{padding:48px 16px}
    .section-tag-light{font-size:10px}
    .manifiesto-title{font-size:clamp(24px,7vw,32px)}

    /* Descargas */
    .descargas{padding:48px 16px}
    .descargas-title{font-size:clamp(24px,7vw,32px)}
    .descargas-formats{flex-wrap:wrap;gap:6px}
    .format-pill{font-size:11px;padding:5px 10px}
    .descargas-link{font-size:14px;margin-top:24px}

    /* Footer */
    footer{padding:24px 16px}
    .footer-org{font-size:9px;letter-spacing:0.08em}
    .footer-right{font-size:9px}
  }
</style>