body { 
  font-family: 'Segoe UI', system-ui, sans-serif; 
  scroll-behavior: smooth; 
}

.hero-bg { 
  background: linear-gradient(rgba(0,0,0,0.8), rgba(9, 9, 11, 1)), 
              url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2070') center/cover; 
}

.neon-purple { 
  text-shadow: 0 0 20px #a855f7, 0 0 40px #7e22ce; 
}

/* Base de la tarjeta de producto */
.product-card { 
  background-color: #18181b; 
  border: 1px solid #27272a; 
  transition: all 0.3s ease; 
  cursor: pointer; 
  position: relative; /* NECESARIO PARA LOS BADGES */
  overflow: hidden;   /* NECESARIO PARA QUE EL BADGE NO SE DESBORDE */
}

/* EFECTO DE ILUMINACIÓN Y ELEVACIÓN */
.product-card:hover { 
  border-color: #a855f7; 
  transform: translateY(-8px); 
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.4), 
              0 0 30px rgba(168, 85, 247, 0.2);
}

#toast {
  visibility: hidden; 
  min-width: 250px; 
  background-color: #a855f7; 
  color: #fff;
  text-align: center; 
  border-radius: 12px; 
  padding: 16px; 
  position: fixed; 
  z-index: 300; 
  left: 50%; 
  bottom: 30px; 
  transform: translateX(-50%); 
  font-size: 14px; 
  font-weight: bold; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.4); 
}

#toast.show { 
  visibility: visible; 
  animation: fadein 0.5s, fadeout 0.5s 2.5s; 
}

@keyframes fadein { 
  from { bottom: 0; opacity: 0; } 
  to { bottom: 30px; opacity: 1; } 
}

@keyframes fadeout { 
  from { bottom: 30px; opacity: 1; } 
  to { bottom: 0; opacity: 0; } 
}

.review-card { 
  background-color: #18181b; 
  border: 1px solid #27272a; 
  border-radius: 24px; 
}

.custom-scroll::-webkit-scrollbar { 
  width: 6px; 
}

.custom-scroll::-webkit-scrollbar-track { 
  background: #09090b; 
}

.custom-scroll::-webkit-scrollbar-thumb { 
  background: #27272a; 
  border-radius: 10px; 
}

.custom-scroll::-webkit-scrollbar-thumb:hover { 
  background: #a855f7; 
}

.float-btn { 
  position: fixed; 
  width: 60px; 
  height: 60px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 30px; 
  color: white !important; 
  z-index: 200; 
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
}

.float-btn:hover { 
  transform: scale(1.15); 
}

.btn-ig { 
  bottom: 100px; 
  right: 24px; 
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); 
}

.btn-wa { 
  bottom: 24px; 
  right: 24px; 
  background-color: #25d366; 
}

@media (max-width: 640px) {
  .float-btn { 
    width: 50px; 
    height: 50px; 
    font-size: 24px; 
  }
  .btn-ig { bottom: 84px; right: 16px; }
  .btn-wa { bottom: 24px; right: 16px; }
}

/* ==================== ANIMACIÓN PRUEBA SOCIAL ==================== */
#notification-toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background-color: rgba(24, 24, 27, 0.95);
  border: 1px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7), 0 0 20px rgba(168, 85, 247, 0.1);
  transform: translateY(150%);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 150;
}

#notification-toast.show {
  transform: translateY(0);
}

@media (max-width: 640px) {
  #notification-toast {
    left: 16px;
    right: 16px;
    bottom: 95px; 
  }
}