/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ====== Configuración base ====== */
.gsap-test-button {
  --c1: #642483;  /* color 1 gradiente */
  --c2: #E94E1B;  /* color 2 gradiente */
  --bdr: 2px;     /* grosor del borde */
  --fill: #642483;/* color sólido del botón (base) */
}

.gsap-test-button :is(.elementor-button, .elementor-button-link) {
  position: relative;
  display: inline-grid;
  border-radius: 6.25rem;
  overflow: hidden;
  background-color: var(--fill);
  color: #fff !important;
}

/* ====== Borde gradiente con máscara (recomendado) ====== */
.gsap-test-button :is(.elementor-button, .elementor-button-link)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--bdr);
  background: linear-gradient(90deg, var(--c1), var(--c2));
  /* Deja visible solo el aro (borde) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* (Opcional) Invertir el gradiente del borde al hover */
@media (hover: hover) {
  .gsap-test-button :is(.elementor-button, .elementor-button-link):hover::after {
    background: linear-gradient(90deg, var(--c2), var(--c1));
  }
}

/* ====== Capa para el “flare” animado por GSAP ====== */
.gsap-test-button .button__flair {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
}

.gsap-test-button .button__flair::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  width: 170%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  /* Gradiente lineal del flare (mismo esquema de color) */
  background: linear-gradient(90deg, var(--c1) 0%, var(--c2) 100%);
}

/* (Opcional) Estado hover del relleno: si quieres que cambie a naranja */
@media (hover: hover) {
  .gsap-test-button :is(.elementor-button, .elementor-button-link):hover {
    /* uncomment si quieres cambio de relleno en hover */
    /* background-color: var(--c2); */
  }
}
/* Orden de capas */
.gsap-test-button :is(.elementor-button, .elementor-button-link) { z-index: 0; position: relative; }
.gsap-test-button .button__flair { z-index: 1; }
.gsap-test-button :is(.elementor-button-text,
                      .elementor-button-content-wrapper,
                      .elementor-button-icon) {
  position: relative;
  z-index: 2;              /* texto e icono por encima del flair */
  color: #fff !important;
  -webkit-text-fill-color: #fff;   /* por si hay background-clip:text */
  background: none !important;     /* evita texto con gradiente */
  -webkit-background-clip: border-box;
          background-clip: border-box;
}

/* Asegurar en hover/focus/active */
.gsap-test-button :is(.elementor-button, .elementor-button-link):hover :is(.elementor-button-text, .elementor-button-icon),
.gsap-test-button :is(.elementor-button, .elementor-button-link):focus-visible :is(.elementor-button-text, .elementor-button-icon),
.gsap-test-button :is(.elementor-button, .elementor-button-link):active :is(.elementor-button-text, .elementor-button-icon) {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

/* Si tienes alguna regla antigua que ponía negro en hover, anúlala */
.gsap-test-button .elementor-button:hover { color: #fff !important; }