/* Banner Principal da Single Fundos — Nova Marca
   Figma: Site Update Nova Marca, "Banner Principal"
   Desk: node 7833:4738 (1920px) / Mobo: node 7833:5562 (393px)
   Dropdown (trigger + lista de opções): componente "Exemplo de Dropdown", node 7841:4224.

   Reestiliza os elementos legados (.selTitulo, .setaTitulo, .caixaOpçoesFundos,
   .tag) SEM trocar nome de classe: o toggle do dropdown, o tooltip de versões e
   o botão do investidor (private equity) continuam funcionando via
   scripts-fundos-comum.js, que seleciona por essas classes. Tudo escopado em
   #banner.nm-fundos-banner para não vazar para outros templates de fundo que
   ainda usam as mesmas classes (single-fundos-kinea-ventures.php,
   template-fundos-en.php, fundos-template-parts/categorias/error.php). */

#banner.nm-fundos-banner,
#banner.nm-fundos-banner .itemBanner {
  height: 620px;
}

#banner.nm-fundos-banner .itemBanner {
  background-size: cover;
  background-position: center;
}

/* O tema usa .overlayBannerNovo (deep-blue sólido a 70% de opacidade) pra dar
   contraste de texto sobre a foto do fundo. O Figma não tem esse scrim
   pesado — trocamos por um gradiente concentrado do lado do texto (esquerda),
   mais perto da referência visual e ainda garantindo legibilidade em fotos
   claras, já que cada fundo tem sua própria imagem de fundo. */
#banner.nm-fundos-banner .overlayBannerNovo {
  background: linear-gradient(90deg, rgba(6, 33, 67, 0.55) 0%, rgba(6, 33, 67, 0.2) 50%, rgba(6, 33, 67, 0) 100%);
  opacity: 1;
}

#banner.nm-fundos-banner .containerSite {
  position: static;
  padding-top: 0;
  height: 100%;
}

#banner.nm-fundos-banner .row {
  position: relative;
  height: 100%;
}

#banner.nm-fundos-banner .breadcumb {
  position: absolute;
  top: 24px;
  left: max(24px, calc((100% - 1170px) / 2));
  margin: 0;
}

#banner.nm-fundos-banner .breadcumb p {
  margin: 0;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-sm);
  color: var(--nm-color-white);
}

#banner.nm-fundos-banner .breadcumb a {
  color: inherit;
  text-decoration: none;
}

#banner.nm-fundos-banner .breadcumb a:hover {
  text-decoration: underline;
}

/* top:50% + translateY(-50%) em vez de um top fixo: centraliza de verdade
   contra a altura real do conteúdo. Um top fixo (era 210px) só centraliza
   por acaso pra uma altura de conteúdo específica — no caso com vídeo
   (bloco de 320px) sobrava bem mais espaço em cima do que embaixo, porque
   210px não tinha relação nenhuma com a altura real do conteúdo. */
#banner.nm-fundos-banner .TodoConteudoFundosBanner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: max(24px, calc((100% - 1170px) / 2));
  width: 470px;
  max-width: calc(100% - 48px);
}

/* Com vídeo, o layout vira duas colunas (texto + vídeo) — mesma regra que já
   existia embutida inline no topo.php, só migrada pra cá e escopada.
   flex-wrap:nowrap é necessário: o css.css legado tem uma regra
   ".TodoConteudoFundosBanner" (sem escopo/ID) com flex-wrap:wrap, e como eu
   nunca sobrescrevia essa propriedade, ela continuava valendo — o vídeo
   "quebrava" pra uma segunda linha (empilhava embaixo do texto) sempre que
   não cabia inteiro ao lado do texto. */
#banner.nm-fundos-banner .TodoConteudoFundosBanner.nm-fundos-banner__row--has-video {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: auto;
  max-width: calc(100% - 48px);
}

#banner.nm-fundos-banner .col-md-6.CaixaTextoBanner {
  width: 470px !important;
  max-width: 100% !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-5);
}

#banner.nm-fundos-banner .nm-fundos-banner__row--has-video .col-md-6.CaixaTextoBanner {
  width: 470px !important;
}

/* Node "Fundo": Tag Categoria + Dropdown empilhados com gap de 8px */
#banner.nm-fundos-banner .nm-fundos-banner__fundo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nm-space-2);
  width: 100%;
}

#banner.nm-fundos-banner .tagsFundos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nm-space-2);
  margin: 0;
}

/* Estilo da .tag agora vem do componente global nm-tag.css (classe .nm-tag
   adicionada no HTML do topo.php). Reset de margin legado apenas. */
#banner.nm-fundos-banner .tag {
  margin-bottom: 0;
}

#banner.nm-fundos-banner h1 {
  margin: 0;
  width: 100%;
  line-height: 0;
  min-width: 470px;
}

#banner.nm-fundos-banner p:first-of-type {
  margin-top: 0px !important;
}

/* Trigger do Dropdown (componente Figma "Dropdown") */
#banner.nm-fundos-banner .selTitulo {
  background: none;
  border: 0;
  border-radius: 0;
  min-width: 0 !important;
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 0 !important;
  margin: 0;
}

#banner.nm-fundos-banner .selTitulo--dropdown {
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.24);
  border: 1px solid #cecece; /* valor exato do node "Dropdown" no Figma — não é o --nm-color-border (#CACACA) padrão do tema */
  border-radius: var(--nm-radius-md);
  min-width: 0;
  width: 370px; /* node "Dropdown" no Figma: largura fixa, não estica até o fim do bloco "Fundo" (470px) */
  max-width: 100%;
  height: 56px;
  padding: var(--nm-space-4) !important;
  margin: 0;
}

/* Cursor de clique só quando o box realmente abre um dropdown (fundos com
   versões) — em fundos sem submenu o .selTitulo não tem .setaTitulo dentro. */
#banner.nm-fundos-banner .selTitulo:has(.setaTitulo) {
  cursor: pointer;
}

#banner.nm-fundos-banner .selTitulo strong {
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-style: normal;
  font-size: var(--nm-font-size-lg);
  line-height: var(--nm-line-height-lg);
  color: var(--nm-color-white);
}

#banner.nm-fundos-banner .setaTitulo {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 !important;
}

#banner.nm-fundos-banner .setaTitulo img {
  display: block;
  width: 24px;
  height: 24px;
  /* Mesma transformação do node Figma (ícone "arrow_forward_ios" girado pra virar chevron-down) */
  transform: rotate(90deg) scaleY(-1);
  transition: transform 0.2s ease;
}

/* Com o dropdown aberto (.setaTitulo ganha "ativoDrop" junto com .caixaOpçoesFundos
   em scripts-fundos-comum.js), gira mais 180deg pra apontar pra cima. */
#banner.nm-fundos-banner .setaTitulo.ativoDrop img {
  transform: rotate(90deg) scaleY(-1) rotate(180deg);
}

/* Painel de opções — node Figma "Dropdown Open/Hover" */
#banner.nm-fundos-banner .caixaOpçoesFundos,
#banner.nm-fundos-banner .caixaOpçoesFundos.ativoDrop {
  box-sizing: border-box;
  background: var(--nm-color-white);
  border-radius: var(--nm-radius-md);
  box-shadow: 0 8px 24px rgba(6, 33, 67, 0.16);
  width: 100%; /* mesma largura fixa do trigger (.selTitulo) */
  max-width: 370px;
  min-width: 0;
  left: 0;
  top: calc(100% + 8px);
  padding: var(--nm-space-4) 0;
}

#banner.nm-fundos-banner .caixaOpçoesFundos ul {
  padding: 0;
  max-height: 224px;
}

#banner.nm-fundos-banner .caixaOpçoesFundos ul li {
  line-height: normal;
}

#banner.nm-fundos-banner .caixaOpçoesFundos ul li a {
  display: block !important;
  border-top: none;
  padding: var(--nm-space-2) var(--nm-space-4);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: 18px;
  line-height: var(--nm-line-height-base);
  color: var(--nm-color-deep-blue);
  text-decoration: none;
}

#banner.nm-fundos-banner .caixaOpçoesFundos ul li a:hover {
  background: var(--nm-color-off-white);
}

#banner.nm-fundos-banner .nm-fundos-banner__text {
  width: 100%;
}

#banner.nm-fundos-banner .nm-fundos-banner__text p {
  margin: 0;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: 18px;
  line-height: var(--nm-line-height-base);
  color: var(--nm-color-white);
}
#banner.nm-fundos-banner .BannerPrivate .btnBanner{
  margin-top: 0;
}
#banner.nm-fundos-banner .BannerPrivate .btnBanner a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 220px;
  height: 48px;
  padding: 0 32px;
  border: 2px solid var(--nm-color-white);
  border-radius: 100px;
  background: transparent;
  font-family: var(--nm-font-family);
  font-size: 16px;
  font-style: normal;
  font-weight: var(--nm-font-weight-medium);
  line-height: 16px;
  color: var(--nm-color-white);
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  margin-top: 0;
}

#banner.nm-fundos-banner .BannerPrivate .btnBanner a:hover {
  background: var(--nm-color-white);
  color: var(--nm-color-deep-blue);
}

#banner.nm-fundos-banner .BannerPrivate .btnBanner a .ico {
  display: inline-flex;
  margin-left: 0;
}

#banner.nm-fundos-banner .BannerPrivate .btnBanner a .ico svg path {
  stroke: currentColor;
}

@media (max-width: 768px) {
  #banner.nm-fundos-banner h1 {
  margin: 0;
  width: 100%;
  line-height: 0;
  min-width: 100%;
}
  #banner.nm-fundos-banner .breadcumb {
    left: var(--nm-space-4);
    top: var(--nm-space-4);
  }

  #banner.nm-fundos-banner .TodoConteudoFundosBanner {
    left: var(--nm-space-4);
    width: 361px;
    max-width: calc(100% - 32px);
  }

  #banner.nm-fundos-banner .col-md-6.CaixaTextoBanner,
  #banner.nm-fundos-banner .nm-fundos-banner__row--has-video .col-md-6.CaixaTextoBanner {
    width: 100% !important;
  }

  /* Mobile: texto empilhado com o vídeo embaixo, de propósito — o
     flex-wrap:nowrap do desktop (fundos-banner.css acima) existe só pra
     forçar lado a lado ali; aqui vira column mesmo. .videoLayoutNovo nunca
     teve regra de tamanho pra mobile (só o width:569px fixo do css.css
     legado) — sem isso ele estourava a largura da tela. */
  #banner.nm-fundos-banner .nm-fundos-banner__row--has-video {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nm-space-5);
  }

  #banner.nm-fundos-banner .videoLayoutNovo {
    width: 100%;
    height: auto;
    aspect-ratio: 569 / 320;
  }

  /* Dropdown ocupa a largura toda do bloco "Fundo" no mobile (361px), diferente
     do desktop onde fica fixo em 370px dentro de um bloco maior (470px). */
  #banner.nm-fundos-banner .selTitulo--dropdown,
  #banner.nm-fundos-banner .caixaOpçoesFundos,
  #banner.nm-fundos-banner .caixaOpçoesFundos.ativoDrop {
    width: 100%;
  }

  #banner.nm-fundos-banner .nm-fundos-banner__text p {
    font-size: var(--nm-font-size-base);
  }
  #banner .TodoConteudoFundosBanner .selTitulo--dropdown {

    min-width: 100% !important;
  }
}

.bannerFundos.novoBannerInterna .TodoConteudoFundosBanner.Combreadcumb {
  margin-top: 0;
}

.option_menu .listaOption {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.option_menu .listaOption::-webkit-scrollbar {
  display: none;
}

.option_menu .listaOption .containerLista {
  width: max-content;
  min-width: 100%;
  transform: none !important;
}

.option_menu .listaOption .staMais,
.option_menu .listaOption .staMenos {
  display: none !important;
}

.option_menu .listaOption.is-overflowing {
  cursor: grab;
}

.option_menu .listaOption a {
  -webkit-user-drag: none;
}

.option_menu .listaOption.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}

.option_menu {
  top: 0 !important;
}

/* Tooltip de versões do dropdown — ajustes Nova Marca */
#banner.nm-fundos-banner .tooltipDrop {
  height: auto;
  min-height: 166px;
  border-radius: var(--nm-radius-md);
  box-shadow: 0 8px 24px rgba(6, 33, 67, 0.16);
  padding: 24px;
}

#banner.nm-fundos-banner .closeTooltipDrp {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: transparent;
  font-size: 0;
  font-weight: 0;
  transform: none;
}

#banner.nm-fundos-banner .closeTooltipDrp svg {
  width: 14px;
  height: 14px;
}

#banner.nm-fundos-banner .btnEntendi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 86px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--nm-color-blue);
  border-radius: var(--nm-radius-pill);
  background: transparent;
  color: var(--nm-color-blue);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  box-shadow: none;
  cursor: pointer;
  margin-top: 16px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#banner.nm-fundos-banner .btnEntendi:hover {
  background: var(--nm-color-blue);
  color: var(--nm-color-white);
}

.tooltipDrop {
  left: calc(100% + -96px + 20px);
  top: -14px;
}