/* Opções de Investimento — Nova Marca
   Figma: Site Update Nova Marca — node 7833:4167 (desk) / 7833:5022 (mobo)

   Reconstruído com classes .nm-opcoes__* que não existem em css.css. Sem
   script novo — é conteúdo estático (sem carrossel/accordion no Figma).

   .itemAcordeonFundo/.headerItem continuam no <section>/título só pelo menu
   fixo lateral. Escopado em #opcoesDeInvestimento (id da seção) porque
   ".itemAcordeonFundo .headerItem h2"/".itemAcordeonFundo p" são genéricos e
   bateriam no título/parágrafos novos sem isso (mesmo problema das outras
   seções reconstruídas).

   Valores remedidos direto do JSON do node (não só da miniatura) depois que
   a primeira versão saiu com vários espaçamentos errados — token errado
   (--nm-space-6/32px em vez de --nm-space-5/24px) em três lugares diferentes. */

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

#opcoesDeInvestimento .nm-opcoes__title {
  width: auto;
  max-width: 870px;
  margin: 0;
  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);
}

/* Campo "descricao_secao" ainda não existe no repetidor ordem_da_secoes (o
   mesmo campo opcional já preparado em pqInvestir.php) — o PHP só imprime a
   tag quando vier preenchido. */
#opcoesDeInvestimento .nm-opcoes__description {
  margin: var(--nm-space-5) 0 0; /* 24px do título (título termina em 32, descrição começa em 56) */
  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-text-muted);
  max-width: 870px;
}

#opcoesDeInvestimento .nm-opcoes__grid {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 30px; /* colunas em left:0/w:570 e left:600/w:570 → 600-570 = 30 */
  margin-top: var(--nm-space-5); /* 24px — descrição termina, cards começam em 128 (top 56 + 2 linhas de 24 = 104; 128-104=24) */
  flex-wrap: wrap;
}

#opcoesDeInvestimento .nm-opcoes__column {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-2); /* 8px — 2º card em top:296, o 1º termina bem colado (128+padding24+título24+gap16+lista~168=~288..296) */
  flex: 1 1 400px;
}

#opcoesDeInvestimento .nm-opcoes__card {
  box-sizing: border-box;
  background: var(--nm-color-white);
  border: 1px solid var(--nm-color-border);
  border-radius: var(--nm-radius-md);
  padding: var(--nm-space-5) var(--nm-space-4); /* py-24 px-16 */
  padding-bottom: 48px;
}

#opcoesDeInvestimento .nm-opcoes__card-title {
  margin: 0 0 var(--nm-space-4); /* 16px até a lista (gap-16 no Figma) */
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: 18px;
  line-height: var(--nm-line-height-base); /* 24px */
  color: var(--nm-color-deep-blue);
}

#opcoesDeInvestimento .nm-opcoes__card-content,
#opcoesDeInvestimento .nm-opcoes__card-content ul {
  margin: 0;
  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);
}

#opcoesDeInvestimento .nm-opcoes__card-content ul {
  padding-left: var(--nm-space-5); /* 24px — Figma: li com ms-[24px] */
  /* css.css tem um reset global (Eric Meyer) que zera "ul,ol{list-style:none}"
     — sem reafirmar isso aqui, a bolinha do bullet some. */
  list-style: disc outside;
}

/* Figma: cada bullet é uma <ul> própria, sem <li> irmão (por isso o gap real
   vem da regra "ul:not(:last-child)" abaixo). Mas nem todo conteúdo do WYSIWYG
   segue essa convenção — o card do fundo do KDOL11, por ex., tem os 4 bullets
   numa <ul> só. Repetimos aqui o mesmo espaçamento (24px) entre <li> da MESMA
   lista pra o resultado visual ficar igual nos dois casos. */
#opcoesDeInvestimento .nm-opcoes__card-content li {
  margin: 0;
}

#opcoesDeInvestimento .nm-opcoes__card.nm-opcoes__card--fundo li:not(:last-child) {
  margin-bottom: var(--nm-space-5); /* 24px */
}

/* No card do fundo o WYSIWYG do ACF separa cada bullet num <ul> próprio (às
   vezes com um <p>&nbsp;</p> vazio no meio, resquício do editor) — escondemos
   o parágrafo vazio e damos o espaçamento certo (24px, igual ao Figma) direto
   no <ul>, em vez de depender da altura de um parágrafo vazio. */
#opcoesDeInvestimento .nm-opcoes__card-content p:empty {
  display: none;
}

#opcoesDeInvestimento .nm-opcoes__card-content ul:not(:last-child) {
  margin-bottom: var(--nm-space-5); /* 24px */
}

/* Card do fundo: fundo fixo --nm-color-off-white (Figma). Antes vinha de um
   campo ACF "cor_card" com um valor de cor por fundo (inline style) — quase
   todos os fundos tinham esse campo vazio (sem background nenhum) e uma
   dezena ainda carregava a cor da marca antiga (#80aea7), então virou fundo
   fixo igual ao Figma em vez de configurável por fundo. */
#opcoesDeInvestimento .nm-opcoes__card--fundo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--nm-space-5); /* 24px entre título e lista */
  padding: var(--nm-space-5); /* p-24 nos 4 lados */
  background: var(--nm-color-off-white);
  border: none;
}

#opcoesDeInvestimento .nm-opcoes__card--fundo .nm-opcoes__card-title {
  margin: 0;
  font-size: var(--nm-font-size-lg); /* 24px, maior que os cards de comparação (18px) */
  line-height: var(--nm-line-height-lg); /* 32px */
}

/* Centralizado na coluna de comparação (não no grid inteiro) — o card do
   fundo costuma ficar mais alto que as duas colunas de comparação juntas
   (conteúdo real varia), então centralizar no grid fazia o badge cair em
   cima do texto do card do fundo. Fica na coluna da esquerda e "vaza" pra
   direita via translateX(50%), igual ao node do Figma (que fica na costura
   entre as colunas). */
#opcoesDeInvestimento .nm-opcoes__badge {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  background: var(--nm-gradient-opcoes-vs);
  border-radius: var(--nm-radius-pill);
  z-index: 1;
}

#opcoesDeInvestimento .nm-opcoes__badge img {
  width: 48px;
  height: 48px;
}

@media (max-width: 768px) {
  #opcoesDeInvestimento .headerItem,
  #opcoesDeInvestimento .nm-opcoes__description {
    padding-left: var(--nm-space-4);
    padding-right: var(--nm-space-4);
  }

  #opcoesDeInvestimento .nm-opcoes__grid {
    flex-direction: column;
    padding: 0;
  }

  /* No mobile a coluna empilha em cima do card do fundo (não do lado) — o
     badge sai da lateral direita da coluna e vai pro rodapé dela, pra
     sobrepor o card de baixo em vez do de cima. */
  #opcoesDeInvestimento .nm-opcoes__badge {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
  }
  #opcoesDeInvestimento .nm-opcoes__card {

  padding: 48px 16px;
}
}