/* =====================================================================
   NOVEMBRO BLACK 2026 — base da campanha

   Fase 1: tokens e primitivas. Os componentes (hero, contador, faixa
   rolante, cards) entram nas fases seguintes, sempre neste arquivo.

   Valores extraídos do Figma TFXgUGsKmgkzQpUWkgRzAT, frame "Hero (NOVO)"
   (nó 2:16) — não são aproximações.

   ---------------------------------------------------------------------
   TUDO AQUI É ESCOPADO POR .nb-ativo NO <body>.

   É proposital, e é a segunda trava da reversão automática: mesmo que
   este arquivo fosse carregado por engano depois de 30/11, nenhuma regra
   se aplicaria, porque a classe não estaria no body. A primeira trava é
   o header não incluir o arquivo. Uma falha não basta para quebrar o
   layout normal.

   Nunca escrever seletor fora de .nb-ativo neste arquivo.
   ===================================================================== */

/* A Nunito é carregada no header, dentro do mesmo if da campanha, para
   baixar em paralelo com este arquivo em vez de depois dele. */

.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:         #2c2431;  /* 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;
}

/* Selo de percentual — usado no hero e nos cards */
.nb-ativo .nb-selo {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--nb-raio-pilula);
  background: var(--nb-amarelo);
  color: var(--nb-fundo);
  font-family: var(--nb-fonte);
  font-weight: 900;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}

/* Tag "Novembro Black" dos cards de curso */
.nb-ativo .nb-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--nb-raio-pilula);
  background: var(--nb-magenta);
  color: var(--nb-texto);
  font-family: var(--nb-fonte);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Acessibilidade

   A faixa rolante e as animações da campanha respeitam quem pediu menos
   movimento no sistema. Sem isto, a marquee gira sem parar para quem tem
   sensibilidade vestibular.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Limitado aos elementos DA CAMPANHA de proposito. Com `.nb-ativo *` a
     regra alcancaria a pagina inteira e congelaria o carrossel e os demais
     efeitos do site enquanto a campanha estivesse no ar -- um efeito
     colateral fora do escopo desta mudanca. */
  .nb-ativo .nb-hero *,
  .nb-ativo .nb-hero *::before,
  .nb-ativo .nb-hero *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================================
   HERO (fase 2) — desktop

   Geometria tirada do frame "Hero (NOVO)" (nó 2:16), que tem 1440px de
   largura e um container de 1280px. Como o site usa container de 1170px,
   a coluna de texto é fluida (clamp) e a figura usa unidades de container
   (cqw), de modo que foto, tag e selo encolhem juntos sem quebrar as
   proporções. Onde há cqw vem antes o valor em px, que é o que navegador
   antigo enxerga.
   ===================================================================== */

.nb-ativo .nb-hero {
  position: relative;
  overflow: hidden;            /* as faixas rolantes passam da borda */
  background-color: var(--nb-fundo);
  font-family: var(--nb-fonte);
  /* o brilho roxo atrás da foto, no canto direito */
  background-image: radial-gradient(
    110% 92% at 72% 42%,
    var(--nb-brilho) 0%,
    rgba(122, 31, 162, 0) 70%
  );
  padding: 84px 0 150px;
}

/* O site declara h1{font-family:roboto;text-transform:uppercase} e regras
   parecidas direto no elemento. Herdar a fonte do .nb-hero nao basta: regra
   no elemento vence heranca, por mais especifico que seja o ancestral. Por
   isso a fonte e reafirmada nos descendentes. */
.nb-ativo .nb-hero,
.nb-ativo .nb-hero h1,
.nb-ativo .nb-hero p,
.nb-ativo .nb-hero a,
.nb-ativo .nb-hero span,
.nb-ativo .nb-hero strong {
  font-family: var(--nb-fonte);
}

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

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

.nb-ativo .nb-hero__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* ---------------------------------------------------------------------
   Coluna de texto
   --------------------------------------------------------------------- */
.nb-ativo .nb-hero__texto {
  /* O Figma divide 1280 em 560 (texto) + 60 (gap) + 660 (figura). O
     .container do site tem 1140 uteis, entao a mesma proporcao vira
     505 + 40 + 595 -- a figura continua maior que o texto, como no
     desenho, e a maior linha do titulo ("com certificado", ~470px)
     ainda cabe. */
  flex: 1 1 505px;
  max-width: 505px;
  min-width: 0;
}

/* --- caixa do contador --- */
.nb-ativo .nb-hero__timer {
  box-sizing: border-box;
  max-width: 420px;
  padding: 14px 20px 10px;
  border: 1px solid var(--nb-vidro-borda);
  border-radius: var(--nb-raio-caixa);
  background: var(--nb-vidro-fundo);
}

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

.nb-ativo .nb-hero__blocos {
  display: flex;
  gap: 15px;
}

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

.nb-ativo .nb-hero__num {
  color: var(--nb-texto);
  font-size: 25px;
  font-weight: 900;
  line-height: 28px;
  /* tabular evita o número "pular" de largura a cada segundo */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

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

.nb-ativo .nb-hero__validade {
  margin: 8px 0 0;
  color: var(--nb-texto-suave);
  font-size: 9px;
  font-weight: 400;
}

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

/* --- título --- */
.nb-ativo .nb-hero__titulo {
  margin: 29px 0 0;
  color: var(--nb-texto);
  font-size: 64px;
  font-size: clamp(40px, 4.45vw, 64px);
  font-weight: 900;
  letter-spacing: -1.28px;
  line-height: 1.04;
}

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

.nb-ativo .nb-hero__sub {
  /* A primeira linha pede ~520px e a coluna tem 505. max-content deixa o
     paragrafo usar os poucos pixels do gap e manter as duas linhas do
     desenho, em vez de quebrar "pelo MEC." para uma terceira. */
  width: max-content;
  max-width: 540px;
  margin: 24px 0 0;
  color: var(--nb-texto-suave);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.nb-ativo .nb-hero__acoes {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 25px;
}

.nb-ativo .nb-hero__acoes .nb-botao {
  min-width: 193px;
  height: 62px;
  justify-content: center;
}

/* ---------------------------------------------------------------------
   Figura: foto, selo, tag e selo de percentual

   container-type liga as unidades cqw: 100cqw = a largura desta caixa.
   Assim o "BLACK" de 104,9px do Figma continua proporcional quando a
   figura encolhe.
   --------------------------------------------------------------------- */
.nb-ativo .nb-hero__figura {
  position: relative;
  /* 505 do texto + 40 do gap + 595 daqui = 1140, a
     largura util do .container. No Figma a figura tem 660 em 1280;
     como tudo aqui dentro e medido em cqw, encolher a caixa encolhe foto,
     tag e selo juntos, sem desalinhar nada. */
  flex: 0 1 595px;
  width: 595px;
  max-width: 54%;
  aspect-ratio: 660 / 607;
  container-type: inline-size;
}

.nb-ativo .nb-hero__foto {
  position: absolute;
  left: 13.18%;
  top: -6.92%;
  width: 80.3%;
  height: auto;
}

.nb-ativo .nb-hero__selo {
  position: absolute;
  left: 9.09%;
  top: 6.75%;
  width: 26.52%;
  height: auto;
}

/* --- tag "NOVEMBRO BLACK" --- */
.nb-ativo .nb-hero__tag {
  position: absolute;
  left: 22.42%;
  top: 73.62%;
  width: 65.38%;
  height: 33.75%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2% 3% 3%;
  border: 2px solid #000;
  border: 0.303cqw solid #000;
  border-radius: 17px;
  border-radius: 2.576cqw;
  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: 48.8px;
  font-size: 7.394cqw;
  font-weight: 900;
  letter-spacing: 6.838px;
  letter-spacing: 1.036cqw;
  line-height: 1;
  /* a letra-espaçada deixa um vão à direita; compensa para centralizar */
  text-indent: 1.036cqw;
}

.nb-ativo .nb-hero__tag-black {
  color: var(--nb-texto);
  font-size: 104.9px;
  font-size: 15.894cqw;
  font-weight: 900;
  letter-spacing: -2.178px;
  letter-spacing: -0.33cqw;
  line-height: 1;
}

/* --- selo redondo "ATÉ 32% OFF" --- */
.nb-ativo .nb-hero__percentual {
  position: absolute;
  left: 77.27%;
  top: 63.08%;
  width: 22.72%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 4px solid var(--nb-fundo);
  border: 0.606cqw solid var(--nb-fundo);
  border-radius: 50%;
  background: var(--nb-amarelo);
  box-shadow: var(--nb-sombra-selo);
  color: var(--nb-fundo);
  transform: rotate(8deg);
  line-height: 1;
}

.nb-ativo .nb-hero__percentual-ate {
  font-size: 24px;
  font-size: 3.636cqw;
  font-weight: 800;
  letter-spacing: 1.109px;
  letter-spacing: 0.168cqw;
}

.nb-ativo .nb-hero__percentual-num {
  font-size: 50.7px;
  font-size: 7.682cqw;
  font-weight: 900;
  letter-spacing: -1.881px;
  letter-spacing: -0.285cqw;
}

.nb-ativo .nb-hero__percentual-off {
  font-size: 25px;
  font-size: 3.788cqw;
  font-weight: 900;
  letter-spacing: 1.98px;
  letter-spacing: 0.3cqw;
}

/* ---------------------------------------------------------------------
   Faixas rolantes

   Duas tiras cruzadas no pé do hero. Cada trilho tem a lista de itens
   duplicada e desliza -50%: ao terminar a primeira cópia, a segunda está
   exatamente na posição inicial, então a emenda não aparece.
   --------------------------------------------------------------------- */
.nb-ativo .nb-faixas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 148px;
  pointer-events: none;
}

.nb-ativo .nb-faixa {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 45px;
  height: 58px;
  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(-3deg);
}

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

.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: 0.96px;
}

/* losango separador: um quadrado girado 45° */
.nb-ativo .nb-faixa__item::after {
  content: "";
  width: 10px;
  height: 10px;
  margin: 0 32px;
  background: currentColor;
  transform: rotate(45deg);
}

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

/* ---------------------------------------------------------------------
   Telas menores

   O hero é servido só no desktop (o /m tem o próprio), mas entre 768 e
   1200px ainda precisa caber.
   --------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .nb-ativo .nb-hero { padding: 56px 0 120px; }
  .nb-ativo .nb-hero__grid { gap: 24px; }
  .nb-ativo .nb-hero__sub { font-size: 18px; line-height: 27px; }
  .nb-ativo .nb-hero__titulo { margin-top: 24px; }
}

/* =====================================================================
   CARDS DE CURSO (fase 3)

   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.

   Existe no home.php um bloco antigo de Black Friday (.black-november /
   .bf-offer), comentado e preso a ?black_friday_layout. Foi deixado como
   está: é código de outra campanha, com outras cores, e mexer nele não
   faz parte desta mudança.
   ===================================================================== */

.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;
}

/* =====================================================================
   PLANO VIP (fase 4) — barra de anúncio, selos, CTA e contador

   Medidas do frame "Plano VIP · Novembro Black" (nó 44:204, 1440px).
   Esta página usa Lato, não Nunito: é a fonte do próprio design e o
   header-eadPro já a carrega. Por isso aqui não se usa --nb-fonte.
   ===================================================================== */

.nb-ativo .nb-barra,
.nb-ativo .nb-vip-selo,
.nb-ativo .nb-vip-contador {
  /* reafirmado por causa do *{font-family:"open sans"} do site, que
     alcança cada elemento direto e venceria a herança */
  font-family: 'Lato', Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------------------
   Faixa de anúncio, acima do cabeçalho
   --------------------------------------------------------------------- */
.nb-ativo .nb-barra {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 40px;
  padding: 4px 16px;
  background: #14051b;
  text-align: center;
}

.nb-ativo .nb-barra__texto {
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.04px;
  line-height: 1.5;
}

.nb-ativo .nb-barra__marca {
  color: #ffd23f;
}

.nb-ativo .nb-barra__link {
  flex-shrink: 0;
  padding: 3px 16px;
  border: 1px solid #ffd23f;
  border-radius: 14px;
  color: #ffd23f;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.nb-ativo .nb-barra__link:hover,
.nb-ativo .nb-barra__link:focus {
  background: #ffd23f;
  color: #14051b;
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   Selos acima do título
   --------------------------------------------------------------------- */
.nb-ativo .nb-vip-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

/* inline-block, nao inline-flex: num container flex o texto solto e o
   <b> viram itens separados e o ESPACO entre eles e descartado -- o selo
   saia escrito "NOVEMBROBLACK". Com inline-block o espaco volta, e o
   line-height centraliza na vertical sem precisar de flex. */
.nb-ativo .nb-vip-selo {
  display: inline-block;
  height: 32px;
  padding: 0 18px;
  border-radius: 16px;
  font-weight: 900;
  line-height: 32px;
  white-space: nowrap;
}

.nb-ativo .nb-vip-selo--marca {
  background: linear-gradient(90deg, #14051b 0%, #601881 100%);
  color: #fff;
  font-size: 12px;
  letter-spacing: 1.44px;
}

.nb-ativo .nb-vip-selo--marca b {
  color: #ffd23f;
  font-weight: 900;
}

.nb-ativo .nb-vip-selo--oferta {
  background: linear-gradient(90deg, #ffda61 0%, #ebc136 100%);
  color: #14051b;
  font-size: 13px;
  letter-spacing: 0.78px;
}

/* ---------------------------------------------------------------------
   Botão principal — o texto da campanha é bem mais longo que
   "Conhecer o Plano VIP", por isso a largura mínima
   --------------------------------------------------------------------- */
.nb-ativo .vip-button.nb-vip-cta {
  min-width: 360px;
  height: 56px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #a93bcb 0%, #541d65 100%);
  box-shadow: 0 6px 8px rgba(169, 59, 203, 0.35);
  color: #fff;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 900;
}

/* ---------------------------------------------------------------------
   Contador logo abaixo do botão
   --------------------------------------------------------------------- */
.nb-ativo .nb-vip-contador {
  margin: 16px 0 0;
  color: #4a1a5c;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.nb-ativo .nb-vip-contador time {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  /* largura fixa por dígito: sem isto a linha "pula" a cada segundo */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

@media (max-width: 767px) {
  .nb-ativo .nb-barra {
    flex-direction: column;
    gap: 8px;
    padding: 8px 16px;
  }
  .nb-ativo .nb-barra__texto { font-size: 12px; letter-spacing: 0.6px; }
  .nb-ativo .vip-button.nb-vip-cta { min-width: 0; width: 100%; }
}

/* ---------------------------------------------------------------------
   Hero do Plano VIP — ajustes de layout da campanha

   O desenho refaz o hero, não só acrescenta enfeites: fundo liso no lugar
   do quadriculado, foto nova e menor, título menor, subtítulo sem negrito.
   Medidas do nó 44:215 (frame de 1440): conteúdo entre x=170 e x=1270,
   foto 502x539, título 44/52, subtítulo 16/24.

   Tudo escopado em .nb-ativo: fora da campanha o hero volta intacto.
   --------------------------------------------------------------------- */

/* fundo liso; o quadriculado (bg-main.svg) sai de cena */
.nb-ativo .main-bg-img {
  display: none;
}

.nb-ativo .main-section,
.nb-ativo .main {
  background: linear-gradient(180deg, #fce6f5 0%, #f9c8ea 100%);
}

/* O site usa .main-section{padding:80px 350px} e centraliza os filhos
   (flex em coluna com align-items:center). Em vez de cravar uma margem
   de 170px -- que vira rolagem horizontal abaixo de 1440 e desalinha o
   hero da fileira de topicos --, aqui vale um container de largura
   maxima: os dois filhos ficam com a MESMA largura e o proprio
   align-items os alinha em qualquer viewport. Em 1440 a conta da
   exatamente os 170px do desenho: (1440 - 1100) / 2. */
@media (min-width: 1200px) {
  .nb-ativo .main-section {
    padding-left: 40px;
    padding-right: 40px;
  }

  .nb-ativo .main-content,
  .nb-ativo .main-section .topics {
    width: 100%;
    max-width: 1100px;
  }
}

/* O desenho separa texto e foto por 106px, nao pelos 50 do site:
   texto 170..690, foto 796..1298 (ela avanca 28px sobre a margem
   direita, de proposito). */
/* O bloco continua CENTRADO pelo pai, como no site. Cheguei a forcar
   alinhamento a esquerda para cravar os 170px do desenho em 1440px, e isso
   colava o hero na borda esquerda em telas mais largas. A diferenca de
   centrar e de 14px em 1440 -- imperceptivel, e o certo em qualquer largura. */
/* space-between no lugar de um gap fixo: o texto encosta na margem
   esquerda e a foto na direita, qualquer que seja a largura. */
.nb-ativo .main-content {
  gap: 40px;
  justify-content: space-between;
}

/* .main-content e flex; sem travar o encolhimento, a coluna da foto cede
   espaco para o texto e a imagem sai esmagada na vertical. */
.nb-ativo .main-banner {
  flex: 0 0 502px;
  width: 502px;
}

.nb-ativo .main-text {
  flex: 0 1 520px;
  min-width: 0;
}

.nb-ativo .main-text > h1 {
  width: 520px;
  max-width: 100%;
  font-size: 44px;
  line-height: 52px;
}

/* o desenho usa peso normal na frase inteira, inclusive no <span>
   que o site deixa em 700 */
.nb-ativo .main-text > p:not(.nb-vip-contador),
.nb-ativo .main-text > p:not(.nb-vip-contador) > span {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

/* A regra do site e .main-banner img {width:624.78px}. Aqui a arte e
   outra e tem as medidas do desenho; sem fixar, o width:100% faria a
   imagem e o container colapsarem um sobre o outro. */
.nb-ativo .nb-vip-foto {
  display: block;
  width: 502px;
  height: 539px;
  max-width: 100%;
}

/* As tags flutuantes sao posicionadas em cima do .main-banner, com
   coordenadas calibradas para a arte antiga (624x580). Com a foto nova
   (502x539) elas precisam das posicoes do desenho, medidas em relacao
   ao canto superior esquerdo da foto. */
.nb-ativo .tag#tag-1 { top: 286px; left: -9px; }    /* Valorização curricular */
.nb-ativo .tag#tag-2 { top: 254px; left: 348px; }   /* Extensão universitária */
.nb-ativo .tag#tag-3 { top: 415px; left: -39px; }   /* Horas complementares */
.nb-ativo .tag#tag-4 { top: 416px; left: 360px; }   /* Progressão funcional */

/* ---------------------------------------------------------------------
   Seção "Mas para quem é o Plano VIP?"

   No site a foto é um background-image que sangra até a borda direita.
   O desenho usa outra arte — enfermeira com prancheta dentro da moldura
   roxa — contida em 537x516, sobre fundo lilás liso.

   Posição: no frame de 1440 a imagem fica em x=801, ou seja, 350px à
   direita do centro (1440/2 = 720; 720 + 350 = 1070 = centro da imagem).
   Por isso o calc(50% + 350px): acompanha o centro em qualquer largura,
   em vez de grudar numa das bordas.
   --------------------------------------------------------------------- */
.nb-ativo .public-vip {
  /* TODO cor a confirmar: estimada da captura do Figma. Trocar aqui se
     o valor exato do desenho for outro -- é uma linha. */
  background-color: #f4edfb;
  background-image: url("../img/plano-vip-nb-publico.webp");
  background-size: 537px auto;
  background-position: calc(50% + 350px) center;
  background-repeat: no-repeat;
  justify-content: center;
}

@media (min-width: 1200px) {
  .nb-ativo .public-vip {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* mesma caixa do hero, para o texto desta seção alinhar com o de cima */
  .nb-ativo .public-text-content {
    width: 100%;
    max-width: 1100px;
  }
}

/* No desenho as duas colunas de texto ocupam de x=170 a x=740 (570px) e a
   foto só começa em 801. O site usa itens de 306 com gap de 68, o que
   espalha o texto por toda a largura e o deixa POR BAIXO da foto. */
.nb-ativo .reasons {
  max-width: 570px;
  column-gap: 30px;
}

.nb-ativo .reasons .item {
  max-width: 270px;
}

/* o título do desenho é menor que os 40px do site (nó 44:254: 40px de
   altura de linha) */
.nb-ativo .public-text-content > h2 {
  font-size: 32px;
  line-height: 40px;
}

/* telas retina: a arte baixada do Figma é @2x */
@media (min-resolution: 1.5dppx) {
  .nb-ativo .public-vip {
    background-image: url("../img/plano-vip-nb-publico-2x.webp");
  }
}

/* =====================================================================
   "Benefícios do Plano VIP" — remodelada (nó 44:344 / card 44:345)

   O desenho inverte os lados: a oferta ocupa a esquerda e a lista de
   benefícios vira um card escuro à direita, tudo dentro de um cartão
   roxo de 1100x800 com cantos bem arredondados.

   Cores amostradas do render do Figma, não estimadas:
     card      gradiente vertical #6d1d90 -> #250a31
     título    #ffde72        destaque/CTA/selos  #ffd23f
     lista     #33113f        caixa "ANO 1"       #3a1449
   ===================================================================== */

/* 120px no topo como na .vipBenefits original: a faixa rolante anterior e
   rotacionada e, por causa do transform, invade visualmente a secao
   seguinte. Com menos espaco ela encosta no card. */
.nb-ativo .nb-benef {
  display: flex;
  justify-content: center;
  padding: 120px 40px;
  /* #f7eefb medido na captura do Figma, nas margens em volta do card.
     O site usa --light-bg (#fff9ff), bem mais claro. */
  background: #f7eefb;
}

.nb-ativo .nb-benef__card {
  position: relative;
  display: flex;
  gap: 64px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  padding: 48px 57px 56px;
  border-radius: 28px;
  background: linear-gradient(180deg, #6d1d90 0%, #250a31 100%);
  /* Sombra medida no Figma: logo abaixo da borda o fundo #f7eefb vira
     #baadc0 (alfa ~0.30) e volta ao normal ~35px depois; na lateral a
     queda e menor (~0.18), o que indica deslocamento para baixo. */
  box-shadow: 0 20px 58px rgba(44, 10, 58, 0.40);
  color: #fff;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
}

.nb-ativo .nb-benef__melhor {
  position: absolute;
  top: 36px;
  right: 40px;
  padding: 6px 18px;
  border-radius: 999px;
  background: #ffd23f;
  color: #250a31;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
}

/* ---- coluna da oferta ---- */
.nb-ativo .nb-benef__oferta {
  flex: 0 1 520px;
  min-width: 0;
}

.nb-ativo .nb-benef__titulo {
  /* O gradiente e pintado sobre a caixa, nao sobre as letras. Com os 520px
     da coluna sobravam ~130px sem texto a direita, e o trecho escuro do
     gradiente caia ali -- invisivel. No Figma o bloco tem 377px, a largura
     do texto. 400px aqui mantem a mesma quebra em duas linhas. */
  /* Valores lidos do painel do Figma: Lato Black 60/64, tracking -0.6px,
     bloco de 377x128. A largura importa alem do tamanho: o gradiente e
     pintado sobre a CAIXA, e sobra sem texto faz o trecho escuro cair
     onde nao ha letras. 377 e exatamente a largura do texto. */
  max-width: 377px;
  margin: 18px 0 0;
  color: #ffde72;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 60px;
  font-weight: 900;
  letter-spacing: -0.6px;
  line-height: 64px;
  text-transform: none;
}

/* O título tem gradiente linear #ffde72 -> #d7b030 (valores do painel Fill
   do Figma). A direção vem dos manípulos do gradiente, que descem da
   esquerda para a direita a ~24° da horizontal -> 114deg em CSS.

   Dentro do @supports de propósito: sem background-clip:text o navegador
   ignora o bloco inteiro e o título continua no #ffde72 sólido da regra
   acima. Sem essa guarda, um navegador que entendesse color:transparent
   mas não o recorte deixaria o título invisível. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nb-ativo .nb-benef__titulo {
    /* Paradas em 44%/82%, nao 0%/100%: no Figma os manipulos do gradiente
       cobrem so um trecho do bloco, e fora deles a cor trava nos extremos.
       Calibrado contra a contagem de pixels claros/escuros do PNG do Figma. */
    background-image: linear-gradient(114deg, #ffde72 44%, #d7b030 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.nb-ativo .nb-benef__sub {
  max-width: 520px;
  margin: 18px 0 0;
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
}

/* ---- as duas caixas de ano ---- */
.nb-ativo .nb-benef__anos {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.nb-ativo .nb-benef__ano {
  flex: 0 0 230px;
  box-sizing: border-box;
  min-height: 74px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: #3a1449;
}

/* a borda tracejada marca o ano que e bonus, nao contratado */
.nb-ativo .nb-benef__ano--bonus {
  border: 1px dashed #ffd23f;
  background: transparent;
}

.nb-ativo .nb-benef__ano > span {
  display: block;
  color: #ffd23f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
}

.nb-ativo .nb-benef__ano > strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.nb-ativo .nb-benef__mais {
  color: #ffd23f;
  font-size: 24px;
  font-weight: 900;
}

/* ---- preços ---- */
.nb-ativo .nb-benef__de {
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
}

.nb-ativo .nb-benef__de s {
  text-decoration: line-through;
}

.nb-ativo .nb-benef__por {
  margin: 6px 0 0;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.nb-ativo .nb-benef__linha-preco {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 2px;
}

.nb-ativo .nb-benef__preco {
  color: #fff;
  font-size: 60px;
  font-weight: 900;
  line-height: 70px;
}

.nb-ativo .nb-benef__off {
  padding: 7px 16px;
  border: 1px solid #ffd23f;
  border-radius: 999px;
  color: #ffd23f;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.nb-ativo .nb-benef__vista {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
}

/* ---- chamada ---- */
.nb-ativo .nb-benef__cta {
  /* 520x63 medido no PNG do Figma. A medicao anterior deu 90 porque o
     filtro de cor pegava tambem o brilho ao redor do botao; com deteccao
     de linha cheia (>=400px contiguos de amarelo) a altura real e 63. */
  box-sizing: border-box;
  width: 520px;
  max-width: 100%;
  min-height: 63px;
  margin-top: 26px;
  padding: 18px 24px;
  border: 0;
  border-radius: 12px;
  background: #ffd23f;
  box-shadow: 0 10px 30px rgba(255, 210, 63, 0.25);
  color: #250a31;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 19px;
  font-weight: 900;
  cursor: pointer;
}

.nb-ativo .nb-benef__cta:hover {
  background: #ffde72;
}

.nb-ativo .nb-benef__prazo {
  margin: 16px 0 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.nb-ativo .nb-benef__prazo time {
  color: #ffd23f;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.nb-ativo .nb-benef__pgto {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

/* ---- card dos benefícios ---- */
.nb-ativo .nb-benef__lista {
  flex: 0 0 403px;
  box-sizing: border-box;
  /* 104 (topo do card no desenho) - 48 (padding) = 56 */
  margin-top: 56px;
  padding: 28px;
  border: 1px solid #8a28b4;
  border-radius: 20px;
  background: #33113f;
}

.nb-ativo .nb-benef__lista h3 {
  margin: 0 0 18px;
  color: #fff;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 21px;
  font-weight: 700;
  text-transform: none;
}

.nb-ativo .nb-benef__lista ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nb-ativo .nb-benef__lista li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 20px;
}

.nb-ativo .nb-benef__lista li svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

/* o primeiro item e o da campanha: ganha fundo cheio para se destacar */
.nb-ativo .nb-benef__destaque {
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: #ffd23f;
  color: #250a31 !important;
  font-weight: 700;
}

.nb-ativo .nb-benef__destaque svg path {
  stroke: #250a31;
}

@media (max-width: 1023px) {
  .nb-ativo .nb-benef__card {
    flex-direction: column;
    padding: 32px 24px;
  }
  .nb-ativo .nb-benef__melhor { top: 20px; right: 20px; }
  .nb-ativo .nb-benef__titulo { font-size: 38px; line-height: 44px; }
  .nb-ativo .nb-benef__preco  { font-size: 42px; line-height: 50px; }
  .nb-ativo .nb-benef__anos   { flex-wrap: wrap; }
}

/* --- correções a partir da medição do render do Figma (card 1100x800) --- */

/* O $checkIcon do site é um círculo CHEIO em #42034E, que sobre o card
   #33113f fica praticamente invisível. No desenho ele aparece dourado;
   no item destacado, escuro sobre o amarelo. */
.nb-ativo .nb-benef__lista li svg path {
  fill: #ffd23f;
}

.nb-ativo .nb-benef__destaque svg path {
  fill: #14051b;
  stroke: none;
}

/* No desenho as duas linhas sob o botão ficam centradas com ele */
.nb-ativo .nb-benef__prazo,
.nb-ativo .nb-benef__pgto {
  width: 520px;
  max-width: 100%;
  text-align: center;
}

/* ---------------------------------------------------------------------
   FAQ — pergunta da campanha, em destaque e já aberta

   O site já tinha o gradiente do estado aberto no botão; aqui só se
   estende o mesmo tom ao corpo e se troca a borda do item, como no
   desenho (fundo #fbf6fd, borda #a93bcb — ambos medidos na captura).
   --------------------------------------------------------------------- */
.nb-ativo .faq .nb-faq-destaque {
  border-color: #a93bcb;
}

/* O gradiente do estado aberto do site termina num tom um pouco diferente
   do corpo, deixando uma emenda visivel entre pergunta e resposta. No
   desenho o item aberto e um bloco de cor unica. */
.nb-ativo .faq .nb-faq-destaque .accordion-button:not(.collapsed) {
  background: #fbf6fd;
}

.nb-ativo .faq .nb-faq-destaque .accordion-body {
  background: #fbf6fd;
  /* sem a linha divisória que os itens normais têm: no desenho o item
     aberto é um bloco contínuo */
  border-top-color: transparent;
}

/* =====================================================================
   PÁGINA DE DETALHES DO CURSO — hero

   Cores amostradas do render do Figma: preto #0f0c14 e amarelo #ffc21a.
   Repare que o amarelo aqui é o da HOME (#ffc21a), não o do Plano VIP
   (#ffd23f) — são paletas diferentes no mesmo arquivo de design.
   ===================================================================== */

/* --- faixa de anúncio (variante desta página) --- */
.nb-ativo .nb-barra--curso {
  gap: 0;
  background: #0f0c14;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
}

.nb-ativo .nb-barra--curso .nb-barra__texto {
  letter-spacing: 0.4px;
}

.nb-ativo .nb-barra--curso .nb-barra__marca,
.nb-ativo .nb-barra--curso .nb-barra__texto strong {
  color: #ffc21a;
}

/* --- selo sobre a mídia do curso --- */
.nb-ativo .nb-curso-midia {
  position: relative;
  display: block;
}

/* No desenho o selo ocupa ~77% da largura da foto e sobra folga a direita.
   Com 12px de fonte ele dava 220px numa foto de 223 e transbordava (recuo
   direito NEGATIVO). A 10px cabe com a mesma proporcao do desenho.
   O anel roxo tambem vem do desenho (#bc54d5 amostrado na borda). */
.nb-ativo .nb-curso-selo {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-block;
  max-width: calc(100% - 20px);
  padding: 6px 11px;
  border-radius: 999px;
  background: #0f0c14;
  box-shadow: 0 0 0 2px #bc54d5;
  color: #fff;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.nb-ativo .nb-curso-selo strong {
  color: #ffc21a;
  font-weight: 900;
}

/* --- selo da oferta, abaixo da chamada --- */
.nb-ativo .nb-curso-oferta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 14px 18px;
  border-radius: 8px;
  background: #0f0c14;
  color: #fff;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.nb-ativo .nb-curso-oferta strong {
  margin-left: 6px;
  color: #ffc21a;
  font-weight: 900;
}

.nb-ativo .nb-curso-validade {
  margin: 8px 0 0;
  color: #6b6b6b;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  font-size: 13px;
  text-align: center;
}

/* --- hero do curso: fundo, cantos e divisórias ------------------------
   Valores medidos no render do Figma:
     card principal  #f3e6f8  (o site usa #fcf5fe, bem mais claro)
     divisórias      #e0cbea  (o site usa #0000004f, um cinza escuro)
   A divisória VERTICAL entre a descrição e o card de benefícios não
   existe no desenho — ali o card branco já separa as colunas.

   Os !important são por causa de `style="border-right: ..."` escrito
   direto no markup: estilo inline só perde para !important.
   --------------------------------------------------------------------- */
.nb-ativo .container-sub-header-2 {
  background: #f3e6f8;
  fill: #f3e6f8;
}

/* some com a linha entre a coluna de texto e os benefícios.
   Seletor por descendência, não por filho direto: a .col-md-9 está
   aninhada mais fundo do que o `>` encadeado alcançava. */
.nb-ativo .container-sub-header-2 .col-md-9 {
  border-right: 0 !important;
}

/* No desenho os benefícios ficam num cartão branco arredondado, destacado
   do fundo lilás; no site a coluna é transparente. */
.nb-ativo .container-sub-header-2 .div-advantages {
  padding: 24px;
  border-radius: 16px;
  background: #fff;
}

/* No desenho os dois tópicos têm APENAS a linha horizontal acima: não há
   divisória vertical entre "Público alvo" e "Modalidade". Confirmado
   amostrando três alturas sem texto -- fundo #f3e6f8 uniforme. */
.nb-ativo .publico-modalidade > div[style*="border-right"] {
  border-right: 0 !important;
}

/* As etiquetas de carga horária e nota são brancas no desenho; o site
   usa #f0dffc, que some sobre o lilás do card. */
.nb-ativo .container-sub-header-2 .data-card {
  background: #fff;
}

/* A badge dos certificados usa a MESMA classe .data-card das etiquetas,
   mas no desenho continua roxa (#e6d2ef). O que as distingue e o
   `grid-row-start: 2` escrito no style inline dela. */
.nb-ativo .container-sub-header-2 .data-card[style*="grid-row-start: 2"] {
  background: #e6d2ef;
  color: #4d1160;
}

/* O site usa color:#000 nas etiquetas; o desenho usa roxos. E essa
   diferenca -- no TEXTO, nao no fundo -- que fazia a badge parecer mais
   escura: o fundo ja era #e6d2ef nos dois. */
.nb-ativo .container-sub-header-2 .data-card {
  color: #2a0f36;
}

/* O rodape do card: o site soma 4rem do .col-md-9 (inline) com 3rem do
   .publico-modalidade; no desenho a folga abaixo do texto e de ~38px. */
.nb-ativo .container-sub-header-2 .col-md-9 {
  margin-bottom: 0 !important;
}

.nb-ativo .publico-modalidade {
  margin-bottom: 2.4rem;
}

/* Proporção das colunas: no desenho o cartão de benefícios ocupa 30,8%
   da largura do card principal (354 de 1150), não os 25% do col-md-3. */
@media (min-width: 992px) {
  .nb-ativo .container-sub-header-2 .col-md-9 {
    width: 66.5%;
  }

  .nb-ativo .container-sub-header-2 .col-md-3 {
    width: 33.5%;
  }
}

/* 2px: no render do Figma a linha ocupa ~2,2px uma vez descontada a
   escala da captura (0,92). Com 1px ficava visivelmente mais fina. */
.nb-ativo .publico-modalidade {
  border-top: 2px solid #e0cbea;
  /* Folga medida: 51px no desenho contra 59px aqui. 1.3rem (20.8px) no
     lugar de 1.8rem (28.8px) fecha os 8px de diferenca. */
  margin-top: 1.3rem;
  padding-top: 2rem;
}

/* cantos arredondados na mídia do curso */
.nb-ativo .nb-curso-midia {
  overflow: hidden;
  border-radius: 16px;
}

.nb-ativo .nb-curso-midia > img,
.nb-ativo .nb-curso-midia > iframe {
  display: block;
  border-radius: 16px;
}

/* --- card de benefícios: medidas internas do desenho -------------------
   Card de 354px com 23px de recuo -> conteúdo de 308px, e os dois botões
   ocupam essa largura inteira (87,3% do card). No site eles saíam com
   48%, presos pelo contêiner .section-button e pelo float do .pull-right.
   --------------------------------------------------------------------- */
/* A causa real da largura: .div-advantages e flex com align-items:center,
   o que encolhe cada filho ao proprio conteudo. Trocando para stretch, o
   bloco dos botoes passa a ocupar a largura do cartao; a pilula volta a
   ser centrada por conta propria, com a largura natural dela. */
.nb-ativo .container-sub-header-2 .div-advantages {
  align-items: stretch;
}

.nb-ativo .container-sub-header-2 .div-advantages .beneficios {
  align-self: center;
}

/* O align-items:stretch acima alarga tambem o <ul>, e a largura do icone
   do ultimo item vem de uma PORCENTAGEM (computada em 24.875px antes, nao
   nos 25px exatos da regra) -- com o ul maior ele ia para 45px e destoava
   dos outros quatro. Fixar o tamanho mantem os cinco iguais. */
.nb-ativo .container-sub-header-2 .div-advantages ul li img {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
}

.nb-ativo .container-sub-header-2 .div-advantages .section-button {
  width: 100%;
}

.nb-ativo .container-sub-header-2 .div-advantages .section-button > a,
.nb-ativo .container-sub-header-2 .div-advantages .section-button .btn,
.nb-ativo .container-sub-header-2 .div-advantages .nb-curso-oferta {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
}

/* pílula "Benefícios": 147x37 no desenho; o site usa 20px com 15/50 de
   recuo, o que dá 203x51 */
.nb-ativo .container-sub-header-2 .div-advantages .beneficios {
  padding: 9px 30px;
  font-size: 18px;
}

/* --------------------------------------------
   Detalhe do curso -- "Escolha como deseja se inscrever"
   Medidas tiradas do desenho: cards de 448px com borda de 1px, Poppins,
   checks em bolinha colorida, aba "Melhor oferta" amarela sobre o topo do
   card VIP. Os textos do card do curso trazem cor inline, por isso
   !important em alguns pontos.
   -------------------------------------------- */
.nb-ativo .price-card-section {
  background-color: #f1e4f8;
}

.nb-ativo .price-card-section .cards-container {
  border-top: 0;
  padding-top: 3.5rem;
}

.nb-ativo .nb-esc-topo {
  display: flex;
  justify-content: center;
  margin: 0 0 12px;
}

.nb-ativo .nb-esc-selo {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: #0f0c14;
  color: #ffc21a;
  font-family: "Nunito", "open sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
}

.nb-ativo .nb-esc-sub {
  margin: 0 0 24px;
  text-align: center;
  font-size: 15px;
  color: #4d1360;
}

.nb-ativo .nb-esc-sub strong {
  color: #4d1360;
  font-weight: 800;
}

/* tipografia dos dois cards */
.nb-ativo .card-course,
.nb-ativo .card-course *:not(.check-circle-image),
.nb-ativo .card-vip,
.nb-ativo .card-vip *:not(.check-circle-image) {
  font-family: "Poppins", "open sans", Arial, sans-serif;
}

.nb-ativo .card-course .text-container-card,
.nb-ativo .card-vip .text-container-card {
  width: 100%;
  box-sizing: border-box;
  padding: 30px 30px 0;
  overflow: visible;
}

.nb-ativo .card-course .card-title,
.nb-ativo .card-vip .card-vip-title {
  width: 100%;
  border-bottom: 0;
  margin-bottom: 14px;
}

.nb-ativo .card-course .card-title-text,
.nb-ativo .card-vip .card-title-text {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700 !important;
  color: #fff !important;
}

.nb-ativo .card-course .line-card-title,
.nb-ativo .card-vip .line-card-title {
  width: 52px;
  margin-top: 8px;
  border-bottom: 2px solid #d14ae8;
}

.nb-ativo .card-vip .line-card-title {
  border-bottom-color: #ffc21a;
}

.nb-ativo .card-course .card-vip-text,
.nb-ativo .card-vip .card-vip-text {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400 !important;
  color: #fff !important;
}

/* checks em bolinha */
.nb-ativo .card-course .check-circle-image,
.nb-ativo .card-vip .check-circle-image {
  display: none;
}

.nb-ativo .card-course .winning-card-list-item::before,
.nb-ativo .card-vip .winning-card-list-item::before {
  content: "\2713";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border-radius: 50%;
  background: #d14ae8;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.nb-ativo .card-vip .winning-card-list-item::before {
  background: #ffc21a;
  color: #17121d;
}

.nb-ativo .card-course .winning-card-list-item p,
.nb-ativo .card-vip .winning-card-list-item p {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 400 !important;
  color: #fff !important;
}

.nb-ativo .card-course .card-winnings-list {
  width: 100% !important;
  gap: 12px;
}

.nb-ativo .card-vip .card-winnings-list {
  gap: 8px;
}

/* precos */
.nb-ativo .card-course .preco-de,
.nb-ativo .card-vip .preco-de {
  font-size: 14px;
  font-weight: 400;
  color: #bdb6c4;
}

.nb-ativo .card-course .preco-de s,
.nb-ativo .card-vip .preco-de s {
  color: #ff8a8a;
  text-decoration-color: #ff8a8a;
}

.nb-ativo .card-vip .preco-de {
  margin-top: 4px;
  color: #e6d9f2;
}

.nb-ativo .card-vip .preco-de s {
  color: #ffb3b3;
  text-decoration-color: #ffb3b3;
}

.nb-ativo .card-vip .preco-chamada {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
}

.nb-ativo .card-course .preco-com-selo,
.nb-ativo .card-vip .preco-com-selo {
  gap: 16px;
  flex-wrap: nowrap;
}

.nb-ativo .card-course .prices-vip-text,
.nb-ativo .card-vip .prices-vip-text {
  margin: 0;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
}

.nb-ativo .card-course .prices-vip-text span,
.nb-ativo .card-vip .prices-vip-text span {
  color: #fff;
  font-weight: 700;
}

.nb-ativo .card-course .prices-vip-text .coin,
.nb-ativo .card-vip .prices-vip-text .coin {
  font-size: 20px;
}

.nb-ativo .card-course .selo-off,
.nb-ativo .card-vip .selo-off {
  padding: 7px 16px;
  background: #ffc21a;
  color: #17121d;
  font-size: 13px;
  font-weight: 700;
}

.nb-ativo .card-course .preco-parcelas,
.nb-ativo .card-vip .preco-parcelas {
  margin: 12px 0 20px;
  font-size: 14px;
  font-weight: 400;
  color: #bdb6c4;
}

.nb-ativo .card-vip .preco-parcelas {
  color: #e6d9f2;
}

/* botoes */
.nb-ativo .card-course .card-vip-button,
.nb-ativo .card-vip .card-vip-button {
  padding: 17px 0;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #17121d;
}

.nb-ativo .card-course .card-vip-button {
  background: #2f8f3c;
}

.nb-ativo .card-course .card-vip-button:hover {
  background: #277a33;
}

.nb-ativo .card-vip .card-vip-button {
  background: #ffc21a;
  box-shadow: 0 10px 24px rgba(255, 194, 26, .28);
}

.nb-ativo .card-vip .card-vip-button:hover {
  background: #ffb300;
}

/* card do curso */
.nb-ativo .card-course.stacked--up-right-course {
  background: linear-gradient(180deg, #17121d 0%, #211727 100%);
  border: 1px solid #d14ae8;
  border-radius: 16px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  padding-bottom: 28px;
}

.nb-ativo .card-course .card-vip-text:first-child {
  margin: 0 0 4px !important;
  font-size: 14px;
  color: #bdb6c4 !important;
}

.nb-ativo .card-course .preco-de {
  margin-top: 64px;
}

/* card VIP */
.nb-ativo .card-vip.stacked--up-right-vip {
  position: relative;
  overflow: visible;
}

.nb-ativo .card-vip.stacked--up-right-vip,
.nb-ativo .card-vip.stacked--up-right-vip:hover {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M26 4h20a6 6 0 0 1 6 6v16h16a6 6 0 0 1 6 6v8a6 6 0 0 1-6 6H52v16a6 6 0 0 1-6 6H26a6 6 0 0 1-6-6V46H4a6 6 0 0 1-6-6v-8a6 6 0 0 1 6-6h16V10a6 6 0 0 1 6-6z' fill='%23ffffff' fill-opacity='.08' transform='translate(0 0)'/%3E%3C/svg%3E") no-repeat right 24px top 52px / 72px 72px,
    url("../img/plano-vip-nb-ecg.png") no-repeat right 0 bottom 118px / 64% auto,
    linear-gradient(196deg, #952bad 0%, #4d1360 100%);
}

.nb-ativo .card-vip.stacked--up-right-vip {
  border: 1px solid #ffc21a;
  border-radius: 16px;
  box-shadow: 0 24px 40px rgba(149, 43, 173, .35);
  filter: none;
  padding-bottom: 28px;
}

.nb-ativo .card-vip .advantage-bar {
  position: absolute;
  top: -16px;
  left: 50%;
  width: auto;
  transform: translateX(-50%);
  padding: 8px 22px;
  border-radius: 999px;
  background: #ffc21a;
  white-space: nowrap;
}

.nb-ativo .card-vip .advantage-bar p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #17121d;
}

.nb-ativo .card-vip .advantage-bar svg {
  display: none;
}

.nb-ativo .card-vip .advantage-bar p::before {
  content: "\2605";
  margin-right: 6px;
}

.nb-ativo .card-vip .nb-esc-chamada {
  max-width: 320px;
  margin: 14px 0 16px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: #ffc21a;
}

.nb-ativo .card-vip .card-vip-text {
  margin-bottom: 14px;
}

.nb-ativo .card-vip .card-vip-text-benefits {
  margin: 22px 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

/* hover: o card apenas se ergue e a sombra que ja existe se expande,
   sem criar sombra nova. As cores do card nao mudam: o :hover do site trocava o fundo por #fff e escondia o texto. */
.nb-ativo .card-course.stacked--up-right-course,
.nb-ativo .card-vip.stacked--up-right-vip {
  overflow: visible;
}

.nb-ativo .card-course.stacked--up-right-course:hover {
  background: linear-gradient(180deg, #17121d 0%, #211727 100%);
}

.nb-ativo .stacked--up-right-course,
.nb-ativo .stacked--up-right-vip {
  transition: transform .3s ease, box-shadow .3s ease;
}

/* as camadas ::before/::after do site (sombra empilhada) ficam desligadas */
.nb-ativo .stacked--up-right-course::before,
.nb-ativo .stacked--up-right-course::after,
.nb-ativo .stacked--up-right-vip::before,
.nb-ativo .stacked--up-right-vip::after {
  display: none;
}

.nb-ativo .stacked--up-right-course:hover,
.nb-ativo .stacked--up-right-vip:hover {
  transform: translateY(-6px);
}

.nb-ativo .stacked--up-right-course:hover {
  box-shadow: 6px 14px 24px rgba(0, 0, 0, .35);
}

.nb-ativo .stacked--up-right-vip:hover {
  box-shadow: 8px 32px 56px rgba(149, 43, 173, .5);
}

@media (min-width: 992px) {
  .nb-ativo .price-card-section .cards-container {
    width: min(940px, 90%);
    gap: 22px;
    align-items: flex-start;
  }

  .nb-ativo .card-course,
  .nb-ativo .card-vip {
    flex: 1 1 0;
    width: auto;
    max-width: 448px;
    margin-right: 0;
  }
}

/* =====================================================================
   PLANO VIP -- versao MOBILE (<= 767px)

   O menu do /m aponta para esta mesma pagina (/plano_vip), responsiva, entao
   o design mobile do Plano VIP se resolve aqui e nao no /m. Medidas do
   export m-plano-vip (frame de 390px). As regras do desktop acima fixam
   larguras (502px, 520px) e estourariam a tela; este bloco as desfaz.
   ===================================================================== */
@media (max-width: 767px) {

  /* --- barra: texto a esquerda, botao a direita, numa linha --- */
  .nb-ativo .nb-barra {
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 8px 16px;
  }

  .nb-ativo .nb-barra__texto {
    flex: 1 1 auto;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    line-height: 1.5;
    text-align: left;
  }

  .nb-ativo .nb-barra__link {
    padding: 4px 16px;
    font-size: 13px;
  }

  /* --- hero --- */
  /* o site poe 20px de respiro acima do cabecalho (.brand-banner); o desenho nao tem */
  .nb-ativo .brand-banner {
    padding-top: 0;
  }

  .nb-ativo .main-section {
    padding: 36px 24px 48px;
  }

  .nb-ativo .main-content {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  .nb-ativo .main-banner {
    order: -1;
    flex: none;
    width: 100%;
    max-width: none;
    width: calc(100% + 16px);
    margin: 0 -8px 9px;
  }

  .nb-ativo .nb-vip-foto {
    width: 100%;
    height: auto;
  }

  /* As tags sao IMAGENS de pilula (205x36 etc.). No desenho elas medem 22px
     de altura; a largura acompanha a proporcao da propria imagem. */
  /* o CSS do site esconde as tags abaixo de 992px (.main-banner .tag{display:none}) */
  .nb-ativo .main-banner .tag {
    display: block;
    width: auto;
    max-width: none;
  }

  .nb-ativo .main-banner .tag,
  .nb-ativo .main-banner .tag#tag-3,
  .nb-ativo .main-banner .tag#tag-4 {
    width: auto;
    max-width: none;
  }

  .nb-ativo .main-banner .tag img {
    width: auto !important;
    max-width: none !important;
    height: 24px;
  }

  .nb-ativo .tag#tag-1 { top: 58%;   left: -4%;   }
  .nb-ativo .tag#tag-2 { top: 54%;   left: 62%;   }
  .nb-ativo .tag#tag-3 { top: 90%;   left: -1%;   }
  .nb-ativo .tag#tag-4 { top: 79%;   left: 63%;   }

  /* --- cabecalho: logo pequeno, botao com contorno roxo --- */
  .nb-ativo .brand-banner > header {
    height: 62px;
    padding: 0 24px;
    background: #fff;
  }

  .nb-ativo .brand-banner > header > a:last-child {
    max-width: none;
  }

  .nb-ativo .brand-banner > header > a:first-child img {
    width: 66px;
    height: auto;
    max-width: 66px;
  }

  .nb-ativo .brand-banner > header .student-area {
    height: 40px;
    padding: 0 22px;
    border: 1px solid #7b2a8c;
    border-radius: 8px;
    background: #fff;
    color: #4a1a6a;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
  }

  .nb-ativo .main-text {
    flex: none;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 100%;
  }

  .nb-ativo .main-text > h1 { margin: 0; }
  .nb-ativo .main-text > p:not(.nb-vip-contador) { margin: 6px 0 0; }

  .nb-ativo .nb-vip-selos {
    justify-content: center;
    gap: 8px;
    margin-bottom: 9px;
  }

  .nb-ativo .nb-vip-selo--marca,
  .nb-ativo .nb-vip-selo--oferta {
    height: 28px;
    padding: 0 14px;
    line-height: 28px;
    font-size: 11px;
    letter-spacing: 0.9px;
  }

  .nb-ativo .main-text > h1 {
    width: 100%;
    color: #6c2480;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 36px;
    text-align: center;
  }

  .nb-ativo .main-text > h1 > span {
    color: #48185c;
  }

  .nb-ativo .main-text > p:not(.nb-vip-contador),
  .nb-ativo .main-text > p:not(.nb-vip-contador) > span {
    color: #382040;
    letter-spacing: -0.3px;
  }

  .nb-ativo .main-text > p:not(.nb-vip-contador),
  .nb-ativo .main-text > p:not(.nb-vip-contador) > span {
    text-align: center;
  }

  .nb-ativo .main-text .vip-link {
    display: block;
    width: 100%;
    max-width: none;
    margin-top: 32px;
  }

  .nb-ativo .vip-button.nb-vip-cta {
    width: 100%;
    font-size: 18px;
  }

  .nb-ativo .nb-vip-contador {
    margin-top: 12px;
    text-align: center;
  }
}

/* --- Plano VIP mobile: numeros do hero e "Confira os cursos" --- */
@media (max-width: 767px) {

  /* numeros: lista a esquerda, titulo e texto menores */
  .nb-ativo .main-section {
    align-items: stretch;
  }

  .nb-ativo .main-section .topics {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 40px;
    text-align: left;
  }

  .nb-ativo .main-section .topic {
    width: 100%;
    max-width: 100%;
    margin: 0 0 28px;
  }

  .nb-ativo .main-section .topic:last-child {
    margin-bottom: 0;
  }

  .nb-ativo .main-section .topic > p {
    margin: 0 0 4px;
    color: #48185c;
    font-size: 17px;
    letter-spacing: -0.2px;
    line-height: 24px;
    text-align: left;
  }

  .nb-ativo .main-section .topic > span {
    display: block;
    color: #382040;
    font-size: 14px;
    line-height: 21px;
    text-align: left;
  }

  /* "Confira os cursos que vao fazer voce se destacar" */
  .nb-ativo .our-courses {
    align-items: stretch;
    padding: 56px 24px 40px;
    text-align: left;
  }

  .nb-ativo .courses-text-content {
    align-items: flex-start;
    margin-bottom: 32px;
    text-align: left;
  }

  .nb-ativo .courses-text-content > h2 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: #48185c;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 36px;
    text-align: left;
  }

  .nb-ativo .courses-text-content > p {
    width: 100%;
    max-width: 100%;
    margin: 9px 0 0;
    color: #382040;
    font-size: 15px;
    letter-spacing: -0.2px;
    line-height: 24px;
    text-align: left;
  }

  .nb-ativo .courses-text-content > .vip-link {
    display: block;
    width: 100%;
    max-width: none;
    margin-top: 32px;
  }

  .nb-ativo .courses-text-content .vip-button {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(90deg, #a93bcb 0%, #541d65 100%);
    box-shadow: none;
    font-size: 15px;
    font-weight: 700;
  }
}

/* --- Plano VIP mobile: "Mas para quem e o Plano VIP?" ---
   Texto a esquerda em coluna unica e a foto ABAIXO dele, contida (346px),
   em vez do background que sangra pela direita no desktop. */
@media (max-width: 767px) {
  .nb-ativo .public-vip {
    align-items: stretch;
    padding: 56px 24px 372px;
    background-color: #f7eefb;
    background-image: url("../img/plano-vip-nb-publico.webp");
    background-size: 346px auto;
    background-position: center bottom 40px;
    background-repeat: no-repeat;
  }

  .nb-ativo .public-text-content {
    width: 100%;
    max-width: 100%;
    padding: 0;
    text-align: left;
  }

  .nb-ativo .public-text-content > h2 {
    margin: 0;
    color: #4a1a5c;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 34px;
    text-align: left;
  }

  .nb-ativo .reasons {
    display: block;
    max-width: 100%;
    margin-top: 24px;
  }

  .nb-ativo .reasons .item {
    width: 100%;
    max-width: 100%;
    margin: 0 0 31px;
    text-align: left;
  }

  .nb-ativo .reasons .item > p {
    margin: 0 0 4px;
    color: #4a1a5c;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 22px;
    text-align: left;
  }

  .nb-ativo .reasons .item > span {
    display: block;
    color: #3a2342;
    font-size: 14px;
    line-height: 21px;
    text-align: left;
  }
}

@media (max-width: 767px) and (min-resolution: 1.5dppx) {
  .nb-ativo .public-vip {
    background-image: url("../img/plano-vip-nb-publico-2x.webp");
  }
}

/* --- Plano VIP mobile: "O que voce vai encontrar por aqui" ---
   O CSS do site escreve ".topic > text-container" (sem o ponto da classe),
   entao titulo e texto nunca recebem a fonte e caem em Open Sans. Aqui a
   fonte e os tamanhos do desenho sao aplicados na classe certa. */
@media (max-width: 767px) {
  .nb-ativo .discover-vip {
    align-items: stretch;
    gap: 28px;
    padding: 70px 24px 64px;
  }

  .nb-ativo .discover-vip > h2 {
    margin: 0;
    color: #4a1a5c;
    font-size: 26px;
    letter-spacing: -0.3px;
    line-height: 34px;
    text-align: center;
  }

  .nb-ativo .discover-vip > .topics {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .nb-ativo .discover-vip .topic {
    gap: 16px;
    margin: 0;
    max-width: 100%;
  }

  .nb-ativo .discover-vip .topic-img-container {
    flex: 0 0 40px;
    width: 40px;
    min-height: 40px;
    padding: 8px;
    border: 1px solid #a93bcb;
    border-radius: 8px;
    box-shadow: 0 2px 3px rgba(74, 26, 92, 0.25);
  }

  .nb-ativo .discover-vip .topic-img-container img {
    width: 22px;
    height: 22px;
  }

  .nb-ativo .discover-vip .text-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .nb-ativo .discover-vip .text-container > h3 {
    margin: 0;
    color: #2a0f36;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.1px;
    line-height: 24px;
  }

  .nb-ativo .discover-vip .text-container > p {
    margin: 0;
    color: #3a2342;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 21px;
  }

  .nb-ativo .discover-vip > .vip-link {
    display: block;
    width: 100%;
    max-width: none;
  }

  .nb-ativo .discover-vip .vip-button.nb-vip-cta {
    width: 100%;
    min-width: 0;
    height: 56px;
    font-size: 16px;
  }
}

/* --- Plano VIP mobile: "Certificacao reconhecida" --- */
@media (max-width: 767px) {
  .nb-ativo .certification {
    align-items: stretch;
    padding: 24px 24px 72px;
  }

  .nb-ativo .certification .certificate-img {
    width: 100%;
    margin: 0 0 32px;
  }

  .nb-ativo .certification .text-container {
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    text-align: left;
  }

  .nb-ativo .certification .text-container > h2 {
    margin: 0;
    color: #4a1a5c;
    font-size: 26px;
    letter-spacing: -0.3px;
    line-height: 34px;
    text-align: left;
  }

  .nb-ativo .certification .paragraphs {
    display: block;
    width: 100%;
    margin-top: 14px;
  }

  .nb-ativo .certification .paragraphs > p {
    margin: 0 0 31px;
    color: #3a2342;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 21px;
    text-align: left;
  }

  .nb-ativo .certification .text-container > span {
    display: block;
    margin: 0;
    color: #2a0f36;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
  }

  .nb-ativo .certification .certificate-tags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
  }

  .nb-ativo .certification .certificate-tags .certificate-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0 8px;
    border-radius: 16px;
    background: #f2d3f0 !important;
    color: #4a1a5c !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    opacity: 1;
    text-align: center;
    white-space: nowrap;
  }

  /* o desenho alterna claro/escuro em xadrez: 1o e 4o escuros */
  .nb-ativo .certification .certificate-tags .certificate-tag:nth-child(1),
  .nb-ativo .certification .certificate-tags .certificate-tag:nth-child(4) {
    background: #4a1a5c !important;
    color: #fff !important;
  }
}

/* --- Plano VIP mobile: card "2 anos pelo preco de 1" + lista de beneficios ---
   No desktop o card tem 1100px e duas colunas. No celular ele ocupa a largura
   inteira em coluna unica, com os selos lado a lado no topo e a lista de
   beneficios como um cartao escuro DENTRO do card roxo. */
@media (max-width: 767px) {
  .nb-ativo .nb-benef {
    padding: 56px 16px 64px;
  }

  .nb-ativo .nb-benef__card {
    gap: 0;
    padding: 24px 24px 24px;
    border-radius: 24px;
  }

  .nb-ativo .nb-benef__melhor {
    top: 24px;
    right: 24px;
    padding: 6px 14px;
    background: linear-gradient(90deg, #ffde72 0%, #d7b030 100%);
    font-size: 11px;
    letter-spacing: 0.8px;
  }

  /* display:contents dissolve a coluna da oferta: seus filhos passam a ser
     itens do card, e com isso a lista (que no HTML vem DEPOIS do botao) pode
     ficar entre o preco e o botao, como no desenho, so com "order". */
  .nb-ativo .nb-benef__oferta {
    display: contents;
  }

  .nb-ativo .nb-benef__card {
    flex-direction: column;
  }

  .nb-ativo .nb-benef__card > .nb-benef__lista {
    order: 1;
  }

  .nb-ativo .nb-benef__oferta > a,
  .nb-ativo .nb-benef__oferta > .nb-benef__prazo,
  .nb-ativo .nb-benef__oferta > .nb-benef__pgto {
    order: 2;
  }

  .nb-ativo .nb-benef__oferta > a {
    display: block;
    margin-top: 24px;
  }

  .nb-ativo .nb-benef__card,
  .nb-ativo .nb-benef__oferta > * {
    text-align: left;
  }

  .nb-ativo .nb-benef__oferta > .nb-benef__prazo,
  .nb-ativo .nb-benef__oferta > .nb-benef__pgto {
    text-align: center;
  }

  .nb-ativo .nb-benef .nb-vip-selo--marca {
    align-self: flex-start;
  }

  .nb-ativo .nb-benef .nb-vip-selo--marca {
    height: 26px;
    padding: 0 14px;
    border: 1px solid #ffd23f;
    background: #14051b;
    font-size: 11px;
    line-height: 24px;
    letter-spacing: 1px;
  }

  .nb-ativo .nb-benef__titulo {
    max-width: 100%;
    margin-top: 22px;
    font-size: 40px;
    letter-spacing: -0.4px;
    line-height: 44px;
  }

  .nb-ativo .nb-benef__sub {
    max-width: 100%;
    margin-top: 14px;
    font-size: 15px;
    line-height: 23px;
  }

  .nb-ativo .nb-benef__anos {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    margin-top: 26px;
  }

  .nb-ativo .nb-benef__ano {
    flex: none;
    width: 100%;
    min-height: 66px;
    padding: 12px 16px;
  }

  .nb-ativo .nb-benef__ano {
    text-align: left;
  }

  .nb-ativo .nb-benef__ano > span {
    font-size: 11px;
  }

  .nb-ativo .nb-benef__ano > strong {
    font-size: 15px;
  }

  .nb-ativo .nb-benef__mais {
    align-self: center;
    font-size: 20px;
    line-height: 20px;
  }

  .nb-ativo .nb-benef__de {
    margin-top: 34px;
    font-size: 14px;
  }

  .nb-ativo .nb-benef__por {
    margin-top: 4px;
    font-size: 15px;
  }

  .nb-ativo .nb-benef__linha-preco {
    flex-wrap: wrap;
    gap: 0 14px;
  }

  .nb-ativo .nb-benef__preco {
    font-size: 46px;
    line-height: 54px;
  }

  .nb-ativo .nb-benef__off {
    padding: 4px 12px;
    font-size: 11px;
  }

  .nb-ativo .nb-benef__vista {
    font-size: 14px;
  }

  /* lista: cartao escuro dentro do card, ate a borda do card menos 16px */
  .nb-ativo .nb-benef__lista {
    flex: none;
    width: auto;
    margin: 28px -8px 0;
    padding: 20px 18px 8px;
    border: 0;
    border-radius: 18px;
    background: #2c0e38;
  }

  .nb-ativo .nb-benef__lista h3 {
    margin-bottom: 14px;
    font-size: 17px;
  }

  .nb-ativo .nb-benef__lista li {
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13.5px;
    line-height: 20px;
  }

  .nb-ativo .nb-benef__destaque {
    margin: 0 -4px 16px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  /* o CTA sai da coluna da oferta no desktop; aqui fica logo abaixo da lista? Nao:
     no desenho ele esta abaixo da lista. A ordem do HTML e oferta -> lista, e o CTA
     pertence a oferta, entao a lista aparece ENTRE o preco e o botao no desktop
     empilhado. Para o desenho, o botao sobe para depois da lista via order. */
  .nb-ativo .nb-benef__cta {
    width: 100%;
    min-height: 56px;
    margin-top: 0;
    font-size: 17px;
  }

  .nb-ativo .nb-benef__melhor {
    z-index: 1;
  }

  .nb-ativo .nb-benef__prazo,
  .nb-ativo .nb-benef__pgto {
    width: 100%;
  }

  .nb-ativo .nb-benef__prazo {
    margin-top: 14px;
    font-size: 13px;
    line-height: 20px;
  }

  .nb-ativo .nb-benef__prazo time {
    display: block;
  }

  .nb-ativo .nb-benef__pgto {
    font-size: 12px;
  }
}

/* --- Plano VIP mobile: Perguntas Frequentes --- */
@media (max-width: 767px) {
  .nb-ativo .faq {
    gap: 28px;
    padding: 56px 24px 48px;
  }

  .nb-ativo .faq h2 {
    margin: 0;
    color: #4a1a5c;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 32px;
    text-align: center;
  }

  /* o .accordion do site tem 16px de padding lateral proprio */
  .nb-ativo .faq .accordion {
    padding: 0;
    max-width: 100%;
  }

  .nb-ativo .faq .accordion-item {
    margin-bottom: 12px;
    border: 1px solid #d9bfe0;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
  }

  .nb-ativo .faq .accordion-button {
    min-height: 64px;
    padding: 12px 48px 12px 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    color: #2a0f36;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }

  .nb-ativo .faq .accordion-button::after {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  .nb-ativo .faq .accordion-body {
    margin-top: 0;
    padding: 0 16px 16px;
    border-top: 0;
    color: #3a2342;
    font-size: 14px;
    line-height: 21px;
  }

  .nb-ativo .faq .nb-faq-destaque .accordion-button:not(.collapsed) {
    min-height: 56px;
    padding-bottom: 8px;
    color: #4a1a5c;
    font-weight: 700;
  }
}

/* --- Plano VIP mobile: "Ficou com alguma duvida?" e garantia --- */
@media (max-width: 767px) {
  .nb-ativo .doubts {
    padding: 56px 24px 8px;
  }

  .nb-ativo .doubts > div {
    align-items: stretch;
    width: 100%;
    text-align: left;
  }

  .nb-ativo .doubts h2 {
    margin: 0;
    color: #4a1a5c;
    font-size: 24px;
    letter-spacing: -0.2px;
    line-height: 32px;
    text-align: left;
  }

  .nb-ativo .doubts span {
    display: block;
    margin-top: 8px;
    color: #2a0f36;
    font-size: 14px;
    line-height: 21px;
    text-align: left;
  }

  .nb-ativo .doubts a {
    display: block;
    width: 100%;
    margin-top: 32px;
  }

  .nb-ativo .doubts .cta-button {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    background: #1f7f3a;
    box-shadow: none;
    font-size: 15px;
    font-weight: 700;
  }

  .nb-ativo .guarantee {
    gap: 0;
    padding: 24px 24px 72px;
  }

  .nb-ativo .guarantee img {
    width: 190px;
    height: auto;
    margin-bottom: 20px;
  }

  .nb-ativo .guarantee h2 {
    margin: 0 0 10px;
    color: #4a1a5c;
    font-size: 24px;
    letter-spacing: -0.2px;
    line-height: 32px;
  }

  .nb-ativo .guarantee p {
    color: #2a0f36;
    font-size: 14px;
    line-height: 21px;
  }
}

/* --- Plano VIP mobile: rodape ---
   Desenho: logo, cartao do e-MEC (largo, texto + QR lado a lado) e as listas
   "Para voce" e "Contato" em DUAS COLUNAS, tudo alinhado a esquerda. O site
   empilha e centraliza tudo. */
@media (max-width: 767px) {
  .nb-ativo footer {
    padding: 0;
  }

  .nb-ativo .footer-content {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 24px;
    align-items: start;
    padding: 36px 24px 8px;
    text-align: left;
  }

  .nb-ativo .footer-content .images {
    grid-column: 1 / -1;
    align-items: flex-start;
    width: 100%;
    gap: 22px;
  }

  .nb-ativo .footer-content .images > img {
    width: 106px;
    height: auto;
  }

  .nb-ativo .footer-content .e-mec {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 240px;
    max-width: 100%;
    padding: 12px;
  }

  .nb-ativo .footer-content .e-mec > p {
    flex: 1 1 auto;
    width: auto;
    margin: 0;
    color: #3a2342;
    font-size: 11px;
    line-height: 15px;
    text-align: left;
  }

  .nb-ativo .footer-content .qr-code {
    flex: 0 0 auto;
  }

  .nb-ativo .footer-list {
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .nb-ativo .footer-list li {
    justify-content: flex-start;
    width: 100%;
    text-align: left;
  }

  .nb-ativo .footer-list .list-title {
    font-size: 15px;
    font-weight: 700;
  }

  .nb-ativo .footer-list li,
  .nb-ativo .footer-list li span {
    font-size: 13px;
    line-height: 19px;
    overflow-wrap: anywhere;
  }

  .nb-ativo .footer-content .copyright {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .5);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
  }
}