/* Características do Fundo — Nova Marca
   Figma: Site Update Nova Marca — node 7833:4485 (desk) / 7833:5340 (mobo)

   Reconstruído com classes .nm-caracteristicas__* que não existem em css.css.
   Texto continua vindo do mesmo campo ACF de sempre — "objetivo_do_fundo"
   (fundos-template-parts/caracteristicas.php) — e o link pra Carta do Gestor
   continua vindo do shortcode [kineaLink]. A imagem é novidade: campo ACF
   "caracteristicas_imagem" (registrado em functions.php) — sem imagem, cai no
   placeholder do próprio Figma (ícone + fundo cinza).

   Sem "mostrar mais": o Figma sempre mostra o texto completo, então o
   truncamento antigo (scripts-fundos-comum.js + .mostrarmaisBtnCaracteristicas)
   não é usado mais aqui.

   .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 #caracteristicas (id da seção), que sempre vence
   classe+elemento sem precisar de !important. */

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

#caracteristicas .nm-caracteristicas__title {
  margin: 0 0 var(--nm-space-5); /* 40px até o grid */
  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);
}

#caracteristicas .nm-caracteristicas__grid {
  display: flex;
  align-items: flex-start;
  gap: var(--nm-space-6); /* 30px no Figma, 32px é o degrau mais próximo do grid de 8px */
}

#caracteristicas .nm-caracteristicas__content {
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-5); /* 24px */
  flex: 1 1 570px;
  min-width: 0;
}

#caracteristicas .nm-caracteristicas__link-carta {
  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);
}

#caracteristicas .nm-caracteristicas__link-carta a {
  color: var(--nm-color-blue);
  text-decoration: none;
}

#caracteristicas .nm-caracteristicas__link-carta a:hover {
  text-decoration: underline;
}

#caracteristicas .nm-caracteristicas__texto {
  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);
}

#caracteristicas .nm-caracteristicas__texto p {
  margin: 0 0 var(--nm-space-5);
  max-width: 720px;
}

#caracteristicas .nm-caracteristicas__texto p:last-child {
  margin-bottom: 0;
}

#caracteristicas .nm-caracteristicas__texto strong,
#caracteristicas .nm-caracteristicas__texto b {
  font-weight: var(--nm-font-weight-bold);
  color: var(--nm-color-chumbo);
}

/* Alguns fundos têm, dentro do próprio WYSIWYG de "objetivo_do_fundo", um
   bloco de ícone+rótulo colado à mão pelo time de conteúdo (ex.: "Moedas",
   "Ações", "Renda fixa"): .TodoCaracteristicasdoFundo > .row > .col-md-6
   (com svg inline em .IconeCaracteristica + .textoCaracteristicas). É HTML
   salvo no banco por fundo — não tem como trocar tag/classe daqui, só
   reestilizar pra ficar com a cara do grid de Informações Adicionais
   (fundos-infos-basicas.css / .nm-infos-adicionais__*). */
#caracteristicas .nm-caracteristicas__texto .TodoCaracteristicasdoFundo {
  margin: var(--nm-space-5) 0 0;
}

#caracteristicas .nm-caracteristicas__texto .TodoCaracteristicasdoFundo .row {
  display: block;
  column-count: 2; /* a coluna de texto aqui é mais estreita que a seção inteira — 2 já é o bastante pra não espremer o rótulo */
  column-gap: var(--nm-space-6); /* 32px */
  margin: 0;
}

#caracteristicas .nm-caracteristicas__texto .TodoCaracteristicasdoFundo .col-md-6 {
  display: flex;
  align-items: center;
  gap: var(--nm-space-4); /* 16px */
  float: none;
  width: auto;
  margin: 0 0 var(--nm-space-5); /* 24px — column-count não tem row-gap */
  padding: 0;
  break-inside: avoid;
}

#caracteristicas .nm-caracteristicas__texto .IconeCaracteristica {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--nm-color-off-white);
  border-radius: 50%;
}

#caracteristicas .nm-caracteristicas__texto .IconeCaracteristica svg {
  position: static;
  transform: none;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  max-width: 32px;
  max-height: 32px;
}

#caracteristicas .nm-caracteristicas__texto .textoCaracteristicas,
#caracteristicas .nm-caracteristicas__texto .textoCaracteristicas p {
  display: block;
  padding: 0;
  margin: 0;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-base); /* 16px */
  line-height: var(--nm-line-height-base); /* 24px */
  color: var(--nm-color-chumbo);
}

/* ".clear" era o hack antigo de float; parágrafos vazios são artefato do
   wpautop em volta do HTML colado — nenhum dos dois deve ocupar espaço. */
#caracteristicas .nm-caracteristicas__texto .clear,
#caracteristicas .nm-caracteristicas__texto p:empty {
  display: none;
}

#caracteristicas .nm-caracteristicas__media {
  flex: 1 1 570px;
  max-width: 570px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  border-radius: var(--nm-radius-md); /* 16px */
  overflow: hidden;
  
}

#caracteristicas .nm-caracteristicas__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#caracteristicas .nm-caracteristicas__placeholder-icon {
  display: flex;
  width: 88px;
  height: 88px;
}

#caracteristicas .nm-caracteristicas__placeholder-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

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

  
  #caracteristicas .nm-caracteristicas__grid {
    flex-direction: column;
    gap: var(--nm-space-7); /* 40px */
    padding: 0;
  }

  #caracteristicas .nm-caracteristicas__content,
  #caracteristicas .nm-caracteristicas__media {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }

  #caracteristicas .nm-caracteristicas__media {
    margin-top: 0;
  }

  #caracteristicas .nm-caracteristicas__texto .TodoCaracteristicasdoFundo .row {
    column-count: 1; /* no mobile a coluna de texto fica ainda mais estreita — 1 coluna evita ícone+rótulo espremidos */
  }

  #caracteristicas .nm-caracteristicas__texto .IconeCaracteristica {
    width: 48px;
    height: 48px;
  }

  #caracteristicas .nm-caracteristicas__texto .IconeCaracteristica svg {
    max-width: 24px;
    max-height: 24px;
  }

  
}
@media (min-width: 768px) {
  .col-md-6 {

    max-width: 100%;
  }
}