/* ===== SRP Commerce Suite — Header v2 (v1.7.0) ===== Barra fija tipo app: logo · menú (ekit, movido por JS) · buscador · idioma · cuenta · carrito con contador/total. Overlays: buscador en vivo y mini-carrito. Tokens: fondo #0A0A0F, hairline rgba(255,255,255,.08), acento #FF6D00, mono 'Share Tech Mono' para cifras. Altura de barra: 56 px (coincide con el top:56px de la sub-navegación sticky de las fichas de producto). */ :root { --srph2-h: 56px; --srph2-ticker: 30px; --srph2-top: 0px; --srph2-accent: #FF6D00; --srph2-bg: #0A0A0F; --srph2-line: rgba(255,255,255,.08); --srph2-text: #F5F5F7; --srph2-muted: #A8A8B0; } body.admin-bar { --srph2-top: 32px; } @media (max-width: 782px) { body.admin-bar { --srph2-top: 46px; } } /* --- Ocultar las filas antiguas del header (se conservan el ticker, el menú ekit (movido) y el panel móvil). --- */ body.srph2-on .srp-tb .srp-ticker, body.srph2-on .srp-tb2 { display: none !important; } body.srph2-on .srpm-header .srpm-announce, body.srph2-on .srpm-header .srpm-bar { display: none !important; } body.srph2-on .elementor-element-11ffd66:not(.srph2-moved) { display: none !important; } /* Reserva de espacio: la barra es fixed. */ body.srph2-on { padding-top: calc(var(--srph2-h) + var(--srph2-ticker)); scroll-padding-top: calc(var(--srph2-h) + 8px); } body.srph2-on.srph2-scrolled { --srph2-ticker: 0px; } body.srph2-on.srph2-noticker { --srph2-ticker: 0px; } @media (prefers-reduced-motion: no-preference) { body.srph2-on { transition: padding-top .25s ease; } } /* --- Contenedor fijo --- */ .srph2 { position: fixed; top: var(--srph2-top); left: 0; right: 0; z-index: 9000; background: var(--srph2-bg); color: var(--srph2-text); border-bottom: 1px solid var(--srph2-line); } .srph2 *, .srph2 *::before, .srph2 *::after { box-sizing: border-box; } .srph2 a { color: inherit; text-decoration: none; } .srph2-inner { max-width: 1440px; margin: 0 auto; padding: 0 20px; height: var(--srph2-h); display: flex; align-items: center; gap: 14px; } /* Ticker: 5 mensajes, uno visible cada vez (sin marquesina infinita). Se pliega al hacer scroll. */ .srph2-ticker { height: var(--srph2-ticker); overflow: hidden; border-bottom: 1px solid var(--srph2-line); background: #0d0d12; transition: height .25s ease; } .srph2-ticker-list { list-style: none; margin: 0; padding: 0; position: relative; height: 30px; max-width: 1440px; margin: 0 auto; } .srph2-ticker-list li { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--srph2-muted); opacity: 0; transition: opacity .4s ease; padding: 0 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .srph2-ticker-list li.is-on { opacity: 1; } .srph2-ticker-list li::before { content: "["; color: var(--srph2-accent); margin-right: 8px; } .srph2-ticker-list li::after { content: "]"; color: var(--srph2-accent); margin-left: 8px; } /* Logo */ .srph2-logo { display: inline-flex; align-items: center; flex: 0 0 auto; } .srph2-logo img { width: auto; height: 32px; display: block; } /* Botones de icono */ .srph2-ic { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--srph2-text); font: inherit; font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .srph2-ic svg { width: 20px; height: 20px; flex: 0 0 auto; } .srph2-ic-label { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } @media (hover: hover) and (pointer: fine) { .srph2-ic:hover { background: rgba(255,255,255,.06); border-color: var(--srph2-line); } } .srph2-ic:focus-visible, .srph2 a:focus-visible, .srph2-search input:focus-visible, .srph2-mini a:focus-visible, .srph2-mini button:focus-visible { outline: 2px solid var(--srph2-accent); outline-offset: 2px; } /* Lado derecho */ .srph2-right { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } /* Carrito: contador en badge + total mono naranja */ .srph2-cart-btn { position: relative; } .srph2-cart-meta { display: inline-flex; align-items: center; gap: 8px; } .srph2-cart-count { display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--srph2-accent); color: #101014; font-family: 'Share Tech Mono', monospace; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; position: absolute; top: 2px; left: 22px; } .srph2-cart-meta.has-items .srph2-cart-count { display: inline-block; } .srph2-cart-total { font-family: 'Share Tech Mono', monospace; font-size: 13px; color: var(--srph2-accent); font-variant-numeric: tabular-nums; white-space: nowrap; } .srph2-cart-meta:not(.has-items) .srph2-cart-total { display: none; } .srph2-cart-btn.is-bump svg { animation: srph2-bump .45s ease; } @keyframes srph2-bump { 30% { transform: scale(1.18); } 100% { transform: none; } } /* Idioma */ .srph2-lang { position: relative; } .srph2-lang-cur { font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: .12em; } .srph2-lang-list { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; margin: 0; padding: 6px; list-style: none; background: #141419; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.55); z-index: 10; } .srph2-lang-list[hidden] { display: none; } .srph2-lang-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 14px; } .srph2-lang-list a span { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--srph2-muted); letter-spacing: .1em; } .srph2-lang-list a.is-current { color: var(--srph2-accent); } .srph2-lang-list a.is-current::after { content: "✓"; } @media (hover: hover) and (pointer: fine) { .srph2-lang-list a:hover { background: rgba(255,255,255,.06); } } /* Cuenta: menú desplegable al hover/focus (logueado) */ .srph2-account { position: relative; } .srph2-account-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; padding: 6px; background: #141419; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.55); display: none; z-index: 10; } .srph2-account:hover .srph2-account-menu, .srph2-account:focus-within .srph2-account-menu, .srph2-account.is-open .srph2-account-menu { display: block; } .srph2-account-menu a { display: block; padding: 9px 10px; border-radius: 8px; font-size: 14px; } .srph2-account-menu a.is-logout { color: var(--srph2-muted); border-top: 1px solid var(--srph2-line); margin-top: 4px; padding-top: 10px; border-radius: 0 0 8px 8px; } @media (hover: hover) and (pointer: fine) { .srph2-account-menu a:hover { background: rgba(255,255,255,.06); } } /* Burger (solo móvil) */ .srph2-burger { flex-direction: column; justify-content: center; gap: 5px; width: 44px; padding: 0; display: none; } .srph2-burger span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .srph2-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .srph2-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .srph2-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- Menú ekit dentro de la barra (escritorio) --- */ .srph2-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; align-self: stretch; } .srph2-nav .elementor-element-11ffd66 { width: auto !important; margin: 0 !important; } .srph2-nav .elementskit-navbar-nav { display: flex; align-items: stretch; height: var(--srph2-h); } .srph2-nav .elementskit-navbar-nav > li { display: flex; align-items: center; position: static !important; } .srph2-nav .elementskit-navbar-nav > li > a { padding: 0 14px !important; height: var(--srph2-h) !important; display: inline-flex !important; align-items: center; font-family: 'Share Tech Mono', monospace !important; font-size: 12px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--srph2-text) !important; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .srph2-nav .elementskit-navbar-nav > li:hover > a, .srph2-nav .elementskit-navbar-nav > li.current-menu-item > a, .srph2-nav .elementskit-navbar-nav > li.current-menu-ancestor > a, .srph2-nav .elementskit-navbar-nav > li.is-active > a { color: var(--srph2-accent) !important; border-bottom-color: var(--srph2-accent); } .srph2-nav .elementskit-navbar-nav > li > a .elementskit-submenu-indicator, .srph2-nav .elementskit-navbar-nav > li > a .icon-ekit { display: none !important; } /* Mega-panel: siempre DEBAJO de la barra, a todo el ancho de la barra, nunca tapando los ítems. */ .srph2-nav .elementskit-megamenu-panel { position: absolute !important; left: 0 !important; right: 0 !important; top: 100% !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; transform: none !important; border-top: 1px solid var(--srph2-line); box-shadow: 0 24px 60px rgba(0,0,0,.6); max-height: calc(100vh - var(--srph2-h) - var(--srph2-top) - 16px); overflow: auto; overscroll-behavior: contain; } .srph2-bar { position: relative; } /* --- Overlay --- */ .srph2-overlay { position: fixed; inset: 0; z-index: 8990; background: rgba(5,5,8,.62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .srph2-overlay[hidden] { display: none; } /* --- Buscador --- */ .srph2-search { position: fixed; top: var(--srph2-top); left: 0; right: 0; z-index: 9100; background: var(--srph2-bg); border-bottom: 1px solid var(--srph2-line); box-shadow: 0 24px 60px rgba(0,0,0,.6); } .srph2-search[hidden] { display: none; } .srph2-search-box { max-width: 860px; margin: 0 auto; padding: 14px 20px 18px; } .srph2-search-form { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 16px; background: #141419; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; } .srph2-search-form:focus-within { border-color: var(--srph2-accent); box-shadow: 0 0 0 3px rgba(255,109,0,.25); } .srph2-search-form > svg { width: 20px; height: 20px; color: var(--srph2-muted); flex: 0 0 auto; } .srph2-search-form input { flex: 1 1 auto; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: var(--srph2-text); font-size: 16px; } .srph2-search-form input::placeholder { color: #7c7c86; } .srph2-search-form input::-webkit-search-cancel-button { -webkit-appearance: none; } .srph2-search-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; } .srph2-search-quick span { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--srph2-muted); margin-right: 4px; } .srph2-search-quick a { padding: 6px 12px; border: 1px solid var(--srph2-line); border-radius: 999px; font-size: 13px; color: var(--srph2-text); } @media (hover: hover) and (pointer: fine) { .srph2-search-quick a:hover { border-color: var(--srph2-accent); color: var(--srph2-accent); } } .srph2-search-results { margin-top: 10px; } .srph2-search-status { padding: 14px 4px; color: var(--srph2-muted); font-size: 14px; } .srph2-results-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .srph2-result { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--srph2-line); border-radius: 12px; min-width: 0; } .srph2-result img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: #1a1a1f; flex: 0 0 auto; } .srph2-result-t { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srph2-result-p { display: block; font-family: 'Share Tech Mono', monospace; font-size: 12.5px; color: var(--srph2-accent); margin-top: 3px; } .srph2-result-p del { color: var(--srph2-muted); margin-right: 6px; } .srph2-result.is-focus, .srph2-result:hover { border-color: var(--srph2-accent); background: rgba(255,109,0,.06); } .srph2-results-all { display: block; margin-top: 10px; text-align: center; color: var(--srph2-accent); font-size: 13.5px; text-decoration: underline; padding: 8px; } /* --- Mini-carrito --- */ .srph2-mini { position: fixed; top: var(--srph2-top); right: 0; bottom: 0; width: min(420px, 100vw); z-index: 9100; background: var(--srph2-bg); border-left: 1px solid var(--srph2-line); box-shadow: -24px 0 60px rgba(0,0,0,.6); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s ease; padding-bottom: env(safe-area-inset-bottom); overscroll-behavior: contain; } .srph2-mini[hidden] { display: flex; pointer-events: none; } .srph2-mini.is-open { transform: none; } .srph2-mini-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--srph2-line); } .srph2-mini-head strong { font-size: 16px; } .srph2-mini-body { flex: 1 1 auto; overflow: auto; padding: 8px 20px; } .srph2-mini-body .woocommerce-mini-cart__buttons, .srph2-mini-body .woocommerce-mini-cart__total { display: none !important; } .srph2-mini-body ul.woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; } .srph2-mini-body li.woocommerce-mini-cart-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--srph2-line); position: relative; } .srph2-mini-body li.woocommerce-mini-cart-item a.remove { position: absolute; right: 0; top: 10px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--srph2-line); color: var(--srph2-muted) !important; text-align: center; line-height: 22px; font-size: 16px; background: transparent !important; } .srph2-mini-body li.woocommerce-mini-cart-item a.remove:hover { color: #ff5964 !important; border-color: #ff5964; } .srph2-mini-body li.woocommerce-mini-cart-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; grid-row: 1 / span 2; float: none !important; margin: 0 !important; } .srph2-mini-body li.woocommerce-mini-cart-item > a:not(.remove) { font-size: 14px; font-weight: 600; color: var(--srph2-text); padding-right: 28px; line-height: 1.3; } .srph2-mini-body li.woocommerce-mini-cart-item .quantity { grid-column: 2; font-family: 'Share Tech Mono', monospace; font-size: 13px; color: var(--srph2-muted); } .srph2-mini-body li.woocommerce-mini-cart-item .quantity .amount { color: var(--srph2-accent); } .srph2-mini-body dl.variation { grid-column: 2; margin: 4px 0 0; font-size: 12px; color: var(--srph2-muted); display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; } .srph2-mini-body dl.variation dt, .srph2-mini-body dl.variation dd { margin: 0; } .srph2-mini-body dl.variation p { margin: 0; } .srph2-mini-body .woocommerce-mini-cart__empty-message { padding: 40px 0; text-align: center; color: var(--srph2-muted); } .srph2-mini-foot { padding: 14px 20px 18px; border-top: 1px solid var(--srph2-line); background: #0d0d12; } .srph2-mini-sub { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--srph2-muted); } .srph2-mini-sub strong { font-family: 'Share Tech Mono', monospace; font-size: 20px; color: var(--srph2-accent); } .srph2-mini-note { margin: 4px 0 12px; font-size: 12px; color: var(--srph2-muted); } .srph2-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px; font-family: 'Share Tech Mono', monospace; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-top: 8px; transition: background-color .15s ease, color .15s ease; } .srph2-btn-primary { background: var(--srph2-accent); color: #101014 !important; } .srph2-btn-ghost { border: 1px solid rgba(255,255,255,.14); color: var(--srph2-text) !important; } @media (hover: hover) and (pointer: fine) { .srph2-btn-primary:hover { background: #ff8a3d; } .srph2-btn-ghost:hover { border-color: var(--srph2-text); } } .srph2-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 9200; background: #141419; color: var(--srph2-text); border: 1px solid rgba(255,109,0,.5); border-left: 3px solid var(--srph2-accent); border-radius: 10px; padding: 10px 16px; font-size: 14px; opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; } .srph2-toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* Mensaje solo para lectores de pantalla */ .srp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Al abrir un overlay: bloquear scroll del fondo */ body.srph2-lock { overflow: hidden; } /* --- Móvil / tablet (≤1024) --- */ @media (max-width: 1024px) { .srph2-inner { padding: 0 10px; gap: 6px; } .srph2-burger { display: inline-flex; } .srph2-nav { display: none; } .srph2-logo { margin-right: auto; } .srph2-logo img { height: 26px; } .srph2-ic { padding: 0 8px; min-width: 40px; justify-content: center; } .srph2-ic-label, .srph2-lang-cur { display: none; } .srph2-cart-total { display: none !important; } .srph2-lang { display: none; } /* en móvil el idioma va dentro del panel (lo inyecta el JS) */ .srph2-account-menu { display: none !important; } .srph2-results-list { grid-template-columns: 1fr; } .srph2-search-box { padding: 10px 12px 14px; } .srph2-search-form { height: 48px; } .srph2-ticker-list li { font-size: 10px; letter-spacing: .1em; } /* Panel móvil existente: lo empujamos bajo la barra y le añadimos idioma + cuenta */ body.srph2-on .srpm-panel { top: calc(var(--srph2-top) + var(--srph2-h)) !important; height: calc(100% - var(--srph2-top) - var(--srph2-h)) !important; } body.srph2-on .srpm-overlay { top: calc(var(--srph2-top) + var(--srph2-h)) !important; } body.srph2-on .srpm-panel-head { display: none !important; } .srph2-mlang { padding: 14px 18px 6px; border-top: 1px solid var(--srph2-line); } .srph2-mlang-t { display: block; font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--srph2-muted); margin-bottom: 8px; } .srph2-mlang-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .srph2-mlang-list a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--srph2-line); border-radius: 999px; font-size: 13px; color: var(--srph2-text); } .srph2-mlang-list a.is-current { border-color: var(--srph2-accent); color: var(--srph2-accent); } } @media (min-width: 1025px) { body.srph2-on .srpm-panel, body.srph2-on .srpm-overlay { display: none !important; } } @media (prefers-reduced-motion: reduce) { .srph2-ticker, .srph2-ticker-list li, .srph2-mini, .srph2-toast, .srph2-burger span, .srph2-ic, body.srph2-on { transition: none; } .srph2-cart-btn.is-bump svg { animation: none; } } /* ========================================================================== v1.7.1 — arreglos integrados (antes snippet "SRP Header v2 - arreglos"): menú en una línea, megamenús a ancho de header, mini-carrito con markup de Elementor Pro, panel móvil bajo ticker, sin rosa del tema, header antiguo a 0. ========================================================================== */ /* 1. Menu en una linea */ body.srph2-on .srph2-nav .elementskit-navbar-nav{flex-wrap:nowrap!important;white-space:nowrap} @media (min-width:1025px) and (max-width:1366px){ body.srph2-on .srph2-inner{gap:8px} body.srph2-on .srph2-nav .elementskit-navbar-nav>li>a{padding:0 9px!important;letter-spacing:.1em!important} body.srph2-on .srph2-ic-label{display:none} } @media (min-width:1025px) and (max-width:1180px){ body.srph2-on .srph2-nav .elementskit-navbar-nav>li>a{padding:0 7px!important;font-size:11px!important;letter-spacing:.06em!important} body.srph2-on .srph2-cart-total,body.srph2-on .srph2-lang-cur{display:none!important} body.srph2-on .srph2-logo img{height:24px;width:auto} } /* 2. Megamenus: ancho del header, no del