/* ==================================================
   PSYQUE DESIGN — VARIABLES
   ================================================== */

:root {
  --psyque-purple: #D79DFF;
  --psyque-blue: #5E6CF0;
  --psyque-cyan: #1DDCFF;

  --psyque-gradient: linear-gradient(
    90deg,
    #D79DFF 0%,
    #5E6CF0 45%,
    #1DDCFF 100%
  );

  --psyque-btn-gradient: linear-gradient(
    50deg,
    #D79DFF 0%,
    #5E6CF0 45%,
    #1DDCFF 100%
  );
}


/* ==================================================
   TEXTOS CON DEGRADADO
   ================================================== */

/* Clase directa para aplicar degradado a cualquier texto */
.texto-degradado,
.psyque-gradient-text {
  background: var(--psyque-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* Permite destacar palabras concretas en textos usando <strong> o <b> */
.texto-hero strong,
.texto-hero b {
  background: var(--psyque-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  font-weight: inherit;
}


/* ==================================================
   BOTONES ELEMENTOR — SISTEMA DOBLE
   ================================================== */

/* Base común */
.elementor-widget-button .elementor-button {
  position: relative;
  overflow: hidden;
  z-index: 1;

  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 999px;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

/* Texto e icono siempre blancos */
.elementor-widget-button .elementor-button .elementor-button-text,
.elementor-widget-button .elementor-button .elementor-button-icon {
  position: relative;
  z-index: 3;
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Borde degradado */
.elementor-widget-button .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;

  background: var(--psyque-btn-gradient);

  -webkit-mask:
    linear-gradient(#ffffff 0 0) content-box,
    linear-gradient(#ffffff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 2;
}


/* ==================================================
   BOTÓN 1 — FONDO DEGRADADO / HOVER OUTLINE
   ================================================== */

/*
  Clase para Elementor:
  btn-gradient

  Normal: fondo degradado
  Hover: transparente + borde degradado
*/

.btn-gradient .elementor-button,
.btn-gradient .elementor-button:visited {
  background: var(--psyque-btn-gradient) !important;
}

.btn-gradient .elementor-button::before {
  opacity: 0;
}

.btn-gradient .elementor-button:hover,
.btn-gradient .elementor-button:focus {
  background: transparent !important;
  color: #ffffff !important;
}

.btn-gradient .elementor-button:hover::before,
.btn-gradient .elementor-button:focus::before {
  opacity: 1;
}


/* ==================================================
   BOTÓN 2 — OUTLINE DEGRADADO / HOVER FONDO
   ================================================== */

/*
  Clase para Elementor:
  btn-outline-gradient

  Normal: transparente + borde degradado
  Hover: fondo degradado
*/

.btn-outline-gradient .elementor-button,
.btn-outline-gradient .elementor-button:visited {
  background: transparent !important;
}

.btn-outline-gradient .elementor-button::before {
  opacity: 1;
}

.btn-outline-gradient .elementor-button:hover,
.btn-outline-gradient .elementor-button:focus {
  background: var(--psyque-btn-gradient) !important;
  color: #ffffff !important;
}

.btn-outline-gradient .elementor-button:hover::before,
.btn-outline-gradient .elementor-button:focus::before {
  opacity: 0;
}