:root{--bg:#0b0b0f;--bg2:#15151b;--bg3:#1e1e26;--linha:#2a2a33;--txt:#f5efe6;--mut:#9a958d;--ouro:#e8a23a;--ouro2:#f3c477;--vivo:#e5484d}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}

/* portão de cadastro */
html.logado #portao{display:none}
.portao-topo{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;padding:24px 16px}
.portao-fundo{position:absolute;inset:-40px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;transform:rotate(-6deg) scale(1.15);opacity:.35;filter:saturate(.8)}
.portao-fundo img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px}
.portao-topo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(11,11,15,.55) 0%,rgba(11,11,15,.96) 70%)}
.portao-caixa{position:relative;z-index:1;max-width:420px;width:100%;background:rgba(21,21,27,.86);backdrop-filter:blur(12px);border:1px solid var(--linha);border-radius:16px;padding:32px 24px;text-align:center}
.sobre{color:var(--ouro);letter-spacing:.18em;text-transform:uppercase;font-size:12px;font-weight:600}
.portao-caixa h1{font-size:30px;line-height:1.1;margin:8px 0 10px;font-weight:800;letter-spacing:-.01em}
.portao-caixa p{color:var(--mut);margin:0 0 20px}
form{display:grid;gap:10px}
input,textarea{width:100%;background:var(--bg);border:1px solid var(--linha);color:var(--txt);border-radius:10px;padding:14px;font:inherit;outline:none}
input:focus,textarea:focus{border-color:var(--ouro)}
form button,.btn{background:var(--ouro);color:#1b1206;border:0;border-radius:10px;padding:14px 18px;font-weight:700}
.btn.sec{background:rgba(255,255,255,.12);color:var(--txt)}
.erro{color:var(--vivo)!important;margin:0!important;min-height:1em;font-size:14px}
.miudo{font-size:13px;margin:14px 0 0!important}

/* topo */
.topo{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 4vw;background:linear-gradient(rgba(11,11,15,.95),rgba(11,11,15,0));transition:background .3s}
.topo.solido{background:rgba(11,11,15,.97)}
.marca{font-size:14px;letter-spacing:.2em;font-weight:500}
.marca b{color:var(--ouro);font-weight:800}
.ola{color:var(--mut);font-size:14px}
main{padding-bottom:60px}

/* destaque da home */
.destaque{position:relative;min-height:72vh;display:flex;align-items:flex-end;padding:0 4vw 6vh;overflow:hidden}
.destaque-img{position:absolute;inset:0;background-size:cover;background-position:center 30%}
.destaque::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,15,.95) 0%,rgba(11,11,15,.6) 45%,rgba(11,11,15,.1) 100%),linear-gradient(0deg,var(--bg) 0%,rgba(11,11,15,0) 40%)}
.destaque-txt{position:relative;z-index:1;max-width:560px}
.destaque h2{font-size:clamp(30px,5vw,54px);line-height:1.02;margin:6px 0 12px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.destaque p{color:#d4cec4;margin:0 0 18px}
.acoes{display:flex;gap:10px;flex-wrap:wrap}

/* fileiras */
.fileira{margin:28px 0 0}
.fileira h3{font-size:19px;margin:0 4vw 10px;font-weight:700}
.fileira h3 a:hover{color:var(--ouro)}
.trilho{display:flex;gap:10px;overflow-x:auto;padding:4px 4vw 12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.trilho::-webkit-scrollbar{display:none}
.poster{flex:0 0 clamp(130px,15vw,200px);scroll-snap-align:start;border-radius:8px;overflow:hidden;transition:transform .2s;background:var(--bg2)}
.poster img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover}
.poster:hover{transform:scale(1.04)}
.card{flex:0 0 clamp(220px,24vw,320px);scroll-snap-align:start}
.thumb{position:relative;border-radius:8px;overflow:hidden;background:var(--bg2);aspect-ratio:16/9}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.card:hover .thumb img{transform:scale(1.05)}
.thumb .dur{position:absolute;right:6px;bottom:8px;background:rgba(0,0,0,.75);font-size:12px;padding:1px 6px;border-radius:4px}
.thumb .barra{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.2)}
.thumb .barra i{display:block;height:100%;background:var(--ouro)}
.thumb .feita{position:absolute;left:6px;top:6px;background:var(--ouro);color:#1b1206;font-size:11px;font-weight:700;padding:1px 7px;border-radius:4px}
.card .nome{font-size:14px;margin-top:7px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .mod{font-size:12px;color:var(--mut)}

/* grade de capas e busca (sem arrastar pro lado) */
.dica{color:var(--mut);margin:-4px 4vw 12px;font-size:15px}
.grade-capas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 12px;padding:4px 4vw}
.grade-capas .poster{flex:none}
.poster span{display:block;padding:8px 4px 2px;font-size:15px;font-weight:600;line-height:1.25;background:var(--bg)}
.poster span small{display:block;color:var(--mut);font-weight:400;font-size:13px}
.buscar{margin:8px 4vw 0;background:var(--bg2);border:1px solid var(--linha);border-radius:14px;padding:16px}
.buscar label{display:block;font-weight:700;font-size:17px;margin-bottom:8px}
.buscar input{font-size:17px;padding:14px 16px;-webkit-appearance:none}
.temas{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.temas button{background:var(--bg3);color:var(--txt);border:1px solid var(--linha);border-radius:999px;padding:9px 14px;font-size:15px}
.temas button.on{background:var(--ouro);color:#1b1206;border-color:var(--ouro);font-weight:700}
@media (max-width:600px){.grade-capas{grid-template-columns:1fr 1fr}.grade{grid-template-columns:1fr}}

/* página do módulo */
.modulo-topo{display:flex;gap:28px;padding:96px 4vw 24px;align-items:flex-end}
.modulo-topo img{width:clamp(130px,18vw,220px);border-radius:10px;aspect-ratio:2/3;object-fit:cover;flex:none}
.modulo-topo h2{font-size:clamp(26px,4vw,44px);margin:6px 0;line-height:1.05;text-transform:uppercase;font-weight:800}
.modulo-topo p{color:var(--mut);margin:0 0 16px}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px 14px;padding:8px 4vw}
.grade .card{flex:none}
.num{color:var(--ouro);font-weight:700;margin-right:4px}

/* aula */
.aula{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;padding:76px 4vw 0;max-width:1500px;margin:0 auto}
.player{background:#000;border-radius:12px;overflow:hidden;aspect-ratio:16/9}
.player video{width:100%;height:100%;display:block}
.vivo{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.35);padding:6px 12px;border-radius:999px;font-size:14px}
.vivo .ponto{width:8px;height:8px;border-radius:50%;background:var(--vivo);animation:pulso 1.4s infinite}
.vivo b{font-variant-numeric:tabular-nums;transition:color .3s}
.vivo b.sobe{color:#ff8a8d}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(229,72,77,.7)}70%{box-shadow:0 0 0 8px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
.aula h2{font-size:24px;margin:12px 0 2px;line-height:1.2}
.aula .meta{color:var(--mut);margin:0}
.linha-acoes{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:18px 0;padding:14px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.estrelas{display:flex;align-items:center;gap:10px}
.estrelas .bts{display:flex}
.estrelas button{background:none;border:0;padding:2px;font-size:28px;line-height:1;color:#3a3a44;transition:transform .1s,color .1s}
.estrelas button.on{color:var(--ouro)}
.estrelas button:hover{transform:scale(1.15)}
.estrelas small{color:var(--mut)}
.comentarios h3{font-size:18px;margin:8px 0 12px}
.comentarios form{grid-template-columns:1fr auto;align-items:start}
.comentarios textarea{min-height:52px;resize:vertical}
.coment{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--linha)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--bg3);color:var(--ouro);display:grid;place-items:center;font-weight:700;flex:none}
.coment b{font-size:14px}
.coment time{color:var(--mut);font-size:12px;margin-left:6px}
.coment p{margin:2px 0 0;white-space:pre-wrap;word-break:break-word}
.lateral{background:var(--bg2);border:1px solid var(--linha);border-radius:12px;overflow:hidden;align-self:start;position:sticky;top:76px}
.lateral h4{margin:0;padding:14px 16px;border-bottom:1px solid var(--linha);font-size:15px}
.lateral h4 small{display:block;color:var(--mut);font-weight:400}
.lista{max-height:calc(100vh - 170px);overflow:auto}
.item{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--linha);align-items:center}
.item:hover{background:var(--bg3)}
.item.atual{background:#2a2112}
.item img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;flex:none}
.item span{font-size:13px;line-height:1.3}
.item small{display:block;color:var(--mut)}
.item .ok{color:var(--ouro)}

@media (max-width:900px){
  .aula{grid-template-columns:1fr;padding:64px 0 0}
  .aula>section>*:not(.player){margin-left:16px;margin-right:16px}
  .player{border-radius:0}
  .lateral{position:static;margin:0 16px;top:auto}
  .lista{max-height:none}
  .modulo-topo{flex-direction:column;align-items:flex-start;gap:16px;padding-top:80px}
  .destaque{min-height:62vh}
  .comentarios form{grid-template-columns:1fr}
}