/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA DE CURSO — estrutura comercial
   ───────────────────────────────────────────────────────────────────────────
   Pedido do dono em 23/08/2026, com as palavras dele: "preciso que a página
   seja como se fosse uma página de venda mesmo, que ela venda o peixe (…)
   mesmo que seja de graça a pessoa precisa tomar a decisão rápido".

   Este arquivo é SÓ a casca. Quem decide o que aparece é assets/curso-render.js,
   a partir do banco — e o que não tem dado não vira bloco. Por isso quase toda
   caixa aqui nasce escondida (ver "REGRA DO VAZIO", no fim do arquivo): a
   página tem que ficar de pé hoje, com dois cursos despublicados no banco, e
   ganhar contador, lote e preço no dia em que o dono publicar.

   Mobile primeiro: tudo foi desenhado a 390px e só depois ganhou colunas.
   Alvo de toque mínimo de 48px em qualquer botão (o dedo não tem cursor).

   NÃO EXISTE BARRA FIXA DE COMPRA aqui, de propósito: o site já tem uma
   .toolbar fixa no rodapé (site.css, z-index 80, body com padding-bottom:104px).
   Uma segunda barra grudada embaixo brigaria com ela justamente no celular,
   que é onde a maioria decide. A urgência fica no cartão de oferta, logo abaixo
   do herói, e o CTA se repete ao longo da página.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens locais ───────────────────────────────────────────────────────────
   Derivados dos tokens do site.css (--ink, --muted, --cream, --red, --border).
   Nada de cor nova inventada: a página de curso é o mesmo site. */
:root {
  --cur-card: #fff;
  --cur-sombra: 0 24px 60px -38px rgba(0, 0, 0, .38);
  --cur-borda: #e3e0d9;
  --cur-quente: #f6f3ec;      /* creme rebaixado, para faixas de apoio */
  --cur-alerta: #8a1109;      /* vermelho escuro: passa AA sobre branco */
}

/* ── A regra que vale para todos os encaixes ─────────────────────────────────
   Todo bloco alimentado por dado nasce com [hidden]. O renderizador tira o
   hidden quando (e só quando) tem o que dizer. Sem isso, um banco fora do ar
   deixaria títulos anunciando conteúdo que nunca chega. */
[data-curso-slot][hidden] { display: none !important; }

/* ═══ HERÓI: os fatos e o selo ══════════════════════════════════════════════
   Entram DENTRO do herói escuro que a página já tinha. Contraste conferido
   sobre o gradiente #050508: branco puro e branco a 85%. */
.cur-fatos {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 20px; font-size: 13.5px; line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}
.cur-fatos span { display: inline-flex; align-items: center; gap: 7px; }
.cur-fatos span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan); flex: none;
}

.cur-selo {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 8px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
}
.cur-selo--quente { background: var(--cream); color: #151515; border-color: var(--cream); }
.cur-selo--fim    { background: #ffe3e1; color: var(--cur-alerta); border-color: #ffc9c5; }

/* ═══ CARTÃO DE OFERTA ══════════════════════════════════════════════════════
   O lugar único onde a pessoa vê: quando começa, quanto custa, quanto tempo
   falta e o que fazer. Uma decisão, um cartão. */
.cur-oferta {
  background: var(--cur-card); border: 1px solid var(--cur-borda);
  border-radius: 16px; padding: 24px 20px 26px;
}
@media (min-width: 768px) { .cur-oferta { padding: 34px 34px 36px; } }

.cur-oferta__topo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
}
.cur-preco {
  font-family: Geist, "Arial Black", sans-serif; font-weight: 800;
  font-size: clamp(2rem, 8vw, 2.9rem); line-height: 1; letter-spacing: -.02em;
}
.cur-preco__nota { font-size: 13px; color: var(--muted); font-weight: 500; }
.cur-preco__de {
  font-size: 15px; color: var(--muted); text-decoration: line-through;
  font-weight: 600;
}

/* ── Contagem regressiva ─────────────────────────────────────────────────────
   Números que trocam, não animação: nada aqui pisca, desliza ou pulsa — é a
   mesma decisão do assets/evento-momento.js. Em prefers-reduced-motion o
   renderizador ainda reduz a cadência (de 1s para 30s) e some com os segundos,
   porque um dígito trocando toda hora é movimento para quem pediu menos
   movimento. tabular-nums impede a linha de "respirar" a cada troca. */
/* As casas do relógio são PLACAS de painel de embarque — o mesmo desenho
   do relógio dos ambientes e das placas dos cartões do H7 Plus na home
   (chapa #131518, costura no meio, dígito em Geist creme, rótulo em mono).
   A legenda em mono, com o LED, vem antes; o bloco inteiro é a chapa. */
.cur-conta__legenda {
  display: flex; align-items: center; gap: 10px; margin-top: 22px;
  padding: 18px 18px 0; border-radius: 12px 12px 0 0;
  background: #131518; color: #efe7d6;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.5;
}
.cur-conta__legenda::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #46d97e; box-shadow: 0 0 7px rgba(70, 217, 126, .7);
}
.cur-conta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-top: 0; padding: 16px 18px 18px; background: #131518; border-radius: 0 0 12px 12px;
}
.cur-conta--3 { grid-template-columns: repeat(3, 1fr); }
.cur-conta div {
  position: relative; text-align: center; padding: 16px 6px 12px; min-width: 0; border-radius: 6px;
  background: linear-gradient(180deg, #272c33 0%, #20252b 48%, #161a1f 52%, #1b2025 100%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .025);
}
.cur-conta div::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .6); }
.cur-conta b {
  display: block; font-family: Geist, "Arial Black", sans-serif;
  font-weight: 800; font-size: clamp(1.6rem, 6.5vw, 2.6rem); line-height: 1; color: #efe7d6;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.cur-conta small {
  display: block; margin-top: 8px; font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #79808c;
}
@media (max-width: 560px) { .cur-conta { gap: 6px; padding: 12px 12px 14px; } .cur-conta div { padding: 14px 4px 10px; } .cur-conta__legenda { padding: 14px 12px 0; } }

/* Quando a data chega ou passa, o mesmo espaço vira frase — nunca conta
   negativa (ver curso-render.js, "O QUE ACONTECE QUANDO A DATA PASSA"). */
.cur-conta__fim {
  margin-top: 16px; padding: 16px 18px; border-radius: 14px;
  background: var(--cur-quente); font-size: 15px; font-weight: 600; line-height: 1.45;
}

/* ── Faixa de lotes ──────────────────────────────────────────────────────────
   ESTRUTURA PRONTA ESPERANDO DADO: hoje o banco não tem lote de curso
   (h7_ticket_tiers é de evento). Ver o cabeçalho do curso-render.js. */
.cur-lotes { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
/* No celular cada lote é uma LINHA (nome+preço à esquerda, prazo à direita).
   Com `flex:1 1 150px` numa coluna, o 150px virava ALTURA e cada lote ficava
   um bloco de 150px — três lotes empurravam a decisão para fora da tela.
   O crescimento em cartão só vale quando a faixa vira linha, a partir de 640. */
.cur-lote {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--cur-borda); background: #fff;
}
@media (min-width: 640px) {
  .cur-lotes { flex-direction: row; flex-wrap: wrap; }
  .cur-lote { flex: 1 1 150px; flex-direction: column; align-items: flex-start; gap: 3px; }
}
.cur-lote b { font-size: 13px; font-weight: 700; }
.cur-lote span { font-size: 12.5px; color: var(--muted); text-align: right; }
.cur-lote--atual { background: var(--ink); border-color: var(--ink); color: #fff; }
.cur-lote--atual span { color: rgba(255, 255, 255, .75); }
.cur-lote--fechado { opacity: .55; }
.cur-lote--fechado b { text-decoration: line-through; }

/* ── Vagas ───────────────────────────────────────────────────────────────────
   Só aparece quando a turma tem `vagas` cadastrado. Sem número no banco não
   existe "restam X" — escassez sem dado é mentira, e a regra da casa proíbe. */
.cur-vagas { margin-top: 18px; }
.cur-vagas__linha {
  height: 7px; border-radius: 999px; background: #e7e4dc; overflow: hidden;
}
.cur-vagas__linha i { display: block; height: 100%; background: var(--ink); border-radius: 999px; }
.cur-vagas__txt { margin-top: 9px; font-size: 13px; font-weight: 600; }
.cur-vagas__txt.esgotou { color: var(--cur-alerta); }

/* ── Ações ───────────────────────────────────────────────────────────────────
   min-height 52px: alvo de toque confortável, acima do mínimo de 48. */
.cur-acoes { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
@media (min-width: 560px) { .cur-acoes { flex-direction: row; flex-wrap: wrap; } }
.cur-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 14px 24px; border-radius: 14px;
  font-family: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.2;
  text-align: center; cursor: pointer; border: 1px solid transparent;
  background: var(--ink); color: #fff; transition: transform .2s, background .2s;
}
.cur-btn:hover { background: #000; transform: translateY(-2px); }
.cur-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.cur-btn--fantasma { background: transparent; color: var(--ink); border-color: rgba(21, 21, 21, .28); }
.cur-btn--fantasma:hover { background: transparent; border-color: var(--ink); }
.cur-btn--claro { background: var(--cream); color: var(--ink); }
.cur-btn--claro:hover { background: #fff; }
@media (min-width: 560px) { .cur-acoes .cur-btn { flex: 1 1 220px; } }

.cur-nota { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.cur-nota strong { color: var(--ink); }

/* ═══ VSL — o vídeo de venda ════════════════════════════════════════════════
   ESTRUTURA PRONTA ESPERANDO DADO: sem vídeo cadastrado, a seção inteira não
   existe na página. O quadro só carrega o iframe DEPOIS do clique (fachada),
   como o assets/latest-video.js já faz na home: sem clique, zero requisição
   para o YouTube — e a página não fica pesada por um vídeo que talvez ninguém
   assista. */
.cur-vsl { max-width: 940px; margin: 0 auto; }
.cur-vsl__quadro {
  position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden;
  background: linear-gradient(150deg, #39404d, #101319); cursor: pointer;
  border: 0; padding: 0; width: 100%; display: block;
}
.cur-vsl__quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cur-vsl__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, .94);
  display: grid; place-items: center; color: #151515; z-index: 2;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6); transition: transform .25s;
}
.cur-vsl__quadro:hover .cur-vsl__play { transform: translate(-50%, -50%) scale(1.07); }
.cur-vsl__legenda { margin-top: 14px; font-size: 13.5px; color: var(--muted); text-align: center; }

/* ═══ O QUE VOCÊ LEVA ═══════════════════════════════════════════════════════ */
.cur-grade { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 720px) { .cur-grade { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.cur-item {
  background: var(--cur-card); border: 1px solid var(--cur-borda);
  border-radius: 18px; padding: 20px;
}
.cur-item h3 { font-family: Geist, sans-serif; font-weight: 800; font-size: 16.5px; line-height: 1.25; }
.cur-item p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.cur-item__n {
  display: inline-block; margin-bottom: 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; color: var(--muted);
}

/* ═══ FICHA — os fatos duros ════════════════════════════════════════════════
   "Duração", "Pré-requisitos", "Modalidade", "Onde". Cada linha só existe se
   o dado existir; a ficha inteira some se nenhuma linha sobrar. */
.cur-ficha { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid var(--cur-borda); }
.cur-ficha div {
  display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--cur-borda);
}
@media (min-width: 720px) { .cur-ficha div { grid-template-columns: 210px 1fr; gap: 20px; align-items: baseline; } }
.cur-ficha dt, .cur-ficha b {
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding-top: 3px;
}
.cur-ficha dd, .cur-ficha p { font-size: 15px; line-height: 1.6; }

/* ═══ TURMAS / MATRÍCULA ════════════════════════════════════════════════════ */
.cur-turmas { display: grid; gap: 14px; margin-top: 26px; }
.cur-turma {
  background: var(--cur-card); border: 1px solid var(--cur-borda);
  border-radius: 14px; padding: 20px;
}
.cur-turma h3 { font-family: Geist, sans-serif; font-weight: 800; font-size: 18px; line-height: 1.2; }
.cur-turma__meta { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
/* Etiquetas de turma e de público em mono, separadas por ponto — a linha de
   dados de um bilhete, não pílulas. As duas de situação ganham o LED. */
.cur-turma__tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.cur-turma__tag + .cur-turma__tag::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .45; margin: 0 6px 0 2px; }
.cur-turma__tag--aberta::after, .cur-turma__tag--fim::after { content: ""; order: -1; width: 7px; height: 7px; border-radius: 50%; }
.cur-turma__tag--aberta::after { background: #2aa85a; box-shadow: 0 0 6px rgba(70, 217, 126, .7); }
.cur-turma__tag--fim { color: var(--cur-alerta); }
.cur-turma__tag--fim::after { background: var(--cur-alerta); }

/* Formulário de matrícula: nasce fechado dentro do cartão da turma e abre no
   clique. Sem modal de propósito — no celular, um formulário de três campos
   abrindo no lugar custa menos que uma janela que rouba o foco. */
.cur-form { margin-top: 18px; display: grid; gap: 12px; }
.cur-form label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; }
.cur-form input {
  font-family: inherit; font-size: 16px;   /* 16px trava o zoom automático do iOS */
  padding: 13px 14px; border-radius: 12px; border: 1px solid var(--cur-borda);
  background: #fff; color: var(--ink); min-height: 50px; width: 100%;
}
.cur-form input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.cur-form__erro { font-size: 13.5px; font-weight: 600; color: var(--cur-alerta); line-height: 1.5; }
.cur-form__ok { font-size: 14.5px; font-weight: 600; line-height: 1.55; }
.cur-form__lgpd { font-size: 12px; color: var(--muted); line-height: 1.5; }
@media (min-width: 620px) { .cur-form__dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ═══ PROVA SOCIAL ══════════════════════════════════════════════════════════
   ESTRUTURA PRONTA ESPERANDO DADO. Nenhum depoimento é escrito aqui: ou vem
   do banco, ou a seção não existe. */
.cur-provas { display: grid; gap: 14px; margin-top: 26px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .cur-provas { grid-template-columns: repeat(3, 1fr); } }
.cur-prova { padding: 4px 0 18px 22px; border-left: 1px solid var(--ink); }
.cur-prova p { font-family: Geist, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.5; letter-spacing: -.01em; }
.cur-prova footer { margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* ═══ Utilitários ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cur-btn, .cur-vsl__play { transition: none; }
  .cur-btn:hover { transform: none; }
  .cur-vsl__quadro:hover .cur-vsl__play { transform: translate(-50%, -50%); }
}

/* ── REGRA DO VAZIO ──────────────────────────────────────────────────────────
   Falta de dado NUNCA vira caixa vazia, título órfão nem "carregando…" eterno.
   O renderizador remove o bloco inteiro; a página segue de pé com o que é
   verdade. Se um dia aparecer um espaço em branco entre duas seções desta
   página, o bug está no curso-render.js, não aqui. */


/* ── O FECHO DA PAGINA DE CURSO EM DUAS COLUNAS (call 10/09, 00:56:07, CU3) ──
   Klaus e Mauricio: "nas paginas de curso havera duas colunas: uma para o
   texto explicativo e outra com os botoes de acao". Empilhado, o bloco era um
   paragrafo com dois botoes perdidos embaixo; em duas colunas a decisao fica
   do lado da explicacao.

   A outra metade da decisao ("independente de o curso estar disponivel, o
   botao leva a inscricao OU ao aviso da proxima data") ja estava no HTML como
   data-curso-sem-turma, e o curso-render.js troca o rotulo sozinho — nao havia
   o que mudar ali.

   No telefone volta a empilhar: duas colunas em 390px seriam duas colunas
   estreitas demais para um botao. */
.navebanner.cur-fecha { display: block; }
.cur-fecha-acoes { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
@media (min-width: 900px) {
  .navebanner.cur-fecha { display: grid; grid-template-columns: 1fr minmax(250px, 320px); gap: 44px; align-items: center; }
  .cur-fecha-acoes { margin-top: 0; }
}