Responsive Design

La misma web tiene que verse bien en el celular de alguien parado en el subte y en el monitor 27″ de la oficina. Eso es responsive design: el diseño se adapta al ancho de la pantalla en lugar de quedar fijo. No hacés tres webs distintas: hacés una sola que se reacomoda.

Para una campaña de IEB esto no es un lujo: si el anuncio sale en Instagram, casi todo el que clickea entra desde el teléfono. Una landing que en mobile se ve apretada, con texto chiquito y botones imposibles de tocar, quema plata de pauta.

Abajo está embebida la home de este mismo hub. Movés el slider o tocás los botones de dispositivo y mirás cómo se reacomoda todo: la grilla de módulos pasa de varias columnas a una sola, los espacios cambian, el texto se reordena. Es el concepto entero en un solo widget.

Un breakpoint es un ancho de pantalla en el que el diseño cambia de comportamiento. Por debajo de ese ancho se ve de una forma; por encima, de otra. Tailwind (el sistema de estilos que usa la IA en este stack) trae cinco breakpoints estándar, y conviene que te suenen los nombres porque la IA los usa al hablarte:

base   →  0px      (mobile, el default — sin prefijo)
sm:    →  640px    teléfono grande / horizontal
md:    →  768px    tablet
lg:    →  1024px   laptop
xl:    →  1280px   monitor de escritorio

Jugá con el laboratorio: arrastrá el ancho y mirá cuál breakpoint se “enciende” y cómo se reordena la mini-landing (menú, columnas):

Mobile-first quiere decir: diseñás primero la versión chica (la más restringida, la más usada) y después vas agregandocosas a medida que hay más espacio. No al revés. Suena obvio, pero la mayoría de la gente piensa al revés —diseña lindo en la compu y después “ve qué hace en el celu”— y ahí es donde todo se rompe.

La ventaja práctica: si la versión mobile está bien (una columna, todo claro, botón grande), la de escritorio casi siempre es solo “poné esto en 2 o 3 columnas y dale más aire”. El camino difícil es el otro.

grid-cols-1   md:grid-cols-2   lg:grid-cols-3
└─ mobile      └─ desde tablet    └─ desde laptop
   1 columna      2 columnas         3 columnas

Se lee: "arrancá en 1 columna; a partir de 768px pasá a 2;
a partir de 1024px pasá a 3". Mobile-first puro.

Acá está el oro de este módulo. No vas a escribir CSS: vas a pedir. La clave es nombrar qué pantalla y qué comportamiento querés. Empezá pidiendo que todo arranque responsive desde el principio:

Construí la landing de {{campaña/producto}} con enfoque mobile-first.
Tiene que verse perfecta en celular, tablet y escritorio.
Usá los breakpoints de Tailwind (sm/md/lg/xl).
Botones y campos cómodos de tocar con el dedo en mobile (mínimo 44px de alto).
No me muestres código hasta que el diseño esté definido.

Cuando algo no se ve bien en una pantalla puntual, no digas “está feo”: decile en qué dispositivo y qué querés que pase. Estos son los pedidos que vas a repetir todo el tiempo:

En mobile el menú de navegación está amontonado y no entra.
Que abajo de md (768px) el menú colapse en un botón hamburguesa que abre
un panel lateral, y que de md para arriba se muestre la barra horizontal completa.

La sección de {{beneficios/features}} usa 3 columnas y en el celular queda ilegible.
Que en mobile se apile en 1 sola columna, en tablet (md) pase a 2 columnas
y recién en laptop (lg) muestre las 3.

En el hero quiero el texto a la izquierda y la imagen a la derecha,
pero solo en escritorio. En mobile que se apilen: primero el título y el CTA,
después la imagen abajo. Centrá el texto en mobile y alinealo a la izquierda en desktop.

El título del hero es enorme en el celular y desborda.
Que el tamaño del título sea más chico en mobile y vaya creciendo en pantallas
más grandes (tipografía responsive). Lo mismo con el espaciado de las secciones:
menos aire en mobile, más aire en desktop.

En mobile la barra lateral de filtros ocupa demasiado.
Ocultala en mobile y mostrala con un botón "Filtros" que abra un panel.
De lg (1024px) para arriba, que la barra de filtros quede fija y visible a la izquierda.

Aunque la IA hace responsive por defecto, estos cuatro problemas se cuelan seguido. Aprendé a reconocerlos a ojo y a pedir el arreglo con una frase:

1. Texto microscópico en el celular
   → "Agrandá el cuerpo de texto en mobile, mínimo 16px."

2. Botón/menú imposible de tocar con el dedo
   → "Hacé los botones más altos y separados en mobile (target táctil 44px)."

3. Algo se sale de la pantalla / scroll horizontal feo
   → "Hay scroll horizontal en mobile. Asegurate de que nada desborde
      el ancho de la pantalla; usá ancho 100% y que las imágenes no se pasen."

4. Tabla gigante que en mobile no entra
   → "En mobile convertí la tabla en tarjetas apiladas (una por fila),
      y dejá la tabla normal de md para arriba."

Y la prueba final no la hace la IA: la hacés vos. Abrí la web en tu propio celular o usá el modo responsive del navegador (clic derecho → Inspeccionar → ícono de teléfono). Si entra cómodo en tu mano, está bien.

Pasá esta lista por cualquier landing o dashboard antes de publicarlo. Si todos los casilleros están tildados, tu web está lista para cualquier pantalla: