/* Área do aluno — curso da Alessio Engenharia (21/10/2026).
   Mesma linguagem do checkout premium: página clara, topo branco com a assinatura, Red Hat Display/Text,
   laranja --laranja só no que age, cartões de 14px com sombra suave, setas redondas do rolo da home.
   Sem estilo inline: a CSP do site não o permite. Larguras de progresso vêm de <progress> ou de --p (CSSOM). */
:root{--laranja:#CC4A14;--laranja-esc:#A83C0E;--laranja-tinta:#FBF0EA;--laranja-anel:rgba(204,74,20,.22);
  --noite:#10202E;--noite-2:#172B3B;--nevoa:#EEF2F6;--nevoa-2:#F6F8FA;--branco:#FFFFFF;
  --texto2:#2C3A47;--meta:#4B5967;--fio:#E2E7EC;--fio-2:#D3DAE1;--borda:#8593A0;--erro:#B3261E;--erro-tinta:#FDF3F0;--ok:#1F7A4D;
  --titulo:'Red Hat Display','Segoe UI','Helvetica Neue',sans-serif;--texto:'Red Hat Text','Segoe UI','Helvetica Neue',sans-serif;
  --largura:1320px;--margem:clamp(16px,3.2vw,48px);--raio:8px;--raio-cartao:14px;
  --sombra:0 1px 2px rgba(16,32,46,.04),0 18px 40px -24px rgba(16,32,46,.25);
  --sombra-alta:0 2px 4px rgba(16,32,46,.05),0 28px 56px -28px rgba(16,32,46,.38);color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--branco);color:var(--noite);font-family:var(--texto);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;min-height:100svh;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-color:var(--laranja);text-underline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--titulo);font-weight:400;letter-spacing:-.01em}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--laranja);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.largura{width:100%;max-width:var(--largura);margin:0 auto;padding-inline:var(--margem)}
.ico{width:18px;height:18px;flex:none}
.pular{position:absolute;left:12px;top:-80px;z-index:60;background:var(--noite);color:#FFFFFF;padding:10px 14px;text-decoration:none;font-weight:700;border-radius:6px}
.pular:focus{top:10px}
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
input,textarea,select,.copiavel{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
img,video{-webkit-user-drag:none;user-drag:none}
.reg{font-size:.55em;vertical-align:super;line-height:0;margin-left:.04em;font-weight:inherit}

/* ---------- topo ---------- */
.topo{background:var(--branco);border-bottom:1px solid var(--fio);position:relative;z-index:5}
.topo .largura{display:flex;align-items:center;gap:20px;min-height:56px}
body .topo .assin{--a-h:26px;--d-fs:9.5px;--a-gap:10px}
.topo-meio{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.topo-meio>span{font-size:12.5px;font-weight:500;line-height:1.35;color:var(--texto2)}
.topo-dir{display:flex;align-items:center;gap:18px;flex:none}
.seguro{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--meta)}
.seguro .ico{width:15px;height:15px;color:var(--ok)}
.topo a.volta-site,.topo .sair{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:14px;font-weight:500;color:var(--noite);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.topo a.volta-site::before{content:"\2190";color:var(--laranja-esc);transition:transform .2s ease}
.topo a.volta-site:hover::before{transform:translateX(-3px)}
.topo a.volta-site:hover,.topo .sair:hover{text-decoration:underline;text-decoration-color:var(--laranja)}
.topo .sair .ico{width:16px;height:16px;color:var(--laranja-esc)}

/* ---------- textos ---------- */
.chapeu{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--laranja-esc)}
.lede{color:var(--meta);font-size:15px;line-height:1.55}

/* ---------- botões (os do checkout) e setas redondas (as do rolo) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;font-family:var(--texto);font-size:15px;font-weight:700;text-decoration:none;
  border:1px solid transparent;border-radius:var(--raio);cursor:pointer;white-space:nowrap;transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease}
.btn:focus-visible{outline:0;box-shadow:0 0 0 3px #FFFFFF,0 0 0 5px var(--laranja)}
.btn .ico{width:17px;height:17px;transition:transform .2s ease}
.btn:hover .ico{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn-laranja{background:var(--laranja);color:#FFFFFF;box-shadow:0 1px 2px rgba(16,32,46,.12),0 6px 16px -8px rgba(204,74,20,.6)}
.btn-laranja:hover{background:#A83C0E}
.btn-laranja[disabled]{background:#D98A69;cursor:progress;box-shadow:none}
.btn-contorno{background:#FFFFFF;color:var(--noite);border-color:var(--fio-2)}
.btn-contorno:hover{border-color:var(--noite)}
.btn-largo{width:100%}
.ligacao{display:inline-flex;align-items:center;min-height:36px;padding:0 2px;background:none;border:0;font-size:13.5px;font-weight:500;color:var(--noite);cursor:pointer;text-decoration:underline;text-decoration-color:rgba(204,74,20,.55);text-underline-offset:4px}
.ligacao:hover{text-decoration-color:var(--laranja)}
.ligacao[disabled]{color:var(--meta);cursor:default;text-decoration:none}
.seta{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;border:1.5px solid var(--noite);background:transparent;color:var(--noite);cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}
.seta .ico{width:18px;height:18px}
a:hover .seta,.seta:hover{background:var(--laranja);border-color:var(--laranja);color:#FFFFFF}
.seta-clara{border-color:rgba(255,255,255,.85);color:#FFFFFF}
.seta-clara:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--laranja)}

/* ---------- cartão ---------- */
.cartao{background:#FFFFFF;border:1px solid var(--fio);border-radius:var(--raio-cartao);box-shadow:var(--sombra);overflow:hidden}

/* =================== ENTRAR =================== */
main{flex:1 0 auto;display:flex;flex-direction:column}
.entrar{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,420px);column-gap:clamp(32px,6vw,112px);align-items:center;padding-block:clamp(10px,2.4svh,56px)}
.entrar h1{font-weight:300;font-size:clamp(32px,min(4.2vw,6.6svh),58px);line-height:1.04;letter-spacing:-.03em;margin:14px 0 16px;max-width:15ch;text-wrap:balance}
.entrar .lede{max-width:46ch}
.trunfos{list-style:none;margin:clamp(18px,3.4svh,32px) 0 0;padding:0;display:grid;gap:0;max-width:520px;border-top:1px solid var(--fio)}
.trunfos li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--fio)}
.trunfos .ico{width:20px;height:20px;color:var(--laranja);margin-top:2px}
.trunfos strong{display:block;font-family:var(--titulo);font-weight:500;font-size:15.5px;line-height:1.3}
.trunfos span{display:block;font-size:13.5px;color:var(--meta);line-height:1.45}
.cartao-entrar{position:relative}
.cartao-entrar::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--laranja);z-index:2}
.cartao-capa{position:relative;height:clamp(64px,13svh,132px);overflow:hidden}
.cartao-capa img{width:100%;height:100%;object-fit:cover}
.cartao-capa::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,32,46,.05) 0%,rgba(16,32,46,.8) 100%)}
.cartao-capa p{position:absolute;left:22px;bottom:10px;z-index:1;color:#FFFFFF;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.cartao-c{padding:clamp(18px,3svh,26px) clamp(18px,2.2vw,28px) clamp(18px,3svh,26px)}
.cartao-c h2{font-weight:500;font-size:21px;line-height:1.2}
.cartao-c .sub{margin-top:4px;font-size:13.5px;color:var(--meta);line-height:1.5;overflow-wrap:anywhere}
.cartao-c .sub b{color:var(--noite);font-weight:700}
.campo{margin-top:16px;min-width:0}
.campo label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--noite)}
.campo input{width:100%;height:48px;padding:0 14px;font:inherit;font-size:16px;color:var(--noite);background:#FFFFFF;border:1px solid var(--borda);border-radius:var(--raio);
  -webkit-appearance:none;appearance:none;transition:border-color .15s ease,box-shadow .15s ease}
.campo input::placeholder{color:#7A8794}
.campo input:hover{border-color:var(--noite)}
.campo input:focus{outline:none;border-color:var(--laranja);box-shadow:0 0 0 3px var(--laranja-anel)}
.campo.invalido input{border-color:var(--erro);background:var(--erro-tinta)}
.campo-codigo input{font-family:var(--titulo);font-size:28px;font-weight:500;letter-spacing:.42em;text-align:center;padding-left:.42em;height:60px}
.acoes-form{margin-top:16px;display:grid;gap:10px}
.form-nota{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--meta)}
.form-linha{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 14px;margin-top:6px}
.msg{margin-top:12px;font-size:13.5px;line-height:1.45;font-weight:700;color:var(--erro);display:flex;gap:8px;align-items:flex-start}
.msg:empty{display:none}
.msg.boa{color:var(--ok)}
.passo{animation:entra .35s ease both}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* =================== PAINEL (lista de aulas) =================== */
.painel{flex:1 0 auto;padding-block:clamp(22px,4.4svh,48px) clamp(28px,6svh,72px)}
.painel-cabeca{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:20px clamp(28px,5vw,80px);align-items:end}
.painel-cabeca h1{font-weight:300;font-size:clamp(32px,3.6vw,50px);line-height:1.05;letter-spacing:-.03em;margin-top:10px}
.painel-cabeca .lede{margin-top:10px;max-width:56ch}
.geral{padding:16px 18px;background:var(--nevoa-2);border:1px solid var(--fio);border-radius:var(--raio-cartao)}
.geral-linha{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.geral-linha span{font-size:13px;color:var(--meta)}
.geral-linha strong{font-family:var(--titulo);font-weight:400;font-size:26px;letter-spacing:-.02em;line-height:1.1}
.geral small{display:block;margin-top:8px;font-size:12px;color:var(--meta)}
progress.barra-p{-webkit-appearance:none;appearance:none;display:block;width:100%;height:6px;margin-top:10px;border:0;border-radius:999px;background:rgba(16,32,46,.1);overflow:hidden;color:var(--laranja)}
progress.barra-p::-webkit-progress-bar{background:rgba(16,32,46,.1);border-radius:999px}
progress.barra-p::-webkit-progress-value{background:var(--laranja);border-radius:999px;transition:width .6s ease}
progress.barra-p::-moz-progress-bar{background:var(--laranja);border-radius:999px}

.continuar{margin-top:clamp(18px,3.4svh,32px);display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);align-items:stretch;text-decoration:none;color:inherit;
  transition:box-shadow .3s ease,transform .3s ease}
.continuar:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px)}
.continuar-quadro{position:relative;min-height:150px;background:radial-gradient(120% 140% at 0% 0%,#22394C 0%,var(--noite) 58%,#0B1722 100%);display:grid;place-items:center;overflow:hidden}
.continuar-quadro::after{content:"";position:absolute;inset:auto 0 0;height:4px;background:rgba(255,255,255,.14)}
.continuar-quadro .num-grande{position:absolute;left:18px;top:10px;font-family:var(--titulo);font-weight:300;font-size:64px;line-height:1;color:rgba(255,255,255,.12);letter-spacing:-.04em}
.tocar-redondo{position:relative;z-index:1;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--laranja);color:#FFFFFF;
  box-shadow:0 10px 30px -8px rgba(204,74,20,.75);transition:transform .3s ease}
.tocar-redondo .ico{width:24px;height:24px;margin-left:3px}
.continuar:hover .tocar-redondo{transform:scale(1.06)}
.continuar-quadro .fio-p{position:absolute;left:0;bottom:0;height:4px;width:calc(var(--p,0) * 1%);background:var(--laranja);z-index:1}
.continuar-c{padding:18px clamp(18px,2.4vw,28px);display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.continuar-c h2{font-weight:500;font-size:clamp(19px,1.7vw,23px);line-height:1.25;overflow-wrap:anywhere}
.continuar-c .meta{font-size:13px;color:var(--meta)}
.continuar-c .btn{align-self:flex-start;margin-top:8px}

.secao-titulo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:clamp(26px,4.6svh,44px);padding-bottom:10px;border-bottom:1px solid var(--noite)}
.secao-titulo h2{font-weight:500;font-size:20px}
.secao-titulo span{font-size:13px;color:var(--meta)}
.aulas{list-style:none;margin:0;padding:0}
.aulas li{border-bottom:1px solid var(--fio)}
.aula-link{display:grid;grid-template-columns:64px minmax(0,1fr) auto 40px;gap:8px clamp(14px,2vw,28px);align-items:center;padding:16px 4px;text-decoration:none;color:inherit;border-radius:10px;
  transition:background-color .25s ease}
.aula-link:hover{background:var(--nevoa-2)}
.aula-num{font-family:var(--titulo);font-weight:300;font-size:34px;line-height:1;letter-spacing:-.03em;color:var(--laranja)}
.aula-corpo{min-width:0}
.aula-corpo h3{font-weight:500;font-size:16.5px;line-height:1.3;overflow-wrap:anywhere}
.aula-corpo .meta{margin-top:3px;font-size:12.5px;color:var(--meta)}
.aula-corpo progress.barra-p{max-width:420px;height:4px;margin-top:9px}
.selo{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;border:1px solid var(--fio);background:#FFFFFF;color:var(--meta)}
.selo.feito{border-color:rgba(31,122,77,.25);background:#EEF7F2;color:var(--ok)}
.selo.feito::before{content:"\2713"}
.selo.andamento{border-color:rgba(204,74,20,.28);background:var(--laranja-tinta);color:var(--laranja-esc)}
.vazio{margin-top:18px;padding:28px clamp(18px,3vw,36px);display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start;background:var(--nevoa-2);border:1px dashed var(--fio-2);border-radius:var(--raio-cartao)}
.vazio .ico{width:40px;height:40px;color:var(--laranja)}
.vazio h3{font-weight:500;font-size:18px}
.vazio p{margin-top:4px;color:var(--meta);font-size:14px;max-width:60ch}
.nota-uso{margin-top:clamp(18px,3svh,28px);display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:var(--meta);max-width:90ch}
.nota-uso .ico{width:16px;height:16px;color:var(--laranja);margin-top:2px}
.carregando{flex:1 0 auto;display:grid;place-items:center;min-height:50svh}
.roda{width:34px;height:34px;border-radius:50%;border:3px solid var(--fio);border-top-color:var(--laranja);animation:gira .9s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* =================== SALA (player) =================== */
.sala-palco{background:var(--noite);color:#FFFFFF}
.sala-grade{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,24vw,340px);gap:clamp(16px,2vw,28px);padding-block:clamp(12px,2.4svh,24px);align-items:start}
.sala-lista ol{flex:1 1 auto;min-height:0}
.player{position:relative;width:100%;max-width:calc((100svh - 56px - clamp(150px,24svh,210px)) * 16 / 9);min-width:min(100%,280px);margin-inline:auto;aspect-ratio:16/9;background:#000;border-radius:var(--raio-cartao);overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);isolation:isolate;outline:none}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.player:focus-visible{box-shadow:0 0 0 3px var(--laranja)}
/* tela cheia: o contêiner inteiro (vídeo + marca d'água + controles) */
.player:fullscreen{max-width:none;width:100%;height:100%;border-radius:0;aspect-ratio:auto}
.player:-webkit-full-screen{max-width:none;width:100%;height:100%;border-radius:0}
.player.tela-cheia{position:fixed;inset:0;z-index:100;max-width:none;width:100vw;height:100svh;border-radius:0;aspect-ratio:auto}
body.com-tela-cheia{overflow:hidden}

/* marca d'água: nome + parte do CPF + hora, que anda pela tela; e uma trama tênue diagonal */
.marca{position:absolute;z-index:3;pointer-events:none;display:flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:6px;background:rgba(16,32,46,.22);
  color:rgba(255,255,255,.62);font-family:var(--texto);font-size:clamp(10.5px,1.05vw,14px);font-weight:700;line-height:1.3;letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.55);
  transition:opacity .9s ease,top .9s ease,left .9s ease,right .9s ease,bottom .9s ease;white-space:nowrap}
.marca span+span{font-weight:500;font-size:.9em;color:rgba(255,255,255,.55)}
.marca.m0{top:7%;left:4%}.marca.m1{top:9%;right:5%}.marca.m2{bottom:24%;right:6%}.marca.m3{bottom:22%;left:5%}.marca.m4{top:42%;left:34%}.marca.m5{top:26%;left:58%}
.marca.trocando{opacity:0}
.trama{position:absolute;inset:-30%;z-index:2;pointer-events:none;display:grid;grid-template-columns:repeat(4,1fr);gap:9% 6%;align-content:center;transform:rotate(-22deg);opacity:.075}
.trama span{color:#FFFFFF;font-family:var(--texto);font-weight:700;font-size:clamp(11px,1.2vw,16px);white-space:nowrap;text-align:center}
.player-sombra{position:absolute;inset:auto 0 0;height:42%;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 100%);transition:opacity .35s ease}
.play-grande{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:76px;height:76px;border-radius:50%;border:0;background:var(--laranja);color:#FFFFFF;cursor:pointer;
  box-shadow:0 14px 34px -10px rgba(204,74,20,.8);transition:transform .25s ease,opacity .25s ease,background-color .2s ease}
.play-grande .ico{width:30px;height:30px;margin-left:4px}
.play-grande:hover{background:#A83C0E;transform:translate(-50%,-50%) scale(1.05)}
.player.tocando .play-grande{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.85)}
.espera{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:var(--laranja);animation:gira .9s linear infinite;opacity:0;pointer-events:none;transition:opacity .2s ease}
.player.esperando .espera{opacity:1}
.player.esperando .play-grande{opacity:0}
.player-aviso{position:absolute;z-index:6;inset:0;display:grid;place-items:center;padding:24px;background:rgba(16,32,46,.92);text-align:center}
.player-aviso div{max-width:460px;display:grid;gap:12px;justify-items:center}
.player-aviso p{font-size:15px;line-height:1.5}
.retomar{position:absolute;z-index:5;left:16px;bottom:70px;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:999px;background:rgba(16,32,46,.88);font-size:13px;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6);animation:entra .35s ease both}
.retomar button{border:0;border-radius:999px;background:var(--laranja);color:#FFFFFF;font-weight:700;font-size:12.5px;min-height:30px;padding:0 12px;cursor:pointer}
.retomar button:hover{background:#A83C0E}

.controles{position:absolute;z-index:5;left:0;right:0;bottom:0;padding:0 clamp(8px,1.4vw,16px) clamp(6px,1svh,10px);transition:opacity .35s ease,transform .35s ease}
.player.tocando.quieto .controles,.player.tocando.quieto .player-sombra{opacity:0;transform:translateY(6px)}
.player.tocando.quieto{cursor:none}
.linha-tempo{position:relative;height:18px;display:flex;align-items:center}
.linha-tempo input{position:absolute;inset:0;width:100%;height:18px;margin:0;opacity:0;cursor:pointer;z-index:2}
.trilho{position:relative;width:100%;height:4px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden;transition:height .2s ease}
.linha-tempo:hover .trilho,.linha-tempo:focus-within .trilho{height:6px}
.trilho .carregado{position:absolute;inset:0 auto 0 0;width:calc(var(--b,0) * 1%);background:rgba(255,255,255,.35)}
.trilho .visto{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 1%);background:var(--laranja)}
.cabeca-tempo{position:absolute;left:calc(var(--p,0) * 1%);top:50%;width:13px;height:13px;margin-left:-6.5px;margin-top:-6.5px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 3px rgba(204,74,20,.55);
  transform:scale(0);transition:transform .2s ease;pointer-events:none;z-index:1}
.linha-tempo:hover .cabeca-tempo,.linha-tempo:focus-within .cabeca-tempo{transform:scale(1)}
.linha-tempo:focus-within{outline:2px solid var(--laranja);outline-offset:2px;border-radius:4px}
.ctl{display:flex;align-items:center;gap:clamp(2px,.6vw,8px);margin-top:2px}
.ctl button{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 6px;border:0;border-radius:8px;background:transparent;color:#FFFFFF;cursor:pointer;font-size:13px;font-weight:700;
  transition:background-color .2s ease,color .2s ease}
.ctl button:hover{background:rgba(255,255,255,.12)}
.ctl button:focus-visible{outline:2px solid var(--laranja);outline-offset:0}
.ctl .ico{width:21px;height:21px}
.ctl .tempo{font-size:12.5px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.88);padding-inline:6px;white-space:nowrap}
.ctl .vao{flex:1 1 auto}
.volume{display:flex;align-items:center}
.volume input{width:0;opacity:0;transition:width .25s ease,opacity .25s ease;accent-color:var(--laranja);height:4px}
.volume:hover input,.volume:focus-within input{width:72px;opacity:1;margin-right:6px}
.menu-wrap{position:relative}
.menu{position:absolute;right:0;bottom:46px;min-width:150px;padding:6px;border-radius:10px;background:rgba(16,32,46,.96);box-shadow:0 18px 40px -18px rgba(0,0,0,.8);display:grid;gap:2px;animation:entra .2s ease both}
.menu p{padding:6px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.menu button{justify-content:space-between;display:flex;width:100%;min-height:34px;font-weight:500;padding:0 10px;text-align:left}
.menu button[aria-checked="true"]{color:#FFFFFF;background:rgba(204,74,20,.35)}
.menu button[aria-checked="true"]::after{content:"\2713"}

/* lista ao lado do vídeo */
/* a lista não dita a altura da linha (contain:size): ela estica até a altura do vídeo e rola por dentro */
.sala-lista{background:var(--noite-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--raio-cartao);overflow:hidden;display:flex;flex-direction:column;align-self:stretch;contain:size;min-height:240px}
.sala-lista-cab{padding:14px 16px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.sala-lista-cab .chapeu{color:#F2A27D}
.sala-lista-cab p+p{margin-top:4px;font-size:12.5px;color:rgba(255,255,255,.7)}
.sala-lista-cab progress.barra-p{background:rgba(255,255,255,.14)}
.sala-lista-cab progress.barra-p::-webkit-progress-bar{background:rgba(255,255,255,.14)}
.sala-lista ol{list-style:none;margin:0;padding:6px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.sala-lista a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border-radius:10px;text-decoration:none;color:rgba(255,255,255,.88);transition:background-color .2s ease}
.sala-lista a:hover{background:rgba(255,255,255,.07)}
.sala-lista a[aria-current="page"]{background:rgba(204,74,20,.22);color:#FFFFFF}
.sala-lista .n{font-family:var(--titulo);font-weight:300;font-size:20px;color:#F2A27D;line-height:1}
.sala-lista .t{font-size:13.5px;line-height:1.35;font-weight:500;overflow-wrap:anywhere}
.sala-lista .d{display:block;font-size:11.5px;color:rgba(255,255,255,.6);margin-top:2px;font-weight:400}
.sala-lista .ok{color:#6FD3A0;font-size:13px}
.sala-lista .pc{font-size:11.5px;color:#F2A27D;font-weight:700}

.sala-info{padding-block:clamp(14px,2.6svh,28px) clamp(26px,5svh,56px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 28px;align-items:center}
.sala-info h1{font-weight:400;font-size:clamp(22px,2.1vw,30px);line-height:1.2;letter-spacing:-.02em;margin-top:6px;overflow-wrap:anywhere}
.sala-info .meta{margin-top:4px;font-size:13px;color:var(--meta)}
.sala-nav{display:flex;align-items:center;gap:10px}
.sala-nav a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:13.5px;font-weight:500;color:var(--noite)}
.sala-nav a[aria-disabled="true"]{opacity:.35;pointer-events:none}
.sala-info .nota-uso{grid-column:1/-1;margin-top:6px}

/* ---------- rodapé (o do checkout: duas linhas, claro) ---------- */
.rodape:not(.rf){background:var(--nevoa-2);border-top:1px solid var(--fio);color:var(--meta);font-size:12px;line-height:1.5;margin-top:auto}
.rodape:not(.rf) .largura{padding-block:8px;display:grid;gap:1px}
.rodape:not(.rf) .rd-l{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 24px}
.rodape:not(.rf) p{margin:0;overflow-wrap:anywhere}
.rodape:not(.rf) nav{display:flex;flex-wrap:wrap;gap:0 14px}
.rodape:not(.rf) nav a,.rodape:not(.rf) nav button{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:none;color:var(--noite)}
.rodape:not(.rf) nav a:hover,.rodape:not(.rf) nav button:hover{text-decoration:underline;text-decoration-color:var(--laranja)}

/* ---------- telas menores ---------- */
@media (max-width:1100px){
  .sala-grade{grid-template-columns:minmax(0,1fr)}
  .player{max-width:none}
  .sala-lista{contain:none;min-height:0;max-height:440px}
}
@media (max-width:960px){
  .entrar{grid-template-columns:minmax(0,1fr);row-gap:24px;align-content:start}
  .entrar h1{max-width:20ch}
  .painel-cabeca{grid-template-columns:minmax(0,1fr)}
  .seguro{display:none}
}
@media (max-width:700px){
  .topo-meio{display:none}
  .topo .largura{justify-content:space-between}
  .continuar{grid-template-columns:minmax(0,1fr)}
  .continuar-quadro{min-height:120px}
  .aula-link{grid-template-columns:44px minmax(0,1fr) 40px;padding:14px 2px}
  .aula-link .selo{grid-column:2;justify-self:start;grid-row:2}
  .aula-link .seta{grid-column:3;grid-row:1 / span 2}
  .aula-num{font-size:26px}
  .sala-grade{padding-inline:0;padding-top:0}
  .player{border-radius:0}
  .sala-lista{margin-inline:var(--margem);margin-bottom:18px}
  .sala-info{grid-template-columns:minmax(0,1fr)}
  .volume input{display:none}
  .ctl [data-acao="voltar10"],.ctl [data-acao="avancar10"]{display:none}
  .retomar{bottom:58px;left:10px}
  .rodape:not(.rf) .rd-l{display:grid;gap:2px}
}
@media (max-width:420px){
  .ctl button{min-width:34px;padding:0 4px}
  .ctl .tempo{font-size:11.5px;padding-inline:2px}
  .topo a.volta-site span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* some da vista, fica para o leitor de tela */
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}