/* ========================================================================== PÁGINA DE BÚSQUEDAS (plantilla "busquedas-2+2" / URL "/familias") Reserva de alturas para evitar Cumulative Layout Shift (CLS). Todo el archivo está scopeado con la clase ".busquedas", presente únicamente en el de xsl/themes/default/content/busquedas-2+2.xsl, por lo que no afecta a ninguna otra plantilla del proyecto. Se registra como CSS de precarga (carpeta "preload/") para que se aplique antes del primer render y así reserve espacio desde el principio, evitando el salto de layout cuando los bloques reales (texto de introducción, mapa interactivo diferido, slider de habitaciones) terminan de cargar o hidratarse. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TEXTO DE INTRODUCCIÓN (xsl/_common/intro-text/only-text.xsl) CLS ~0,066: el bloque de subtítulo + párrafo aparece tarde y empuja el contenido inferior. Reservamos una altura mínima aproximada a la que ocupa el subtítulo (1 línea) + el párrafo de descripción (2-3 líneas en desktop pequeño, más líneas en mobile por el wrapping). -------------------------------------------------------------------------- */ .busquedas .services-section .only-text-block__description { min-height: 10rem; /* ~160px: subtítulo + párrafo en desktop pequeño (992-1920px) */ } /* -------------------------------------------------------------------------- 2. SLIDER DE HABITACIONES (xsl/_common/rooms-list.xsl) Aísla el layout/pintado de cada slide para que las variaciones de contenido interno (imagen, texto, hover) no fuercen un reflow del resto del slider mientras Slick lo hidrata. -------------------------------------------------------------------------- */ .busquedas .have-more-slider__slide { contain: layout paint; } /* -------------------------------------------------------------------------- 3. MAPA INTERACTIVO (xsl/_common/global-map-interactive.xsl) CLS ~0,318: interactive-map.css ahora se carga en diferido (rel="preload" + onload, ver xsl/_common/template/head.xsl) solo en esta plantilla. Reservamos aquí, en un CSS que sí bloquea el render, la MISMA altura que define interactive-map.css para desktop pequeño (65vh) de modo que no haya salto quando esa hoja de estilos termine de aplicarse. -------------------------------------------------------------------------- */ .busquedas .global-map-interactive #interactive-map, .busquedas .global-map-interactive .leafletMap { min-height: 65vh; /* igual que #interactive-map en interactive-map.css (desktop pequeño) */ } /* ========================================================================== RESPONSIVE: TABLET Y MÓVIL (< 992px) ========================================================================== */ @media (max-width: 991px) { .busquedas .services-section .only-text-block__description { min-height: 14rem; /* ~224px: en mobile el párrafo envuelve en más líneas */ } .busquedas .global-map-interactive #interactive-map, .busquedas .global-map-interactive .leafletMap { min-height: 21.875rem; /* 350px, igual que interactive-map.css en mobile */ } } /* ========================================================================== RESPONSIVE: DESKTOP GRANDE (> 1920px) ========================================================================== */ @media (min-width: 1921px) { .busquedas .services-section .only-text-block__description { min-height: 11rem; /* contenedor algo más ancho, ligero margen extra */ } .busquedas .global-map-interactive #interactive-map, .busquedas .global-map-interactive .leafletMap { min-height: 37.5rem; /* 600px, igual que interactive-map.css en desktop grande */ } }