/* O topo da página no jeito da interface nova da Netflix (pedido do Lucca, 13/11/2026; das três versões testadas
   ele escolheu a do vídeo: as com a foto horizontal e a vertical foram descartadas).
   Computador: o "billboard" arredondado da Netflix na TV (selo, título grande, linha de dados, descrição, botão branco
   em pílula e botões de vidro), com o cabeçalho em pílulas ("Início" aceso no topo).
   Celular: o aplicativo (título no cabeçalho, ícones, "chips" das seções e o cartão do curso com dois botões lado a
   lado), com o fundo tingido pela cor do vídeo.
   O vídeo de fundo é o do topo comum (/hero-curso/video/fundo-1-*.mp4) e o comportamento (vídeo, ficha do curso, PDF)
   é o do /hero-curso/hero-curso.js; esta folha só desenha. */

.nf {
  --nf-tom: 37, 54, 85;              /* a cor média do vídeo de fundo, para o fundo do topo no celular */
  --nf-fundo: #0B0D10;
  --nf-vidro: rgba(109, 109, 110, .62);
  --nf-vidro-2: rgba(109, 109, 110, .42);
  position: relative;
  /* o vídeo começa no alto da página, com o cabeçalho (fixo e transparente) por cima dele rodando (pedido dele,
     13/11/2026); antes o cartão começava 92 px abaixo, depois do cabeçalho */
  padding: 0 clamp(24px, 3vw, 48px) 64px;
  /* o fundo puxa a cor do vídeo, como no celular (e a luz ambiente, abaixo, acompanha o vídeo em volta do cartão) */
  background: linear-gradient(180deg, rgb(var(--nf-tom)) 0%, rgba(var(--nf-tom), .55) 38%, var(--fundo) 88%);
  color: #fff;
}
.nf *, .nf *::before, .nf *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- a luz ambiente (modo ambiente do YouTube) */
.nf__palco { position: relative; }
.nf__luz {
  position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%;
  filter: blur(80px) saturate(1.7) brightness(1.1); transform: scale(1.1, 1.24);
  opacity: 0; transition: opacity 1.2s ease; pointer-events: none;
}
.nf.nf-com-luz .nf__luz { opacity: 1; }

/* ---------------------------------------------------------------- cabeçalho: o nome do curso e as pílulas (os "chips" do celular) */
body.nf-pagina .nav__curso { display: none; }
body.nf-pagina .nav__app { display: block; font: 700 1.5rem/1 var(--titulo); color: #fff; letter-spacing: -.01em; white-space: nowrap; }
body.nf-pagina .nav__marca { gap: 12px; }
body.nf-pagina .nav:not(.rolou) { background: transparent; }
body.nf-pagina .nav__links { gap: 8px; align-items: center; }
body.nf-pagina .nav__links a {
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .08);
  font: 600 .88rem/1 var(--fonte); color: #fff; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s;
}
body.nf-pagina .nav__links a:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
body.nf-pagina .nav__links a.ativo { background: #fff; border-color: #fff; color: #000; }
body.nf-pagina .nav__links a.ativo::after { display: none; }
body.nf-pagina .nav__icones { display: none; }
@media (max-width: 1360px) {
  body.nf-pagina .nav__links { gap: 6px; }
  body.nf-pagina .nav__links a { padding: 7px 11px; font-size: .84rem; }
}
/* até 1180 px o pagina.css já esconde o 4º ("Ambiente SAP"); aqui sai também o 6º ("Depoimentos") */
@media (max-width: 1180px) {
  body.nf-pagina .nav__links a:nth-child(6) { display: none; }
}
/* o cabeçalho cabe DENTRO do vídeo do topo (pedido dele, 13/11/2026: "Puxe o cabeçalho um pouco para a esquerda, apenas para
   o botão branco Começar Agora não fique para fora do hero"): a largura do cabeçalho é a do cartão do vídeo menos um respiro
   de 16 px de cada lado, os espaços entre as partes ficam menores, as pílulas encolhem mais cedo e, nas telas mais estreitas,
   uma pílula sai antes (o conteúdo passava 60 px da largura e empurrava o botão para a direita) */
@media (min-width: 981px) {
  body.nf-pagina .nav__dentro { width: min(1340px, calc(100% - 2 * clamp(24px, 3vw, 48px) - 32px)); gap: 16px; }
}
@media (min-width: 981px) and (max-width: 1400px) {
  body.nf-pagina .nav__links { gap: 6px; }
  body.nf-pagina .nav__links a { padding: 7px 11px; font-size: .84rem; }
}
@media (min-width: 981px) and (max-width: 1280px) {
  body.nf-pagina .nav__links a:nth-child(4) { display: none; }          /* "Ambiente SAP" */
}
@media (min-width: 981px) and (max-width: 1080px) {
  body.nf-pagina .nav__links a:nth-child(3) { display: none; }          /* "Professores" */
}

/* ---------------------------------------------------------------- o menu dos treinamentos (gaveta no estilo Netflix) */
body.nf-pagina .nav__catalogo {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; border-radius: 8px;
  color: #fff; transition: background-color .2s;
}
body.nf-pagina .nav__catalogo:hover { background: rgba(255, 255, 255, .12); }
body.nf-pagina .nav__catalogo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.nf-pagina .nav__catalogo svg { width: 26px; height: 26px; }
@media (max-width: 980px) { body.nf-pagina .nav__catalogo { display: none; } }   /* no celular fica o menu da direita, como era */

/* Tela cheia no jeito do modo teatro / modo ambiente do YouTube (pedido dele, 13/11/2026, no lugar da gaveta lateral):
   o curso em destaque fica grande no alto e a tela inteira pega as cores da capa dele (a capa ampliada e desfocada
   atrás de tudo); passar o mouse ou o foco por outro curso troca o destaque e a cor. */
html.cc-travado { overflow: hidden; }
.cc[hidden] { display: none; }
.cc { position: fixed; inset: 0; z-index: 140; display: flex; flex-direction: column; background: #050607; color: #fff; opacity: 0; transition: opacity .3s ease; }
.cc.aberta { opacity: 1; }
.cc__ambiente { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cc__ambiente img { position: absolute; left: -10%; top: -25%; width: 120%; height: 150%; object-fit: cover; filter: blur(90px) saturate(1.7) brightness(.8); opacity: 0; transform: scale(1.05); transition: opacity .7s ease; }
.cc__ambiente img.visivel { opacity: .7; }
.cc__ambiente::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 28% 18%, rgba(5, 6, 7, 0) 0%, rgba(5, 6, 7, .5) 55%, rgba(5, 6, 7, .9) 100%),
              linear-gradient(180deg, rgba(5, 6, 7, 0) 45%, rgba(5, 6, 7, .88) 100%);
}
.cc__topo { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 18px clamp(24px, 3.4vw, 56px); }
.cc__topo img { width: 40px; height: 40px; border-radius: 50%; }
.cc__topo h2 { flex: 1; margin: 0; font: 700 1.3rem/1.15 var(--titulo); }
.cc__todos { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 6px; background: rgba(109, 109, 110, .55); color: #fff; font: 700 .92rem/1 var(--fonte); text-decoration: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cc__todos:hover { background: rgba(109, 109, 110, .38); }
.cc__fechar { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.cc__fechar:hover { background: rgba(255, 255, 255, .22); }
.cc__fechar svg { width: 20px; height: 20px; }
.cc__todos:focus-visible, .cc__fechar:focus-visible, .cc__bt:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cc__corpo { position: relative; z-index: 1; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px clamp(24px, 3.4vw, 56px) 48px; }
.cc__aviso { margin: 28px 0; color: rgba(255, 255, 255, .7); font-size: 1rem; }
.cc__aviso a { color: #fff; }

/* o carrossel coverflow dos cursos, no alto da tela cheia (pedido dele, 13/11/2026, a partir do "Glassy Coverflow
   Carousel"): perspectiva no palco (sem preserve-3d, para o clique chegar nos cartões de trás), quem fica na frente é o
   z-index; cada cartão tem a proporção das capas em pé dos cursos (496 x 890) */
.gc { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: clamp(450px, 62vh, 600px); margin: 0 0 30px; }
.gc__palco { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; perspective: 1100px; touch-action: pan-y; user-select: none; cursor: grab; }
.gc__palco[data-arrastando] { cursor: grabbing; }
.gc__palco[data-arrastando] .gc__card { transition: none; }
.gc__chao { position: absolute; bottom: 0; left: 50%; width: min(600px, 80vw); height: 35px; transform: translate(-50%); background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%); filter: blur(12px); pointer-events: none; }
.gc__card {
  position: absolute; width: var(--gc-larg, 200px); margin: 0; padding: 6px; display: block; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px;
  background: #11151C; color: #fff; font: inherit; text-align: center; cursor: pointer; backface-visibility: hidden; will-change: transform;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 18px 32px rgba(0, 0, 0, .55);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease, border-color .25s;
}
.gc__card[data-ativo] { border-color: rgba(255, 255, 255, .3); box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 22px 44px rgba(0, 0, 0, .65); }
.gc__card:focus-visible { outline: 2px solid #fff; outline-offset: 7px; }
.gc__poster { position: relative; display: block; width: 100%; aspect-ratio: 496 / 890; overflow: hidden; border-radius: 9px; background: #161B24; }
.gc__poster img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.gc__poster.horizontal img { object-position: 62% center; }
.gc__sombra { position: absolute; inset: 0; background: #000; opacity: var(--gc-sombra, 0); transition: opacity .4s; pointer-events: none; }
.gc__ver {
  position: absolute; bottom: 14px; left: 50%; transform: translate(-50%); display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 15px;
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(17, 21, 28, .88); color: #fff; font: 600 12px/1 var(--fonte); white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s, background-color .2s, color .2s;
}
.gc__ver svg { width: 13px; height: 13px; }
.gc__card[data-ativo] .gc__ver { opacity: 1; }
.gc__card[data-ativo]:hover .gc__ver { background: #fff; color: #0B0D10; }
.gc__base { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 14px; }
.gc__info { min-height: 52px; max-width: 100%; text-align: center; }
.gc__info h3 { margin: 0 0 6px; font: 600 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.2 var(--titulo); color: #fff; text-wrap: balance; }
.gc__info p { margin: 0; font: 400 12px/1.5 var(--fonte); color: rgba(255, 255, 255, .62); }
.gc__dock {
  display: flex; align-items: center; gap: 12px; padding: 5px 7px 5px 19px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 40px;
  background: rgba(17, 21, 28, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 22px rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.gc__pos { display: flex; align-items: center; gap: 7px; padding-right: 15px; border-right: 1px solid rgba(255, 255, 255, .14); font: 400 11px/1 var(--fonte); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .6); }
.gc__pos span:first-child { color: #fff; }
.gc__transporte { display: flex; align-items: center; gap: 3px; }
.gc__dock button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: background-color .16s; }
.gc__dock button:hover, .gc__dock .gc__play { background: rgba(255, 255, 255, .1); }
.gc__dock button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gc__dock button:disabled { opacity: .35; cursor: default; }
.gc__dock svg { width: 18px; height: 18px; }
.gc__play svg { width: 15px; height: 15px; }
.gc__dica { margin: 0; font: 400 11px/1.5 var(--fonte); color: rgba(255, 255, 255, .5); }
/* a janela do trailer: um <dialog> nativo; o player só existe enquanto ela está aberta */
.gc__janela { width: min(860px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 13px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: #11151C; color: #fff; box-shadow: 0 30px 100px rgba(0, 0, 0, .7); overflow: auto; }
.gc__janela::backdrop { background: rgba(2, 4, 8, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gc__janela[open] { animation: gc-entra .3s cubic-bezier(.22, 1, .36, 1); }
@keyframes gc-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.gc__janela-barra { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 3px 12px; }
.gc__janela-barra > span { display: flex; align-items: center; gap: 7px; font: 400 12px/1 var(--fonte); color: rgba(255, 255, 255, .62); }
.gc__janela-barra i { width: 5px; height: 5px; border-radius: 50%; background: #1DF28C; }
.gc__janela-barra button { display: flex; align-items: center; gap: 5px; min-height: 40px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 7px; background: rgba(255, 255, 255, .08); color: #fff; font: 500 12px/1 var(--fonte); cursor: pointer; }
.gc__janela-barra button svg { width: 15px; height: 15px; }
.gc__janela-video { aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #000; }
.gc__janela-video iframe, .gc__janela-video img { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
.gc__janela-legenda { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 5px 6px; }
.gc__janela-legenda h2 { margin: 0 0 7px; font: 600 1.4rem/1.2 var(--titulo); }
.gc__janela-legenda p { margin: 0; max-width: 540px; font: 400 13px/1.6 var(--fonte); color: rgba(255, 255, 255, .7); }
.gc__janela-legenda > span { margin-top: 5px; font: 400 11px/1.4 var(--fonte); color: rgba(255, 255, 255, .55); white-space: nowrap; }
.gc__externo { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin: 12px 5px 6px; padding: 11px 16px; border: 0; border-radius: 7px; background: #fff; color: #0B0D10; font: 600 13px/1 var(--fonte); text-decoration: none; cursor: pointer; }
.gc__externo svg { width: 15px; height: 15px; }
.gc__janela a:focus-visible, .gc__janela button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 600px) { .gc { height: 480px; } .gc__palco { perspective: 900px; } .gc__janela-legenda { flex-direction: column; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .gc__card, .gc__sombra, .gc__ver { transition: none; } .gc__janela[open] { animation: none; } }

/* o menu da Creative-TI no alto (no lugar do curso em destaque, pedido dele 13/11/2026): os botões do menu do site
   antigo, como vidro do modo teatro; passar o mouse acende em branco, como os botões da Netflix */
.cc__menu { margin: 4px 0 clamp(28px, 3.4vw, 44px); }
.cc__botoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cc__botoes a {
  display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 16px; border-radius: 6px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff;
  font: 600 .98rem/1.2 var(--fonte); text-decoration: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.cc__botoes a:hover, .cc__botoes a:focus-visible { background: #fff; border-color: #fff; color: #0B0D10; transform: translateY(-2px); }
.cc__botoes a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cc__botoes svg { flex: none; width: 22px; height: 22px; opacity: .92; }
.cc__largo { grid-column: span 2; }
.cc__largo a { justify-content: center; }
.cc__emoji { font-size: 1.15rem; line-height: 1; }
@media (max-width: 1100px) { .cc__botoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cc__largo { grid-column: auto; } }
@media (max-width: 760px) { .cc__botoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cc__botoes a { min-height: 52px; padding: 10px 12px; font-size: .9rem; } .cc__largo { grid-column: span 2; } }
.cc__bt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px 0 20px; border: 0; border-radius: 6px; font: 700 1rem/1 var(--fonte); text-decoration: none; cursor: pointer; transition: background-color .2s; }
.cc__bt svg { width: 22px; height: 22px; }
.cc__bt--branco { background: #fff; color: #000; }
.cc__bt--branco:hover { background: rgba(255, 255, 255, .8); }
.cc__bt--vidro { background: rgba(109, 109, 110, .6); color: #fff; }
.cc__bt--vidro:hover { background: rgba(109, 109, 110, .4); }

/* as fileiras, por categoria */
.cc__grupo { margin-top: 26px; }
.cc__grupo h3 { margin: 0 0 12px; font: 700 1.2rem/1.2 var(--fonte); color: rgba(255, 255, 255, .92); }
.cc__grade {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(118px, 9.4vw, 158px); gap: 12px;
  margin: 0 calc(-1 * clamp(24px, 3.4vw, 56px)); padding: 6px clamp(24px, 3.4vw, 56px) 12px; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 clamp(24px, 3.4vw, 56px); scrollbar-width: none;
}
.cc__grade::-webkit-scrollbar { display: none; }
.cc__grade li { scroll-snap-align: start; }
.cc__card { display: block; color: #fff; text-decoration: none; }
.cc__capa { position: relative; display: block; aspect-ratio: 496 / 890; border-radius: 8px; overflow: hidden; background: #161B24; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); transition: transform .3s var(--ease), box-shadow .3s; }
.cc__capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cc__capa.horizontal img { object-position: 62% center; }
.cc__card:hover .cc__capa, .cc__card:focus-visible .cc__capa { transform: translateY(-4px) scale(1.04); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 18px 36px -14px rgba(0, 0, 0, .9); }
.cc__card.ativo .cc__capa { box-shadow: 0 0 0 3px #fff, 0 18px 36px -14px rgba(0, 0, 0, .9); }
.cc__card:focus-visible { outline: none; }
.cc__nome { display: block; margin-top: 8px; font: 600 .82rem/1.25 var(--fonte); }
.cc__info { display: block; margin-top: 2px; font: 500 .74rem/1.3 var(--fonte); color: rgba(255, 255, 255, .6); }
.cc__aqui { position: absolute; left: 6px; top: 6px; padding: 4px 6px; border-radius: 3px; background: #fff; color: #000; font: 800 .6rem/1 var(--fonte); letter-spacing: .05em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .cc, .cc__ambiente img, .cc__capa { transition: none; } }

/* ---------------------------------------------------------------- o cartão (billboard) */
.nf__chips { display: none; }
.nf__cartao {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(612px, calc(100svh - 36px), 792px);   /* os 92 px que subiu, para o pé ficar onde estava */
  /* as margens dos lados voltaram, no jeito do modo teatro do YouTube, com a luz ambiente em volta (pedido dele, 13/11/2026,
     desfazendo o "de lado a lado"); o alto continua colado no topo, por baixo do cabeçalho, por isso só os cantos de baixo
     são arredondados; o contorno claro fino continua fora */
  border-radius: 0 0 22px 22px;
  overflow: hidden;
  background: var(--nf-fundo);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85);
}
.nf__midia { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.nf__video { position: absolute; inset: 0; }
.nf__video img, .nf__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; transition: opacity .8s ease; }
.nf__video video { opacity: 0; }
.nf__video video.hc-tocando { opacity: 1; }
.nf__video.hc-video-ok img { opacity: 0; }
/* o véu escuro da esquerda e de baixo, onde fica o texto */
.nf__midia::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 13, 16, .94) 0%, rgba(11, 13, 16, .78) 30%, rgba(11, 13, 16, .2) 58%, rgba(11, 13, 16, 0) 72%),
    linear-gradient(0deg, rgba(11, 13, 16, .85) 0%, rgba(11, 13, 16, 0) 38%),
    linear-gradient(180deg, rgba(11, 13, 16, .6) 0%, rgba(11, 13, 16, 0) 24%);   /* a sombra do alto, para ler o cabeçalho */
}

/* ---------------------------------------------------------------- o texto */
.nf__conteudo { position: relative; z-index: 2; width: 100%; max-width: 1000px; padding: calc(72px + 44px) clamp(28px, 4.2vw, 68px) 56px; }   /* 72 = o cabeçalho por cima */
.nf__selo { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font: 700 13px/1 var(--titulo); letter-spacing: .34em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.nf__selo img { width: 24px; height: 24px; border-radius: 50%; }
.nf__selo-estrelas { margin-left: -2px; font-size: 12px; letter-spacing: 1px; }   /* as 5 estrelas do "Creative Apresenta" (pedido dele, 13/11/2026) */
.nf__titulo { margin: 0; font: 800 clamp(52px, 6.2vw, 96px)/.95 var(--titulo); letter-spacing: -.025em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 4px 30px rgba(0, 0, 0, .35); }
.nf__subtitulo { margin: 6px 0 20px; font: 600 clamp(20px, 2.15vw, 33px)/1.05 var(--titulo); letter-spacing: .07em; text-transform: uppercase; }
.nf__meta { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 14px; padding: 0; list-style: none; font: 600 15px/1.4 var(--fonte); color: rgba(255, 255, 255, .9); }
.nf__meta li { display: inline-flex; align-items: center; gap: 6px; }
.nf__meta li + li::before { content: ''; width: 4px; height: 4px; margin: 0 11px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.nf__meta svg { width: 15px; height: 15px; color: var(--ouro); }
.nf__meta .nf__nota { color: #fff; }
/* a frase do prêmio usa a largura do texto: 1 ou 2 linhas no computador (pedido dele) */
.nf__premio { display: flex; align-items: flex-start; gap: 12px; max-width: 860px; margin: 0 0 26px; font: 500 17px/1.5 var(--fonte); color: rgba(255, 255, 255, .93); }
.nf__top1 { flex: none; width: 34px; height: auto; margin-top: 2px; border-radius: 3px; }

/* botões retos de cantos levemente arredondados, como os do aplicativo da Netflix (pedido dele: o mesmo do celular
   também no computador, no lugar das pílulas) */
.nf__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nf__bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; margin: 0; padding: 0 24px 0 20px; border: 0; border-radius: 6px;
  font: 700 17px/1 var(--fonte); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, transform .15s;
}
.nf__bt:active { transform: scale(.97); }
.nf__bt svg { flex: none; width: 22px; height: 22px; }
.nf__bt--branco { background: #fff; color: #000; }
.nf__bt--branco:hover { background: rgba(255, 255, 255, .8); }
.nf__bt--vidro { background: var(--nf-vidro); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nf__bt--vidro:hover { background: var(--nf-vidro-2); }
.nf__bt:focus-visible, .nf__redondo:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.nf__redondo {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 6px;
  background: var(--nf-vidro); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .2s;
}
.nf__redondo:hover { background: var(--nf-vidro-2); }
.nf__redondo svg { width: 22px; height: 22px; }

/* a prova social, como a da MasterClass: as fotos de alunos sobrepostas, trocando sozinhas, e o número ao lado */
.nf__prova { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; }
/* o grupo de avatares (pedido dele, 13/11/2026, a partir de um componente React com o Motion): fotos redondas
   sobrepostas, cada uma entra 14 px por baixo da anterior e a primeira fica por cima; com o mouse, o foco ou um toque, a
   foto sobe 10 px em 0,3 s, vem para a frente e o balão com o nome surge de baixo, de 70% a 100%, numa mola (a mesma do
   componente: rigidez 400, amortecimento 24, desenhada com linear()); o "+5 mil" no fim não reage */
.nf__rostos { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; }
.nf__rosto {
  position: relative; flex: none; width: 46px; height: 46px; margin: 0; padding: 0; border: 3px solid #0E1116; border-radius: 50%;
  background: #0E1116; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); transform: translateY(0); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.nf__rosto + .nf__rosto { margin-left: -14px; }
.nf__rosto:nth-child(1) { z-index: 6; }
.nf__rosto:nth-child(2) { z-index: 5; }
.nf__rosto:nth-child(3) { z-index: 4; }
.nf__rosto:nth-child(4) { z-index: 3; }
.nf__rosto:nth-child(5) { z-index: 2; }
.nf__rosto.ativo { z-index: 100; transform: translateY(-10px); }
.nf__rosto-foto { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #1b2433; -webkit-tap-highlight-color: transparent; }
.nf__rosto-foto:focus { outline: none; }
.nf__rosto-foto:focus-visible { outline: 2px solid rgba(255, 255, 255, .75); outline-offset: 4px; }
.nf__rosto-foto img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; transition: opacity .45s ease, transform .45s ease; }
.nf__rosto-foto img.trocando { opacity: 0; transform: scale(.85); }
.nf__rosto-nome {
  position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 2; margin: 0; padding: 4px 8px; border-radius: 4px;
  background: #fafafa; color: #171717; font: 600 12px/16px var(--fonte); letter-spacing: 0; white-space: nowrap; pointer-events: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .35), 0 4px 6px -4px rgba(0, 0, 0, .35);
  opacity: 0; transform: translate(-50%, 10px) scale(.7); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .18s ease;
}
@supports (transition-timing-function: linear(0, 1)) {
  .nf__rosto-nome { transition-timing-function: linear(0, .068, .227, .422, .615, .783, .914, 1.006, 1.062, 1.089, 1.095, 1.086, 1.07, 1.051, 1.033, 1.018, 1.006, .998, .993, .991, .991, .992, .994, .995, .997, 1), ease; }
}
.nf__rosto.ativo .nf__rosto-nome { opacity: 1; transform: translate(-50%, 0) scale(1); }
.nf__rosto--mais { z-index: 1; display: flex; align-items: center; justify-content: center; padding-left: 10px; background: #fafafa; color: #171717; font: 700 11px/1 var(--fonte); font-variant-numeric: tabular-nums; white-space: nowrap; transform: none; }
@media (prefers-reduced-motion: reduce) { .nf__rosto, .nf__rosto-nome { transition: none; } }
.nf__prova p { margin: 0; font: 500 15px/1.45 var(--fonte); color: rgba(255, 255, 255, .82); }
.nf__prova strong { color: #fff; font-weight: 700; }

/* o selinho do canto ("Videoaulas com acesso imediato") saiu a pedido dele (13/11/2026): virou só "Acesso Imediato",
   ao lado de "Certificado" nos dados do curso. A etiqueta vermelha "Acesso imediato" também foi desfeita: não recolocar. */

/* ---------------------------------------------------------------- a fileira dos módulos (como as fileiras da Netflix) */
.nf__fileira { position: relative; z-index: 2; margin-top: 34px; }
.nf__fileira-topo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; padding: 0 4px; }
.nf__fileira-topo h2 { margin: 0; font: 700 1.3rem/1.2 var(--fonte); color: rgba(255, 255, 255, .92); }
.nf__fileira-topo span { font: 500 .9rem/1.2 var(--fonte); color: rgba(255, 255, 255, .55); }
/* o leque dos módulos (pedido dele, 13/11/2026: o mesmo desenho do leque da aba Eventos da Área Lucca Ponce, o "Card Fan
   Carousel", com a mesma conta de lá): as capas em cartões altos de cantos bem arredondados, abertas em leque como cartas na
   mão, a do meio reta e na frente; o tamanho sai da largura do leque (cqw), não da tela; o JS diz o lugar de cada carta
   (--lx, --ly em cqw; --lr em graus; --ls a escala) e o CSS transita com a mola. Embaixo, as setas redondas de vidro escuro
   e os pontos. */
.nf-leque {
  position: relative; container-type: inline-size; display: flex; flex-direction: column; align-items: center;
  width: min(640px, 100%); margin: 0 auto; padding: 8px 0 4px;
  --nf-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  .nf-leque {
    --nf-mola: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163,
      1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%,
      1.004 83.8%, 1);
  }
}
.nf-leque__cartas { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 68cqw; }
.nf-leque__carta {
  position: absolute; width: 30cqw; height: 52.5cqw; overflow: clip; border: 1px solid rgba(255, 255, 255, .08); border-radius: 5cqw;
  background: #111218; box-shadow: 0 15px 35px rgba(0, 0, 0, .5); opacity: 0;
  transform: translate(calc(var(--lx, 0) * 1cqw), calc(var(--ly, 0) * 1cqw)) rotate(calc(var(--lr, 0) * 1deg)) scale(var(--ls, 1));
  transition: transform .5s var(--nf-mola), opacity .3s ease; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.nf-leque__carta img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* uma faixa invisível embaixo de cada carta: com ela erguida, o mouse logo abaixo continua nela */
.nf-leque__carta::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8cqw; height: 8cqw; }
.nf-leque__carta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* antes de aparecer, pequenas no centro; a entrada abre o leque com a mola mais longa (1,2 s), uma carta depois da outra */
.nf-leque--espera .nf-leque__carta { transform: translateY(18cqw) scale(.5); opacity: 0; transition: none; }
.nf-leque--entra .nf-leque__carta { transition: transform 1.2s var(--nf-mola), opacity .4s ease; }
.nf-leque__pe { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.nf-leque__ctrl { display: flex; align-items: center; gap: 10px; }
.nf-leque__seta {
  position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .1); border-radius: 50%; background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: rgba(255, 255, 255, .55); box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
  cursor: pointer; transition: color .3s, border-color .3s;
}
.nf-leque__seta::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(255, 255, 255, .04); border-radius: 50%; pointer-events: none; }
.nf-leque__seta:hover, .nf-leque__seta:focus-visible { border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .8); outline: none; }
.nf-leque__seta:active { opacity: .7; }
.nf-leque__seta svg { width: 15px; height: 15px; }
.nf-leque__pontos { display: flex; align-items: center; gap: 6px; }
.nf-leque__pontos i { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .15); transition: all .3s cubic-bezier(.4, 0, .2, 1); }
.nf-leque__pontos i.aceso { background: rgba(255, 255, 255, .8); transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) { .nf-leque__carta, .nf-leque--entra .nf-leque__carta { transition: opacity .2s ease; } }
/* as setas para os lados, como as da Netflix (só no computador e quando há o que rolar) */
.nf__seta {
  position: absolute; z-index: 3; top: 4px; bottom: 10px; width: 46px; display: grid; place-items: center; padding: 0; border: 0;
  background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; opacity: 0; transition: opacity .2s, background-color .2s;
}
.nf__seta svg { width: 26px; height: 26px; }
.nf__seta--esq { left: 0; border-radius: 10px 0 0 10px; }
.nf__seta--dir { right: 0; border-radius: 0 10px 10px 0; }
.nf__seta:focus-visible { opacity: 1; }
.nf__seta:hover { background: rgba(0, 0, 0, .75); }
@media (hover: none) { .nf__seta { display: none !important; } }

/* os módulos (pedido dele, 13/11/2026): o leque à esquerda e, no resto da largura, a sinopse do módulo sob o mouse, no
   jeito da sinopse de um filme na Netflix: a capa do módulo desfocada ao fundo, o número grande vazado no canto, os dados
   em pílulas, o título grande, a descrição, os tópicos em três cartões de vidro e a linha do curso (cada módulo da largura
   do seu tempo de aula). A cor de cada módulo (--h) vem da capa dele na seção "Conteúdo". */
.nf-modulos { display: grid; grid-template-columns: minmax(0, 41%) minmax(0, 1fr); align-items: center; gap: clamp(8px, 1.6vw, 28px); }
.nf-leque__carta:not([data-lugar]) { pointer-events: none; }        /* as cartas fora do leque não pegam o mouse */
.nf-leque__carta.ativo { border-color: rgba(255, 255, 255, .85); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 15px 35px rgba(0, 0, 0, .5); }
.nf-sinopse {
  --h: 205;
  position: relative; isolation: isolate; overflow: hidden; min-height: 450px; border-radius: 16px;
  container: sinopse / inline-size;
  border: 1px solid rgba(255, 255, 255, .1);
  background:
    radial-gradient(80% 110% at 100% 0%, hsl(var(--h) 75% 40% / .42), transparent 62%),
    linear-gradient(120deg, rgba(10, 12, 16, .94) 0%, rgba(14, 19, 30, .9) 100%);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .95);
}
.nf-sinopse[hidden] { display: none; }
.nf-sinopse__fundo { position: absolute; inset: 0 0 0 30%; z-index: -2; overflow: hidden; }
.nf-sinopse__fundo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: blur(26px) saturate(1.3); opacity: .5; transform: scale(1.25); }
.nf-sinopse__fundo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10, 12, 16) 0%, rgba(10, 12, 16, .55) 45%, rgba(10, 12, 16, .15) 100%); }
.nf-sinopse__numero {
  position: absolute; right: -.02em; top: -.2em; z-index: -1; pointer-events: none;
  font: 800 clamp(150px, 16vw, 250px)/1 var(--titulo); letter-spacing: -.05em; color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .16);
}
.nf-sinopse__corpo { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.6vw, 38px) clamp(22px, 2.8vw, 42px); }
.nf-sinopse__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font: 600 .82rem/1 var(--fonte); color: rgba(255, 255, 255, .78); }
.nf-sinopse__icone {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff;
  background: hsl(var(--h) 80% 55% / .24); border: 1px solid hsl(var(--h) 80% 72% / .38);
}
.nf-sinopse__icone svg { width: 18px; height: 18px; }
.nf-sinopse__rotulo { font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.nf-sinopse__pilula { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); }
.nf-sinopse__selo { padding: 6px 10px; border-radius: 4px; background: #fff; color: #0b0d10; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; }
.nf-sinopse__titulo { margin: 0; max-width: 26ch; font: 800 clamp(1.5rem, 1.05rem + 1.25vw, 2.25rem)/1.1 var(--titulo); letter-spacing: -.015em; color: #fff; text-wrap: balance; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
.nf-sinopse__desc { margin: 0; max-width: 64ch; font: 400 1rem/1.55 var(--fonte); color: rgba(255, 255, 255, .84); }
.nf-sinopse__grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
/* sinopse mais estreita (telas de computador menores): dois cartões em cima e o terceiro na fileira inteira, em duas colunas */
@container sinopse (max-width: 720px) {
  .nf-sinopse__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nf-sinopse__grupo:nth-child(3) { grid-column: 1 / -1; }
  .nf-sinopse__grupo:nth-child(3) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
}
.nf-sinopse__grupo {
  padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.nf-sinopse__grupo h4 { margin: 0 0 9px; font: 700 .76rem/1.2 var(--fonte); letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--h) 90% 78%); }
.nf-sinopse__grupo ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nf-sinopse__grupo li { position: relative; padding-left: 15px; font: 500 .86rem/1.4 var(--fonte); color: rgba(255, 255, 255, .88); }
.nf-sinopse__grupo li::before { content: ''; position: absolute; left: 0; top: .52em; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--h) 90% 66%); box-shadow: 0 0 8px hsl(var(--h) 90% 60%); }
.nf-sinopse__pe { display: flex; align-items: center; gap: 20px; margin-top: 4px; }
.nf-sinopse__linha { flex: 1; display: flex; gap: 4px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.nf-sinopse__linha li { flex-basis: 0; min-width: 0; }
.nf-sinopse__linha li::before { content: ''; display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); transition: background-color .3s; }
.nf-sinopse__linha li.aqui::before { background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .55); }
.nf-sinopse__linha span { display: block; margin-top: 7px; font: 700 .7rem/1 var(--fonte); color: rgba(255, 255, 255, .42); }
.nf-sinopse__linha li.aqui span { color: #fff; }
.nf-sinopse__link {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 6px;
  background: #fff; color: #000; font: 700 .9rem/1 var(--fonte); text-decoration: none; white-space: nowrap; transition: background-color .2s;
}
.nf-sinopse__link:hover { background: rgba(255, 255, 255, .82); }
.nf-sinopse__link svg { width: 17px; height: 17px; }
@media (max-width: 860px) {
  .nf-modulos { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .nf-sinopse { min-height: 0; }
  .nf-sinopse__fundo { inset: 0; }
  .nf-sinopse__numero { font-size: 130px; }
  .nf-sinopse__corpo { padding: 22px 18px; gap: 12px; }
  .nf-sinopse__titulo { padding-right: 70px; }
  /* no celular, os três cartões de tópicos numa fileira de deslizar para o lado (a sinopse não fica comprida) */
  .nf-sinopse__grupos { display: flex; gap: 10px; margin-inline: -18px; padding: 0 18px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none; }
  .nf-sinopse__grupos::-webkit-scrollbar { display: none; }
  .nf-sinopse__grupo { flex: 0 0 84%; scroll-snap-align: start; }
  .nf-sinopse__grupo:nth-child(3) ul { grid-template-columns: minmax(0, 1fr); }
  .nf-sinopse__pe { flex-direction: column; align-items: stretch; gap: 16px; }
  .nf-sinopse__link { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .nf__tile { transition: none; } }

/* ---------------------------------------------------------------- o conteúdo programático reimaginado (pedido dele,
   13/11/2026: "mais moderna e intuitiva", com o PDF sincronizado com a aba Propostas e Materiais). Em cima: o título, a
   ficha do curso em pílulas e o cartão do PDF (as 3 primeiras folhas do PDF em leque, que se abre com o mouse); depois a
   trilha das 6 aulas (netflix.js parte 11); as aulas viram um caminho: o número em círculo ligado ao da próxima aula por
   uma linha, cada aula num cartão, os grupos de tópicos à mostra no resumo e, aberta, os tópicos em 3 cartões. */
body.nf-pagina .conteudo { background: radial-gradient(55% 35% at 100% 0%, rgba(46, 118, 151, .16), rgba(46, 118, 151, 0) 70%), var(--fundo); }
.cp__topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: clamp(20px, 3vw, 48px); align-items: center; margin-bottom: 28px; }
.cp__topo .titulo-2 { max-width: 21ch; }
.cp__ficha { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.cp__ficha li { display: flex; align-items: baseline; gap: 7px; padding: 9px 13px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); }
.cp__ficha strong { font: 700 1.08rem/1 var(--titulo); color: #fff; white-space: nowrap; }
.cp__ficha span { font: 500 .82rem/1.2 var(--fonte); color: rgba(255, 255, 255, .66); }
.cp__pdf {
  position: relative; display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: 18px; overflow: hidden;
  padding: 18px 20px 18px 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .12); color: #fff; text-decoration: none;
  background: radial-gradient(90% 120% at 0% 100%, rgba(46, 118, 151, .38), rgba(46, 118, 151, 0) 70%), rgba(255, 255, 255, .03);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .9); transition: border-color .25s, transform .25s var(--ease);
}
.cp__pdf:hover, .cp__pdf:focus-visible { border-color: rgba(255, 255, 255, .3); transform: translateY(-2px); outline: none; }
.cp__pdf-folhas { position: relative; height: 128px; }
.cp__pdf-folhas img {
  position: absolute; left: 50%; bottom: 0; width: 64px; height: auto; margin-left: -32px; border-radius: 5px;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .12); transform-origin: 50% 100%;
  transition: transform .45s var(--ease);
}
.cp__pdf-folhas img:nth-child(1) { transform: translateX(-26px) rotate(-14deg) scale(.92); }
.cp__pdf-folhas img:nth-child(2) { transform: translateX(26px) rotate(14deg) scale(.92); }
.cp__pdf:hover .cp__pdf-folhas img:nth-child(1), .cp__pdf:focus-visible .cp__pdf-folhas img:nth-child(1) { transform: translateX(-38px) rotate(-20deg) scale(.95); }
.cp__pdf:hover .cp__pdf-folhas img:nth-child(2), .cp__pdf:focus-visible .cp__pdf-folhas img:nth-child(2) { transform: translateX(38px) rotate(20deg) scale(.95); }
.cp__pdf:hover .cp__pdf-folhas img:nth-child(3), .cp__pdf:focus-visible .cp__pdf-folhas img:nth-child(3) { transform: translateY(-6px) scale(1.04); }
.cp__pdf-folhas b { position: absolute; left: 50%; bottom: -4px; z-index: 2; transform: translateX(4px); padding: 4px 7px; border-radius: 5px; background: #E5484D; color: #fff; font: 800 .64rem/1 var(--fonte); letter-spacing: .06em; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .7); }
.cp__pdf-txt strong { display: block; font: 700 1.08rem/1.25 var(--titulo); }
.cp__pdf-txt > span { display: block; margin-top: 6px; font: 500 .86rem/1.45 var(--fonte); color: rgba(255, 255, 255, .7); }
.cp__pdf-txt > .cp__pdf-bt {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-top: 14px; padding: 0 16px; border-radius: 6px;
  background: #fff; color: #000; font: 700 .9rem/1 var(--fonte); transition: background-color .2s;
}
.cp__pdf:hover .cp__pdf-bt { background: rgba(255, 255, 255, .85); }
.cp__pdf-bt svg { width: 17px; height: 17px; }
/* a trilha das aulas */
.cp__trilha { margin: 0 0 16px; padding: 16px 18px 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); }
.cp__trilha-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cp__trilha-rotulo { margin: 0; font: 700 .76rem/1 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.cp__todas { flex: none; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font: 600 .84rem/1 var(--fonte); cursor: pointer; transition: background-color .2s, border-color .2s; }
.cp__todas:hover, .cp__todas[aria-pressed="true"] { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); }
.cp__trilha-barra { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cp__trilha-barra li { flex-basis: 0; min-width: 0; }
.cp__trilha-barra button { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.cp__trilha-barra button::before {
  content: ''; display: block; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, hsl(var(--h) 55% 38% / .7), hsl(var(--h) 70% 55% / .85)); transition: filter .2s, box-shadow .2s;
}
.cp__trilha-barra button:hover::before, .cp__trilha-barra button:focus-visible::before, .cp__trilha-barra button.aceso::before { filter: brightness(1.4); box-shadow: 0 0 14px hsl(var(--h) 80% 60% / .6); }
.cp__trilha-barra button:focus-visible { outline: none; }
.cp__trilha-n { overflow: hidden; font: 700 .78rem/1.1 var(--fonte); color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.cp__trilha-t { font: 500 .74rem/1 var(--fonte); color: rgba(255, 255, 255, .55); }
/* os grupos de tópicos no resumo de cada aula */
.episodio__grupos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.episodio__grupos i { padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); font: 600 .74rem/1.2 var(--fonte); font-style: normal; color: rgba(255, 255, 255, .82); }
.episodio__grupos b { margin-left: 2px; font: 700 .74rem/1 var(--fonte); color: var(--azul-claro); }
/* as aulas como um caminho (computador e tablet; no celular fica o desenho do pagina.css, só com os cartões) */
body.nf-pagina .episodios { position: relative; display: grid; gap: 12px; border-top: 0; }
body.nf-pagina .episodio { position: relative; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; background: rgba(255, 255, 255, .02); transition: border-color .25s, background-color .25s; }
body.nf-pagina .episodio:hover { border-color: rgba(255, 255, 255, .16); }
body.nf-pagina .episodio[open] { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04); }
body.nf-pagina .episodio[open] summary { background: none; }
body.nf-pagina .episodio .topicos > div { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .035); }
body.nf-pagina .episodio .topicos h4 { color: hsl(var(--h, 205) 75% 76%); }
@media (min-width: 721px) {
  body.nf-pagina .episodio summary { grid-template-columns: 48px 168px minmax(0, 1fr) 40px; gap: 22px; align-items: start; padding: 18px 18px 18px 16px; }
  body.nf-pagina .episodio__num {
    display: grid; place-items: center; width: 44px; height: 44px; margin-top: 2px; border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .24); background: #0d1118; font: 700 1rem/1 var(--titulo); color: #fff;
    transition: background-color .3s, border-color .3s, box-shadow .3s;
  }
  body.nf-pagina .episodio[open] .episodio__num { border-color: transparent; background: linear-gradient(135deg, #2E7697, #3E9BC6); box-shadow: 0 0 0 4px rgba(62, 155, 198, .2); }
  /* a linha que liga o número de uma aula ao da próxima */
  body.nf-pagina .episodio:not(:last-child)::after {
    content: ''; position: absolute; left: 37px; top: 66px; bottom: -34px; z-index: 0; width: 2px; pointer-events: none;
    background: linear-gradient(180deg, rgba(62, 155, 198, .55), rgba(62, 155, 198, .15));
  }
  body.nf-pagina .episodio summary > * { position: relative; z-index: 1; }
  body.nf-pagina .episodio__capa { border-radius: 10px; }
  body.nf-pagina .episodio__abrir { width: 40px; height: 40px; margin-top: 4px; }
  body.nf-pagina .episodio__corpo { padding: 0 18px 20px calc(16px + 48px + 22px); }
  body.nf-pagina .episodio .topicos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  body.nf-pagina .episodio summary { grid-template-columns: 48px 130px minmax(0, 1fr) 40px; gap: 18px; }
  body.nf-pagina .episodio .topicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp__topo { grid-template-columns: minmax(0, 1fr); }
  .cp__pdf { max-width: 520px; }
}
@media (max-width: 720px) {
  .cp__topo { grid-template-columns: minmax(0, 1fr); margin-bottom: 20px; }
  .cp__ficha li { padding: 8px 11px; }
  .cp__pdf { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 14px 14px 14px 8px; }
  .cp__pdf-folhas { height: 104px; }
  .cp__pdf-folhas img { width: 52px; margin-left: -26px; }
  .cp__pdf-folhas img:nth-child(1) { transform: translateX(-20px) rotate(-14deg) scale(.92); }
  .cp__pdf-folhas img:nth-child(2) { transform: translateX(20px) rotate(14deg) scale(.92); }
  .cp__trilha { padding: 14px 12px 12px; }
  .cp__trilha-topo { flex-wrap: wrap; }
  .cp__trilha-n { font-size: .74rem; }
  .cp__trilha-n .cp__so-largo { display: none; }   /* no celular, só o número da aula ("Aula 6" não cabe no trecho mais curto) */
  .cp__trilha-t { font-size: .66rem; }
  body.nf-pagina .episodio summary { padding: 16px 14px; }
  body.nf-pagina .episodio__corpo { padding: 0 14px 18px; }
  body.nf-pagina .episodio .topicos { gap: 10px; }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .nf__titulo { font-size: clamp(48px, 6.4vw, 72px); }
}

/* os botões de vidro pegam a cor do vídeo, como os do modo ambiente do YouTube (pedido dele, 13/11/2026): o netflix.js
   tira a cor média do vídeo a cada segundo e grava em --nf-luz; sem ela, fica o azul do vídeo */
.nf { --nf-luz: 52, 78, 122; }
/* mais transparentes e com menos cor do fundo (pedido dele, 13/11/2026): um véu claro com só um toque da cor do vídeo,
   sem o realce de saturação do desfoque */
.nf__bt--vidro, .nf__redondo {
  background: linear-gradient(rgba(var(--nf-luz), .16), rgba(var(--nf-luz), .16)), rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: background-color 1.2s ease, border-color .2s, transform .15s;
}
.nf__bt--vidro:hover, .nf__redondo:hover { background: linear-gradient(rgba(var(--nf-luz), .26), rgba(var(--nf-luz), .26)), rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .36); }
.nf__emoji { font-size: 1.15em; line-height: 1; }

/* ---------------------------------------------------------------- o vídeo de apresentação em modo teatro */
.teatro { position: relative; overflow: hidden; padding: clamp(36px, 4.5vw, 64px) 0; background: #050607; }
.teatro__luz { position: absolute; inset: 0; pointer-events: none; }
.teatro__luz img { position: absolute; left: -10%; top: -20%; width: 120%; height: 140%; object-fit: cover; filter: blur(90px) saturate(1.6) brightness(.8); opacity: .7; }
.teatro__luz::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 75% at 50% 50%, rgba(5, 6, 7, 0) 30%, rgba(5, 6, 7, .75) 100%); }
.teatro__dentro { position: relative; width: min(1180px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.teatro__titulo { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font: 700 1.3rem/1.2 var(--fonte); color: rgba(255, 255, 255, .94); }
.teatro__titulo span { font: 500 .92rem/1 var(--fonte); color: rgba(255, 255, 255, .55); }
.teatro__tela { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 120px -30px rgba(0, 0, 0, .95); }
.teatro__tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.teatro__capa { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.teatro__capa img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); transition: filter .3s; }
.teatro__capa:hover img { filter: brightness(1); }
.teatro__play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .5); border: 2px solid rgba(255, 255, 255, .85); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.teatro__play svg { width: 32px; height: 32px; margin-left: 5px; }
.teatro__capa:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.teatro__som {
  position: absolute; z-index: 2; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; background: rgba(10, 10, 10, .7); color: #fff; font: 700 .9rem/1 var(--fonte); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.teatro__som:hover { background: rgba(30, 30, 30, .85); }
.teatro__som:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 760px) { .teatro__dentro { width: calc(100% - 32px); } .teatro__tela { border-radius: 10px; } .teatro__titulo { font-size: 1.1rem; } .teatro__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; } }

/* o vídeo imersivo (pedido dele, 13/11/2026): tela maior, prévia limpa sem os botões do YouTube, o convite "Assistir com
   som" e o modo cinema (o resto da página escurece e a luz em volta do vídeo acende enquanto ele toca com som) */
.teatro .teatro__dentro { width: min(1360px, calc(100% - 2 * var(--gutter))); }
.teatro__tela { isolation: isolate; transition: box-shadow .6s ease; }
.teatro__tela iframe { z-index: 1; }
.teatro__tela--convite .teatro__play { display: none; }   /* com o convite "Assistir com som", a capa não mostra o outro play */
.teatro__convite {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 14px; padding: 12px 26px 12px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .34); background: rgba(10, 12, 16, .5); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .95);
  transition: transform .25s var(--ease), background-color .2s; animation: convite-entra .7s var(--ease) both;
}
.teatro__convite:hover { background: rgba(255, 255, 255, .16); transform: translate(-50%, -50%) scale(1.04); }
.teatro__convite:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.teatro__convite-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #0B0D10; animation: convite-pulso 2.4s ease-out infinite; }
.teatro__convite-ic svg { width: 26px; height: 26px; }
.teatro__convite-txt { display: grid; gap: 3px; text-align: left; }
.teatro__convite-txt strong { font: 700 1.12rem/1.1 var(--fonte); }
.teatro__convite-txt small { font: 500 .8rem/1.2 var(--fonte); color: rgba(255, 255, 255, .72); }
@keyframes convite-pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 100% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); } }
@keyframes convite-entra { from { opacity: 0; transform: translate(-50%, -35%); } }
.teatro__linha { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .16); pointer-events: none; }
.teatro__linha span { display: block; width: 0; height: 100%; background: #fff; transition: width .4s linear; }
/* modo cinema: um véu escuro sobre a página toda, com o vídeo por cima e a luz dele acesa */
body.nf-pagina::after { content: ''; position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .86); opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
html.teatro-cinema body.nf-pagina::after { opacity: 1; visibility: visible; transition: opacity .6s ease; cursor: zoom-out; }
.teatro--cinema { z-index: 61; }
.teatro--cinema .teatro__tela { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 0 140px -10px rgba(var(--nf-luz, 52, 78, 122), .75), 0 40px 120px -30px rgba(0, 0, 0, .95); }
.teatro--cinema .teatro__luz img, .teatro--cinema .cplay__luz img { opacity: 1; animation: luz-respira 6s ease-in-out infinite; }
@keyframes luz-respira { 50% { transform: scale(1.08); opacity: .8; } }
html.teatro-cinema .barra-fixa, html.teatro-cinema .whats-flutuante { opacity: 0; pointer-events: none; }
html.teatro-cinema .nav { opacity: .12; pointer-events: none; }
@media (max-width: 760px) {
  .teatro__convite { gap: 10px; padding: 8px 18px 8px 8px; }
  .teatro__convite-ic { width: 44px; height: 44px; }
  .teatro__convite-ic svg { width: 22px; height: 22px; }
  .teatro__convite-txt strong { font-size: 1rem; }
  .teatro__convite-txt small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .teatro__convite, .teatro__convite-ic, .teatro--cinema .teatro__luz img { animation: none; } }

/* o botão de compra que se repete pela página e a caixa do preço (pedido dele, 13/11/2026, com as imagens de exemplo):
   o verde aceso com as bandeiras de pagamento embaixo; na caixa, 12x em destaque e os motivos para comprar agora */
.compra { display: grid; justify-items: center; gap: 14px; width: min(760px, calc(100% - 32px)); margin: clamp(34px, 4.4vw, 56px) auto 0; text-align: center; }
/* o botão de compra no desenho da imagem dele (13/11/2026: "Troque todos os botões da página para esse ... com o texto
   'QUERO ACESSAR ESSA EXPERIÊNCIA'"): pílula com o degradê do verde-escuro (esquerda) ao verde-menta (direita), a grade de
   pontinhos clareando para a direita, o contorno duplo (o anel escuro por fora e o fio claro por dentro) e o texto branco em
   maiúsculas, numa linha só */
.compra__bt {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 68px; padding: 14px 28px; border-radius: 999px;
  border: 1px solid rgba(170, 255, 212, .38);
  background: linear-gradient(100deg, #0a2116 0%, #11402a 30%, #1f7a4d 58%, #44c58a 82%, #7ef0bd 100%);
  color: #fff; font: 800 1.3rem/1.15 var(--fonte); letter-spacing: .015em; text-transform: uppercase;
  text-decoration: none; text-align: center; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  container-type: inline-size;   /* a letra do texto (o span) acompanha a largura do próprio botão, para caber numa linha */
  box-shadow: 0 0 0 3px #161b18, inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -12px 26px rgba(0, 0, 0, .22), 0 18px 42px -20px rgba(68, 197, 138, .7);
  transition: transform .2s var(--ease), filter .2s, box-shadow .2s;
}
/* a grade de pontinhos, mais forte à direita */
.compra__bt::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(255, 255, 255, .7) 1px, transparent 1.4px); background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, rgba(0, 0, 0, .5) 60%, #000 92%); mask-image: linear-gradient(90deg, transparent 30%, rgba(0, 0, 0, .5) 60%, #000 92%);
}
.compra__bt:hover { transform: translateY(-2px); filter: brightness(1.08) saturate(1.05); box-shadow: 0 0 0 3px #161b18, inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -12px 26px rgba(0, 0, 0, .2), 0 22px 48px -18px rgba(68, 197, 138, .85); }
.compra__bt:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.compra__bandeiras { display: block; width: min(500px, 92%); height: auto; aspect-ratio: 560 / 40; color: rgba(255, 255, 255, .9); }
/* "QUERO ACESSO IMEDIATO A ESSA EXPERIÊNCIA" (texto dele, 13/11/2026; antes "QUERO ACESSAR ESSA EXPERIÊNCIA") mede cerca de
   25,5 vezes a letra: 3,6% da largura de dentro do botão cabe numa linha com folga */
.compra__bt > span { font-size: clamp(10px, 3.6cqw, 1.3rem); }
.compra__bt--bloco { min-height: 62px; padding: 12px 16px; }   /* na caixa do preço, mais estreita */
.compra__bt--bloco > span { font-size: clamp(10px, 3.6cqw, 1.05rem); }
@media (max-width: 760px) { .compra__bt { min-height: 60px; padding: 12px 16px; } }
/* no cartão "Para empresas", o botão fica numa coluna do tamanho do conteúdo: largura dada, para ele não encolher */
body.nf-pagina .equipe__cartao .compra { width: 420px; max-width: 100%; }
/* o pagina.css pinta os links da garantia de azul; o botão de compra continua branco */
.gar .compra__bt { color: #fff; }
/* a garantia no desenho da imagem dele (13/11/2026): o cartão escuro com a luz verde no canto de baixo à esquerda e a grade
   de pontinhos; à esquerda, o texto e as três condições em vidro; à direita, os selos verdes em cartões de vidro, em duas
   colunas desencontradas, cortados pela borda do cartão */
body.nf-pagina .gar { padding-block: clamp(56px, 7vw, 100px); }
.gar__cartao {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  min-height: 600px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(60% 55% at 0% 100%, rgba(120, 245, 180, .6), rgba(40, 150, 95, .28) 42%, rgba(20, 60, 40, 0) 72%),
    linear-gradient(160deg, #2b312d 0%, #151917 46%, #0b0d0c 100%);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9);
}
.gar__cartao::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.3px); background-size: 6px 6px;
  -webkit-mask-image: radial-gradient(80% 80% at 10% 80%, #000, transparent 70%); mask-image: radial-gradient(80% 80% at 10% 80%, #000, transparent 70%);
}
.gar__texto { display: flex; flex-direction: column; align-items: center; padding: clamp(36px, 4.6vw, 60px) clamp(22px, 4vw, 56px); text-align: center; }
.gar__rotulo { margin: 0; font: 700 .8rem/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
.gar__titulo {
  margin: 18px 0 0; font: 500 clamp(1.75rem, 1.3rem + 1.5vw, 2.45rem)/1.15 var(--fonte); letter-spacing: -.02em;
  background: linear-gradient(90deg, #fff 0%, #fff 48%, rgba(255, 255, 255, .55) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gar__se { margin: 20px 0 14px; font: 600 1rem/1.4 var(--fonte); color: rgba(255, 255, 255, .62); }
.gar__lista { display: grid; gap: 10px; width: 100%; max-width: 460px; margin: 0; padding: 0; list-style: none; }
.gar__lista li {
  display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 18px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 24px -14px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 700 1rem/1.3 var(--fonte); color: #fff;
}
.gar__volta { margin: 18px 0 22px; font: 600 1rem/1.4 var(--fonte); color: rgba(255, 255, 255, .55); }
.gar__texto .compra__bt { max-width: 460px; }
.gar__nota { margin: 18px 0 0; max-width: 440px; font: 400 .9rem/1.5 var(--fonte); color: rgba(255, 255, 255, .55); }
/* contain: size = os selos não mandam na altura do cartão (quem manda é o texto); o que passa da borda é cortado */
.gar__selos { position: relative; contain: size; display: grid; grid-template-columns: 48% 48%; gap: 14px; align-content: start; padding-left: 10%; }
.gar__coluna { display: flex; flex-direction: column; gap: 14px; margin-top: -110px; }
.gar__coluna--b { margin-top: 20px; }
.gar__selo {
  flex: none; display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px -20px rgba(0, 0, 0, .9);
}
.gar__selo svg { width: 46%; height: 46%; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45)); }
@media (max-width: 860px) {
  .gar__cartao { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .gar__selos { display: none; }   /* no celular, só o texto e o botão (os selos são enfeite) */
}
/* embaixo de cada botão de compra, os alunos e as estrelas (pedido dele, 13/11/2026, com a imagem de exemplo): uma pílula
   escura com 7 fotos de alunos sobrepostas (as mesmas fotos do topo, assets/img/alunos) e 5 estrelas em quadradinhos */
.compra__prova {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 5px 8px 5px 6px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .09); background: rgba(0, 0, 0, .42);
}
.compra__rostos { display: flex; flex: none; }
.compra__rostos img { display: block; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid #0d1013; background: #1c2128; }
.compra__rostos img + img { margin-left: -7px; }
.compra__estrelas { display: flex; flex: none; gap: 3px; }
.compra__estrelas i {
  display: grid; place-items: center; width: 19px; height: 19px; border-radius: 4px; font: normal 12px/1 Arial, sans-serif; color: #FFC531;
  background: rgba(255, 197, 49, .14); border: 1px solid rgba(255, 197, 49, .34);
}
.compra .compra__prova { margin-top: -4px; }
.gar__texto .compra__prova { margin-top: 14px; }
@media (max-width: 380px) { .compra__rostos img:nth-child(n+6) { display: none; } }   /* nos celulares bem estreitos, 5 fotos */

/* a caixa do preço no jeito da imagem dele (13/11/2026), mais moderna e com toda a lista: o cartão escuro com a luz AZUL no
   canto de baixo à esquerda (na imagem era laranja; ele pediu o azul da página) e a grade de pontinhos; o título "Tudo o
   que você recebe…"; o curso em destaque com o preço; as duas colunas (Creative-TI "Incluído" e HubClub "Grátis"); os
   bônus em azul; embaixo, o preço grande em 12x, o botão e os alunos */
.preco {
  position: relative; isolation: isolate; overflow: hidden; max-width: 1120px; margin: 0 auto;
  padding: clamp(30px, 4vw, 52px) clamp(18px, 4vw, 56px) clamp(28px, 4vw, 46px); border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  background:
    radial-gradient(60% 42% at 0% 100%, rgba(45, 125, 255, .6), rgba(30, 85, 210, .24) 45%, rgba(20, 50, 140, 0) 75%),
    radial-gradient(45% 28% at 100% 0%, rgba(70, 140, 255, .16), rgba(70, 140, 255, 0) 70%),
    linear-gradient(180deg, #121722 0%, #0b0d12 58%, #0a0c10 100%);
  box-shadow: 0 40px 100px -50px rgba(0, 0, 0, .95);
}
.preco::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .28;
  background-image: radial-gradient(rgba(255, 255, 255, .45) 1px, transparent 1.3px); background-size: 6px 6px;
  -webkit-mask-image: radial-gradient(70% 55% at 10% 95%, #000, transparent 75%); mask-image: radial-gradient(70% 55% at 10% 95%, #000, transparent 75%);
}
.preco__marcas { margin: 0; text-align: center; font: 700 .76rem/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .32em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.preco__marcas i { font-style: normal; margin: 0 .35em; color: #7fb0ff; }
.preco__titulo { margin: 14px 0 26px; text-align: center; font: 600 clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem)/1.15 var(--fonte); letter-spacing: -.02em; color: #fff; }
.preco__curso, .preco__lista, .preco__bonus { margin: 0; padding: 0; list-style: none; }
.preco__item {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .06); font: 500 .93rem/1.35 var(--fonte); color: rgba(255, 255, 255, .88);
}
.preco__item strong { color: #fff; }
.preco__selo { width: 22px; height: 22px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.preco__tag {
  justify-self: end; padding: 5px 9px; border-radius: 6px; border: 1px solid rgba(94, 230, 160, .45); background: rgba(94, 230, 160, .1);
  font: 800 .66rem/1 var(--fonte); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #5ee6a0;
}
.preco__tag--valor { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .08); color: #fff; font-size: .78rem; letter-spacing: .01em; }
.preco__tag--bonus { border-color: rgba(120, 170, 255, .5); background: rgba(80, 140, 255, .12); color: #9cc2ff; }
.preco__item--curso { margin-bottom: 20px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .05); font-size: 1.02rem; }
.preco__item--bonus .preco__selo { filter: hue-rotate(68deg) saturate(1.25) drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }   /* o selo azul dos bônus */
.preco__colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); }
.preco__grupo {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0 4px 9px; border-bottom: 1px solid rgba(255, 255, 255, .16);
  font: 800 .8rem/1.2 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.preco__grupo span { font-weight: 500; letter-spacing: .02em; text-transform: none; color: rgba(255, 255, 255, .5); }
.preco__bonus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); margin-top: 8px; }
.preco__fecho { display: grid; justify-items: center; gap: 8px; margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .12); text-align: center; }
.preco__acesso { margin: 0; font: 600 .92rem/1.3 var(--fonte); color: rgba(255, 255, 255, .68); }
.preco__valor { margin: 2px 0 0; font: 800 clamp(3rem, 2rem + 3.4vw, 4.6rem)/1 var(--titulo); letter-spacing: -.03em; color: #fff; white-space: nowrap; }
.preco__valor small { margin-right: .25em; font: 600 .3em/1 var(--fonte); letter-spacing: 0; color: rgba(255, 255, 255, .72); vertical-align: middle; }
.preco__valor sup { font-size: .42em; letter-spacing: 0; vertical-align: .95em; }
.preco__avista { margin: 0; font: 500 .95rem/1.4 var(--fonte); color: rgba(255, 255, 255, .7); }
.preco__dia { margin: 0; font: 600 .92rem/1.3 var(--fonte); color: #1DF28C; }
.preco__fecho .compra__bt { max-width: 480px; margin-top: 12px; }
.preco__fecho .compra__prova { margin-top: 4px; }
.preco__fecho .compra__bandeiras { width: min(420px, 92%); margin-top: 6px; }
.preco__pix { max-width: 560px; margin: 6px 0 0; font: 500 .9rem/1.5 var(--fonte); color: rgba(255, 255, 255, .72); }
.preco__pix strong { color: #fff; }
.preco__pix a { color: #9cc2ff; font-weight: 600; }
.preco__nota { max-width: 1120px; margin: 14px auto 0; text-align: center; }
@media (max-width: 760px) {
  .preco__colunas, .preco__bonus { grid-template-columns: minmax(0, 1fr); }
  /* no celular, a etiqueta de cada linha sai (o título do grupo já diz "incluído" e "Grátis"): cada item numa linha só */
  .preco__lista .preco__tag { display: none; }
  .preco__lista .preco__item { grid-template-columns: 20px minmax(0, 1fr); }
  .preco__grupo span { color: #5ee6a0; }
  .preco__coluna + .preco__coluna { margin-top: 22px; }
  .preco__bonus { margin-top: 18px; }
  .preco__item { gap: 10px; padding: 10px 2px; font-size: .9rem; }
  .preco__item--curso { padding: 12px; font-size: .95rem; }
}
/* a frase do momento em cima do botão e as garantias embaixo (varredura de conversão, 13/11/2026) */
.compra__titulo { margin: 0; font: 700 clamp(1.05rem, .95rem + .5vw, 1.35rem)/1.25 var(--titulo); color: #fff; text-wrap: balance; }
.compra__garantias { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; font: 600 .84rem/1.3 var(--fonte); color: rgba(255, 255, 255, .78); }
.compra__garantias span { display: inline-flex; align-items: center; gap: 6px; }
.compra__garantias span::before { content: ''; width: 14px; height: 14px; flex: none; border-radius: 50%; background: #1DF28C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2304121C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 10px no-repeat; }
.compra--fecho { margin-top: 10px; }
.final__ajuda { margin-top: 18px; }
/* a barra fixa: o botão verde, menor */
.compra__bt--barra { container-type: normal; flex: none; width: auto; min-height: 44px; padding: 10px 18px; font-size: .95rem; text-transform: none; white-space: nowrap; animation: none; box-shadow: 0 0 22px rgba(29, 242, 140, .45); }
/* o fecho centralizado, com o botão de compra no meio (varredura de conversão) */
body.nf-pagina .final .final__conteudo { justify-items: center; text-align: center; }
body.nf-pagina .final .final__titulo { max-width: 24ch; }
body.nf-pagina .final .texto-grande { max-width: 62ch; }
/* no celular, o número grande do cenário não fica por baixo do título */
@media (max-width: 760px) { body.nf-pagina .cena { padding-top: 92px; min-height: 0; } }
.plano__dia { margin: 0; font: 600 .92rem/1.3 var(--fonte); color: #1DF28C; }
.plano__nota { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 4px 0 0; font: 500 .86rem/1.3 var(--fonte); color: rgba(255, 255, 255, .78); }
.plano__nota b { color: #fff; }
.plano__estrelas { color: #F5A623; letter-spacing: 2px; }
@media (prefers-reduced-motion: reduce) { .compra__bt { animation: none; } }
/* a caixa do preço */
body.nf-pagina .plano--destaque { position: relative; overflow: hidden; align-items: center; text-align: center; background: linear-gradient(180deg, #080C2C, #05071C); border: 1px solid rgba(255, 255, 255, .1); }
body.nf-pagina .plano--destaque::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #8A2BE2, #3B6CFF 55%, #21A0FF); }
.plano--destaque .plano__selo { align-self: center; }
.plano--destaque .plano__topo { justify-content: center; }
.plano--destaque .plano__cartaz { display: none; }
.plano--destaque .plano__nome { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); }
.plano--destaque .plano__nome span { color: #4C9BFF; }
.plano__oferta { margin: 0; font: 600 clamp(.92rem, .86rem + .3vw, 1.08rem)/1.4 var(--fonte); letter-spacing: .02em; text-transform: uppercase; color: #3E9BFF; }
.plano--destaque .plano__preco { justify-content: center; color: #1DF28C; font-size: clamp(3rem, 2.2rem + 3vw, 4.4rem); font-style: italic; }
.plano--destaque .plano__preco small { color: #fff; font-size: .48em; font-style: italic; }
.plano--destaque .plano__avista { margin: 0; font-size: 1.05rem; color: rgba(255, 255, 255, .9); }
.plano__fatores { display: grid; gap: 4px; margin: 6px 0 4px; padding: 0; list-style: none; }
.plano__fatores li { font: 600 .8rem/1.3 var(--fonte); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.plano__fatores li:first-child { font: 800 1rem/1.2 var(--fonte); letter-spacing: .28em; color: #1DF28C; }
.plano--destaque .compra__bandeiras { margin: 2px auto 0; width: 86%; }
.plano--destaque .oferta__pix { text-align: center; }

/* a apresentação no jeito do topo da creative-ti.com/treinamentos (pedido dele, 13/11/2026: "deixa de ser em tela cheia"):
   o selo com as estrelas, o título, a frase e os dois botões em pílula à esquerda; o vídeo arredondado à direita, com o
   "Ativar som" no canto; no celular, o vídeo em cima e os botões um embaixo do outro */
.teatro--heroi { padding: clamp(44px, 5.5vw, 80px) 0; }
.teatro--heroi .teatro__dentro { width: min(1280px, calc(100% - 2 * var(--gutter))); }
.teatro__grade { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.teatro__texto { min-width: 0; }
.teatro__selo {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; border-radius: 999px;
  border: 1px solid rgba(118, 183, 213, .32); background: rgba(46, 118, 151, .16); font: 600 .8rem/1.2 var(--titulo); color: #cfe6f2;
}
.teatro__estrelas { font-size: .74rem; letter-spacing: 1px; }
.teatro--heroi .teatro__titulo { display: block; margin: 18px 0 0; font: 800 clamp(2rem, 1.3rem + 2.4vw, 3.3rem)/1.05 var(--titulo); letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.teatro__frase { margin: 16px 0 0; max-width: 46ch; font: 400 1.05rem/1.6 var(--fonte); color: rgba(255, 255, 255, .72); }
.teatro__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.teatro__bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px 0 20px; border: 0; border-radius: 999px;
  font: 600 1rem/1 var(--fonte); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s, transform .2s var(--ease);
}
.teatro__bt svg { width: 18px; height: 18px; flex: none; }
.teatro__bt--branco { background: #fff; color: #0B0D10; }
.teatro__bt--branco:hover { background: rgba(255, 255, 255, .86); }
.teatro__bt--vidro { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.teatro__bt--vidro:hover { background: rgba(255, 255, 255, .15); }
.teatro__bt:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.teatro--heroi .teatro__tela { border-radius: 16px; }
/* o convite vira a pílula "Ativar som" no canto do vídeo */
.teatro__convite--pilula { left: auto; top: auto; right: 14px; bottom: 14px; transform: none; gap: 8px; padding: 9px 16px 9px 12px; font: 600 .9rem/1 var(--fonte); animation: none; }
.teatro__convite--pilula:hover { transform: none; background: rgba(255, 255, 255, .18); }
.teatro__convite--pilula .teatro__convite-ic { width: auto; height: auto; background: none; color: #fff; animation: none; }
.teatro__convite--pilula .teatro__convite-ic svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .teatro__grade { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .teatro--heroi .teatro__tela { order: -1; }
  .teatro__acoes { flex-direction: column; }
  .teatro__bt { width: 100%; height: 52px; }
}

/* a faixa das transações que correm, no fim dos cenários (como na Academia SD) */
.tx__rotulo { margin-top: clamp(30px, 4vw, 48px); }
.tx__rotulo .rotulo-pequeno { margin: 0 0 12px; }
.letreiro--codigos .letreiro__faixa { gap: 8px; }
.letreiro--codigos .tx {
  flex: none; padding: 9px 14px; border-radius: 6px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
  font: 600 .9rem/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .04em; color: rgba(255, 255, 255, .88);
}

/* ---------------------------------------------------------------- a faixa das notas (fundo no jeito do modo teatro) */
.confia { position: relative; overflow: hidden; padding: clamp(30px, 3.6vw, 44px) 0; background: #050607; border-top: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.confia__luz { position: absolute; inset: 0; pointer-events: none; }
.confia__luz img { position: absolute; left: -10%; top: -150%; width: 120%; height: 400%; object-fit: cover; filter: blur(80px) saturate(1.7); opacity: .6; }
.confia__luz::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 6, 7, .55), rgba(5, 6, 7, .1) 50%, rgba(5, 6, 7, .55)); }
.confia__dentro { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2.4fr); align-items: center; gap: 28px; }
.confia__titulo { margin: 0; font: 800 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.2 var(--titulo); color: #fff; }
.confia__titulo span { display: block; }
.confia__notas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.confia__notas li { display: grid; justify-items: center; gap: 8px; padding: 6px 12px; text-align: center; }
.confia__notas li + li { border-left: 1px solid rgba(255, 255, 255, .14); }
.confia__estrelas { display: inline-flex; gap: 4px; }
.confia__estrelas svg { width: 22px; height: 22px; color: #F5A623; }
.confia__estrelas svg.quase { color: #FBE3A6; }
.confia__fonte { display: inline-flex; align-items: center; gap: 9px; font: 500 1.02rem/1.2 var(--fonte); color: rgba(255, 255, 255, .92); }
.confia__fonte b { font-weight: 700; color: #fff; }
.confia__selo { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 800 .8rem/1 var(--fonte); }
.confia__selo--google { background: #4285F4; color: #fff; }
.confia__selo--trm { width: auto; height: 22px; padding: 0 7px; border-radius: 4px; background: rgba(255, 255, 255, .14); color: #fff; font-size: .66rem; letter-spacing: .06em; }
img.confia__selo { width: 26px; height: 26px; object-fit: cover; }
.confia__notas small { font: 500 .8rem/1.2 var(--fonte); color: rgba(255, 255, 255, .6); }
@media (max-width: 900px) {
  .confia__dentro { grid-template-columns: 1fr; text-align: center; }
  .confia__titulo span { display: inline; }
  .confia__notas { grid-template-columns: 1fr; gap: 14px; }
  .confia__notas li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 16px; }
}

/* ---------------------------------------------------------------- os depoimentos em cartões escuros */
.depo__mural { columns: 3 300px; column-gap: 18px; }
.dcard { break-inside: avoid; display: block; margin: 0 0 18px; border-radius: 14px; overflow: hidden; background: #11151B; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); }
.depo.dcard { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 26px; }
.depo.dcard figcaption { order: -1; gap: 2px; }
.depo.dcard figcaption strong { font: 700 1.08rem/1.3 var(--titulo); color: #fff; }
.depo.dcard figcaption span { font-size: .84rem; color: rgba(255, 255, 255, .55); }
.depo.dcard blockquote p { font-size: 1rem; line-height: 1.62; color: rgba(255, 255, 255, .86); }
.dcard__video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; }
.dcard__video img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.82); transition: filter .3s, transform .5s var(--ease); }
.dcard__video:hover img { filter: brightness(1); transform: scale(1.03); }
.dcard__video:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.dcard__play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .85); color: #fff; }
.dcard__play svg { width: 22px; height: 22px; margin-left: 3px; }
.dcard__corpo { padding: 20px 24px 24px; }
.dcard__nome { margin: 0; font: 700 1.08rem/1.3 var(--titulo); color: #fff; }
.dcard__curso { margin: 2px 0 12px; font-size: .84rem; color: rgba(255, 255, 255, .55); }
.dcard__fala { margin: 0; font-size: 1rem; line-height: 1.62; color: rgba(255, 255, 255, .86); }
@media (max-width: 760px) {
  .depo__mural { columns: 1; }
  .depo__mural > :nth-child(n+7) { display: none; }   /* no celular, os seis primeiros; os outros estão no mural (botão abaixo) */
}

/* ---------------------------------------------------------------- Creative Play + Veja por dentro (modo teatro) */
.cplay { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 100px) 0; background: #050607; text-align: center; }
.cplay__luz { position: absolute; inset: 0; pointer-events: none; }
.cplay__luz img { position: absolute; left: -10%; top: -10%; width: 120%; height: 70%; object-fit: cover; filter: blur(90px) saturate(1.6); opacity: .65; }
.cplay__luz::after { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 20%, rgba(5, 6, 7, 0), rgba(5, 6, 7, .8) 100%); }
.cplay__dentro { position: relative; width: min(1180px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.cplay__titulo { margin: 0; font: 800 clamp(2rem, 1.2rem + 3vw, 3.4rem)/1 var(--titulo); letter-spacing: .14em; text-transform: uppercase; }
.cplay__sub { margin: 12px 0 0; font: 700 clamp(.78rem, .7rem + .3vw, .95rem)/1.3 var(--fonte); letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.cplay__aparelhos { display: block; width: min(860px, 100%); height: auto; margin: 30px auto 0; border-radius: 14px; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
/* a galeria do celular (pedido dele, 13/11/2026, com o vídeo de referência; netflix.js parte 13): o iPhone parado no meio e as
   telas dos lados, cada vez mais baixas e apagando nas pontas; a tela do meio fica dentro do celular */
.cel-galeria {
  --cg-w: clamp(190px, 17vw, 250px); --cg-b: 9px;
  position: relative; width: min(1280px, 100%); height: calc(var(--cg-w) / .493 + 2 * var(--cg-b) + 36px); margin: 30px auto 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.cel-galeria__telas { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.cel-galeria__telas li {
  position: absolute; left: 50%; top: 50%; width: var(--cg-w); height: calc(var(--cg-w) / .493); overflow: hidden; border-radius: 12px;
  background: #0b0d10; box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .95); transform: translate(-50%, -50%);
  transition: transform .8s cubic-bezier(.65, 0, .25, 1), width .8s cubic-bezier(.65, 0, .25, 1), height .8s cubic-bezier(.65, 0, .25, 1), border-radius .8s ease, opacity .6s ease;
}
.cel-galeria__telas li.no-celular { border-radius: calc(40px - var(--cg-b)); }
.cel-galeria:not(.pronto) .cel-galeria__telas li { border-radius: calc(40px - var(--cg-b)); }
.cel-galeria:not(.pronto) .cel-galeria__telas li + li { opacity: 0; }   /* sem JavaScript, só a primeira tela, no celular */
.cel-galeria__telas img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.cel-galeria__aparelho {
  position: absolute; left: 50%; top: 50%; z-index: 20; width: calc(var(--cg-w) + 2 * var(--cg-b)); height: calc(var(--cg-w) / .493 + 2 * var(--cg-b));
  transform: translate(-50%, -50%); border: var(--cg-b) solid #111214; border-radius: 40px; pointer-events: none;
  box-shadow: 0 0 0 1.5px #3b3d43, inset 0 0 0 1px rgba(255, 255, 255, .05), 0 40px 80px -30px rgba(0, 0, 0, .95);
}
.cel-galeria__aparelho::before { content: ''; position: absolute; top: 8px; left: 50%; width: 31%; height: 22px; transform: translateX(-50%); border-radius: 999px; background: #000; }
.cel-galeria__aparelho::after { content: ''; position: absolute; bottom: 7px; left: 50%; width: 34%; height: 4px; transform: translateX(-50%); border-radius: 2px; background: rgba(255, 255, 255, .65); }
@media (max-width: 720px) {
  .cel-galeria { --cg-w: clamp(150px, 42vw, 190px); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
}
@media (prefers-reduced-motion: reduce) { .cel-galeria__telas li { transition: none; } }
.cplay__acesso { margin: 18px 0 34px; font: 500 clamp(.9rem, .8rem + .4vw, 1.1rem)/1.4 var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.cplay__beneficios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; text-align: left; }
.cplay__beneficios li { padding: 24px 22px; border-radius: 14px; background: rgba(var(--nf-luz, 52, 78, 122), .22); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cplay__icone { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; }
.cplay__icone svg { width: 28px; height: 28px; }
.cplay__beneficios h3 { margin: 0 0 8px; font: 800 .86rem/1.2 var(--titulo); letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.cplay__beneficios p { margin: 0; font-size: .93rem; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.cplay__lojas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cplay__dentro-video { margin-top: clamp(48px, 6vw, 80px); }
.cplay__veja { margin: 0 0 18px; font: 800 clamp(1.5rem, 1rem + 2vw, 2.4rem)/1.1 var(--titulo); letter-spacing: .14em; text-transform: uppercase; }
.cplay__veja span { display: block; margin-top: 10px; font: 700 clamp(.72rem, .66rem + .3vw, .88rem)/1.3 var(--fonte); letter-spacing: .26em; color: rgba(255, 255, 255, .72); }
.cplay__cta { margin: 26px 0 0; }
.cplay__cta .nf__bt { min-width: min(420px, 100%); }
@media (max-width: 900px) { .cplay__beneficios { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cplay__beneficios { grid-template-columns: 1fr; } .cplay__dentro { width: calc(100% - 32px); } }

/* ---------------------------------------------------------------- os logos dos clientes correndo (modo teatro) */
.empresas--logos { position: relative; overflow: hidden; padding-block: 48px 52px; background: #050607; }
.empresas__luz { position: absolute; inset: 0; pointer-events: none; }
.empresas__luz img { position: absolute; left: -10%; top: -120%; width: 120%; height: 340%; object-fit: cover; filter: blur(80px) saturate(1.6); opacity: .55; }
.empresas__luz::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #050607 0%, rgba(5, 6, 7, .2) 18%, rgba(5, 6, 7, .2) 82%, #050607 100%); }
.empresas--logos .rotulo-pequeno { position: relative; text-align: center; color: rgba(255, 255, 255, .8); }
.letreiro--logos { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.letreiro--logos + .letreiro--logos { margin-top: 26px; }
.letreiro--logos .letreiro__faixa { align-items: center; }
.letreiro--logos .letreiro__faixa img { flex: none; width: auto; height: 34px; max-width: 170px; object-fit: contain; margin: 0 34px; opacity: .82; transition: opacity .3s; }
.letreiro--logos .letreiro__faixa img:hover { opacity: 1; }
.letreiro--inverso .letreiro__faixa { animation-direction: reverse; }
@media (max-width: 760px) { .letreiro--logos .letreiro__faixa img { height: 28px; margin: 0 22px; } }

/* ---------------------------------------------------------------- conheça também (galeria dos outros cursos, como a Netflix) */
.conheca { padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); background: var(--fundo); border-top: 1px solid rgba(255, 255, 255, .06); }
.conheca__titulo { margin: 0 0 18px; font: 700 1.5rem/1.2 var(--fonte); color: #fff; }
/* uma fileira só, que se desliza para o lado (pedido dele, 13/11/2026); os cursos mais ligados ao TRM-TM vêm primeiro */
.conheca__topo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px; padding: 0 4px; }
.conheca__topo .conheca__titulo { margin: 0; }
.conheca__topo span { font: 500 .9rem/1.2 var(--fonte); color: rgba(255, 255, 255, .55); }
.conheca__grade {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(140px, 11.5vw, 190px); gap: 12px; margin: 0; padding: 14px 4px 16px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 4px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.conheca__grade::-webkit-scrollbar { display: none; }
.conheca__grade > li { scroll-snap-align: start; }
.conheca__caixa .nf__seta { top: 14px; bottom: auto; height: calc(clamp(140px, 11.5vw, 190px) * 890 / 496); }
.conheca__card { display: block; color: #fff; text-decoration: none; }
.conheca__capa { position: relative; display: block; aspect-ratio: 496 / 890; border-radius: 10px; overflow: hidden; background: #161B24; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); transition: transform .3s var(--ease), box-shadow .3s; }
.conheca__capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.conheca__capa.horizontal img { object-position: 62% center; }
.conheca__card:hover .conheca__capa, .conheca__card:focus-visible .conheca__capa { transform: translateY(-4px) scale(1.03); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 18px 36px -14px rgba(0, 0, 0, .9); }
.conheca__card:focus-visible { outline: none; }
.conheca__nome { display: block; margin-top: 8px; font: 600 .86rem/1.25 var(--fonte); }
.conheca__info { display: block; margin-top: 2px; font: 500 .76rem/1.3 var(--fonte); color: rgba(255, 255, 255, .58); }
.conheca__todos { margin: 26px 0 0; }
.conheca__todos a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 600 .95rem/1 var(--fonte); text-underline-offset: 4px; }
.conheca__todos svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .conheca__grade { grid-auto-columns: 36vw; gap: 10px; margin: 0 -16px; padding: 12px 16px 14px; scroll-padding: 16px; }
  .conheca__nome { font-size: .8rem; }
  .conheca__info { display: none; }
}

/* ---------------------------------------------------------------- "Em destaque" virou a esteira (pedido dele, 13/11/2026, a
   partir do "Esteira — ProfitizeBuild"): duas fileiras que correm em sentidos opostos conforme a página rola, com uma
   deriva lenta quando ela para; cartões só em CSS (funcionalidades, telas desenhadas e depoimentos). Movimento: netflix.js,
   parte 9 (só transform, medidas só no início e no resize, laço só com a seção na tela). */
.esteira {
  --ease-esteira: cubic-bezier(0.16, 1, 0.3, 1);
  --font-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  position: relative; overflow: hidden; padding: clamp(56px, 7vw, 96px) 0; background: #0d0d0f;
}
/* grão: ruído do próprio SVG, sem arquivo */
.esteira::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px;
}
.esteira__topo { position: relative; z-index: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 28px; }
.esteira__topo h2 { margin: 0; font: 700 1.3rem/1.2 var(--fonte); color: rgba(255, 255, 255, .94); }
.esteira__topo span { font: 500 .9rem/1.2 var(--fonte); color: rgba(255, 255, 255, .55); }
/* as pontas somem num degradê em vez de cortar seco na borda da tela */
.esteira__pista {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.esteira__row { display: flex; gap: 22px; width: max-content; will-change: transform; }
.esteira-card {
  flex: none; box-sizing: border-box; display: flex; flex-direction: column; width: 420px; height: 270px; padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #131316, #0d0d0f);
  color: #f1f1f1; cursor: default; transition: border-color .2s var(--ease-esteira), transform .2s var(--ease-esteira), box-shadow .2s var(--ease-esteira);
}
@media (hover: hover) and (pointer: fine) {
  .esteira-card:hover { border-color: rgba(255, 255, 255, .18); transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, .4); }
}
.esteira-head { display: flex; align-items: center; justify-content: space-between; }
.esteira-star { color: #5a5a5e; }
.esteira-kicker { font: 500 11px/1.2 var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: #8a8a90; }
.esteira-title { margin: 12px 0 0; font: 500 21px/1.25 var(--titulo); letter-spacing: -.01em; color: #f1f1f1; }
.esteira-body { margin: 12px 0 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: #a3a3a8; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.esteira-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.esteira-tags { display: flex; gap: 7px; min-width: 0; overflow: hidden; }
.esteira-tags span { flex: none; padding: 4px 12px; border-radius: 999px; font: 400 12px/1.4 var(--fonte); color: #b6b6ba; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.esteira-selo { flex: none; padding: 8px 14px; border-radius: 999px; background: #fafafa; color: #0a0a0a; font: 600 12.5px/1 var(--fonte); white-space: nowrap; }
.esteira-selo--diamante { background: linear-gradient(135deg, #8FE9FF, #4C8DFF); color: #061326; }
.esteira-selo--neutro { background: rgba(255, 255, 255, .1); color: #ededed; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.esteira-post-head { display: flex; align-items: center; gap: 11px; }
.esteira-avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #3a3a3f, #1c1c1f); border: 1px solid rgba(255, 255, 255, .1); font: 600 13px/1 var(--fonte); color: #d8d8dc; }
.esteira-quem { display: grid; gap: 3px; min-width: 0; }
.esteira-handle { font: 500 15px/1.2 var(--fonte); color: #e6e6e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esteira-info { font: 400 12px/1.2 var(--fonte); color: #8a8a90; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esteira-post { margin: 18px 0 0; font: 400 17px/1.5 var(--fonte); color: #cfcfd2; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* as telas desenhadas em CSS, presas ao pé do cartão */
.m-mock { margin-top: auto; }
.m-toggle { display: flex; align-items: center; justify-content: space-between; }
.m-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.m-seg span { padding: 6px 13px; border-radius: 999px; font: 400 12px/1.2 var(--fonte); color: #9a9a9e; }
.m-seg .on { background: #ededed; color: #0a0a0a; font-weight: 500; }
.m-price { font: 700 30px/1 var(--titulo); color: #f1f1f1; }
.m-chart { display: flex; align-items: flex-end; gap: 9px; height: 104px; }
.m-chart span { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #e2e2e4, #6b6b70); }
.m-form { display: flex; flex-direction: column; gap: 11px; }
.m-form span { height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }
.m-form .submit { height: 36px; background: #ededed; border: 0; }
.m-toasts { display: flex; flex-direction: column; gap: 9px; }
.m-toasts > div { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 13px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.m-toasts .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ededed; }
.m-toasts .ln { flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .13); }
.m-kanban { display: flex; gap: 10px; height: 116px; }
.m-kanban > div { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.m-kanban span { height: 26px; border-radius: 6px; background: rgba(255, 255, 255, .1); }
.m-settings { display: flex; flex-direction: column; gap: 16px; }
.m-settings > div { display: flex; align-items: center; justify-content: space-between; }
.m-settings .lbl { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .11); }
.m-settings .switch { position: relative; flex: none; width: 40px; height: 23px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.m-settings .switch.on { background: #ededed; }
.m-settings .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #d6d6d6; }
.m-settings .switch.on::after { left: 20px; background: #0a0a0a; }
/* celular: cartões menores, ritmo mais calmo */
@media (max-width: 900px) {
  .esteira { padding: 56px 0; }
  .esteira__pista, .esteira__row { gap: 14px; }
  .esteira-card { width: 300px; height: 210px; padding: 18px 20px; }
  .esteira-title { font-size: 18px; }
  .esteira-body { -webkit-line-clamp: 3; }
  .esteira-post { font-size: 15px; -webkit-line-clamp: 4; }
  .esteira-tags span:nth-child(n+2) { display: none; }   /* no celular, uma etiqueta só, para o selo caber */
  .m-chart { height: 70px; }
  .m-kanban { height: 80px; }
}

/* ---------------------------------------------------------------- o botão "Mercúrio" (pedido dele, 13/11/2026: "alguns botões
   em verde, outros neste design"): pílula quase preta com o anel de metal líquido (o shader LiquidMetal da Paper,
   @paper-design/shaders 0.0.81, Apache-2.0, em assets/vendor/paper-shaders) e o orbe prateado com a seta que sai por um
   lado e entra pelo outro. A tinta do metal e a sombra seguem o azul claro da marca. Até o shader subir, fica o anel liso. */
.metal-btn {
  --ease-metal: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative; display: inline-flex; align-items: center; gap: 14px; height: 60px; padding: 0 8px 0 30px; border: 0; border-radius: 999px;
  font-family: var(--fonte); font-size: 16px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; color: #eef0f6; text-decoration: none;
  background: radial-gradient(120% 140% at 50% 0%, #1a1c24 0%, #07080b 70%);
  box-shadow: inset 0 0 0 1px rgba(230, 240, 248, .28), 0 18px 50px -18px rgba(76, 155, 255, .5);
  isolation: isolate; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ease-metal), box-shadow .25s var(--ease-metal);
}
.metal-btn:active { transform: scale(.97); }
.metal-btn:focus-visible { outline: 2px solid #76B7D5; outline-offset: 3px; }
.metal-btn__metal { position: absolute; inset: 0; z-index: -1; display: block; border-radius: inherit; opacity: 0; transition: opacity .8s var(--ease-metal); }
.metal-btn__metal.is-ready { opacity: 1; }
.metal-btn__metal > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.metal-btn__metal.is-ready + .metal-btn__label { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.metal-btn__orb {
  --orb: 44px;
  position: relative; display: grid; place-items: center; flex: none; width: var(--orb); height: var(--orb); border-radius: 50%; overflow: hidden; color: #0b0c10;
  background: linear-gradient(160deg, #ffffff 0%, #e6e9f0 45%, #b7bdca 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 5px rgba(0, 0, 0, .2), 0 4px 18px -6px rgba(230, 240, 248, .55);
}
.metal-btn__orb svg { position: absolute; width: 16px; height: 16px; transition: transform .35s var(--ease-metal); }
/* a seta reserva espera fora do orbe: meio orbe + meia seta + folga para o traço */
.metal-btn__orb svg + svg { transform: translateX(calc(var(--orb) / -2 - 50% - 2px)); }
@media (hover: hover) {
  .metal-btn:hover .metal-btn__orb svg:first-child { transform: translateX(calc(var(--orb) / 2 + 50% + 2px)); }
  .metal-btn:hover .metal-btn__orb svg + svg { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .metal-btn, .metal-btn__metal, .metal-btn__orb svg { transition: none; } }
/* dentro do bloco de compra: um pouco maior, como o verde */
.compra .metal-btn { height: 64px; padding: 0 8px 0 32px; font-size: 17px; }
.compra .metal-btn__orb { --orb: 48px; }
@media (max-width: 760px) { .compra .metal-btn { height: 56px; padding: 0 6px 0 24px; font-size: 15.5px; } .compra .metal-btn__orb { --orb: 44px; } }

/* ---------------------------------------------------------------- tudo o que vem com o curso (fileiras da Netflix) */
.tudo { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 96px) 0; background: #050607; }
.tudo__luz { position: absolute; inset: 0; pointer-events: none; }
.tudo__luz img { position: absolute; left: -10%; top: -6%; width: 120%; height: 46%; object-fit: cover; filter: blur(100px) saturate(1.6); opacity: .5; }
.tudo__luz::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 6, 7, 0) 0%, rgba(5, 6, 7, .6) 30%, #050607 60%); }
.tudo__dentro { position: relative; width: min(1280px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.tudo__topo { max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); }
.tudo__topo h2 { margin: 0; font: 700 clamp(1.5rem, 1.1rem + 1.5vw, 2.35rem)/1.15 var(--titulo); letter-spacing: -.02em; color: #fff; }
.tudo__topo p { margin: 10px 0 0; font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.tudo__fileira + .tudo__fileira, .tudo__fileira + .tudo__destaque, .tudo__destaque + .tudo__fileira { margin-top: clamp(26px, 3.2vw, 40px); }
.tudo__fileira-topo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; padding: 0 4px; }
.tudo__fileira-topo h3 { margin: 0; font: 700 1.25rem/1.2 var(--fonte); color: rgba(255, 255, 255, .94); }
.tudo__fileira-topo span { font: 500 .9rem/1.2 var(--fonte); color: rgba(255, 255, 255, .55); }
.tudo__caixa { position: relative; }
.tudo__caixa:hover .nf__seta, .tudo__caixa .nf__seta:focus-visible { opacity: 1; }
.tudo__trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(232px, 19vw, 280px); gap: 12px; margin: 0; padding: 4px 4px 14px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 4px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.tudo__trilho::-webkit-scrollbar { display: none; }
.tudo__cartao {
  --tudo-cor: 52, 98, 190;
  scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #11151C;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .3s var(--ease), box-shadow .3s;
}
.tudo__cartao:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 18px 36px -16px rgba(0, 0, 0, .9); }
.tudo__cartao:has(.tudo__selo--gratis) { --tudo-cor: 40, 160, 96; }
.tudo__cartao:has(.tudo__selo--starter) { --tudo-cor: 110, 124, 148; }
.tudo__cartao:has(.tudo__selo--pro) { --tudo-cor: 132, 96, 255; }
.tudo__cartao:has(.tudo__selo--diamante) { --tudo-cor: 64, 168, 255; }
.tudo__arte { display: grid; place-items: center; aspect-ratio: 16 / 7; color: #fff; background: radial-gradient(120% 150% at 22% 0%, rgba(var(--tudo-cor), .62), rgba(var(--tudo-cor), .14) 62%, #11151C 100%); }
.tudo__arte svg { width: 42px; height: 42px; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5)); }
/* cada cartão com o topo da página daquela funcionalidade, ou a tela dela (pedido dele, 13/11/2026) */
.tudo__cartao--foto .tudo__arte { position: relative; overflow: hidden; background: #0B0E13; }
.tudo__cartao--foto .tudo__arte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tudo__cartao--foto .tudo__arte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 21, 28, 0) 55%, #11151C 100%); box-shadow: inset 0 -1px 0 rgba(var(--tudo-cor), .5); }
.tudo__cartao--foto:hover .tudo__arte img { transform: scale(1.05); }
.tudo__corpo { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 18px; }
.tudo__corpo h4 { margin: 0; font: 700 1rem/1.25 var(--fonte); color: #fff; }
.tudo__corpo p { margin: 0; font-size: .89rem; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.tudo__corpo .tudo__selo { order: -1; }
.tudo__selo { align-self: flex-start; display: inline-block; padding: 4px 7px; border-radius: 4px; font: 800 .64rem/1 var(--fonte); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tudo__selo--incluido { background: #fff; color: #0B0D10; }
.tudo__selo--gratis { background: #46D369; color: #06210F; }
.tudo__selo--starter { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.tudo__selo--pro { background: #8B6CFF; color: #fff; }
.tudo__selo--diamante { background: linear-gradient(135deg, #8FE9FF, #4C8DFF); color: #061326; }
.tudo__selo--hub { background: rgba(0, 0, 0, .55); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.tudo__coaching { border-radius: 14px; background: linear-gradient(120deg, rgba(52, 98, 190, .32), #10141A 58%); border: 1px solid rgba(255, 255, 255, .1); }
.tudo__coaching .tudo__selo { margin-bottom: -4px; }
.tudo__hub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(26px, 3.2vw, 40px); padding: 22px 26px; border-radius: 14px;
  background: linear-gradient(100deg, rgba(46, 118, 151, .38), rgba(16, 20, 26, .92) 62%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}
.tudo__hub-marca { margin: 0; font: 800 1.6rem/1 var(--titulo); letter-spacing: -.02em; color: #fff; }
.tudo__hub-marca span { font: 500 .8rem/1 var(--fonte); letter-spacing: .04em; color: rgba(255, 255, 255, .62); }
.tudo__hub .hub__numeros { flex: 1 1 320px; margin: 0; }
.tudo__hub .hub__numeros li { border-radius: 8px; }
.tudo__hub .hub__aovivo { flex: 1 1 100%; order: 3; border-radius: 8px; }
.tudo__hub-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tudo__hub-acoes .loja { border-radius: 8px; }
.tudo__nota { margin-top: 18px; }
/* "Todo um Ecossistema SAP de Bônus" (pedido dele, 13/11/2026, com o vídeo de referência): o título no meio com o rótulo em
   cima e o carrossel de cartas empilhadas (netflix.js parte 12). Cada carta em pé: a imagem da funcionalidade desfocada ao
   fundo, o selo, o nome e a frase em cima, e a imagem nítida embaixo, como uma tela. Sem JavaScript, ficam as fileiras. */
.tudo__rotulo { margin: 0 0 10px; font: 700 .76rem/1 var(--fonte); letter-spacing: .22em; text-transform: uppercase; color: #9cc2ff; }
.tudo--eco .tudo__topo { margin-inline: auto; text-align: center; }
.tudo--eco .tudo__fileira { display: none; }
.tudo--eco .tudo__destaque { margin-top: clamp(30px, 4vw, 48px); }
.eco { position: relative; }
.eco__abas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.eco__aba {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .86); font: 600 .9rem/1 var(--fonte); cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.eco__aba span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .74rem; }
.eco__aba:hover { background: rgba(255, 255, 255, .12); }
.eco__aba[aria-pressed="true"] { background: #fff; border-color: #fff; color: #0b0d10; }
.eco__aba[aria-pressed="true"] span { background: rgba(0, 0, 0, .1); }
.eco__nota { min-height: 1.2em; margin: 10px 0 0; text-align: center; font: 500 .86rem/1.2 var(--fonte); color: rgba(255, 255, 255, .55); }
.eco__palco {
  --eco-l: clamp(232px, 24vw, 320px);
  position: relative; height: calc(var(--eco-l) * 1.25 + 70px); margin-top: 18px; overflow: hidden;
  touch-action: pan-y; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* a perspectiva fica na lista (as cartas são filhas diretas) e SEM preserve-3d: assim a ordem de quem fica na frente é a do
   z-index (com preserve-3d, as cartas viradas da pilha passavam por cima da carta do meio) */
.eco__cartas { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; perspective: 1400px; }
.eco__carta {
  position: absolute; left: 50%; top: 12px; width: var(--eco-l); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); background: #0d1117; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .95);
  transform-origin: 50% 100%; user-select: none; -webkit-user-select: none;
  transition: transform .7s cubic-bezier(.22, .9, .25, 1), opacity .45s ease, filter .5s ease;
}
.eco__carta.ativa { cursor: default; border-color: rgba(255, 255, 255, .26); }
.eco__fundo { position: absolute; inset: 0; z-index: 0; }
.eco__fundo img { width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.4); opacity: .75; transform: scale(1.3); }
.eco__fundo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 14, .82) 0%, rgba(8, 10, 14, .5) 46%, rgba(8, 10, 14, .2) 100%); }
.eco__texto { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 0; }
.eco__selo { align-self: flex-start; }
.eco__titulo { margin: 4px 0 0; font: 700 clamp(1.05rem, .95rem + .4vw, 1.25rem)/1.2 var(--titulo); letter-spacing: -.01em; color: #fff; }
.eco__desc { font: 500 .84rem/1.45 var(--fonte); color: rgba(255, 255, 255, .78); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.eco__tela { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px; overflow: hidden; aspect-ratio: 560 / 245; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .9); background: #0b0e13; }
.eco__tela img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eco__tela svg, .eco__fundo svg { width: 42px; height: 42px; margin: auto; }
.eco__pe { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; }
.eco__pontos { display: flex; align-items: center; gap: 6px; }
.eco__ponto { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); cursor: pointer; transition: background-color .3s, transform .3s, width .3s; }
.eco__ponto.aceso { width: 20px; border-radius: 4px; background: rgba(255, 255, 255, .9); }
.eco__conta { min-width: 42px; font: 600 .8rem/1 var(--fonte); color: rgba(255, 255, 255, .55); text-align: center; }
@media (max-width: 720px) {
  .eco__palco { --eco-l: min(68vw, 270px); -webkit-mask-image: none; mask-image: none; }
  /* no celular, as guias numa fileira só, que desliza para o lado */
  .eco__abas { flex-wrap: nowrap; justify-content: flex-start; margin: 0 -16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
  .eco__abas::-webkit-scrollbar { display: none; }
  .eco__aba { flex: none; padding: 8px 12px; font-size: .84rem; }
  .eco__pontos { display: none; }      /* no celular, o "3 / 9" no lugar dos pontos */
}
@media (prefers-reduced-motion: reduce) { .eco__carta { transition: opacity .2s ease; } }
@media (max-width: 760px) {
  .tudo__dentro { width: calc(100% - 32px); }
  .tudo__trilho { grid-auto-columns: 72vw; margin: 0 -16px; padding: 4px 16px 14px; scroll-padding: 16px; }
  .tudo__fileira-topo h3 { font-size: 1.08rem; }
  .tudo__hub { flex-direction: column; align-items: flex-start; padding: 20px 18px; }
  .tudo__hub .hub__numeros { flex: none; width: 100%; }
}

/* ---------------------------------------------------------------- a página toda no jeito da Netflix / modo teatro (pedido dele, 13/11/2026)
   Títulos de fileira, sem o degradê no texto; cartões escuros de canto curto; botões quadrados; e, no alto de cada
   seção, a luz difusa do modo teatro. Nenhuma seção de texto gigante (regra dele). */
body.nf-pagina .secao { isolation: isolate; padding-block: clamp(56px, 7vw, 100px); }
body.nf-pagina .secao::before {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: min(560px, 75%); pointer-events: none;
  background: radial-gradient(55% 100% at 50% 0%, rgba(52, 78, 122, .22), rgba(52, 78, 122, 0) 72%);
}
body.nf-pagina .secao:nth-of-type(even)::before { background: radial-gradient(45% 100% at 15% 0%, rgba(46, 118, 151, .2), rgba(46, 118, 151, 0) 72%); }
body.nf-pagina .cabeca { margin-bottom: clamp(22px, 3vw, 36px); gap: 10px; }
body.nf-pagina .titulo-2 { font: 700 clamp(1.5rem, 1.1rem + 1.5vw, 2.35rem)/1.15 var(--titulo); letter-spacing: -.02em; }
body.nf-pagina .titulo-2 .grad, body.nf-pagina .final__titulo .grad { background: none; -webkit-text-fill-color: currentColor; color: rgba(255, 255, 255, .62); }
body.nf-pagina .final { padding-block: clamp(72px, 9vw, 120px); }
body.nf-pagina .final__titulo { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); letter-spacing: -.025em; }
body.nf-pagina .btn { border-radius: 6px; }
body.nf-pagina .cartao, body.nf-pagina .bloco { border-radius: 14px; background: #10141A; border-color: rgba(255, 255, 255, .08); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9); }
body.nf-pagina .cartao { transition: transform .3s var(--ease), border-color .3s; }
body.nf-pagina .cartao:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .2); }
body.nf-pagina .plano, body.nf-pagina .fluxo__painel, body.nf-pagina .garantia__cartao, body.nf-pagina .resultados__grade { border-radius: 14px; }
body.nf-pagina .plano--destaque { background: linear-gradient(180deg, rgba(52, 98, 190, .42), rgba(10, 13, 16, .94) 48%), #0A0D10; }
body.nf-pagina .etapas li, body.nf-pagina .hub__numeros li, body.nf-pagina .hub__aovivo, body.nf-pagina .plano__loc-data { border-radius: 8px; }
body.nf-pagina .selos li, body.nf-pagina .selo-ok, body.nf-pagina .selo-contagem, body.nf-pagina .plano__selo { border-radius: 4px; }
body.nf-pagina .loja { border-radius: 8px; }

/* ---------------------------------------------------------------- perguntas frequentes no jeito do FAQ da Netflix */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.faqnf__dentro { max-width: 1240px; }
/* duas perguntas por linha no computador (pedido dele, 13/11/2026: a seção estava grande); cada uma abre sozinha, sem
   esticar a vizinha; os títulos dos grupos ocupam a linha toda */
.faqnf__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; align-items: start; }
body.nf-pagina .faqnf .faqnf__lista .duvidas__grupo { grid-column: 1 / -1; margin: 26px 0 4px; }
body.nf-pagina .faqnf .faqnf__lista .duvidas__grupo:first-child { margin-top: 0; }
body.nf-pagina .faqnf .faqnf__lista .faq { margin-bottom: 0; }
body.nf-pagina .faqnf .faqnf__lista .faq summary { padding: 16px 18px 16px 20px; font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); }
@media (max-width: 860px) { .faqnf__lista { grid-template-columns: minmax(0, 1fr); } }
.faqnf__topo { margin-bottom: 20px; text-align: center; }
.faqnf__topo p { margin: 10px 0 0; color: rgba(255, 255, 255, .66); }
.faqnf__busca { position: relative; max-width: 620px; margin: 0 auto 16px; }
.faqnf__busca svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: rgba(255, 255, 255, .6); pointer-events: none; }
.faqnf__busca input {
  width: 100%; height: 52px; padding: 0 18px 0 48px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(22, 26, 33, .9); color: #fff; font: 500 1rem/1 var(--fonte);
}
.faqnf__busca input::placeholder { color: rgba(255, 255, 255, .5); }
.faqnf__busca input:focus { outline: 2px solid #fff; outline-offset: 2px; border-color: transparent; }
.faqnf__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 30px; }
.faqnf__chips a {
  padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06);
  font: 600 .88rem/1 var(--fonte); color: #fff; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s;
}
.faqnf__chips a:hover, .faqnf__chips a:focus-visible { background: #fff; color: #0B0D10; }
body.nf-pagina .faqnf .duvidas__grupo { margin: 34px 0 12px; font: 700 1.2rem/1.2 var(--fonte); letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .94); }
body.nf-pagina .faqnf .duvidas__grupo:first-child { margin-top: 0; }
body.nf-pagina .faqnf .faq { margin-bottom: 8px; border: 0; border-radius: 6px; background: #1B2028; overflow: hidden; transition: background-color .2s; }
body.nf-pagina .faqnf .faq:hover { background: #232934; }
body.nf-pagina .faqnf .faq summary { align-items: center; padding: 20px 22px 20px 24px; font: 500 clamp(1rem, .94rem + .35vw, 1.2rem)/1.35 var(--fonte); letter-spacing: 0; color: #fff; }
body.nf-pagina .faqnf .faq summary:hover { color: #fff; }
body.nf-pagina .faqnf .faq summary::after { border: 0; width: 30px; height: 30px; }
body.nf-pagina .faqnf .faq summary:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
body.nf-pagina .faqnf .faq > div { padding: 18px 24px 22px; border-top: 1px solid rgba(0, 0, 0, .55); font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, .84); }
body.nf-pagina .faqnf .faq > div a { color: #fff; text-underline-offset: 3px; }
.faqnf__vazio { margin: 6px 0 0; padding: 22px; border-radius: 6px; background: #1B2028; text-align: center; color: rgba(255, 255, 255, .78); }
.faqnf__ajuda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 34px; padding: 22px 24px; border-radius: 10px; background: linear-gradient(100deg, rgba(52, 98, 190, .3), rgba(16, 20, 26, .9) 60%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.faqnf__ajuda p { margin: 0; color: rgba(255, 255, 255, .82); }
.faqnf__ajuda strong { color: #fff; }
.faqnf--buscando .duvidas__grupo { display: none; }
@media (max-width: 760px) {
  .faqnf__chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px 24px; padding: 0 16px 2px; scrollbar-width: none; }
  .faqnf__chips::-webkit-scrollbar { display: none; }
  body.nf-pagina .faqnf .faq summary { padding: 17px 16px 17px 18px; }
  body.nf-pagina .faqnf .faq > div { padding: 16px 18px 20px; font-size: .96rem; }
  .faqnf__ajuda { padding: 20px 18px; }
}

/* ---------------------------------------------------------------- celular: o aplicativo da Netflix */
@media (max-width: 760px) {
  body.nf-pagina .nav__app { display: block; font: 700 1.5rem/1 var(--titulo); color: #fff; letter-spacing: -.01em; }
  body.nf-pagina .nav__marca { gap: 10px; }
  body.nf-pagina .nav__icones { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  body.nf-pagina .nav__icones a { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; }
  body.nf-pagina .nav__icones svg { width: 23px; height: 23px; }
  body.nf-pagina .nav__menu { margin-left: 0; }
  body.nf-pagina .nav:not(.rolou) { background: transparent; }

  /* no celular, o topo VOLTOU a ser o do aplicativo da Netflix como era antes de tirar as bordas (pedido dele, 13/11/2026):
     o cabeçalho, as pílulas das seções e, embaixo deles, o cartão com margens, cantos arredondados e o contorno claro fino,
     sobre o fundo tingido pela cor do vídeo. No computador o vídeo continua começando no alto, por baixo do cabeçalho. */
  .nf { padding: 70px 16px 22px; background: linear-gradient(180deg, rgb(var(--nf-tom)) 0%, rgba(var(--nf-tom), .55) 34%, var(--fundo) 78%); }
  .nf__luz { display: none; }          /* no celular, o degradê da cor do vídeo (como estava, aprovado) */
  .nf__chips { display: flex; gap: 8px; margin: 4px -16px 16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
  .nf__chips::-webkit-scrollbar { display: none; }
  .nf__chips a {
    flex: none; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .08); font: 600 14px/1 var(--fonte); color: #fff; text-decoration: none; white-space: nowrap;
  }

  /* o cartão vira uma grade: o vídeo em cima e, por cima do pé dele, o título; embaixo, os dados e os botões */
  .nf__cartao {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "midia" "base"; min-height: 0;
    border-radius: 22px;
    background: rgba(0, 0, 0, .38);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 60px -18px rgba(0, 0, 0, .85);   /* a borda clara do cartão */
  }
  .nf__midia { grid-area: midia; position: relative; inset: auto; z-index: 0; }
  /* sem corte seco no pé do vídeo (pedido dele, 13/11/2026, "semelhante ao que temos na popup da página Treinamentos"): o
     vídeo se apaga no preto embaixo, e a parte de baixo do cartão começa nesse mesmo preto e só depois clareia */
  .nf__midia::after { inset: 0 0 -1px; background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .72) 22%, rgba(0, 0, 0, 0) 56%); }
  .nf__video { position: relative; inset: auto; aspect-ratio: 4 / 5; }
  .nf__video img, .nf__video video { object-position: 50% 50%; }

  .nf__conteudo { display: contents; }
  .nf__topo { grid-area: midia; align-self: end; position: relative; z-index: 2; padding: 0 14px 6px; text-align: center; }
  .nf__base { grid-area: base; position: relative; z-index: 2; display: flex; flex-direction: column; padding: 0 14px 16px; text-align: center;
    background: linear-gradient(180deg, #000 0, #000 70px, rgba(0, 0, 0, 0) 360px); }
  .nf__selo { justify-content: center; margin-bottom: 10px; font-size: 11px; letter-spacing: .3em; }
  .nf__titulo { font-size: min(12.6vw, 54px); }
  .nf__subtitulo { margin: 6px 0 4px; font-size: clamp(15px, 4.6vw, 20px); }
  /* como no aplicativo: dados, logo os dois botões; a frase do prêmio vem depois */
  .nf__meta { order: 1; justify-content: center; margin: 12px 0 14px; font-size: 13.5px; font-weight: 500; }
  .nf__meta li + li::before { margin: 0 8px; }
  .nf__acoes { order: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .nf__prova { order: 3; flex-direction: column; gap: 8px; margin: 18px 0 0; }
  .nf__prova p { font-size: 13.5px; text-align: center; }
  .nf__rosto { width: 40px; height: 40px; }
  .nf__rosto--mais { font-size: 10px; }
  .nf__premio { order: 4; justify-content: center; max-width: none; margin: 14px 2px 0; font-size: 13.5px; line-height: 1.45; text-align: left; color: rgba(255, 255, 255, .86); }
  .nf__bt { width: 100%; min-width: 0; height: 44px; padding: 0 8px; border-radius: 6px; font-size: 15px; gap: 7px; }
  .nf__bt svg { width: 20px; height: 20px; }
  .nf__bt--precos { grid-column: 1 / -1; height: 40px; font-size: 14.5px; }
  .nf__redondo { display: none; }      /* o PDF e o calendário ficam nos ícones do cabeçalho */
  .nf-so-largo, .nf__meta li.nf-so-largo { display: none; }
  .nf__top1 { width: 26px; }
  .nf__fileira { margin-top: 26px; }
  .nf__fileira-topo h2 { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nf *, .nf { transition: none !important; }
}