/* ============================================================ Blue Foundations — header y footer globales Se aplican sobre las plantillas del Divi Theme Builder. Las clases se asignan desde Advanced > CSS Class de cada módulo; ninguna depende de IDs generados por Divi, así que rehacer un módulo no rompe el estilo. ============================================================ */ /* ------------------------------------------------------------ HEADER ------------------------------------------------------------ */ .bf-header{ background:#fff; box-shadow:0 1px 0 rgba(2,14,50,.07); } /* ------------------------------------------------------------ HEADER FIJO El sticky va en `.et-l--header`, el

que envuelve la plantilla del Theme Builder, y no en la sección: una caja `position:sticky` solo se desplaza dentro de su contenedor, y la sección mide exactamente lo mismo que el header, así que ahí no tendría recorrido. `.et-l--header` cuelga de `.et-boc`, que abarca toda la página. Comprobado en el sitio el 2026-09-01: ningún ancestro recorta el overflow —requisito para que sticky funcione— y el borde superior del header se mantiene en 0 con la página desplazada a 1600, 2400 y 3200 px. ------------------------------------------------------------ */ .et-l--header{ position:sticky; top:0; z-index:9999; background:#fff; box-shadow:0 1px 0 rgba(2,14,50,.07), 0 6px 20px rgba(2,14,50,.06); } /* Con la barra de administración de WordPress el header quedaría por debajo. Solo lo ven los usuarios conectados, pero es el estado en el que trabaja el cliente. */ .admin-bar .et-l--header{ top:32px; } @media screen and (max-width:782px){ .admin-bar .et-l--header{ top:46px; } } @media screen and (max-width:600px){ .admin-bar .et-l--header{ top:0; } } /* Con el header fijo, un ancla llevaría el destino justo debajo de él. `scroll-padding-top` reserva su altura más un respiro. */ html{ scroll-padding-top:96px; } @media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } } /* ------------------------------------------------------------ SIN DESPLEGABLES Decisión del cliente (2026-09-01): Services y Solutions llevan directamente a su página, sin submenú. Esto es la red de seguridad visual; lo correcto es borrar los ítems hijos en Apariencia → Menús para que no queden en el marcado. Los ocho anclas de cada página siguen siendo alcanzables desde el footer y desde las tarjetas. ------------------------------------------------------------ */ .bf-header .et_pb_menu__menu > nav > ul > li > ul.sub-menu, .bf-header .et_mobile_menu .sub-menu{ display:none !important; } .bf-header .et_pb_menu__menu > nav > ul > li.menu-item-has-children > a{ padding:6px 0 !important; /* ya no hace falta hueco para la flecha */ } .bf-header .et_pb_menu__menu > nav > ul > li.menu-item-has-children > a::after{ display:none !important; content:none !important; } /* ------------------------------------------------------------ Cabecera: logo y alineación del menú El contenedor del módulo Menu no está forzado a una sola fila, así que con el logo a 52px el menú se partía en dos filas. Se fija el contenedor como flex, se reduce el logo y el menú se ancla a la derecha. ------------------------------------------------------------ */ .bf-header .et_pb_menu_inner_container{ display:flex; align-items:center; flex-wrap:nowrap; /* una sola fila, pase lo que pase */ } .bf-header .et_pb_menu__logo-wrap{ flex:0 0 auto; margin-right:30px; } .bf-header .et_pb_menu__logo{ display:flex; align-items:center; } /* Altura del logo del header. Para cambiarla, solo esta línea. 44px ≈ 173px de ancho con la proporción 902×230 del archivo. */ :root{ --bf-header-logo-h:44px; } /* El !important no es pereza. El módulo Menu de Divi no expone un control de tamaño para el logo, y Divi emite en el esta regla propia para este módulo concreto: .et_pb_menu_0_tb_header .et_pb_menu_inner_container > .et_pb_menu__logo-wrap .et_pb_menu__logo img { height:auto; max-height:none; } Misma especificidad que la nuestra (cuatro clases + elemento) y además va después, porque es un