/* ArgKeyShop — estilos compartidos. Incluir en todas las páginas. */ body { background-color: #0b0f12; color: #e0e2e8; } .bg-card { background-color: #181c20; border: 1px solid rgba(60, 73, 78, 0.4); transition: all 0.3s ease; } .bg-card:hover { border-color: rgba(0, 209, 255, 0.3); box-shadow: 0 8px 30px rgba(0, 209, 255, 0.08); transform: translateY(-2px); } .celeste-glow { box-shadow: 0 4px 14px rgba(0, 209, 255, 0.25); } .celeste-glow:hover { box-shadow: 0 6px 20px rgba(0, 209, 255, 0.35); } .soft-gradient { background: linear-gradient(145deg, rgba(24, 28, 32, 1) 0%, rgba(11, 15, 18, 1) 100%); } /* Placeholder de "box art" para productos sin imagen fotográfica. Reproduce la estética premium/neón del hero usando solo CSS. */ .box-art { position: relative; background: radial-gradient(120% 120% at 30% 20%, rgba(0, 209, 255, 0.16) 0%, rgba(11, 15, 18, 0) 60%), linear-gradient(160deg, #1c2024 0%, #0b0f12 100%); border: 1px solid rgba(60, 73, 78, 0.5); overflow: hidden; } .box-art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 209, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 209, 255, 0.06) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 75%); } .box-art .box-art-icon { filter: drop-shadow(0 0 24px rgba(0, 209, 255, 0.35)); } /* Nota: los inputs de formulario usan utilidades de Tailwind directamente (bg-surface-container-low/60, border-outline-variant/50, etc.) en vez de una clase custom acá, porque el