/* Banner Principal da página Quem Somos (Figma: Desk / Quem Somos,
   node 7449:2230 "Banner Principal"). Página isolada da Nova Marca —
   não confundir com .nm-hero (banner da Home). */

.nm-somos-banner {
  position: relative;
  height: 720px;
  overflow: hidden;
  background: var(--nm-gradient-banner-interna);
  color: var(--nm-color-white);
}

/* Esferas 3D decorativas do lado direito. O node "Image 16:9" no Figma tem a
   borda direita alinhada exatamente com a borda direita do containerSite
   (266px + 1279px = 1545px = 375px + 1170px, num canvas de 1920px) — por
   isso ancoramos pela direita com a mesma técnica de `right: max(24px, calc(...))`
   usada em .nm-hero__controls, em vez de left fixo, para não quebrar em
   viewports diferentes de 1920px. Altura do banner === altura do node
   "Image 16:9", então as esferas são posicionadas direto dentro de
   .nm-somos-banner (que já tem overflow:hidden), sem precisar de wrapper. */
.nm-somos-banner__esfera {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.nm-somos-banner__esfera--02 {
  top: 411px;
  right: calc(max(24px, calc((100% - 1170px) / 2)) + 321px);
  width: 395px;
  height: 395px;
}

.nm-somos-banner__esfera--03 {
  top: 14px;
  right: calc(max(24px, calc((100% - 1170px) / 2)) + 89px);
  width: 499px;
  height: 499px;
}

.nm-somos-banner__esfera img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nm-somos-banner__breadcrumb {
  position: absolute;
  top: 24px;
  left: max(24px, calc((100% - 1170px) / 2));
  display: flex;
  align-items: center;
  gap: var(--nm-space-2);
  margin: 0;
  color: var(--nm-color-white);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-sm);
  line-height: var(--nm-line-height-sm);
  text-transform: uppercase;
}

.nm-somos-banner__breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.nm-somos-banner__breadcrumb a:hover {
  text-decoration: underline;
}

.nm-somos-banner__content {
  position: absolute;
  top: 50%;
  left: max(24px, calc((100% - 1170px) / 2));
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-5);
  width: 470px;
  max-width: calc(100% - 48px);
}

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

.nm-somos-banner__text {
  margin: 0;
  color: var(--nm-color-white);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-md);
  line-height: var(--nm-line-height-md);
}

/* Valores exatos do node "Banner Principal" em Mobo / Quem Somos (Figma
   7449:2359, canvas de referência 393px de largura, banner com 720px de
   altura — mesma altura do desktop). Sem containerSite no mobile: o layout
   já nasce full-bleed com gutter fixo de 16px (--nm-space-4). */
@media (max-width: 768px) {
  .nm-somos-banner {
    height: 720px;
    background: var(--nm-gradient-banner-interna-mobile);
  }

  .nm-somos-banner__esfera--02 {
    top: 570px;
    left: -21px;
    right: auto;
    width: 300px;
    height: 300px;
  }

  .nm-somos-banner__esfera--03 {
    top: -250px;
    left: 79px;
    right: auto;
    width: 500px;
    height: 500px;
  }

  .nm-somos-banner__breadcrumb {
    left: var(--nm-space-4);
    top: var(--nm-space-5);
  }

  .nm-somos-banner__content {
    left: var(--nm-space-4);
    width: 361px;
    max-width: calc(100% - 32px);
  }

  .nm-somos-banner__title {
    font-size: var(--nm-font-size-xl);
    line-height: var(--nm-line-height-lg);
  }
}