argendata

Todo el primer fold, sin cambio de fondo. Título, buscador, accesos rápidos y las seis tarjetas comparten el mismo #F4F4F4 y la misma animación de burbujas, así que la home se lee como una sola pantalla y no como tres bandas apiladas. En 1440×900 y en 1366×768 entra completa sin scroll.

La animación es la del sitio actual, no una nueva: 20 burbujas de #E7E7E7, tamaños entre 30 y 90 px, opacidades al azar, subiendo en un ciclo de 30 s. Acá está reescrita para quedar contenida dentro del fold (en producción el contenedor es position: fixed a viewport completo). Se apaga con prefers-reduced-motion.

El buscador es la acción primaria: un solo campo, sin filtros previos. El autocompletado muestra el tema, su tópico y cuántos gráficos contiene — lo que el público general necesita para saber si ese es su tema, y lo que el perfil de investigación necesita para medir el alcance antes de entrar.

Los chips quedaron sin rótulo, apoyados solo en su forma: son el atajo de quien no sabe qué buscar y van directo al gráfico. Alimentarlos con lo más visto del trimestre.

Los seis tópicos salen del popup. Hoy la taxonomía vive en un overlay y en bandas negras a pantalla completa: no se pueden comparar las seis ramas de un vistazo ni ver qué hay adentro de cada una.

Cada card adelanta los temas que contiene, porque el nombre de la categoría solo no alcanza para decidir: “Desarrollo” no le anticipa a nadie que ahí adentro está pobreza. El conteo de temas es la señal de profundidad; los subtemas son el vocabulario que el lector reconoce.

La flecha es la misma del sitio (fa-arrow-right rotada −45°, #A9B8B8) y ahora se desplaza en diagonal al pasar el mouse. En hover la card invierte a negro, reutilizando el recurso gráfico que el sitio ya usa.

Fuentes, metodología, descarga y fecha de actualización suben al primer fold. Hoy solo aparecen en el footer o adentro de cada informe, y son la primera pregunta de quien va a citar el dato.

↓ El resto de la home continúa sin cambios: “Sobre Argendata”, mapa, newsletter y footer.

Para el equipo de desarrollo. Tipografías y colores son los del sitio en producción: Aktiv Grotesk (declarada primero en el stack; en este boceto se ve Archivo como sustituta) y Noto Serif itálica en “entender” y en la línea de crédito. Paleta: #000000, #333333, #1779BD, #7BAFBE, #F4F4F4, #A9B8B8 y #E7E7E7 para las burbujas.

Sin bordes redondeados salvo los chips, sin sombras: el sistema actual es de filetes de 1 px y bandas planas. La grilla usa gap: 1px sobre fondo gris para dibujar las divisiones con un solo filete compartido.

Puntos de quiebre: 6 columnas ≥1080 px · 3 columnas <1080 px · 2 columnas <620 px (ahí se ocultan los subtemas y el nav colapsa en “Tópicos”). El layout está escrito con container queries, por eso el artboard mobile de abajo reusa exactamente el mismo markup.

El botón dice “Ver investigación” y el destino es la sección del tema. El autocompletado acá está simulado con una lista estática de 27 entradas: en producción necesita un endpoint de búsqueda sobre títulos de temas e informes, con el conteo de gráficos por tema.