/* ================================================================ PRODUCT CARD — TRATAMIENTO DE OFERTA (promoción activa) Aplica a CUALQUIER tarjeta .product-card-tech--promo, esté en el home o en el listado de categorías (CLP) o en el "cargar más" AJAX. Reutiliza el universo ÁMBAR del home (promo-banners.css): amber #f59e0b · #fbbf24 · #fde68a · #d97706 — coherencia visual. ================================================================ */ :root { --promo-amber: #f59e0b; --promo-amber-bright:#fbbf24; --promo-amber-soft: #fde68a; --promo-amber-deep: #d97706; } /* ── Tarjeta en oferta: borde + glow ámbar pulsante para destacar ── */ .product-card-tech--promo { position: relative; border-color: rgba(245, 158, 11, .55) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, .28), 0 0 0 1px rgba(245, 158, 11, .35), 0 0 22px rgba(245, 158, 11, .18); animation: promoCardGlow 2.6s ease-in-out infinite; } .product-card-tech--promo:hover { border-color: rgba(251, 191, 36, .85) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .40), 0 0 0 1.5px rgba(251, 191, 36, .60), 0 0 34px rgba(245, 158, 11, .32); } @keyframes promoCardGlow { 0%, 100% { box-shadow: 0 8px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(245,158,11,.32), 0 0 18px rgba(245,158,11,.14); } 50% { box-shadow: 0 8px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(245,158,11,.50), 0 0 30px rgba(245,158,11,.28); } } /* ── Sello "OFERTA -X%" — pill EN LLAMAS (degradado fuego ámbar→naranja→rojo) con shimmer + llama brillante. Resalta la promoción manteniéndose en la familia cálida del universo ámbar del home. ── */ .promo-flame { position: absolute; top: .6rem; left: .6rem; /* top-LEFT: deja el top-right libre para el ❤️ favorito */ z-index: 6; display: inline-flex; align-items: center; gap: .34rem; padding: .30rem .62rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #3a1500; /* texto oscuro → AA en todo el degradado */ text-shadow: 0 1px 0 rgba(255, 255, 255, .35); background: linear-gradient(100deg, var(--promo-amber-bright) 0%, #f97316 50%, #ef4444 100%); background-size: 220% auto; border: 1px solid rgba(255, 235, 200, .55); box-shadow: 0 2px 12px rgba(239, 68, 68, .5), 0 0 18px rgba(249, 115, 22, .42), inset 0 1px 0 rgba(255, 255, 255, .4); animation: promoFlameShimmer 3s linear infinite, promoFlamePulse 2s ease-in-out infinite; pointer-events: none; white-space: nowrap; } /* La llamita: silueta fuego oscura sobre la pastilla brillante (el glow solo luce sobre fondos oscuros; aquí prima el contraste con texto/pastilla). */ .promo-flame i { font-size: .72rem; color: #7c2d12; animation: promoFlameFlicker 1.4s ease-in-out infinite; } @keyframes promoFlameShimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } @keyframes promoFlamePulse { 0%, 100% { transform: scale(1); box-shadow: 0 2px 12px rgba(239,68,68,.5), 0 0 16px rgba(249,115,22,.36), inset 0 1px 0 rgba(255,255,255,.4); } 50% { transform: scale(1.05); box-shadow: 0 4px 18px rgba(239,68,68,.7), 0 0 26px rgba(249,115,22,.55), inset 0 1px 0 rgba(255,255,255,.4); } } @keyframes promoFlameFlicker { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255,180,0,.95)) drop-shadow(0 0 8px rgba(255,80,0,.6)); transform: scale(1) rotate(-2deg); } 45% { filter: drop-shadow(0 0 7px rgba(255,200,0,1)) drop-shadow(0 0 13px rgba(255,90,0,.8)); transform: scale(1.16) rotate(2deg); } } /* ── Precios: descontado en ámbar y prominente, original tachado visible ── */ .product-card-tech--promo .product-price-current { color: var(--promo-amber-bright); font-weight: 800; } .product-card-tech--promo .product-price-old { color: rgba(255, 255, 255, .55); text-decoration: line-through; text-decoration-color: rgba(245, 158, 11, .85); opacity: 1; } /* ── El sello "OFERTA -X%" ya comunica el porcentaje: ocultamos el chip "-X%" duplicado para no repetir el mismo dato dos veces ni amontonar etiquetas en la cabecera de la tarjeta. ── */ .product-card-tech--promo .product-badges { display: none; } /* En la CLP (category landing) la tarjeta tiene su propio stack de badges .clp-badges (arriba-izquierda) que YA incluye un chip "-X%". El sello flame compartiría esa esquina y repetiría el dato → en CLP ocultamos el flame y dejamos que el chip de descuento (con tratamiento cálido) sea el indicador único de oferta, integrado y ordenado con el resto de badges. */ .clp-card .promo-flame { display: none; } .product-card-tech--promo .clp-badge--discount { background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%) !important; /* texto blanco ≥5.1:1 */ color: #fff !important; border-color: rgba(254, 215, 170, .5) !important; box-shadow: 0 0 12px rgba(194, 65, 12, .5); } /* ── Etiqueta "Ahorras" (home) → ámbar coherente ── */ .product-card-tech--promo .product-savings { color: var(--promo-amber-soft); } /* ── Pista de promoción CONDICIONAL (cantidad mínima ≥ 2) ───────────────────── No tacha precio: solo invita ("Lleva 2 y ahorra 50%"). Chip inferior, sobrio. */ .promo-hint { position: absolute; left: .55rem; bottom: .55rem; z-index: 6; display: inline-flex; align-items: center; gap: .34rem; max-width: calc(100% - 1.1rem); padding: .26rem .6rem; border-radius: 999px; font-size: .64rem; font-weight: 800; letter-spacing: .02em; color: var(--promo-amber-soft); background: rgba(120, 53, 15, .58); border: 1px solid rgba(245, 158, 11, .55); box-shadow: 0 2px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .10); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .promo-hint i { color: var(--promo-amber-bright); font-size: .6rem; flex-shrink: 0; } .promo-hint span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ════════════════════════════════════════════════════════════════ Responsive — sello más compacto en móvil ════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .promo-flame { top: .45rem; left: .45rem; font-size: .60rem; padding: .24rem .5rem; gap: .26rem; } .promo-hint { font-size: .56rem; padding: .22rem .5rem; left: .4rem; bottom: .4rem; } } /* ════════════════════════════════════════════════════════════════ Accesibilidad — WCAG 2.1 §2.3.3 (prefers-reduced-motion) Mantener el destaque visual (borde/glow estático) sin movimiento. ════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .product-card-tech--promo { animation: none; } .promo-flame, .promo-flame i { animation: none; background-position: 0 center; } }