/* ============================================================
   9. Round Conecta — inverted flagship section, deliberately
   breaks the pattern (navy bg, orange + cyan accents).
   Split layout: text left, image right (half width each on desktop).
   ============================================================ */

.round-conecta {
  position: relative;
  background: var(--color-bg-inverted);
}

.round-conecta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.round-conecta__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(43, 185, 204, 0.25) 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(224, 123, 62, 0.18) 0%, transparent 50%);
}

.split__text{
  max-width: 60ch;
}

.round-conecta .eyebrow {
  color: var(--color-accent-primary);
  margin-bottom: var(--space-5);
}

.round-conecta .eyebrow__index {
  color: var(--color-white);
  background-color: var(--color-accent-primary);
}

.round-conecta .highlight {
  color: var(--color-accent-primary);
}

.round-conecta h2 {
  color: var(--color-text-on-inverted);
  margin-bottom: var(--space-6);
  max-width: 20ch;
  font-size: var(--text-h2);
}

.round-conecta .conecta__lead {
  color: var(--color-text-muted-on-inverted);
  max-width: 52ch;
  margin-bottom: var(--space-7);
  font-size: var(--text-lead);
}

@media (max-width: 899px) {
  .round-conecta .split__text {
    text-align: center;
  }

  .round-conecta .eyebrow {
    justify-content: center;
  }

  .round-conecta h2,
  .round-conecta .conecta__lead {
    margin-inline: auto;
  }

  .round-conecta .btn-primary {
    margin-inline: auto;
  }
}