/* Estilo general del botón */
.btn .elementor-button {
  outline: none;
  cursor: pointer;
  border: none;
  padding: 0.8rem 2.3rem;
  font-family: var(--f-main) !important;
  font-size: 15px;
  font-weight: 600 !important;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  letter-spacing: 0.05rem;
  border-radius: 400px;
  overflow: hidden;
  background-color: var(--c-resaltado-1) !important;
  border: 2px solid var(--c-resaltado-1);
  color: var(--c-texto);
  transition: all 0.4s ease !important;
  z-index: 1;

  &:hover {
    background-color: var(--c-texto) !important;
    border: 2px solid var(--c-blanco);
  }
}

.btn .elementor-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  height: 100%;
  background: var(--c-resaltado-1);
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
  z-index: 0;
}

.btn .elementor-button:hover::before {
  transform: translate3d(100%, 0, 0);
}

.btn .elementor-button-text {
  position: relative;
  z-index: 10;
  transition: color 0.4s ease;
}

.btn .elementor-button:hover .elementor-button-text {
  color: var(--c-blanco);

}


.btn-white .elementor-button {
  outline: none;
  cursor: pointer;
  border: none;
  padding: 0.9rem 3rem;
  font-family: inherit !important;
  font-size: 15px;
  font-weight: 600 !important;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  letter-spacing: 0.05rem;
  border-radius: 600px;
  overflow: hidden;
  background-color: var(--c-blanco) !important;
  border: 2px solid var(--c-blanco);
  color: var(--c-blanco);
  transition: all 0.4s ease !important;
  z-index: 1;
}

/* Pseudo-elemento animado */
.btn-white .elementor-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  height: 100%;
  background: var(--c-texto);
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
  z-index: 0;
}

/* Animación al pasar el ratón */
.btn-white .elementor-button:hover::before {
  transform: translate3d(100%, 0, 0);
}

/* Texto por encima del pseudo-elemento */
.btn-white .elementor-button-text {
  position: relative;
  z-index: 10;
  transition: color 0.4s ease;
}

/* Cambio de color del texto al hacer hover */
.btn-white .elementor-button:hover .elementor-button-text {
  color: var(--c-texto);
  
}

header  {
  .btn .elementor-button, .btn-white .elementor-button {
    padding: 0.7rem 2rem;
    font-size: 15px;
  }

  .btn-white .elementor-button::before {
    background: #010316;
  }

  /* Estilo general del botón */
.btn .elementor-button {
  &:hover {
    background-color: #010316 !important;
  }
}

}

.btn-animated {


  .elementor-button {
    position: relative;
    font-size: 1.15rem;
    text-transform: uppercase;
    color: var(--c-negro) !important;
    overflow: hidden;

    transition: all .45s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    padding: 0px 20px 0px 0px !important;

    .elementor-button-text {
    transition: all .45s cubic-bezier(.22,.61,.36,1);
    will-change: transform;

    &::before {
      content: "";
      position: absolute;
      background: url(/wp-content/uploads/2025/11/Arrow-9.svg);
      background-position: center center;
      background-size: contain;
      background-repeat: no-repeat;
      width: 20px;
      left: -20%;
      right: 0;
      top: 0;
      bottom: 0;
      transition: all .45s cubic-bezier(.22,.61,.36,1);
      pointer-events: none;
      opacity: 0;
    }
  }

  .elementor-button-icon {
    transition: all .45s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
  }

  
  &:hover {
    .elementor-button-text {
      transform: translateX(48px);

    &::before {
        left: -30px;
        opacity: 1;
        transform: translateX(0px);
      }
    }

    .elementor-button-icon {
      opacity: 0.001;
      transform: translateX(260px);
    }
  }
  }

  
}


.btn-animated.white {
  .elementor-button-icon svg {
    filter: invert(1);
  }
  .elementor-button {
    color: var(--c-blanco) !important;

    .elementor-button-text {
      &::before {
          filter: invert(1);
      }
    }
  }
}