/* Catálogo de treinamentos (creative-ti.com/treinamentos): o jeito de escolher um filme na Netflix ou na MasterClass,
   aplicado aos cursos da Creative-TI. Cores, letras e botões das páginas de curso (Academia SAP SD). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/treinamentos/assets/fontes/inter-var.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/treinamentos/assets/fontes/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/treinamentos/assets/fontes/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/treinamentos/assets/fontes/poppins-800.woff2') format('woff2'); }

:root {
  --fundo: #07090B;
  --painel: #10141B;
  --painel-2: #161B24;
  --linha: rgba(255, 255, 255, .08);
  --linha-2: rgba(255, 255, 255, .16);
  --texto: #F2F5F7;
  --texto-2: rgba(242, 245, 247, .74);
  --texto-3: rgba(242, 245, 247, .52);
  --azul: #2E7697;
  --azul-escuro: #022F46;
  --azul-claro: #76B7D5;
  --gelo: #CDEAF7;
  --ciano: #5CC8F0;
  --ouro: #E9B949;
  --degrade: linear-gradient(135deg, #2E7697 0%, #022F46 100%);
  --titulo: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --margem: clamp(16px, 4vw, 60px);
  --gap: 10px;
  --n: 5.3;
  --card-w: calc((100vw - var(--margem) - var(--gap) * (var(--n) - 1)) / var(--n));
  --topo: 68px;
}
@media (max-width: 1499px) { :root { --n: 4.3; } }
@media (max-width: 1099px) { :root { --n: 3.3; } }
@media (max-width: 759px) { :root { --n: 1.75; --gap: 8px; --topo: 104px; } }
/* fileiras com as capas em pé (estilo MasterClass): mais capas por linha */
:root { --nv: 6.4; --card-wv: calc((100vw - var(--margem) - var(--gap) * (var(--nv) - 1)) / var(--nv)); }
@media (max-width: 1499px) { :root { --nv: 5.4; } }
@media (max-width: 1099px) { :root { --nv: 4.3; } }
@media (max-width: 759px) { :root { --nv: 2.35; } }

html { scroll-behavior: smooth; }
html, body.tr.cat-pagina { background: var(--fundo); }
body.tr.cat-pagina {
  margin: 0; min-height: 100vh; color: var(--texto); font-family: var(--corpo); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
body.cat-travado { overflow: hidden; }
.cat-pagina a { color: inherit; }
.cat-pagina button { font-family: inherit; }
.cat-pagina img { display: block; max-width: 100%; }
.cat-pagina [hidden] { display: none !important; }
.cat-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cat-pular { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; background: #fff; color: #000 !important; border-radius: 8px; font-weight: 600; text-decoration: none; }
.cat-pular:focus { top: 12px; }
:where(.cat-pagina) :focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }

/* ------------------------------------------------------------------ topo */
.cat-topo {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 28px;
  height: var(--topo); padding: 0 var(--margem);
  background: linear-gradient(180deg, rgba(7, 9, 11, .88) 0%, rgba(7, 9, 11, 0) 100%);
  transition: background .3s, box-shadow .3s;
}
.cat-topo.solido { background: rgba(7, 9, 11, .88); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--linha); }
.cat-logo { flex: none; display: block; line-height: 0; border-radius: 50%; }
/* logo sempre o REDONDO no cabeçalho (regra dele, 13/11/2026) */
.cat-logo img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 4px 16px rgba(0, 0, 0, .45); }
.cat-nav { display: flex; align-items: center; gap: 22px; min-width: 0; }
.cat-nav a { flex: none; padding: 6px 0; color: var(--texto-2); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .2s; }
.cat-nav a:hover, .cat-nav a.ativo { color: #fff; }
.cat-nav a.ativo { font-weight: 600; }
.cat-topo-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.cat-busca { position: relative; display: flex; align-items: center; height: 40px; border-radius: 999px; border: 1px solid transparent; transition: border-color .2s, background .2s, width .3s; width: 40px; overflow: hidden; }
.cat-busca.aberta { width: 280px; background: rgba(7, 9, 11, .7); border-color: var(--linha-2); }
.cat-busca button { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: #fff; cursor: pointer; border-radius: 50%; }
.cat-busca input { flex: 1; min-width: 0; height: 38px; padding: 0 14px 0 0; border: 0; background: none; color: #fff; font: 500 14.5px var(--corpo); outline: none; }
.cat-busca input::placeholder { color: var(--texto-3); }
.cat-busca input::-webkit-search-cancel-button { filter: invert(1); }
.cat-zap { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid var(--linha-2); color: #fff !important; font: 600 13.5px var(--titulo); text-decoration: none; white-space: nowrap; transition: background .2s; }
.cat-zap:hover { background: rgba(255, 255, 255, .18); }
.cat-zap svg { width: 18px; height: 18px; }

@media (max-width: 759px) {
  .cat-topo { flex-wrap: wrap; align-content: flex-start; row-gap: 0; column-gap: 12px; padding-top: 8px; height: var(--topo); }
  .cat-logo img { width: 40px; height: 40px; }
  .cat-topo-dir { gap: 6px; }
  .cat-zap span { display: none; }
  .cat-zap { width: 40px; padding: 0; justify-content: center; }
  .cat-busca.aberta { position: absolute; left: var(--margem); right: var(--margem); top: 8px; width: auto; z-index: 2; background: rgba(7, 9, 11, .96); }
  .cat-nav { order: 3; width: calc(100% + var(--margem) * 2); margin: 6px calc(var(--margem) * -1) 0; padding: 0 var(--margem) 2px; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .cat-nav::-webkit-scrollbar { display: none; }
  .cat-nav a { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--linha-2); font-size: 13px; background: rgba(7, 9, 11, .5); }
  .cat-nav a.ativo { background: #fff; color: #07090B; border-color: #fff; }
}

/* ------------------------------------------------------------------ destaque (o "billboard") */
.cat-heroi { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(540px, 76vh, 720px); display: flex; align-items: center; padding: calc(var(--topo) + 28px) var(--margem) 84px; }
.cat-heroi-fundos, .cat-heroi-fundo { position: absolute; inset: 0; }
.cat-heroi-fundos { z-index: -1; }
.cat-heroi-fundo { background-size: cover; background-position: center; filter: blur(56px) saturate(1.35) brightness(.5); transform: scale(1.3); opacity: 0; transition: opacity 1s ease; }
.cat-heroi-fundo.ativo { opacity: 1; }
.cat-heroi-fundos::after { content: ''; position: absolute; inset: 0; background:
  radial-gradient(ellipse 60% 70% at 72% 40%, rgba(92, 200, 240, .10), transparent 70%),
  linear-gradient(90deg, rgba(7, 9, 11, .92) 0%, rgba(7, 9, 11, .55) 45%, rgba(7, 9, 11, .2) 100%),
  linear-gradient(180deg, rgba(7, 9, 11, 0) 55%, var(--fundo) 100%); }
.cat-heroi-grade { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; gap: clamp(28px, 4.5vw, 72px); }
.cat-heroi-texto { min-width: 0; max-width: 620px; }
.cat-heroi-slide { animation: cat-entra .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes cat-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cat-selo { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(92, 200, 240, .12); border: 1px solid rgba(92, 200, 240, .28); color: var(--gelo); font: 600 13px var(--titulo); letter-spacing: 0; }
.cat-selo .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ciano); box-shadow: 0 0 0 0 rgba(92, 200, 240, .6); animation: cat-pulsa 2s infinite; }
.cat-selo.ouro { background: rgba(233, 185, 73, .12); border-color: rgba(233, 185, 73, .3); color: #F6DFA6; }
.cat-selo.ouro .ponto { background: var(--ouro); animation: none; }
/* a pílula do destaque sem a redoma azul e sem o pontinho (pedidos dele, 13/11/2026): só as estrelas e o texto, rente ao título */
.cat-heroi .cat-selo { padding: 0; border: 0; border-radius: 0; background: none; }
.cat-heroi .cat-selo .ponto { display: none; }
@keyframes cat-pulsa { 0% { box-shadow: 0 0 0 0 rgba(92, 200, 240, .55); } 70% { box-shadow: 0 0 0 9px rgba(92, 200, 240, 0); } 100% { box-shadow: 0 0 0 0 rgba(92, 200, 240, 0); } }
.cat-heroi-titulo { margin: 18px 0 14px; font: 800 clamp(36px, 4.7vw, 70px)/1.02 var(--titulo); letter-spacing: -.025em; text-wrap: balance; }
.cat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--texto-2); font-size: 14.5px; }
.cat-meta > * { display: inline-flex; align-items: center; gap: 6px; }
.cat-meta .nota { color: #fff; font-weight: 600; }
.cat-meta .nota svg { width: 15px; height: 15px; color: var(--ouro); }
.cat-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--texto-3); }
.cat-meta .pilula { padding: 2px 8px; border: 1px solid var(--linha-2); border-radius: 5px; font-size: 12.5px; font-weight: 600; color: var(--texto); }
.cat-heroi-frase { margin: 16px 0 28px; max-width: 56ch; color: var(--texto-2); font-size: 16.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cat-heroi-preco { margin: -12px 0 26px; color: var(--texto-2); font-size: 15px; }
.cat-heroi-preco b { color: #fff; font: 700 19px var(--titulo); }
.cat-acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.cat-bt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 0; font: 600 15.5px/1.1 var(--titulo); text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: transform .15s ease, background .2s, box-shadow .2s, border-color .2s; }
.cat-bt:active { transform: scale(.97); }
.cat-bt svg { width: 20px; height: 20px; flex: none; }
.cat-bt-branco { background: #fff; color: #07090B !important; }
.cat-bt-branco:hover { background: #DCE8EF; }
.cat-bt-vidro { background: rgba(255, 255, 255, .12); color: #fff !important; border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cat-bt-vidro:hover { background: rgba(255, 255, 255, .2); }
.cat-bt-azul { background: var(--degrade); color: #fff !important; box-shadow: 0 12px 30px -10px rgba(46, 118, 151, .7), inset 0 1px 0 rgba(201, 236, 251, .35); }
.cat-bt-azul:hover { box-shadow: 0 16px 36px -10px rgba(46, 118, 151, .9), inset 0 1px 0 rgba(201, 236, 251, .5); filter: brightness(1.08); }
.cat-bt-contorno { background: transparent; color: #fff !important; border: 1px solid var(--linha-2); }
.cat-bt-contorno:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .05); }
.cat-bt-cheio { width: 100%; }

.cat-heroi-arte { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .09); }
.cat-heroi-arte img, .cat-heroi-arte iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.cat-heroi-arte img { animation: cat-arte 9s ease-out both; }
@keyframes cat-arte { from { transform: scale(1.06); } to { transform: scale(1); } }
.cat-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 78px; height: 78px; margin: -39px 0 0 -39px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .75); background: rgba(7, 9, 11, .42); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .2s, background .2s; }
.cat-play:hover { transform: scale(1.07); background: rgba(46, 118, 151, .75); }
.cat-play svg { width: 30px; height: 30px; margin-left: 4px; }
.cat-play-rotulo { position: absolute; left: 50%; top: calc(50% + 50px); z-index: 2; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: rgba(7, 9, 11, .55); color: #fff; font: 600 12.5px var(--titulo); white-space: nowrap; pointer-events: none; }
.cat-heroi-pontos { position: absolute; left: var(--margem); bottom: 64px; display: flex; gap: 8px; z-index: 3; }
.cat-heroi-pontos button { position: relative; width: 36px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .24); overflow: hidden; cursor: pointer; }
.cat-heroi-pontos button::before { content: ''; position: absolute; inset: -10px 0; }
.cat-heroi-pontos button.ativo::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: cat-progresso var(--tempo, 8s) linear forwards; }
.cat-heroi.pausado .cat-heroi-pontos button.ativo::after { animation-play-state: paused; }
.cat-heroi-pontos button.visto { background: rgba(255, 255, 255, .6); }
@keyframes cat-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 899px) {
  .cat-heroi { min-height: 0; align-items: flex-start; padding: calc(var(--topo) + 18px) var(--margem) 64px; }
  .cat-heroi-grade { grid-template-columns: 1fr; gap: 22px; }
  .cat-heroi-arte { order: -1; border-radius: 14px; }
  .cat-heroi-titulo { margin-top: 14px; font-size: clamp(30px, 8vw, 44px); }
  .cat-heroi-frase { font-size: 15px; margin: 12px 0 20px; -webkit-line-clamp: 2; }
  .cat-heroi-pontos { bottom: 26px; }
  .cat-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .cat-play-rotulo { top: calc(50% + 42px); }
}
@media (max-width: 559px) {
  .cat-acoes .cat-bt { flex: 1 1 140px; padding: 0 16px; font-size: 15px; }
}

/* destaque institucional: o vídeo da Creative tocando na moldura (sem som; o botão liga) */
.cat-heroi.institucional .cat-heroi-fundo { filter: blur(64px) saturate(1.2) brightness(.32); }
.cat-heroi-video iframe { opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.cat-heroi-video.tocando iframe { opacity: 1; }
.cat-heroi-video.tocando img { visibility: hidden; }
.cat-som { position: absolute; z-index: 3; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(7, 9, 11, .58); color: #fff; font: 600 13px var(--titulo); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s; }
.cat-som:hover { background: rgba(46, 118, 151, .85); }
.cat-som svg { width: 19px; height: 19px; }
.cat-som[aria-pressed="true"] { background: rgba(46, 118, 151, .85); border-color: rgba(201, 236, 251, .5); }
@media (max-width: 559px) { .cat-som span { display: none; } .cat-som { width: 40px; padding: 0; justify-content: center; } .cat-so-largo { display: none; } }

/* ------------------------------------------------------------------ fileiras */
.cat-fileiras { position: relative; z-index: 2; margin-top: -24px; padding-bottom: 24px; }
.cat-fileira { position: relative; margin-bottom: clamp(30px, 3.6vw, 48px); }
.cat-fileira-topo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 0 var(--margem); margin-bottom: 10px; }
.cat-fileira-topo h2 { margin: 0; font: 600 clamp(18px, 1.55vw, 23px)/1.25 var(--titulo); letter-spacing: -.01em; }
.cat-fileira-topo p { margin: 0; color: var(--texto-3); font-size: 13.5px; }
.cat-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w); gap: var(--gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 var(--margem); padding: 6px var(--margem) 14px; scrollbar-width: none; overscroll-behavior-x: contain; }
.cat-trilho::-webkit-scrollbar { display: none; }
.cat-trilho > * { scroll-snap-align: start; }
.cat-fileira.vertical .cat-trilho { grid-auto-columns: var(--card-wv); }
/* arrastar com o mouse (como na aba Eventos) */
@media (hover: hover) and (pointer: fine) { .cat-trilho { cursor: grab; } }
.cat-trilho.arrastando { cursor: grabbing; scroll-snap-type: none; -webkit-user-select: none; user-select: none; }
.cat-trilho.arrastando .cat-card { pointer-events: none; }
.cat-seta { position: absolute; z-index: 4; top: 40px; bottom: 44px; width: max(var(--margem), 46px); display: none; align-items: center; justify-content: center; border: 0; padding: 0; color: #fff; cursor: pointer; opacity: 0; transition: opacity .2s; }
.cat-seta.esq { left: 0; background: linear-gradient(90deg, rgba(7, 9, 11, .92), rgba(7, 9, 11, 0)); }
.cat-seta.dir { right: 0; background: linear-gradient(270deg, rgba(7, 9, 11, .92), rgba(7, 9, 11, 0)); }
.cat-seta svg { width: 30px; height: 30px; transition: transform .2s; }
.cat-seta:hover svg { transform: scale(1.25); }
@media (hover: hover) and (min-width: 760px) {
  .cat-seta { display: flex; }
  .cat-fileira:hover .cat-seta.pode { opacity: 1; }
}

/* cartões */
.cat-card { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cat-card-arte { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--painel-2); box-shadow: 0 0 0 1px var(--linha); }
.cat-card-arte img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .3s; -webkit-user-drag: none; }
.cat-card-arte.vertical { aspect-ratio: 496 / 890; border-radius: 12px; }
.cat-card-arte.sem-vertical img { object-position: 62% center; }
@media (hover: hover) { .cat-card:hover .cat-card-arte img { transform: scale(1.045); } }
.cat-card:focus-visible .cat-card-arte { outline: 2px solid var(--ciano); outline-offset: 2px; }
.cat-tag { position: absolute; z-index: 2; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 6px; border-radius: 5px; background: var(--ouro); color: #1B1405; font: 800 10.5px/1.2 var(--titulo); letter-spacing: .03em; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.cat-tag small { font-size: 9px; font-weight: 700; opacity: .8; }
.cat-quando { position: absolute; z-index: 2; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); padding: 4px 9px 4px 8px; border-radius: 999px; background: rgba(7, 9, 11, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 600 11.5px/1.2 var(--titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-quando .ponto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ciano); }
.cat-quando.logo .ponto { animation: cat-pulsa 2s infinite; }
.cat-card-info { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; margin-top: 8px; font-size: 13px; color: var(--texto-3); line-height: 1.3; }
.cat-card-info b { color: var(--texto); font-weight: 600; white-space: nowrap; }
.cat-card-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* nos cartões de "Mais como este" o preço nunca passa da largura do cartão (antes atropelava o vizinho) */
.cat-parecidos .cat-card-info { min-width: 0; }
.cat-parecidos .cat-card-info span, .cat-parecidos .cat-card-info b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Top 10: o número grande vazado ao lado da capa */
.cat-fileira.top10 .cat-trilho { grid-auto-columns: calc(var(--card-w) * 1.3); }
.cat-top { display: grid; grid-template-columns: calc(var(--card-w) * .3) var(--card-w); align-items: start; }
.cat-top .cat-num { position: relative; z-index: 0; height: calc(var(--card-w) * 9 / 16); display: flex; align-items: flex-end; justify-content: flex-end; margin-right: calc(var(--card-w) * -.07); font: 800 calc(var(--card-w) * .5)/.74 var(--titulo); letter-spacing: -.06em; color: var(--fundo); -webkit-text-stroke: 2px rgba(242, 245, 247, .55); paint-order: stroke fill; user-select: none; transition: -webkit-text-stroke-color .3s; }
.cat-top.dez .cat-num { letter-spacing: -.13em; font-size: calc(var(--card-w) * .4); }
.cat-top .cat-card { position: relative; z-index: 1; }
@media (hover: hover) { .cat-top:hover .cat-num { -webkit-text-stroke-color: var(--ciano); } }
@media (max-width: 759px) { .cat-top .cat-num { -webkit-text-stroke-width: 1.5px; } }

/* ------------------------------------------------------------------ desenho da Netflix nas janelas (pedido dele, 13/11/2026,
   com 2 imagens do app: "faça idêntico, o mais parecido possível: botões, fontes, fundos, cores, tudo"). A fonte da
   Netflix (Netflix Sans) não é livre: a Inter, que a página já carrega, é a mais parecida. Botões de cantos de 4 px:
   branco com letra preta no principal ("Assistir", "Comprar no cartão") e, nos secundários, o vidro do Modo Teatro da
   página TRM-TM, na cor da capa (o vermelho da Netflix para comprar saiu a pedido dele, 13/11/2026). O fundo
   pega a cor da capa do curso (--amb1/--amb2, calculadas no catalogo.js), como a Netflix faz com o pôster. Sem a marca
   nem o "N" da Netflix. Vale só na ficha (a prévia do mouse ficou a antiga, escolha dele) */
:root { --nf-fonte: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; --nf-vermelho: #E50914; }
.nf-bt { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 42px; padding: 0 22px; border: 0; border-radius: 4px; font: 700 16px/1 var(--nf-fonte); letter-spacing: -.01em; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: background .15s, transform .12s; }
/* o treinamentos.css (motor do ConvertBox, carregado depois) tem ".tr button { font: inherit }": aqui a letra dos botões
   volta com mais peso de seletor */
.tr .nf-bt { font: 700 16px/1 var(--nf-fonte); letter-spacing: -.01em; }
.nf-bt svg { width: 22px; height: 22px; flex: none; }
.nf-bt:active { transform: scale(.97); }
.nf-branco { background: #fff; color: #000 !important; }
.nf-branco:hover { background: rgba(255, 255, 255, .75); }
.nf-cinza { background: rgba(109, 109, 110, .7); color: #fff !important; }
.nf-cinza:hover { background: rgba(109, 109, 110, .4); }
.nf-cheio, .tr .nf-cheio { display: flex; width: 100%; height: auto; min-height: 44px; padding: 11px 16px; white-space: normal; text-align: center; line-height: 1.2; }
.nf-redondo { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); background: rgba(42, 42, 42, .6); color: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.nf-redondo:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.nf-redondo svg { width: 22px; height: 22px; }
.nf-redondo[aria-pressed="true"] { border-color: #fff; }
.nf-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 2px; color: #fff; font: 500 14px/1.35 var(--nf-fonte); }
.nf-tags > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nf-tags > span + span::before { content: '•'; margin: 0 8px; color: rgba(255, 255, 255, .6); font-size: .78em; }
.nf-tags svg { width: 13px; height: 13px; color: #fff; }

/* prévia ao passar o mouse (computador), redesenhada em 13/11/2026 ("mais moderno e intuitivo"): a capa horizontal no
   alto, que se funde na cor da capa (como a ficha); nome, destaques, 2 quadrinhos de vidro (próxima turma e
   investimento) e botões com nome no desenho da ficha: branco, vidro do Modo Teatro e o "+" redondo. (O cartão em pé
   da Netflix foi testado e ele não quis: não reaplicar.) */
.cat-previa { --amb1: hsl(205, 45%, 23%); --amb2: hsl(205, 34%, 11%); --amb-brilho: hsla(205, 45%, 42%, .5); --nf-luz: 80, 86, 96; --titulo: var(--nf-fonte); --corpo: var(--nf-fonte);
  position: absolute; z-index: 40; width: 0; border-radius: 12px; overflow: hidden; font-family: var(--nf-fonte);
  background: linear-gradient(180deg, var(--amb1) 0%, var(--amb2) 75%, #111 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 70px -10px rgba(0, 0, 0, .9), 0 40px 110px -30px var(--amb-brilho);
  transform: scale(.72); opacity: 0; transition: transform .24s cubic-bezier(.2, .8, .2, 1), opacity .2s; pointer-events: none; cursor: pointer; }
.cat-previa.visivel { transform: none; opacity: 1; pointer-events: auto; }
.cat-previa-arte { position: relative; aspect-ratio: 16 / 9; background: #000; }
.cat-previa-arte > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.cat-previa-arte::after { content: ''; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(180deg, transparent, var(--amb1)); pointer-events: none; }
.pv-selo { position: absolute; z-index: 1; top: 10px; left: 10px; width: 30px; height: 30px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.cat-previa-corpo { padding: 14px 14px 14px; } /* o nome não gruda na capa (pedido dele, 13/11/2026) */
.cat-previa h3 { margin: 0 0 4px; font: 700 18px/1.2 var(--nf-fonte); letter-spacing: -.02em; color: #fff; }
.cat-previa .cat-meta { gap: 3px 8px; color: #fff; font-size: 12.5px; font-weight: 500; }
.cat-previa .cat-meta .sep { width: 3px; height: 3px; background: rgba(255, 255, 255, .6); }
.pv-quadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.pv-quadro { min-width: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pv-rotulo { display: block; margin-bottom: 3px; color: rgba(255, 255, 255, .62); font: 700 9.5px/1.2 var(--nf-fonte); letter-spacing: .12em; text-transform: uppercase; }
.pv-quadro b { display: block; overflow: hidden; color: #fff; font: 700 15px/1.25 var(--nf-fonte); letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
.pv-quadro small { display: flex; align-items: center; gap: 5px; margin-top: 2px; overflow: hidden; color: rgba(255, 255, 255, .72); font-size: 11.5px; white-space: nowrap; }
.pv-quadro .ponto { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--nf-vermelho); }
.pv-bts { display: flex; align-items: center; gap: 8px; }
.pv-bts .nf-bt { flex: 1 1 0; min-width: 0; height: 38px; padding: 0 10px; gap: 6px; font-size: 14px; }
.pv-bts .nf-bt svg { width: 18px; height: 18px; }
.pv-bts .nf-redondo { width: 38px; height: 38px; }
.pv-bts .nf-redondo svg { width: 20px; height: 20px; }

/* busca */
.cat-resultados { padding: calc(var(--topo) + 34px) var(--margem) 40px; min-height: 70vh; }
.cat-resultados h2 { margin: 0 0 18px; font: 600 clamp(18px, 1.6vw, 24px) var(--titulo); }
.cat-resultados h2 span { color: var(--texto-3); font-weight: 500; }
.cat-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 42vw), 1fr)); gap: 22px 12px; }
.cat-vazio { max-width: 520px; padding: 30px 0; color: var(--texto-2); }
.cat-vazio .cat-bt { margin-top: 18px; }

/* ------------------------------------------------------------------ ficha do curso (janela) */
.cat-modal-fundo { position: fixed; z-index: 90; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding: 4vh 18px; overflow-y: auto; overscroll-behavior: contain; background: rgba(3, 5, 7, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.cat-modal-fundo.aberto { opacity: 1; }
.cat-modal { position: relative; width: min(1060px, 100%); margin-bottom: 4vh; border-radius: 18px; overflow: hidden; background: #0D1117; box-shadow: 0 50px 130px rgba(0, 0, 0, .75), 0 0 0 1px var(--linha); transform: translateY(22px) scale(.985); transition: transform .35s cubic-bezier(.2, .8, .2, 1); outline: none; }
.cat-modal-fundo.aberto .cat-modal { transform: none; }
.cat-fechar { position: absolute; z-index: 6; top: 14px; right: 14px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(7, 9, 11, .72); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, transform .15s; }
.cat-fechar:hover { background: rgba(7, 9, 11, .95); transform: rotate(90deg); }
.cat-fechar svg { width: 18px; height: 18px; }
.cat-modal-arte { position: relative; aspect-ratio: 16 / 9; background: #000; }
.cat-modal-arte img, .cat-modal-arte iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.cat-modal-arte::after { content: ''; position: absolute; inset: auto 0 0; height: 28%; background: linear-gradient(180deg, rgba(13, 17, 23, 0), #0D1117); pointer-events: none; }
.cat-modal-arte.tocando::after { display: none; }
/* o trailer começa sozinho (13/11/2026): fica invisível por cima da capa até o player contar que está tocando; o play
   só aparece se ele não tocar; "Ativar som" no canto de cima à esquerda (embaixo ficam os controles do YouTube) */
.cat-modal-arte iframe { opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.cat-modal-arte.tocando iframe { opacity: 1; pointer-events: auto; }
.cat-modal-arte.tocando img, .cat-modal-arte.tocando .cat-play { visibility: hidden; }
.cat-modal-arte .cat-play { transition: transform .2s, background .2s, opacity .3s; }
.cat-modal-arte.carregando .cat-play { opacity: 0; pointer-events: none; }
.cat-modal-arte .cat-som { top: 12px; left: 12px; right: auto; bottom: auto; }
/* o nome do curso não fica grudado no vídeo (pedido dele, 13/11/2026) */
.cat-modal-corpo { position: relative; padding: 24px clamp(20px, 4vw, 44px) 40px; }
.cat-modal-cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; margin-bottom: 26px; }
.cat-modal-cabeca h2 { margin: 0 0 10px; font: 800 clamp(28px, 3.4vw, 42px)/1.06 var(--titulo); letter-spacing: -.02em; }
/* os 2 botões da ficha (áudio no WhatsApp, página do curso) no alto da coluna da esquerda, ao lado do Investimento, e o
   "Eleito o Melhor..." na largura toda logo abaixo do nome (pedido dele, 13/11/2026: o texto ficava espremido em 4
   linhas na coluna da esquerda). Os botões ficam lado a lado quando cabem e um sobre o outro na coluna estreita */
.cat-modal-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-modal-acoes .nf-bt { flex: 1 1 auto; height: 46px; padding: 0 20px; font-size: 15px; }
.cat-modal-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: clamp(22px, 3.5vw, 44px); align-items: start; }
.cat-premio { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; color: #fff; font: 600 15px/1.45 var(--titulo); }
.cat-descricao { margin: 0 0 22px; color: var(--texto-2); font-size: 15.5px; line-height: 1.68; }
.cat-inclui { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.cat-inclui li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--linha); font-size: 13px; color: var(--texto); }
.cat-inclui svg { width: 16px; height: 16px; color: var(--azul-claro); }
.cat-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--linha); list-style: none; font-size: 14px; }
.cat-links a, .cat-links button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--azul-claro); font: 500 14px var(--corpo); text-decoration: none; cursor: pointer; }
.cat-links a:hover, .cat-links button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cat-links svg { width: 15px; height: 15px; }

.cat-cartao { position: relative; padding: 20px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); border: 1px solid var(--linha); }
.cat-cartao + .cat-cartao { margin-top: 14px; }
.cat-cartao.brilha { animation: cat-brilha 1.4s ease; }
@keyframes cat-brilha { 0%, 100% { box-shadow: 0 0 0 0 rgba(92, 200, 240, 0); } 30% { box-shadow: 0 0 0 3px rgba(92, 200, 240, .55); } }
.cat-rotulo { display: block; margin: 0 0 10px; color: var(--texto-3); font: 600 11.5px/1.2 var(--corpo); letter-spacing: .12em; text-transform: uppercase; }
.cat-escolha { display: flex; gap: 4px; padding: 4px; margin: 0 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.cat-escolha button { flex: 1; min-height: 34px; padding: 6px 8px; border: 0; border-radius: 999px; background: none; color: var(--texto-2); font: 600 13px var(--titulo); cursor: pointer; transition: background .2s, color .2s; }
.cat-escolha button:hover { color: #fff; }
.cat-escolha button[aria-pressed="true"] { background: #fff; color: #07090B; }
.cat-valor { font: 700 clamp(28px, 2.6vw, 34px)/1.1 var(--titulo); letter-spacing: -.01em; }
.cat-valor small { display: block; margin-top: 4px; color: var(--texto-2); font: 500 13.5px var(--corpo); letter-spacing: 0; }
.cat-valor-sub { margin: 10px 0 18px; color: var(--texto-2); font-size: 14px; line-height: 1.5; }
.cat-valor-sub b { color: #fff; font-weight: 600; }
.cat-cartao .cat-bt + .cat-bt { margin-top: 10px; }
.cat-miudos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.cat-miudos button, .cat-miudos a { padding: 0; border: 0; background: none; color: var(--texto-2); font: 500 13px var(--corpo); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; cursor: pointer; }
.cat-miudos button:hover, .cat-miudos a:hover { color: #fff; text-decoration-color: #fff; }

.cat-data { font: 700 21px/1.25 var(--titulo); }
.cat-data .seta { color: var(--texto-3); font-weight: 600; margin: 0 4px; }
.cat-data-sub { margin: 6px 0 12px; color: var(--texto-2); font-size: 14px; line-height: 1.5; }
.cat-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(92, 200, 240, .12); color: var(--gelo); font: 600 12.5px var(--titulo); }
.cat-chip .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--ciano); }
.cat-abre { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--azul-claro); font: 600 13.5px var(--corpo); cursor: pointer; }
.cat-abre svg { width: 16px; height: 16px; transition: transform .2s; }
.cat-abre[aria-expanded="true"] svg { transform: rotate(180deg); }
.cat-aulas { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.cat-aulas li { padding: 6px 4px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linha); text-align: center; font-size: 12.5px; line-height: 1.25; color: var(--texto-2); }
.cat-aulas li b { display: block; color: #fff; font: 600 13.5px var(--titulo); }
.cat-depois { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linha); color: var(--texto-2); font-size: 13.5px; }
.cat-depois b { color: #fff; font-weight: 600; }

.cat-parecidos { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--linha); }
.cat-parecidos h3 { margin: 0 0 14px; font: 600 19px var(--titulo); }
.cat-parecidos .cat-grade { grid-template-columns: repeat(auto-fill, minmax(min(150px, 40vw), 1fr)); gap: 18px 12px; }

.cat-barra-compra { display: none; }

/* ficha mais compacta no computador (pedido dele, 13/11/2026: no zoom 100% ela ficava grande; o tamanho bom era o
   que ele via com o zoom reduzido): janela de até 820 px, imagem que não passa de ~54% da altura, letras e folgas
   menores. A largura acompanha a altura da tela: no máximo a da imagem 16:9 que cabe em 54% dela; no mínimo 700 px.
   Depois (13/11/2026, pedido dele: o vídeo "em largura total, sem faixas pretas dos lados") a imagem é sempre 16:9 na
   largura toda da janela, sem teto de altura: com o teto, em telas baixas o YouTube punha faixas pretas dos lados. O
   mínimo baixou de 760 para 700 px para o vídeo não crescer demais nessas telas, e "Mais como este" usa capas de 118 px
   para seguir com 5 numa fileira */
@media (min-width: 760px) {
  .cat-modal { width: min(820px, 100%, max(700px, calc(54vh * 16 / 9))); border-radius: 16px; }
  .cat-modal-arte { width: 100%; }
  .cat-fechar { width: 38px; height: 38px; top: 12px; right: 12px; }
  .cat-modal .cat-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .cat-modal .cat-play svg { width: 26px; height: 26px; }
  .cat-modal-corpo { padding: 22px clamp(18px, 3vw, 30px) 28px; }
  .cat-modal-cabeca { gap: 12px 20px; margin-bottom: 16px; }
  .cat-modal-cabeca h2 { margin-bottom: 6px; font-size: clamp(24px, 2.3vw, 31px); }
  .cat-modal-cabeca .cat-meta { font-size: 13.5px; }
  .cat-modal-acoes .nf-bt { height: 42px; padding: 0 16px; font-size: 15px; }
  .cat-modal-acoes .nf-bt svg { width: 20px; height: 20px; }
  .cat-modal-grade { grid-template-columns: minmax(0, 1.45fr) minmax(250px, 1fr); gap: clamp(18px, 2.4vw, 28px); }
  .cat-premio { gap: 12px; margin-bottom: 18px; font-size: 14px; align-items: center; }
  .cat-descricao { margin-bottom: 16px; font-size: 14px; line-height: 1.6; }
  .cat-inclui { gap: 6px; margin-bottom: 18px; }
  .cat-inclui li { padding: 5px 10px; font-size: 12.5px; }
  .cat-links { padding-top: 14px; font-size: 13px; }
  .cat-links a, .cat-links button { font-size: 13px; }
  .cat-cartao { padding: 15px 16px; border-radius: 14px; }
  .cat-cartao + .cat-cartao { margin-top: 12px; }
  .cat-rotulo { margin-bottom: 8px; font-size: 10.5px; }
  .cat-escolha { margin-bottom: 12px; }
  .cat-escolha button { min-height: 30px; font-size: 12.5px; }
  .cat-valor { font-size: clamp(23px, 2vw, 27px); }
  .cat-valor small { font-size: 12.5px; }
  .cat-valor-sub { margin: 8px 0 13px; font-size: 13px; }
  .cat-modal .cat-bt-cheio { min-height: 42px; font-size: 14px; }
  .cat-cartao .cat-bt + .cat-bt { margin-top: 8px; }
  .cat-miudos { margin-top: 10px; gap: 4px 12px; }
  .cat-miudos button, .cat-miudos a { font-size: 12px; }
  .cat-data { font-size: 18px; }
  .cat-data-sub { margin: 4px 0 10px; font-size: 13px; }
  .cat-chip { padding: 4px 10px; font-size: 12px; }
  .cat-abre { margin-top: 10px; font-size: 13px; }
  .cat-parecidos { margin-top: 28px; padding-top: 20px; }
  .cat-parecidos h3 { margin-bottom: 12px; font-size: 17px; }
  .cat-parecidos .cat-grade { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px 10px; }
}

.cat-modal-grade > *, .cat-modal-cabeca > * { min-width: 0; }
.cat-bt-cheio { white-space: normal; text-align: center; padding: 10px 18px; }
/* duas colunas: os botões no alto da esquerda (um sobre o outro), o texto do curso embaixo deles, o Investimento e as
   datas à direita ocupando as duas linhas */
@media (min-width: 860px) {
  .cat-modal-grade { grid-template-areas: "acoes lado" "principal lado"; grid-template-rows: auto 1fr; row-gap: 0; }
  .cat-modal-acoes { grid-area: acoes; flex-direction: column; margin-bottom: 18px; }
  .cat-modal-acoes .nf-bt { flex: none; width: 100%; }
  .cat-modal-principal { grid-area: principal; }
  .cat-modal-lado { grid-area: lado; }
}
/* uma coluna: botões, Investimento e datas, depois o texto do curso */
@media (max-width: 859px) {
  .cat-modal-grade { grid-template-columns: minmax(0, 1fr); }
  .cat-modal-acoes { order: -2; }
  .cat-modal-lado { order: -1; }
}
@media (max-width: 759px) {
  .cat-modal-fundo { padding: 0; }
  .cat-modal { width: 100%; min-height: 100%; margin: 0; border-radius: 0; }
  .cat-modal-corpo { padding: 20px 18px 120px; }
  .cat-modal-cabeca { margin-bottom: 14px; }
  .cat-fechar { top: 10px; right: 10px; }
  .cat-barra-compra { position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(13, 17, 23, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--linha); transform: translateY(110%); transition: transform .3s; }
  .cat-barra-compra.visivel { transform: none; }
  .cat-barra-compra div { min-width: 0; font-size: 12px; color: var(--texto-2); line-height: 1.3; }
  .cat-barra-compra div b { display: block; color: #fff; font: 700 17px var(--titulo); }
  .cat-barra-compra .nf-bt { height: 46px; padding: 0 24px; font-size: 15px; }
}

/* ficha do curso no desenho da Netflix (13/11/2026): a janela é como o cartão em destaque do app (cantos arredondados,
   borda clara fina), o fundo dela e o de trás pegam a cor da capa do curso, letra Inter no lugar da Poppins, a linha
   de destaques com pontos brancos, botões branco/cinza/vermelho de cantos de 4 px e cartões de vidro (como as pílulas
   "Séries", "Filmes" do app) */
.cat-modal-fundo { --amb1: hsl(205, 45%, 23%); --amb2: hsl(205, 34%, 11%); --amb-brilho: hsla(205, 45%, 42%, .5); --nf-luz: 80, 86, 96;
  background: radial-gradient(120% 75% at 50% 0%, var(--amb-brilho), rgba(4, 5, 7, .86) 72%); }
.cat-modal { --titulo: var(--nf-fonte); --corpo: var(--nf-fonte); font-family: var(--nf-fonte);
  background: linear-gradient(180deg, var(--amb1) 0%, var(--amb2) 46%, #141414 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 50px 130px rgba(0, 0, 0, .8); }
.cat-modal-arte::after { background: linear-gradient(180deg, transparent, var(--amb1)); }
.cat-fechar { background: #181818; }
.cat-fechar:hover { background: #2A2A2A; }
.cat-modal-cabeca { align-items: center; flex-wrap: nowrap; }
.cat-modal-cabeca h2 { font-weight: 700; letter-spacing: -.025em; }
.cat-modal .cat-meta { color: #fff; font-weight: 500; gap: 4px 10px; }
.cat-modal .cat-meta .sep { width: 4px; height: 4px; background: rgba(255, 255, 255, .6); }
.cat-modal .cat-meta .nota { font-weight: 700; }
.cat-modal .cat-premio { font-weight: 600; letter-spacing: -.005em; }
.cat-modal .cat-descricao { color: rgba(255, 255, 255, .82); }
.cat-modal .cat-inclui li { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-weight: 600; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cat-modal .cat-inclui svg { color: #fff; }
.cat-modal .cat-links { border-top-color: rgba(255, 255, 255, .14); }
.cat-modal .cat-links a, .cat-modal .cat-links button { color: #fff; font-weight: 600; }
.cat-modal .cat-cartao { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cat-modal .cat-rotulo { color: rgba(255, 255, 255, .62); font-weight: 700; }
.cat-modal .cat-valor { font-weight: 700; letter-spacing: -.025em; }
.cat-modal .cat-valor small, .cat-modal .cat-valor-sub, .cat-modal .cat-data-sub, .cat-modal .cat-depois { color: rgba(255, 255, 255, .72); }
.cat-modal .cat-escolha { border-radius: 6px; background: rgba(255, 255, 255, .1); }
.cat-modal .cat-escolha button { border-radius: 4px; color: rgba(255, 255, 255, .78); font-weight: 700; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
.cat-modal .cat-escolha button[aria-pressed="true"] { background: #fff; color: #000; }
.cat-cartao .nf-bt + .nf-bt { margin-top: 8px; }.cat-modal .cat-chip { background: rgba(255, 255, 255, .14); color: #fff; }
.cat-modal .cat-chip .ponto { background: var(--nf-vermelho); }
.cat-modal .cat-abre { color: #fff; }
.cat-modal .cat-aulas li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.cat-modal .cat-miudos button, .cat-modal .cat-miudos a { color: rgba(255, 255, 255, .78); }
.cat-modal .cat-parecidos { border-top-color: rgba(255, 255, 255, .14); }
.cat-modal .cat-parecidos h3 { font-weight: 700; letter-spacing: -.01em; }
.cat-modal .cat-card-arte { border-radius: 6px; }
.cat-modal .cat-som { height: 40px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(42, 42, 42, .6); font-weight: 700; }
.cat-modal .cat-som:hover { background: rgba(255, 255, 255, .15); }
.cat-modal .cat-barra-compra { background: rgba(20, 20, 20, .94); border-top-color: rgba(255, 255, 255, .12); }
/* botões secundários no Modo Teatro (pedido dele, 13/11/2026): o vidro da página TRM-TM, que pega a cor do vídeo como os
   do modo ambiente do YouTube; aqui a cor é a da capa do curso (--nf-luz, gravada pelo catalogo.js) */
.cat-modal .nf-cinza, .cat-modal .nf-redondo, .cat-previa .nf-cinza, .cat-previa .nf-redondo, .cat-gaveta .nf-cinza {
  background: rgba(var(--nf-luz), .46); border: 0;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  transition: background-color 1.2s ease, transform .15s; }
.cat-modal .nf-cinza:hover, .cat-modal .nf-redondo:hover, .cat-previa .nf-cinza:hover, .cat-previa .nf-redondo:hover, .cat-gaveta .nf-cinza:hover { background: rgba(var(--nf-luz), .68); }
/* secundários sem contorno e mais arredondados (pedido dele, 13/11/2026) */
.cat-modal .nf-cinza, .cat-previa .nf-cinza, .cat-gaveta .nf-cinza { border-radius: 12px; }
.cat-modal .nf-redondo[aria-pressed="true"], .cat-previa .nf-redondo[aria-pressed="true"] { background: rgba(var(--nf-luz), .72); }
/* o carrinho com a marca de "já está no carrinho" */
[data-acao="carrinho"] { position: relative; }
.pv-marca { position: absolute; right: -3px; top: -3px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #fff; color: #000; }
.pv-marca svg { width: 11px !important; height: 11px !important; }
/* topo da ficha igual ao da janela da página inicial (pedido dele, 13/11/2026): o vídeo se apaga no preto embaixo e
   escurece um pouco em cima, também com o trailer tocando; no centro, o selo TOP 1, as 5 estrelas com a nota e o nome
   grande (Poppins, como lá), com o carrinho à direita. Com o mouse em cima do vídeo a sombra clareia, para os controles
   do YouTube aparecerem */
.cat-modal-arte::after, .cat-modal-arte.tocando::after { display: block; inset: 0; height: auto; z-index: 1;
  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 32%), linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 30%);
  transition: opacity .35s ease; }
.cat-modal-arte.tocando:hover::after { opacity: .3; }
.cat-modal-corpo { padding-top: 16px; background: linear-gradient(180deg, #000 0, #000 240px, rgba(0, 0, 0, 0) 660px); }
.cat-modal-cabeca { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0; margin-bottom: 16px; text-align: center; }
.cat-ficha-top { display: block; width: 40px; height: auto; margin: 0 0 8px; }
.cat-ficha-nota { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin: 0 0 14px; color: rgba(255, 255, 255, .75); font-size: 13px; }
/* a carga horária e a modalidade na linha das estrelas (pedido dele, 13/11/2026); no celular, numa 2ª linha sem o ponto */
.cat-ficha-nota-a, .cat-ficha-nota-b { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.cat-ficha-nota .sep { flex: none; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
@media (max-width: 559px) {
  .cat-ficha-nota-b { flex-basis: 100%; justify-content: center; }
  .cat-ficha-nota-b .sep-entre { display: none; }
}
.cat-estrelas { display: inline-flex; gap: 2px; color: var(--ouro); }
.cat-estrelas svg { width: 20px; height: 20px; }
.cat-estrelas .meia { opacity: .35; }
.cat-ficha-nome { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 14px; width: 100%; }
.cat-modal-cabeca h2 { margin: 0; font: 700 clamp(24px, 17.6px + 1.6vw, 33.6px)/1.12 'Poppins', var(--nf-fonte); letter-spacing: -.01em; text-wrap: balance; }
/* o "Eleito" centralizado, em linhas equilibradas (text-wrap: balance). Ele chegou a ir para a largura toda da janela
   (13/11/2026), mas pediu para voltar a este jeito: não alargar de novo */
.cat-modal .cat-premio { display: block; text-align: center; text-wrap: balance; }
/* "Receber Áudio no WhatsApp" arredondado como os secundários (pedido dele, 13/11/2026) */
.cat-modal .cat-bt-audio { border-radius: 12px; }
@media (max-width: 759px) {
  .cat-ficha-nome { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 10px; }
  .cat-ficha-nome .nf-redondo { width: 38px; height: 38px; }
  .cat-ficha-nome .nf-redondo svg { width: 20px; height: 20px; }
}

/* ------------------------------------------------------------------ a gaveta do carrinho (canto direito, translúcida) */
.cat-gaveta-fundo { position: fixed; z-index: 120; inset: 0; background: rgba(0, 0, 0, .28); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.cat-gaveta-fundo.aberta { opacity: 1; visibility: visible; }
.cat-gaveta { --nf-luz: 80, 86, 96; position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(400px, calc(100vw - 24px)); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; background: rgba(20, 22, 26, .66); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 90px rgba(0, 0, 0, .6); color: #fff; font-family: var(--nf-fonte);
  transform: translateX(calc(100% + 24px)); transition: transform .38s cubic-bezier(.2, .8, .2, 1); }
.cat-gaveta-fundo.aberta .cat-gaveta { transform: none; }
.gv-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.gv-sobre { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .7); font: 600 12.5px var(--nf-fonte); }
.gv-sobre svg { width: 16px; height: 16px; color: #5FD38A; }
.gv-topo b { display: block; margin-top: 2px; font: 700 20px/1.2 var(--nf-fonte); letter-spacing: -.02em; }
.gv-fechar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.gv-fechar:hover { background: rgba(255, 255, 255, .2); }
.gv-fechar svg { width: 16px; height: 16px; }
.gv-vazio { margin: 18px; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.5; }
.gv-itens { flex: 1; overflow-y: auto; margin: 0; padding: 12px; list-style: none; overscroll-behavior: contain; }
.gv-item { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.gv-item + .gv-item { margin-top: 10px; }
.gv-item.novo { background: rgba(255, 255, 255, .12); animation: gv-chega .5s ease; }
@keyframes gv-chega { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.gv-capa { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.gv-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gv-info { min-width: 0; padding-right: 26px; }
.gv-info b { display: block; font: 700 14.5px/1.25 var(--nf-fonte); }
.gv-info span { display: block; margin-top: 2px; color: rgba(255, 255, 255, .62); font-size: 12.5px; }
.gv-info strong { display: block; margin: 4px 0 8px; font: 700 15px var(--nf-fonte); }
.tr .gv-finalizar { height: 34px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; }
.gv-tirar { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); cursor: pointer; }
.gv-tirar:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.gv-tirar svg { width: 12px; height: 12px; }
.gv-pe { padding: 14px 18px 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.gv-pe .nf-bt { width: 100%; height: 42px; font-size: 14.5px; }
.gv-pe p { margin: 10px 0 0; color: rgba(255, 255, 255, .55); font-size: 12px; text-align: center; }
/* com a gaveta aberta, a bolinha do WhatsApp (ConvertBox) sai do canto dela */
body.cat-com-carrinho .tr-teaser, body.cat-com-carrinho .tr-canto { display: none; }
/* o carrinho no topo da página (só quando há itens) */
.cat-carrinho-topo { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.cat-carrinho-topo[hidden] { display: none; }
.cat-carrinho-topo:hover { background: rgba(255, 255, 255, .2); }
.cat-carrinho-topo svg { width: 21px; height: 21px; }
.cat-carrinho-n { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #fff; color: #000; font: 700 11px/18px var(--nf-fonte); text-align: center; }
@media (max-width: 559px) { .cat-gaveta { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 82vh; } .cat-gaveta { transform: translateY(calc(100% + 24px)); } .gv-item { grid-template-columns: 92px minmax(0, 1fr); } }

/* ------------------------------------------------------------------ rodapé */
.cat-rodape { margin-top: 30px; padding: 36px var(--margem) 44px; border-top: 1px solid var(--linha); color: var(--texto-3); font-size: 13.5px; }
.cat-rodape-grade { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px 40px; }
.cat-rodape img { height: 46px; width: auto; border-radius: 5px; margin-bottom: 12px; }
.cat-rodape p { margin: 0; max-width: 42ch; }
.cat-rodape ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.cat-rodape a { color: var(--texto-2); text-decoration: none; }
.cat-rodape a:hover { color: #fff; }

/* sem JavaScript */
.cat-sem-js { padding: calc(var(--topo) + 30px) var(--margem) 40px; }
.cat-sem-js ul { columns: 2 260px; }
.cat-sem-js a { color: var(--azul-claro); }

/* a bolinha do WhatsApp do ConvertBox não cobre a barra de compra no celular */
@media (max-width: 759px) { body.cat-com-ficha .tr-teaser, body.cat-com-ficha .tr-canto { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .cat-pagina *, .cat-pagina *::before, .cat-pagina *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}