.nm-footer-newsletter {
  /* --nm-color-footer-bg (#0A152E) é a cor exata do node "Base Footer" no
     Figma — diferente do Deep Blue (#062143) usado em outras seções/CTAs. */
  padding: 120px 0;
  background: var(--nm-color-footer-bg);
}

.nm-footer-newsletter__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nm-space-8);
  flex-wrap: wrap;
}

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

.nm-footer-newsletter__eyebrow {
  color: var(--nm-color-text-on-dark-subtle);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-base);
  text-transform: uppercase;

}

.nm-footer-newsletter__title {
  color: var(--nm-color-white);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-xl);
  line-height: var(--nm-line-height-lg);
  margin: 0;
}

.nm-footer-newsletter__description {
  color: #FFF;
  font-family: var(--nm-font-family);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin: 0 0 16px 0;
}

.nm-footer-newsletter__cta {
  /* .nm-btn--outline-blue por padrão usa texto azul — aqui o Figma pede
     borda azul com texto branco, então sobrescrevemos só a cor do texto. */
  align-self: flex-start;
  color: var(--nm-color-white);
}

.nm-footer-newsletter__cta:hover {
  color: var(--nm-color-deep-blue);
}

.nm-footer-newsletter__media {
  /* Dimensões exatas do node "Image 16:9 (2)" no Figma: 570x320, rounded-8,
     com gradiente próprio (o mesmo ângulo/paradas usados no node "Base
     Investir", só que aplicado a essa caixa menor). A imagem enviada pelo
     painel (esfera/gráfico) fica centralizada por cima do gradiente. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 570px;
  height: 320px;
  max-width: 100%;
  border-radius: var(--nm-radius-sm);
  overflow: hidden;
  background: linear-gradient(238.21deg, var(--nm-color-blue) 5.44%, var(--nm-color-deep-blue) 78.03%);
}

.nm-footer-newsletter__media-img {
  /* No Figma a arte encosta em cima e embaixo da caixa (altura igual à da
     caixa, 320px) — largura livre, sem limitar por %. */
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
}

@media (max-width: 768px) {
  .nm-footer-newsletter__inner {
    flex-direction: column;
    align-items: flex-start;
    width: calc(100% - 32px) !important;
  }

  .nm-footer-newsletter__media {
    width: 100%;
  }
  .nm-footer-newsletter__eyebrow{
    text-align: left;
  }
}