/* assets/css/tienda.css */
.tienda-container { max-width: 1000px; margin: 30px auto; padding: 0 20px; min-height: 60vh; }
.header-tienda { background: linear-gradient(135deg, #1e1e2f 0%, #111118 100%); border: 1px solid #3a3a4a; padding: 25px; border-radius: 12px; text-align: center; margin-bottom: 30px; margin-top: 20px; }
.creditos-badge { font-size: clamp(24px, 5vw, 36px); color: #00e676; font-weight: bold; display: block; margin-top: 10px; }
.grid-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 40px; }
.producto-card { background: #12121a; border: 1px solid #1c1c24; border-radius: 12px; padding: 20px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: transform 0.2s; }
.producto-card:hover { transform: translateY(-5px); border-color: #3a3a4a; }
.icono-caja { width: 70px; height: 70px; background: #1c1c24; border-radius: 50%; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; }
.precio-box { background: #1c1c24; padding: 12px; border-radius: 8px; margin-bottom: 15px; display: flex; justify-content: space-around; align-items: center; }
.btn-canjear { width: 100%; padding: 12px; border-radius: 6px; font-weight: bold; cursor: pointer; border: none; transition: 0.2s; font-size: 15px; }
.btn-canjear.activo { background: #9b6dff; color: #fff; }
.btn-canjear.activo:hover { background: #8a5ae6; }
.btn-canjear.inactivo { background: #2a2a35; color: #666; cursor: not-allowed; }