/* ═══════════════════════════════════════════════════════════════════════════
   Aula gratuita — cadastro e vídeo. Complemento do course_v2.css.

   As duas páginas carregam `course_v2.css` (escopo `.cv2`), que traz as
   variáveis, a tipografia, as seções, os botões e todo o tema claro desses
   pedaços. Aqui entra só o que estas duas têm e as outras não: o cartão de
   cadastro, o quadro do acesso e a oferta do curso pago no fim do vídeo.

   Regra deste arquivo: **cor sai de variável** (`var(--text)`, `var(--muted)`,
   `var(--line)`, `var(--gold)`), nunca de hexadecimal cravado. É o que faz o
   tema claro funcionar sem remendo — foi por cravar cinza claro que o
   `home_v2.css` e o `graduacao_v2.css` precisaram de correção depois. O bloco
   `.light-mode` no fim trata só o que não dá para resolver com variável.

   ⚠️ O verde que estas páginas usavam saiu. A identidade do site é preto e
   dourado; o verde-esmeralda entrava como terceiro assunto e era herança do
   desenho antigo, não decisão de marca.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Topo do cadastro ────────────────────────────────────────────────────
   Mesma estrutura do minicurso: capa ao fundo, texto à esquerda, cartão à
   direita. O cadastro é o motivo da página existir e fica junto do título. */
/* ── Tela inteira ───────────────────────────────────────────────────────
   `--agv2-topo` é a altura do que vem ANTES da hero (faixa de eventos +
   header, os dois no fluxo). O JS mede e grava, porque isso muda de aparelho
   para aparelho, some quando não há faixa de eventos e cresce quando o texto
   dela quebra em duas linhas — então é medido, não chutado. Mesma técnica da
   hero da home.

   `100svh` e não `100vh`: no celular o `vh` conta a barra do navegador que
   desaparece ao rolar, e a hero nasceria maior que a tela. A linha de cima
   fica de reserva para quem não conhece `svh`.

   `min-height` com piso de 560px, e não `height`: aqui dentro mora o cartão de
   cadastro, que em tela baixa é mais alto que a janela. Com altura fixa ele
   vazaria; com mínima, a hero cresce e a página rola — que é o certo. */
.agv2-topo {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  padding: clamp(36px, 5vw, 76px) 0 clamp(32px, 4.5vw, 64px);
  min-height: calc(100vh - var(--agv2-topo, 0px));
  min-height: max(560px, calc(100svh - var(--agv2-topo, 0px)));
}
.agv2-topo > .wrap { width: 100%; }

/* No celular o conteúdo da hero é alto (título grande + cartão de cadastro
   inteiro), então o respiro encolhe para caber em uma tela. Se ainda assim não
   couber, a hero cresce e a página rola: espremer um formulário para obedecer
   a uma regra visual seria pior. */
@media (max-width: 760px) {
  .agv2-topo { padding: 18px 0 22px; }
  .agv2-grade { gap: 20px; }
  .agv2-h1 { font-size: clamp(1.7rem, 7vw, 2.3rem); max-width: 100%; }
  .agv2-cartao { padding: 18px; }
  .agv2-cartao-sub { margin-bottom: 14px; }
}
.agv2-topo-foto { position: absolute; inset: 0; z-index: -1; }
/* Desfoque, e não opacidade baixa: a capa da aula costuma ser arte com texto,
   e sem desfoque ela compete com o título. 6px (e não 9) porque agora o topo
   tem só o título — sem o parágrafo de resumo, sobra imagem para ver, e o
   fundo pode aparecer. */
.agv2-topo-foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(6px) saturate(1.1); transform: scale(1.05);
}
/* ⚠️ Véu em escada, não cortina. A primeira versão era quase opaca (.92 no
   meio, .8 na direita) e a capa simplesmente sumia. Agora escurece onde o
   título precisa de contraste — a faixa da esquerda — e vai abrindo para a
   direita, onde só há imagem e o cartão de cadastro, que tem fundo próprio. */
.agv2-topo-foto::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,9,13,.9) 0%, rgba(8,9,13,.74) 34%, rgba(8,9,13,.42) 62%, rgba(8,9,13,.3) 100%),
    linear-gradient(180deg, rgba(8,9,13,.35), transparent 38%, rgba(8,9,13,.45));
}
.agv2-topo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* Centrado na vertical: com a hero ocupando a tela, conteúdo preso ao topo
   deixaria um vão enorme embaixo. */
.agv2-grade { display: grid; gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (min-width: 980px) {
  .agv2-grade { grid-template-columns: minmax(0, 1fr) clamp(330px, 32vw, 400px); gap: clamp(36px, 4.5vw, 70px); }
}

/* O topo é só o título. O resumo desceu para a seção "Sobre a aula": no topo
   ele empurrava o título para cima, competia com o cartão de cadastro ao lado
   e obrigava a escurecer o fundo para continuar legível. */
.agv2-h1 { margin: 18px 0 0; max-width: 20ch; text-wrap: balance; }
.agv2-topo-txt { padding-block: clamp(10px, 2vw, 40px); }

/* Sobre a aula: coluna de leitura, largura limitada. */
.agv2-sobre { max-width: 68ch; }
.agv2-sobre .lede { margin: 0; }
.agv2-sobre .body { margin-top: 18px; }

/* ── Faixa do que está incluso ───────────────────────────────────────────
   Fio dourado no topo e superfície própria: é o que responde "quanto custa" e
   "por quanto tempo" antes de a pessoa decidir preencher o formulário. */
.agv2-fatos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--line);
  border-bottom: 1px solid var(--line-2);
  box-shadow: inset 0 2px 0 var(--gold);
}
.agv2-fato {
  display: flex; align-items: center; gap: 14px;
  padding: clamp(18px, 2.1vw, 26px) clamp(18px, 2vw, 26px);
  background: var(--ink-2);
  font-size: .95rem; font-weight: 600; letter-spacing: -.01em; color: var(--text);
}
.agv2-fato svg { width: 21px; height: 21px; color: var(--gold); flex-shrink: 0; }

/* ── Cartão do formulário ───────────────────────────────────────────── */
.agv2-cartao {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(22px, 2.3vw, 30px);
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--ink-2);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9);
}
.agv2-cartao::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(100% 70% at 50% 0%, rgba(226,183,114,.14), transparent 62%);
}
.agv2-cartao h2 { margin: 0; font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.agv2-cartao-sub { margin: 7px 0 20px; font-size: .84rem; line-height: 1.5; color: var(--muted); }

/* Campo: o input cobre a caixa inteira e o ícone fica por cima (absoluto).
   Com o ícone no fluxo sobravam faixas laterais que pareciam campo mas não
   recebiam o clique — defeito medido na página de minicurso. */
.agv2-campo {
  position: relative; display: flex; align-items: center;
  margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--ink-3);
  transition: border-color .25s ease, background .25s ease;
}
.agv2-campo > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; pointer-events: none;
  color: var(--muted-2); transition: color .25s ease;
}
.agv2-campo input, .agv2-campo select {
  flex: 1; min-width: 0; width: 100%;
  padding: 15px 14px 15px 42px; border: 0; border-radius: inherit;
  background: none; outline: none;
  font: 400 .93rem/1.3 var(--font); color: var(--text);
}
.agv2-campo input::placeholder { color: var(--muted-2); }
.agv2-campo:focus-within { border-color: rgba(226,183,114,.55); background: var(--ink-2); }
.agv2-campo:focus-within > svg { color: var(--gold); }
.agv2-campo.is-invalid { border-color: #e06a5a; box-shadow: 0 0 0 3px rgba(224,106,90,.12); }

.agv2-fone-linha { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; }
.agv2-ddi select { cursor: pointer; appearance: none; padding-left: 14px; padding-right: 26px; text-overflow: ellipsis; }
.agv2-ddi::after {
  content: ''; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px;
  border-right: 1.5px solid var(--muted-2); border-bottom: 1.5px solid var(--muted-2);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.agv2-nota { margin: 12px 0 0; font-size: .72rem; line-height: 1.5; color: var(--muted-2); text-align: center; }

.agv2-erro {
  margin-bottom: 16px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(224,106,90,.35); background: rgba(224,106,90,.1);
  font-size: .84rem; color: #f0a99c;
}

/* ── Página do vídeo ─────────────────────────────────────────────────── */
.agv2-trilha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  font-size: .78rem; color: var(--muted-2);
}
.agv2-trilha a { color: var(--muted); text-decoration: none; transition: color .25s ease; }
.agv2-trilha a:hover { color: var(--gold); }

/* Selo do prazo: é a informação que a pessoa volta para conferir. */
.agv2-prazo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid rgba(226,183,114,.3); background: rgba(226,183,114,.08);
  font-size: .74rem; font-weight: 600; color: var(--gold);
}
.agv2-prazo svg { width: 14px; height: 14px; }

.agv2-player {
  overflow: hidden; border-radius: 14px; border: 1px solid var(--line);
  background: #000; aspect-ratio: 16 / 9;
  box-shadow: 0 50px 90px -50px rgba(0,0,0,.95);
}
.agv2-player iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Sem vídeo: a capa fica atrás de um aviso, em vez de buraco preto. */
.agv2-player.is-vazio { position: relative; display: grid; place-items: center; }
.agv2-player.is-vazio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.agv2-player-aviso {
  position: relative; padding: 14px 22px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(8,9,13,.7);
  font-size: .88rem; color: var(--muted);
}

.agv2-duas { display: grid; gap: clamp(26px, 3.4vw, 48px); align-items: start; }
@media (min-width: 960px) { .agv2-duas { grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 310px); } }

.agv2-acesso {
  padding: 20px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--ink-2);
}
.agv2-acesso-t {
  margin: 0 0 14px; font-size: .64rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.agv2-acesso dl { margin: 0; display: grid; gap: 11px; }
.agv2-acesso div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.agv2-acesso dt { font-size: .82rem; color: var(--muted); }
.agv2-acesso dd { margin: 0; font-size: .85rem; font-weight: 600; color: var(--text); text-align: right; min-width: 0; }

/* ── A oferta no fim da aula ─────────────────────────────────────────────
   Quem chegou aqui assistiu à aula experimental inteira: é a única página do
   site com alguém que já consumiu o conteúdo. Por isso a oferta mostra O
   CURSO correspondente — capa, nome e resumo — e não um "conheça nossos
   cursos" genérico. */
.agv2-oferta {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: clamp(20px, 2.6vw, 36px); align-items: center;
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(24px, 2.8vw, 40px);
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--ink-2);
}
@media (min-width: 820px) { .agv2-oferta { grid-template-columns: clamp(200px, 22vw, 290px) minmax(0, 1fr); } }
.agv2-oferta::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 120% at 100% 0%, rgba(226,183,114,.16), transparent 62%);
}
.agv2-oferta-capa {
  overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 10;
  border: 1px solid var(--line); background: var(--ink-3); min-height: 0;
}
.agv2-oferta-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agv2-oferta-olho {
  display: block; font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.agv2-oferta h2 {
  margin: 12px 0 0; font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.15; color: var(--text);
}
.agv2-oferta p { margin: 13px 0 0; max-width: 56ch; font-size: .92rem; line-height: 1.65; color: var(--muted); }
.agv2-oferta-acoes { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 24px; }
.agv2-oferta-acoes .btn { width: auto; padding-inline: 28px; }
/* `.cv2 .arrow-link` não dá tamanho ao ícone — na página de curso o SVG vem
   com width/height no próprio atributo. Aqui o ícone é gerado, então o
   tamanho precisa vir do CSS: sem isto ele saía gigante e empurrava o rótulo
   para três linhas. */
.agv2-oferta-acoes .arrow-link { white-space: nowrap; }
.agv2-oferta-acoes .arrow-link svg { width: 15px; height: 15px; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .agv2-campo, .agv2-campo > svg, .agv2-trilha a { transition: none; }
}

/* ═══ Tema claro ══════════════════════════════════════════════════════════
   O `course_v2.css` já reescreve as variáveis de `.cv2`, então quase tudo fica
   legível sozinho. Sobra o que NÃO sai de variável: o véu do topo (feito de
   preto, para texto claro) e as superfícies feitas de branco translúcido.
   ─────────────────────────────────────────────────────────────────────────── */
.light-mode .agv2-topo-foto::after {
  background:
    linear-gradient(90deg, rgba(246,247,249,.92) 0%, rgba(246,247,249,.78) 34%, rgba(246,247,249,.5) 62%, rgba(246,247,249,.36) 100%),
    linear-gradient(180deg, rgba(246,247,249,.3), transparent 38%, rgba(246,247,249,.4));
}
.light-mode .agv2-fato,
.light-mode .agv2-cartao,
.light-mode .agv2-acesso,
.light-mode .agv2-oferta { background: #fff; }
.light-mode .agv2-cartao { box-shadow: 0 30px 64px -34px rgba(15,23,42,.3); }
.light-mode .agv2-cartao::before,
.light-mode .agv2-oferta::before {
  background: radial-gradient(100% 70% at 50% 0%, rgba(138,106,51,.1), transparent 62%);
}
.light-mode .agv2-campo { background: #f7f8fa; }
.light-mode .agv2-campo:focus-within { background: #fff; border-color: rgba(138,106,51,.5); }
.light-mode .agv2-ddi select option { background: #fff; color: #0f172a; }
.light-mode .agv2-prazo { border-color: rgba(138,106,51,.35); background: rgba(138,106,51,.08); }
.light-mode .agv2-oferta-capa { background: #eef0f4; }
.light-mode .agv2-player-aviso { background: rgba(255,255,255,.88); }