/* --------------------------------------------------------------------- Cabecera — una sola fila, montada sobre el banner. Reemplaza las dos barras del tema (blanca + verde) por una transparente. --------------------------------------------------------------------- */ .lorca-header { position: relative; z-index: 40; background: #024254; } .lorca-header .header-bottom { background: #024254 !important; border: 0 !important; height: 110px; transition: height .22s ease; } .lorca-header .header-inner-wrap, .lorca-header .navbar { height: 110px; gap: 34px; transition: height .22s ease; } /* Logo: el negativo sobre la foto, el de color cuando la barra se fija */ .lorca-logo img { display: block; height: 54px; width: auto; transition: height .22s ease; } .lorca-logo .lorca-logo-col { display: none; } /* Menú en blanco */ .lorca-header .main-nav .navbar-nav > li > a, .lorca-header .main-nav .nav-link { color: #FFFFFF !important; font-weight: 500; } .lorca-header .main-nav .navbar-nav > li > a:hover { color: #00AEFF !important; } .lorca-header .main-nav { justify-content: center; } /* Botón de WhatsApp */ .lorca-wa { display: inline-flex; align-items: center; gap: 8px; padding: 9px 17px; border-radius: 100px; border: 1.5px solid rgba(255,255,255,.55); color: #FFFFFF !important; font-weight: 600; font-size: 13.5px; white-space: nowrap; transition: background .15s ease, border-color .15s ease; } .lorca-wa:hover { background: rgba(255,255,255,.14); border-color: #FFFFFF; } /* Al hacer scroll la barra se fija: fondo verde y logo a color invertido */ .lorca-header .header-bottom.is-sticky, .lorca-header .header-bottom.sticky-header { background: #024254 !important; box-shadow: 0 2px 18px rgba(0,0,0,.18); } /* El contenido ya no necesita el margen negativo que lo metía bajo la cabecera */ .elementor-element > .elementor-section[style*="margin-top:-120px"] { margin-top: 0 !important; } /* Sin divisiones ni fondos entre los elementos del menú */ .lorca-header .main-nav .navbar-nav > li, .lorca-header .main-nav .navbar-nav > li > a { background: transparent !important; border: 0 !important; box-shadow: none !important; } .lorca-header .main-nav .navbar-nav > li > a:hover, .lorca-header .main-nav .navbar-nav > li:hover > a { background: transparent !important; } .lorca-header .main-nav .navbar-nav > li > a { padding: 0 15px !important; height: auto !important; line-height: 1.2 !important; } .lorca-header .main-nav .navbar-nav { align-items: center; } /* --- barra centrada verticalmente y siempre verde ------------------- */ .lorca-header .header-bottom, .lorca-header .header-inner-wrap, .lorca-header .navbar { display: flex !important; align-items: center !important; } .lorca-header .header-inner-wrap { width: 100%; } .lorca-logo { display: flex; align-items: center; } .lorca-header .main-nav .navbar-nav > li > a { display: flex; align-items: center; } /* La barra fija al hacer scroll también va verde y por encima de todo */ .lorca-header .header-bottom, .lorca-header .header-bottom.is-sticky, .lorca-header .header-bottom.sticky-header, .lorca-header .header-bottom[style*="fixed"], .header-bottom.houzez-sticky { background: #024254 !important; } .lorca-header, .lorca-header .header-bottom { position: relative; z-index: 90; } /* El banner ya no se mete bajo la cabecera */ .n2-section-smartslider, .elementor-section.n2-section-smartslider { margin-top: 0 !important; } .elementor-top-section[style*="margin-top:-120px"], .elementor-element[style*="margin-top:-120px"] { margin-top: 0 !important; } /* La barra fija tiene que quedar SIEMPRE por encima del banner. Smart Slider crea su propio contexto de apilado, así que hay que subir la cabecera y bajar el banner de forma explícita. */ .lorca-header { z-index: 9999 !important; } .lorca-header .header-bottom, .lorca-header .header-bottom.sticky-nav-area, .lorca-header .header-bottom.houzez-in-view { z-index: 9999 !important; } .n2-section-smartslider, #n2-ss-57 { z-index: 1 !important; } .houzez-search-builder-wrapper { z-index: 2 !important; } /* --- submenús ------------------------------------------------------ */ /* Los ítems ocupan todo el alto de la barra, para que el submenú se despliegue justo desde el borde inferior y no desde el texto. */ .lorca-header .main-nav .navbar-nav > li { position: relative; height: 110px; display: flex; align-items: center; } .lorca-header .main-nav .navbar-nav > li > a { height: 110px !important; } .lorca-header .navbar-nav > li > .sub-menu, .lorca-header .navbar-nav > li > .dropdown-menu { top: 100% !important; margin-top: 0 !important; border-top: 3px solid #FE4015; box-shadow: 0 12px 30px rgba(2, 66, 84, .22); } /* Por encima del filtro y de cualquier cosa del banner */ .lorca-header .sub-menu, .lorca-header .dropdown-menu { z-index: 10000 !important; } .lorca-header .header-bottom, .lorca-header .header-inner-wrap, .lorca-header .navbar, .lorca-header .main-nav, .lorca-header .navbar-nav { overflow: visible !important; } /* --- corrige el parpadeo del submenú ------------------------------- El tema los declara `position: fixed; left: 0` y luego los recoloca con JavaScript: por eso aparecían un instante pegados a la izquierda. Anclándolos al propio ítem, nacen ya en su sitio y no hay salto. El !important es necesario para ganarle al estilo en línea del script. */ .lorca-header .navbar-nav > li > .sub-menu, .lorca-header .navbar-nav > li > .dropdown-menu { position: absolute !important; left: 0 !important; right: auto !important; top: 100% !important; } /* El último ítem abre hacia la izquierda para no salirse de la pantalla */ .lorca-header .navbar-nav > li:last-child > .sub-menu, .lorca-header .navbar-nav > li:last-child > .dropdown-menu { left: auto !important; right: 0 !important; } /* --- dos alturas ----------------------------------------------------- Arriba del todo la barra es alta y el logo grande. Al hacer scroll Houzez le añade .sticky-nav-area: ahí vuelve a la medida compacta, para no comerse pantalla mientras se navega. */ .lorca-header .header-bottom.sticky-nav-area { height: 78px; } .lorca-header .header-bottom.sticky-nav-area .header-inner-wrap, .lorca-header .header-bottom.sticky-nav-area .navbar { height: 78px; } .lorca-header .header-bottom.sticky-nav-area .lorca-logo img { height: 38px; } .lorca-header .header-bottom.sticky-nav-area .main-nav .navbar-nav > li, .lorca-header .header-bottom.sticky-nav-area .main-nav .navbar-nav > li > a { height: 78px !important; } /* Con la barra más alta el contenido se envolvía y el botón de WhatsApp caía a una segunda línea. La fila no se parte. */ .lorca-header .navbar, .lorca-header .header-inner-wrap { flex-wrap: nowrap !important; } .lorca-header .main-nav { min-width: 0; } .lorca-logo, .lorca-wa { flex: 0 0 auto; } /* Costura de 1 px entre la barra y el banner. En vez de perseguirla con márgenes negativos (que se descalibran al cambiar el alto de la barra), se pinta 1 px de verde justo debajo: si algún día vuelve a aparecer un hueco, queda tapado. */ .lorca-header .header-bottom { box-shadow: 0 1px 0 0 #024254; } /* --- móvil ---------------------------------------------------------- */ /* La barra blanca con teléfono y sucursales también sale en móvil: ya está el botón de WhatsApp y el menú desplegable. */ .header-v2-mobile { display: none !important; } /* La barra móvil hereda el verde y el logo negativo */ .header-mobile, .header-mobile-wrap, .houzez-mobile-header { background: #024254 !important; } .header-mobile .logo img, .header-mobile-wrap .logo img { height: 34px !important; width: auto !important; } /* --- la cabecera se comprime entre 992 y 1340 ----------------------- Arriba de 1340 va a tamaño completo; bajo 992 manda la hamburguesa. En medio, cada pieza encoge de forma continua con clamp() para que el menú y el botón de WhatsApp quepan sin salirse de la pantalla. */ @media (min-width: 992px) and (max-width: 1340px) { .lorca-header .header-bottom, .lorca-header .header-inner-wrap, .lorca-header .navbar { height: clamp(84px, 8.4vw, 110px); } .lorca-header .main-nav .navbar-nav > li, .lorca-header .main-nav .navbar-nav > li > a { height: clamp(84px, 8.4vw, 110px) !important; } .lorca-logo img { height: clamp(36px, 3.6vw, 54px); } .lorca-header .navbar { gap: clamp(12px, 1.6vw, 34px); } .lorca-header .main-nav .navbar-nav > li > a { padding: 0 clamp(6px, 0.85vw, 15px) !important; font-size: clamp(12.5px, 1.06vw, 14.5px) !important; } .lorca-wa { padding: 8px clamp(10px, 1.1vw, 17px); font-size: clamp(12px, 1vw, 13.5px); gap: 6px; } .lorca-wa svg { width: 15px; height: 15px; } /* la barra fija sigue siendo la compacta */ .lorca-header .header-bottom.sticky-nav-area, .lorca-header .header-bottom.sticky-nav-area .header-inner-wrap, .lorca-header .header-bottom.sticky-nav-area .navbar, .lorca-header .header-bottom.sticky-nav-area .main-nav .navbar-nav > li, .lorca-header .header-bottom.sticky-nav-area .main-nav .navbar-nav > li > a { height: 78px !important; } .lorca-header .header-bottom.sticky-nav-area .lorca-logo img { height: 34px; } } /* --- 1. los ítems del menú van centrados dentro de su espacio ------- La lista ocupa todo el ancho disponible, así que centrar el