/* ============================================================================
   AULA DE EXEMPLO (21/10) — seção da home e atalho do cadastro.
   O vídeo é noite (#211927) com brilhos violeta/ciano: a moldura é sempre a
   "tela" escura, nos dois temas. A faixa de capítulos usa os capítulos reais
   da aula e serve para pular direto a um trecho. Script: /aula-exemplo.js
   ========================================================================== */

/* ── Home ─────────────────────────────────────────────────────────────── */
/* a faixa roxa seguinte (.statband) sobe 70px sobre esta seção: o respiro de baixo conta com isso */
.aula-ex{position:relative;padding:var(--s-9) 0 calc(var(--s-8) + 70px);background:var(--bg)}
.aula-ex-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:center}
.aula-ex-txt .sec-title{margin-bottom:var(--s-4)}
.aula-ex-fatos{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:var(--s-5) 0 var(--s-6);font-size:15px;line-height:1.45}
.aula-ex-fatos dt{font-family:var(--font-display);font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}
.aula-ex-fatos dd{margin:0;color:var(--fg-2)}
.aula-ex-nota{margin-top:var(--s-4);font-size:13.5px;line-height:1.5;color:var(--fg-3);max-width:44ch}

/* ── Player (home e cadastro) ─────────────────────────────────────────── */
.aex{--aex-noite:#211927;position:relative}
/* borda em degradê violeta → ciano (a malha da marca) só na tela do vídeo */
.aex-tela{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;border:1.5px solid transparent;
  background:linear-gradient(var(--aex-noite),var(--aex-noite)) padding-box,
    linear-gradient(135deg,var(--violet-700,#8f4dcb),color-mix(in oklab,var(--cyan-400,#5fd3e0) 70%,transparent) 60%,rgba(255,255,255,.12)) border-box;
  box-shadow:0 30px 70px -20px rgba(33,25,39,.45)}
.aex-tela video{display:block;width:100%;height:100%;object-fit:cover;background:var(--aex-noite);border-radius:calc(var(--r-lg) - 1.5px)}
.aex-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:linear-gradient(180deg,rgba(33,25,39,0) 40%,rgba(33,25,39,.55));color:#fff;cursor:pointer;font:inherit}
.aex-play-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px 14px 16px;border-radius:999px;background:rgba(255,255,255,.96);color:var(--aex-noite);font-family:var(--font-body);font-weight:600;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .32s var(--ease-cushion)}
.aex-play-btn svg{width:30px;height:30px;padding:8px;border-radius:50%;background:var(--violet-700,#8f4dcb);fill:#fff;stroke:none}
.aex-play-dur{margin-left:2px;padding:3px 8px;border-radius:999px;background:rgba(33,25,39,.08);color:rgba(33,25,39,.65);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.aex-play:hover .aex-play-btn{transform:scale(1.05)}
.aex-play:focus-visible{outline:none}
.aex-play:focus-visible .aex-play-btn{outline:3px solid var(--cyan-400,#5fd3e0);outline-offset:3px}
.aex.tocando .aex-play{display:none}

/* faixa de capítulos */
.aex-caps{display:grid;grid-template-columns:20fr 18fr 25fr 12fr;gap:6px;margin-top:12px;padding:0;list-style:none}
.aex-cap{min-width:0}
.aex-cap button{display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:100%;padding:0 0 4px;border:0;background:none;color:var(--fg-3);font:inherit;font-size:12.5px;line-height:1.25;text-align:left;cursor:pointer}
.aex-cap button::before{content:"";display:block;width:100%;height:4px;border-radius:999px;background:var(--border-strong);transition:background var(--t-fast,120ms)}
.aex-cap button:hover{color:var(--fg)}
.aex-cap button:hover::before{background:color-mix(in oklab,var(--violet-700,#8f4dcb) 45%,var(--border-strong))}
.aex-cap button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.aex-cap.atual button{color:var(--fg);font-weight:600}
.aex-cap.atual button::before{background:linear-gradient(90deg,var(--violet-700,#8f4dcb),var(--cyan-400,#5fd3e0))}
.aex-cap span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* ── Cadastro: atalho + janela ────────────────────────────────────────── */
.aex-atalho{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 18px;padding:8px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:border-color var(--t-fast)}
.aex-atalho:hover{border-color:var(--accent)}
.aex-atalho:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aex-atalho img{width:96px;height:54px;flex:none;border-radius:8px;object-fit:cover;background:#211927}
.aex-atalho strong{display:block;font-size:14px;font-weight:600}
.aex-atalho small{display:block;font-size:12.5px;color:var(--fg-3);margin-top:2px}
.aex-janela{width:min(960px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:calc(var(--r-lg) + 12px);background:rgba(33,25,39,.94);color:#fff;overflow:auto}
.aex-janela[open]{display:flex;flex-direction:column;gap:10px}
.aex-janela::backdrop{background:rgba(20,14,25,.72);backdrop-filter:blur(6px)}
.aex-janela .aex-tela{box-shadow:none}
.aex-janela .aex-caps button{color:rgba(255,255,255,.7)}
.aex-janela .aex-cap.atual button{color:#fff}
.aex-janela .aex-cap button::before{background:rgba(255,255,255,.22)}
.aex-janela .aex-cap.atual button::before{background:linear-gradient(90deg,var(--violet-700,#8f4dcb),var(--cyan-400,#5fd3e0))}
.aex-fechar{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(33,25,39,.6);color:#fff;font:inherit;font-size:13.5px;cursor:pointer}
.aex-fechar:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:900px){
  .aula-ex{padding:var(--s-8) 0 var(--s-7)}
  .aula-ex-grid{grid-template-columns:1fr;gap:var(--s-6)}
}
@media (max-width:560px){
  .aex-caps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:10px}
  .aex-play-btn{padding:11px 18px 11px 12px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.aex-play-btn,.aex-cap button::before{transition:none}.aex-play:hover .aex-play-btn{transform:none}}