/* cta.css — componente "CTA footer" (Figma 4064:742). Carrega em toda página, como components.css. */

.cta {
  display: grid;
  grid-template-rows: var(--dm-space-72) 1fr var(--dm-space-72);
  align-items: center;
  min-height: clamp(520px, 41.667vw, 800px);
  padding: var(--dm-space-32) var(--dm-space-24);
  overflow: hidden;
  color: var(--dm-white);
  background-color: var(--dm-grey-10);
  background-image: radial-gradient(
    50.3125% 142.9% at 19.479% -13.61%,
    rgb(170, 147, 103) 0%,
    rgb(120, 123, 121) 27.404%,
    rgb(70, 99, 138) 54.808%,
    rgb(53, 74, 104) 66.106%,
    rgb(35, 49, 69) 77.404%,
    rgb(26, 37, 52) 83.053%,
    rgb(18, 25, 35) 88.702%,
    rgb(9, 12, 17) 94.351%,
    rgb(4, 6, 9) 97.175%,
    rgb(0, 0, 0) 100%
  );
}

.cta__main {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dm-space-40);
  width: min(1140px, 100%);
  margin-inline: auto;
}

.cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dm-space-12);
  width: 100%;
}

.cta__badge {
  padding: var(--dm-space-4) var(--dm-space-8);
  border: 1px solid var(--dm-blue-50);
  border-radius: var(--dm-space-6);
  background-color: color-mix(in srgb, var(--dm-primary) 12%, transparent);
  color: var(--dm-white);
  text-align: center;
  text-transform: uppercase;
}

.cta__title {
  color: var(--dm-white);
  text-align: center;
}

/* Faixa de termos — carrossel próprio do CTA, não confundir com .hero__ticker (front-page.css). */

.cta__terms {
  grid-row: 3;
  width: 100%;
  position: relative;
  overflow: hidden;
  --cta-terms-fade: var(--dm-space-32);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--cta-terms-fade),
    #000 calc(100% - var(--cta-terms-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--cta-terms-fade),
    #000 calc(100% - var(--cta-terms-fade)),
    transparent 100%
  );
}

.cta__terms-track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: dm-cta-terms var(--cta-terms-duration, 40s) linear infinite;
  will-change: transform;
}

/* ⚠ margin-right no item, nunca gap no track — com gap a emenda do loop cai no meio de um vão e pula. */
.cta__terms-item {
  margin-right: var(--cta-terms-gap, var(--dm-space-48));
  white-space: nowrap;
  text-transform: uppercase;
}

/* ⚠ Requer número par de itens — ímpar inverte a alternância de cor na segunda metade do loop. */
.cta__terms-item:nth-child(odd) {
  color: var(--dm-primary);
}

.cta__terms-item:nth-child(even) {
  color: var(--dm-white);
}

@keyframes dm-cta-terms {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta__terms-track {
    animation: none;
    will-change: auto;
  }
}

@media (min-width: 1520px) {
  .cta__terms {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .cta__terms-track {
    width: 100%;
    justify-content: center;
    gap: var(--dm-space-48);
    animation: none;
    will-change: auto;
  }

  .cta__terms-item {
    margin-right: 0;
  }

  .cta__terms-item--clone {
    display: none;
  }
}