/* ================================================================ Ventas Baratas — Back-to-Tienda floating widget Cargado en el de product/show.php ================================================================ */ /* Widget oculto por defecto (no inline style — más confiable) */ .tienda-back-widget { position: fixed; bottom: 110px; left: 24px; z-index: 9500; text-decoration: none; display: block; /* Empieza fuera de pantalla e invisible */ opacity: 0; transform: translateX(-120px); pointer-events: none; transition: none; } /* Estado visible — clase añadida por JS */ .tienda-back-widget.tbw--show { opacity: 1; transform: translateX(0); pointer-events: auto; transition: opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1); } /* ── Anillo pulsante de atención ──────────────────────────── */ .tbw-ring { position: absolute; inset: -8px; border-radius: 50px; border: 2.5px solid rgba(255,122,0,.6); animation: tbw-ring 2.2s ease-out 0.6s infinite; pointer-events: none; } @keyframes tbw-ring { 0% { opacity: .8; transform: scale(1); } 70% { opacity: 0; transform: scale(1.18); } 100% { opacity: 0; transform: scale(1.18); } } /* ── Pill interior ───────────────────────────────────────── */ .tbw-inner { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #FF7A00 0%, #8A2BE2 100%); color: #fff; padding: 12px 20px 12px 14px; border-radius: 40px; box-shadow: 0 6px 24px rgba(255,122,0,.40), 0 2px 8px rgba(138,43,226,.35), 0 1px 3px rgba(0,0,0,.15); font-size: 13px; font-weight: 700; white-space: nowrap; position: relative; z-index: 1; transition: transform .18s, box-shadow .18s; } .tienda-back-widget:hover .tbw-inner { transform: scale(1.06) translateX(3px); box-shadow: 0 8px 32px rgba(255,122,0,.55), 0 4px 14px rgba(138,43,226,.45); } /* ── Ícono ───────────────────────────────────────────────── */ .tbw-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; animation: tbw-bounce 2.5s ease-in-out 1.2s infinite; } @keyframes tbw-bounce { 0%,100% { transform: scale(1); } 40% { transform: scale(1.15); } 55% { transform: scale(.95); } 70% { transform: scale(1.05); } } /* ── Texto ───────────────────────────────────────────────── */ .tbw-text { display: flex; flex-direction: column; line-height: 1.2; } .tbw-text small { font-size: 9px; font-weight: 500; opacity: .85; text-transform: uppercase; letter-spacing: .07em; } .tbw-text strong { font-size: 14px; font-weight: 800; letter-spacing: .01em; } /* ── Flecha ──────────────────────────────────────────────── */ .tbw-arrow { opacity: .9; transition: transform .2s; flex-shrink: 0; } .tienda-back-widget:hover .tbw-arrow { transform: translateX(-4px); } /* ── Mobile ──────────────────────────────────────────────── */ @media (max-width: 500px) { .tienda-back-widget { bottom: 80px; left: 12px; } .tbw-inner { padding: 10px 14px 10px 10px; gap: 8px; } .tbw-icon { width: 28px; height: 28px; font-size: 14px; } .tbw-text strong { font-size: 13px; } }