/*
 * Final CTA [Desktop]. El fondo son mariposas origami dibujadas en un <canvas>
 * (js/v2/butterflies.js), en vez del video del documento de copys.
 */
.xg-cta-wrap {
  background: linear-gradient(180deg, var(--xg-surface), var(--xg-surface-cont-1));
  padding-block: var(--xg-space-6);
}

.xg-cta {
  position: relative;
  max-width: 1280px;
  margin-inline: auto;
  border-radius: var(--xg-radius-lg);
  overflow: hidden;
  box-shadow: var(--xg-elevation-5);
  isolation: isolate;
  background:
    radial-gradient(120% 140% at 20% 0%, #0b3a52 0%, rgba(11, 58, 82, 0) 55%),
    radial-gradient(90% 120% at 90% 100%, #062a3a 0%, rgba(6, 42, 58, 0) 60%),
    #04121b;
}

.xg-cta__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Viñeta para asegurar contraste del texto sobre las partículas */
.xg-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(50% 70% at 50% 50%, rgba(4, 18, 27, 0.75), rgba(4, 18, 27, 0) 100%);
  pointer-events: none;
}

.xg-cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--xg-space-4);
  padding: var(--xg-space-6) var(--xg-space-8);
  text-align: center;
}

.xg-cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--xg-space-5);
  padding-inline: var(--xg-space-6);
}

.xg-cta__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--xg-space-4);
}

.xg-cta__overline {
  color: var(--xg-on-surface);
}

.xg-cta .xg-h4 {
  text-shadow: 0 0 30px rgba(102, 235, 231, 0.25);
}

@media (max-width: 1360px) {
  .xg-cta {
    margin-inline: var(--xg-gutter);
  }
}

@media (max-width: 767px) {
  .xg-cta__content {
    padding: var(--xg-space-6) var(--xg-space-4);
  }

  .xg-cta__text {
    padding-inline: 0;
  }
}