/* Uiverse.io by JkHuger — sparkle button, scoped to WhatsApp CTA (hue 142) */
.wa-sparkle {
  --transition: 0.25s;
  --spark: 1.8s;
  position: relative;
  width: 100%;
  margin-top: 0;
  z-index: 1;
  overflow: visible;
}

/* Base: avoid bare hsl() as bg layer (becomes "none"); use linear-gradient solid */
.wa-sparkle .sparkle-button,
#btn-wa-producto.sparkle-button {
  --cut: 0.1em;
  --active: 0;
  --hue: 142;
  /* Rest = WhatsApp green; hover (--active:1) adds glow layers */
  --bg:
    radial-gradient(
      40% 50% at center 100%,
      hsl(142 70% 62% / var(--active)),
      transparent
    ),
    radial-gradient(
      80% 100% at center 120%,
      hsl(142 70% 50% / var(--active)),
      transparent
    ),
    linear-gradient(
      160deg,
      hsl(142 60% calc(38% + (var(--active) * 8%))) 0%,
      hsl(142 70% calc(45% + (var(--active) * 8%))) 45%,
      hsl(142 55% calc(36% + (var(--active) * 6%))) 100%
    );
  background: var(--bg) !important; /* beat .btn-wa-big / :hover coral */
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  white-space: nowrap;
  border-radius: 100px;
  position: relative;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  overflow: visible;
  isolation: isolate;
  box-shadow:
    0 0 calc(var(--active) * 2.5em) calc(var(--active) * 0.7em) hsl(142 70% 45% / 0.45),
    0 0.05em 0 0 hsl(142 calc(var(--active) * 70%) calc((var(--active) * 40%) + 30%)) inset,
    0 -0.05em 0 0 hsl(142 calc(var(--active) * 70%) calc(var(--active) * 50%)) inset;
  transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
  scale: calc(1 + (var(--active) * 0.04));
}

/*
  ID base rule had higher specificity than .wa-sparkle .sparkle-button:hover,
  so --active never flipped to 1. Match ID specificity on hover/focus.
*/
.wa-sparkle .sparkle-button:is(:hover, :focus-visible),
#btn-wa-producto.sparkle-button:is(:hover, :focus-visible) {
  --active: 1;
  --play-state: running;
  background: var(--bg) !important;
}

.wa-sparkle .sparkle-button:active,
#btn-wa-producto.sparkle-button:active {
  scale: 1;
}

.wa-sparkle .sparkle path {
  color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));
  transform-box: fill-box;
  transform-origin: center;
  fill: currentColor;
  stroke: currentColor;
  animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));
  animation-duration: 0.6s;
  transition: color var(--transition);
}

.wa-sparkle .sparkle-button:is(:hover, :focus-visible) .sparkle path,
#btn-wa-producto.sparkle-button:is(:hover, :focus-visible) .sparkle path {
  animation-name: wa-sparkle-bounce;
}

@keyframes wa-sparkle-bounce {
  35%,
  65% {
    scale: var(--scale);
  }
}

.wa-sparkle .sparkle path:nth-of-type(1) {
  --scale: 0.5;
  --delay: 0.1;
  --base: 40%;
}
.wa-sparkle .sparkle path:nth-of-type(2) {
  --scale: 1.5;
  --delay: 0.2;
  --base: 20%;
}
.wa-sparkle .sparkle path:nth-of-type(3) {
  --scale: 2.5;
  --delay: 0.35;
  --base: 30%;
}

.wa-sparkle .sparkle-button::before,
#btn-wa-producto.sparkle-button::before {
  content: "";
  position: absolute;
  inset: -0.2em;
  z-index: -1;
  border: 0.22em solid hsl(142 70% 42% / 0.45);
  border-radius: 100px;
  opacity: var(--active, 0);
  transition: opacity var(--transition);
  pointer-events: none;
}

.wa-sparkle .spark {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  rotate: 0deg;
  overflow: hidden;
  mask: linear-gradient(white, transparent 50%);
  -webkit-mask: linear-gradient(white, transparent 50%);
  animation: wa-sparkle-flip calc(var(--spark) * 2) infinite steps(2, end);
  pointer-events: none;
}

@keyframes wa-sparkle-flip {
  to {
    rotate: 360deg;
  }
}

.wa-sparkle .spark::before {
  content: "";
  position: absolute;
  width: 200%;
  aspect-ratio: 1;
  top: 0%;
  left: 50%;
  z-index: -1;
  translate: -50% -15%;
  transform: rotate(-90deg);
  opacity: calc(var(--active) + 0.35);
  background: conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
  transition: opacity var(--transition);
  animation: wa-sparkle-rotate var(--spark) linear infinite both;
}

.wa-sparkle .spark::after {
  content: "";
  position: absolute;
  inset: var(--cut);
  border-radius: 100px;
}

.wa-sparkle .backdrop {
  position: absolute;
  inset: var(--cut);
  background: var(--bg);
  border-radius: 100px;
  transition: background var(--transition);
  pointer-events: none;
  z-index: 0;
}

@keyframes wa-sparkle-rotate {
  to {
    transform: rotate(90deg);
  }
}

.wa-sparkle .sparkle-button:is(:hover, :focus-visible) ~ .particle-pen,
#btn-wa-producto.sparkle-button:is(:hover, :focus-visible) ~ .particle-pen {
  --active: 1;
  --play-state: running;
}

.wa-sparkle .particle-pen {
  position: absolute;
  width: 200%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  -webkit-mask: radial-gradient(white, transparent 65%);
  mask: radial-gradient(white, transparent 65%);
  z-index: -1;
  opacity: var(--active, 0);
  transition: opacity var(--transition);
  pointer-events: none;
}

.wa-sparkle .particle {
  fill: white;
  width: calc(var(--size, 0.25) * 1rem);
  aspect-ratio: 1;
  position: absolute;
  top: calc(var(--y) * 1%);
  left: calc(var(--x) * 1%);
  opacity: var(--alpha, 1);
  animation: wa-sparkle-float-out calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;
  transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%);
  z-index: -1;
  animation-play-state: var(--play-state, paused);
  overflow: visible;
}

.wa-sparkle .particle path {
  fill: hsl(142 40% 88%);
  stroke: none;
}

.wa-sparkle .particle:nth-of-type(even) {
  animation-direction: reverse;
}

@keyframes wa-sparkle-float-out {
  to {
    rotate: 360deg;
  }
}

.wa-sparkle .sparkle-button .text {
  position: relative;
  z-index: 2;
  translate: 0 0;
  letter-spacing: 0.08em;
  background: linear-gradient(
    90deg,
    hsl(0 0% calc((var(--active) * 8%) + 92%)),
    hsl(0 0% calc((var(--active) * 8%) + 88%))
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background var(--transition);
}

.wa-sparkle .sparkle-button svg.sparkle {
  position: relative;
  z-index: 2;
  inline-size: 1.15em;
  translate: 0 0;
  overflow: visible;
  flex-shrink: 0;
  color: #fff;
}

.wa-sparkle .sparkle-button:focus-visible,
#btn-wa-producto.sparkle-button:focus-visible {
  outline: 2px solid hsl(142 70% 40%);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .wa-sparkle .spark,
  .wa-sparkle .spark::before,
  .wa-sparkle .particle {
    animation: none !important;
  }
  .wa-sparkle .sparkle-button,
  #btn-wa-producto.sparkle-button {
    scale: 1;
  }
  .wa-sparkle .particle-pen {
    display: none;
  }
}