/* ========================================================= * Header OZ-Thema-4.0 * Bloque 1: top bar (logo + buscador + cotizar + libreta) * Bloque 2: categorías top-level con dropdown de subcategorías * Bloque 3: menú principal * Mobile-first, responsive ≥768 / ≥1024 / ≥1280 * ========================================================= */ :root { --oz-h-bg-top: #ffffff; --oz-h-bg-bottom: #050705; /* negro premium, no plano */ --oz-h-text-top: #0f1311; --oz-h-text-bottom: #ffffff; --oz-h-accent: #20e457; /* verde marca unificado (sobre verde → negro) */ --oz-h-accent-hover: #16a34a; /* hover: verde más oscuro */ --oz-h-accent-press: #15803d; /* press */ --oz-h-accent-soft: #dcfce7; /* tinte claro para fondos sutiles */ --oz-h-accent-ink: #050705; /* texto/icono SOBRE verde = negro premium */ --oz-h-cat-color: #20e457; /* texto categorías top-level */ --oz-h-cat-hover: #ffffff; /* hover en menú oscuro = blanco puro */ --oz-h-link-bottom: #e8edec; /* color base de links del nav negro */ --oz-h-search-bg: #f4f6f5; /* gris cálido premium */ --oz-h-search-border: #e1e5e3; --oz-h-search-text: #0f1311; --oz-h-search-placeholder: #6b7570; --oz-h-divider: rgba(255,255,255,.10); --oz-h-shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.04); --oz-h-shadow-mega: 0 18px 45px rgba(0,0,0,.12); --oz-h-shadow-cta: 0 6px 16px rgba(32, 228, 87, .28); --oz-h-radius: 12px; --oz-h-radius-card: 18px; --oz-h-trans: .2s ease; /* 200ms */ --oz-h-trans-fast: .18s ease; } /* ---------- Reset puntual ---------- */ .oz-header, .oz-header *, .oz-drawer, .oz-drawer * { box-sizing: border-box; } .oz-header ul, .oz-drawer ul { list-style: none; margin: 0; padding: 0; } .oz-header a, .oz-drawer a { text-decoration: none; color: inherit; } /* Reset de botones tambien en drawers — los movemos a al cargar (header.js) para escapar del stacking context del header fijo, asi que el reset original ".oz-header button" ya no los alcanza y aparecia el borde gris/negro nativo del navegador. */ .oz-header button, .oz-drawer button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; padding: 0; } /* ---------- Layout base ---------- */ .oz-header { /* Header sticky/fixed con auto-hide al hacer scroll hacia abajo. La clase .is-hidden lo desliza fuera de pantalla y .is-scrolled le da una sombra mas marcada cuando el usuario ya se desplazo. */ position: fixed; top: 0; left: 0; right: 0; z-index: 100; box-shadow: var(--oz-h-shadow); background: var(--oz-h-bg-top); transform: translateY(0); transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease; will-change: transform; } /* Cuando WordPress muestra la admin bar (usuario logueado) el body queda empujado 32px hacia abajo (28px en mobile). El header es position:fixed y por defecto se monta sobre la admin bar; ademas el spacer queda 32px mas abajo que el header y deja una franja del body visible. Solucion: bajar el header esos mismos px asi el spacer y el header coinciden. */ body.admin-bar .oz-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .oz-header { top: 46px; } } @media screen and (max-width: 600px) { body.admin-bar .oz-header { top: 0; } } .oz-header.is-hidden { transform: translateY(-100%); } .oz-header.is-scrolled { box-shadow: 0 6px 24px -8px rgba(0, 0, 0, .18); } /* Spacer que reserva el alto del header fijo para que el contenido no quede oculto detras. JS le asigna la altura real del header. No background: cuando el header tapa visualmente el spacer (caso normal) no se ve. Si por algun motivo el spacer queda visible (admin bar, scroll con header oculto, etc.), no debe verse como franja: hereda transparente y permite que el contenido subyacente se note. */ .oz-header-spacer { display: block; width: 100%; flex: 0 0 auto; background: transparent; pointer-events: none; } .oz-header__container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 14px; } /* ========================================================= * BLOQUE 1: top bar * ========================================================= */ .oz-header__top { background: var(--oz-h-bg-top); color: var(--oz-h-text-top); border-bottom: 1px solid #eef0ee; } .oz-header__top .oz-header__container { min-height: 72px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; gap: 12px; } /* Hamburguesa (móvil/tablet) */ .oz-header__hamburger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: var(--oz-h-text-top); flex: 0 0 auto; } .oz-header__hamburger:hover { background: #f1f3f5; } .oz-header__hamburger-bars, .oz-header__hamburger-bars::before, .oz-header__hamburger-bars::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--oz-h-trans), top var(--oz-h-trans), bottom var(--oz-h-trans), opacity var(--oz-h-trans); position: relative; } .oz-header__hamburger-bars::before, .oz-header__hamburger-bars::after { content: ""; position: absolute; left: 0; } .oz-header__hamburger-bars::before { top: -7px; } .oz-header__hamburger-bars::after { bottom: -7px; } .oz-header__hamburger[aria-expanded="true"] .oz-header__hamburger-bars { background: transparent; } .oz-header__hamburger[aria-expanded="true"] .oz-header__hamburger-bars::before { transform: rotate(45deg); top: 0; } .oz-header__hamburger[aria-expanded="true"] .oz-header__hamburger-bars::after { transform: rotate(-45deg); bottom: 0; } /* Logo */ .oz-header__logo { display: flex; align-items: center; flex: 0 0 auto; max-width: 60%; } .oz-header__logo .custom-logo-link, .oz-header__logo a { display: inline-flex; align-items: center; } .oz-header__logo img { height: 44px; width: auto; max-width: 100%; object-fit: contain; display: block; /* Reserva visual para evitar CLS antes de que cargue la imagen */ min-width: 80px; } .oz-header__logo-text { font-weight: 800; font-size: 1.05rem; color: var(--oz-h-text-top); letter-spacing: -.01em; } /* Buscador (live search existente) */ .oz-header__search { order: 3; flex: 1 1 100%; min-width: 0; } .oz-header__search .oz-ls, .oz-header__search .ozpls-figma, .oz-header__search .ozpls-figma__form { width: 100% !important; } .oz-header__search .ozpls-figma__form { position: relative; display: flex; align-items: stretch; width: 100%; margin: 0; background: var(--oz-h-search-bg) !important; border: 1px solid var(--oz-h-search-border) !important; border-radius: 8px !important; overflow: visible !important; transition: border-color var(--oz-h-trans), box-shadow var(--oz-h-trans), background-color var(--oz-h-trans); } .oz-header__search .ozpls-figma__form:hover { border-color: #cfd6d2 !important; } .oz-header__search .ozpls-figma__form:focus-within { background: #ffffff !important; border-color: var(--oz-h-accent) !important; box-shadow: 0 0 0 3px rgba(32, 228, 87, .18); } .oz-header__search .ozpls-figma__inputWrap, .oz-header__search .ozpls-figma__bar { flex: 1 1 auto; min-width: 0; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none; position: relative; } .oz-header__search .ozpls-figma__input, .oz-header__search .ozpls-figma__input:focus, .oz-header__search .ozpls-figma__input:hover, .oz-header__search .ozpls-figma__input:active { width: 100% !important; background: transparent !important; border: none !important; color: var(--oz-h-search-text) !important; -webkit-text-fill-color: var(--oz-h-search-text) !important; border-radius: 8px !important; padding: 0 50px 0 18px !important; font-size: 14px !important; font-weight: 500 !important; box-sizing: border-box !important; outline: none !important; box-shadow: none !important; margin: 0 !important; height: 44px !important; appearance: none !important; } .oz-header__search .ozpls-figma__input::placeholder { color: var(--oz-h-search-placeholder) !important; -webkit-text-fill-color: var(--oz-h-search-placeholder) !important; font-weight: 400 !important; } .oz-header__search .ozpls-figma__btn { position: absolute !important; right: 4px !important; top: 50% !important; transform: translateY(-50%) !important; height: 36px !important; width: 36px !important; background: var(--oz-h-bg-bottom) !important; border: none !important; cursor: pointer !important; z-index: 2 !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; transition: background-color var(--oz-h-trans), transform var(--oz-h-trans) !important; } .oz-header__search .ozpls-figma__btn:hover { background: var(--oz-h-accent-press) !important; } .oz-header__search .ozpls-figma__btn:active { transform: translateY(-50%) scale(.94) !important; } .oz-header__search .ozpls-figma__btn:focus-visible { outline: 2px solid var(--oz-h-accent) !important; outline-offset: 2px !important; } .oz-header__search .ozpls-figma__btnText { display: none !important; } .oz-header__search .ozpls-figma__btn svg, .oz-header__search .ozpls-figma__btn img { display: none !important; } .oz-header__search .ozpls-figma__btn::after { content: ""; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; display: block; } /* Acciones (cotizar + libreta) */ .oz-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; } /* CTA principal: verde + texto negro premium, radio sutil (consistente con el resto de botones de la home), sombra suave en hover. min-height 44px para alinearse con el botón cuadrado de la libreta. */ .oz-header__quote { display: inline-flex; align-items: center; gap: 9px; background: var(--oz-h-accent); color: var(--oz-h-accent-ink); min-height: 44px; padding: 0 18px; border-radius: 8px; font-weight: 700; font-size: 14px; letter-spacing: -.005em; line-height: 1; transition: background-color var(--oz-h-trans), color var(--oz-h-trans), box-shadow var(--oz-h-trans), transform var(--oz-h-trans); } .oz-header__quote:hover { background: var(--oz-h-accent-hover); color: var(--oz-h-accent-ink); box-shadow: var(--oz-h-shadow-cta); transform: translateY(-1px); } .oz-header__quote:focus-visible { outline: 2px solid var(--oz-h-accent-press); outline-offset: 3px; } .oz-header__quote:active { background: var(--oz-h-accent-press); transform: translateY(0); box-shadow: none; } .oz-header__quote-icon { flex: 0 0 auto; color: currentColor; } .oz-header__quote-text { display: none; white-space: nowrap; } /* Libreta: cuadrado negro sólido con radio sutil, mismo lenguaje que el CTA. Nota: usamos `.oz-header .oz-header__notebook-btn` (especificidad 0,2,0) para superar el reset `.oz-header button { background: none }` que es (0,1,1) y de lo contrario gana en cascada. */ .oz-header .oz-header__notebook-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background: var(--oz-h-bg-bottom); border: 1px solid var(--oz-h-bg-bottom); color: #ffffff; transition: background-color var(--oz-h-trans), border-color var(--oz-h-trans), color var(--oz-h-trans), transform var(--oz-h-trans); flex: 0 0 auto; } .oz-header .oz-header__notebook-btn:hover, .oz-header .oz-header__notebook-btn[aria-expanded="true"] { background: var(--oz-h-accent); border-color: var(--oz-h-accent); color: var(--oz-h-accent-ink); transform: translateY(-1px); } .oz-header .oz-header__notebook-btn:active { background: var(--oz-h-accent-press); border-color: var(--oz-h-accent-press); color: var(--oz-h-accent-ink); transform: translateY(0); } .oz-header .oz-header__notebook-btn:focus-visible { outline: 2px solid var(--oz-h-accent); outline-offset: 2px; } /* ========================================================= * BLOQUE 2 + 3: barra inferior (categorías + menú) * ========================================================= */ .oz-header__bottom { display: none; /* en móvil se oculta; va al drawer */ background: var(--oz-h-bg-bottom); color: var(--oz-h-text-bottom); } .oz-header__bottom .oz-header__container { min-height: 52px; gap: 28px; align-items: stretch; } /* ---- Categorías top-level ---- */ .oz-header__cats { flex: 0 0 auto; display: flex; align-items: stretch; } .oz-header__cats-list { display: flex; align-items: stretch; gap: 14px; /* aire claro entre categorías */ } .oz-header__cat { position: relative; display: flex; align-items: stretch; } /* Separador vertical sutil entre categorías, alineado verticalmente */ .oz-header__cat + .oz-header__cat::before { content: ""; position: absolute; top: 50%; left: -7px; /* centrado en el gap (14/2) */ height: 18px; width: 1px; background: var(--oz-h-divider); transform: translateY(-50%); } .oz-header__cat-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; /* respiración interna */ color: var(--oz-h-cat-color); font-weight: 700; font-size: 14px; letter-spacing: .02em; white-space: nowrap; line-height: 1; position: relative; border-radius: 6px 6px 0 0; transition: color var(--oz-h-trans), background-color var(--oz-h-trans); } .oz-header__cat-trigger::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; background: var(--oz-h-accent); border-radius: 3px 3px 0 0; transform: scaleX(0); transform-origin: center; transition: transform var(--oz-h-trans); } .oz-header__cat-trigger:hover, .oz-header__cat-trigger[aria-expanded="true"] { color: #ffffff; background: rgba(255, 255, 255, .06); } .oz-header__cat-trigger:hover::after, .oz-header__cat-trigger[aria-expanded="true"]::after { transform: scaleX(1); } .oz-header__cat-trigger:focus-visible { outline: 2px solid var(--oz-h-accent); outline-offset: -2px; } .oz-header__cat-caret { transition: transform var(--oz-h-trans), color var(--oz-h-trans); color: var(--oz-h-accent); opacity: .85; } .oz-header__cat-trigger:hover .oz-header__cat-caret { opacity: 1; } .oz-header__cat-trigger[aria-expanded="true"] .oz-header__cat-caret { transform: rotate(180deg); color: var(--oz-h-accent); opacity: 1; } /* ========================================================= * MEGAMENÚ (desktop, full-width) * - Panels son hijos directos de .oz-header__bottom (NO de la li trigger) * para poder ocupar 100% del bloque (que es 100vw). * ========================================================= */ .oz-header__bottom { position: relative; } /* anclaje absoluto del megamenu */ /* Wrapper: transparente y full-width, sólo aporta el área de hit/animación */ .jym-megamenu { position: absolute; top: 100%; left: 0; right: 0; width: 100%; background: transparent; color: #0f1311; z-index: 200; max-height: calc(100vh - 180px); overflow-y: auto; padding: 8px clamp(12px, 2vw, 24px) 28px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--oz-h-trans), transform var(--oz-h-trans), visibility var(--oz-h-trans); pointer-events: none; } .jym-megamenu.is-open, .jym-megamenu:not([hidden]) { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Tarjeta flotante: la pieza visual del mega menú */ .jym-megamenu__inner { max-width: 1440px; margin: 0 auto; background: #ffffff; border-radius: var(--oz-h-radius-card); box-shadow: var(--oz-h-shadow-mega); padding: 28px 32px; border: 1px solid #eef0ee; } .jym-megamenu__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid #eef0ee; } .jym-megamenu__title { margin: 0; font-size: 20px; font-weight: 800; color: var(--oz-h-text-top); letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 10px; } .jym-megamenu__title::before { content: ""; width: 4px; height: 18px; background: var(--oz-h-accent); border-radius: 2px; display: inline-block; } /* CTA secundario "Ver todo en …" — discreto, hover verde */ .jym-megamenu__view-all { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: #4b5550; background: #f4f6f5; border: 1px solid #e5e8e6; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: color var(--oz-h-trans), background-color var(--oz-h-trans), border-color var(--oz-h-trans); } .jym-megamenu__view-all:hover { color: var(--oz-h-accent-press); background: #ffffff; border-color: var(--oz-h-accent); text-decoration: none; } .jym-megamenu__view-all:focus-visible { outline: 2px solid var(--oz-h-accent); outline-offset: 2px; } .jym-megamenu__view-all span { transition: transform var(--oz-h-trans); display: inline-block; } .jym-megamenu__view-all:hover span { transform: translateX(3px); } .jym-megamenu__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px 32px; } .jym-megamenu__column { min-width: 0; } /* Título de columna: 15px, 700, negro premium, línea fina #E5E8E6 */ .jym-megamenu__column-title { display: block; font-size: 15px; font-weight: 700; color: var(--oz-h-text-top); letter-spacing: -.005em; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e5e8e6; text-decoration: none; transition: color var(--oz-h-trans), border-color var(--oz-h-trans); } .jym-megamenu__column-title:hover { color: #000000; background: var(--oz-h-accent); border-bottom-color: var(--oz-h-accent); padding-left: 6px; margin-left: -6px; border-radius: 6px 6px 0 0; } .jym-megamenu__column-title:focus-visible { outline: 2px solid var(--oz-h-accent); outline-offset: 2px; border-radius: 4px; } .jym-megamenu__sublist { display: flex; flex-direction: column; gap: 1px; } .jym-megamenu__sublist a { display: block; padding: 8px 10px; margin: 0 -10px; font-size: 14px; color: #263238; text-decoration: none; line-height: 1.4; border-radius: 6px; font-weight: 500; transition: color var(--oz-h-trans), background-color var(--oz-h-trans), padding-left var(--oz-h-trans); } .jym-megamenu__sublist a:hover { color: #000000; background: var(--oz-h-accent); padding-left: 14px; font-weight: 600; } .jym-megamenu__sublist a:focus-visible { outline: 2px solid var(--oz-h-accent); outline-offset: 2px; } /* ---- Menú principal ---- */ .oz-header__nav { margin-left: auto; flex: 0 0 auto; display: flex; align-items: stretch; } .oz-header__nav-list { display: flex; align-items: stretch; gap: 6px; } .oz-header__nav-list li { position: relative; display: flex; align-items: stretch; } .oz-header__nav-list a { display: inline-flex; align-items: center; padding: 0 14px; color: var(--oz-h-link-bottom); font-size: 15px; font-weight: 500; letter-spacing: -.005em; transition: color var(--oz-h-trans), background-color var(--oz-h-trans); white-space: nowrap; position: relative; line-height: 1; } .oz-header__nav-list a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--oz-h-accent); border-radius: 2px 2px 0 0; transform: scaleX(0); transform-origin: center; transition: transform var(--oz-h-trans); } .oz-header__nav-list a:hover { color: #ffffff; background: rgba(255, 255, 255, .03); } .oz-header__nav-list a:hover::after { transform: scaleX(1); } .oz-header__nav-list a:focus-visible { outline: 2px solid var(--oz-h-accent); outline-offset: -2px; } .oz-header__nav-list .current-menu-item > a, .oz-header__nav-list .current-menu-ancestor > a, .oz-header__nav-list a[aria-current="page"] { color: var(--oz-h-accent); font-weight: 600; } .oz-header__nav-list .current-menu-item > a::after, .oz-header__nav-list .current-menu-ancestor > a::after, .oz-header__nav-list a[aria-current="page"]::after { transform: scaleX(1); } /* Submenús del menú principal (si existieran) */ .oz-header__nav-list .sub-menu { position: absolute; top: 100%; right: 0; min-width: 200px; background: #fff; color: #1a1a1a; box-shadow: 0 10px 22px rgba(0,0,0,.18); border-radius: 0 0 var(--oz-h-radius) var(--oz-h-radius); padding: 6px 0; display: none; z-index: 200; } .oz-header__nav-list li:hover > .sub-menu, .oz-header__nav-list li:focus-within > .sub-menu { display: block; } .oz-header__nav-list .sub-menu a { display: block; color: #1a1a1a; padding: 8px 16px; font-weight: 500; } .oz-header__nav-list .sub-menu a:hover { background: #f1f5f9; color: var(--oz-h-cat-hover); } /* ========================================================= * DRAWER (menú móvil + libreta) * ========================================================= */ /* z-index alto: por encima del header sticky (z:100), de cualquier slider o banner del tema y del WhatsApp flotante. Los drawers se mueven a al cargar (ver header.js) para escapar del stacking context creado por el transform: translateY del header fijo. */ .oz-drawer { position: fixed; inset: 0; z-index: 9999; } .oz-drawer[hidden] { display: none; } .oz-drawer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity var(--oz-h-trans); } .oz-drawer.is-open .oz-drawer__backdrop { opacity: 1; } .oz-drawer__panel { position: absolute; top: 0; bottom: 0; width: min(360px, 92vw); background: #fff; color: #1a1a1a; box-shadow: 0 0 30px rgba(0,0,0,.25); transition: transform var(--oz-h-trans); display: flex; flex-direction: column; } .oz-drawer__panel--left { left: 0; transform: translateX(-100%); } .oz-drawer__panel--right { right: 0; transform: translateX(100%); } .oz-drawer.is-open .oz-drawer__panel { transform: translateX(0); } .oz-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #e5e7eb; } .oz-drawer__title { font-size: 16px; font-weight: 700; } .oz-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; } .oz-drawer__close:hover { background: #f1f3f5; } .oz-drawer__body { padding: 16px 18px 24px; overflow-y: auto; flex: 1 1 auto; } .oz-drawer__section + .oz-drawer__section { margin-top: 24px; } .oz-drawer__section-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #64748b; margin: 0 0 10px; font-weight: 700; } /* Categorías del drawer (acordeón) — cada L1 como card con separación visible */ .oz-drawer__cats { display: flex; flex-direction: column; gap: 8px; /* separación clara entre L1 */ } .oz-drawer__cat { background: #ffffff; border: 0; border-radius: 0; overflow: hidden; } .oz-drawer__cat-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 4px; color: #1a1a1a; font-weight: 600; font-size: 15px; text-align: left; background: transparent; transition: background-color var(--oz-h-trans), color var(--oz-h-trans); } .oz-drawer__cat-trigger--link { display: flex; } /* Hover SOLO en dispositivos con cursor real — en táctil :hover queda pegado tras un tap y todas las cards parecen activas a la vez. */ @media (hover: hover) { .oz-drawer__cat-trigger:hover { background: var(--oz-h-accent-soft); color: var(--oz-h-accent-press); } } /* Estado "abierto" (acordeón desplegado): borde y caret verde, SIN bg que compita con sus vecinos. La identidad visual es la card individual. */ .oz-drawer__cat:has(.oz-drawer__cat-trigger[aria-expanded="true"]) { border: 0; box-shadow: none; } .oz-drawer__cat-trigger[aria-expanded="true"] { color: var(--oz-h-accent-press); } .oz-drawer__cat-trigger:focus-visible { outline: 2px solid var(--oz-h-accent); outline-offset: -2px; border-radius: 6px; } /* Quitar foco persistente en touch (algunos navegadores moviles dejan el outline pegado tras el tap). focus-visible ya cubre teclado. */ .oz-drawer__cat-trigger:focus:not(:focus-visible) { outline: none; } .oz-drawer__cat-caret { transition: transform var(--oz-h-trans), color var(--oz-h-trans); flex: 0 0 auto; color: #6b7280; } .oz-drawer__cat-trigger[aria-expanded="true"] .oz-drawer__cat-caret { transform: rotate(180deg); color: var(--oz-h-accent-press); } /* Contenedor del L2 desplegado: un poquito de aire arriba + linea sutil para separarlo del trigger, y borde izquierdo para anclar la jerarquia. */ .oz-drawer__cat-sublist { padding: 6px 0 8px 12px; margin: 0 0 6px 6px; border-left: 2px solid #e5e7eb; } .oz-drawer__cat-sublist > a, .oz-drawer__cat-all { display: block; padding: 8px 4px; color: var(--oz-h-accent-press) !important; font-size: 12px; font-weight: 700; border-radius: 6px; text-transform: uppercase; letter-spacing: .06em; } @media (hover: hover) { .oz-drawer__cat-sublist > a:hover, .oz-drawer__cat-all:hover { background: var(--oz-h-accent-soft); color: var(--oz-h-accent-press) !important; } } /* ===== Acordeón móvil L2 → L3 ===== */ .jym-mobile-menu__l2-list { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0; } .jym-mobile-menu__l2 { border-top: 1px solid #f1f5f9; } .jym-mobile-menu__l2:first-child { border-top: none; } .jym-mobile-menu__l2-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 13px 4px; color: #1f2937; font-weight: 600; font-size: 14px; text-align: left; background: none; border: none; cursor: pointer; text-decoration: none; border-radius: 6px; transition: background-color var(--oz-h-trans); } @media (hover: hover) { .jym-mobile-menu__l2-trigger:hover { background: var(--oz-h-accent-soft); color: var(--oz-h-accent-press); } } .jym-mobile-menu__l2-trigger[aria-expanded="true"] { color: var(--oz-h-accent-press); font-weight: 700; } .jym-mobile-menu__l2-trigger:focus-visible { outline: 2px solid var(--oz-h-accent); outline-offset: -2px; } .jym-mobile-menu__l2-trigger svg { transition: transform var(--oz-h-trans); flex: 0 0 auto; } .jym-mobile-menu__l2-trigger[aria-expanded="true"] svg { transform: rotate(180deg); } .jym-mobile-menu__l3-list { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 10px 12px; margin: 4px 0 4px 4px; border-left: 2px solid #e5e7eb; } .jym-mobile-menu__l3-list li { padding: 0; } .jym-mobile-menu__l3-list a { display: block; padding: 7px 4px; color: #475569; font-size: 13.5px; border-radius: 6px; text-decoration: none; } @media (hover: hover) { .jym-mobile-menu__l3-list a:hover { background: var(--oz-h-accent-soft); color: var(--oz-h-accent-press); } } .jym-mobile-menu__l2-all { font-weight: 700; color: var(--oz-h-accent-press) !important; } /* Menú principal en drawer */ .oz-drawer__nav-list { display: flex; flex-direction: column; } .oz-drawer__nav-list li { border-bottom: 1px solid #f1f5f9; } .oz-drawer__nav-list a { display: block; padding: 12px 4px; color: #1a1a1a; font-weight: 500; font-size: 15px; } @media (hover: hover) { .oz-drawer__nav-list a:hover { background: var(--oz-h-accent-soft); color: var(--oz-h-accent-press); border-radius: 6px; } } .oz-drawer__nav-list .sub-menu { display: block; margin: 4px 0 8px; padding-left: 12px; } .oz-drawer__nav-list .sub-menu a { padding: 8px 4px; color: #475569; font-size: 14px; } .oz-drawer__quote { display: flex; align-items: center; justify-content: center; margin-top: 24px; padding: 14px; background: var(--oz-h-accent); color: #fff !important; border-radius: 999px; font-weight: 700; } .oz-drawer__quote:hover { background: var(--oz-h-accent-hover); } /* Libreta (panel de contacto) */ .oz-notebook { display: flex; flex-direction: column; gap: 6px; } .oz-notebook__empty { color: #64748b; font-size: 14px; } .oz-notebook__item { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid #f1f5f9; transition: background-color .2s ease; border-radius: 8px; } .oz-notebook__item:hover { background: #f8fafc; } .oz-notebook__item:last-child { border-bottom: none; } .oz-notebook__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--oz-h-accent-soft, rgba(34, 197, 94, .12)); border: 1px solid var(--oz-h-accent-soft, rgba(34, 197, 94, .2)); color: var(--oz-h-accent-hover, #16a34a); display: inline-flex; align-items: center; justify-content: center; transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .oz-notebook__icon svg { width: 20px; height: 20px; } .oz-notebook__item:hover .oz-notebook__icon { background: var(--oz-h-accent-hover, #16a34a); border-color: var(--oz-h-accent-hover, #16a34a); color: #ffffff; transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(34, 197, 94, .55); } .oz-notebook__body { min-width: 0; flex: 1 1 auto; } .oz-notebook__body h4 { margin: 0 0 2px; font-size: 11px; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; } .oz-notebook__body p { margin: 0; font-size: 14px; color: #1a1a1a; line-height: 1.45; word-wrap: break-word; font-weight: 500; } .oz-notebook__body a { color: #1a1a1a; text-decoration: none; transition: color .2s ease; } .oz-notebook__body a:hover, .oz-notebook__body a:focus-visible { color: var(--oz-h-accent-hover, #16a34a); text-decoration: none; } /* Bloqueo de scroll cuando un drawer está abierto */ body.oz-drawer-open { overflow: hidden; } /* Live search panel — encajar con el nuevo input (radio sutil 8px) */ .oz-header__search .oz-ls__panel { left: 0; right: 0; top: calc(100% + 6px); border-radius: 8px; } /* ========================================================= * MEDIA QUERIES * ========================================================= */ /* ========================================================= * RESPONSIVE * - <1024 (móvil + tablet): buscador colapsa a icono compacto. * En focus-within se expande horizontalmente (sin JS). * - >=1024 (laptop): aparece barra negra, buscador full ancho. * - >=1280 (desktop): paddings/tipografías más generosas. * ========================================================= */ /* Buscador compacto en móvil/tablet: pill blanco con borde negro + icono negro. Look minimalista alineado al estilo de la libreta del lado derecho. */ @media (max-width: 1023px) { .oz-header__search { order: 0; flex: 0 0 auto; width: 44px; min-width: 0; margin-left: auto; transition: width var(--oz-h-trans); } .oz-header__search:focus-within { width: min(320px, 60vw); } /* Form: fondo blanco, borde negro, sin sombra cuando está colapsado */ .oz-header__search .ozpls-figma__form { overflow: hidden !important; background: #ffffff !important; border: 1.5px solid var(--oz-h-bg-bottom) !important; border-radius: 8px !important; } .oz-header__search:focus-within .ozpls-figma__form { background: #ffffff !important; border-color: var(--oz-h-bg-bottom) !important; box-shadow: 0 0 0 3px rgba(5, 7, 5, .08) !important; } /* Input invisible cuando está colapsado, aparece al focus */ .oz-header__search .ozpls-figma__input, .oz-header__search .ozpls-figma__input:focus, .oz-header__search .ozpls-figma__input:hover { opacity: 0; padding: 0 !important; height: 41px !important; transition: opacity var(--oz-h-trans); } .oz-header__search:focus-within .ozpls-figma__input { opacity: 1; padding: 0 44px 0 14px !important; } /* Botón lupa centrado en el cuadrado del buscador colapsado. Cuando el form está colapsado (44px), el botón llena el form y la lupa queda perfectamente centrada. Al hacer focus el form se expande y el botón vuelve a la derecha. */ .oz-header__search .ozpls-figma__btn { background: transparent !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 6px !important; } .oz-header__search:focus-within .ozpls-figma__btn { left: auto !important; top: 50% !important; bottom: auto !important; right: 4px !important; width: 36px !important; height: 36px !important; transform: translateY(-50%) !important; } .oz-header__search .ozpls-figma__btn:hover { background: rgba(5, 7, 5, .06) !important; } .oz-header__search .ozpls-figma__btn::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050705' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; } /* Libreta de contacto: misma estética minimalista */ .oz-header .oz-header__notebook-btn { background: #ffffff !important; border: 1.5px solid var(--oz-h-bg-bottom) !important; color: var(--oz-h-bg-bottom) !important; border-radius: 8px !important; } .oz-header .oz-header__notebook-btn:hover { background: rgba(5, 7, 5, .06) !important; border-color: var(--oz-h-bg-bottom) !important; color: var(--oz-h-bg-bottom) !important; transform: none !important; } .oz-header .oz-header__notebook-btn[aria-expanded="true"] { background: var(--oz-h-bg-bottom) !important; color: #ffffff !important; } /* Acciones alineadas a la derecha (gap consistente) */ .oz-header__actions { gap: 8px !important; margin-left: 0 !important; } /* CTA WhatsApp del header ya oculto en este breakpoint (regla previa) */ .oz-header__quote-text { display: none; } } /* ≥ 768px (tablet): top bar más alto, mejor reparto */ @media (min-width: 768px) { .oz-header__top .oz-header__container { flex-wrap: nowrap; min-height: 92px; gap: 20px; } .oz-header__logo img { height: 64px; } } /* ≥ 1024px (laptop): aparece la barra inferior. Top bar = flex con `justify-content: space-between` + buscador con flex-grow:1 y max-width. Esto garantiza que el espacio sobrante (cuando el buscador hace tope) se reparta IGUAL entre los dos lados del buscador. */ @media (min-width: 1024px) { .oz-header__hamburger { display: none; } .oz-header__bottom { display: block; } .oz-header__top .oz-header__container { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 48px; min-height: 108px; } .oz-header__logo { flex: 0 0 auto; } .oz-header__logo img { height: 76px; min-width: 200px; } .oz-header__search { order: 0; flex: 1 1 auto; min-width: 0; max-width: 760px; } .oz-header__actions { flex: 0 0 auto; margin-left: 0; /* anular el auto-margin del flex móvil */ gap: 12px; } .oz-header__quote-text { display: inline; } } /* ≥ 1280px (desktop): logo aún más generoso */ @media (min-width: 1280px) { .oz-header__top .oz-header__container { gap: 120px; min-height: 116px; } .oz-header__bottom .oz-header__container { padding: 0 32px; gap: 32px; } .oz-header__logo img { height: 84px; min-width: 220px; } .oz-header__search { max-width: 800px; } .oz-header__nav-list { gap: 8px; } .oz-header__nav-list a { font-size: 15px; padding: 0 16px; } .oz-header__cats-list { gap: 18px; } .oz-header__cat + .oz-header__cat::before { left: -9px; } .oz-header__cat-trigger { font-size: 15px; padding: 0 22px; } .oz-header__cat-trigger::after { left: 22px; right: 22px; } } /* Móvil/tablet (<1024): ocultar el CTA WhatsApp del header. Ya hay un botón flotante de WhatsApp + el del menú drawer; tener el tercero compite por espacio con logo + búsqueda + libreta. */ @media (max-width: 1023px) { .oz-header__quote { display: none !important; } } /* Pantallas muy pequeñas (≤360px): compactar lo que queda visible */ @media (max-width: 380px) { .oz-header__notebook-btn { width: 40px; height: 40px; } .oz-header__hamburger { width: 36px; height: 36px; } .oz-header__logo img { height: 38px; min-width: 60px; } .oz-header__search { width: 40px; } } /* ========================================================= * Botón flotante de WhatsApp (plugin externo) * El tema no lo renderiza; estas reglas estandarizan a 56×56 * los plugins más usados (Click-to-Chat, QL, WaButton, etc.). * Si el plugin que uses tiene otra clase, dímela y la añado. * ========================================================= */ .ht-ctc-chat-bubble, .b3-bubble, .qlwapp .qlwapp-toggle, .WaButton, #whatsapp-chat, .whatsapp-chat-btn, [class*="wa-float"], [class*="whatsapp-float"] { width: 56px !important; height: 56px !important; } .ht-ctc-chat-bubble svg, .ht-ctc-chat-bubble img, .b3-bubble svg, .b3-bubble img, .qlwapp .qlwapp-toggle svg, .qlwapp .qlwapp-toggle img, .WaButton svg, .WaButton img { width: 28px !important; height: 28px !important; } /* Reduce-motion */ @media (prefers-reduced-motion: reduce) { .oz-drawer__panel, .oz-drawer__backdrop, .jym-megamenu, .oz-header__cat-caret, .oz-header__cat-trigger::after, .oz-header__nav-list a::after, .oz-drawer__cat-caret, .jym-mobile-menu__l2-trigger svg, .oz-header__quote, .oz-header__notebook-btn, .oz-header__search, .jym-megamenu__sublist a, .jym-megamenu__view-all span { transition: none !important; } } /* ========================================================= * Buscador móvil flotante (overlay) * Activado con body.oz-search-mobile-open en <1024px. * El JS añade el backdrop y el botón X al abrir. * ========================================================= */ .oz-search-mobile-backdrop { position: fixed; inset: 0; background: rgba(5, 7, 5, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 9998; opacity: 0; animation: ozSearchBackdropIn .18s ease-out forwards; } @keyframes ozSearchBackdropIn { to { opacity: 1; } } @keyframes ozSearchPanelIn { from { transform: translateY(-12px); opacity: .4; } to { transform: translateY(0); opacity: 1; } } @media (max-width: 1023px) { body.oz-search-mobile-open { overflow: hidden; } body.oz-search-mobile-open .oz-header__search { position: fixed !important; top: 12px !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; margin: 0 !important; z-index: 9999 !important; animation: ozSearchPanelIn .22s ease-out; } /* Form: pill grande con sombra elevada */ body.oz-search-mobile-open .oz-header__search .ozpls-figma__form { background: #ffffff !important; border: 1.5px solid var(--oz-h-bg-bottom) !important; border-radius: 12px !important; box-shadow: 0 18px 50px rgba(5, 7, 5, .35) !important; height: 56px !important; overflow: visible !important; } /* Input visible y full-width */ body.oz-search-mobile-open .oz-header__search .ozpls-figma__input { opacity: 1 !important; height: 54px !important; padding: 0 96px 0 18px !important; font-size: 16px !important; /* evita zoom auto en iOS */ } /* Lupa pegada a la derecha (deja hueco al botón X) */ body.oz-search-mobile-open .oz-header__search .ozpls-figma__btn { position: absolute !important; top: 50% !important; right: 52px !important; left: auto !important; bottom: auto !important; width: 40px !important; height: 40px !important; transform: translateY(-50%) !important; border-radius: 8px !important; background: var(--oz-h-accent) !important; } body.oz-search-mobile-open .oz-header__search .ozpls-figma__btn::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050705' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important; } /* Botón cerrar X (creado por JS) */ .oz-search-mobile-close { position: absolute; top: 50%; right: 8px; width: 40px; height: 40px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 8px; color: var(--oz-h-bg-bottom); cursor: pointer; padding: 0; z-index: 2; transition: background-color .15s ease; } @media (hover: hover) { .oz-search-mobile-close:hover { background: rgba(5, 7, 5, .08); } } .oz-search-mobile-close:active { background: rgba(5, 7, 5, .14); } .oz-search-mobile-close:focus-visible { outline: 2px solid var(--oz-h-accent); outline-offset: 2px; } /* Mostrar el X sólo cuando el overlay está abierto */ .oz-header__search .oz-search-mobile-close { display: none; } body.oz-search-mobile-open .oz-header__search .oz-search-mobile-close { display: inline-flex; } /* Panel de resultados live-search bajo el input flotante */ body.oz-search-mobile-open .oz-header__search .oz-ls__panel { position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; right: 0 !important; width: auto !important; max-height: calc(100vh - 96px) !important; overflow-y: auto !important; border-radius: 12px !important; box-shadow: 0 18px 50px rgba(5, 7, 5, .35) !important; } } @media (prefers-reduced-motion: reduce) { .oz-search-mobile-backdrop, body.oz-search-mobile-open .oz-header__search { animation: none !important; } .oz-search-mobile-backdrop { opacity: 1; } }