/* ==========================================================================
   page-aula-gravada.css — /o-braco-direito-do-ceo/aula
   A página é a /fsm com a aula em cima (functions/_lib/aula-gravada-pagina.js),
   então o visual da parte de venda vem das folhas da /fsm. Esta folha entra
   depois delas e cuida só do que é da aula: a dobra (título, player, cartão do
   teste, chat do fim, capítulos), a esteira de depoimentos e o cartão "Pronto"
   que aparece depois do chat. Tudo escopado nas classes ag-*; das seções da
   /fsm, só um ajuste de respiro nos módulos (bloco 4). O chat do fim usa o desenho claro do /assessment, por
   unidade de experiência: é o mesmo Arthur conversando.
   ========================================================================== */

:root {
  /* Neutros do manual que tokens.css ainda não nomeia. */
  --ag-cloud: #EBF0F1;   /* corpo de texto */
  --ag-slate: #9AADB0;   /* atenuado — nunca abaixo de 13px */
  --ag-erro:  #E08B7A;

  /* Chat: os tons claros do /assessment. */
  --ag-papel:        oklch(96% 0.015 90);
  --ag-papel-borda:  oklch(88% 0.01 150);
  --ag-pessoa:       oklch(94% 0.07 140);
  --ag-pessoa-borda: oklch(86% 0.1 140);

  --ag-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* A /fsm não zera as margens de títulos e parágrafos; os blocos da aula, sim. */
:where(.ag-dobra, .ag-provas, .ag-pronto-faixa) :where(h1, h2, h3, p, ul, ol, li) { margin: 0; }

/* As camadas da aula usam display próprio; o atributo hidden precisa ganhar. */
:where(.ag-dobra, .ag-pronto-faixa) [hidden] { display: none !important; }

.ag-dobra {
  color: var(--ag-cloud);
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: normal;
}
.ag-dobra ::selection { background: rgba(137, 204, 114, .25); color: inherit; }
.ag-dobra a { color: var(--lime); text-decoration: none; }
.ag-dobra a:hover { color: var(--sprout); }
.ag-dobra :where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 2px;
}

.ag-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   PEÇAS REPETIDAS
   ========================================================================== */
.ag-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; width: 100%; }

/* Botão principal: lime sobre fundo escuro. */
.ag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  border: 0;
  border-radius: 8px;
  background: var(--lime);
  color: var(--forest);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  transition: background 200ms var(--ag-ease), transform 200ms var(--ag-ease);
}
.ag-btn:hover { background: var(--sprout); color: var(--forest); }
.ag-btn:active { transform: scale(.98); }
.ag-btn:disabled { opacity: .6; cursor: default; }

/* Botão vazado: só borda. */
.ag-btn--ghost {
  background: none;
  border: 1px solid var(--fern);
  color: var(--ag-cloud);
  font-weight: 600;
}
.ag-btn--ghost:hover { background: var(--glow); color: #fff; border-color: var(--lime); }

/* Campo de formulário. 16px: abaixo disso o iPhone dá zoom ao focar. */
.ag-campo {
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  border-radius: 8px;
  border: 1px solid var(--fern);
  background: rgba(4, 27, 21, .6);
  color: #fff;
  font: inherit;
  font-size: 16px;
}
.ag-campo::placeholder { color: var(--ag-slate); }
.ag-campo[aria-invalid="true"] { border-color: var(--ag-erro); }

/* ==========================================================================
   1. A AULA
   ========================================================================== */
.ag-dobra {
  padding: clamp(20px, 3.4vw, 44px) 0 clamp(48px, 7vw, 88px);
  background:
    radial-gradient(ellipse at 85% 0%, rgba(137, 204, 114, .10) 0%, transparent 46%),
    var(--forest);
}

.ag-topo { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(16px, 2.4vw, 28px); }
.ag-selo {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  border: 1px solid var(--fern); border-radius: 999px; padding: 6px 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ag-slate);
}
.ag-selo__ponto { width: 6px; height: 6px; border-radius: 999px; background: var(--lime); flex: none; }
/* Só no ensaio (localhost): zera a memória pra ver o cartão e o chat de novo. */
.ag-ensaio-zerar {
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px dashed var(--fern); border-radius: 999px;
  background: none; color: var(--lime);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.ag-ensaio-zerar:hover { border-color: var(--lime); }
.ag-h1 {
  font-size: clamp(26px, 4.2vw, 46px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.02;
  color: #fff;
  text-wrap: balance;
}
/* O tema da aula em verde: com o título e o apoio brancos, o topo ficava todo branco. */
.ag-h1__destaque { color: var(--lime); }
/* Variações por anúncio (functions/_lib/aula-gravada-variacoes.js): o título é
   o do anúncio, uma frase inteira, então sai um degrau menor pra não empurrar
   o vídeo pra baixo; o nome da aula fica ao lado do selo (no celular, na linha
   de baixo). */
.ag-h1--longo { font-size: clamp(23px, 3.2vw, 38px); line-height: 1.08; max-width: 26em; }
.ag-topo__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ag-nome { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ag-slate); }
.ag-apoio {
  font-size: var(--t-chamada, 16px); /* a escala de texto da /fsm (page-fsm.css) */
  line-height: 1.5;
  color: var(--ag-cloud);
  max-width: 62ch;
  text-wrap: pretty;
}

.ag-palco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ag-video { min-width: 0; }

/* ---- O player e as camadas que cobrem ele ---- */
/* Vídeo, cartão e chat dividem a mesma célula da grade: quem aparece cobre o
   vídeo, e a área cresce quando o cartão ou o chat são mais altos que ele. */
.ag-player {
  display: grid;
  border-radius: 14px;
  overflow: hidden;
  background: var(--abyss);
  border: 1px solid var(--fern);
}
.ag-player > * { grid-area: 1 / 1; min-width: 0; }
.ag-player__video { position: relative; aspect-ratio: 16 / 9; align-self: start; }
.ag-player__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ag-player__aviso {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 24px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ag-slate);
}

/* ---- Cartão do teste (28:33) ---- */
.ag-cartao {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(20px, 4vw, 44px);
  background: linear-gradient(180deg, var(--canopy) 0%, var(--forest) 100%);
}
.ag-cartao__fala { display: flex; align-items: flex-start; gap: 14px; max-width: 640px; }
.ag-cartao__foto { width: 56px; height: 56px; border-radius: 999px; flex: none; border: 1px solid var(--fern); }
.ag-cartao__texto {
  font-size: clamp(17px, 2.1vw, 22px);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  text-wrap: pretty;
}
.ag-cartao__botoes { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.ag-cartao__form { display: grid; gap: 10px; max-width: 460px; }
.ag-cartao__msg { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ag-erro); }
.ag-cartao__msg:empty { display: none; }
.ag-cartao__miuda { font-size: 13px; line-height: 1.5; color: var(--ag-slate); }
.ag-cartao__miuda a { text-decoration: underline; text-underline-offset: 3px; }
.ag-cartao__ok { font-size: clamp(17px, 2vw, 20px); line-height: 1.45; color: var(--ag-cloud); }
.ag-cartao__ok strong { color: #fff; }
.ag-cartao__direto { display: grid; gap: 16px; max-width: 640px; }

/* ---- Faixa de aviso (45:30) e o aviso de "o vídeo não abriu" ---- */
.ag-faixa {
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(137, 204, 114, .45);
  background: var(--glow);
  font-size: 15px;
  line-height: 1.45;
  color: #fff;
  text-wrap: pretty;
  animation: agSurge 360ms var(--ease-out) both;
}
.ag-linha { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ag-slate); }

@keyframes agSurge {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Capítulos ---- */
.ag-capitulos { min-width: 0; }
.ag-capitulos__titulo {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ag-slate); margin-bottom: 8px;
}
.ag-capitulos__lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.ag-continuar {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-bottom: 8px; padding: 12px 14px;
  border: 1px solid rgba(137, 204, 114, .45); border-radius: 10px;
  background: var(--glow); color: #fff;
  font-size: 15px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer;
}
.ag-continuar::before { content: '▶'; font-size: 11px; color: var(--lime); flex: none; }
.ag-continuar:hover { border-color: var(--lime); }

.ag-cap {
  display: grid;
  grid-template-columns: 22px 46px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 8px;
  width: 100%;
  padding: 10px 10px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--ag-cloud);
  text-align: left;
  cursor: pointer;
  transition: background 160ms var(--ag-ease), color 160ms var(--ag-ease);
}
.ag-cap:hover { background: rgba(137, 204, 114, .08); }
/* O número e o check dividem a primeira coluna: capítulo visto troca um pelo outro. */
.ag-cap__n, .ag-cap__visto { grid-column: 1; grid-row: 1; }
.ag-cap__min { grid-column: 2; grid-row: 1; }
.ag-cap__titulo { grid-column: 3; grid-row: 1; }
.ag-cap__n { font-size: 13px; font-weight: 600; color: var(--ag-slate); font-variant-numeric: tabular-nums; }
.ag-cap__min { font-size: 13px; font-weight: 600; color: var(--ag-slate); font-variant-numeric: tabular-nums; }
.ag-cap__titulo { font-size: 15px; line-height: 1.35; text-wrap: pretty; }
.ag-cap__visto {
  display: none;
  align-self: start;
  place-items: center;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--forest);
  font-size: 11px; font-weight: 800; line-height: 1;
}
/* Capítulo visto (o vídeo tocou até o fim dele): verde claro e com check. */
.ag-cap.is-visto .ag-cap__n { display: none; }
.ag-cap.is-visto .ag-cap__visto { display: grid; animation: agCheck 320ms var(--ease-out) both; }
.ag-cap.is-visto .ag-cap__titulo,
.ag-cap.is-visto .ag-cap__min { color: var(--sprout); }
.ag-cap[aria-current="true"] { background: var(--canopy); border-left-color: var(--lime); }
.ag-cap[aria-current="true"] .ag-cap__titulo { color: #fff; font-weight: 600; }
.ag-cap[aria-current="true"] .ag-cap__min { color: var(--lime); }
@keyframes agCheck {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}

/* Capítulo 11: a conversa do fim. Fechado até a aula terminar. */
.ag-cap--fim { margin-top: 6px; border: 1px dashed var(--fern); border-left-width: 1px; }
.ag-cap--fim .ag-cap__titulo { color: var(--lime); font-weight: 600; }
.ag-cap--fim[aria-disabled="true"] { cursor: default; }
.ag-cap--fim[aria-disabled="true"]:hover { background: none; }
.ag-cap__dica { grid-column: 3; grid-row: 2; font-size: 12.5px; line-height: 1.4; color: var(--ag-slate); margin-top: 2px; }
.ag-cap--fim:not([aria-disabled="true"]) .ag-cap__dica { display: none; }

/* ---- Chat do fim (47:31): o desenho claro do /assessment ---- */
.ag-chat {
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(16px, 3vw, 28px);
  background: var(--ag-papel);
  color: var(--ink-900);
}
.ag-chat__falas { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.ag-fala { display: flex; align-items: flex-start; gap: 8px; max-width: 92%; animation: agSurge 360ms var(--ease-out) both; }
.ag-fala--arthur { align-self: flex-start; }
.ag-fala--pessoa { align-self: flex-end; }
.ag-fala__foto { width: 36px; height: 36px; border-radius: 999px; flex: none; border: 1px solid var(--ag-papel-borda); }
.ag-fala__texto {
  min-width: 0;
  padding: 10px 16px;
  border: 1px solid var(--ag-papel-borda);
  border-radius: 14px 14px 14px 2px;
  background: #fff;
  box-shadow: var(--shadow-xs);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-900);
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.ag-fala--pessoa .ag-fala__texto {
  border-color: var(--ag-pessoa-borda);
  border-radius: 18px 18px 4px 18px;
  background: var(--ag-pessoa);
  box-shadow: none;
  font-weight: 500;
}
/* Pistas no fim da pergunta: sugerem o tipo de resposta, em tom mais baixo. */
.ag-fala__pistas { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--ink-500); }

/* "digitando": três pontos pulando. */
.ag-fala--digitando .ag-fala__texto { display: inline-flex; align-items: center; gap: 5px; padding: 14px 16px; }
.ag-ponto { width: 7px; height: 7px; border-radius: 999px; background: var(--ink-500); opacity: .5; animation: agDigita 1.3s infinite ease-in-out; }
.ag-ponto:nth-child(2) { animation-delay: .18s; }
.ag-ponto:nth-child(3) { animation-delay: .36s; }
@keyframes agDigita {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Campos e botão dentro de um balão (nome e e-mail; botão do WhatsApp). */
.ag-fala__form { display: grid; gap: 8px; margin-top: 10px; }
.ag-fala__form .ag-campo { background: #fff; color: var(--ink-900); border-color: var(--ag-papel-borda); padding: 11px 12px; }
.ag-fala__form .ag-campo::placeholder { color: var(--ink-500); }
.ag-fala__form .ag-campo[aria-invalid="true"] { border-color: #B3261E; }
.ag-fala__msg { font-size: 14px; font-weight: 600; line-height: 1.4; color: #B3261E; }
.ag-fala__msg:empty { display: none; }
.ag-btn--escuro { background: var(--forest); color: var(--lime); padding: 13px 20px; font-size: 15px; }
.ag-btn--escuro:hover { background: var(--canopy); color: var(--sprout); }
.ag-fala__acao { margin-top: 10px; }
.ag-chat :where(a, button, input, textarea):focus-visible { outline-color: var(--fern); }

.ag-chat__campo { display: flex; align-items: flex-end; gap: 8px; margin-top: auto; }
.ag-chat__texto {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid var(--ag-papel-borda);
  border-radius: 12px;
  background: #fff;
  color: var(--ink-900);
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  resize: vertical;
}
.ag-chat__texto::placeholder { color: var(--ink-500); }
.ag-chat__enviar { flex: none; background: var(--forest); color: var(--lime); padding: 14px 18px; }
.ag-chat__enviar:hover { background: var(--canopy); color: var(--sprout); }

/* ==========================================================================
   2. AVALIAÇÕES E DEPOIMENTOS — entre os módulos e o instrutor da /fsm
   Os números e a esteira contínua de prints da /oferta-fsm, aqui em fundo
   claro, como a seção de depoimentos da /fsm.
   ========================================================================== */
.ag-provas {
  padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 9vw, 104px);
  background: var(--paper);
  color: var(--ink-900);
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  overflow: hidden;
}
.ag-numeros {
  list-style: none; padding: 0;
  margin: 0 auto clamp(28px, 4vw, 44px);
  max-width: 720px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ag-numeros__item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px clamp(6px, 2vw, 12px); text-align: center; }
.ag-numeros__item + .ag-numeros__item { border-left: 1px solid var(--ag-papel-borda); }
/* 7,2vw: no celular o "+1.600" ocupa quase a coluna inteira. */
.ag-numeros__n { font-size: clamp(24px, 7.2vw, 44px); font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--ink-900); }
.ag-numeros__rotulo {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.35; color: var(--green-700); text-wrap: balance;
}

.ag-provas__mask {
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
/* A lista vai duplicada no HTML: a animação anda metade da largura e reinicia.
   A duração acompanha o número de prints (~11,7s cada) pra velocidade não mudar. */
.ag-provas__trilha {
  display: flex;
  width: max-content;
  animation: agEsteira 163s linear infinite;
}
.ag-provas__mask:hover .ag-provas__trilha { animation-play-state: paused; }
.ag-provas__trilha img {
  height: clamp(180px, 40vw, 260px);
  width: auto;
  max-width: none;
  border-radius: 12px;
  margin-right: clamp(12px, 3vw, 20px);
  background: #fff;
  border: 1px solid var(--ag-papel-borda);
}
@keyframes agEsteira {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Com JS (scripts/aula-gravada-esteira.js) a trilha anda por script e aceita
   arrasto de mouse e dedo; a animação acima fica de reserva pra quando ele não roda.
   pan-y: o gesto vertical continua rolando a página; o horizontal é da esteira. */
.ag-provas__mask.is-js {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ag-provas__mask.is-js .ag-provas__trilha { animation: none; will-change: transform; }
.ag-provas__mask.is-arrastando { cursor: grabbing; }
.ag-provas__mask.is-js .ag-provas__trilha img { pointer-events: none; }

/* ==========================================================================
   3. O CARTÃO "PRONTO" — ponto de chegada do chat do fim, logo acima da oferta
   A faixa tem a cor da seção da oferta e só ganha altura quando o cartão
   aparece (depois do clique no botão do WhatsApp).
   ========================================================================== */
.ag-pronto-faixa { display: flow-root; background: var(--lime); scroll-margin-top: 12px; }
.ag-pronto {
  max-width: 880px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  width: calc(100% - 40px);
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--forest);
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: #fff;
  text-wrap: pretty;
  animation: agSurge 420ms var(--ease-out) both;
}

/* ==========================================================================
   4. AJUSTE NAS SEÇÕES DA /fsm (só nesta página)
   Os módulos começam direto em "06 módulos · 73 aulas": o título e o vídeo que
   vinham antes saem, e o respiro que separava a contagem deles sobraria.
   Os tamanhos de texto das seções da /fsm vêm da escala dela (page-fsm.css).
   ========================================================================== */
[data-aula-gravada] .program-deep__divider { margin-top: 0; }

/* ==========================================================================
   CELULAR (≤ 720px): o vídeo vai de ponta a ponta, pra caber na primeira
   tela com o título acima.
   ========================================================================== */
@media (max-width: 720px) {
  .ag-wrap { padding: 0 16px; }
  .ag-video { margin: 0 -16px; }
  .ag-player { border-radius: 0; border-left: 0; border-right: 0; }
  .ag-faixa, .ag-linha { margin-left: 16px; margin-right: 16px; }
  .ag-cartao__botoes .ag-btn { flex: 1 1 auto; }
  .ag-fala { max-width: 96%; }
}

/* ==========================================================================
   COMPUTADOR (≥ 1000px): capítulos ao lado do vídeo, na mesma altura dele.
   ========================================================================== */
@media (min-width: 1000px) {
  /* Player e capítulos são vizinhos na mesma linha da grade: a caixa dos
     capítulos tem exatamente a altura do player (e cresce junto quando o cartão
     ou o chat são mais altos que o vídeo). A faixa de aviso e o aviso de "o
     vídeo não abriu" ficam na linha de baixo, só sob o vídeo. */
  .ag-palco { grid-template-columns: minmax(0, 1fr) 372px; gap: 0 24px; align-items: stretch; }
  .ag-video { display: contents; }
  .ag-player { grid-column: 1; grid-row: 1; }
  .ag-capitulos { grid-column: 2; grid-row: 1; position: relative; min-height: 320px; }
  .ag-faixa { grid-column: 1; grid-row: 2; }
  .ag-linha { grid-column: 1; grid-row: 3; }
  /* A lista não define a altura da linha: quem define é o player. A lista rola
     por dentro quando é mais alta que ele. */
  .ag-capitulos__rolo {
    position: absolute; inset: 0;
    overflow-y: auto;
    padding: 14px;
    border: 1px solid var(--fern);
    border-radius: 14px;
    background: rgba(7, 43, 32, .5);
    scrollbar-width: thin;
    scrollbar-color: var(--fern) transparent;
  }
}

/* ==========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ag-faixa, .ag-pronto, .ag-fala, .ag-cap.is-visto .ag-cap__visto { animation: none; }
  .ag-provas__trilha { animation: none; }
  .ag-ponto { animation: none; opacity: .7; }
  .ag-btn:active { transform: none; }
}