# VISUAL_QA_CHECKLIST

## Objetivo

Validar que la implementacion frontend coincida con Figma y que funcione correctamente dentro del proyecto real.

## Alcance inicial

Checklist base para `Home`.

## Paridad visual con Figma

Revisar por cada seccion:

- jerarquia tipografica
- espaciados verticales y horizontales
- tamanos relativos de bloques
- orden visual de contenido
- alineaciones
- imagenes, fondos, overlays y radios
- CTAs y enlaces

## Responsive

Validar al menos:

- mobile
- tablet
- desktop

Preguntas minimas:

- se rompe alguna fila o grid
- se corta algun texto
- el hero sigue siendo legible
- los CTA siguen visibles
- el orden de secciones tiene sentido

## Integracion con PHP y contenido real

Confirmar:

- la vista sigue renderizando con el controlador actual
- las variables dinamicas no generan warnings o bloques vacios rotos
- textos largos no descuadran cards o secciones
- links reales siguen apuntando a rutas correctas

## Componentes compartidos

Si el Home toca elementos globales, revisar:

- header
- nav
- footer
- estilos de botones compartidos
- contenedores comunes

## Interaccion

Validar:

- hover de botones y links
- focus visible
- transiciones discretas, no excesivas
- accesibilidad basica visual

## Calidad visual minima

No cerrar una implementacion si ocurre alguno de estos problemas:

- diferencias visuales evidentes contra Figma
- spacing inconsistente entre secciones
- contenido desbordado
- CTA poco visibles
- footer o header con estilos viejos que choquen con el nuevo Home

## Criterio de aprobado

Una seccion del Home se considera lista cuando:

- coincide razonablemente con Figma
- funciona en responsive
- soporta contenido real
- no rompe layout compartido
- y no introduce deuda visual nueva