/*
 * Botones v2.
 * - .xg-btn--outline: <Button_Nav> del Figma (esquinas tl/br redondeadas, borde degradado).
 *   Evolución de .btn-our-work del home legacy: mismo borde animado, paleta nueva.
 * - .xg-btn--text: <Button_General> (texto + icono + subrayado que crece).
 */
.xg-btn {
  --xg-btn-color: var(--xg-primary);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--xg-font-display);
  font-weight: 500;
  font-size: var(--xg-fs-btn-lg);
  line-height: 18px;
  letter-spacing: 0.46px;
  white-space: nowrap;
  color: var(--xg-btn-color);
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.xg-btn__icon {
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform var(--xg-dur) var(--xg-ease-out);
}

/* Outline (CTA principal) */
.xg-btn--outline {
  padding: 9px 20px;
  border-radius: 12px 0 12px 0;
  background: var(--xg-surface-scrim);
  transition:
    color var(--xg-dur) var(--xg-ease-out),
    box-shadow var(--xg-dur) var(--xg-ease-out),
    transform var(--xg-dur) var(--xg-ease-out);
}

/*
 * El borde es un pseudo-elemento con máscara: así el degradado puede animarse
 * sin pintar el fondo translúcido del botón.
 */
.xg-btn--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  /* Cian dominante con remate rosa en la esquina inferior derecha, como en el Figma */
  background: linear-gradient(var(--xg-btn-angle), var(--xg-primary) 55%, var(--xg-secondary) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

@property --xg-btn-angle {
  syntax: "<angle>";
  initial-value: 100deg;
  inherits: false;
}

/* Relleno que barre de izquierda a derecha en hover */
.xg-btn--outline::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(102, 235, 231, 0.16), rgba(255, 178, 184, 0.12));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--xg-dur) var(--xg-ease-out);
}

.xg-btn--outline:hover,
.xg-btn--outline:focus-visible {
  color: var(--xg-primary-on-container);
  box-shadow: 0 0 24px rgba(102, 235, 231, 0.25), 0 0 2px rgba(255, 178, 184, 0.4);
  transform: translateY(-2px);
}

/* En hover el remate rosa recorre todo el borde */
.xg-btn--outline:hover::before,
.xg-btn--outline:focus-visible::before {
  animation: xg-btn-border-flow 2.4s linear infinite;
}

.xg-btn--outline:hover::after,
.xg-btn--outline:focus-visible::after {
  transform: scaleX(1);
}

.xg-btn--outline:active {
  transform: translateY(0);
}

@keyframes xg-btn-border-flow {
  from { --xg-btn-angle: 100deg; }
  to { --xg-btn-angle: 460deg; }
}

/* Text (secundario) */
.xg-btn--text {
  flex-direction: column;
  gap: 1px;
}

.xg-btn--text .xg-btn__base {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
}

.xg-btn--text .xg-btn__underline {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--xg-dur) var(--xg-ease-out);
}

.xg-btn--text:hover .xg-btn__underline,
.xg-btn--text:focus-visible .xg-btn__underline {
  transform: scaleX(1);
}

.xg-btn--text:hover .xg-btn__icon--down {
  animation: xg-nudge-down 900ms var(--xg-ease-in-out) infinite;
}

.xg-btn--text:hover .xg-btn__icon--mail {
  transform: rotate(-8deg) scale(1.1);
}

@keyframes xg-nudge-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* Botón de icono circular (flechas de carrusel) */
.xg-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--xg-radius-pill);
  background: var(--xg-surface-cont-2);
  color: var(--xg-on-surface);
  transition:
    background var(--xg-dur) var(--xg-ease-out),
    transform var(--xg-dur) var(--xg-ease-out),
    opacity var(--xg-dur) var(--xg-ease-out);
}

.xg-icon-btn img {
  width: 24px;
  height: 24px;
}

.xg-icon-btn:hover:not(:disabled) {
  background: var(--xg-surface-bright);
  transform: scale(1.08);
}

.xg-icon-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.xg-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .xg-btn--outline:hover::before {
    animation: none;
  }
}