/* ================= BADGE PREMIUM 3D ================= */

.badge-mas-vendido{
  position: absolute;
  top: 8px;
  right: 8px;


transform: translate(14px, -14px);
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 7px 12px;
  border-radius: 12px;

  font-size: 11px;
  font-weight: 700;

  color: #fff;

  background: linear-gradient(135deg, rgba(20,20,20,0.9), rgba(10,10,10,0.85));
  backdrop-filter: blur(6px);

  border: 1px solid rgba(255,255,255,0.12);

  z-index: 20;

  /* 🔥 EFECTO BASE */
  box-shadow:
    0 6px 12px rgba(0,0,0,0.6),
    0 0 10px rgba(255,120,0,0.2);

  transform-style: preserve-3d;
  transition: all 0.35s ease;

  /* 🔥 VIDA (flotación) */
  animation: badgeFloat 3s ease-in-out infinite;
}

/* ================= ICONO FUEGO ================= */

.badge-mas-vendido::before{
  content: "🔥";
  font-size: 14px;
  display: inline-block;

  animation: fuego 1.2s infinite ease-in-out;
}

/* ================= HOVER (FUERA, MUY IMPORTANTE) ================= */

.card:hover .badge-mas-vendido{
  transform: translate(14px, -14px) scale(1.08) rotateZ(-1deg);


  box-shadow:
    0 10px 25px rgba(0,0,0,0.7),
    0 0 20px rgba(255,120,0,0.6),
    0 0 40px rgba(255,60,0,0.4);

  border: 1px solid rgba(255,140,0,0.5);
}

/* ================= ANIMACIÓN FLOTACIÓN ================= */

@keyframes badgeFloat{
  0%,100%{
    transform: translate(14px, -14px) translateY(0);
  }
  50%{
    transform: translate(14px, -14px) translateY(-2px);
  }
}

/* ================= ANIMACIÓN FUEGO ================= */

@keyframes fuego{
  0%{
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 2px orange);
  }
  25%{
    transform: scale(1.1) translateY(-1px);
    filter: drop-shadow(0 0 6px orange);
  }
  50%{
    transform: scale(0.95) translateY(1px);
    filter: drop-shadow(0 0 3px red);
  }
  75%{
    transform: scale(1.05) translateY(-1px);
    filter: drop-shadow(0 0 8px orange);
  }
  100%{
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 2px orange);
  }
}


/* ================= PARTICULAS 🔥 ================= */

.badge-mas-vendido::after{
  content: "";
  position: absolute;

  top: 50%;
  left: 10px;

  width: 6px;
  height: 6px;

  border-radius: 50%;
  background: radial-gradient(circle, #ffae00, #ff3c00);

  opacity: 0;

  pointer-events: none;

  animation: chispas 1.6s infinite ease-out;
}
@keyframes chispas{
  0%{
    transform: translate(0, 0) scale(0.6);
    opacity: 0.8;
  }

  40%{
    transform: translate(-6px, -10px) scale(1);
    opacity: 1;
  }

  70%{
    transform: translate(-12px, -18px) scale(0.8);
    opacity: 0.6;
  }

  100%{
    transform: translate(-18px, -26px) scale(0.3);
    opacity: 0;
  }
}
.badge-mas-vendido{
  position: absolute;
  overflow: visible; /* importante */
}
.badge-mas-vendido::after,
.badge-mas-vendido::before{
  pointer-events: none;
}
.badge-mas-vendido span{
  position: relative;
}

.badge-mas-vendido span::after{
  content: "";
  position: absolute;

  top: 0;
  left: 0;

  width: 5px;
  height: 5px;

  border-radius: 50%;
  background: radial-gradient(circle, #fff176, #ff6f00);

  animation: chispas 2s infinite ease-out;
  animation-delay: 0.6s;

  opacity: 0;
}

/* ================= TOP #1 ================= */

.badge-top{
  background: linear-gradient(135deg, #ffd700, #ff9800);
  color: #000;

  box-shadow:
    0 6px 15px rgba(255,200,0,0.6),
    0 0 25px rgba(255,150,0,0.5);

  border: none;
}