/* Particles — campo de particulas subiendo dentro del boton, sin patron visible.
   Copia el mecanismo del Space Button: 2 capas (scroll + rotate) sobre un campo gigante.
   NO sobreescribe estilos del boton: bg, color, border y sus variantes de hover son nativos de Elementor. */

.elementor-button.pe-part-active {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.pe-part-active .pe-part-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  display: block;
  background: transparent;
}

.pe-part-active .pe-part-field {
  position: absolute;
  top: -50rem;
  left: -50rem;
  width: 100rem;
  height: 100rem;
  display: block;
  background: transparent;
}

.pe-part-active .pe-part-field::before,
.pe-part-active .pe-part-field::after {
  content: "";
  position: absolute;
  background-image: radial-gradient(var(--pe-part-color, #ffffff) 1px, transparent 1%);
  background-size: var(--pe-part-density, 50px) var(--pe-part-density, 50px);
  will-change: transform;
}

.pe-part-active .pe-part-field::before {
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  opacity: 0.6;
  animation: pe-part-scroll var(--pe-part-scroll, 60s) linear infinite;
}

.pe-part-active .pe-part-field::after {
  top: -10rem;
  left: -50rem;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  animation: pe-part-rotate var(--pe-part-rotate, 90s) linear infinite;
}

.elementor-button.pe-part-active .elementor-button-content-wrapper,
.elementor-button.pe-part-active .elementor-button-text,
.elementor-button.pe-part-active .elementor-button-icon {
  position: relative;
  z-index: 2;
}

@keyframes pe-part-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-70rem); }
}

@keyframes pe-part-rotate {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0); }
}

/* Normal = Gradient + Hover = Solid: Elementor no limpia el background-image del
   gradient al hacer hover, por eso el color solido no se ve. Forzamos image:none
   en hover solo cuando detectamos esta combinacion especifica. */
.elementor-button.pe-part-active.pe-part-solid-hover:hover {
  background-image: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .pe-part-active .pe-part-field::before,
  .pe-part-active .pe-part-field::after { animation: none !important; }
}