/* ============================================================ AVANXA CART OVERLAY · v1.3.0 Ícono del carrito + POPUP anclado bajo el navbar (arriba-derecha). - Todas las clases con prefijo único .avxcart- - Todo scopeado bajo .avxcart-root para aislarlo del tema/Elementor. - !important en lo visual porque el tema/Elementor sobreescriben todo. - El popup se ancla vía --avxcart-anchor-top / --avxcart-anchor-maxh (las setea el JS según el navbar activo). - Sin backdrop: la página queda interactiva detrás del popup. ============================================================ */ /* ------------------------------------------------------------ Anti-FOUC: el CSS crítico inline del oculta .avxcart-root (visibility:hidden) hasta que este archivo carga. Al aplicarse esta hoja (encolada en el head, después del crítico), esta regla revela el carrito ya estilizado. Debe ir lo más arriba posible. ------------------------------------------------------------ */ .avxcart-root{ visibility:visible !important; } /* ------------------------------------------------------------ Anti-duplicado: cuando el shortcode vive dentro de un header sticky de Elementor con "efectos", Elementor clona el elemento en un .elementor-sticky__spacer (visibility:hidden) para conservar el hueco. Ese clon duplica el carrito (y su botón "Ver catálogo"). Se elimina el carrito clonado del spacer. (Regla fuera de .avxcart-root: el ancestro está por encima.) ------------------------------------------------------------ */ .elementor-sticky__spacer .avxcart-root{ display:none !important; } /* ---------- Wrapper raíz ---------- */ .avxcart-root, .avxcart-root *{ box-sizing:border-box !important; } /* ---------- Variables de color (editables desde Ajustes) ---------- */ .avxcart-root{ --avxcart-c-violet10:#F0E5F9; --avxcart-c-violet40:#9558D8; --avxcart-c-violet80:#471C70; --avxcart-c-fuchsia80:#782781; --avxcart-c-lime:#E3F853; --avxcart-c-shark95:#222222; --avxcart-c-shark20:#D1D1D1; --avxcart-c-shark30:#B0B0B0; --avxcart-c-black:#111111; --avxcart-c-iron90:#545454; --avxcart-c-iron80:#676767; --avxcart-c-iron30:#D3D3D3; --avxcart-c-iron20:#DFDFDF; --avxcart-c-star:#F5B500; --avxcart-c-card-img:#3A2A52; } /* ---------- Ícono del carrito ---------- */ .avxcart-root .avxcart-cart-icon{ position:relative !important; width:52px !important;height:52px !important; border:2px solid transparent !important; border-radius:50px !important; display:flex !important;align-items:center !important;justify-content:center !important; cursor:pointer !important;background:transparent !important; padding:0 !important;margin:0 !important; transition:background .2s ease, border-color .2s ease !important; } .avxcart-root .avxcart-cart-icon svg{ width:32px !important;height:32px !important;color:#fff !important;display:block !important; } .avxcart-root .avxcart-cart-icon:hover{ background:#9558D866 !important; border-color:#BC92E7 !important; } .avxcart-root .avxcart-cart-badge{ position:absolute !important; bottom:6px !important; right:2px !important; min-width:22px !important; height:22px !important; padding:0 5px !important; border-radius:50% !important; background:#fff !important; color:#BE42D5 !important; border:1px solid #BE42D5 !important; font-size:11px !important; font-weight:700 !important; line-height:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; } /* Oculta el badge cuando el carrito está vacío */ .avxcart-root .avxcart-cart-badge.avxcart-cart-badge--empty{ display:none !important; } /* ---------- Overlay ---------- */ /* Sin backdrop: el popup abre sin oscurecer ni bloquear la página. El elemento se mantiene en el DOM por compatibilidad, pero es inerte. */ .avxcart-root .avxcart-overlay{ display:none !important; } /* ---------- Popup (drawer) ---------- */ /* Fuente de la palabra "¡Felicitaciones!" (Visby CF es de pago: se usa si el sitio la tiene cargada; si no, cae a Inter). NO sustituir sin fallback. */ .avxcart-root .avxcart-drawer{ --avxcart-font-visby:'Visby CF','Inter',sans-serif; position:fixed !important; top:var(--avxcart-anchor-top,90px) !important; right:16px !important; width:430px !important;max-width:calc(100vw - 32px) !important; max-height:var(--avxcart-anchor-maxh,80vh) !important; /* Zona superior (título + cards de producto) con fondo lavanda; la zona de subtotal+botones es blanca (.avxcart-drawer-foot). */ background:#F8F2FD !important; border:1px solid var(--avxcart-c-shark30,#B0B0B0) !important; border-radius:8px !important; display:flex !important;flex-direction:column !important; box-shadow:0 18px 44px rgba(45,15,80,.28) !important; overflow:hidden !important; font-family:'Inter',sans-serif !important; z-index:99999 !important; /* estado cerrado */ opacity:0 !important;visibility:hidden !important;pointer-events:none !important; transform:translateY(-12px) scale(.97) !important; transform-origin:top right !important; transition:opacity .22s ease, transform .22s ease, visibility .22s ease !important; } .avxcart-root .avxcart-drawer.avxcart-is-open{ opacity:1 !important;visibility:visible !important;pointer-events:auto !important; transform:translateY(0) scale(1) !important; } /* ---------- Head ---------- */ /* El contenedor aporta el padding lateral de 32px (24px arriba). */ .avxcart-root .avxcart-drawer-head{ flex:0 0 auto !important;position:relative !important;padding:24px 32px 8px !important; } .avxcart-root .avxcart-drawer-head .avxcart-head-title{ margin:0 !important;padding-right:36px !important;display:block !important; } .avxcart-root .avxcart-drawer-head .avxcart-head-congrats{ display:block !important; font-family:var(--avxcart-font-visby) !important;font-weight:600 !important;font-size:24px !important; color:var(--avxcart-c-black,#111) !important;line-height:1.2 !important; } .avxcart-root .avxcart-drawer-head .avxcart-head-sub{ display:block !important; font-family:'Inter',sans-serif !important;font-weight:600 !important;font-size:18px !important; color:var(--avxcart-c-black,#111) !important;line-height:1.3 !important;margin-top:2px !important; } .avxcart-root .avxcart-drawer-close{ position:absolute !important;top:20px !important;right:24px !important; width:34px !important;height:34px !important;border-radius:50% !important; border:1.5px solid var(--avxcart-c-shark95,#222) !important;background:transparent !important; cursor:pointer !important;color:var(--avxcart-c-shark95,#222) !important; display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;line-height:0 !important; } /* ---------- Body (contenedor de la lista) ---------- */ /* Por defecto SCROLLEA (overflow-y:auto) como red de seguridad: en viewports cortos (móvil) donde head+lista+foot no caben en el alto disponible, el body scrollea internamente y NUNCA recorta cards tras el Subtotal. min-height:0 es imprescindible para que este hijo flex pueda ceder alto y scrollear en vez de desbordar. El foot es flex:0 0 auto → jamás encoge, siempre reserva su hueco. Con ≥4 ítems el scroll pasa a vivir en .avxcart-items-list; el JS marca el body con .avxcart-body--listscroll (regla de abajo) para bloquear ESTE scroll y no generar una segunda scrollbar (fix 1.1.0). */ .avxcart-root .avxcart-drawer-body{ flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important;padding:8px 32px !important;background:transparent !important; } /* ≥4 ítems: el scroll vive en la lista, no en el body (evita doble scrollbar). */ .avxcart-root .avxcart-drawer-body.avxcart-body--listscroll{ overflow-y:hidden !important; } /* Lista de ítems (el JS le fija max-height para mostrar 3,5 cards con +4) */ .avxcart-root .avxcart-items-list{ display:flex !important;flex-direction:column !important;gap:12px !important;padding:4px 0 6px !important; scrollbar-width:thin !important;scrollbar-color:#BCA6E2 transparent !important; } .avxcart-root .avxcart-items-list::-webkit-scrollbar{width:8px !important;} .avxcart-root .avxcart-items-list::-webkit-scrollbar-track{background:transparent !important;margin:6px 0 !important;} .avxcart-root .avxcart-items-list::-webkit-scrollbar-thumb{background:#BCA6E2 !important;border-radius:20px !important;} /* ---------- Card de producto (estado lleno) ---------- */ .avxcart-root .avxcart-item{ position:relative !important; display:flex !important;align-items:stretch !important; /* No encoger: cuando la lista tiene max-height (≥4 ítems) la card debe conservar su altura natural y dejar que el contenedor scrollee, en vez de comprimirse (lo que colapsaba el título). */ flex:0 0 auto !important; border:1px solid var(--avxcart-c-iron30,#D3D3D3) !important;border-radius:6px !important; background:#fff !important;overflow:hidden !important; } .avxcart-root .avxcart-item-thumb{ position:relative !important;width:104px !important;flex:0 0 104px !important;min-height:120px !important;overflow:hidden !important; background-color:var(--avxcart-c-card-img,#3A2A52) !important; background-position:center !important;background-size:cover !important;background-repeat:no-repeat !important; } .avxcart-root .avxcart-item-thumb::after{ content:"" !important;position:absolute !important;inset:0 !important; background:linear-gradient(to bottom,rgba(151,71,255,0),rgba(17,17,17,.82)) !important; } .avxcart-root .avxcart-item-logo{ position:absolute !important;left:50% !important;top:50% !important;transform:translate(-50%,-50%) !important; width:84px !important;height:34px !important;z-index:1 !important; background-position:center !important;background-size:contain !important;background-repeat:no-repeat !important; } .avxcart-root .avxcart-item-main{ flex:1 !important;min-width:0 !important;display:flex !important;flex-direction:column !important; gap:8px !important;padding:12px 12px 12px 14px !important; } .avxcart-root .avxcart-item-title{ font-family:'Inter',sans-serif !important; font-size:12px !important;font-weight:600 !important;line-height:1.3 !important;color:#545454 !important; /* Reserva a la derecha para que NUNCA choque con la papelera (26px + margen). */ margin:0 !important;padding-right:38px !important; display:-webkit-box !important;-webkit-line-clamp:3 !important;-webkit-box-orient:vertical !important;overflow:hidden !important; } .avxcart-root .avxcart-item-bottom{ display:flex !important;align-items:center !important;gap:10px !important;margin-top:auto !important;flex-wrap:wrap !important; } .avxcart-root .avxcart-item-price, .avxcart-root .avxcart-item-price .woocommerce-Price-amount{ border:1px solid var(--avxcart-c-iron20,#DFDFDF) !important;border-radius:2px !important; padding:5px 10px !important;font-family:'Inter',sans-serif !important;font-size:14px !important;font-weight:500 !important; color:#222 !important;white-space:nowrap !important; } /* evita doble borde cuando WooCommerce envuelve el precio */ .avxcart-root .avxcart-item-price .woocommerce-Price-amount{border:none !important;padding:0 !important;} .avxcart-root .avxcart-item-link{ font-size:12px !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:.4px !important; color:var(--avxcart-c-violet40,#9558D8) !important;text-decoration:none !important;white-space:nowrap !important; } .avxcart-root .avxcart-item-link:hover{text-decoration:underline !important;} /* papelera (se mantiene por UX) — el botón + de las cards recomendadas reutiliza EXACTAMENTE el mismo tratamiento (tamaño, esquina, caja). */ .avxcart-root .avxcart-item-trash, .avxcart-root .avxcart-mini-add{ position:absolute !important;top:10px !important;right:10px !important;z-index:2 !important; width:26px !important;height:26px !important;border-radius:6px !important; display:flex !important;align-items:center !important;justify-content:center !important; color:#8a8a8a !important;cursor:pointer !important;background:#fff !important;border:1px solid var(--avxcart-c-iron20,#DFDFDF) !important; transition:color .15s,border-color .15s !important; } .avxcart-root .avxcart-item-trash:hover{color:#D3040E !important;border-color:#f0b4b4 !important;} .avxcart-root .avxcart-item-trash.avxcart-is-loading, .avxcart-root .avxcart-mini-add.avxcart-is-loading{opacity:.5 !important;pointer-events:none !important;} /* botón + (añadir al carrito) — misma caja que la papelera, hover en marca */ .avxcart-root .avxcart-mini-add:hover{border-color:var(--avxcart-c-violet40,#9558D8) !important;} .avxcart-root .avxcart-mini-add-icon{width:16px !important;height:16px !important;display:block !important;object-fit:contain !important;} /* ---------- Footer (estado lleno) ---------- */ /* El foot no aporta padding; cada zona (subtotal / acciones) lo define. */ .avxcart-root .avxcart-drawer-foot{ flex:0 0 auto !important;padding:0 !important;background:#fff !important; } /* Fila del Subtotal: divisor superior full-bleed + padding 24px 32px. */ .avxcart-root .avxcart-summary{ border-top:1px solid var(--avxcart-c-iron20,#DFDFDF) !important; padding:24px 32px !important;margin:0 !important; display:flex !important;flex-direction:column !important;gap:8px !important; } .avxcart-root .avxcart-row{ display:flex !important;align-items:baseline !important;justify-content:space-between !important;gap:12px !important; } .avxcart-root .avxcart-s-lbl{font-family:'Inter',sans-serif !important;font-size:15px !important;font-weight:700 !important;color:#222 !important;} .avxcart-root .avxcart-s-lbl small{font-family:'Inter',sans-serif !important;font-size:13px !important;font-weight:400 !important;color:#222 !important;margin-left:4px !important;} .avxcart-root .avxcart-s-val{font-family:'Inter',sans-serif !important;font-size:18px !important;font-weight:600 !important;color:#222 !important;white-space:nowrap !important;} .avxcart-root .avxcart-d-lbl{font-family:'Inter',sans-serif !important;font-size:14px !important;font-weight:700 !important;color:#D3040E !important;line-height:1.2 !important;} .avxcart-root .avxcart-d-val{font-family:'Inter',sans-serif !important;font-size:14px !important;font-weight:700 !important;color:#D3040E !important;white-space:nowrap !important;} .avxcart-root .avxcart-foot-actions{display:flex !important;align-items:center !important;gap:14px !important;padding:0 32px 24px !important;} .avxcart-root .avxcart-catalog-link{ display:inline-flex !important;align-items:center !important;gap:6px !important; font-family:'Inter',sans-serif !important;font-size:14px !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:.4px !important; color:#7932C5 !important;text-decoration:none !important;white-space:nowrap !important; } .avxcart-root .avxcart-catalog-link:hover{text-decoration:underline !important;} .avxcart-root .avxcart-checkout-btn{ flex:1 !important;text-align:center !important;text-decoration:none !important; background:var(--avxcart-c-lime,#E3F853) !important;border:1.5px solid var(--avxcart-c-shark20,#D1D1D1) !important;border-radius:9px !important; color:#222 !important;font-family:'Inter',sans-serif !important;font-weight:700 !important;font-size:14px !important; letter-spacing:.4px !important;text-transform:uppercase !important;padding:14px 16px !important;cursor:pointer !important; transition:background .15s,color .15s !important;filter:none !important; } .avxcart-root .avxcart-checkout-btn:hover{background:#222 !important;color:var(--avxcart-c-lime,#E3F853) !important;} /* ============================================================ ESTADO VACÍO · tarjetas de cursos recomendados (migrado de la versión drawer, adaptado al popup) ============================================================ */ .avxcart-root .avxcart-empty-state{ display:flex !important;flex-direction:column !important;gap:20px !important; width:100% !important;padding:6px 2px 4px !important; } .avxcart-root .avxcart-empty-col{width:100% !important;display:flex !important;flex-direction:column !important;gap:20px !important;} .avxcart-root .avxcart-empty-inner{width:100% !important;display:flex !important;flex-direction:column !important;gap:20px !important;} .avxcart-root .avxcart-empty-intro{width:100% !important;display:flex !important;flex-direction:column !important;gap:6px !important;} .avxcart-root .avxcart-empty-intro h3{ font-weight:700 !important;font-size:22px !important;line-height:30px !important;letter-spacing:-.24px !important; color:var(--avxcart-c-black,#111) !important;margin:0 !important; } .avxcart-root .avxcart-empty-intro p{ font-weight:400 !important;font-size:15px !important;line-height:21px !important; color:var(--avxcart-c-iron90,#545454) !important;margin:0 !important; } .avxcart-root .avxcart-empty-list{width:100% !important;display:flex !important;flex-direction:column !important;gap:14px !important;} .avxcart-root .avxcart-mini{ position:relative !important; width:100% !important;border:1px solid var(--avxcart-c-iron30,#D3D3D3) !important; border-radius:4px !important;display:flex !important;align-items:stretch !important;overflow:hidden !important;background:#fff !important; } .avxcart-root .avxcart-mini-img{ position:relative !important;width:104px !important;flex-shrink:0 !important;min-height:150px !important;overflow:hidden !important; border-radius:4px 0 0 4px !important; background-color:var(--avxcart-c-card-img,#3A2A52) !important;background-position:center !important;background-size:cover !important;background-repeat:no-repeat !important; } .avxcart-root .avxcart-mini-img::after{ content:"" !important;position:absolute !important;inset:0 !important;border-radius:4px 0 0 4px !important; background:linear-gradient(to bottom,rgba(151,71,255,0),var(--avxcart-c-black,#111)) !important; } .avxcart-root .avxcart-mini-logo{ position:absolute !important;left:50% !important;top:50% !important;transform:translate(-50%,-50%) !important; width:100px !important;height:40px !important;z-index:1 !important; background-position:center !important;background-size:contain !important;background-repeat:no-repeat !important; } .avxcart-root .avxcart-mini-body{ flex:1 !important;min-width:0 !important;background:#fff !important;display:flex !important;flex-direction:column !important; gap:6px !important;justify-content:center !important;padding:10px !important;border-radius:0 4px 4px 0 !important; } .avxcart-root .avxcart-mini-top{width:100% !important;display:flex !important;flex-direction:column !important;gap:6px !important;} .avxcart-root .avxcart-mini-title{ font-weight:700 !important;font-size:14px !important;line-height:18px !important;letter-spacing:.28px !important; color:var(--avxcart-c-iron90,#545454) !important; display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important; } .avxcart-root .avxcart-mini-rating{display:flex !important;align-items:center !important;gap:4px !important;color:var(--avxcart-c-star,#F5B500) !important;} .avxcart-root .avxcart-mini-rating svg{width:20px !important;height:20px !important;display:block !important;} .avxcart-root .avxcart-mini-star{width:20px !important;height:20px !important;display:block !important;object-fit:contain !important;flex:0 0 auto !important;} .avxcart-root .avxcart-mini-rating span{font-size:13px !important;line-height:16px !important;letter-spacing:.26px !important;color:var(--avxcart-c-iron80,#676767) !important;} .avxcart-root .avxcart-mini-foot{display:flex !important;align-items:center !important;gap:8px !important;align-self:flex-start !important;flex-wrap:wrap !important;} .avxcart-root .avxcart-mini-price{ border:1px solid var(--avxcart-c-iron20,#DFDFDF) !important;padding:4px 8px !important; display:flex !important;align-items:center !important;justify-content:center !important; } .avxcart-root .avxcart-mini-price p, .avxcart-root .avxcart-mini-price .woocommerce-Price-amount{ font-weight:500 !important;font-size:14px !important;line-height:18px !important;letter-spacing:.28px !important; color:var(--avxcart-c-fuchsia80,#782781) !important;text-align:center !important;white-space:nowrap !important;margin:0 !important; } .avxcart-root .avxcart-mini-btn{ display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important; padding:6px 12px !important;border-radius:6px !important;background:none !important;border:none !important;cursor:pointer !important;text-decoration:none !important; } .avxcart-root .avxcart-mini-btn p{ font-weight:700 !important;font-size:12px !important;line-height:20px !important;letter-spacing:.06px !important;text-transform:uppercase !important; color:var(--avxcart-c-violet40,#9558D8) !important;white-space:nowrap !important;margin:0 !important; } /* ---------- Botón final (footer en estado vacío) ---------- */ .avxcart-root .avxcart-empty-cta{width:100% !important;display:flex !important;padding:8px 32px 24px !important;} .avxcart-root .avxcart-cta-btn{ flex:1 !important;background:var(--avxcart-c-lime,#E3F853) !important;border:1.5px solid var(--avxcart-c-shark20,#D1D1D1) !important;border-radius:10px !important; display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;padding:14px 24px !important;cursor:pointer !important;text-decoration:none !important; } .avxcart-root .avxcart-cta-btn p{ font-weight:800 !important;font-size:15px !important;line-height:24px !important;letter-spacing:.08px !important;text-transform:uppercase !important; color:var(--avxcart-c-shark95,#222) !important;margin:0 !important; } /* ---------- Responsive ---------- */ @media (max-width:520px){ .avxcart-root .avxcart-drawer{ right:8px !important;left:8px !important;width:auto !important;max-width:none !important; } }