/* ========================================================= QBIT HOME — SHOPPING ASSISTANT ========================================================= */ .qbit-home-assistant { width: 100%; max-width: 1320px; margin: 34px auto 44px; padding: 30px; border: 1px solid #dce4ec; border-radius: 12px; background: linear-gradient( 135deg, #ffffff 0%, #f8fbff 58%, #f2f8fd 100% ); box-shadow: 0 8px 24px rgba(19, 49, 83, .06); } .qbit-assistant-intro { margin-bottom: 24px; } .qbit-assistant-eyebrow { margin-bottom: 5px; color: #0a6bc7; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; } .qbit-assistant-intro h2 { margin: 0 0 8px; color: #07346f; font-size: 28px; line-height: 1.2; font-weight: 650; } .qbit-assistant-intro p { max-width: 650px; margin: 0; color: #66717d; font-size: 14px; } /* ========================================================= ACCIONES PRINCIPALES ========================================================= */ .qbit-assistant-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .qbit-assistant-action { min-height: 82px; padding: 15px 16px; border: 1px solid #dae3ec; border-radius: 8px; background: #fff; color: #344556; display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 12px; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease; } .qbit-assistant-action:hover, .qbit-assistant-action:focus { border-color: #b9c9d9; background: #f9fbfd; outline: none; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(23, 64, 105, .07); } .qbit-assistant-action-icon { width: 38px; height: 38px; border-radius: 8px; background: #edf6ff; color: #0872cf; display: flex; align-items: center; justify-content: center; } .qbit-assistant-action-icon svg { width: 22px; height: 22px; } .qbit-assistant-action strong { display: block; margin-bottom: 3px; color: #173b63; font-size: 13.5px; font-weight: 600; } .qbit-assistant-action small { display: block; color: #77818c; font-size: 11.5px; line-height: 1.35; } .qbit-assistant-arrow { color: #94a3b2; font-size: 17px; } /* ========================================================= PANELES ========================================================= */ .qbit-assistant-panel[hidden] { display: none !important; } .qbit-assistant-panel { min-height: 250px; } .qbit-assistant-panel-heading { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 22px; } .qbit-assistant-back { height: 34px; padding: 0 11px; border: 1px solid #d8e1ea; border-radius: 6px; background: #fff; color: #62707d; font-size: 12px; cursor: pointer; } .qbit-assistant-back:hover { background: #f3f5f7; color: #344556; } .qbit-assistant-panel-heading h3 { margin: 0 0 5px; color: #07346f; font-size: 21px; font-weight: 600; } .qbit-assistant-panel-heading p { margin: 0; color: #74808b; font-size: 13px; } .qbit-assistant-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .qbit-assistant-option { min-height: 46px; padding: 10px 13px; border: 1px solid #dce4ec; border-radius: 6px; background: #fff; color: #315171; display: flex; align-items: center; justify-content: space-between; text-decoration: none; font-size: 12.5px; } .qbit-assistant-option:hover { border-color: #b6c7d7; background: #f5f8fb; color: #0872cf; text-decoration: none; } /* ========================================================= SERVICIO CONTEXTUAL ========================================================= */ .qbit-assistant-service-callout { margin-top: 18px; padding: 15px 17px; border-radius: 8px; background: #edf6ff; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .qbit-assistant-service-callout div { min-width: 0; } .qbit-assistant-service-callout strong { display: block; margin-bottom: 3px; color: #174673; font-size: 13px; } .qbit-assistant-service-callout span { display: block; color: #66798b; font-size: 11.5px; } .qbit-assistant-service-callout > a { flex: 0 0 auto; min-height: 38px; padding: 8px 14px; border: 1px solid #0a6bc7; border-radius: 6px; background: #fff; color: #0a6bc7; display: flex; align-items: center; text-decoration: none; font-size: 12px; font-weight: 600; } .qbit-assistant-service-callout > a:hover { background: #0a6bc7; color: #fff; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 991.98px) { .qbit-home-assistant { margin-top: 22px; padding: 22px; } .qbit-assistant-actions, .qbit-assistant-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .qbit-home-assistant { padding: 18px 15px; border-radius: 8px; } .qbit-assistant-intro h2 { font-size: 23px; } .qbit-assistant-actions, .qbit-assistant-options { grid-template-columns: 1fr; } .qbit-assistant-service-callout { align-items: stretch; flex-direction: column; } .qbit-assistant-service-callout > a { justify-content: center; } .qbit-assistant-panel-heading { flex-direction: column; gap: 12px; } } /* QBIT HOME 3.3 START */ /* ========================================================= COMPRA SEGÚN NECESIDAD ========================================================= */ .qbit-shop-by-need { width: 100%; max-width: 1320px; margin: -8px auto 42px; padding: 5px !important; } .qbit-shop-by-need-heading { margin-bottom: 18px; } .qbit-shop-by-need-eyebrow { display: block; margin-bottom: 4px; color: #0872cf; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; } .qbit-shop-by-need-heading h2 { margin: 0 0 5px; color: #173b63; font-size: 22px; font-weight: 650; } .qbit-shop-by-need-heading p { margin: 0; color: #788491; font-size: 12.5px; } .qbit-shop-by-need-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .qbit-need-card { min-height: 76px; padding: 13px 15px; border: 1px solid #dce4ec; border-radius: 8px; background: #fff; color: #405366; display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 11px; text-decoration: none; transition: background-color .12s ease, border-color .12s ease, transform .12s ease; } .qbit-need-card:hover { border-color: #b8c7d5; background: #f7f9fb; color: #0872cf; text-decoration: none; transform: translateY(-1px); } .qbit-need-icon { width: 38px; height: 38px; border-radius: 8px; background: #edf6ff; color: #0872cf; display: flex; align-items: center; justify-content: center; } .qbit-need-icon svg { width: 21px; height: 21px; } .qbit-need-copy strong { display: block; margin-bottom: 3px; color: #24496d; font-size: 13px; font-weight: 600; } .qbit-need-copy small { display: block; color: #818c97; font-size: 11px; } .qbit-need-arrow { color: #9ba8b5; font-size: 15px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 991.98px) { .qbit-shop-by-need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .qbit-shop-by-need { padding-left: 15px; padding-right: 15px; } .qbit-shop-by-need-grid { grid-template-columns: 1fr; } } /* QBIT HOME 3.3 END */ /* QBIT HOME TYPOGRAPHY 4.32B START */ /* ========================================================= ESCALA TIPOGRAFICA HOME QBIT Se conserva la jerarquia principal. Solo se corrigen textos secundarios demasiado pequeños. ========================================================= */ /* --------------------------------------------------------- ASISTENTE — INTRODUCCION --------------------------------------------------------- */ .qbit-assistant-eyebrow { font-size: 13px !important; line-height: 18px !important; } .qbit-assistant-intro h2 { font-size: 28px !important; line-height: 1.2 !important; } .qbit-assistant-intro p { font-size: 14px !important; line-height: 21px !important; } /* --------------------------------------------------------- CARDS PRINCIPALES DEL ASISTENTE --------------------------------------------------------- */ .qbit-assistant-action strong { font-size: 14px !important; line-height: 19px !important; font-weight: 600 !important; } .qbit-assistant-action small { font-size: 13px !important; line-height: 18px !important; } .qbit-assistant-arrow { font-size: 17px !important; } /* --------------------------------------------------------- PANELES SECUNDARIOS --------------------------------------------------------- */ .qbit-assistant-back { font-size: 13.5px !important; line-height: 18px !important; } .qbit-assistant-panel-heading h3 { font-size: 21px !important; line-height: 27px !important; } .qbit-assistant-panel-heading p { font-size: 14px !important; line-height: 20px !important; } .qbit-assistant-option { font-size: 13.5px !important; line-height: 19px !important; } /* --------------------------------------------------------- SERVICIO CONTEXTUAL --------------------------------------------------------- */ .qbit-assistant-service-callout strong { font-size: 14px !important; line-height: 19px !important; } .qbit-assistant-service-callout span { font-size: 13px !important; line-height: 19px !important; } .qbit-assistant-service-callout > a { font-size: 13.5px !important; line-height: 19px !important; } /* --------------------------------------------------------- COMPRA SEGUN NECESIDAD --------------------------------------------------------- */ .qbit-shop-by-need-eyebrow { font-size: 13px !important; line-height: 18px !important; } .qbit-shop-by-need-heading h2 { font-size: 22px !important; line-height: 28px !important; } .qbit-shop-by-need-heading p { font-size: 14px !important; line-height: 20px !important; } .qbit-need-copy strong { font-size: 14px !important; line-height: 19px !important; } .qbit-need-copy small { font-size: 13px !important; line-height: 18px !important; } .qbit-need-arrow { font-size: 15px !important; } /* --------------------------------------------------------- MOBILE Mantener proporcion sin volver a textos diminutos --------------------------------------------------------- */ @media (max-width: 575.98px) { .qbit-assistant-intro h2 { font-size: 23px !important; line-height: 29px !important; } .qbit-assistant-action strong, .qbit-need-copy strong { font-size: 14px !important; } .qbit-assistant-action small, .qbit-need-copy small { font-size: 13px !important; line-height: 18px !important; } .qbit-assistant-option, .qbit-assistant-back, .qbit-assistant-service-callout > a { font-size: 13.5px !important; } } /* QBIT HOME TYPOGRAPHY 4.32B END */ /* QBIT ICONS HOME 4.34A START */ .qbit-assistant-action-icon, .qbit-need-icon { width: 42px !important; height: 42px !important; } .qbit-assistant-action-icon svg { width: 24px !important; height: 24px !important; } .qbit-need-icon svg { width: 23px !important; height: 23px !important; } /* QBIT ICONS HOME 4.34A END */ /* QBIT HOME SIDEBAR 4.35B START */ /* ========================================================= HOME DESKTOP 270px Productos + contenido principal flexible El árbol de Productos es exactamente el mismo utilizado por el header. No existe una copia de categorías. ========================================================= */ /* --------------------------------------------------------- BASE / MOBILE La sidebar fija no se utiliza debajo de desktop. --------------------------------------------------------- */ .qbit-home-commerce-layout { width: 100%; } .qbit-home-catalog-column { display: none; } .qbit-home-commerce-main { min-width: 0; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 992px) { /* ----------------------------------------------------- CONTENEDOR PRINCIPAL HOME ----------------------------------------------------- */ .qbit-home-commerce-layout { position: relative; width: calc(100% - 32px); max-width: 1320px; margin: 34px auto 42px; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; align-items: start; box-sizing: border-box; } /* ----------------------------------------------------- COLUMNA IZQUIERDA ----------------------------------------------------- */ .qbit-home-catalog-column { position: relative; display: block; width: 270px; z-index: 30; } /* ----------------------------------------------------- CONTENIDO DERECHO ----------------------------------------------------- */ .qbit-home-commerce-main { width: 100%; min-width: 0; } /* * El asistente ya pertenece al grid exterior. * Eliminamos su margen/max-width independiente. */ .qbit-home-commerce-main .qbit-home-assistant { width: 100%; max-width: none; margin: 0 0 24px; box-sizing: border-box; } /* * Compra según necesidad queda inmediatamente debajo. */ .qbit-home-commerce-main .qbit-shop-by-need { width: 100%; max-width: none; margin: 0 0 42px; padding: 0; box-sizing: border-box; } /* ===================================================== PRODUCTOS EN HOME ===================================================== */ .qbit-home-catalog-column .qbit-products-menu-home { position: relative; display: block; width: 270px; z-index: 40; } /* ----------------------------------------------------- ENCABEZADO PRODUCTOS Conservamos el mismo botón visual, pero en Home funciona como encabezado de la columna. ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-menu-home > .qbit-products-button { width: 100%; height: 44px; padding: 0 14px; justify-content: flex-start; border: 1px solid #d6e1eb; border-radius: 9px 9px 0 0; background: #f2f8fd; color: #075dcc; font-size: 14px; line-height: 20px; pointer-events: none; box-sizing: border-box; } .qbit-home-catalog-column .qbit-products-menu-home > .qbit-products-button .qbit-products-chevron { margin-left: auto; } /* ----------------------------------------------------- PRIMERA COLUMNA SIEMPRE ABIERTA ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-menu-home > .qbit-products-mega { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; display: block !important; width: 270px !important; min-width: 270px !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: -1px 0 0 !important; padding: 0 !important; border: 1px solid #d6e1eb !important; border-radius: 0 0 9px 9px !important; background: #fff; box-shadow: 0 8px 22px rgba(20, 52, 83, .055) !important; overflow: visible !important; z-index: 45; } .qbit-home-catalog-column .qbit-products-menu-home .qbit-products-mega-inner { position: relative; width: 270px !important; min-height: 0 !important; height: auto !important; overflow: visible; } .qbit-home-catalog-column .qbit-products-menu-home .qbit-products-groups { position: relative; width: 268px !important; min-height: 0 !important; height: auto !important; padding: 4px 0 5px; border-right: 0; border-radius: 0 0 8px 8px; background: #fff; overflow: visible; } /* ----------------------------------------------------- FAMILIAS Tipografía ya acorde al estándar nuevo. ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-group-button { min-height: 36px; padding: 7px 12px; font-size: 13.5px; line-height: 19px; font-weight: 500; cursor: pointer; } .qbit-home-catalog-column .qbit-products-group-button svg { width: 13px !important; height: 13px !important; flex: 0 0 13px; } .qbit-home-catalog-column .qbit-products-group-button:hover { background: #f3f8fc; color: #075dcc; } .qbit-home-catalog-column .qbit-products-group.is-active > .qbit-products-group-button { background: #eaf5fd; color: #075dcc; font-weight: 600; } /* ===================================================== SEGUNDA COLUMNA Se abre SOBRE el contenido derecho, no empuja el grid. ===================================================== */ .qbit-home-catalog-column .qbit-products-menu-home .qbit-products-category-panel { position: absolute !important; top: 0 !important; left: 270px !important; width: 280px !important; min-height: 100% !important; height: auto !important; padding: 12px 0 !important; border: 1px solid #d6e1eb; border-left: 0; border-radius: 0 9px 9px 0; background: #fff; box-shadow: 12px 8px 24px rgba(20, 52, 83, .08); z-index: 55; } /* * El contenedor principal NO se ensancha * cuando existe has-group. */ .qbit-home-catalog-column .qbit-products-menu-home.has-group > .qbit-products-mega { width: 270px !important; min-width: 270px !important; } .qbit-home-catalog-column .qbit-products-column-title { min-height: 39px; padding: 7px 13px 10px; font-size: 14px; line-height: 20px; } .qbit-home-catalog-column .qbit-products-category-link { min-height: 38px; padding: 8px 13px; font-size: 13.5px; line-height: 19px; } /* ===================================================== TERCERA COLUMNA ===================================================== */ .qbit-home-catalog-column .qbit-products-menu-home .qbit-products-subcategory-panel { position: absolute !important; top: 0 !important; left: 280px !important; width: 320px !important; min-height: 100% !important; height: auto !important; max-height: 530px; padding: 12px 0 52px; border: 1px solid #d6e1eb; border-left: 0; border-radius: 0 9px 9px 0; background: #fff; box-shadow: 12px 8px 24px rgba(20, 52, 83, .08); overflow-y: auto; z-index: 65; } .qbit-home-catalog-column .qbit-products-menu-home.has-category > .qbit-products-mega { width: 270px !important; min-width: 270px !important; } .qbit-home-catalog-column .qbit-products-subcategory-link { min-height: 35px; padding: 7px 13px; font-size: 13px; line-height: 18px; } .qbit-home-catalog-column .qbit-products-view-all { font-size: 13px; line-height: 18px; } /* ===================================================== HEADER En Home desktop ya existe Productos en la sidebar. Ocultamos únicamente la instancia del services bar. Los demás menús permanecen. ===================================================== */ body.cl-start .qbit-services-bar .qbit-catalog-entry { display: none !important; } /* * Compensamos ligeramente el espacio para que Soporte TI * quede como primer elemento de la barra superior. */ body.cl-start .qbit-services-nav { gap: 10px; } } /* ========================================================= DESKTOP INTERMEDIO Conservamos sidebar desde 992. El contenido derecho se adapta. ========================================================= */ @media (min-width: 992px) and (max-width: 1199.98px) { .qbit-home-commerce-layout { width: calc(100% - 28px); grid-template-columns: 250px minmax(0, 1fr); gap: 18px; } .qbit-home-catalog-column, .qbit-home-catalog-column .qbit-products-menu-home { width: 250px; } .qbit-home-catalog-column .qbit-products-menu-home > .qbit-products-mega, .qbit-home-catalog-column .qbit-products-menu-home.has-group > .qbit-products-mega, .qbit-home-catalog-column .qbit-products-menu-home.has-category > .qbit-products-mega { width: 250px !important; min-width: 250px !important; } .qbit-home-catalog-column .qbit-products-menu-home .qbit-products-mega-inner { width: 250px !important; } .qbit-home-catalog-column .qbit-products-menu-home .qbit-products-groups { width: 248px !important; } .qbit-home-catalog-column .qbit-products-menu-home .qbit-products-category-panel { left: 250px !important; } /* * Con menos ancho, cards de Home pasan a 2 columnas. */ .qbit-home-commerce-main .qbit-assistant-actions, .qbit-home-commerce-main .qbit-assistant-options, .qbit-home-commerce-main .qbit-shop-by-need-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } } /* ========================================================= TABLET / MOBILE Sidebar fija desaparece. El Home vuelve a comportarse exactamente como antes. ========================================================= */ @media (max-width: 991.98px) { .qbit-home-commerce-layout { display: block; width: 100%; margin: 0; } .qbit-home-catalog-column { display: none !important; } .qbit-home-commerce-main { width: 100%; } } /* QBIT HOME SIDEBAR 4.35B END */ /* QBIT HOME SIDEBAR STYLE 4.35C START */ /* ========================================================= PRODUCTOS — NAVEGACION LATERAL FIJA HOME - sin cabecera "Productos" - primera columna siempre visible - contenedor redondeado - tipografia ligera - hover/activo azul muy suave ========================================================= */ @media (min-width: 992px) { /* ----------------------------------------------------- OCULTAR CABECERA "PRODUCTOS" ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-menu-home > .qbit-products-button { display: none !important; } /* ----------------------------------------------------- CAJA PRINCIPAL ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-menu-home > .qbit-products-mega { margin: 0 !important; border: 1px solid #d7e1ea !important; border-radius: 11px !important; background: #ffffff !important; box-shadow: 0 5px 18px rgba(22, 53, 84, .045) !important; overflow: visible !important; } .qbit-home-catalog-column .qbit-products-menu-home .qbit-products-mega-inner { border-radius: 11px !important; overflow: visible !important; } .qbit-home-catalog-column .qbit-products-menu-home .qbit-products-groups { padding: 6px !important; border: 0 !important; border-radius: 11px !important; background: #fff !important; overflow: visible !important; } /* ----------------------------------------------------- CADA FAMILIA ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-group { margin: 0 !important; } .qbit-home-catalog-column .qbit-products-group-button { width: 100% !important; min-height: 39px !important; padding: 8px 10px !important; border: 0 !important; border-bottom: 0 !important; border-radius: 7px !important; background: transparent !important; color: #37536d !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13.5px !important; line-height: 19px !important; /* * Semibold muy ligero. * Evitamos el peso fuerte que tenía antes. */ font-weight: 500 !important; letter-spacing: 0 !important; transition: background-color .12s ease, color .12s ease !important; } /* separación visual discreta */ .qbit-home-catalog-column .qbit-products-group + .qbit-products-group { margin-top: 1px !important; } /* ----------------------------------------------------- FLECHA ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-group-button svg { width: 12px !important; height: 12px !important; flex: 0 0 12px !important; color: #9baaba !important; transition: color .12s ease, transform .12s ease !important; } /* ----------------------------------------------------- HOVER Azul MUY ligero ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-group-button:hover { background: #f4f9fd !important; color: #1168ad !important; } .qbit-home-catalog-column .qbit-products-group-button:hover svg { color: #5d98c8 !important; } /* ----------------------------------------------------- ACTIVO Sigue siendo discreto. ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-group.is-active > .qbit-products-group-button { background: #edf6fc !important; color: #0867b6 !important; font-weight: 550 !important; } .qbit-home-catalog-column .qbit-products-group.is-active > .qbit-products-group-button svg { color: #438bc5 !important; } /* ----------------------------------------------------- SEGUNDA COLUMNA Conservamos apertura funcional. La hacemos coherente con la caja izquierda. ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-menu-home .qbit-products-category-panel { margin-left: 7px !important; border: 1px solid #d7e1ea !important; border-radius: 10px !important; background: #fff !important; box-shadow: 0 10px 26px rgba(21, 53, 83, .085) !important; } /* ----------------------------------------------------- TERCERA COLUMNA ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-menu-home .qbit-products-subcategory-panel { margin-left: 7px !important; border: 1px solid #d7e1ea !important; border-radius: 10px !important; background: #fff !important; box-shadow: 0 10px 26px rgba(21, 53, 83, .085) !important; } } /* QBIT HOME SIDEBAR STYLE 4.35C END */ /* QBIT HOME SUBMENUS 4.35D START */ /* ========================================================= SEGUNDA Y TERCERA COLUMNA MISMO LENGUAJE VISUAL QUE MENU PRINCIPAL ========================================================= */ @media (min-width: 992px) { /* ----------------------------------------------------- CAJAS ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-category-panel, .qbit-home-catalog-column .qbit-products-subcategory-panel { padding: 6px !important; border: 1px solid #d7e1ea !important; border-radius: 11px !important; background: #fff !important; box-shadow: 0 8px 22px rgba(22, 53, 84, .07) !important; box-sizing: border-box !important; } /* ----------------------------------------------------- QUITAR ENCABEZADOS GRANDES ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-column-title { display: none !important; } /* ----------------------------------------------------- CATEGORIAS — MISMO FORMATO QUE MENU PRINCIPAL ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-category { margin: 0 !important; } .qbit-home-catalog-column .qbit-products-category + .qbit-products-category { margin-top: 1px !important; } .qbit-home-catalog-column .qbit-products-category-link { width: 100% !important; min-height: 39px !important; padding: 8px 10px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #37536d !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13.5px !important; line-height: 19px !important; font-weight: 500 !important; text-decoration: none !important; box-sizing: border-box !important; transition: background-color .12s ease, color .12s ease !important; } .qbit-home-catalog-column .qbit-products-category-link svg { width: 12px !important; height: 12px !important; flex: 0 0 12px !important; color: #9baaba !important; } .qbit-home-catalog-column .qbit-products-category-link:hover { background: #f4f9fd !important; color: #1168ad !important; } .qbit-home-catalog-column .qbit-products-category-link:hover svg { color: #5d98c8 !important; } .qbit-home-catalog-column .qbit-products-category.is-active > .qbit-products-category-link { background: #edf6fc !important; color: #0867b6 !important; font-weight: 550 !important; } .qbit-home-catalog-column .qbit-products-category.is-active > .qbit-products-category-link svg { color: #438bc5 !important; } /* ----------------------------------------------------- SUBCATEGORIAS — MISMO FORMATO ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-subcategories { padding: 0 !important; } .qbit-home-catalog-column .qbit-products-subcategory-link { width: 100% !important; min-height: 39px !important; padding: 8px 10px !important; border-radius: 7px !important; background: transparent !important; color: #37536d !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13.5px !important; line-height: 19px !important; font-weight: 500 !important; text-decoration: none !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; transition: background-color .12s ease, color .12s ease !important; } .qbit-home-catalog-column .qbit-products-subcategory-link:hover { background: #f4f9fd !important; color: #1168ad !important; } /* ----------------------------------------------------- VER TODO ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-view-all { position: static !important; width: 100% !important; min-height: 39px !important; margin-top: 4px !important; padding: 8px 10px !important; border-top: 1px solid #e8eef3 !important; border-radius: 0 0 7px 7px !important; background: transparent !important; color: #1168ad !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13.5px !important; line-height: 19px !important; font-weight: 550 !important; text-decoration: none !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; } .qbit-home-catalog-column .qbit-products-view-all:hover { background: #f4f9fd !important; color: #075dcc !important; } /* ----------------------------------------------------- ESPACIADO INTERNO ----------------------------------------------------- */ .qbit-home-catalog-column .qbit-products-categories { padding: 0 !important; } } /* QBIT HOME SUBMENUS 4.35D END */ /* QBIT HOME RADIUS 4.35G START */ /* ========================================================= HOME QBIT — RADIO VISUAL MAS CONTENIDO ========================================================= */ /* --------------------------------------------------------- SECCIONES PRINCIPALES --------------------------------------------------------- */ .qbit-home-assistant { border-radius: 8px !important; } /* Compra según necesidad no tiene caja exterior completa, así que ajustamos sus cards. */ .qbit-need-card { border-radius: 6px !important; } /* --------------------------------------------------------- ASISTENTE --------------------------------------------------------- */ .qbit-assistant-action { border-radius: 6px !important; } .qbit-assistant-action-icon, .qbit-need-icon { border-radius: 6px !important; } .qbit-assistant-option { border-radius: 5px !important; } .qbit-assistant-back { border-radius: 5px !important; } .qbit-assistant-service-callout { border-radius: 6px !important; } .qbit-assistant-service-callout > a { border-radius: 5px !important; } /* ========================================================= MENU PRODUCTOS HOME ========================================================= */ @media (min-width: 992px) { /* Caja principal */ .qbit-home-catalog-column .qbit-products-menu-home > .qbit-products-mega { border-radius: 7px !important; } .qbit-home-catalog-column .qbit-products-menu-home .qbit-products-mega-inner { border-radius: 7px !important; } .qbit-home-catalog-column .qbit-products-menu-home .qbit-products-groups { border-radius: 7px !important; } /* Filas principales */ .qbit-home-catalog-column .qbit-products-group-button { border-radius: 5px !important; } /* Segunda columna */ .qbit-home-catalog-column .qbit-products-category-panel { border-radius: 7px !important; } .qbit-home-catalog-column .qbit-products-category-link { border-radius: 5px !important; } /* Tercera columna */ .qbit-home-catalog-column .qbit-products-subcategory-panel { border-radius: 7px !important; } .qbit-home-catalog-column .qbit-products-subcategory-link { border-radius: 5px !important; } .qbit-home-catalog-column .qbit-products-view-all { border-radius: 0 0 5px 5px !important; } } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 575.98px) { .qbit-home-assistant { border-radius: 7px !important; } } /* QBIT HOME RADIUS 4.35G END */ /* QBIT HOME GAP 4.35H START */ /* * Igualamos visualmente la separación entre: * * menú principal -> contenido Home * * con la separación que existe entre: * * menú principal -> segundo nivel desplegado. */ @media (min-width: 992px) { .qbit-home-commerce-layout { gap: 8px !important; } } /* QBIT HOME GAP 4.35H END */ /* QBIT HOME VERTICAL SPACING 4.35I START */ /* ========================================================= HOME — ESPACIADO VERTICAL GENERAL Header -> Home: 18px Home -> Footer: 20px ========================================================= */ @media (min-width: 992px) { .qbit-home-commerce-layout { margin-top: 18px !important; margin-bottom: 20px !important; } /* * La última sección ya vive dentro del layout general. * Evitamos que su antiguo margin-bottom vuelva a sumar * espacio antes del Footer. */ .qbit-home-commerce-main .qbit-shop-by-need { margin-bottom: 0 !important; } } /* Tablet / móvil: también evitamos una separación excesiva al final. */ @media (max-width: 991.98px) { .qbit-home-commerce-main .qbit-shop-by-need { margin-bottom: 20px !important; } } /* QBIT HOME VERTICAL SPACING 4.35I END */ /* QBIT HOME FOOTER GAP 4.35J2 START */ /* ========================================================= HOME -> FOOTER El footer conserva su diseño propio. Aquí solamente controlamos el margen exterior del Home. ========================================================= */ @media (min-width: 992px) { /* * Contenedor global Home: * casi sin espacio añadido al terminar. */ .qbit-home-commerce-layout { margin-bottom: 8px !important; } /* * Última sección del Home: * no debe sumar margen adicional. */ .qbit-home-commerce-main .qbit-shop-by-need { margin-bottom: 0 !important; } } /* Tablet */ @media (max-width: 991.98px) { .qbit-home-commerce-main .qbit-shop-by-need { margin-bottom: 8px !important; } } /* QBIT HOME FOOTER GAP 4.35J2 END */ /* QBIT HOME FOOTER MARGIN 4.35J3 START */ /* * El footer global tiene margin-top propio. * En Home ya controlamos la separación desde * .qbit-home-commerce-layout, por lo que aquí * eliminamos únicamente ese margen duplicado. */ @media (min-width: 992px) { body.cl-start .qbit-footer { margin-top: 0 !important; } .qbit-home-commerce-layout { margin-bottom: 8px !important; } .qbit-home-commerce-main .qbit-shop-by-need { margin-bottom: 0 !important; } } /* QBIT HOME FOOTER MARGIN 4.35J3 END */ /* QBIT SHOP BY NEED ROW 4.35N2 START */ /* ========================================================= COMPRA SEGUN LO QUE NECESITAS Una sola fila horizontal: [ titulo/subtitulo ][ tarjetas ] ========================================================= */ @media (min-width: 992px) { /* * La sección ocupa todo el ancho del layout existente. * No crea una nueva estructura de columnas. */ .qbit-home-commerce-layout > .qbit-shop-by-need { grid-column: 1 / -1; width: 100%; max-width: none; margin: 0 0 8px !important; padding: 0 !important; } /* * UNA SOLA FILA */ .qbit-shop-by-need-row { width: 100%; display: flex; align-items: flex-start; gap: 8px; } /* * BLOQUE 1 * Queda exactamente debajo del menú Productos. */ .qbit-shop-by-need-row > .qbit-shop-by-need-heading { flex: 0 0 270px; width: 270px; margin: 0 !important; padding: 6px 4px 0 4px; box-sizing: border-box; } .qbit-shop-by-need-row .qbit-shop-by-need-heading > div { width: 100%; } /* * ACCESOS RAPIDOS ya no debe existir. */ .qbit-shop-by-need-eyebrow { display: none !important; } /* * TÍTULO */ .qbit-shop-by-need-row .qbit-shop-by-need-heading h2 { margin: 0 0 5px !important; font-size: 22px !important; line-height: 28px !important; color: #173b63; } .qbit-shop-by-need-row .qbit-shop-by-need-heading p { margin: 0 !important; font-size: 14px !important; line-height: 20px !important; color: #788491; } /* * BLOQUE 2 * Las seis tarjetas quedan inmediatamente a la derecha. */ .qbit-shop-by-need-row > .qbit-shop-by-need-grid { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: 10px; margin: 0 !important; } } /* ========================================================= DESKTOP INTERMEDIO Sidebar actual usa 250px. ========================================================= */ @media (min-width: 992px) and (max-width: 1199.98px) { .qbit-shop-by-need-row > .qbit-shop-by-need-heading { flex-basis: 250px; width: 250px; } .qbit-shop-by-need-row > .qbit-shop-by-need-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } } /* ========================================================= TABLET / MOVIL Aquí sí apilamos porque no existe sidebar fija. ========================================================= */ @media (max-width: 991.98px) { .qbit-shop-by-need-row { display: block; } .qbit-shop-by-need-row > .qbit-shop-by-need-heading { width: auto; margin-bottom: 18px !important; } .qbit-shop-by-need-row > .qbit-shop-by-need-grid { width: 100%; } } /* QBIT SHOP BY NEED ROW 4.35N2 END */ /* QBIT HOME 4.35N3 START */ /* ========================================================= HOME — COMPRA SEGUN LO QUE NECESITAS - iconos un poco mas grandes - titulos sin bold pesado ========================================================= */ .qbit-shop-by-need-grid svg, .qbit-shop-by-need-grid .qbit-card-icon svg, .qbit-shop-by-need-grid .qbit-home-card-icon svg { width: 22px !important; height: 22px !important; } .qbit-shop-by-need-grid .qbit-card-icon, .qbit-shop-by-need-grid .qbit-home-card-icon, .qbit-shop-by-need-grid [class*="icon-wrap"], .qbit-shop-by-need-grid [class*="icon-box"] { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; border-radius: 10px !important; } .qbit-shop-by-need-grid strong, .qbit-shop-by-need-grid b, .qbit-shop-by-need-grid h3, .qbit-shop-by-need-grid h4, .qbit-shop-by-need-grid [class*="title"] { font-weight: 600 !important; letter-spacing: 0 !important; } .qbit-shop-by-need-grid p, .qbit-shop-by-need-grid small, .qbit-shop-by-need-grid [class*="subtitle"], .qbit-shop-by-need-grid [class*="desc"] { font-size: 14.5px !important; line-height: 1.35 !important; } /* QBIT HOME 4.35N3 END */ /* QBIT HOME 4.35N4 START */ /* ========================================================= HOME — ICONOS SVG MAS GRANDES SOLO AUMENTA EL ICONO, NO EL FONDO/RECUADRO APLICA A TODAS LAS CARDS HOME QBIT ========================================================= */ /* Cards del asistente + cards de compra segun necesidad */ .qbit-home-assistant svg, .qbit-home-assistant .qbit-card-icon svg, .qbit-home-assistant .qbit-home-card-icon svg, .qbit-home-quickaccess-grid svg, .qbit-home-quickaccess-grid .qbit-card-icon svg, .qbit-home-quickaccess-grid .qbit-home-card-icon svg, .qbit-shop-by-need-grid svg, .qbit-shop-by-need-grid .qbit-card-icon svg, .qbit-shop-by-need-grid .qbit-home-card-icon svg { width: 25px !important; height: 25px !important; } /* Mantener intacto el tamano del fondo del icono */ .qbit-home-assistant .qbit-card-icon, .qbit-home-assistant .qbit-home-card-icon, .qbit-home-quickaccess-grid .qbit-card-icon, .qbit-home-quickaccess-grid .qbit-home-card-icon, .qbit-shop-by-need-grid .qbit-card-icon, .qbit-shop-by-need-grid .qbit-home-card-icon { width: inherit !important; height: inherit !important; min-width: unset !important; min-height: unset !important; } /* QBIT HOME 4.35N4 END */\n\n \n /* QBIT HOME SINGLE ROW 4.35N6 START */ /* ========================================================= COMPRA SEGUN LO QUE NECESITAS UNA SOLA FILA CONTINUA: [INTRO][1][2][3][4][5][6] NO grid de 2 columnas. NO segunda fila de tarjetas en desktop. ========================================================= */ @media (min-width: 1200px) { /* Sección completa a todo el ancho del Home */ .qbit-home-commerce-layout > .qbit-shop-by-need { grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; margin: 0 0 8px !important; padding: 0 !important; } /* ----------------------------------------------------- UNA SOLA FILA REAL ----------------------------------------------------- */ .qbit-shop-by-need-row { width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------------------- INTRO Es simplemente el primer elemento de la fila. NO es una columna estructural. ----------------------------------------------------- */ .qbit-shop-by-need-row > .qbit-shop-by-need-heading { flex: 0 0 270px !important; width: 270px !important; min-width: 270px !important; margin: 0 !important; padding: 8px 7px !important; box-sizing: border-box !important; display: flex !important; align-items: flex-start !important; background: transparent !important; border: 0 !important; } .qbit-shop-by-need-row .qbit-shop-by-need-heading > div { width: 100% !important; } .qbit-shop-by-need-eyebrow { display: none !important; } .qbit-shop-by-need-row .qbit-shop-by-need-heading h2 { margin: 0 0 5px !important; font-size: 20px !important; line-height: 25px !important; font-weight: 600 !important; } .qbit-shop-by-need-row .qbit-shop-by-need-heading p { margin: 0 !important; font-size: 13px !important; line-height: 18px !important; } /* ----------------------------------------------------- LAS 6 CARDS TAMBIEN SON PARTE DE ESA MISMA FILA ----------------------------------------------------- */ .qbit-shop-by-need-row > .qbit-shop-by-need-grid { flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } /* Las seis cards comparten el espacio disponible */ .qbit-shop-by-need-row .qbit-need-card { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; min-height: 86px !important; padding: 11px 10px !important; margin: 0 !important; grid-template-columns: 42px minmax(0, 1fr) 12px !important; gap: 7px !important; box-sizing: border-box !important; } /* Texto debe poder contraerse sin romper la fila */ .qbit-shop-by-need-row .qbit-need-copy { min-width: 0 !important; } .qbit-shop-by-need-row .qbit-need-copy strong { font-size: 13.5px !important; line-height: 18px !important; font-weight: 500 !important; } .qbit-shop-by-need-row .qbit-need-copy small { font-size: 12px !important; line-height: 16px !important; } /* * Conservamos el fondo del icono como ya quedó. * Solo mantenemos SVG grande. */ .qbit-shop-by-need-row .qbit-need-icon { width: 42px !important; height: 42px !important; flex: 0 0 42px !important; } .qbit-shop-by-need-row .qbit-need-icon svg { width: 25px !important; height: 25px !important; } } /* ========================================================= DESKTOP INTERMEDIO A menor ancho permitimos 3+3 para no destruir legibilidad. ========================================================= */ @media (min-width: 992px) and (max-width: 1199.98px) { .qbit-shop-by-need-row { display: flex !important; align-items: flex-start !important; gap: 8px !important; } .qbit-shop-by-need-row > .qbit-shop-by-need-heading { flex: 0 0 250px !important; width: 250px !important; } .qbit-shop-by-need-row > .qbit-shop-by-need-grid { flex: 1 1 auto !important; display: grid !important; grid-template-columns: repeat( 3, minmax(0, 1fr) ) !important; gap: 8px !important; } } /* ========================================================= TABLET / MOVIL ========================================================= */ @media (max-width: 991.98px) { .qbit-shop-by-need-row { display: block !important; } .qbit-shop-by-need-row > .qbit-shop-by-need-heading { width: 100% !important; margin-bottom: 14px !important; } } /* QBIT HOME SINGLE ROW 4.35N6 END */ /* QBIT HOME 4.35N7 START */ /* ========================================================= MARCO UNIFICADO PARA: COMPRA SEGUN LO QUE NECESITAS ========================================================= */ .qbit-shop-by-need { background: #eef5fc !important; border: 1px solid #d7e4f1 !important; border-radius: 16px !important; padding: 18px 18px 16px !important; margin: 0 0 18px !important; box-sizing: border-box !important; overflow: hidden !important; } /* evita que el contenido interno agregue aire extraño */ .qbit-shop-by-need-row { margin: 0 !important; } /* el encabezado lateral ya queda integrado al mismo marco */ .qbit-shop-by-need-row > .qbit-shop-by-need-heading { background: transparent !important; border: 0 !important; padding-top: 2px !important; } /* la rejilla/fila derecha también queda dentro del mismo marco */ .qbit-shop-by-need-row > .qbit-shop-by-need-grid { margin: 0 !important; padding: 0 !important; } /* tarjetas internas un poco más limpias dentro del marco */ .qbit-shop-by-need .qbit-need-card { background: #ffffff !important; } /* móvil */ @media (max-width: 991.98px) { .qbit-shop-by-need { padding: 16px 14px 14px !important; border-radius: 14px !important; } } /* QBIT HOME 4.35N7 END */ /* ========================================================= QBIT HOME 4.35N9 ESPACIADO INTERNO DEL MARCO "COMPRA SEGUN LO QUE NECESITAS" ========================================================= */ body.cl-start .qbit-shop-by-need, body.cl-start .qbit-home-quickaccess-layout { padding: 12px !important; gap: 12px !important; box-sizing: border-box !important; } body.cl-start .qbit-home-quickaccess-intro, body.cl-start .qbit-shop-by-need-intro { padding: 0 !important; margin: 0 !important; } body.cl-start .qbit-home-quickaccess-grid, body.cl-start .qbit-shop-by-need-grid { gap: 12px !important; margin: 0 !important; } body.cl-start .qbit-home-quickaccess-grid > *, body.cl-start .qbit-shop-by-need-grid > * { margin: 0 !important; } /* QBIT HOME ASSISTANT FRAME 4.35N10 START */ /* * Igualar el espacio interior del marco superior * con el marco inferior de "Compra según lo que necesitas". * * Únicamente se modifica el padding exterior. */ body.cl-start .qbit-home-assistant { padding: 12px !important; box-sizing: border-box !important; } /* QBIT HOME ASSISTANT FRAME 4.35N10 END */ /* QBIT HOME HOURLY PRODUCTS 4.38E START */ /* ========================================================= PRODUCTOS DISPONIBLES 3 × 2 dentro de la columna derecha del Home ========================================================= */ body.cl-start .qbit-home-hourly-products { width: 100%; margin-top: 8px; padding: 10px; border: 1px solid #d7e2ec; border-radius: 7px; background: #f7fbff; box-sizing: border-box; } /* --------------------------------------------------------- HEADER --------------------------------------------------------- */ body.cl-start .qbit-home-hourly-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 9px; } body.cl-start .qbit-home-hourly-eyebrow { display: block; margin-bottom: 2px; color: #0875d1; font-size: 11px; line-height: 15px; font-weight: 600; letter-spacing: .04em; } body.cl-start .qbit-home-hourly-header h2 { margin: 0; color: #063867; font-size: 20px; line-height: 24px; font-weight: 500; } body.cl-start .qbit-home-hourly-refresh { padding-bottom: 2px; color: #718396; font-size: 12px; line-height: 16px; white-space: nowrap; } /* --------------------------------------------------------- GRID --------------------------------------------------------- */ body.cl-start .qbit-home-hourly-grid { display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: 8px; } /* --------------------------------------------------------- CARD --------------------------------------------------------- */ body.cl-start .qbit-home-hourly-card { min-width: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 9px; border: 1px solid #d6e0e9; border-radius: 6px; background: #fff; box-sizing: border-box; } /* --------------------------------------------------------- IMAGEN --------------------------------------------------------- */ body.cl-start .qbit-home-hourly-image { width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 5px; background: #fff; } body.cl-start .qbit-home-hourly-image img { width: 100%; height: 100%; display: block; object-fit: contain; } /* --------------------------------------------------------- CUERPO --------------------------------------------------------- */ body.cl-start .qbit-home-hourly-card-body { min-width: 0; display: flex; flex-direction: column; } body.cl-start .qbit-home-hourly-meta { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 3px; } body.cl-start .qbit-home-hourly-brand { min-width: 0; overflow: hidden; color: #63768a; font-size: 10.5px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; } body.cl-start .qbit-home-hourly-stock { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: #287a54; font-size: 10.5px; line-height: 14px; white-space: nowrap; } body.cl-start .qbit-home-hourly-stock > span { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: currentColor; } /* --------------------------------------------------------- TITULO --------------------------------------------------------- */ body.cl-start .qbit-home-hourly-title { display: -webkit-box; min-height: 34px; margin: 0 0 3px; overflow: hidden; color: #063867; font-size: 13px; line-height: 17px; font-weight: 500; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } body.cl-start .qbit-home-hourly-title a { color: inherit; text-decoration: none; } body.cl-start .qbit-home-hourly-title a:hover { color: #0875d1; } /* --------------------------------------------------------- SKU --------------------------------------------------------- */ body.cl-start .qbit-home-hourly-sku { margin-bottom: 5px; overflow: hidden; color: #7a8a99; font-size: 10px; line-height: 13px; text-overflow: ellipsis; white-space: nowrap; } /* --------------------------------------------------------- PRECIO + ENLACE --------------------------------------------------------- */ body.cl-start .qbit-home-hourly-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; } body.cl-start .qbit-home-hourly-price { min-width: 0; display: flex; flex-direction: column; } body.cl-start .qbit-home-hourly-price strong { color: #063867; font-size: 13px; line-height: 17px; font-weight: 600; white-space: nowrap; } body.cl-start .qbit-home-hourly-price small { color: #7a8a99; font-size: 9.5px; line-height: 12px; } body.cl-start .qbit-home-hourly-link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: #0875d1; font-size: 10.5px; line-height: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; } body.cl-start .qbit-home-hourly-link:hover { text-decoration: underline; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1199.98px) { body.cl-start .qbit-home-hourly-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } } /* ========================================================= MOVIL ========================================================= */ @media (max-width: 767.98px) { body.cl-start .qbit-home-hourly-products { padding: 8px; } body.cl-start .qbit-home-hourly-header { display: block; } body.cl-start .qbit-home-hourly-refresh { display: block; margin-top: 2px; } body.cl-start .qbit-home-hourly-grid { grid-template-columns: 1fr; } } /* QBIT HOME HOURLY PRODUCTS 4.38E END */ /* QBIT HOME HOURLY SPACING 4.38F START */ /* ========================================================= AJUSTE FINO ENTRE ASISTENTE Y PRODUCTOS DISPONIBLES ========================================================= */ body.cl-start .qbit-home-hourly-products { margin-top: 6px !important; } /* * Texto derecho: * más comercial y ligeramente más integrado visualmente. */ body.cl-start .qbit-home-hourly-refresh { padding-bottom: 1px !important; color: #667b8f !important; font-size: 12px !important; line-height: 16px !important; font-weight: 400 !important; } /* QBIT HOME HOURLY SPACING 4.38F END */ /* QBIT HOME HOURLY SPACING 4.38F3 START */ /* ========================================================= ASISTENTE -> PRODUCTOS DISPONIBLES La regla histórica del assistant aportaba 24px y el bloque horario otros 6px. Dejamos una sola separación real de 8px. ========================================================= */ @media (min-width: 992px) { body.cl-start .qbit-home-commerce-main .qbit-home-assistant { margin-bottom: 8px !important; } body.cl-start .qbit-home-hourly-products { margin-top: 0 !important; } } /* Tablet / móvil: misma relación visual, sin acumular márgenes. */ @media (max-width: 991.98px) { body.cl-start .qbit-home-assistant { margin-bottom: 8px !important; } body.cl-start .qbit-home-hourly-products { margin-top: 0 !important; } } /* QBIT HOME HOURLY SPACING 4.38F3 END */ /* QBIT HOME ASSISTANT COMPACT 4.38G START */ /* ========================================================= ASISTENTE HOME — COMPACTACIÓN VERTICAL Objetivo: subir aproximadamente 45px el inicio del bloque "También podría interesarte", para que el conjunto derecho termine prácticamente alineado con el menú Productos. NO modifica: - tipografía - tamaño de iconos - ancho - estructura ========================================================= */ @media (min-width: 992px) { body.cl-start .qbit-home-assistant .qbit-assistant-intro { margin-bottom: 12px !important; } body.cl-start .qbit-home-assistant .qbit-assistant-actions { gap: 8px 12px !important; } body.cl-start .qbit-home-assistant .qbit-assistant-action { min-height: 64px !important; padding: 9px 14px !important; } /* * Conservamos verticalmente centrados icono, * contenido y flecha. */ body.cl-start .qbit-home-assistant .qbit-assistant-action-icon { align-self: center !important; } } /* QBIT HOME ASSISTANT COMPACT 4.38G END */ /* QBIT URGENT CARD 4.39D START */ /* ========================================================= SOPORTE URGENTE MISMA GEOMETRIA QUE LAS DEMAS CARDS DEL ASISTENTE. Solo cambia la identidad visual de urgencia. ========================================================= */ body.cl-start .qbit-assistant-action-urgent { border-color: #f0b1ae !important; background: #fff7f6 !important; color: #6b3030 !important; text-decoration: none !important; } body.cl-start .qbit-assistant-action-urgent .qbit-urgent-card-icon { background: #ffe8e6 !important; color: #ed3e39 !important; } body.cl-start .qbit-assistant-action-urgent strong { color: #9f231f !important; font-weight: 600 !important; } body.cl-start .qbit-assistant-action-urgent small { color: #8d6260 !important; } body.cl-start .qbit-assistant-action-urgent .qbit-assistant-action-arrow { color: #df3934 !important; } body.cl-start .qbit-assistant-action-urgent:hover { border-color: #e95b56 !important; background: #fff0ef !important; box-shadow: 0 3px 10px rgba(218, 53, 48, .08) !important; } body.cl-start .qbit-assistant-action-urgent:focus-visible { outline: 2px solid #e83e38 !important; outline-offset: 2px; } /* QBIT URGENT CARD 4.39D END */ /* QBIT URGENT FLYOUT 4.39F START */ /* ========================================================= SOPORTE URGENTE - mismo ancho que una card normal - el panel se expande hacia arriba - efecto visual de crecimiento hacia arriba ========================================================= */ body.cl-start .qbit-urgent-card-wrap { position: relative; width: 100%; min-width: 0; overflow: visible; align-self: stretch; } body.cl-start .qbit-urgent-card-wrap .qbit-assistant-action-urgent { position: relative; z-index: 3; width: 100%; min-width: 0; margin: 0; box-sizing: border-box; } body.cl-start .qbit-urgent-card-heading { display: flex; align-items: center; gap: 6px; } body.cl-start .qbit-urgent-card-badge { display: inline-flex; align-items: center; justify-content: center; padding: 1px 6px; border-radius: 999px; background: #eb3d38; color: #fff; font-size: 9.5px; line-height: 13px; font-weight: 650; white-space: nowrap; } /* panel expandido hacia arriba */ body.cl-start .qbit-urgent-card-flyout { position: absolute; left: 0; right: auto; bottom: calc(100% - 28px); width: 100%; min-width: 0; box-sizing: border-box; z-index: 2; padding: 12px 14px 14px; border: 1px solid #efa9a6; border-radius: 7px; background: #fffafa; box-shadow: 0 12px 28px rgba(71, 35, 35, .16); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transform-origin: bottom center; transition: opacity .16s ease, transform .16s ease, visibility .16s ease; } /* mostrar al hover/focus */ body.cl-start .qbit-urgent-card-wrap:hover .qbit-urgent-card-flyout, body.cl-start .qbit-urgent-card-wrap:focus-within .qbit-urgent-card-flyout { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* card base en hover */ body.cl-start .qbit-urgent-card-wrap:hover .qbit-assistant-action-urgent, body.cl-start .qbit-urgent-card-wrap:focus-within .qbit-assistant-action-urgent { border-color: #ea6864 !important; background: #fff1f0 !important; } /* contenido */ body.cl-start .qbit-urgent-flyout-eyebrow { margin-bottom: 3px; color: #e13833; font-size: 10.5px; line-height: 14px; font-weight: 650; letter-spacing: .04em; } body.cl-start .qbit-urgent-flyout-title { display: block; margin-bottom: 4px; color: #8d211e; font-size: 15px; line-height: 19px; font-weight: 600; } body.cl-start .qbit-urgent-card-flyout p { margin: 0 0 9px; color: #5e6a75; font-size: 12.5px; line-height: 17px; } body.cl-start .qbit-urgent-flyout-features { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-bottom: 8px; } body.cl-start .qbit-urgent-flyout-features span { color: #75413f; font-size: 11.5px; line-height: 15px; font-weight: 500; } body.cl-start .qbit-urgent-flyout-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid #f1d7d5; } body.cl-start .qbit-urgent-flyout-footer > span:first-child { max-width: 230px; color: #967a78; font-size: 9.5px; line-height: 13px; } body.cl-start .qbit-urgent-flyout-action { color: #df3934; font-size: 11.5px; line-height: 15px; font-weight: 600; white-space: nowrap; } @media (max-width: 991.98px) { body.cl-start .qbit-urgent-card-flyout { display: none; } } /* QBIT URGENT FLYOUT 4.39F END */ /* QBIT URGENT FLYOUT 4.39G START */ /* ocultar CTA redundante dentro del flyout para que respire mejor */ body.cl-start .qbit-urgent-flyout-action { display: none; } /* QBIT URGENT FLYOUT 4.39G END */ /* QBIT URGENT FLYOUT LIMIT 4.39H START */ /* ========================================================= SOPORTE URGENTE — AJUSTE FINAL DE EXPANSION Objetivos: - aprovechar el espacio superior; - NO salir del marco principal del asistente; - mantener alineada la esquina derecha; - mostrar completa la nota legal. ========================================================= */ @media (min-width: 992px) { /* * El panel continúa creciendo hacia arriba, * pero empieza más abajo que en 4.39F/4.39G. * * Al haberse eliminado el título redundante, * esta posición permite mantenerlo dentro del marco. */ body.cl-start .qbit-urgent-card-flyout { left: 0 !important; right: 0 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; bottom: calc(100% - 56px) !important; padding: 11px 14px 12px !important; box-sizing: border-box !important; } /* * Encabezado superior compacto. */ body.cl-start .qbit-urgent-flyout-eyebrow { margin: 0 0 5px !important; font-size: 10.5px !important; line-height: 14px !important; } /* * Texto descriptivo. */ body.cl-start .qbit-urgent-card-flyout p { margin: 0 0 8px !important; font-size: 12.5px !important; line-height: 17px !important; } body.cl-start .qbit-urgent-flyout-features { margin-bottom: 8px !important; gap: 4px 10px !important; } /* * Footer sin CTA redundante. * La nota legal utiliza ahora TODO el ancho. */ body.cl-start .qbit-urgent-flyout-footer { display: block !important; width: 100% !important; padding-top: 7px !important; box-sizing: border-box !important; } body.cl-start .qbit-urgent-flyout-footer > span:first-child { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; color: #967a78 !important; font-size: 9.5px !important; line-height: 13px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } /* * Definitivamente oculto: * "Solicitar soporte →" */ body.cl-start .qbit-urgent-flyout-action { display: none !important; } } /* QBIT URGENT FLYOUT LIMIT 4.39H END */