@keyframes gradientSlide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.btn,
.btn-dark,
.btn-gray {
  display: inline-block;
  position: relative;

  .elementor-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 16px 50px;
    border-radius: 50px;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;

    backdrop-filter: blur(4px);
    transition: transform 0.6s ease-out;

    /* Hover común */
    &:hover {
      transform: scale(1.02);
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;

      background-size: 300% 100%;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    &:hover::before {
      animation: gradientSlide 2.5s linear infinite alternate;
    }

    .elementor-button-content-wrapper {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 8px;

      .elementor-button-text {
        font-family: var(--fuente-2);
        font-size: var(--size-0);
        text-transform: uppercase;
        font-weight: 400;
        white-space: nowrap;
      }
    }
  }
}

.btn {
  .elementor-button {
    background: var(--grad-1);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: rgba(255, 255, 255, 0.60);
    }

    &::before {
      background-image: linear-gradient(
        270deg,
        var(--color-3),
        var(--color-5),
        var(--color-6),
        var(--color-1),
        var(--color-3)
      );
    }

    &:hover::before {
      opacity: 1;
    }

    .elementor-button-content-wrapper {
      .elementor-button-text {
        color: var(--c-negro);
      }
    }
  }
}

.btn-dark {
  .elementor-button {
    background: var(--c-negro) !important;

    &::before {
      background-image: linear-gradient(
        270deg,
        var(--c-blanco),
        var(--c-negro)
      );
    }

    &:hover::before {
      opacity: 0.4;
    }

    .elementor-button-content-wrapper {
      .elementor-button-text {
        color: var(--c-blanco);
      }
    }
  }
}

.btn-evento {
  .elementor-button-content-wrapper {
    gap: 15px;
    transition: all 0.4s ease;
  }

  &:hover {
    .elementor-button-content-wrapper {
      gap: 25px !important;
  
    }
  }
}

.btn-gray {
  .elementor-button {
    background:  #ECEAEC !important;

    &::before {
      background-image: linear-gradient(
        270deg,
        var(--c-blanco),
        var(--c-negro)
      );
    }

    &:hover::before {
      opacity: 0.1;
    }

    .elementor-button-content-wrapper {
      .elementor-button-text {
        color: var(--c-negro);
      }
    }
  }
}

.btn-evento {
  .elementor-button-content-wrapper {
    gap: 15px;
    transition: all 0.4s ease;
  }

  &:hover {
    .elementor-button-content-wrapper {
      gap: 25px !important;
  
    }
  }
}