/* ========================================================= ULTRAPC - HEADER ========================================================= */ /* ========================================================= LOGO AZUL METÁLICO UltraPC + símbolo ® ========================================================= */ /* Contenedor del logo */ .header-site-branding .header-logo-link { position: relative; display: inline-block; overflow: visible !important; } .header-site-branding svg { overflow: visible !important; } /* ========================================================= ULTRAPC ========================================================= */ .header-site-branding svg #UltraPC path { fill: #ea6d00 !important; filter: saturate(1.15) contrast(1.08) drop-shadow(0 1px 0 rgba(255,255,255,0.30)) drop-shadow(0 2px 2px rgba(47,20,70,0.28)); transition: filter 0.3s ease, fill 0.3s ease; } /* ========================================================= SÍMBOLO ® ========================================================= */ .header-site-branding svg #R-2 text { fill: #ea6d00 !important; filter: saturate(1.15) contrast(1.08) drop-shadow(0 1px 0 rgba(255,255,255,0.30)) drop-shadow(0 2px 2px rgba(47,20,70,0.28)); } .header-site-branding svg #R-2 circle { stroke: #ea6d00 !important; filter: saturate(1.15) contrast(1.08) drop-shadow(0 1px 0 rgba(255,255,255,0.30)) drop-shadow(0 2px 2px rgba(47,20,70,0.28)); } /* ========================================================= REFLEJO METÁLICO ========================================================= */ .header-site-branding .header-logo-link::after { content: ""; position: absolute; top: 0; left: -35%; width: 18%; height: 68%; background: linear-gradient( 105deg, transparent 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0.18) 35%, rgba(255,255,255,0.70) 50%, rgba(255,255,255,0.18) 65%, rgba(255,255,255,0) 80%, transparent 100% ); transform: skewX(-18deg); mix-blend-mode: screen; pointer-events: none; z-index: 10; animation: ultrapc-metal-shine 6s ease-in-out infinite; } /* ========================================================= ANIMACIÓN DEL REFLEJO ========================================================= */ @keyframes ultrapc-metal-shine { 0%, 68% { left: -35%; opacity: 0; } 72% { opacity: 1; } 92% { left: 115%; opacity: 1; } 100% { left: 115%; opacity: 0; } } /* ========================================================= ULTRAPC - HEADER MODERNO DESKTOP 2026 FASE 1: TOP BAR + MASTHEAD ========================================================= */ @media (min-width: 1200px) { /* ===================================================== 1. BASE GENERAL ===================================================== */ body .top-bar, body .site-header.header-v3 { font-family: inherit; } /* ===================================================== 2. TOP BAR ===================================================== */ body .top-bar { min-height: 46px !important; padding: 0 !important; background: #ffffff !important; border-bottom: 1px solid #f4f0ed !important; color: #443c4b !important; } body .top-bar > .container { min-height: 46px; display: flex !important; align-items: center !important; padding-top: 0 !important; padding-bottom: 0 !important; } body .top-bar .nav { display: flex !important; align-items: center !important; margin: 0 !important; } body .top-bar #menu-contacto { margin-left: auto !important; } body .top-bar .nav-inline .menu-item { position: relative; display: flex !important; align-items: center !important; margin: 0 !important; } body .top-bar .nav-inline .menu-item > a { min-height: 46px; display: inline-flex !important; align-items: center !important; gap: 7px; padding: 0 14px !important; color: #48404f !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important; transition: color .2s ease, background-color .2s ease; } body .top-bar #menu-top-bar-left .menu-item:first-child > a { padding-left: 0 !important; } body .top-bar .nav-inline .menu-item > a:hover { color: #ea6d00 !important; background: transparent !important; } body .top-bar .nav-inline .menu-item > a i { margin: 0 !important; color: #5a544e !important; font-size: 14px !important; transition: color .2s ease; } body .top-bar .nav-inline .menu-item > a:hover i { color: #ea6d00 !important; } /* Separadores mucho más suaves */ body .top-bar #menu-contacto > .menu-item + .menu-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; background: #efeae5; transform: translateY(-50%); } /* ===================================================== 3. MASTHEAD ===================================================== */ body .site-header.header-v3 { position: relative; background: #ffffff !important; border: 0 !important; box-shadow: none !important; } body .site-header.header-v3 > .container { padding-top: 0 !important; padding-bottom: 0 !important; } body .site-header.header-v3 .masthead { min-height: 126px !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 24px 0 !important; } /* ===================================================== 4. LOGO ===================================================== */ body .site-header.header-v3 .header-logo-area { flex: 0 0 280px !important; width: 280px !important; max-width: 280px !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 28px 0 0 !important; } body .site-header.header-v3 .header-site-branding { width: 100% !important; margin: 0 !important; } body .site-header.header-v3 .header-logo-link { display: block !important; width: 255px !important; max-width: 100% !important; margin: 0 !important; } body .site-header.header-v3 .header-logo-link svg { display: block !important; width: 100% !important; height: auto !important; } /* ===================================================== 5. BUSCADOR ===================================================== */ body .site-header.header-v3 .navbar-search { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 30px 0 10px !important; } body .site-header.header-v3 .navbar-search .input-group { position: relative; display: flex !important; align-items: center !important; width: 100% !important; height: 52px !important; overflow: hidden; background: #ffffff !important; border: 1px solid #eae3dc !important; border-radius: 28px !important; box-shadow: 0 1px 2px rgba(28,21,35, .03), 0 5px 18px rgba(28,21,35, .035) !important; transition: border-color .2s ease, box-shadow .2s ease; } body .site-header.header-v3 .navbar-search .input-group:focus-within { border-color: rgba(234,109,0, .48) !important; box-shadow: 0 0 0 4px rgba(234,109,0, .07), 0 7px 22px rgba(28,21,35, .05) !important; } body .site-header.header-v3 .navbar-search .input-search-field { flex: 1 1 auto !important; height: 100% !important; border: 0 !important; } body .site-header.header-v3 .navbar-search .product-search-field { width: 100% !important; height: 50px !important; margin: 0 !important; padding: 0 22px !important; background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; color: #362e3d !important; font-size: 14px !important; font-weight: 500 !important; } body .site-header.header-v3 .navbar-search .product-search-field::placeholder { color: #a29e9a !important; opacity: 1 !important; } body .site-header.header-v3 .navbar-search .input-group-btn { flex: 0 0 auto !important; height: 100% !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 4px !important; } body .site-header.header-v3 .navbar-search button.btn { width: 46px !important; min-width: 46px !important; height: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: #ea6d00 !important; border: 0 !important; border-radius: 50% !important; color: #ffffff !important; box-shadow: 0 5px 14px rgba(234,109,0, .20) !important; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; } body .site-header.header-v3 .navbar-search button.btn:hover { background: #ff7c08 !important; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(234,109,0, .28) !important; } body .site-header.header-v3 .navbar-search button.btn i { margin: 0 !important; color: #ffffff !important; font-size: 20px !important; } /* ===================================================== 6. ICONOS DERECHA ===================================================== */ body .site-header.header-v3 .header-icons { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; } body .site-header.header-v3 .header-icons > .header-icon { position: relative; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } body .site-header.header-v3 .header-icons > .header-icon:not(.header-icon__cart) > a { width: 46px !important; min-width: 46px !important; height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #eee8e2 !important; border-radius: 50% !important; color: #382e40 !important; box-shadow: 0 3px 12px rgba(28,21,35, .035) !important; text-decoration: none !important; transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease; } body .site-header.header-v3 .header-icons > .header-icon:not(.header-icon__cart) > a:hover { color: #ea6d00 !important; background: #fcfbfa !important; border-color: #e4ded7 !important; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(28,21,35, .07) !important; } body .site-header.header-v3 .header-icons > .header-icon:not(.header-icon__cart) > a > i { margin: 0 !important; font-size: 21px !important; line-height: 1 !important; } /* ===================================================== 7. CARRITO ===================================================== */ body .site-header.header-v3 .header-icon__cart { margin-left: 4px !important; } body .site-header.header-v3 .header-icon__cart > a { position: relative; min-width: 145px !important; height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; margin: 0 !important; padding: 0 18px !important; background: #faf8f7 !important; border: 1px solid #f1ece8 !important; border-radius: 26px !important; color: #372d40 !important; box-shadow: 0 5px 16px rgba(234,109,0, .04) !important; text-decoration: none !important; transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; } body .site-header.header-v3 .header-icon__cart > a:hover { background: #f7f4f2 !important; border-color: #e7e0d9 !important; transform: translateY(-1px); box-shadow: 0 7px 20px rgba(234,109,0, .08) !important; } body .site-header.header-v3 .header-icon__cart > a > i { margin: 0 !important; color: #382e40 !important; font-size: 21px !important; line-height: 1 !important; } body .site-header.header-v3 .header-icon__cart .header-icon-counter { position: absolute !important; top: -5px !important; left: 25px !important; min-width: 19px !important; height: 19px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 5px !important; background: #ea6d00 !important; border: 2px solid #ffffff !important; border-radius: 10px !important; color: #ffffff !important; font-size: 10px !important; font-weight: 800 !important; line-height: 15px !important; box-shadow: 0 3px 8px rgba(234,109,0, .24) !important; } body .site-header.header-v3 .header-icon__cart .total-price { margin: 0 !important; color: #382e40 !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; } /* ===================================================== 8. SEPARACIÓN VISUAL DEL HEADER ===================================================== */ body .site-header.header-v3::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(28,21,35, .035); pointer-events: none; } } /* ========================================================= ULTRAPC HEADER 2026 FIX - MASTHEAD EN UNA SOLA FILA ========================================================= */ @media (min-width: 1200px) { /* Evitar que Bootstrap .row mande elementos abajo */ body .site-header.header-v3 .masthead { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; min-height: 112px !important; margin-left: 0 !important; margin-right: 0 !important; padding: 18px 0 !important; column-gap: 24px !important; } /* ===================================================== LOGO ===================================================== */ body .site-header.header-v3 .masthead > .header-logo-area { flex: 0 0 260px !important; width: 260px !important; min-width: 260px !important; max-width: 260px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; } body .site-header.header-v3 .header-site-branding { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } body .site-header.header-v3 .header-logo-link { width: 245px !important; max-width: 245px !important; margin: 0 !important; } /* ===================================================== BUSCADOR ===================================================== */ body .site-header.header-v3 .masthead > .navbar-search { flex: 1 1 0 !important; width: auto !important; min-width: 250px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body .site-header.header-v3 .navbar-search .input-group { width: 100% !important; max-width: none !important; } /* ===================================================== ICONOS ===================================================== */ body .site-header.header-v3 .masthead > .header-icons { flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; } /* Evitar anchos heredados de Bootstrap */ body .site-header.header-v3 .masthead > .navbar-search.col, body .site-header.header-v3 .masthead > .header-icons.col-auto { float: none !important; } } /* ========================================================= ULTRAPC HEADER 2026 FASE 2 - NAVEGACIÓN PRINCIPAL MODERNA ========================================================= */ @media (min-width: 1200px) { /* Zona externa */ body .electro-navbar-primary { position: relative; background: #ffffff !important; padding: 0 0 14px !important; border: 0 !important; } /* Barra azul */ body .electro-navbar-primary > .container { position: relative; min-height: 62px !important; display: flex !important; align-items: center !important; padding-left: 14px !important; padding-right: 14px !important; background: linear-gradient( 135deg, #ea6d00 0%, #f87a0c 52%, #ea6d00 100% ) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 14px !important; box-shadow: 0 8px 22px rgba(70,30,105, .16), 0 2px 5px rgba(70,30,105, .08) !important; } /* UL principal */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header { width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* Cada categoría */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li.menu-item { position: relative; flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 62px !important; margin: 0 !important; padding: 0 3px !important; background: transparent !important; border: 0 !important; } /* Eliminar antiguos separadores verticales */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li.menu-item::before, body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li.menu-item::after { display: none !important; } /* Enlaces */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li.menu-item > a { width: auto !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; margin: 0 !important; padding: 0 12px !important; background: transparent !important; border: 0 !important; border-radius: 10px !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; text-decoration: none !important; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; } /* Iconos */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li.menu-item > a i { margin: 0 !important; color: #ffffff !important; font-size: 17px !important; line-height: 1 !important; } /* Hover */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li.menu-item > a:hover, body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li.menu-item:hover > a { background: rgba(255,255,255,.11) !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important; } /* ===================================================== CATEGORÍAS - BOTÓN PRINCIPAL ===================================================== */ body .electro-navbar-primary #menu-item-37636 { flex: 0 0 240px !important; justify-content: flex-start !important; padding-left: 2px !important; padding-right: 12px !important; } body .electro-navbar-primary #menu-item-37636 > a { position: relative; width: 100% !important; height: 46px !important; justify-content: flex-start !important; padding: 0 18px 0 48px !important; background: linear-gradient( 135deg, rgba(255,168,91,.82), rgba(245,144,56,.72) ) !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 11px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 14px rgba(0,0,0,.08) !important; font-size: 14px !important; font-weight: 800 !important; } /* Hamburguesa visual antes de CATEGORÍAS */ body .electro-navbar-primary #menu-item-37636 > a::before { content: "☰"; position: absolute; left: 18px; top: 50%; transform: translateY(-52%); color: #ffffff; font-size: 21px; font-weight: 400; line-height: 1; } body .electro-navbar-primary #menu-item-37636 > a:hover { background: linear-gradient( 135deg, #ffaa60, #f48e35 ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 7px 17px rgba(0,0,0,.12) !important; } /* ===================================================== DROPDOWNS No alterar funcionamiento ni recortarlos ===================================================== */ body .electro-navbar-primary .dropdown-menu { margin-top: 0 !important; border: 1px solid #f0ebe6 !important; border-radius: 12px !important; box-shadow: 0 14px 35px rgba(28,21,35,.12) !important; } } /* ========================================================= ULTRAPC HEADER 2026 FIX - ICONO HAMBURGUESA CATEGORÍAS ========================================================= */ @media (min-width: 1200px) { body .electro-navbar-primary #menu-item-37636 > a { padding-left: 52px !important; } body .electro-navbar-primary #menu-item-37636 > a::before { content: "" !important; position: absolute !important; left: 18px !important; top: 50% !important; width: 19px !important; height: 14px !important; transform: translateY(-50%) !important; background: linear-gradient(#ffffff,#ffffff) 0 0 / 19px 2px no-repeat, linear-gradient(#ffffff,#ffffff) 0 6px / 19px 2px no-repeat, linear-gradient(#ffffff,#ffffff) 0 12px / 19px 2px no-repeat !important; border: 0 !important; opacity: .96 !important; pointer-events: none !important; } } /* ========================================================= ULTRAPC HEADER 2026 FIX - ICONO HAMBURGUESA CATEGORÍAS ========================================================= */ @media (min-width: 1200px) { body .electro-navbar-primary #menu-item-37636 > a { padding-left: 52px !important; } body .electro-navbar-primary #menu-item-37636 > a::before { content: "" !important; position: absolute !important; left: 18px !important; top: 50% !important; width: 19px !important; height: 14px !important; transform: translateY(-50%) !important; background: linear-gradient(#ffffff,#ffffff) 0 0 / 19px 2px no-repeat, linear-gradient(#ffffff,#ffffff) 0 6px / 19px 2px no-repeat, linear-gradient(#ffffff,#ffffff) 0 12px / 19px 2px no-repeat !important; border: 0 !important; opacity: .96 !important; pointer-events: none !important; } } /* ========================================================= ULTRAPC HEADER 2026 FIX FINAL - CATEGORÍAS SIN ICONO CONFLICTIVO ========================================================= */ @media (min-width: 1200px) { body .electro-navbar-primary #menu-item-37636 > a { padding: 0 18px !important; justify-content: center !important; text-align: center !important; } body .electro-navbar-primary #menu-item-37636 > a::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } } /* ========================================================= ULTRAPC HEADER 2026 PULIDO FINAL DESKTOP ========================================================= */ @media (min-width: 1200px) { /* Barra principal un poco más refinada */ body .electro-navbar-primary { padding-bottom: 10px !important; } body .electro-navbar-primary > .container { min-height: 58px !important; border-radius: 12px !important; box-shadow: 0 6px 18px rgba(70,30,105, .11), 0 1px 3px rgba(70,30,105, .06) !important; } body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li.menu-item { height: 58px !important; } body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li.menu-item > a { min-height: 40px !important; border-radius: 9px !important; } body .electro-navbar-primary #menu-item-37636 > a { height: 42px !important; } } /* ========================================================= ULTRAPC HEADER 2026 FASE 3 - MEGAMENUS ADAPTATIVOS Laptop / PC / Tablets / Monitores / Accesorios / Repuestos / Servicio Tecnico / Software ========================================================= */ @media (min-width: 1200px) { /* ===================================================== 1. REFERENCIA CENTRAL PARA LOS MEGAMENUS ===================================================== */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header { position: relative !important; } /* * Los megamenus visuales se posicionan respecto * al menu completo, no respecto a cada boton. * * CATEGORIAS queda excluido. */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:not(#menu-item-37636) { position: static !important; } /* ===================================================== 2. PANEL GENERAL ===================================================== */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:not(#menu-item-37636) > .dropdown-menu { top: calc(100% + 5px) !important; left: 50% !important; right: auto !important; translate: -50% 0; width: min(1100px, calc(100vw - 48px)) !important; min-width: 0 !important; max-width: 1100px !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 18px !important; background: rgba(255,255,255,.985) !important; border: 1px solid #efeae5 !important; border-radius: 14px !important; box-shadow: 0 18px 45px rgba(28,21,35,.12), 0 4px 12px rgba(28,21,35,.05) !important; overflow: visible !important; } /* ===================================================== 3. LIMPIAR ALTURAS / ESPACIOS HEREDADOS ===================================================== */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:not(#menu-item-37636) > .dropdown-menu > li, body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:not(#menu-item-37636) > .dropdown-menu .yamm-content, body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:not(#menu-item-37636) > .dropdown-menu #lista_categorias, body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:not(#menu-item-37636) > .dropdown-menu #lista_categorias .categories-block { width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:not(#menu-item-37636) > .dropdown-menu .yamm-content { border: 0 !important; background: transparent !important; } /* Elementor no debe generar altura artificial */ body .electro-navbar-primary .dropdown-menu #lista_categorias .elementor, body .electro-navbar-primary .dropdown-menu #lista_categorias .elementor-element { min-height: 0 !important; } /* ===================================================== 4. GRID MODERNO Por defecto: hasta 6 columnas ===================================================== */ body .electro-navbar-primary .dropdown-menu #lista_categorias ul.categories { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; column-gap: 12px !important; row-gap: 12px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Bootstrap row / row-cols-5 deja de mandar */ body .electro-navbar-primary .dropdown-menu #lista_categorias ul.categories > li.category { float: none !important; flex: none !important; width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* ===================================================== 5. TARJETA DE CATEGORIA ===================================================== */ body .electro-navbar-primary .dropdown-menu #lista_categorias li.category > a { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: 100% !important; min-height: 0 !important; gap: 8px !important; margin: 0 !important; padding: 10px 8px 11px !important; background: #ffffff !important; border: 1px solid transparent !important; border-radius: 12px !important; color: #382e40 !important; text-align: center !important; text-decoration: none !important; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important; } body .electro-navbar-primary .dropdown-menu #lista_categorias li.category > a:hover { background: #fcfbfa !important; border-color: #ede8e2 !important; transform: translateY(-2px); box-shadow: 0 7px 18px rgba(234,109,0,.07) !important; } /* ===================================================== 6. IMAGENES ===================================================== */ body .electro-navbar-primary .dropdown-menu #lista_categorias li.category img { display: block !important; width: 100% !important; max-width: 145px !important; height: 135px !important; margin: 0 auto !important; object-fit: contain !important; border-radius: 9px !important; transition: transform .2s ease !important; } body .electro-navbar-primary .dropdown-menu #lista_categorias li.category > a:hover img { transform: scale(1.025); } /* ===================================================== 7. TITULOS ===================================================== */ body .electro-navbar-primary .dropdown-menu #lista_categorias li.category h4 { width: 100% !important; margin: 0 !important; padding: 0 !important; color: #3b3143 !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: center !important; } body .electro-navbar-primary .dropdown-menu #lista_categorias li.category > a:hover h4 { color: #ea6d00 !important; } /* ===================================================== 8. ANCHO DINAMICO SEGUN CANTIDAD DE ELEMENTOS ===================================================== */ /* 1 elemento - Software */ body .electro-navbar-primary .dropdown-menu:has( #lista_categorias .category:only-child ) { width: 245px !important; } body .electro-navbar-primary .dropdown-menu #lista_categorias ul.categories:has( > .category:only-child ) { grid-template-columns: 1fr !important; } /* 2 elementos - Monitores */ body .electro-navbar-primary .dropdown-menu:has( #lista_categorias > .categories-block > ul.categories > .category:nth-child(2):last-child ) { width: 430px !important; } body .electro-navbar-primary .dropdown-menu #lista_categorias ul.categories:has( > .category:nth-child(2):last-child ) { grid-template-columns: repeat(2, 1fr) !important; } /* 3 elementos - Tablets */ body .electro-navbar-primary .dropdown-menu:has( #lista_categorias .category:nth-child(3):last-child ) { width: 620px !important; } body .electro-navbar-primary .dropdown-menu #lista_categorias ul.categories:has( > .category:nth-child(3):last-child ) { grid-template-columns: repeat(3, 1fr) !important; } /* 4 elementos */ body .electro-navbar-primary .dropdown-menu:has( #lista_categorias .category:nth-child(4):last-child ) { width: 790px !important; } body .electro-navbar-primary .dropdown-menu #lista_categorias ul.categories:has( > .category:nth-child(4):last-child ) { grid-template-columns: repeat(4, 1fr) !important; } /* 5 elementos - PC / Servicio Tecnico */ body .electro-navbar-primary .dropdown-menu:has( #lista_categorias .category:nth-child(5):last-child ) { width: 940px !important; } body .electro-navbar-primary .dropdown-menu #lista_categorias ul.categories:has( > .category:nth-child(5):last-child ) { grid-template-columns: repeat(5, 1fr) !important; } /* ===================================================== 9. 6 O MAS ELEMENTOS Repuestos / Laptop / Accesorios ===================================================== */ body .electro-navbar-primary .dropdown-menu:has( #lista_categorias .category:nth-child(6) ) { width: min(1100px, calc(100vw - 48px)) !important; } body .electro-navbar-primary .dropdown-menu #lista_categorias ul.categories:has( > .category:nth-child(6) ) { grid-template-columns: repeat(6, minmax(0,1fr)) !important; } } /* ========================================================= ULTRAPC HEADER 2026 FIX - ANCHO REAL DE MEGAMENUS Sin depender de :has() para el panel exterior ========================================================= */ @media (min-width: 1200px) { /* ===================================================== BASE ===================================================== */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li > .dropdown-menu { height: auto !important; min-height: 0 !important; right: auto !important; overflow: visible !important; } /* ===================================================== LAPTOP - item 2 Amplio, pero no pantalla completa ===================================================== */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(2) { position: static !important; } body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(2) > .dropdown-menu { left: 50% !important; right: auto !important; width: 980px !important; min-width: 980px !important; max-width: 980px !important; translate: -50% 0 !important; } /* ===================================================== PC & AIO - item 3 ===================================================== */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(3) { position: static !important; } body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(3) > .dropdown-menu { left: 50% !important; right: auto !important; width: 900px !important; min-width: 900px !important; max-width: 900px !important; translate: -50% 0 !important; } /* ===================================================== TABLETS - item 4 Panel pequeño centrado bajo su botón ===================================================== */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(4) { position: relative !important; } body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(4) > .dropdown-menu { left: 50% !important; right: auto !important; width: 600px !important; min-width: 600px !important; max-width: 600px !important; translate: -50% 0 !important; } /* ===================================================== MONITORES - item 5 ===================================================== */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(5) { position: relative !important; } body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(5) > .dropdown-menu { left: 50% !important; right: auto !important; width: 410px !important; min-width: 410px !important; max-width: 410px !important; translate: -50% 0 !important; } /* ===================================================== ACCESORIOS - item 6 6 + 6 ===================================================== */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(6) { position: static !important; } body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(6) > .dropdown-menu { left: 50% !important; right: auto !important; width: 1040px !important; min-width: 1040px !important; max-width: 1040px !important; translate: -50% 0 !important; } /* ===================================================== REPUESTOS - item 7 6 en una fila ===================================================== */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(7) { position: static !important; } body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(7) > .dropdown-menu { left: 50% !important; right: auto !important; width: 1000px !important; min-width: 1000px !important; max-width: 1000px !important; translate: -50% 0 !important; } /* ===================================================== SERVICIO TECNICO - item 8 ===================================================== */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(8) { position: static !important; } body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(8) > .dropdown-menu { left: 50% !important; right: auto !important; width: 900px !important; min-width: 900px !important; max-width: 900px !important; translate: -50% 0 !important; } /* ===================================================== SOFTWARE - item 9 Pequeño y alineado hacia la derecha ===================================================== */ body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(9) { position: relative !important; } body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:nth-child(9) > .dropdown-menu { left: auto !important; right: 0 !important; width: 230px !important; min-width: 230px !important; max-width: 230px !important; translate: none !important; } } /* ========================================================= ULTRAPC HEADER 2026 FIX DEFINITIVO MEGAMENUS POR ID REAL ========================================================= */ @media (min-width: 1200px) { /* ===================================================== MONITORES ===================================================== */ body .electro-navbar-primary #menu-item-36335 { position: relative !important; } body .electro-navbar-primary #menu-item-36335 > ul.dropdown-menu { position: absolute !important; top: 100% !important; bottom: auto !important; left: 50% !important; right: auto !important; width: 420px !important; min-width: 420px !important; max-width: 420px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 5px 0 0 !important; padding: 16px !important; transform: translateX(-50%) !important; translate: none !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #efeae5 !important; border-radius: 14px !important; box-shadow: 0 16px 38px rgba(28,21,35,.12), 0 3px 9px rgba(28,21,35,.05) !important; } body .electro-navbar-primary #menu-item-36335 > ul.dropdown-menu > li, body .electro-navbar-primary #menu-item-36335 > ul.dropdown-menu .yamm-content { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } body .electro-navbar-primary #menu-item-36335 #lista_categorias ul.categories { grid-template-columns: repeat(2, minmax(0,1fr)) !important; width: 100% !important; gap: 10px !important; } /* ===================================================== SOFTWARE ===================================================== */ body .electro-navbar-primary #menu-item-47678 { position: relative !important; } body .electro-navbar-primary #menu-item-47678 > ul.dropdown-menu { position: absolute !important; top: 100% !important; bottom: auto !important; left: auto !important; right: 0 !important; width: 230px !important; min-width: 230px !important; max-width: 230px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 5px 0 0 !important; padding: 16px !important; transform: none !important; translate: none !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #efeae5 !important; border-radius: 14px !important; box-shadow: 0 16px 38px rgba(28,21,35,.12), 0 3px 9px rgba(28,21,35,.05) !important; } body .electro-navbar-primary #menu-item-47678 > ul.dropdown-menu > li, body .electro-navbar-primary #menu-item-47678 > ul.dropdown-menu .yamm-content { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } body .electro-navbar-primary #menu-item-47678 #lista_categorias ul.categories { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= ULTRAPC HEADER 2026 FIX REAL - ESPECIFICIDAD MEGAMENUS ========================================================= */ @media (min-width: 1200px) { /* ===================================================== MONITORES Selector intencionalmente más específico ===================================================== */ html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-36335 { position: relative !important; } html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-36335 > ul.dropdown-menu { position: absolute !important; top: 100% !important; left: 50% !important; right: auto !important; width: 420px !important; min-width: 420px !important; max-width: 420px !important; inline-size: 420px !important; min-inline-size: 420px !important; max-inline-size: 420px !important; height: auto !important; min-height: 0 !important; margin: 5px 0 0 !important; padding: 14px !important; transform: translateX(-50%) !important; translate: none !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #efeae5 !important; border-radius: 14px !important; box-shadow: 0 14px 35px rgba(28,21,35,.11), 0 3px 8px rgba(28,21,35,.04) !important; } /* Limitar absolutamente todo el contenido interior */ html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-36335 > ul.dropdown-menu > li, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-36335 > ul.dropdown-menu .yamm-content, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-36335 > ul.dropdown-menu .elementor, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-36335 > ul.dropdown-menu .elementor-section, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-36335 > ul.dropdown-menu .elementor-container, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-36335 > ul.dropdown-menu #lista_categorias, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-36335 > ul.dropdown-menu .categories-block { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-36335 ul.categories { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; width: 100% !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== SOFTWARE ===================================================== */ html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47678 { position: relative !important; } html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47678 > ul.dropdown-menu { position: absolute !important; top: 100% !important; left: auto !important; right: 0 !important; width: 230px !important; min-width: 230px !important; max-width: 230px !important; inline-size: 230px !important; min-inline-size: 230px !important; max-inline-size: 230px !important; height: auto !important; min-height: 0 !important; margin: 5px 0 0 !important; padding: 14px !important; transform: none !important; translate: none !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #efeae5 !important; border-radius: 14px !important; box-shadow: 0 14px 35px rgba(28,21,35,.11), 0 3px 8px rgba(28,21,35,.04) !important; } html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47678 > ul.dropdown-menu > li, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47678 > ul.dropdown-menu .yamm-content, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47678 > ul.dropdown-menu .elementor, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47678 > ul.dropdown-menu .elementor-section, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47678 > ul.dropdown-menu .elementor-container, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47678 > ul.dropdown-menu #lista_categorias, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47678 > ul.dropdown-menu .categories-block { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47678 ul.categories { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= ULTRAPC HEADER 2026 MEGAMENUS - CONFIGURACION FINAL POR ID REAL ========================================================= */ @media (min-width: 1200px) { /* ===================================================== CONTENIDO INTERNO COMUN Limita YAMM + Elementor al ancho real del dropdown ===================================================== */ html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:is( #menu-item-36229, #menu-item-47673, #menu-item-47677, #menu-item-47676, #menu-item-47675, #menu-item-26092 ) > ul.dropdown-menu > li, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:is( #menu-item-36229, #menu-item-47673, #menu-item-47677, #menu-item-47676, #menu-item-47675, #menu-item-26092 ) > ul.dropdown-menu .yamm-content, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:is( #menu-item-36229, #menu-item-47673, #menu-item-47677, #menu-item-47676, #menu-item-47675, #menu-item-26092 ) > ul.dropdown-menu .elementor, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:is( #menu-item-36229, #menu-item-47673, #menu-item-47677, #menu-item-47676, #menu-item-47675, #menu-item-26092 ) > ul.dropdown-menu .elementor-section, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:is( #menu-item-36229, #menu-item-47673, #menu-item-47677, #menu-item-47676, #menu-item-47675, #menu-item-26092 ) > ul.dropdown-menu .elementor-container, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:is( #menu-item-36229, #menu-item-47673, #menu-item-47677, #menu-item-47676, #menu-item-47675, #menu-item-26092 ) > ul.dropdown-menu #lista_categorias, html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:is( #menu-item-36229, #menu-item-47673, #menu-item-47677, #menu-item-47676, #menu-item-47675, #menu-item-26092 ) > ul.dropdown-menu .categories-block { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* ===================================================== ESTILO COMUN PANEL ===================================================== */ html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li:is( #menu-item-36229, #menu-item-47673, #menu-item-47677, #menu-item-47676, #menu-item-47675, #menu-item-26092 ) > ul.dropdown-menu { position: absolute !important; top: 100% !important; bottom: auto !important; height: auto !important; min-height: 0 !important; margin-top: 5px !important; padding: 14px !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #efeae5 !important; border-radius: 14px !important; box-shadow: 0 14px 35px rgba(28,21,35,.11), 0 3px 8px rgba(28,21,35,.04) !important; } /* ===================================================== LAPTOP 8 opciones -> 5 + 3 ===================================================== */ html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-36229 { position: static !important; } html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-36229 > ul.dropdown-menu { left: 50% !important; right: auto !important; width: 900px !important; min-width: 900px !important; max-width: 900px !important; transform: translateX(-50%) !important; translate: none !important; } html body .electro-navbar-primary #menu-item-36229 ul.categories { grid-template-columns: repeat(5,minmax(0,1fr)) !important; } /* ===================================================== PC & AIO 5 opciones ===================================================== */ html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47673 { position: static !important; } html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47673 > ul.dropdown-menu { left: 50% !important; right: auto !important; width: 850px !important; min-width: 850px !important; max-width: 850px !important; transform: translateX(-50%) !important; translate: none !important; } html body .electro-navbar-primary #menu-item-47673 ul.categories { grid-template-columns: repeat(5,minmax(0,1fr)) !important; } /* ===================================================== TABLETS & IPADS 3 opciones ===================================================== */ html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47677 { position: relative !important; } html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47677 > ul.dropdown-menu { left: 50% !important; right: auto !important; width: 590px !important; min-width: 590px !important; max-width: 590px !important; transform: translateX(-50%) !important; translate: none !important; } html body .electro-navbar-primary #menu-item-47677 ul.categories { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } /* ===================================================== ACCESORIOS 12 opciones -> 6 + 6 ===================================================== */ html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47676 { position: static !important; } html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47676 > ul.dropdown-menu { left: 50% !important; right: auto !important; width: 1040px !important; min-width: 1040px !important; max-width: 1040px !important; transform: translateX(-50%) !important; translate: none !important; } html body .electro-navbar-primary #menu-item-47676 ul.categories { grid-template-columns: repeat(6,minmax(0,1fr)) !important; } /* ===================================================== REPUESTOS 6 opciones ===================================================== */ html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47675 { position: static !important; } html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-47675 > ul.dropdown-menu { left: 50% !important; right: auto !important; width: 980px !important; min-width: 980px !important; max-width: 980px !important; transform: translateX(-50%) !important; translate: none !important; } html body .electro-navbar-primary #menu-item-47675 ul.categories { grid-template-columns: repeat(6,minmax(0,1fr)) !important; } /* ===================================================== SERVICIO TECNICO 5 opciones ===================================================== */ html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-26092 { position: static !important; } html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-26092 > ul.dropdown-menu { left: 50% !important; right: auto !important; width: 850px !important; min-width: 850px !important; max-width: 850px !important; transform: translateX(-50%) !important; translate: none !important; } html body .electro-navbar-primary #menu-item-26092 ul.categories { grid-template-columns: repeat(5,minmax(0,1fr)) !important; } } /* ========================================================= ULTRAPC HEADER 2026 CATEGORIAS - DROPDOWN FINAL MODERNO ========================================================= */ @media (min-width: 1200px) { /* ===================================================== CONTENEDOR PRINCIPAL ===================================================== */ html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-37636 { position: relative !important; } html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-37636 > ul.dropdown-menu { position: absolute !important; top: 100% !important; left: 0 !important; right: auto !important; width: 360px !important; min-width: 360px !important; max-width: 360px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 5px 0 0 !important; padding: 10px !important; background: rgba(255,255,255,.99) !important; border: 1px solid #efeae5 !important; border-radius: 14px !important; box-shadow: 0 16px 40px rgba(28,21,35,.12), 0 3px 10px rgba(28,21,35,.045) !important; box-sizing: border-box !important; overflow: visible !important; } /* ===================================================== LIMPIEZA DEL WIDGET ===================================================== */ html body .electro-navbar-primary #menu-item-37636 > ul.dropdown-menu > li, html body .electro-navbar-primary #menu-item-37636 .yawp_wim_wrap, html body .electro-navbar-primary #menu-item-37636 .widget-area, html body .electro-navbar-primary #menu-item-37636 .widget_product_categories { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ===================================================== LISTA PRINCIPAL ===================================================== */ html body .electro-navbar-primary #menu-item-37636 .widget_product_categories > ul.product-categories { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 3px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-item { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* ===================================================== ENLACES PRINCIPALES ===================================================== */ html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-item > a { position: relative !important; width: 100% !important; min-height: 42px !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 48px 0 14px !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 9px !important; color: #433152 !important; font-size: 13.5px !important; font-weight: 650 !important; line-height: 1.25 !important; text-decoration: none !important; transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease !important; } html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-item > a:hover { color: #ea6d00 !important; background: #fbfaf9 !important; border-color: #eee9e4 !important; transform: translateX(2px); } /* ===================================================== CONTADORES ===================================================== */ html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-item > .count { position: absolute !important; top: 50% !important; right: 13px !important; min-width: 26px !important; height: 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 7px !important; transform: translateY(-50%) !important; background: #f8f5f3 !important; border: 1px solid #f0ebe6 !important; border-radius: 11px !important; color: #9b9793 !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; pointer-events: none !important; } html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-item:hover > .count { color: #ea6d00 !important; background: #f7f4f2 !important; border-color: #ede8e2 !important; } /* ===================================================== CATEGORIAS CON SUBCATEGORIAS ===================================================== */ html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-parent > a { padding-left: 38px !important; } /* * Chevron dibujado con CSS. * No usamos caracteres para evitar problemas de fuente. */ html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-parent > a::before { content: "" !important; position: absolute !important; left: 16px !important; top: 50% !important; width: 7px !important; height: 7px !important; border-top: 2px solid #827364 !important; border-right: 2px solid #827364 !important; transform: translateY(-50%) rotate(45deg) !important; transition: border-color .18s ease, transform .18s ease !important; } html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-parent:hover > a::before { border-color: #ea6d00 !important; transform: translate(2px,-50%) rotate(45deg) !important; } /* ===================================================== SUBMENUS / CHILDREN Solo estilizamos, no alteramos su funcionamiento ===================================================== */ html body .electro-navbar-primary #menu-item-37636 .product-categories ul.children { background: #ffffff !important; border: 1px solid #efeae5 !important; border-radius: 12px !important; box-shadow: 0 14px 35px rgba(28,21,35,.11) !important; } html body .electro-navbar-primary #menu-item-37636 .product-categories ul.children li > a { color: #4a3d55 !important; font-size: 13px !important; transition: color .18s ease, background-color .18s ease !important; } html body .electro-navbar-primary #menu-item-37636 .product-categories ul.children li > a:hover { color: #ea6d00 !important; background: #fbfaf9 !important; } /* ===================================================== ACTIVO / HOVER GENERAL ===================================================== */ html body .electro-navbar-primary #menu-item-37636 .product-categories > li.current-cat > a, html body .electro-navbar-primary #menu-item-37636 .product-categories > li.current-cat-parent > a { color: #ea6d00 !important; background: #f9f6f4 !important; border-color: #eee8e2 !important; font-weight: 750 !important; } } /* ========================================================= ULTRAPC HEADER 2026 FIX FINAL - CHEVRON DUPLICADO EN CATEGORIAS ========================================================= */ @media (min-width: 1200px) { /* Eliminar indicadores antiguos heredados de Electro */ html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-parent::before, html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-parent::after, html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-parent > a::after { content: none !important; display: none !important; } /* Conservamos únicamente nuestro chevron moderno */ html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-parent > a::before { content: "" !important; display: block !important; position: absolute !important; left: 16px !important; top: 50% !important; width: 7px !important; height: 7px !important; border: 0 !important; border-top: 2px solid #827364 !important; border-right: 2px solid #827364 !important; background: none !important; transform: translateY(-50%) rotate(45deg) !important; } } /* ========================================================= ULTRAPC HEADER 2026 CATEGORIAS - LIMPIEZA FINAL - un solo chevron - subcategorias modernas - elimina hover azul legacy ========================================================= */ @media (min-width: 1200px) { /* ===================================================== 1. ELIMINAR INDICADOR NATIVO DE WOOCOMMERCE Conservamos solamente nuestro a::before ===================================================== */ html body .electro-navbar-primary #menu-item-37636 .product-categories span.child-indicator { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html body .electro-navbar-primary #menu-item-37636 .product-categories span.child-indicator i { display: none !important; } /* ===================================================== 2. RESET DEL HOVER AZUL ANTIGUO ===================================================== */ html body .electro-navbar-primary #menu-item-37636 ul.product-categories li.cat-item:hover, html body .electro-navbar-primary #menu-item-37636 ul.product-categories li.cat-item ul.children li:hover { background: transparent !important; outline: 0 !important; outline-offset: 0 !important; box-shadow: none !important; } html body .electro-navbar-primary #menu-item-37636 ul.product-categories li.cat-item:hover > a, html body .electro-navbar-primary #menu-item-37636 ul.product-categories li.cat-item:hover > span, html body .electro-navbar-primary #menu-item-37636 ul.product-categories ul.children li:hover > a, html body .electro-navbar-primary #menu-item-37636 ul.product-categories ul.children li:hover > span { color: inherit !important; } /* ===================================================== 3. SUBMENU ABIERTO ===================================================== */ html body .electro-navbar-primary #menu-item-37636 .product-categories ul.children { position: static !important; width: calc(100% - 12px) !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 4px 6px 8px !important; padding: 5px !important; background: #fbfaf9 !important; border: 1px solid #f2eeea !important; border-radius: 9px !important; box-shadow: none !important; list-style: none !important; overflow: hidden !important; } /* ===================================================== 4. FILAS DE SUBCATEGORIAS ===================================================== */ html body .electro-navbar-primary #menu-item-37636 .product-categories ul.children > li.cat-item { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; outline: 0 !important; } html body .electro-navbar-primary #menu-item-37636 .product-categories ul.children > li.cat-item > a { position: relative !important; width: 100% !important; min-height: 36px !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 42px 0 12px !important; background: transparent !important; border: 0 !important; border-radius: 7px !important; color: #5c554e !important; font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.25 !important; text-decoration: none !important; transition: color .16s ease, background-color .16s ease, transform .16s ease !important; } html body .electro-navbar-primary #menu-item-37636 .product-categories ul.children > li.cat-item > a:hover { color: #ea6d00 !important; background: #f8f6f4 !important; text-decoration: none !important; transform: translateX(2px); } /* ===================================================== 5. CONTADORES DE SUBCATEGORIAS ===================================================== */ html body .electro-navbar-primary #menu-item-37636 .product-categories ul.children > li.cat-item > .count { position: absolute !important; top: 50% !important; right: 8px !important; min-width: 24px !important; height: 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 6px !important; transform: translateY(-50%) !important; background: #f6f2ef !important; border: 1px solid #eee8e2 !important; border-radius: 10px !important; color: #97928d !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important; pointer-events: none !important; } html body .electro-navbar-primary #menu-item-37636 .product-categories ul.children > li.cat-item:hover > .count { color: #ea6d00 !important; background: #f5f2ee !important; border-color: #ede6e0 !important; } /* ===================================================== 6. SUBCATEGORIA ACTIVA Sin barra azul fuerte ===================================================== */ html body .electro-navbar-primary #menu-item-37636 .product-categories ul.children > li.current-cat > a, html body .electro-navbar-primary #menu-item-37636 .product-categories ul.children > li.current-cat-parent > a { color: #ea6d00 !important; background: #f7f4f2 !important; font-weight: 700 !important; } /* ===================================================== 7. CATEGORIA PADRE ABIERTA ===================================================== */ html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-parent:hover > a { color: #ea6d00 !important; background: #fbfaf9 !important; border-color: #eee9e4 !important; } /* Un único chevron */ html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-parent > a::before { left: 17px !important; width: 6px !important; height: 6px !important; border-top: 2px solid #827364 !important; border-right: 2px solid #827364 !important; background: transparent !important; } } /* ========================================================= ULTRAPC HEADER 2026 FIX FINAL - CONTADOR DE CATEGORIA PADRE ========================================================= */ @media (min-width: 1200px) { /* * Cuando una categoria abre children, el
  • aumenta * de altura. Evitamos que su count use el 50% de todo * el bloque expandido. */ html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-item > .count { top: 21px !important; transform: translateY(-50%) !important; } } /* ========================================================= ULTRAPC HEADER 2026 TOP BAR - PULIDO PREMIUM ========================================================= */ @media (min-width: 1200px) { /* ===================================================== CONTENEDOR GENERAL ===================================================== */ html body .top-bar { min-height: 40px !important; margin: 0 !important; padding: 0 !important; background: #fbfaf9 !important; border-top: 1px solid #f4f1ee !important; border-bottom: 1px solid #f1ece8 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important; color: #4b4252 !important; } html body .top-bar > .container { min-height: 40px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ===================================================== LISTAS ===================================================== */ html body .top-bar .nav { min-height: 40px !important; display: flex !important; align-items: center !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; } html body .top-bar .nav > li { position: relative !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== BIENVENIDA - IZQUIERDA ===================================================== */ html body .top-bar #menu-top-bar-left > li:first-child > a { min-height: 30px !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; margin: 0 !important; padding: 0 11px !important; background: #f9f6f4 !important; border: 1px solid #f0ebe6 !important; border-radius: 15px !important; color: #453553 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; transition: color .18s ease, background-color .18s ease, border-color .18s ease !important; } html body .top-bar #menu-top-bar-left > li:first-child > a:hover { color: #ea6d00 !important; background: #f6f3f1 !important; border-color: #e9e2da !important; } html body .top-bar #menu-top-bar-left > li:first-child > a i { margin: 0 !important; color: #6a5b4c !important; font-size: 13px !important; } /* ===================================================== BLOQUE DERECHO ===================================================== */ html body .top-bar #menu-contacto { margin-left: auto !important; gap: 0 !important; } html body .top-bar #menu-contacto > li > a { min-height: 40px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; padding: 0 13px !important; background: transparent !important; border: 0 !important; color: #473d4f !important; font-size: 12px !important; font-weight: 650 !important; line-height: 1 !important; white-space: nowrap !important; text-decoration: none !important; transition: color .18s ease, background-color .18s ease !important; } html body .top-bar #menu-contacto > li > a:hover { color: #ea6d00 !important; background: rgba(234,109,0,.035) !important; } /* ===================================================== ICONOS ===================================================== */ html body .top-bar #menu-contacto > li > a i { margin: 0 !important; color: #6d665f !important; font-size: 13px !important; line-height: 1 !important; transition: color .18s ease !important; } html body .top-bar #menu-contacto > li > a:hover i { color: #ea6d00 !important; } /* ===================================================== SEPARADORES FINOS ===================================================== */ html body .top-bar #menu-contacto > li + li::before { content: "" !important; position: absolute !important; left: 0 !important; top: 50% !important; width: 1px !important; height: 14px !important; transform: translateY(-50%) !important; background: #eae3dd !important; opacity: .9 !important; pointer-events: none !important; } /* ===================================================== LOGIN - ULTIMO ELEMENTO ===================================================== */ html body .top-bar #menu-contacto > li:last-child > a { padding-right: 10px !important; font-weight: 700 !important; } } /* ========================================================= ULTRAPC HEADER 2026 MINI CARRITO - DISEÑO MODERNO DESKTOP ========================================================= */ @media (min-width: 1200px) { /* ===================================================== 1. PANEL GENERAL ===================================================== */ html body .site-header.header-v3 .header-icon__cart > .dropdown-menu-mini-cart { top: calc(100% + 12px) !important; right: 0 !important; left: auto !important; width: 460px !important; min-width: 460px !important; max-width: 460px !important; margin: 0 !important; padding: 12px !important; background: rgba(255,255,255,.99) !important; border: 1px solid #eee8e2 !important; border-radius: 16px !important; box-shadow: 0 20px 50px rgba(28,21,35,.14), 0 4px 12px rgba(28,21,35,.055) !important; box-sizing: border-box !important; overflow: visible !important; } /* Pequeña punta visual hacia el carrito */ html body .site-header.header-v3 .header-icon__cart > .dropdown-menu-mini-cart::before { content: "" !important; position: absolute !important; top: -7px !important; right: 38px !important; width: 13px !important; height: 13px !important; background: #ffffff !important; border-top: 1px solid #eee8e2 !important; border-left: 1px solid #eee8e2 !important; transform: rotate(45deg) !important; z-index: 1 !important; } /* ===================================================== 2. CONTENIDO WOO ===================================================== */ html body .site-header.header-v3 .dropdown-menu-mini-cart .widget_shopping_cart_content { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== 3. LISTA DE PRODUCTOS ===================================================== */ html body .site-header.header-v3 .dropdown-menu-mini-cart ul.woocommerce-mini-cart { max-height: 330px !important; margin: 0 !important; padding: 0 5px 0 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: thin !important; scrollbar-color: #cfcac4 transparent !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart ul.woocommerce-mini-cart::-webkit-scrollbar { width: 5px !important; background: transparent !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart ul.woocommerce-mini-cart::-webkit-scrollbar-track { background: transparent !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart ul.woocommerce-mini-cart::-webkit-scrollbar-thumb { background: #cfcac4 !important; border: 0 !important; border-radius: 10px !important; } /* ===================================================== 4. ITEM ===================================================== */ html body .site-header.header-v3 .dropdown-menu-mini-cart li.woocommerce-mini-cart-item { position: relative !important; min-height: 96px !important; display: block !important; margin: 0 0 6px !important; padding: 10px 42px 10px 10px !important; background: #ffffff !important; border: 1px solid transparent !important; border-radius: 12px !important; box-sizing: border-box !important; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart li.woocommerce-mini-cart-item:hover { background: #fcfcfb !important; border-color: #f1ece7 !important; box-shadow: 0 4px 12px rgba(234,109,0,.035) !important; } /* Separadores antiguos fuera */ html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item { border-bottom: 0 !important; } /* ===================================================== 5. LINK + IMAGEN + NOMBRE ===================================================== */ html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item > a:not(.remove) { display: grid !important; grid-template-columns: 76px minmax(0,1fr) !important; column-gap: 12px !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #382e40 !important; font-size: 12.5px !important; font-weight: 650 !important; line-height: 1.35 !important; text-decoration: none !important; white-space: normal !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item > a:not(.remove):hover { color: #ea6d00 !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item > a:not(.remove) img { float: none !important; width: 72px !important; height: 72px !important; max-width: 72px !important; margin: 0 !important; padding: 4px !important; background: #ffffff !important; border: 1px solid #f4f0ed !important; border-radius: 9px !important; object-fit: contain !important; box-sizing: border-box !important; } /* ===================================================== 6. CANTIDAD + PRECIO ===================================================== */ html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item > .quantity { display: block !important; margin: 5px 0 0 88px !important; padding: 0 !important; color: #8b857f !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.25 !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item > .quantity .amount { color: #382e40 !important; font-size: 13.5px !important; font-weight: 800 !important; } /* ===================================================== 7. BOTON ELIMINAR ===================================================== */ html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item > a.remove { position: absolute !important; top: 50% !important; right: 7px !important; width: 30px !important; height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; float: none !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; visibility: visible !important; background: #fbf9f7 !important; border: 1px solid #f1ece7 !important; border-radius: 8px !important; color: transparent !important; font-size: 0 !important; text-decoration: none !important; transition: background-color .18s ease, border-color .18s ease, transform .18s ease !important; z-index: 3 !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item > a.remove::before { content: "\f2ed" !important; position: static !important; display: block !important; visibility: visible !important; font-family: "Font Awesome 5 Free" !important; font-size: 13px !important; font-weight: 900 !important; line-height: 1 !important; color: #e5484d !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item > a.remove:hover { background: #f7f4f1 !important; border-color: #eae2db !important; transform: translateY(-50%) scale(1.04) !important; } /* ===================================================== 8. SUBTOTAL Electro lo ocultaba ===================================================== */ html body .site-header.header-v3 .dropdown-menu-mini-cart p.woocommerce-mini-cart__total { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 48px !important; margin: 8px 4px 10px !important; padding: 10px 12px !important; background: #fbfaf8 !important; border: 1px solid #f2eeea !important; border-radius: 10px !important; color: #706a64 !important; font-size: 12.5px !important; line-height: 1.2 !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart p.woocommerce-mini-cart__total strong { color: #69645e !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .3px !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart p.woocommerce-mini-cart__total .amount { color: #ea6d00 !important; font-size: 16px !important; font-weight: 850 !important; } /* ===================================================== 9. BOTONES ===================================================== */ html body .site-header.header-v3 .dropdown-menu-mini-cart p.woocommerce-mini-cart__buttons { display: grid !important; grid-template-columns: 1fr 1.22fr !important; gap: 9px !important; width: 100% !important; margin: 0 !important; padding: 0 4px 2px !important; text-align: initial !important; box-sizing: border-box !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart .woocommerce-mini-cart__buttons a.button { width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 12px !important; border-radius: 21px !important; font-size: 12px !important; font-weight: 750 !important; line-height: 1 !important; white-space: nowrap !important; text-decoration: none !important; box-shadow: none !important; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important; } /* VER CARRITO */ html body .site-header.header-v3 .dropdown-menu-mini-cart .woocommerce-mini-cart__buttons a.button:not(.checkout) { background: #ffffff !important; border: 1px solid #e5e0da !important; color: #ea6d00 !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart .woocommerce-mini-cart__buttons a.button:not(.checkout):hover { background: #fbf9f7 !important; border-color: #d7cdc3 !important; color: #ea6d00 !important; transform: translateY(-1px) !important; } /* FINALIZAR COMPRA */ html body .site-header.header-v3 .dropdown-menu-mini-cart .woocommerce-mini-cart__buttons a.button.checkout { background: linear-gradient( 135deg, #ea6d00, #f8851f ) !important; border: 1px solid #ea6d00 !important; color: #ffffff !important; box-shadow: 0 6px 15px rgba(234,109,0,.18) !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart .woocommerce-mini-cart__buttons a.button.checkout:hover { background: linear-gradient( 135deg, #ff7802, #f88f33 ) !important; border-color: #ff7802 !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 8px 19px rgba(234,109,0,.24) !important; } /* ===================================================== 10. CARRITO VACIO ===================================================== */ html body .site-header.header-v3 .dropdown-menu-mini-cart .woocommerce-mini-cart__empty-message { margin: 0 !important; padding: 28px 18px !important; color: #7f7a76 !important; font-size: 13px !important; font-weight: 600 !important; text-align: center !important; } } /* ========================================================= ULTRAPC HEADER 2026 MINI CARRITO - PULIDO FINAL ========================================================= */ @media (min-width: 1200px) { /* Panel un poco más fino */ html body .site-header.header-v3 .header-icon__cart > .dropdown-menu-mini-cart { padding: 10px !important; border-radius: 15px !important; box-shadow: 0 18px 45px rgba(28,21,35,.12), 0 4px 10px rgba(28,21,35,.045) !important; } /* Más productos visibles sin agrandar el panel */ html body .site-header.header-v3 .dropdown-menu-mini-cart ul.woocommerce-mini-cart { max-height: 340px !important; padding-right: 4px !important; } /* Scrollbar más discreto */ html body .site-header.header-v3 .dropdown-menu-mini-cart ul.woocommerce-mini-cart::-webkit-scrollbar { width: 4px !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart ul.woocommerce-mini-cart::-webkit-scrollbar-thumb { background: #d7d3cf !important; border-radius: 8px !important; } /* Productos algo más compactos */ html body .site-header.header-v3 .dropdown-menu-mini-cart li.woocommerce-mini-cart-item { min-height: 88px !important; margin-bottom: 5px !important; padding: 8px 40px 8px 8px !important; border-radius: 11px !important; } /* Imagen */ html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item > a:not(.remove) { grid-template-columns: 70px minmax(0,1fr) !important; column-gap: 10px !important; font-size: 12px !important; line-height: 1.32 !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item > a:not(.remove) img { width: 66px !important; height: 66px !important; max-width: 66px !important; border-radius: 8px !important; } /* Cantidad + precio */ html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item > .quantity { margin-left: 80px !important; margin-top: 4px !important; font-size: 11px !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item > .quantity .amount { font-size: 12.5px !important; } /* Eliminar más discreto */ html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item > a.remove { right: 6px !important; width: 28px !important; height: 28px !important; background: #fcfbfa !important; border-color: #f3f0ec !important; border-radius: 8px !important; } html body .site-header.header-v3 .dropdown-menu-mini-cart .mini_cart_item > a.remove::before { font-size: 12px !important; color: #e34d52 !important; } /* Subtotal */ html body .site-header.header-v3 .dropdown-menu-mini-cart p.woocommerce-mini-cart__total { min-height: 46px !important; margin: 7px 4px 9px !important; padding: 9px 12px !important; border-radius: 9px !important; } /* Botones ligeramente más compactos */ html body .site-header.header-v3 .dropdown-menu-mini-cart .woocommerce-mini-cart__buttons a.button { height: 40px !important; min-height: 40px !important; border-radius: 20px !important; font-size: 11.5px !important; } } /* ========================================================= ULTRAPC - TOP INFO BAR 2026 ========================================================= */ .upc-info-bar { position: relative; z-index: 100; width: 100%; margin: 0; padding: 0; overflow: hidden; background: linear-gradient( 90deg, #ea6d00 0%, #f77f17 50%, #ea6d00 100% ); color: #ffffff; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 2px 8px rgba(54,24,81,.08); } .upc-info-bar__inner { width: 100%; max-width: 1400px; height: 32px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: center; } .upc-info-bar__items { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .upc-info-bar__item { position: relative; flex: 1 1 0; height: 32px; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 0 22px; color: #ffffff !important; font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: .05px; white-space: nowrap; text-decoration: none !important; transition: background-color .2s ease, opacity .2s ease; } .upc-info-bar__item strong { color: #ffffff !important; font-weight: 800; } .upc-info-bar__item i { flex: 0 0 auto; color: #ffffff !important; font-size: 12px; line-height: 1; opacity: .95; } /* Separadores */ .upc-info-bar__item:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 14px; background: rgba(255,255,255,.28); transform: translateY(-50%); } /* Elementos enlazables */ a.upc-info-bar__item:hover, a.upc-info-bar__item:focus { color: #ffffff !important; background: rgba(255,255,255,.09); text-decoration: none !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1199.98px) { .upc-info-bar__inner { padding-left: 12px; padding-right: 12px; } .upc-info-bar__item { padding-left: 12px; padding-right: 12px; font-size: 12px; } } /* ========================================================= MOVIL - MENSAJES ROTATIVOS ========================================================= */ @media (max-width: 767.98px) { .upc-info-bar { min-height: 30px; } .upc-info-bar__inner { position: relative; height: 30px; padding: 0 12px; overflow: hidden; } .upc-info-bar__items { position: relative; display: block; width: 100%; height: 30px; overflow: hidden; } .upc-info-bar__item { position: absolute; inset: 0; width: 100%; height: 30px; padding: 0 8px; justify-content: center; font-size: 12px; font-weight: 600; opacity: 0; transform: translateY(5px); animation: upcInfoBarRotate 20s ease-in-out infinite; pointer-events: none; } .upc-info-bar__item::after { display: none !important; } .upc-info-bar__item:nth-child(1) { animation-delay: 0s; } .upc-info-bar__item:nth-child(2) { animation-delay: 4s; } .upc-info-bar__item:nth-child(3) { animation-delay: 8s; } .upc-info-bar__item:nth-child(4) { animation-delay: 12s; } .upc-info-bar__item:nth-child(5) { animation-delay: 16s; } .upc-info-bar__item--tracking { pointer-events: auto; } .upc-info-bar__item i { font-size: 11.5px; } @keyframes upcInfoBarRotate { 0% { opacity: 1; transform: translateY(0); } 16% { opacity: 1; transform: translateY(0); } 20% { opacity: 0; transform: translateY(-5px); } 100% { opacity: 0; transform: translateY(-5px); } } } /* Accesibilidad: reducir movimiento */ @media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { .upc-info-bar__item { display: none; animation: none !important; } .upc-info-bar__item:first-child { position: relative; display: flex; opacity: 1; transform: none; } } /* ========================================================= ULTRAPC HEADER 2026 MINI CARRITO MOBILE / TABLET ========================================================= */ @media (max-width: 1199.98px) { /* ===================================================== 1. PANEL OFF-CANVAS ===================================================== */ html body .off-canvas-cart { width: min(94vw, 400px) !important; max-width: 400px !important; background: #ffffff !important; border-left: 1px solid #efeae5 !important; box-shadow: -18px 0 45px rgba(28,21,35,.14), -4px 0 12px rgba(28,21,35,.04) !important; } /* ===================================================== 2. CONTENEDOR MINI CART ===================================================== */ html body .off-canvas-cart .dropdown-menu-mini-cart { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 10px 8px 12px !important; background: #ffffff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } html body .off-canvas-cart .widget_shopping_cart_content { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== 3. LISTA DE PRODUCTOS ===================================================== */ html body .off-canvas-cart ul.woocommerce-mini-cart { height: auto !important; max-height: calc(100dvh - 210px) !important; margin: 0 !important; padding: 2px 3px 2px 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: thin !important; scrollbar-color: #d5d0cb transparent !important; overscroll-behavior: contain !important; } html body .off-canvas-cart ul.woocommerce-mini-cart::-webkit-scrollbar { width: 4px !important; background: transparent !important; } html body .off-canvas-cart ul.woocommerce-mini-cart::-webkit-scrollbar-track { background: transparent !important; } html body .off-canvas-cart ul.woocommerce-mini-cart::-webkit-scrollbar-thumb { background: #d5d0cb !important; border: 0 !important; border-radius: 10px !important; } /* ===================================================== 4. PRODUCTO ===================================================== */ html body .off-canvas-cart li.woocommerce-mini-cart-item { position: relative !important; min-height: 88px !important; margin: 0 0 6px !important; padding: 8px 39px 8px 8px !important; background: #ffffff !important; border: 1px solid #f2eeea !important; border-radius: 12px !important; box-sizing: border-box !important; box-shadow: 0 2px 7px rgba(28,21,35,.025) !important; } html body .off-canvas-cart .mini_cart_item { border-bottom: 0 !important; } /* ===================================================== 5. IMAGEN + NOMBRE ===================================================== */ html body .off-canvas-cart .mini_cart_item > a:not(.remove) { display: grid !important; grid-template-columns: 64px minmax(0,1fr) !important; column-gap: 9px !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #382e40 !important; font-size: 11.5px !important; font-weight: 650 !important; line-height: 1.32 !important; white-space: normal !important; text-decoration: none !important; } html body .off-canvas-cart .mini_cart_item > a:not(.remove) img { float: none !important; width: 60px !important; height: 60px !important; max-width: 60px !important; margin: 0 !important; padding: 3px !important; background: #ffffff !important; border: 1px solid #f4f0ed !important; border-radius: 9px !important; object-fit: contain !important; box-sizing: border-box !important; } /* ===================================================== 6. CANTIDAD + PRECIO ===================================================== */ html body .off-canvas-cart .mini_cart_item > .quantity { display: block !important; margin: 4px 0 0 73px !important; padding: 0 !important; color: #8e8883 !important; font-size: 10.5px !important; font-weight: 600 !important; line-height: 1.2 !important; } html body .off-canvas-cart .mini_cart_item > .quantity .amount { color: #5d5650 !important; font-size: 12px !important; font-weight: 800 !important; } /* ===================================================== 7. ELIMINAR ===================================================== */ html body .off-canvas-cart .mini_cart_item > a.remove { position: absolute !important; top: 50% !important; right: 6px !important; width: 27px !important; height: 27px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; float: none !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; visibility: visible !important; background: #fbfaf9 !important; border: 1px solid #f2eee9 !important; border-radius: 8px !important; color: transparent !important; font-size: 0 !important; text-decoration: none !important; } html body .off-canvas-cart .mini_cart_item > a.remove::before { content: "\f2ed" !important; display: block !important; visibility: visible !important; font-family: "Font Awesome 5 Free" !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1 !important; color: #e34d52 !important; } /* ===================================================== 8. SUBTOTAL ===================================================== */ html body .off-canvas-cart p.woocommerce-mini-cart__total { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 48px !important; margin: 8px 2px !important; padding: 10px 12px !important; background: #faf8f7 !important; border: 1px solid #f0ebe6 !important; border-radius: 10px !important; color: #706a64 !important; font-size: 11px !important; line-height: 1.2 !important; box-sizing: border-box !important; } html body .off-canvas-cart p.woocommerce-mini-cart__total strong { color: #69645e !important; font-size: 10.5px !important; font-weight: 750 !important; text-transform: uppercase !important; letter-spacing: .25px !important; } html body .off-canvas-cart p.woocommerce-mini-cart__total .amount { color: #ea6d00 !important; font-size: 15px !important; font-weight: 850 !important; } /* ===================================================== 9. BOTONES ===================================================== */ html body .off-canvas-cart p.woocommerce-mini-cart__buttons { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 2px 2px !important; box-sizing: border-box !important; } html body .off-canvas-cart .woocommerce-mini-cart__buttons a.button { width: 100% !important; height: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 15px !important; border-radius: 22px !important; font-size: 12px !important; font-weight: 750 !important; line-height: 1 !important; white-space: nowrap !important; text-decoration: none !important; box-sizing: border-box !important; } /* Ver carrito */ html body .off-canvas-cart .woocommerce-mini-cart__buttons a.button:not(.checkout) { background: #ffffff !important; border: 1px solid #e2dcd6 !important; color: #ea6d00 !important; box-shadow: none !important; } /* Finalizar compra */ html body .off-canvas-cart .woocommerce-mini-cart__buttons a.button.checkout { background: linear-gradient( 135deg, #ea6d00, #f8851f ) !important; border: 1px solid #ea6d00 !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(234,109,0,.19) !important; } /* ===================================================== 10. CARRITO VACIO ===================================================== */ html body .off-canvas-cart .woocommerce-mini-cart__empty-message { margin: 0 !important; padding: 32px 18px !important; color: #7f7a74 !important; font-size: 12.5px !important; font-weight: 600 !important; text-align: center !important; } } /* ========================================================= TELEFONOS PEQUEÑOS ========================================================= */ @media (max-width: 449.98px) { html body .off-canvas-cart { width: calc(100vw - 16px) !important; max-width: none !important; } html body .off-canvas-cart ul.woocommerce-mini-cart { max-height: calc(100dvh - 215px) !important; } } /* ========================================================= ULTRAPC HEADER MOBILE 2026 OCULTAR DEPARTAMENTO MOBILE VACIO ========================================================= */ @media (max-width: 767.98px) { html body .mobile-header-v2 .mobile-handheld-department { display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } } /* ========================================================= ULTRAPC HEADER 2026 MOBILE V2 - LAYOUT DEFINITIVO ========================================================= */ @media (max-width: 767.98px) { /* ===================================================== CONTENEDOR GENERAL ===================================================== */ html body .mobile-header-v2 { background: linear-gradient( 135deg, #ea6d00 0%, #f87a0c 100% ) !important; border: 0 !important; box-shadow: 0 4px 14px rgba(67,29,101,.12) !important; } html body .mobile-header-v2 > .container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 8px 14px 10px !important; } /* ===================================================== GRID PRINCIPAL ===================================================== */ html body .mobile-header-v2 .mobile-header-v2-inner { display: grid !important; grid-template-columns: 40px minmax(0,1fr) auto !important; grid-template-areas: "menu logo actions" "search search search" !important; align-items: center !important; column-gap: 9px !important; row-gap: 8px !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== HAMBURGUESA ===================================================== */ html body .mobile-header-v2 .off-canvas-navigation-wrapper { grid-area: menu !important; width: 40px !important; max-width: 40px !important; margin: 0 !important; padding: 0 !important; } /* * Importante: * NO definimos display para no hacer aparecer * simultáneamente hamburger + X. */ html body .mobile-header-v2 .navbar-toggle-hamburger, html body .mobile-header-v2 .navbar-toggle-close { width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; background: rgba(255,255,255,.09) !important; border: 1px solid rgba(255,255,255,.13) !important; border-radius: 11px !important; color: #ffffff !important; box-shadow: none !important; } html body .mobile-header-v2 .navbar-toggle-hamburger i, html body .mobile-header-v2 .navbar-toggle-close i { color: #ffffff !important; font-size: 21px !important; line-height: 1 !important; } /* ===================================================== LOGO ===================================================== */ html body .mobile-header-v2 .header-logo { grid-area: logo !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; justify-self: start !important; } html body .mobile-header-v2 .header-logo-link { display: block !important; width: 137px !important; max-width: 137px !important; margin: 0 !important; padding: 0 !important; } html body .mobile-header-v2 .header-logo-link img { display: block !important; width: 100% !important; height: auto !important; max-width: 137px !important; margin: 0 !important; } /* ===================================================== USUARIO + CARRITO ===================================================== */ html body .mobile-header-v2 .handheld-header-links { grid-area: actions !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; justify-self: end !important; } html body .mobile-header-v2 .handheld-header-links > ul { display: flex !important; align-items: center !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; } /* Buscar ya está abajo, no necesitamos icono duplicado */ html body .mobile-header-v2 .handheld-header-links > ul > li.search { display: none !important; } html body .mobile-header-v2 .handheld-header-links > ul > li.my-account, html body .mobile-header-v2 .handheld-header-links > ul > li.cart { margin: 0 !important; padding: 0 !important; border: 0 !important; } html body .mobile-header-v2 .handheld-header-links > ul > li.my-account > a, html body .mobile-header-v2 .handheld-header-links > ul > li.cart > a { position: relative !important; width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: rgba(255,255,255,.09) !important; border: 1px solid rgba(255,255,255,.13) !important; border-radius: 50% !important; color: #ffffff !important; box-shadow: none !important; } html body .mobile-header-v2 .handheld-header-links i { color: #ffffff !important; font-size: 19px !important; line-height: 1 !important; } /* ===================================================== CONTADOR CARRITO ===================================================== */ html body .mobile-header-v2 .handheld-header-links .cart .count { position: absolute !important; top: -4px !important; right: -4px !important; min-width: 17px !important; height: 17px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 4px !important; background: #ffffff !important; border: 2px solid #f77c10 !important; border-radius: 9px !important; color: #ea6d00 !important; font-size: 9px !important; font-weight: 800 !important; line-height: 13px !important; box-shadow: 0 2px 7px rgba(0,0,0,.14) !important; } /* ===================================================== BUSCADOR ===================================================== */ html body .mobile-header-v2 .mobile-header-v2-inner > .site-search { grid-area: search !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } html body .mobile-header-v2 .mobile-header-v2-inner > .site-search form { position: relative !important; width: 100% !important; height: 44px !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid rgba(255,255,255,.7) !important; border-radius: 23px !important; box-shadow: 0 4px 12px rgba(49,21,73,.12) !important; } html body .mobile-header-v2 .mobile-header-v2-inner > .site-search input.search-field { width: 100% !important; height: 42px !important; margin: 0 !important; padding: 0 52px 0 16px !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; color: #3b3045 !important; font-size: 12px !important; font-weight: 500 !important; } html body .mobile-header-v2 .mobile-header-v2-inner > .site-search input.search-field::placeholder { color: #9a9590 !important; opacity: 1 !important; } html body .mobile-header-v2 .mobile-header-v2-inner > .site-search button[type="submit"] { position: absolute !important; top: 3px !important; right: 3px !important; width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; background: #ea6d00 !important; border: 0 !important; border-radius: 50% !important; color: transparent !important; font-size: 0 !important; box-shadow: 0 4px 10px rgba(234,109,0,.20) !important; } /* Electro genera la lupa con este pseudo-elemento */ html body .mobile-header-v2 .mobile-header-v2-inner > .site-search button[type="submit"]::after { color: #ffffff !important; font-size: 17px !important; } /* Departamento vacío permanece oculto */ html body .mobile-header-v2 .mobile-handheld-department { display: none !important; } } /* ========================================================= MOVILES ESTRECHOS ========================================================= */ @media (max-width: 374.98px) { html body .mobile-header-v2 .header-logo-link { width: 120px !important; max-width: 120px !important; } html body .mobile-header-v2 .header-logo-link img { max-width: 120px !important; } } /* ========================================================= ULTRAPC HEADER MOBILE 2026 FIX - LUPA BUSCADOR ========================================================= */ @media (max-width: 767.98px) { html body .mobile-header-v2 .mobile-header-v2-inner > .site-search button[type="submit"] { position: absolute !important; top: 3px !important; right: 3px !important; width: 38px !important; height: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: #ea6d00 !important; border: 0 !important; border-radius: 50% !important; color: transparent !important; font-size: 0 !important; box-shadow: 0 4px 10px rgba(234,109,0,.22) !important; } html body .mobile-header-v2 .mobile-header-v2-inner > .site-search button[type="submit"]::before { content: "\f002" !important; display: block !important; font-family: "Font Awesome 5 Free" !important; font-size: 15px !important; font-weight: 900 !important; line-height: 1 !important; color: #ffffff !important; } /* Desactivar cualquier icono heredado de Electro */ html body .mobile-header-v2 .mobile-header-v2-inner > .site-search button[type="submit"]::after { content: none !important; display: none !important; } } /* ========================================================= ULTRAPC HEADER MOBILE 2026 FIX DEFINITIVO - BOTON BUSQUEDA ========================================================= */ @media (max-width: 767.98px) { html body .site-header.mobile-header-v2 .mobile-header-v2-inner > .site-search .widget.woocommerce.widget_product_search form.woocommerce-product-search button[type="submit"] { position: absolute !important; top: 3px !important; right: 3px !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; display: block !important; margin: 0 !important; padding: 0 !important; background: #ea6d00 !important; background-color: #ea6d00 !important; background-image: none !important; border: 0 !important; border-radius: 50% !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; box-shadow: 0 4px 11px rgba(234,109,0,.24) !important; overflow: visible !important; z-index: 5 !important; } /* Círculo de la lupa */ html body .site-header.mobile-header-v2 .mobile-header-v2-inner > .site-search .widget.woocommerce.widget_product_search form.woocommerce-product-search button[type="submit"]::before { content: "" !important; position: absolute !important; left: 11px !important; top: 10px !important; width: 11px !important; height: 11px !important; display: block !important; background: transparent !important; border: 2px solid #ffffff !important; border-radius: 50% !important; box-sizing: border-box !important; } /* Mango de la lupa */ html body .site-header.mobile-header-v2 .mobile-header-v2-inner > .site-search .widget.woocommerce.widget_product_search form.woocommerce-product-search button[type="submit"]::after { content: "" !important; position: absolute !important; left: 22px !important; top: 22px !important; width: 8px !important; height: 2px !important; display: block !important; background: #ffffff !important; border: 0 !important; border-radius: 2px !important; transform: rotate(45deg) !important; transform-origin: left center !important; } } /* ========================================================= ULTRAPC HEADER MOBILE 2026 FIX REAL - BOTON BUSQUEDA SEGUN DOM ACTUAL ========================================================= */ @media (max-width: 767.98px) { html body .mobile-header-v2 .mobile-header-v2-inner > .site-search .widget.woocommerce.widget_product_search form.woocommerce-product-search button[type="submit"] { position: absolute !important; top: 3px !important; right: 3px !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; display: block !important; margin: 0 !important; padding: 0 !important; background: #ea6d00 !important; background-color: #ea6d00 !important; background-image: none !important; border: 0 !important; border-radius: 50% !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; box-shadow: 0 4px 11px rgba(234,109,0,.24) !important; overflow: visible !important; z-index: 20 !important; } /* Círculo de la lupa */ html body .mobile-header-v2 .mobile-header-v2-inner > .site-search .widget.woocommerce.widget_product_search form.woocommerce-product-search button[type="submit"]::before { content: "" !important; position: absolute !important; left: 10px !important; top: 9px !important; width: 12px !important; height: 12px !important; display: block !important; background: transparent !important; border: 2px solid #ffffff !important; border-radius: 50% !important; box-sizing: border-box !important; } /* Mango */ html body .mobile-header-v2 .mobile-header-v2-inner > .site-search .widget.woocommerce.widget_product_search form.woocommerce-product-search button[type="submit"]::after { content: "" !important; position: absolute !important; left: 22px !important; top: 22px !important; width: 8px !important; height: 2px !important; display: block !important; background: #ffffff !important; border: 0 !important; border-radius: 2px !important; transform: rotate(45deg) !important; transform-origin: left center !important; } } /* ========================================================= ULTRAPC - CABECERA STICKY DESKTOP V4 SOLO: 1. Barra informativa 2. Top Bar 3. Masthead (logo + buscador + iconos) La barra de categorías NO forma parte del sticky. ========================================================= */ @media (min-width: 1200px) { /* Espaciadores individuales: evitan saltos de página */ #upc-info-spacer, #upc-topbar-spacer, #upc-masthead-spacer { display: block; width: 100%; height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; } /* ===================================================== 1. BARRA AZUL SUPERIOR ===================================================== */ html body.upc-full-header-sticky .upc-info-bar { position: fixed !important; top: var(--upc-admin-h, 0px) !important; right: 0 !important; left: 0 !important; width: 100% !important; z-index: 12030 !important; } /* ===================================================== 2. TOP BAR ===================================================== */ html body.upc-full-header-sticky .top-bar { position: fixed !important; top: calc( var(--upc-admin-h, 0px) + var(--upc-info-h, 32px) ) !important; right: 0 !important; left: 0 !important; width: 100% !important; z-index: 12020 !important; } /* ===================================================== 3. SOLO .masthead NO #masthead completo ===================================================== */ html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead { position: fixed !important; top: calc( var(--upc-admin-h, 0px) + var(--upc-info-h, 32px) + var(--upc-topbar-h, 40px) ) !important; left: var(--upc-mast-left, 0px) !important; right: auto !important; width: var(--upc-mast-width, 100%) !important; height: var(--upc-mast-h, auto) !important; margin: 0 !important; background: #ffffff !important; z-index: 12010 !important; transform: none !important; animation: none !important; } /* Sombra inferior del bloque fijo */ html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead { box-shadow: 0 6px 16px rgba(41,28,53,.07) !important; } /* * IMPORTANTE: * La navegación azul inferior permanece normal. */ html body #masthead.site-header.header-v3 .electro-navbar-primary { position: relative !important; top: auto !important; z-index: 100 !important; } } /* ========================================================= ULTRAPC - STICKY V4 FONDO MASTHEAD A TODO EL ANCHO ========================================================= */ @media (min-width: 1200px) { html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead { background: transparent !important; box-shadow: none !important; overflow: visible !important; isolation: isolate; } html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #ffffff; box-shadow: 0 5px 14px rgba(41,28,53,.07); z-index: -1; pointer-events: none; } } /* ========================================================= ULTRAPC - OCULTAR TIENDA EN TOP BAR ========================================================= */ @media (min-width: 1200px) { html body .top-bar #menu-contacto #menu-item-31456 { display: none !important; } } /* ========================================================= ULTRAPC HEADER MOBILE 2026 TOP INFO BAR - PULIDO FINAL ========================================================= */ @media (max-width: 767.98px) { /* ===================================================== 1. FRANJA GENERAL ===================================================== */ html body .upc-info-bar { min-height: 26px !important; background: linear-gradient( 90deg, #451e68 0%, #e06800 50%, #451e68 100% ) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 6px rgba(41,18,62,.08) !important; } /* ===================================================== 2. CONTENEDOR ===================================================== */ html body .upc-info-bar__inner { height: 26px !important; padding: 0 10px !important; } html body .upc-info-bar__items { height: 26px !important; } /* ===================================================== 3. MENSAJES ===================================================== */ html body .upc-info-bar__item { height: 26px !important; gap: 5px !important; padding: 0 5px !important; color: #ffffff !important; font-size: 11.2px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: .02px !important; text-shadow: 0 1px 1px rgba(36,16,54,.08) !important; } html body .upc-info-bar__item strong { color: #ffffff !important; font-weight: 750 !important; } /* ===================================================== 4. ICONOS ===================================================== */ html body .upc-info-bar__item i { font-size: 10.5px !important; opacity: .90 !important; transform: translateY(-.2px); } /* ===================================================== 5. TRANSICIÓN ===================================================== */ @keyframes upcInfoBarRotateMobile2026 { 0% { opacity: 0; transform: translateY(3px); } 2% { opacity: 1; transform: translateY(0); } 16% { opacity: 1; transform: translateY(0); } 19% { opacity: 0; transform: translateY(-3px); } 100% { opacity: 0; transform: translateY(-3px); } } html body .upc-info-bar__item { animation-name: upcInfoBarRotateMobile2026 !important; animation-duration: 20s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } /* Mantener exactamente los 5 turnos */ html body .upc-info-bar__item:nth-child(1) { animation-delay: 0s !important; } html body .upc-info-bar__item:nth-child(2) { animation-delay: 4s !important; } html body .upc-info-bar__item:nth-child(3) { animation-delay: 8s !important; } html body .upc-info-bar__item:nth-child(4) { animation-delay: 12s !important; } html body .upc-info-bar__item:nth-child(5) { animation-delay: 16s !important; } } /* ========================================================= TELEFONOS MUY ESTRECHOS ========================================================= */ @media (max-width: 359.98px) { html body .upc-info-bar__item { font-size: 10.5px !important; gap: 4px !important; } html body .upc-info-bar__item i { font-size: 10px !important; } } /* ========================================================= ACCESIBILIDAD ========================================================= */ @media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { html body .upc-info-bar__item { animation: none !important; } } /* ========================================================= ULTRAPC HEADER MOBILE 2026 PULIDO FINAL ========================================================= */ @media (max-width: 767.98px) { /* ===================================================== 1. SEPARACIÓN INFO BAR / HEADER ===================================================== */ html body .upc-info-bar { border-bottom: 1px solid rgba(255,255,255,.12) !important; } /* ===================================================== 2. HEADER PRINCIPAL ===================================================== */ html body .mobile-header-v2 { position: relative !important; box-shadow: 0 5px 14px rgba(58,25,87,.13) !important; } html body .mobile-header-v2 > .container { padding: 7px 14px 9px !important; } /* Línea inferior muy sutil */ html body .mobile-header-v2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(39,17,58,.08); pointer-events: none; } /* ===================================================== 3. FILA SUPERIOR ===================================================== */ html body .mobile-header-v2 .mobile-header-v2-inner { column-gap: 9px !important; row-gap: 7px !important; } /* ===================================================== 4. HAMBURGUESA + CUENTA + CARRITO ===================================================== */ html body .mobile-header-v2 .navbar-toggle-hamburger, html body .mobile-header-v2 .navbar-toggle-close, html body .mobile-header-v2 .handheld-header-links > ul > li.my-account > a, html body .mobile-header-v2 .handheld-header-links > ul > li.cart > a { transition: background-color .16s ease, border-color .16s ease, transform .12s ease !important; } html body .mobile-header-v2 .navbar-toggle-hamburger:active, html body .mobile-header-v2 .handheld-header-links > ul > li.my-account > a:active, html body .mobile-header-v2 .handheld-header-links > ul > li.cart > a:active { transform: scale(.94) !important; background: rgba(255,255,255,.15) !important; } /* ===================================================== 5. LOGO ===================================================== */ html body .mobile-header-v2 .header-logo-link, html body .mobile-header-v2 .header-logo-link img { vertical-align: middle !important; } /* ===================================================== 6. BUSCADOR ===================================================== */ html body .mobile-header-v2 .mobile-header-v2-inner > .site-search form { border: 1px solid rgba(238,233,228,.95) !important; box-shadow: 0 3px 10px rgba(44,19,66,.11), 0 1px 2px rgba(28,21,35,.04) !important; transition: box-shadow .18s ease, border-color .18s ease !important; } html body .mobile-header-v2 .mobile-header-v2-inner > .site-search form:focus-within { border-color: rgba(255,255,255,1) !important; box-shadow: 0 4px 14px rgba(44,19,66,.16), 0 0 0 2px rgba(255,255,255,.12) !important; } /* Botón lupa */ html body .mobile-header-v2 .mobile-header-v2-inner > .site-search .widget.woocommerce.widget_product_search form.woocommerce-product-search button[type="submit"] { transition: transform .12s ease, box-shadow .16s ease !important; } html body .mobile-header-v2 .mobile-header-v2-inner > .site-search .widget.woocommerce.widget_product_search form.woocommerce-product-search button[type="submit"]:active { transform: scale(.92) !important; box-shadow: 0 2px 6px rgba(234,109,0,.20) !important; } /* ===================================================== 7. CONTADOR DEL CARRITO ===================================================== */ html body .mobile-header-v2 .handheld-header-links .cart .count { box-shadow: 0 2px 6px rgba(47,20,70,.20) !important; } } /* ========================================================= ACCESIBILIDAD - SIN ANIMACIONES DE INTERACCIÓN ========================================================= */ @media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { html body .mobile-header-v2 *, html body .mobile-header-v2 *::before, html body .mobile-header-v2 *::after { transition: none !important; } } /* ========================================================= ULTRAPC HEADER 2026 TOOLTIPS ICONOS HEADER ========================================================= */ body .site-header .tooltip, body .site-header .ui-tooltip { z-index: 99999 !important; } /* Caja principal del tooltip */ body .site-header .tooltip .tooltip-inner, body .site-header .tooltip-inner, body .site-header .ui-tooltip { background: #ea6d00 !important; color: #ffffff !important; border: 2px solid #ffffff !important; border-radius: 10px !important; padding: 8px 12px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.1 !important; text-align: center !important; box-shadow: 0 8px 18px rgba(234,109,0, .28) !important; } /* Flecha - Bootstrap 4 */ body .site-header .bs-tooltip-bottom .arrow::before, body .site-header .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } body .site-header .bs-tooltip-top .arrow::before, body .site-header .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } body .site-header .bs-tooltip-left .arrow::before, body .site-header .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } body .site-header .bs-tooltip-right .arrow::before, body .site-header .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } /* Flecha - Bootstrap 5 */ body .site-header .bs-tooltip-bottom .tooltip-arrow::before, body .site-header .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } body .site-header .bs-tooltip-top .tooltip-arrow::before, body .site-header .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } body .site-header .bs-tooltip-start .tooltip-arrow::before, body .site-header .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } body .site-header .bs-tooltip-end .tooltip-arrow::before, body .site-header .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } /* ========================================================= ULTRAPC HEADER 2026 TOOLTIPS ICONOS HEADER ========================================================= */ body .site-header .tooltip, body .site-header .ui-tooltip { z-index: 99999 !important; } /* Caja principal del tooltip */ body .site-header .tooltip .tooltip-inner, body .site-header .tooltip-inner, body .site-header .ui-tooltip { background: #ea6d00 !important; color: #ffffff !important; border: 2px solid #ffffff !important; border-radius: 10px !important; padding: 8px 12px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.1 !important; text-align: center !important; box-shadow: 0 8px 18px rgba(234,109,0, .28) !important; } /* Flecha - Bootstrap 4 */ body .site-header .bs-tooltip-bottom .arrow::before, body .site-header .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } body .site-header .bs-tooltip-top .arrow::before, body .site-header .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } body .site-header .bs-tooltip-left .arrow::before, body .site-header .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } body .site-header .bs-tooltip-right .arrow::before, body .site-header .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } /* Flecha - Bootstrap 5 */ body .site-header .bs-tooltip-bottom .tooltip-arrow::before, body .site-header .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } body .site-header .bs-tooltip-top .tooltip-arrow::before, body .site-header .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } body .site-header .bs-tooltip-start .tooltip-arrow::before, body .site-header .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } body .site-header .bs-tooltip-end .tooltip-arrow::before, body .site-header .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: #ea6d00 !important; filter: drop-shadow(0 0 1px #ffffff); } /* ========================================================= ULTRAPC - TOOLTIP COMPARAR / HEADER CORRECCION REAL BOOTSTRAP ========================================================= */ html body .tooltip { z-index: 100000 !important; } html body .tooltip .tooltip-inner { background: #ea6d00 !important; background-color: #ea6d00 !important; color: #ffffff !important; border: 2px solid #ffffff !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.15 !important; box-shadow: 0 5px 14px rgba(47,20,70, .22) !important; } /* ========================================================= FLECHA BOOTSTRAP 5 ========================================================= */ html body .bs-tooltip-bottom .tooltip-arrow::before, html body .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: #ea6d00 !important; } html body .bs-tooltip-top .tooltip-arrow::before, html body .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: #ea6d00 !important; } html body .bs-tooltip-start .tooltip-arrow::before, html body .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: #ea6d00 !important; } html body .bs-tooltip-end .tooltip-arrow::before, html body .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: #ea6d00 !important; } /* ========================================================= FLECHA BOOTSTRAP 4 ========================================================= */ html body .bs-tooltip-bottom .arrow::before { border-bottom-color: #ea6d00 !important; } html body .bs-tooltip-top .arrow::before { border-top-color: #ea6d00 !important; } html body .bs-tooltip-left .arrow::before { border-left-color: #ea6d00 !important; } html body .bs-tooltip-right .arrow::before { border-right-color: #ea6d00 !important; } /* ========================================================= ULTRAPC TOP INFO BAR MAYOR NITIDEZ TIPOGRAFICA ========================================================= */ @media (min-width: 768px) { html body .upc-info-bar__item { font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-shadow: none !important; text-rendering: geometricPrecision; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; transform: none !important; } html body .upc-info-bar__item span { color: #ffffff !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: 0 !important; text-shadow: none !important; transform: none !important; } html body .upc-info-bar__item strong { color: #ffffff !important; font-weight: 700 !important; letter-spacing: 0 !important; text-shadow: none !important; } html body .upc-info-bar__item i { font-size: 11px !important; opacity: 1 !important; text-shadow: none !important; transform: none !important; } } /* ========================================================= ULTRAPC TOP INFO BAR NITIDEZ FINAL ESCRITORIO ========================================================= */ @media (min-width: 768px) { html body .upc-info-bar__inner, html body .upc-info-bar__items, html body .upc-info-bar__item { height: 34px !important; min-height: 34px !important; } html body .upc-info-bar__item { padding-left: 18px !important; padding-right: 18px !important; gap: 6px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 34px !important; letter-spacing: 0 !important; text-shadow: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html body .upc-info-bar__item span, html body .upc-info-bar__item strong { font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: none !important; } html body .upc-info-bar__item span { font-weight: 700 !important; } html body .upc-info-bar__item strong { font-weight: 700 !important; } html body .upc-info-bar__item i { font-size: 12px !important; line-height: 1 !important; opacity: 1 !important; filter: none !important; text-shadow: none !important; } } /* ========================================================= ULTRAPC HEADER 2026 STICKY DESKTOP - MASTHEAD COMPACTO ========================================================= */ @media (min-width: 1200px) { /* ===================================================== 1. ALTURA GENERAL DEL BLOQUE BLANCO ===================================================== */ html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead { height: 92px !important; min-height: 92px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ===================================================== 2. CONTENEDOR INTERIOR ===================================================== */ html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead > .container { height: 92px !important; min-height: 92px !important; display: flex !important; align-items: center !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ===================================================== 3. LOGO ===================================================== */ html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-logo-area { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-logo-link img { max-height: 62px !important; width: auto !important; object-fit: contain; } /* ===================================================== 4. BUSCADOR ===================================================== */ html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .site-search form { height: 44px !important; min-height: 44px !important; } html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .site-search input[type="search"] { height: 42px !important; min-height: 42px !important; } /* ===================================================== 5. CENTRADO VERTICAL DE ICONOS ===================================================== */ html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-icons, html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-icon { align-self: center !important; margin-top: 0 !important; margin-bottom: 0 !important; } } /* ========================================================= ULTRAPC HEADER 2026 STICKY DESKTOP - COMPACTO 84PX ========================================================= */ @media (min-width: 1200px) { html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead { height: 84px !important; min-height: 84px !important; } html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead > .container { height: 84px !important; min-height: 84px !important; } /* Logo */ html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-logo-link img { max-height: 56px !important; } /* Buscador */ html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .site-search form { height: 42px !important; min-height: 42px !important; } html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .site-search input[type="search"] { height: 40px !important; min-height: 40px !important; } } /* ========================================================= ULTRAPC HEADER 2026 STICKY DESKTOP - COMPACTO 78PX ========================================================= */ @media (min-width: 1200px) { html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead { height: 78px !important; min-height: 78px !important; } html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead > .container { height: 78px !important; min-height: 78px !important; } /* Logo */ html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-logo-link img { max-height: 50px !important; } /* Buscador */ html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .site-search form { height: 40px !important; min-height: 40px !important; } html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .site-search input[type="search"] { height: 38px !important; min-height: 38px !important; } /* Mantener centrado vertical */ html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-logo-area, html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .site-search, html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-icons { margin-top: 0 !important; margin-bottom: 0 !important; align-self: center !important; } } /* ========================================================= ULTRAPC - NITIDEZ MENU PRINCIPAL 26-08-2026 ========================================================= */ @media (min-width: 1200px) { body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li.menu-item > a { transform: none !important; filter: none !important; opacity: 1 !important; text-shadow: none !important; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; } body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li.menu-item > a:hover, body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li.menu-item:hover > a { transform: none !important; } } /* ========================================================= ULTRAPC - MENU PRINCIPAL MAS NITIDO Tipografia alineada con Top Info Bar ========================================================= */ @media (min-width: 1200px) { body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li.menu-item > a { font-family: "Roboto", Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-rendering: auto !important; -webkit-font-smoothing: auto !important; -moz-osx-font-smoothing: auto !important; transform: none !important; filter: none !important; text-shadow: none !important; } } /* ========================================================= ULTRAPC - FLECHA CATEGORIAS CLICKEABLE El botón JS se coloca sobre el chevron existente ========================================================= */ @media (min-width: 1200px) { html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-parent { position: relative !important; } /* * Botón transparente encima de la flecha. * No modifica el diseño visual existente. */ html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-parent > .upc-category-toggle { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 36px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer !important; z-index: 20 !important; font-size: 0 !important; line-height: 0 !important; } /* Al abrir, el chevron apunta hacia abajo */ html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-parent.upc-cat-open > a::before { transform: translateY(-50%) rotate(135deg) !important; } /* Accesibilidad al navegar con teclado */ html body .electro-navbar-primary #menu-item-37636 .product-categories > li.cat-parent > .upc-category-toggle:focus-visible { outline: 2px solid #ea6d00 !important; outline-offset: -4px !important; border-radius: 6px !important; } } /* ========================================================= ULTRAPC - ALINEACION UNIFORME SUBCATEGORIAS Elimina espaciador legacy .no-child ========================================================= */ @media (min-width: 1200px) { html body .electro-navbar-primary #menu-item-37636 .product-categories ul.children > li.cat-item > a > span.no-child { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= ULTRAPC - MEGAMENU NOTEBOOKS / PC & AIO DISTRIBUCION EXCLUSIVA 4 x 2 ========================================================= */ @media (min-width: 768px) { html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-36229 > ul.dropdown-menu #lista_categorias ul.categories { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; width: 100% !important; margin: 0 !important; padding: 0 !important; column-gap: 20px !important; row-gap: 28px !important; overflow: visible !important; } html body .electro-navbar-primary #menu-02-menu-principal-debajo-del-header > li#menu-item-36229 > ul.dropdown-menu #lista_categorias ul.categories > li.category { width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= ULTRAPC HEADER 2026 STICKY - REDUCIR ESPACIO LOGO / BUSCADOR 31-08-2026 ========================================================= */ @media (min-width: 1200px) { html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-logo-area { flex: 0 0 165px !important; width: 165px !important; min-width: 165px !important; max-width: 165px !important; } html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-logo-link { width: auto !important; max-width: 155px !important; } } /* ========================================================= ULTRAPC HEADER 2026 STICKY - REDUCIR ESPACIO LOGO / BUSCADOR 31-08-2026 ========================================================= */ @media (min-width: 1200px) { html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-logo-area { flex: 0 0 165px !important; width: 165px !important; min-width: 165px !important; max-width: 165px !important; } html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-logo-link { width: auto !important; max-width: 155px !important; } } /* ========================================================= ULTRAPC HEADER 2026 STICKY - AJUSTE FINO LOGO MAS GRANDE Y MAS JUNTO 31-08-2026 ========================================================= */ @media (min-width: 1200px) { html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead { column-gap: 12px !important; } html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-logo-area { flex: 0 0 175px !important; width: 175px !important; min-width: 175px !important; max-width: 175px !important; } html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-logo-link { width: 170px !important; max-width: 170px !important; } html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-logo-link img, html body.upc-full-header-sticky #masthead.site-header.header-v3 .masthead .header-logo-link svg { max-height: 56px !important; } }