.nm-investir {
  /* Figma: seção com 620px de altura total, conteúdo centralizado
     verticalmente (142px de respiro acima/abaixo quando o conteúdo cabe). */
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: var(--nm-space-8) 0;
  background: var(--nm-gradient-primary);
}

.nm-investir__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nm-space-8);
  flex-wrap: wrap;
  width: 100%;
}

.nm-investir__content {
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-5);
  max-width: 470px;
  color: var(--nm-color-white);
}

.nm-investir__tag {
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-base);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.nm-investir__title {
  color: var(--nm-color-white);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-3xl);
  line-height: var(--nm-line-height-3xl);
  margin: 0;
}

.nm-investir__description {
  /* Cor explícita (não só herdada) — regras globais de <p> do tema
     sobrescreveriam a cor branca herdada de .nm-investir__content. */
  color: var(--nm-color-white);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-base);
  line-height: var(--nm-line-height-base);
  margin: 0;
}

.nm-investir__cards {
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-6);
  width: 570px;
  max-width: 100%;
}

.nm-investir__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nm-space-4);
  height: 152px;
  padding: 0 var(--nm-space-5);
  border-radius: var(--nm-radius-md);
  background-color: var(--nm-color-deep-blue);
  overflow: hidden;
}

.nm-investir__card:nth-child(2) {
  background-color: var(--nm-color-blue);
}

.nm-investir__card-title {
  position: relative;
  z-index: 1;
  color: var(--nm-color-white);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-lg);
  line-height: var(--nm-line-height-lg);
  max-width: 320px;
  margin: 0;
}

.nm-investir__card-btn {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 56px;
  height: 40px;
  padding: 4px 12px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nm-investir__card-btn svg {
  width: 26px;
  height: 18px;
}

.nm-btn--icon-white.nm-investir__card-btn:hover {
  background: var(--nm-color-white);
  border-color: var(--nm-color-white);
}

.nm-btn--icon-white.nm-investir__card-btn:hover svg path {
  fill: var(--nm-color-blue);
}

.nm-investir__card-media {
  /* contain (não cover): mostra a imagem inteira sem cortar, já que a
     imagem cadastrada no painel pode não ter a mesma proporção 1:1 do
     asset original do Figma — evita o efeito de "zoom" no gráfico. */
  position: absolute;
  right: 0;
  object-fit: contain;
  pointer-events: none;
}

/* Posições exatas do Figma: 1º card (esfera "corrente" saindo por cima,
   encostada na borda direita), 2º card (esfera "espiral" saindo por baixo).
   object-position ancorado na borda que fica DENTRO do card (não "center"):
   assim, se a imagem não for perfeitamente quadrada, a folga do "contain"
   sobra do lado que já está cortado, em vez de empurrar o gráfico visível
   pra fora da área visível do card. */
.nm-investir__card:nth-child(1) .nm-investir__card-media {
  width: 304px;
  height: 304px;
  top: -152px;
  object-position: right bottom;
}

.nm-investir__card:nth-child(2) .nm-investir__card-media {
  width: 296px;
  height: 296px;
  top: 0;
  object-position: right top;
}

@media (max-width: 768px) {
  .nm-investir {
    min-height: auto;
    padding: var(--nm-space-9) 0;
  }

  .nm-investir__inner {
    flex-direction: column;
    align-items: flex-start;
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
  }

  .nm-investir__content,
  .nm-investir__tag,
  .nm-investir__title,
  .nm-investir__description,
  .nm-investir__card-title {
    text-align: left;
  }

  .nm-investir__title {
    font-size: 32px;
    line-height: 40px;
  }

  .nm-investir__description {
    font-size: 16px;
    line-height: 24px;
  }

  .nm-investir__card-title {
    font-size: 20px;
    line-height: 24px;
  }

  .nm-investir__cards {
    width: 100%;
  }

  .nm-investir__card {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    min-height: 184px;
    height: auto;
    padding: 24px;
  }

  .nm-investir__card-title {
    max-width: 70%;
  }

  .nm-investir__card:nth-child(1) .nm-investir__card-media {
    top: 0;
    right: -80px;
    bottom: auto;
    width: 304px;
    height: 304px;
    aspect-ratio: 1 / 1;
    object-position: right top;
  }

  .nm-investir__card:nth-child(2) .nm-investir__card-media {
    top: auto;
    right: -40px;
    bottom: 0;
    width: 288px;
    height: 288px;
    aspect-ratio: 1 / 1;
    object-position: right bottom;
  }
}