pernocta

Patrones

Explorar · escritorio

Lista y mapa conviven: la rejilla de tarjetas a la izquierda (3 columnas en ≥ 1280 px) y el mapa fijo a la derecha. Cabecera con buscador compacto y barra de categorías fija bajo ella.

Composición#

Reglas de layout#

Comportamiento por ancho de pantalla.
  • ≥ 1024 px · lista + mapa lado a lado (mapa 40 %, sticky bajo la cabecera).
  • 768–1023 px · solo lista en 2 columnas; botón flotante “Mostrar mapa”.
  • Hover en tarjeta · su marcador se activa en el mapa (negro, escala 1,25).
  • Mover el mapa · la lista se filtra por la zona visible (bbox) con debounce de 300 ms.