/* Piel OK.DOCK — solo carga cuando el host es okdock (encolado condicional en compu-brand.php) */ @font-face { font-family: 'Poppins'; src: url('fonts/poppins-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('fonts/poppins-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('fonts/poppins-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* Inter: fuente de TEXTO (2026-07-22). Poppins es geométrica y pensada para títulos; * a 12-14px se lee peor, y el usuario lo detectó comparando la maqueta contra el sitio. * Inter está diseñada para interfaz en tamaños chicos. Es VARIABLE: un solo archivo de * 48KB cubre todos los pesos y reemplaza lo que en estático serían 3 archivos. * Poppins SE QUEDA para títulos, logo y navegación — el manual no se rompe, se completa. */ @font-face { font-family: 'Inter'; src: url('fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } /* html:root + !important: el tema define sus variables en :root (wd-style-theme_settings_default) * y compu-a11y-perf re-define --wd-primary-color en html:root (#CC0000). Para ganar ambos sin * depender del orden de impresión de estilos, igualamos especificidad y subimos con !important. */ html:root { /* Tokens brandbook OK.DOCK p.29 */ --okd-blue: #066CFF; --okd-purple: #9C1DFF; --okd-cyan: #00C6FF; --okd-orange: #FF7C19; --okd-gray: #DBDBDB; --okd-blue-dark: #0553cc; /* hover, derivado */ /* Overrides Woodmart — nombres confirmados en wd-style-theme_settings_default-css */ --wd-primary-color: var(--okd-blue) !important; --wd-alternative-color: var(--okd-orange) !important; --wd-link-color: var(--okd-blue) !important; --wd-link-color-hover: var(--okd-blue-dark) !important; --btn-accented-bgcolor: var(--okd-blue) !important; --btn-accented-bgcolor-hover: var(--okd-blue-dark) !important; /* Reparto tipográfico (2026-07-22): Inter para LEER, Poppins para MARCA. * Woodmart deriva todo de estas seis variables, así que el cambio es quirúrgico. */ --wd-text-font: 'Inter', sans-serif !important; /* cuerpo, descripciones, datos */ --wd-entities-title-font: 'Inter', sans-serif !important; /* nombres de producto: es texto que se LEE, no un título decorativo */ --wd-title-font: 'Poppins', sans-serif !important; /* encabezados de sección */ --wd-widget-title-font: 'Poppins', sans-serif !important; /* títulos de widget */ --wd-header-el-font: 'Poppins', sans-serif !important; /* navegación: es marca */ --wd-alternative-font: 'Poppins', sans-serif !important; /* acentos de marca */ } body { font-family: 'Inter', sans-serif; } /* Los títulos conservan la geométrica de marca: es donde Poppins luce y donde el * tamaño grande hace que su menor legibilidad no importe. */ h1, h2, h3, .okd-header, .okd-header *, .okd-nav__lnk, .okd-sec-head h2 { font-family: 'Poppins', sans-serif; } /* ═══ Fase enchulamiento: concepto Best Buy (spec 2026-07-17) ═══ */ html:root { --okd-yellow: #FFE000; /* mismo amarillo de compu-product-card */ --okd-yellow-hover: #FFD400; --okd-yellow-border: #E6C900; --okd-on-yellow: #1d1d1d; --okd-red: #C2231F; --okd-purple-deep: #5b12a8; --okd-navy: #0A1220; --okd-ground: #EEF3FB; } /* ── Ribbon superior (degradado de azules, texto blanco) ── */ .okd-ribbon{background:linear-gradient(90deg,#0a3f92 0%,var(--okd-blue) 45%,var(--okd-blue-dark) 100%); color:#fff;font-weight:600;font-size:13px;text-align:center;padding:8px 16px; display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap} .okd-ribbon svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px;flex:none} .okd-ribbon span{display:inline-flex;align-items:center} /* ── Header azul (restyle del header Woodmart vivo) ── */ .whb-header .whb-row, .whb-header .whb-general-header, .whb-header .whb-header-bottom, .whb-sticky-header{background-color:var(--okd-blue) !important;background-image:none !important} .whb-header{box-shadow:0 6px 20px rgba(4,50,120,.22)} /* Texto/íconos de herramientas (cuenta, carrito, wishlist) en blanco */ .whb-header .wd-tools-element>a, .whb-header .wd-tools-element .wd-tools-text, .whb-header .wd-header-text, .whb-header a:not(.btn){color:#fff} /* Los paneles desplegables dentro del header son blancos: devolver el color del tema */ .whb-header .wd-dropdown a:not(.btn){color:var(--sub-menu-color,#333)} .whb-header .wd-tools-element>a:hover{opacity:.85} /* Contador del carrito en amarillo */ .whb-header .wd-cart-number, .whb-header .wd-tools-count{background-color:var(--okd-yellow) !important;color:var(--okd-on-yellow) !important} /* Buscador: caja blanca redondeada */ .whb-header .searchform input[type="text"], .whb-header .searchform input[type="search"], .whb-header .wd-search-form input{background:#fff;color:#0E1726;border:0;border-radius:11px} .whb-header .searchform input::placeholder{color:#6a7a94} .whb-header .searchform button{color:var(--okd-blue)} /* Nav de categorías: links blancos, hover con velo */ .whb-header .wd-nav>li>a{color:#fff} .whb-header .wd-nav>li>a:hover, .whb-header .wd-nav>li.menu-item-hovered>a{background:rgba(255,255,255,.13);border-radius:9px} /* Separador entre filas del header */ .whb-header .whb-header-bottom{border-top:1px solid rgba(255,255,255,.16)} /* Logo: usar el horizontal BLANCO (sustituye al swap previo con okdock-logo.png). * Selector real en staging: div.site-logo > a.wd-logo.wd-main-logo > img * (desktop y móvil; el sticky de compu-header-sticky mueve el mismo nodo). */ .site-logo .wd-logo img, .whb-sticky-header .wd-logo img{ content:url('okdock-logo-h-blanco.png'); content:url('okdock-logo-h-blanco.png') / 'OK.DOCK'; /* alt accesible; navegadores sin soporte del slash conservan la línea previa */ max-height:30px;width:auto; } /* Barra compacta de compu-header-sticky: fondo blanco propio → logo azul */ #compu-headbar .wd-logo img{ content:url('okdock-logo-h-azul.png'); content:url('okdock-logo-h-azul.png') / 'OK.DOCK'; } /* ── Footer propio OK Dock (maqueta v3) ── * El footer Elementor de Compustar (template 236068, footer.elementor-location-footer, * widget cs-footer*) se OCULTA completo bajo okdock; okdock-footer.php imprime el * reemplazo en wp_footer. (El recolor cs-* de la fase anterior se eliminó: era * para el footer que ahora está oculto.) */ footer.elementor-location-footer{display:none !important} /* Footer OK Dock — mismo diseño que okdock.club (su assets/css/footer.css), con NUESTRO catálogo de categorías. Cambia de navy a los azules de marca: el navy era de la maqueta v3 y .club ya fijó la identidad de la marca en degradado azul. Los iconos van en SVG y no en Font Awesome / Bootstrap Icons como allá: traer dos librerías enteras por seis dibujos no compensa. */ .okd-footer{--okdf-icono:rgba(255,255,255,.85);--okdf-realce:#fff; --okdf-bg:linear-gradient(115deg,#0057db 0%,#066cff 46%,#0049b2 100%); --okdf-text:#fff;--okdf-title:#fff;--okdf-line:rgba(255,255,255,.22); background:var(--okdf-bg);border-top:1px solid var(--okdf-line); color:var(--okdf-text);font-size:14px;line-height:1.55} .okd-footer__wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:20px} /* Cuatro bloques desde que los telefonos se fundieron en Contacto (antes eran cinco, con una columna solo para ellos). Contacto se lleva mas ancho: es el unico con domicilio, y a menos de ~200px "Tijuana, Baja California, Mexico" parte en dos renglones. */ .okd-footer__top{display:grid;grid-template-columns:1.2fr 3fr 1fr 1.45fr; gap:clamp(16px,1.8vw,26px);padding-block:clamp(20px,2.4vw,30px) clamp(12px,1.4vw,18px); border-bottom:1px solid var(--okdf-line)} .okd-footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:11px} .okd-footer__logo{display:inline-block;line-height:0} .okd-footer__logo img{width:auto;height:34px} .okd-footer__tagline{margin:0;max-width:34ch;font-size:12px;line-height:1.45;color:var(--okdf-text)} .okd-footer__social{display:flex;gap:6px;margin:0;padding:0;list-style:none} .okd-footer__social a{width:32px;height:32px;border-radius:8px;display:grid;place-items:center; color:#fff;background:rgba(255,255,255,.12);border:1px solid var(--okdf-line); text-decoration:none;transition:background .15s ease,color .15s ease,transform .15s ease} .okd-footer__social a svg{width:16px;height:16px;display:block} .okd-footer__social a:hover,.okd-footer__social a:focus-visible{background:#fff; color:var(--okd-blue-dark,#0049b2);border-color:transparent;transform:translateY(-2px)} .okd-footer__h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; color:var(--okdf-title);margin:0 0 12px} .okd-footer__list{list-style:none;margin:0;padding:0} .okd-footer__list a,.okd-footer__list span{display:block;padding:1px 0;font-size:13px; line-height:1.35;color:var(--okdf-text);text-decoration:none;transition:color .15s ease} .okd-footer__list a:hover,.okd-footer__list a:focus-visible{color:var(--okdf-realce);text-decoration:underline} .okd-footer__list--tres{columns:3;column-gap:16px} .okd-footer__list--tres a{font-size:12px;padding-block:1px} .okd-footer__list--tres li{break-inside:avoid} .okd-footer__address{font-style:normal;margin:0 0 10px;font-size:13px;color:var(--okdf-text)} .okd-footer__destacado{font-weight:600;color:var(--okdf-title)} /* .club los mete con de Font Awesome; aquí son SVG y necesitan caja propia para alinearse con el texto de su renglón. */ .okd-footer__list a svg{width:14px;height:14px;margin-right:6px;vertical-align:-2px; display:inline-block;color:var(--okdf-icono)} .okd-footer__list a:has(svg){display:flex;align-items:center;gap:0} .okd-footer__pagos{display:flex;align-items:center;flex-wrap:wrap;gap:10px clamp(20px,3vw,40px); padding-block:11px;border-bottom:1px solid var(--okdf-line)} .okd-footer__pagos-txt{font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.08em;opacity:.85;margin-right:4px} .okd-footer__pagos-txt--extra{font-weight:600;text-transform:none;letter-spacing:0;opacity:.75} .okd-footer__pago{height:26px;width:auto;opacity:.9;transition:opacity .15s ease} .okd-footer__pago:hover{opacity:1} .okd-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center; gap:8px 20px;padding-block:16px 18px;font-size:12px;color:var(--okdf-text)} .okd-footer__marca{font-weight:700;color:var(--okdf-title);font-family:'Poppins',Inter,sans-serif} .okd-footer__lema{color:var(--okdf-realce);font-weight:600} @media (max-width:1100px){ .okd-footer__top{grid-template-columns:2fr 1fr 1.3fr} .okd-footer__brand{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center; gap:12px 24px;padding-bottom:20px;border-bottom:1px solid var(--okdf-line)} .okd-footer__tagline{max-width:46ch;flex:1 1 260px} } @media (max-width:860px){ .okd-footer__top{grid-template-columns:repeat(2,1fr);gap:24px 20px} .okd-footer__col--categorias{grid-column:1 / -1} .okd-footer__list--tres{columns:3} } @media (max-width:560px){ .okd-footer__top{grid-template-columns:repeat(2,1fr);gap:22px 18px} .okd-footer__brand{flex-direction:column;align-items:flex-start} .okd-footer__tagline{flex:0 1 auto;max-width:none} .okd-footer__col--categorias{display:none} .okd-footer__bottom{justify-content:center;text-align:center;padding-bottom:22px} .okd-footer__pagos{justify-content:center} } /* ═══ Header propio OK Dock (spec header-identico 2026-07-17) ═══ El header Woodmart y la barra sticky compacta se OCULTAN bajo okdock: este skin solo se encola bajo host okdock, así que compustar no cambia. */ .whb-header, #compu-headbar{display:none !important} .okd-header{background:var(--okd-blue);position:sticky;top:0;z-index:400; box-shadow:0 6px 20px rgba(4,50,120,.22);font-family:'Poppins',sans-serif} .okd-hwrap{max-width:1280px;margin-inline:auto;padding-inline:20px} .okd-header__top{display:flex;align-items:center;gap:22px;padding-block:14px} .okd-header__logo{flex:0 0 auto;display:flex} .okd-header__logo img{height:30px;width:auto} .okd-search{flex:1 1 auto;display:flex;background:#fff;border-radius:11px;overflow:hidden; box-shadow:0 2px 0 rgba(0,0,0,.04)} .okd-search input[type="search"]{flex:1;border:0;padding:8px 16px;min-height:0;height:auto; font:inherit;font-size:16px; /* ≥16px: evita el auto-zoom de iOS al enfocar */ color:#0E1726;background:#fff;min-width:0} .okd-search input[type="search"]:focus{outline:none;box-shadow:none} .okd-search input[type="search"]::placeholder{color:#6a7a94} .okd-search button{border:0;background:#fff;color:var(--okd-blue);padding:0 16px;cursor:pointer; display:grid;place-items:center} .okd-search button:hover{color:var(--okd-blue-dark)} .okd-search button svg{width:22px;height:22px} /* margin-left:auto: en ≤620px el buscador baja a su propia fila y sin el flex:1 del search nada empuja los iconos a la derecha — sin esto quedan pegados al logo y el popover (right:-78px) se sale del viewport por la izquierda (QA visual). */ .okd-header__acts{display:flex;align-items:center;gap:20px;flex:0 0 auto;margin-left:auto} .okd-hact{display:flex;align-items:center;gap:9px;color:#fff !important;cursor:pointer; font-size:14px;white-space:nowrap;text-decoration:none;background:none;border:0; padding:0;font-family:inherit;text-align:left} /* El botón "Enviar a" es un