/* Onde Investir — Nova Marca
   Figma: Site Update Nova Marca — node 7833:3986 (desk) / 7833:4880 (mobo)

   Reconstruído com classes .nm-onde-investir__* que não existem em css.css.
   Conteúdo continua vindo das mesmas fontes de sempre:
   - wp_excel_cms_get("OndeInvestir","1") + repeater "imagem_distribuidor" (ACF
     field group 60) pra casar corretora -> logo (fundos-template-parts/onde-investir.php)
   - $texto_introducao/$texto_de_conclusao (vars.php) antes/depois da grade
   só o HTML/CSS ao redor é novo, sem herdar .ItemInvista/.textoVaicaInvista/
   .caixaImagem do css.css.

   .itemAcordeonFundo/.headerItem continuam no <section>/título só pelo menu
   fixo lateral (mesmo motivo do fundos-palavra-gestor.css) — os seletores
   abaixo são prefixados com #OndeInvestir (id da seção), que sempre vence
   classe+elemento sem precisar de !important. */

#OndeInvestir.nm-onde-investir {
  width: 96%;
  max-width: 1440px;
  height: auto;
  margin-left: auto; /* centraliza horizontal — não usar o shorthand "margin: 0 auto",
                         que zeraria margin-top/bottom e brigaria com o espaçamento
                         entre seções (fundos-secoes-espacamento.css) */
  margin-right: auto;
  background: var(--nm-color-off-white);
  border-radius: var(--nm-radius-md); /* 16px */
  padding: 64px 0;
}

#OndeInvestir .headerItem {
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: default !important;
  position: static !important;
}

#OndeInvestir .nm-onde-investir__title {
  margin: 0 0 var(--nm-space-7); /* 40px até a grade */
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-lg); /* 24px */
  line-height: var(--nm-line-height-lg); /* 32px */
  color: var(--nm-color-deep-blue);
}

/* $texto_introducao/$texto_de_conclusao são WYSIWYG livres — sem estilo
   próprio eles herdariam o <p> genérico do css.css, então definimos aqui
   igual ao texto padrão das outras seções da Nova Marca. Só existem quando o
   campo ACF está preenchido — onde-investir.php só imprime o wrapper nesse
   caso, então a margem não depende de contar quantos <p> vieram do WYSIWYG. */
#OndeInvestir .nm-onde-investir__intro,
#OndeInvestir .nm-onde-investir__outro {
  font-family: var(--nm-font-family);
  font-size: var(--nm-font-size-base);
  line-height: var(--nm-line-height-base);
  color: var(--nm-color-chumbo);
}

#OndeInvestir .nm-onde-investir__intro p,
#OndeInvestir .nm-onde-investir__outro p {
  margin: 0;
}

#OndeInvestir .nm-onde-investir__intro {
  margin-bottom: var(--nm-space-7); /* 40px até a grade */
}

#OndeInvestir .nm-onde-investir__outro {
  margin-top: var(--nm-space-7); /* 40px depois da grade */
}

#OndeInvestir .nm-onde-investir__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--nm-space-6); /* 30px no Figma, 32px é o degrau mais próximo do grid de 8px */
  row-gap: var(--nm-space-7); /* 40px */
}

#OndeInvestir .nm-onde-investir__item {
  display: flex;
  align-items: center;
  gap: var(--nm-space-2); /* 8px */
  min-width: 0;
}

#OndeInvestir .nm-onde-investir__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 56px;
  border: 1px solid var(--nm-color-border); /* #CACACA */
  border-radius: var(--nm-radius-sm); /* 8px */
  background: #fff;
  padding: 4px;
}

#OndeInvestir .nm-onde-investir__logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  max-width: 80px;
}

#OndeInvestir .nm-onde-investir__content {
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-1); /* 4px */
  min-width: 0;
}

#OndeInvestir .nm-onde-investir__name {
  margin: 0;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: 18px; /* sem token pra 18px na escala (16/20/24...) */
  line-height: var(--nm-line-height-base); /* 24px */
  color: var(--nm-color-chumbo);
}

#OndeInvestir .nm-onde-investir__link {
  display: flex;
  align-items: center;
  gap: var(--nm-space-1); /* 4px */
  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);
  color: var(--nm-color-chumbo);
  text-decoration: none;
}

#OndeInvestir .nm-onde-investir__link:hover {
  text-decoration: underline;
}

#OndeInvestir .nm-onde-investir__link-icon {
  display: flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

#OndeInvestir .nm-onde-investir__link-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  #OndeInvestir.nm-onde-investir {
    border-radius: var(--nm-radius-sm); /* 8px */
  }

  #OndeInvestir .headerItem {
    padding-left: var(--nm-space-4);
    padding-right: var(--nm-space-4);
  }

  #OndeInvestir .nm-onde-investir__title {
    margin: 0 0 var(--nm-space-5); /* 24px */
    padding-left: var(--nm-space-4);
    padding-right: var(--nm-space-4);
  }

  #OndeInvestir .nm-onde-investir__body {
    padding: 0 var(--nm-space-4);
  }

  #OndeInvestir .nm-onde-investir__intro {
    margin-bottom: var(--nm-space-5); /* 24px */
  }

  #OndeInvestir .nm-onde-investir__outro {
    margin-top: var(--nm-space-5); /* 24px */
  }

  #OndeInvestir .nm-onde-investir__grid {
    grid-template-columns: 1fr;
    row-gap: var(--nm-space-5); /* 24px */
  }
}