/* ============================================================================ * CABECERA 2026 — toda la web RUFI 18/10/26 * ---------------------------------------------------------------------------- * Mismo menú y mismo mega menú de siempre (includes/header.php), con el aspecto de * la propuesta del cliente que se estrenó en la portada (12/10/26). * * DÓNDE SE CARGA: includes/head.php (todas las páginas que lo usan) y, a mano, en * las páginas con propio (idi.php). Va DESPUÉS de las hojas del tema. * ÁMBITO: todo cuelga de la clase .cab-2026 que pone includes/header.php en *
. Antes colgaba de body.h26-page (solo * la portada) y vivía en css/home-2026.css; se movió aquí al extenderla a toda la * web. ".main-header.cab-2026" pesa lo mismo que ".h26-page .main-header", así que * las reglas ganan y pierden exactamente igual que en la portada. * * · Logo a la IZQUIERDA como en la propuesta. La barra de escritorio es una * fila flex de tres columnas (menú izq. · logo · menú dcha.); se reordena con * "order", sin mover HTML. La columna del menú izquierdo sigue siendo * position-static: de ella cuelga el mega menú. * · "Profesionales" (va a /acceso) toma la forma del botón "Área profesional" * de la propuesta: es lo mismo. "Pedir presupuesto" es el botón negro. * · Los !important son a propósito: el HTML lleva utilidades de Bootstrap * (py-xl-5, px-xl-4, mx-xl-n4, mx-auto, pr-3, border-0, shadow, bg-white) que * ya son !important. Sin ellos no se pueden corregir. * ========================================================================== */ /* Reglas del menú que viven en css/style.css y que la cabecera necesita SIEMPRE. Repetidas aquí a propósito (18/10/26): idi.php tiene propio y no carga style.css; sin ellas salían las flechas del tema tras Catálogo, Contract, Fábrica y Contacto, cada enlace crecía 15-19 px y a 1220 px "Pedir presupuesto" se salía 12 px. En las demás páginas no cambian nada: son las mismas reglas que ya aplicaba style.css. */ .main-header.cab-2026 .nav-item.dropdown > a.dropdown-toggle::after { display: none !important; } .main-header.cab-2026 .dropdown-link { min-width: 120px; } .main-header.cab-2026 .dropdown-link.d-flex { align-items: center; gap: 12px; } .main-header.cab-2026 .dropdown-menu-listing .col-2 { max-width: 175px; } .main-header.cab-2026 .browse-categories-dropdown:hover > .dropdown-menu { display: none; pointer-events: none; } /* barra superior: línea fina de la propuesta */ .main-header.cab-2026 .topbar-border { border-bottom: 1px solid #ececec; } /* barra de marcas de la propuesta (includes/header.php): Romero / ROCO a la izquierda, teléfono y correo a la derecha; en móvil solo marcas. */ .cab-2026 .topbar-2026 { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 40px; font-size: .78rem; font-weight: 400; } .cab-2026 .topbar-2026 a { color: #9a9a9a; text-decoration: none; white-space: nowrap; } .cab-2026 .topbar-2026 a:hover { color: #0f0f0f; } .cab-2026 .topbar-2026 .on { color: #0f0f0f; font-weight: 500; } .cab-2026 .topbar-2026-marcas, .cab-2026 .topbar-2026-contacto { display: flex; gap: 26px; } @media (max-width: 767.98px) { .cab-2026 .topbar-2026 { justify-content: center; height: 36px; } .cab-2026 .topbar-2026-marcas { gap: 16px; } .cab-2026 .topbar-2026-contacto { display: none; } } @media (max-width: 374.98px) { .cab-2026 .topbar-2026 { font-size: .7rem; } } /* barra principal: blanca translúcida con desenfoque y línea fina abajo */ .main-header.cab-2026 .sticky-area, .main-header.cab-2026 .sticky-area.bg-white { background-color: rgba(255, 255, 255, .92) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid #ececec; } .main-header.cab-2026 .navbar-nav .nav-link { font-family: Poppins, system-ui, sans-serif; font-size: .93rem; font-weight: 400; color: #0f0f0f; transition: opacity .2s; } .main-header.cab-2026 .navbar-nav .nav-link:hover, .main-header.cab-2026 .navbar-nav .nav-link:focus { opacity: .55; } .main-header.cab-2026 .navbar-nav .nav-link:focus-visible { outline: 2px solid #0f0f0f; outline-offset: 4px; opacity: 1; } /* desplegables: mismo contenido y posición; esquinas y sombra de la propuesta */ .main-header.cab-2026 .dropdown-menu { border: 1px solid #ececec !important; border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .08) !important; } .main-header.cab-2026 .dropdown-menu-xl { border-radius: 0 0 22px 22px; border-top: 0 !important; } .main-header.cab-2026 .dropdown-menu .dropdown-item, .main-header.cab-2026 .dropdown-menu .dropdown-link { font-size: .9rem; font-weight: 400; color: #0f0f0f; } @media (min-width: 1200px) { /* Barra de ALTURA FIJA (78 px, la de la propuesta) y todo estirado a esa altura. Primero se intentó cuadrar con rellenos y no salía: cada enlace mide distinto (26 px los de texto, 28 "Catálogo" por su icono, 42 los que traen el relleno de Bootstrap) y la barra quedaba en 98 y luego en 84. Estirando, da igual lo que mida cada uno, y además cada
  • ocupa los 78 px enteros: los desplegables abren al pasar el ratón sobre el
  • , así que no queda hueco donde se pierda. */ .main-header.cab-2026 .navbar.row { flex-wrap: nowrap; height: 78px; } .main-header.cab-2026 .navbar.row > :nth-child(1), .main-header.cab-2026 .navbar.row > :nth-child(3) { align-self: stretch; display: flex; } .main-header.cab-2026 .navbar-right { align-self: stretch; display: flex; } .main-header.cab-2026 .navbar.row .navbar-nav { align-self: stretch; align-items: stretch; } /* orden: logo · menú izquierdo · (hueco) · menú derecho */ .main-header.cab-2026 .navbar.row > :nth-child(2) { /* logo */ order: 0; flex: 0 0 auto; width: auto; max-width: none; justify-content: flex-start !important; } .main-header.cab-2026 .navbar.row > :nth-child(1) { /* Catálogo · Contract · Fábrica · Blog */ order: 1; flex: 0 0 auto; width: auto; max-width: none; margin-left: 44px; } .main-header.cab-2026 .navbar.row > :nth-child(3) { /* Contacto · iconos · botones */ order: 2; flex: 1 1 auto; width: auto; max-width: none; } /* Logo del tamaño de la propuesta. logo.png mide 328×78 con márgenes transparentes (la tinta ocupa 300×54): a 24 px de alto, como ponía la propuesta, las letras se quedaban en 92 px de ancho; la propuesta usaba otro fichero recortado al borde y se veían a 132. A 34 px de alto las letras miden ~131×24, como en la muestra. */ .main-header.cab-2026 .navbar-brand img { height: 34px; width: auto; } .main-header.cab-2026 .main-menu { margin-left: 0 !important; margin-right: 0 !important; } /* cada
  • : a toda la altura, enlace centrado; el espacio entre ellos, aquí. display:flex con !important: al pasar el ratón el tema añade .show al
  • y algo le pone display:block; perdía el centrado y el texto SALTABA hacia arriba (medido: de 67 a 41 px). Lo vio Rufi en el hover de "Fábrica". :not(.d-none) es OBLIGATORIO: hay un "Blog" desplegable antiguo oculto con d-none (que también es !important) y, sin excluirlo, esta regla lo volvía a mostrar. */ .main-header.cab-2026 .navbar.row .navbar-nav > .nav-item:not(.d-none) { display: flex !important; align-items: center; padding: 0 18px !important; } /* Relleno CERO en todos los enlaces (los cuatro lados): el espacio lo pone el
  • . Unos traen pr-3/px-3 de Bootstrap y otros p-0, así que salían desiguales: medido, "Blog" ocupaba 68 px de ancho para una palabra de 30, y Blog, Buscador y los iconos medían 42 px de alto (el .5rem vertical de .nav-link) frente a los 26 de Contract y Fábrica, lo que estiraba la barra a 98 px en vez de 78. */ .main-header.cab-2026 .navbar.row .navbar-nav > .nav-item > .nav-link { padding: 0 !important; } /* Agrupar como la propuesta: los textos seguidos tras el logo (Catálogo · Contract · Fábrica · Blog · Contacto) y al fondo, en este orden, lupa · favoritos · "Profesionales" · "Pedir presupuesto", para que la barra acabe en los dos botones igual que la muestra. El HTML los trae en otro orden; se recolocan con "order". */ .main-header.cab-2026 .navbar.row > :nth-child(3) { justify-content: flex-start !important; } .main-header.cab-2026 .navbar-right { flex: 1 1 auto; } .main-header.cab-2026 .navbar-right > .navbar-nav { width: 100%; flex-wrap: nowrap !important; justify-content: flex-start !important; } .main-header.cab-2026 .navbar-right .nav-item:has(> .nav-link[href="#search-popup"]) { order: 1; margin-left: auto; } .main-header.cab-2026 .navbar-right .nav-item:has(> .nav-link[href$="/favoritos"]) { order: 2; } .main-header.cab-2026 .navbar-right .nav-item:has(> .nav-link[href$="/acceso"]) { order: 3; } .main-header.cab-2026 .navbar-right .nav-item:has(> .nav-cta-presupuesto) { order: 4; } /* entre los dos botones, 12 px como en la propuesta (no los 36 de los textos) */ .main-header.cab-2026 .navbar.row .navbar-right .nav-item:has(> .nav-link[href$="/acceso"]) { padding-right: 6px !important; } .main-header.cab-2026 .navbar.row .navbar-right .nav-item:has(> .nav-cta-presupuesto) { padding-left: 6px !important; padding-right: 0 !important; } /* "Pedir presupuesto" → botón negro de la propuesta */ .main-header.cab-2026 .navbar.row .navbar-nav > .nav-item > .nav-cta-presupuesto { display: inline-flex; align-items: center; height: 42px; padding: 0 20px !important; border-radius: 999px; background: #0f0f0f; color: #fff; font-size: .85rem; font-weight: 500; white-space: nowrap; } .main-header.cab-2026 .navbar-nav .nav-cta-presupuesto:hover, .main-header.cab-2026 .navbar-nav .nav-cta-presupuesto:focus { opacity: 1; background: #333; color: #fff; } /* "Profesionales" → botón de borde, como "Área profesional" de la propuesta. Selector más largo a propósito: tiene que ganar a la regla de relleno cero. */ .main-header.cab-2026 .navbar.row .navbar-nav > .nav-item > .nav-link[href$="/acceso"] { display: inline-flex; align-items: center; height: 42px; padding: 0 20px !important; border: 1px solid currentColor; border-radius: 999px; font-size: .85rem; font-weight: 500; } .main-header.cab-2026 .navbar-nav .nav-link[href$="/acceso"]:hover { opacity: 1; background: rgba(0, 0, 0, .04); } } /* Entre 1200 y 1399 el menú entero tiene que caber en una línea: menos aire. */ @media (min-width: 1200px) and (max-width: 1399.98px) { .main-header.cab-2026 .navbar.row .navbar-nav > .nav-item { padding-left: 12px !important; padding-right: 12px !important; } .main-header.cab-2026 .navbar.row > :nth-child(1) { margin-left: 28px; } } /* Móvil y tableta: logo a la izquierda; "Pedir presupuesto", lupa y menú a la derecha, como la propuesta. El panel lateral del menú es el mismo de siempre. */ @media (max-width: 1199.98px) { /* nowrap: Bootstrap deja que la barra salte de línea y, por debajo de ~352 px, la lupa y el menú bajaban a una segunda fila (medido a 344 y 320 px, 18/10/26). */ .main-header.cab-2026 .d-xl-none .navbar { min-height: 64px; flex-wrap: nowrap; } .main-header.cab-2026 .d-xl-none .navbar-brand { order: 0; margin-left: 0 !important; margin-right: auto !important; } /* mismo motivo que en escritorio (márgenes del PNG): 28 px de alto = letras de ~108 px */ .main-header.cab-2026 .d-xl-none .navbar-brand img { height: 28px; width: auto; } .main-header.cab-2026 .d-xl-none .nav-cta-presupuesto { order: 1; margin-right: 14px; } .main-header.cab-2026 .d-xl-none .nav-search { order: 2; margin-right: 16px; } .main-header.cab-2026 .d-xl-none .navbar-toggler { order: 3; } .main-header.cab-2026 .nav-cta-presupuesto--movil { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: #0f0f0f; color: #fff; font-size: .78rem; font-weight: 500; white-space: nowrap; } .main-header.cab-2026 .nav-cta-presupuesto--movil:hover { color: #fff; background: #333; text-decoration: none; } } /* En los móviles más estrechos no cabe "Pedir presupuesto" junto al logo, la lupa y el menú: se acorta el logo un poco antes de que el botón empuje nada. Desde 389 px y no desde 374: a 375 px (iPhone 8/X/12 mini…) el logo de 28 px y el botón se tocaban (0 px). */ @media (max-width: 389.98px) { .main-header.cab-2026 .d-xl-none .navbar-brand img { height: 24px; } .main-header.cab-2026 .nav-cta-presupuesto--movil { padding: 0 11px; font-size: .74rem; } } /* Pantallas de menos de 360 px (iPhone SE 1.ª gen. 320, pantalla exterior de plegables 344): un poco más pequeño todo para que quepa en una fila. */ @media (max-width: 359.98px) { .main-header.cab-2026 .d-xl-none .navbar-brand img { height: 20px; } .main-header.cab-2026 .d-xl-none .nav-cta-presupuesto { margin-right: 10px; } .main-header.cab-2026 .d-xl-none .nav-search { margin-right: 10px; } .main-header.cab-2026 .nav-cta-presupuesto--movil { height: 32px; padding: 0 9px; font-size: .7rem; } }