/* Sparkle Button — 6 estrellas SVG que salen volando al hover del boton nativo */

/* Estado inicial: respeta TODA la configuracion nativa de Elementor (bg, color, border).
   Solo forzamos lo mecanico: position para las estrellas absolute, overflow para que salgan, y la transicion. */
.elementor-button.pe-sp-active {
  position: relative;
  overflow: visible;
  transition: background-color 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.elementor-button.pe-sp-active .elementor-button-text,
.elementor-button.pe-sp-active .elementor-button-content-wrapper {
  position: relative;
  z-index: 1;
}

.pe-sp-active .pe-sp-star {
  position: absolute;
  height: auto;
  z-index: -5;
  pointer-events: none;
  line-height: 0;
  filter: drop-shadow(0 0 0 var(--pe-sp-star-color, #fffdef));
  transition: top var(--pe-sp-duration, 1s) cubic-bezier(0.05, 0.83, 0.43, 0.96),
              left var(--pe-sp-duration, 1s) cubic-bezier(0.05, 0.83, 0.43, 0.96),
              filter var(--pe-sp-duration, 1s) cubic-bezier(0.05, 0.83, 0.43, 0.96),
              z-index 0s;
}

.pe-sp-active .pe-sp-star svg {
  width: 100%;
  height: auto;
  display: block;
}

.pe-sp-active .pe-sp-star .pe-sp-fill {
  fill: var(--pe-sp-star-color, #fffdef);
}

/* Posiciones y tamaños iniciales (replica 1:1 Uiverse) */
.pe-sp-active .pe-sp-star-1 { top: 20%; left: 20%; width: 25px; }
.pe-sp-active .pe-sp-star-2 { top: 45%; left: 45%; width: 15px;
  transition-timing-function: cubic-bezier(0, 0.4, 0, 1.01); }
.pe-sp-active .pe-sp-star-3 { top: 40%; left: 40%; width: 5px;
  transition-timing-function: cubic-bezier(0, 0.4, 0, 1.01); }
.pe-sp-active .pe-sp-star-4 { top: 20%; left: 40%; width: 8px;
  transition-duration: calc(var(--pe-sp-duration, 1s) * 0.8);
  transition-timing-function: cubic-bezier(0, 0.4, 0, 1.01); }
.pe-sp-active .pe-sp-star-5 { top: 25%; left: 45%; width: 15px;
  transition-duration: calc(var(--pe-sp-duration, 1s) * 0.6);
  transition-timing-function: cubic-bezier(0, 0.4, 0, 1.01); }
.pe-sp-active .pe-sp-star-6 { top: 5%;  left: 50%; width: 5px;
  transition-duration: calc(var(--pe-sp-duration, 1s) * 0.8);
  transition-timing-function: ease; }

/* Hover: aplica los 3 colores configurables + glow + estrellas vuelan.
   !important es necesario porque Elementor genera CSS con selector
   `.elementor-widget-{id} .elementor-button:hover` que tiene mayor especificidad.
   Mismo patron que stroke-wipe/style.css. */
.elementor-button.pe-sp-active:hover {
  background: var(--pe-sp-hover-bg, rgba(0,0,0,0)) !important;
  background-color: var(--pe-sp-hover-bg, rgba(0,0,0,0)) !important;
  color: var(--pe-sp-hover-text, #fec195) !important;
  border-color: var(--pe-sp-hover-border, #fec195) !important;
  box-shadow: 0 0 25px color-mix(in srgb, var(--pe-sp-hover-border, #fec195) 55%, transparent) !important;
}

/* El color de hover tambien se aplica al icono (Font Awesome <i> + SVG) */
.elementor-button.pe-sp-active:hover .elementor-button-icon,
.elementor-button.pe-sp-active:hover .elementor-button-icon i,
.elementor-button.pe-sp-active:hover .elementor-button-icon svg {
  color: var(--pe-sp-hover-text, #fec195) !important;
  fill: var(--pe-sp-hover-text, #fec195) !important;
}

.elementor-button.pe-sp-active:hover .pe-sp-star {
  z-index: 2;
  filter: drop-shadow(0 0 var(--pe-sp-glow, 10px) var(--pe-sp-star-color, #fffdef));
}

.elementor-button.pe-sp-active:hover .pe-sp-star-1 { top: -80%; left: -30%; }
.elementor-button.pe-sp-active:hover .pe-sp-star-2 { top: -25%; left: 10%; }
.elementor-button.pe-sp-active:hover .pe-sp-star-3 { top: 55%;  left: 25%; }
.elementor-button.pe-sp-active:hover .pe-sp-star-4 { top: 30%;  left: 80%; }
.elementor-button.pe-sp-active:hover .pe-sp-star-5 { top: 25%;  left: 115%; }
.elementor-button.pe-sp-active:hover .pe-sp-star-6 { top: 5%;   left: 60%; }