/* =====================================================================
   NOVEMBRO BLACK 2026 -- versao MOBILE (/m)

   Medidas tiradas do export m-home.png (frame de 390px). TUDO ESCOPADO POR
   .nb-ativo NO <body>: o header so inclui este arquivo e so marca o body
   enquanto novembroBlackAtivo() for verdadeiro, entao em 01/12 o site
   volta sozinho. Nunca escrever seletor fora de .nb-ativo aqui.
   ===================================================================== */

.nb-ativo {
  /* ---- cores ---- */
  --nb-fundo:         #0d0a0f;  /* preto arroxeado do hero */
  --nb-amarelo:       #ffc21a;  /* destaque: "32% OFF", selo, faixa */
  --nb-magenta:       #c2188b;  /* botão, tag, faixa */
  --nb-texto:         #ffffff;
  --nb-texto-suave:   #d9d0de;  /* parágrafo sobre fundo escuro */
  --nb-label:         #cfc6d4;  /* "DIAS", "HORAS", "MIN", "SEG" */
  --nb-bloco:         #251d2a;  /* blocos do contador */

  /* brilho roxo atrás da foto, no canto direito do hero */
  --nb-brilho:        rgba(122, 31, 162, 0.42);

  /* vidro da caixa do contador */
  --nb-vidro-fundo:   rgba(255, 255, 255, 0.04);
  --nb-vidro-borda:   rgba(255, 255, 255, 0.14);

  /* ---- sombras ---- */
  --nb-sombra-botao:  0 10px 15px rgba(194, 24, 139, 0.42);
  --nb-sombra-faixa:  0 10px 28px rgba(0, 0, 0, 0.45);
  --nb-sombra-tag:    0 24px 60px rgba(0, 0, 0, 0.45);
  --nb-sombra-selo:   0 18px 20px rgba(0, 0, 0, 0.45);

  /* ---- raios ---- */
  --nb-raio-caixa:    20px;
  --nb-raio-bloco:    14px;
  --nb-raio-tag:      17px;
  --nb-raio-pilula:   999px;

  /* ---- tipografia ---- */
  --nb-fonte: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------------
   Primitivas reutilizadas pelas próximas fases
   --------------------------------------------------------------------- */

/* Botão principal da campanha — hero, cards do VIP */
.nb-ativo .nb-botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 34px;
  border: 0;
  border-radius: var(--nb-raio-pilula);
  background: var(--nb-magenta);
  box-shadow: var(--nb-sombra-botao);
  color: var(--nb-texto);
  font-family: var(--nb-fonte);
  font-weight: 900;
  font-size: 19px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.nb-ativo .nb-botao:hover,
.nb-ativo .nb-botao:focus {
  transform: translateY(-2px);
  box-shadow: 0 14px 22px rgba(194, 24, 139, 0.5);
  color: var(--nb-texto);
  text-decoration: none;
}

/* Link secundário ao lado do botão ("Ver cursos") */
.nb-ativo .nb-link {
  color: var(--nb-texto);
  font-family: var(--nb-fonte);
  font-weight: 700;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
}


/* "Ver cursos": no design mobile e so texto, sem sublinhado */
.nb-ativo .nb-hero .nb-link {
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   HERO
   Coluna unica e centrada. A figura usa unidades de container (cqw) para
   que foto, selo, placa e percentual encolham juntos em telas de 360 a
   430px; os valores sao px_do_design / 390 * 100.
   --------------------------------------------------------------------- */
.nb-ativo .nb-hero {
  /* o bloco anterior da home e um .col-xs-12 flutuante; sem clear, o hero
     (overflow:hidden = BFC) e empurrado para o lado e fica com largura 0 */
  clear: both;
  position: relative;
  overflow: hidden;
  padding: 36px 0 217px;
  background-color: var(--nb-fundo);
  background-image: radial-gradient(
    75% 36% at 72% 52%,
    var(--nb-brilho) 0%,
    rgba(122, 31, 162, 0) 70%
  );
  color: var(--nb-texto);
  text-align: center;
}

/* o site tem *{font-family:"open sans"}: o seletor universal vence heranca */
.nb-ativo .nb-hero,
.nb-ativo .nb-hero * {
  font-family: var(--nb-fonte);
  box-sizing: border-box;
}

.nb-ativo .nb-hero h1 {
  text-transform: none;
  text-shadow: none;
}

.nb-ativo .nb-hero p {
  text-shadow: none;
}

/* --- figura ------------------------------------------------------ */
.nb-ativo .nb-hero__figura {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  aspect-ratio: 390 / 440;
  container-type: inline-size;
}

.nb-ativo .nb-hero__foto {
  position: absolute;
  left: 11.54%;
  top: 4.09%;
  width: 72.31%;
  height: auto;
}

.nb-ativo .nb-hero__selo {
  position: absolute;
  left: 0.3%;
  top: 7.5%;
  width: 33.7%;
  height: auto;
}

.nb-ativo .nb-hero__tag {
  position: absolute;
  left: 10.26%;
  top: 63.6%;
  width: 76.92%;
  height: 29.55%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1% 2% 2%;
  border: 3px solid #000;
  border-radius: 14px;
  border-radius: 3.6cqw;
  background: var(--nb-magenta);
  box-shadow: var(--nb-sombra-tag);
  transform: rotate(-4deg);
}

.nb-ativo .nb-hero__tag-novembro {
  color: var(--nb-amarelo);
  font-size: 36px;
  font-size: 9.3cqw;
  font-weight: 900;
  letter-spacing: 0.15em;
  line-height: 1;
  text-indent: 0.14em;
  -webkit-text-stroke: 5px #000;
  paint-order: stroke fill;
}

.nb-ativo .nb-hero__tag-black {
  color: var(--nb-texto);
  font-size: 78px;
  font-size: 20cqw;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  -webkit-text-stroke: 9px #000;
  paint-order: stroke fill;
}

.nb-ativo .nb-hero__percentual {
  position: absolute;
  left: 74.36%;
  top: 45.9%;
  width: 24.62%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--nb-fundo);
  border-radius: 50%;
  background: var(--nb-amarelo);
  box-shadow: var(--nb-sombra-selo);
  color: var(--nb-fundo);
  line-height: 1;
  transform: rotate(8deg);
}

.nb-ativo .nb-hero__percentual-ate {
  font-size: 16px;
  font-size: 4.2cqw;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.nb-ativo .nb-hero__percentual-num {
  font-size: 38px;
  font-size: 9.8cqw;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.nb-ativo .nb-hero__percentual-off {
  font-size: 17px;
  font-size: 4.4cqw;
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* --- texto ------------------------------------------------------- */
.nb-ativo .nb-hero__titulo {
  max-width: 340px;
  margin: 33px auto 0;
  color: var(--nb-texto);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 35.5px;
  text-wrap: balance;
}

.nb-ativo .nb-hero__titulo .nb-hero__off {
  color: var(--nb-amarelo);
}

.nb-ativo .nb-hero__sub {
  max-width: 290px;
  margin: 30px auto 0;
  color: var(--nb-texto-suave);
  font-size: 16px;
  font-weight: 400;
  line-height: 25.5px;
}

/* --- contador ---------------------------------------------------- */
.nb-ativo .nb-hero__timer {
  width: calc(100% - 50px);
  max-width: 340px;
  margin: 23px auto 0;
  padding: 18px 20px 19px;
  border: 1px solid var(--nb-vidro-borda);
  border-radius: var(--nb-raio-caixa);
  background: var(--nb-vidro-fundo);
  text-align: left;
}

.nb-ativo .nb-hero__timer-titulo {
  margin: 0 0 6px;
  color: var(--nb-texto);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.9px;
  line-height: 20px;
  text-transform: uppercase;
}

.nb-ativo .nb-hero__validade {
  margin: 0 0 15px;
  color: var(--nb-texto-suave);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.nb-ativo .nb-hero__validade strong {
  color: var(--nb-amarelo);
  font-weight: 700;
}

.nb-ativo .nb-hero__blocos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}

.nb-ativo .nb-hero__bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 63px;
  border-radius: var(--nb-raio-bloco);
  background: var(--nb-bloco);
}

.nb-ativo .nb-hero__num {
  color: var(--nb-texto);
  font-size: 24px;
  font-weight: 800;
  line-height: 26px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.nb-ativo .nb-hero__unid {
  color: var(--nb-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 13px;
  text-transform: uppercase;
}

/* --- botoes ------------------------------------------------------ */
.nb-ativo .nb-hero__acoes {
  display: flex;
  align-items: center;
  gap: 30px;
  width: calc(100% - 50px);
  max-width: 340px;
  margin: 45px auto 0;
}

.nb-ativo .nb-hero__acoes .nb-botao {
  min-width: 192px;
  height: 62px;
  padding: 0 28px;
  justify-content: center;
  font-size: 19px;
}

/* --- faixas rolantes (cruzadas, no pe do hero) ------------------- */
.nb-ativo .nb-faixas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  pointer-events: none;
}

.nb-ativo .nb-faixa {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 32px;
  height: 50px;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: var(--nb-sombra-faixa);
}

.nb-ativo .nb-faixa--amarela {
  background: var(--nb-amarelo);
  color: var(--nb-fundo);
  transform: rotate(-5deg);
}

.nb-ativo .nb-faixa--magenta {
  background: var(--nb-magenta);
  color: var(--nb-texto);
  transform: rotate(5deg);
}

/* no design so a faixa magenta leva texto; a amarela aparece apenas nas pontas */
.nb-ativo .nb-faixa--amarela .nb-faixa__trilho {
  visibility: hidden;
}

.nb-ativo .nb-faixa__trilho {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: nb-desliza 38s linear infinite;
}

.nb-ativo .nb-faixa--magenta .nb-faixa__trilho {
  animation-duration: 44s;
  animation-direction: reverse;
}

.nb-ativo .nb-faixa__item {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1px;
}

.nb-ativo .nb-faixa__item::after {
  content: "";
  width: 9px;
  height: 9px;
  margin: 0 26px;
  background: currentColor;
  transform: rotate(45deg);
}

@keyframes nb-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .nb-ativo .nb-faixa__trilho { animation: none; }
  .nb-ativo .nb-botao { transition: none; }
}

/* =====================================================================
   CARDS DE CURSO (home /m)

   O card em si não muda: só ganha a aba "Novembro Black" no topo e o
   selo de desconto sobre a imagem. Tudo com position absolute sobre o
   .course-card que já existe, para não tocar no layout do card.

   O courses.php tem um bloco antigo de Black Friday (.black-november /
   .bf-offer) preso a ?black_friday_layout. Fica como esta: e codigo de
   outra campanha, com outras cores.
   ===================================================================== */

.nb-ativo .nb-card {
  position: relative;
  /* a aba sobe para fora do card; sem isto ela seria recortada */
  overflow: visible;
}

/* --- aba "Novembro Black", encaixada no topo do card ---

   Medido no render do Figma (nó 3:2226, card de 272x391):
   a aba tem 107x23, o ícone começa a 14px da esquerda e tem ~7px de
   largura, o texto vai de 28 a 88 (61px) e sobram 18px à direita.
   Daí o recuo de 13px, o vão de 6px e a fonte de 9px -- 13+8+6+61+18
   fecha os 107. */
.nb-ativo .nb-card__tag {
  position: absolute;
  top: -23px;
  left: 0;
  /* A aba desce 17px a mais do que aparenta -- exatamente o raio do card --
     e fica ATRAS da foto e do corpo do card. O trecho extra some sob eles,
     menos onde o card nao pinta: a borda de 2px e o entalhe que o canto
     arredondado deixa. Ali aparece o roxo, como no desenho (amostrei o
     render do Figma: em (0,23) a cor e #3a0d4e, o roxo da aba).

     O z-index e 0, nao -1. Com -1 a aba iria para a camada negativa da
     RAIZ -- nenhum ancestral aqui cria contexto de empilhamento -- e essa
     camada e pintada antes do fundo dos blocos, entao o #fcfcfc do
     section.main_content cobria a aba inteira. Em vez de rebaixar a aba,
     elevamos o conteudo do card (regra logo abaixo). */
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 40px;
  padding: 0 18px 17px 13px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #3a0d4e 0%, #861eb4 100%);
  color: var(--nb-texto);
  font-family: var(--nb-fonte);
  /* 7.8px calibrado: a 9px o texto media 70.2px e o desenho pede 61px.
     13 (recuo) + 8 (icone) + 6 (vao) + 61 (texto) + 18 = os 107 do Figma. */
  font-size: 7.8px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* O site tem *{font-family:"open sans"} -- seletor universal, que atinge
   o <span> direto e por isso vence a fonte herdada da aba. Sem reafirmar
   aqui, o texto sai em Open Sans e fica mais largo que o do desenho. */
.nb-ativo .nb-card__tag span,
.nb-ativo .nb-card__off {
  font-family: var(--nb-fonte);
  /* o mesmo seletor universal tambem impoe font-weight:300, que nem e
     baixado (a URL do Google Fonts pede 400/700/800/900) -- o navegador
     entao sintetiza um peso fino e o texto sai mais largo e mais claro */
  font-weight: 700;
}

.nb-ativo .nb-card__tag svg {
  width: 8px;
  height: 10px;
  flex-shrink: 0;
}

/* O conteudo do card (foto e corpo) sobe acima da aba, para esconder o
   trecho extra dela. Fica de fora a propria aba e o selo de desconto. */
.nb-ativo .nb-card > *:not(.nb-card__tag):not(.nb-card__off) {
  position: relative;
  z-index: 1;
}

/* --- selo de desconto, encostado na borda direita da imagem --- */
.nb-ativo .nb-card__off {
  position: absolute;
  top: 16px;
  right: 0;
  z-index: 2;
  padding: 6px 11px;
  border-radius: 10px 0 0 10px;
  background: linear-gradient(90deg, #ef8d03 5%, #c95502 100%);
  color: var(--nb-texto);
  font-family: var(--nb-fonte);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

/* =====================================================================
   BARRA DE ANUNCIO E LISTAGEM DE CURSOS (/m)

   Mesma barra do desktop (nao ha design mobile; segue o padrao dele), em
   Nunito, que ja esta carregada aqui. A listagem mobile usa card
   horizontal (miniatura a esquerda): a aba continua sobre o topo do card,
   igual aos demais cards, e o selo de % vai no canto da miniatura em vez
   da borda direita do card, onde ficaria em cima da seta do titulo.
   ===================================================================== */
.nb-ativo .nb-barra {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 14px;
  background: #0f0c14;
  text-align: center;
}

.nb-ativo .nb-barra__texto,
.nb-ativo .nb-barra__texto * {
  font-family: var(--nb-fonte);
}

.nb-ativo .nb-barra__texto {
  margin: 0;
  color: var(--nb-texto);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.45;
}

.nb-ativo .nb-barra__marca,
.nb-ativo .nb-barra__texto strong {
  color: var(--nb-amarelo);
}

/* a aba precisa de ~23px acima do card; o wrapper original so tem 20 */
.nb-ativo .nb-lst {
  margin-top: 34px !important;
}

.nb-ativo .nb-lst .course-image-container {
  position: relative;
}

.nb-ativo .nb-lst__off {
  position: absolute;
  top: 8px;
  right: 0;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(90deg, #ef8d03 5%, #c95502 100%);
  color: var(--nb-texto);
  font-family: var(--nb-fonte);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

/* =====================================================================
   DETALHE DO CURSO (/m) -- hero

   Medidas do export m-detalhes-curso (frame de 360px, 2x). Fonte Poppins,
   a do design mobile. Tudo escopado em .nb-ativo; o hero original fica no
   else do PHP e volta sozinho quando a campanha acaba.
   ===================================================================== */
.nb-ativo .nb-det {
  clear: both;
  padding: 32px 8px 100px;
  background: #fbf4ff;
}

/* o site tem *{font-family:"open sans"}: seletor universal vence heranca */
.nb-ativo .nb-det,
.nb-ativo .nb-det * {
  font-family: 'Poppins', var(--nb-fonte);
  box-sizing: border-box;
}

.nb-ativo .nb-det__card {
  padding: 15px 15px 28px;
  border: 1px solid #e8d6f1;
  border-radius: 16px;
  background: #f3e6f8;
}

/* --- foto e selo --- */
.nb-ativo .nb-det__midia {
  position: relative;
  aspect-ratio: 314 / 235;
  overflow: hidden;
  border-radius: 12px;
  background: #e6d2ef;
}

.nb-ativo .nb-det__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nb-ativo .nb-det__selo {
  position: absolute;
  top: 9px;
  left: 11px;
  max-width: calc(100% - 22px);
  padding: 0 12px;
  border: 1.5px solid #bc54d5;
  border-radius: 999px;
  background: #0f0c14;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 21px;
  white-space: nowrap;
}

.nb-ativo .nb-det__selo strong {
  color: var(--nb-amarelo);
  font-weight: 700;
}

/* --- chips de horas e nota --- */
.nb-ativo .nb-det__chips {
  display: grid;
  grid-template-columns: 185fr 118fr;
  gap: 11px;
  margin-top: 16px;
}

.nb-ativo .nb-det__chip:only-child {
  grid-column: 1 / -1;
}

.nb-ativo .nb-det__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: #fff;
  color: #2a0f36;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.nb-ativo .nb-det__chip img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* --- selo do MEC --- */
.nb-ativo .nb-det__mec {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 57px;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #e6d2ef;
  color: #2a0f36;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.nb-ativo .nb-det__mec img {
  flex: 0 0 auto;
  height: 18px;
  width: auto;
}

/* --- texto --- */
.nb-ativo .nb-det__eyebrow {
  margin: 13px 0 0;
  color: #6e5a78;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.nb-ativo .nb-det__titulo {
  margin: 4px 0 0;
  color: #2a0f36;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 33px;
  text-transform: none;
  text-shadow: none;
}

.nb-ativo .nb-det__desc,
.nb-ativo .nb-det__desc * {
  color: #4a3654;
  font-size: 14px;
  font-weight: 400;
  line-height: 21.3px;
  text-align: left;
}

.nb-ativo .nb-det__desc {
  margin-top: 6px;
}

.nb-ativo .nb-det__desc p {
  margin: 0 0 10px;
}

/* --- cartao de beneficios --- */
.nb-ativo .nb-det__beneficios {
  margin-top: 24px;
  padding: 23px 22px 22px;
  border-radius: 16px;
  background: #fff;
}

.nb-ativo .nb-det__beneficios-titulo {
  width: 148px;
  height: 37px;
  margin: 0 auto;
  border-radius: 8px;
  background: #6a1c82;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 37px;
  text-align: center;
}

.nb-ativo .nb-det__beneficios ul {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.nb-ativo .nb-det__beneficios li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  color: #2a0f36;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.nb-ativo .nb-det__beneficios li img {
  display: none;
}

/* o design usa circulo verde com check branco, nao o selo lima do desktop */
.nb-ativo .nb-det__beneficios li::before {
  content: "\2713";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2f8f3c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.nb-ativo .nb-det__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 51px;
  margin-top: 16px;
  border-radius: 8px;
  background: #2f8f3c;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
}

.nb-ativo .nb-det__cta:hover,
.nb-ativo .nb-det__cta:focus {
  background: #277a33;
  color: #fff;
  text-decoration: none;
}

.nb-ativo .nb-det__oferta {
  /* block + line-height, nao flex: num container flex o espaco solto entre
     "BLACK" e o <strong> e descartado e sai "BLACK15% OFF" */
  display: block;
  height: 41px;
  margin-top: 9px;
  border: 1px solid #bc54d5;
  border-radius: 10px;
  background: #0f0c14;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 39px;
  text-align: center;
  letter-spacing: 0.2px;
}

.nb-ativo .nb-det__validade {
  margin: 12px 0 0;
  color: #6e5a78;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
}

/* --- publico alvo / modalidade --- */
.nb-ativo .nb-det__publico {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e0cbea;
}

.nb-ativo .nb-det__publico h3 {
  margin: 0;
  color: #2a0f36;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  text-transform: none;
}

.nb-ativo .nb-det__publico p {
  margin: 6px 0 22px;
  color: #55405f;
  font-size: 13px;
  font-weight: 400;
  line-height: 21.5px;
}

.nb-ativo .nb-det__publico p:last-child {
  margin-bottom: 0;
}

.nb-ativo .nb-det__estrela {
  color: var(--nb-amarelo);
}

/* =====================================================================
   DETALHE DO CURSO (/m) -- "Escolha como deseja se inscrever"

   O Plano VIP vem ANTES do curso individual, como no design. Medidas do
   export m-detalhes-curso (360px). Paleta e raios iguais aos do desktop.
   ===================================================================== */
.nb-ativo .nb-esc {
  clear: both;
  padding: 44px 0 90px;
  background: #f1e4f8;
}

.nb-ativo .nb-esc,
.nb-ativo .nb-esc * {
  font-family: 'Poppins', var(--nb-fonte);
  box-sizing: border-box;
}

.nb-ativo .nb-esc__topo {
  text-align: center;
}

.nb-ativo .nb-esc__selo {
  display: inline-block;
  height: 38px;
  padding: 0 24px;
  border: 1px solid #bc54d5;
  border-radius: 999px;
  background: #0f0c14;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 36px;
}

.nb-ativo .nb-esc__estrela {
  color: var(--nb-amarelo);
}

.nb-ativo .nb-esc__titulo {
  margin: 14px 0 0;
  padding: 0 20px;
  color: #2a0f36;
  font-size: 26.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 32px;
  text-align: center;
  text-transform: none;
}

.nb-ativo .nb-esc__sub {
  margin: 13px 0 0;
  padding: 0 20px;
  color: #4a3654;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.nb-ativo .nb-esc__sub strong {
  color: #6a1c82;
  font-weight: 700;
}

/* --- Plano VIP --- */
.nb-ativo .nb-esc__vip {
  position: relative;
  margin: 43px 20px 0;
  padding: 36px 22px 34px;
  border: 1px solid var(--nb-amarelo);
  border-radius: 16px;
  background:
    url("../images/plano-vip-nb-ecg.png") no-repeat right 0 bottom 115px / 86% auto,
    linear-gradient(196deg, #952bad 0%, #4d1360 100%);
  box-shadow: 0 24px 40px rgba(149, 43, 173, .35);
  color: #fff;
}

.nb-ativo .nb-esc__tab {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 24px;
  border-radius: 999px;
  background: var(--nb-amarelo);
  color: #17121d;
  font-size: 13px;
  font-weight: 700;
  line-height: 33px;
  white-space: nowrap;
}

.nb-ativo .nb-esc__tab .nb-esc__estrela {
  color: #17121d;
}

.nb-ativo .nb-esc__nome {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  text-transform: none;
}

.nb-ativo .nb-esc__traco {
  display: block;
  width: 50px;
  height: 2px;
  margin-top: 6px;
  background: #d14ae8;
}

.nb-ativo .nb-esc__traco--amarelo {
  background: var(--nb-amarelo);
}

.nb-ativo .nb-esc__chamada {
  max-width: 290px;
  margin: 14px 0 0;
  color: var(--nb-amarelo);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 38px;
}

.nb-ativo .nb-esc__texto {
  margin: 12px 0 0;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.nb-ativo .nb-esc__texto--suave {
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
}

.nb-ativo .nb-esc__beneficios {
  margin: 22px 0 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

/* --- listas com bolinha de check --- */
.nb-ativo .nb-esc__lista {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.nb-ativo .nb-esc__lista li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.nb-ativo .nb-esc__lista li::before {
  content: "\2713";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nb-amarelo);
  color: #17121d;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* --- precos --- */
.nb-ativo .nb-esc__precos {
  margin-top: 44px;
}

.nb-ativo .nb-esc__de,
.nb-ativo .nb-esc__chamada-preco {
  margin: 0;
  color: #e6d9f2;
  font-size: 13px;
  line-height: 20px;
}

.nb-ativo .nb-esc__chamada-preco {
  color: #fff;
  font-size: 14px;
}

.nb-ativo .nb-esc__de s {
  color: #ffb3b3;
  text-decoration-color: #ffb3b3;
}

.nb-ativo .nb-esc__linha {
  display: flex;
  flex-wrap: wrap;   /* preco de 3 digitos (ex. 109,80) leva o selo para a linha de baixo */
  align-items: flex-end;
  gap: 0 14px;
}

.nb-ativo .nb-esc__preco {
  color: #fff;
  font-size: 52px;
  font-weight: 700;
  line-height: 56px;
  white-space: nowrap;
}

.nb-ativo .nb-esc__preco small {
  margin-right: 4px;
  font-size: 20px;
  font-weight: 700;
}

.nb-ativo .nb-esc__off {
  margin-bottom: 10px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--nb-amarelo);
  color: #17121d;
  font-size: 12px;
  font-weight: 700;
  line-height: 26px;
  white-space: nowrap;
}

.nb-ativo .nb-esc__parcelas {
  margin: 8px 0 17px;
  color: #e6d9f2;
  font-size: 13px;
  line-height: 20px;
}

/* --- botoes --- */
.nb-ativo .nb-esc a {
  display: block;
  text-decoration: none;
}

.nb-ativo .nb-esc__botao {
  display: block;
  width: 100%;
  height: 59px;
  border: 0;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.nb-ativo .nb-esc__botao--amarelo {
  background: var(--nb-amarelo);
  box-shadow: 0 10px 24px rgba(255, 194, 26, .28);
  color: #17121d;
}

.nb-ativo .nb-esc__botao--verde {
  height: 51px;
  background: #2f8f3c;
  color: #fff;
}

/* --- curso individual --- */
.nb-ativo .nb-esc__curso {
  margin: 48px 15px 0;
  padding: 38px 22px 28px;
  border: 1px solid #d14ae8;
  border-radius: 16px;
  background: linear-gradient(180deg, #17121d 0%, #211727 100%);
  color: #fff;
}

.nb-ativo .nb-esc__pre {
  margin: 0 0 4px;
  color: #bdb6c4;
  font-size: 14px;
  line-height: 20px;
}

.nb-ativo .nb-esc__lista--curso {
  margin-top: 16px;
}

.nb-ativo .nb-esc__lista--curso li {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 19px;
}

.nb-ativo .nb-esc__lista--curso li::before {
  background: #d14ae8;
  color: #fff;
}

.nb-ativo .nb-esc__curso .nb-esc__precos {
  margin-top: 14px;
}

.nb-ativo .nb-esc__curso .nb-esc__de {
  color: #bdb6c4;
}

.nb-ativo .nb-esc__curso .nb-esc__de s {
  color: #ff8a8a;
  text-decoration-color: #ff8a8a;
}

.nb-ativo .nb-esc__curso .nb-esc__parcelas {
  color: #bdb6c4;
  font-size: 14px;
}

.nb-ativo .nb-esc__nota {
  margin: 40px 0 0;
  padding: 0 22px;
  color: #6e5a78;
  font-size: 12.5px;
  line-height: 20px;
  text-align: center;
}