El diseño de Astral no se «achica» en móvil — se reorganiza. El hero de desktop con gradiente expansivo se convierte en un canvas vertical donde el texto flota sobre la nebulosa. El grid de 4 productos se vuelve carrusel táctil. El sidebar del portal se esconde en un drawer deslizable.
Mobile-first: diseñar para el dedo primero
La clave está en pensar mobile-first: diseña para el dedo primero, para el mouse después. Los botones deben ser mínimo 44px de alto. Los textos, mínimo 16px para evitar zoom automático en inputs.
Breakpoints del universo Astral:
- Móvil: < 640px — una columna, todo apilado, navegación hamburguesa
- Tablet: 640px–1024px — dos columnas, sidebar colapsable
- Desktop: > 1024px — grid completo, sidebar visible, hero expansivo
La magia no se reduce. Se transforma. Como una estrella que se ve diferente desde cada punto del universo, pero sigue siendo la misma estrella.