/* Por que investir — Nova Marca (chamado "Por que" / "PQ?" no Figma)
   Figma: Site Update Nova Marca — node 7833:4668 (desk) / 7833:5490 (mobo)

   Reconstruído com classes .nm-pq-investir__* que não existem em css.css. O
   carrossel também é novo (src/nova-marca/js/pq-investir.js): scroll nativo
   com scroll-snap, sem Slick — o Slick era a origem dos problemas de
   herança (slick-theme.css impõe estilo próprio nas setas via ::before, e o
   .cardsCarroselPadrao/.itemCard/.prevCarrosel/.nextCarrosel legados vêm
   cheios de "!important" no css.css).

   Esse mesmo arquivo (+ js/pq-investir.js) também serve a seção "Cards com
   Carrossel" (fundos-template-parts/cards-carrosel.php, #cardsCarrosel) e a
   variante "Card Number" usada só pelo Kinea Agro Income/KDOL11
   (fundos-template-parts/pqInvestir-numero.php, #pqInvestirNumero — Figma
   node 7956:4207) — as três seções usam o mesmo cards-com-carrossel, só a
   fonte de dados (repeater ACF) e o conteúdo do card (ícone vs. número)
   mudam. Por isso os seletores abaixo usam
   :is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) em
   vez de só um ID: um arquivo/JS só, pra nunca dessincronizar visualmente as
   três seções.

   .itemAcordeonFundo/.headerItem continuam no <section>/título por um
   motivo funcional, não visual — o menu fixo lateral (scripts-fundos-comum.js)
   monta a navegação da página varrendo ".itemAcordeonFundo .headerItem h2";
   sem essas duas classes a seção some do menu.

   Só que ".itemAcordeonFundo" também carrega regras genéricas pra QUALQUER
   h2/h3/p dentro dele (".itemAcordeonFundo .headerItem h2{font-size:28px}",
   ".itemAcordeonFundo h3{font-size:16px;font-weight:600}",
   ".itemAcordeonFundo p{margin-bottom:24px}") — como são 2 classes + elemento,
   têm mais especificidade que uma classe nova sozinha (".nm-pq-investir__title")
   e VENCIAM (título da seção saía maior, título do card saía menor e bold).
   Por isso todo seletor aqui é prefixado com :is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir):
   ID sempre vence classe+elemento, então nenhuma regra abaixo precisa de
   !important — o único lugar que ainda precisa é o reset do .headerItem
   (border-bottom/margin/cursor), porque ali o css.css usa !important
   direto na raiz da própria classe .itemAcordeonFundo .headerItem.

   Sem fundo colorido aqui — o respiro externo (antes/depois da seção) vem
   só de fundos-secoes-espacamento.css (margin-bottom:48px, carregado em
   topo.php pra toda seção da Nova Marca). */

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .headerItem {
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: default !important;
  position: static !important;
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__title {
  width: auto; /* sobrepõe o "width: calc(100% - 36px)" de .itemAcordeonFundo .headerItem h2 */
  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);
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__description {
  margin: var(--nm-space-5) 0 0; /* 24px do título, sem margin-bottom */
  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);
  max-width: 870px;
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__carousel {
  position: relative;
  margin-top: var(--nm-space-5); /* 40px */
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__track {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__track::-webkit-scrollbar {
  display: none;
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__card {
  flex: 0 0 270px;
  scroll-snap-align: start;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nm-space-4); /* 16px */
  padding: var(--nm-space-5) var(--nm-space-4); /* 24px 16px */
  background: var(--nm-color-white);
  border: 1px solid var(--nm-color-border);
  border-radius: var(--nm-radius-md);
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__card-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* #pqInvestirNumero e #porqueInvestir usam isso (Figma "Card Number", node 7956:4207) — o
   número já vem pronto no campo legado card_pq_investir.titulo ("1", "2"...). */
:is(#pqInvestirNumero, #porqueInvestir) .nm-pq-investir__card-number {
  margin: 0;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-extralight);
  font-size: var(--nm-font-size-5xl);
  line-height: var(--nm-line-height-5xl);
  color: var(--nm-color-blue);
}

/* .nm-pq-investir__card tem align-items:flex-start (pro ícone de 64px não
   esticar) — sem width:100% aqui, título/texto encolheriam pro tamanho do
   conteúdo em vez de quebrar linha na largura do card (Figma: w-[237px] =
   270px do card menos os 16px de padding de cada lado). */
:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__card-title {
  width: 100%;
  margin: 0;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-md); /* 20px */
  line-height: var(--nm-line-height-base); /* 24px */
  color: var(--nm-color-deep-blue);
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__card-text {
  width: 100%;
  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);
}

/* #pqInvestirNumero e #porqueInvestir: card-text vem do WYSIWYG legado (campo "conteudo"),
   pode ter vários <p>/<ul> em vez de um texto único (card de ícone). */
:is(#pqInvestirNumero, #porqueInvestir) .nm-pq-investir__card-text p,
:is(#pqInvestirNumero, #porqueInvestir) .nm-pq-investir__card-text ul {
  margin: 0 0 var(--nm-space-4);
}

:is(#pqInvestirNumero, #porqueInvestir) .nm-pq-investir__card-text p:last-child,
:is(#pqInvestirNumero, #porqueInvestir) .nm-pq-investir__card-text ul:last-child {
  margin-bottom: 0;
}

:is(#pqInvestirNumero, #porqueInvestir) .nm-pq-investir__card-text ul {
  padding-left: 20px;
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--nm-space-4); /* 16px — medido no asset exportado do Figma: botões de 56px, 72px entre as bordas esquerdas */
  margin-top: var(--nm-space-7); /* 40px — mesmo ritmo do espaço título→cards */
}

/* JS (pq-investir.js) esconde a navegação quando os cards já cabem todos no
   track (sem overflow) — sem isso, "disabled" começa oculto até o script
   medir e decidir. */
:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__nav[hidden] {
  display: none;
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 40px;
  padding: 0;
  background: var(--nm-color-white);
  border: 1px solid var(--nm-color-border);
  border-radius: var(--nm-radius-pill);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__arrow:not(:disabled):hover {
  background: var(--nm-color-deep-blue);
  border-color: var(--nm-color-deep-blue);
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__arrow img {
  display: block;
  width: 32px;
  height: 32px;
  transition: filter 0.15s ease;
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__arrow:not(:disabled):hover img {
  filter: brightness(0) invert(1); /* SVG tem fill fixo #062143 — inverte pra branco no hover */
}

:is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__arrow--prev img {
  transform: scaleX(-1); /* mesmo ícone "east" da direita, espelhado */
}

@media (max-width: 768px) {
  :is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .containerSite{
    width: 100%;
  }

  .nm-pq-investir__title{
padding: 0 16px;
  }
 .nm-pq-investir__description{
padding: 0 16px;
  }
  :is(#cardsCarroselPadraoPqInvestir, #cardsCarrosel, #pqInvestirNumero, #porqueInvestir) .nm-pq-investir__carousel{
    padding-left: 16px;
  }
  /* Título e descrição são texto normal — precisam de respiro dos dois lados. */
}