Vida útil
Estimación teórica de la durabilidad del alimento mediante el análisis de factores de deterioro, predicción de estabilidad microbiológica y barreras de conservación aplicadas.
Adaptar un esqueleto de referencia (grilla tipo 'bento' con múltiples columnas) a un layout mobile-first de una sola columna, priorizando legibilidad y jerarquía sobre densidad de información.
Breakpoints activos en el sistema de grilla
Proceso de desarrollo
Auditoría del esqueleto original
Se identificaron los patrones reutilizables: hero apilado, chips de filtro, cards con número de fondo, carrusel con peek.
Simplificación a una columna
El grid de 2-3 columnas del original se convirtió en una columna única en mobile y tablet, priorizando el scroll vertical.
Sistema de espaciado
Se definió un espaciado vertical constante entre secciones (`--section-gap: 120px`) para dar ritmo de lectura.
Breakpoints
Mobile-first estricto: base sin prefijo, ajustes en `md:` (768px) y refinamientos puntuales en `lg:` (1024px).
Registro fotográfico
Placeholders visuales — el registro fotográfico real de esta consigna se suma en la entrega final del dossier.
Una sola columna reduce la carga cognitiva en mobile — el dispositivo principal de consumo de esta categoría de producto — sin perder la posibilidad de horizontalidad en los carruseles.