/* ============================================================
   BPOx — curso. Complementa bpox.css (não substitui).
   Carregue sempre os dois, nesta ordem:
     <link href="/bpox.css">  <link href="/curso/curso.css">
   Assim as cores, as fontes e o cabeçalho continuam vindo de um lugar só.
   ============================================================ */

/* --- barra de progresso do curso (topo do hub) --- */
.prog-wrap{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px 18px;margin-top:26px;max-width:520px}
.prog-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:rgba(255,255,255,.8);margin-bottom:10px}
.prog-top b{color:#fff;font-size:15px}
.prog-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.prog-fill{height:100%;width:0;background:linear-gradient(90deg,var(--emerald-d),var(--emerald));border-radius:99px;transition:width .5s}

/* --- grade de módulos --- */
.mod{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden;margin-bottom:18px}
.mod-h{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;background:var(--soft);border-bottom:1px solid var(--line)}
.mod-n{flex:0 0 44px;height:44px;border-radius:12px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px}
.mod-t{flex:1;min-width:0}
.mod-t h3{font-size:21px;margin-bottom:4px}
.mod-t p{font-size:14.5px;color:var(--muted)}
.mod-meta{font-size:12.5px;color:var(--muted);white-space:nowrap;font-weight:600}
.mod.breve .mod-n{background:var(--line);color:var(--muted)}
.mod.breve .mod-h{background:#FBFDFE}

.aulas{list-style:none}
.aulas li{border-bottom:1px solid var(--line)}
.aulas li:last-child{border-bottom:none}
.aula-lnk{display:flex;align-items:center;gap:14px;padding:14px 24px;transition:background .15s}
.aula-lnk:hover{background:var(--emerald-pale)}
.aula-num{flex:0 0 30px;height:30px;border-radius:9px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:var(--muted);background:#fff}
.aula-lnk.feito .aula-num{background:var(--emerald);border-color:var(--emerald);color:#04231a}
.aula-nm{flex:1;min-width:0;font-weight:600;font-size:15px}
.aula-lnk.feito .aula-nm{color:var(--muted)}
.aula-dur{font-size:12.5px;color:var(--muted);white-space:nowrap}
.aulas li.breve .aula-lnk{cursor:default;opacity:.62}
.aulas li.breve .aula-lnk:hover{background:transparent}

/* --- página da aula --- */
.aula-head{background:var(--navy);color:#fff;padding:34px 0 30px}
.crumb{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:12px}
.crumb a{color:var(--emerald)}
.aula-head h1{font-size:clamp(26px,3.6vw,38px);color:#fff;margin-bottom:12px}
.aula-head .promessa{font-size:17px;color:rgba(255,255,255,.82);max-width:680px}
.aula-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:12.5px}
.aula-tags span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:5px 11px;border-radius:99px;color:rgba(255,255,255,.85);font-weight:600}

.player{position:relative;padding-top:56.25%;background:var(--navy2);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-breve{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;color:#fff;gap:12px}
.player-breve b{font-family:'Bricolage Grotesque',sans-serif;font-size:22px}
.player-breve p{color:rgba(255,255,255,.7);font-size:14.5px;max-width:420px}

.aula-grid{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start;padding:44px 0 70px}
@media(max-width:940px){.aula-grid{grid-template-columns:1fr;gap:32px}}

.bloco{margin-top:34px}
.bloco h2{font-size:22px;margin-bottom:14px}
.bloco p{color:var(--muted);font-size:16px}
.pts{list-style:none;margin-top:6px}
.pts li{position:relative;padding:11px 0 11px 30px;border-bottom:1px dashed var(--line);font-size:15.5px}
.pts li:last-child{border-bottom:none}
.pts li::before{content:"";position:absolute;left:4px;top:19px;width:9px;height:9px;border-radius:3px;background:var(--emerald)}

/* --- cartão de material --- */
.mat{border:1px solid var(--line);border-left:4px solid var(--emerald);border-radius:14px;padding:20px 22px;background:var(--soft);margin-top:26px}
.mat .fmt{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald-d)}
.mat h3{font-size:18px;margin:6px 0 8px}
.mat p{font-size:14.5px;color:var(--muted);margin-bottom:16px}
.mat.indisp{border-left-color:var(--line);opacity:.75}

/* --- navegação entre aulas --- */
.navaula{display:flex;gap:14px;justify-content:space-between;margin-top:44px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.navaula a{flex:1 1 240px;border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:.15s}
.navaula a:hover{border-color:var(--emerald);background:var(--emerald-pale)}
.navaula span{display:block;font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.navaula b{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;font-weight:700;line-height:1.25;display:block}
.navaula a.prox{text-align:right}

/* --- coluna lateral (índice do módulo) --- */
.side{position:sticky;top:88px}
.side-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.side-card h4{background:var(--soft);border-bottom:1px solid var(--line);padding:14px 18px;font-size:14px}
.side-card ol{list-style:none;counter-reset:s}
.side-card li{counter-increment:s;border-bottom:1px solid var(--line);font-size:14px}
.side-card li:last-child{border-bottom:none}
.side-card li a{display:block;padding:11px 18px 11px 40px;position:relative;color:var(--muted)}
.side-card li a::before{content:counter(s);position:absolute;left:16px;top:11px;font-size:11.5px;font-weight:800;color:var(--line)}
.side-card li a:hover{background:var(--emerald-pale);color:var(--ink)}
.side-card li.atual a{color:var(--ink);font-weight:700;background:var(--emerald-pale)}
.side-card li.atual a::before{color:var(--emerald-d)}
.side-card li.breve a{opacity:.5;pointer-events:none}

/* --- modal de e-mail --- */
.mdl{position:fixed;inset:0;background:rgba(10,26,51,.62);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:90;padding:20px}
.mdl.on{display:flex}
.mdl-box{background:#fff;border-radius:20px;max-width:440px;width:100%;padding:30px;box-shadow:var(--shadow);position:relative}
.mdl-box h3{font-size:22px;margin-bottom:8px}
.mdl-box p{font-size:14.5px;color:var(--muted);margin-bottom:20px}
.mdl-x{position:absolute;top:14px;right:16px;font-size:24px;color:var(--muted);cursor:pointer;line-height:1;background:none;border:none}
.fld{margin-bottom:13px}
.fld label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:5px}
.fld input,.fld select{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--emerald)}
.mdl-nota{font-size:11.5px;color:var(--muted);margin-top:12px;line-height:1.5}
.mdl-nota a{color:var(--emerald-d);text-decoration:underline}

/* --- avisos --- */
.aviso{background:#FFF8E8;border:1px solid #F3DFA8;border-radius:14px;padding:16px 18px;font-size:14.5px;color:#7A5A12;margin-top:26px}
.aviso b{color:#5E440C}

/* --- celular --- */
@media(max-width:620px){
  .mod-h{flex-wrap:wrap;padding:18px 16px;gap:12px}
  .mod-meta{flex-basis:100%;order:3;margin-left:60px;margin-top:-6px}
  .mod-t h3{font-size:19px}
  .aula-lnk{padding:13px 16px;gap:11px}
  .aula-nm{font-size:14.5px}
  .aula-num{flex:0 0 26px;height:26px;font-size:11.5px}
  .aula-head{padding:26px 0 24px}
  .aula-grid{padding:28px 0 50px}
  .bloco h2{font-size:19px}
  .pts li{font-size:14.5px;padding-left:26px}
  .mat{padding:17px 18px}
  .prog-wrap{padding:14px}
  .cert{padding:34px 22px}
  .cert .quem{font-size:24px;padding:0 12px 8px}
}

/* --- certificado --- */
.cert{border:3px double var(--navy);border-radius:8px;padding:56px 48px;text-align:center;background:#fff;max-width:860px;margin:0 auto}
.cert .marca{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:30px;color:var(--navy);letter-spacing:-.02em;margin-bottom:22px;line-height:1}
.cert .marca span{color:var(--emerald-d)}
.cert h2{font-size:30px;margin-bottom:8px}
.cert .quem{font-size:34px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--navy);margin:26px 0 10px;border-bottom:2px solid var(--line);display:inline-block;padding:0 30px 8px}
.cert .txt{font-size:15.5px;color:var(--muted);max-width:560px;margin:14px auto 0;line-height:1.7}
.cert .assin{margin-top:44px;font-size:14px;color:var(--muted)}
@media print{
  /* Paisagem: o certificado é mais largo que alto. Sem isto o navegador
     imprime em retrato e o quadro sai apertado nas laterais. */
  @page{size:A4 landscape;margin:12mm}
  header.nav,footer.ft,.noprint{display:none!important}
  .sec{padding:0!important}
  .cert{border-color:#0A1A33;box-shadow:none;margin:0}
  body{background:#fff}
}

/* ============================================================
   CONTEÚDO DA AULA — os blocos declarados no roteiro.
   Os mesmos blocos viram slides no .pptx; aqui viram a página.
   Enquanto o vídeo não existe, ISTO é a aula.
   ============================================================ */
.roteiro{margin-top:38px}
.blk{border-top:1px solid var(--line);padding:26px 0 6px}
.blk:first-child{border-top:none;padding-top:6px}
.blk-h{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.blk-t{font-size:12px;font-weight:800;letter-spacing:.09em;color:var(--emerald-d);font-family:'Figtree',sans-serif;background:var(--emerald-pale);padding:4px 9px;border-radius:7px}
.blk-h h3{font-size:21px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--navy);flex:1;min-width:200px}

.sl{margin:0 0 18px}
.sl-t{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:9px}
.sl-nota{font-size:13px;color:var(--muted);margin-top:9px;font-style:italic}

/* frase */
.sl-frase{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(20px,2.4vw,27px);line-height:1.25;color:var(--navy);background:var(--emerald-pale);border-radius:14px;padding:24px 26px;letter-spacing:-.015em}

/* numero */
.sl-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px}
.sl-nums.um{grid-template-columns:minmax(0,430px)}
.sl-num{background:var(--navy);border-radius:14px;padding:20px 18px}
.sl-num b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,31px);color:#fff;line-height:1.05;letter-spacing:-.02em}
.sl-num span{display:block;font-size:12.5px;color:#9DB2CC;margin-top:7px;line-height:1.4}

/* tabela */
.sl-tab{width:100%;border-collapse:collapse;font-size:14.5px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sl-tab th{background:var(--navy);color:#fff;text-align:left;padding:11px 14px;font-size:12.5px;font-weight:700;letter-spacing:.03em}
.sl-tab td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
.sl-tab tr:nth-child(even) td{background:var(--soft)}
.sl-tab tr.tot td{background:var(--emerald-pale);font-weight:800;color:var(--navy);border-top:2px solid var(--emerald)}
.sl-tab td:not(:first-child){white-space:nowrap}
@media(max-width:620px){.sl-tab{font-size:13px}.sl-tab th,.sl-tab td{padding:9px 10px}.sl-tab td:not(:first-child){white-space:normal}}

/* comparacao */
.sl-cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.sl-cmp{grid-template-columns:1fr}}
.sl-cmp>div{border:1px solid var(--line);border-radius:13px;padding:17px 18px;background:var(--soft)}
.sl-cmp>div:first-child{background:#fff}
.sl-cmp h4{font-size:15px;font-family:'Bricolage Grotesque',sans-serif;color:var(--navy);margin-bottom:10px}
.sl-cmp ul{list-style:none}
.sl-cmp li{font-size:14px;padding:5px 0 5px 16px;position:relative;color:var(--ink)}
.sl-cmp li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:2px;background:var(--emerald)}
.sl-cmp>div:last-child li::before{background:var(--muted)}

/* lista e passos */
.sl-lista{list-style:none}
.sl-lista li{position:relative;padding:9px 0 9px 27px;font-size:15.5px;border-bottom:1px dashed var(--line)}
.sl-lista li:last-child{border-bottom:none}
.sl-lista li::before{content:"";position:absolute;left:3px;top:17px;width:9px;height:9px;border-radius:3px;background:var(--emerald)}
.sl-passos{list-style:none;counter-reset:pp}
.sl-passos li{counter-increment:pp;position:relative;padding:10px 0 10px 42px;font-size:15.5px;border-bottom:1px dashed var(--line)}
.sl-passos li:last-child{border-bottom:none}
.sl-passos li::before{content:counter(pp);position:absolute;left:0;top:9px;width:26px;height:26px;border-radius:8px;background:var(--navy);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:'Figtree',sans-serif}

/* aviso de vídeo em breve */
.embreve{background:linear-gradient(135deg,var(--navy),var(--navy3));border-radius:var(--radius);padding:34px 30px;text-align:center;color:#fff}
.embreve b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:24px;margin-bottom:10px}
.embreve p{color:rgba(255,255,255,.76);font-size:15px;max-width:520px;margin:0 auto 18px;line-height:1.6}
.embreve .btn{margin:0 4px}