/* Aristocrata University · área de membros
   Identidade da University atual: preto de biblioteca, vinho do estandarte (#4d0712), marfim do brasão.
   Capas reais dos módulos (TheMembers / Last Class) como peça principal do catálogo.
   Layout: navegação no topo no desktop, barra inferior no celular. */
:root{
  --bg:#0a0909;--bg2:#100e0e;--sup:#161314;--sup2:#1e1a1b;--sup3:#272223;
  --linha:rgba(237,227,207,.08);--linha2:rgba(237,227,207,.16);
  --tx:#efe7d8;--tx2:#c2b8a8;--mudo:#8f867a;
  --vinho:#4d0712;--vinho2:#6b0e1f;--vinho3:#8e1a2e;--rubi:#c8455c;--rubi-f:rgba(200,69,92,.12);
  --marfim:#ede3cf;--marfim2:#fffaf0;
  --ok:#86b07f;--alerta:#d8a656;--risco:#d77a72;
  --disp:'Cinzel',Georgia,'Times New Roman',serif;
  --serif:'Cormorant Garamond','Cormorant',Georgia,'Times New Roman',serif;
  --txt:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --raio:6px;--raio2:12px;--lado:clamp(16px,4vw,56px);--barra:68px;--topo:68px;
  --sombra:0 18px 50px -12px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.4);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--tx);font:15px/1.6 var(--txt);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--marfim);text-decoration:none}
a:hover{color:var(--marfim2)}
:focus-visible{outline:2px solid var(--rubi);outline-offset:2px;border-radius:4px}
img,video{max-width:100%}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.6vw,52px);line-height:1.04;letter-spacing:-.005em}
h2{font-size:clamp(18px,1.9vw,21px);letter-spacing:-.01em;font-weight:600}
h3{font-size:15px;letter-spacing:-.005em}
.disp{font-family:var(--disp);letter-spacing:.08em}
p{margin:0}
small,.mudo{color:var(--mudo)}
.rotulo{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mudo);font-weight:600}
a.rotulo:hover{color:var(--tx)}
.rotulo.vinho{color:var(--rubi)}
button,input,textarea,select{font:inherit;color:inherit}

/* ---------- marca ---------- */
.brasao{display:inline-block;width:30px;height:24px;background:url(marca/brasao.png) center/contain no-repeat;flex:none}
.marca{display:flex;align-items:center;gap:12px;color:var(--tx)}
.marca b{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.16em;line-height:1.15;white-space:nowrap}
.marca b span{display:block;font-size:9.5px;letter-spacing:.42em;color:var(--mudo);font-weight:500}

/* ---------- casca ---------- */
.casca{min-height:100%;display:flex;flex-direction:column}
.topo{position:sticky;top:0;z-index:40;height:var(--topo);display:flex;align-items:center;gap:36px;padding:0 var(--lado);
  background:linear-gradient(180deg,rgba(10,9,9,.92),rgba(10,9,9,.72));backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
.topo.rolou{background:rgba(10,9,9,.94);border-bottom-color:var(--linha)}
.topo nav{display:flex;align-items:center;gap:4px;min-width:0}
.topo nav a{position:relative;padding:8px 12px;font-size:14px;font-weight:500;color:var(--tx2);border-radius:6px;white-space:nowrap}
.topo nav a:hover{color:var(--tx)}
.topo nav a.ativo{color:var(--tx)}
.topo nav a.ativo::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--rubi);border-radius:2px}
.topo .acoes{margin-left:auto;display:flex;align-items:center;gap:6px}
.topo .icone{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--tx2)}
.topo .icone:hover,.topo .icone.ativo{background:var(--sup2);color:var(--tx)}
.topo .icone svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.avatar{display:inline-flex;align-items:center;gap:10px;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid var(--linha2);color:var(--tx);font-size:13px;font-weight:500}
.avatar i{width:30px;height:30px;border-radius:50%;background:linear-gradient(140deg,var(--vinho3),var(--vinho));display:grid;place-items:center;font-style:normal;font-family:var(--disp);font-size:13px;color:var(--marfim)}
.avatar:hover,.avatar.ativo{border-color:var(--marfim);color:var(--tx)}
.principal{flex:1;min-width:0;padding:28px var(--lado) 80px;outline:none}
.inferior{display:none}
@media (max-width:1080px){.topo nav a.opc{display:none}}
@media (max-width:860px){
  :root{--topo:56px}
  .topo{gap:12px;padding:0 max(16px,env(safe-area-inset-left));padding-top:env(safe-area-inset-top);height:calc(var(--topo) + env(safe-area-inset-top))}
  .topo nav,.avatar span{display:none}
  .avatar{padding:3px;border:0}
  .marca b{font-size:12.5px}
  .principal{padding:18px max(16px,env(safe-area-inset-left)) calc(var(--barra) + 28px + env(safe-area-inset-bottom))}
  .inferior{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(12,11,11,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--linha);padding-bottom:env(safe-area-inset-bottom)}
  .inferior a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px 9px;font-size:10.5px;letter-spacing:.02em;color:var(--mudo)}
  .inferior a.ativo{color:var(--marfim)}
  .inferior svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6}
}

/* ---------- blocos ---------- */
.pagina{display:flex;flex-direction:column;gap:36px;max-width:1280px;margin:0 auto;width:100%}
.cabeca{display:flex;flex-direction:column;gap:10px}
.pagina>[id]{display:flex;flex-direction:column;gap:36px;min-width:0}
.cabeca p{color:var(--tx2);max-width:62ch}
.secao{display:flex;flex-direction:column;gap:16px}
.secao-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.secao-topo a{font-size:13px;color:var(--tx2);font-weight:500}
.secao-topo a:hover{color:var(--tx)}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px}
.grade.duas{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.grade.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.grade.quatro{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.grade.quatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.grade.tres{grid-template-columns:1fr}}
@media (max-width:560px){.grade.quatro{grid-template-columns:1fr}}
.cartao{background:var(--sup);border:1px solid var(--linha);border-radius:var(--raio2);padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.cartao.link{color:inherit;transition:border-color .2s,background .2s}
.cartao.link:hover{border-color:var(--linha2);background:var(--sup2);color:inherit}
.cartao.destaque{border-color:rgba(200,69,92,.28);background:linear-gradient(150deg,rgba(107,14,31,.32),var(--sup) 60%)}
.linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.entre{justify-content:space-between}
.vazio{border:1px dashed var(--linha2);border-radius:var(--raio2);padding:24px;color:var(--tx2);text-align:center}
.erro{border:1px solid rgba(215,122,114,.4);background:rgba(215,122,114,.07);border-radius:var(--raio);padding:14px 16px;color:#ecbab4}
.carregando{color:var(--mudo);padding:18px 0;display:flex;align-items:center;gap:10px}
.carregando::before{content:"";width:14px;height:14px;border:2px solid var(--linha2);border-top-color:var(--rubi);border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes surge{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- botões e campos ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 20px;border-radius:var(--raio);border:1px solid var(--linha2);background:rgba(237,227,207,.06);color:var(--tx);font-weight:600;font-size:14px;letter-spacing:.005em;cursor:pointer;text-align:center;transition:background .15s,border-color .15s,color .15s}
.btn:hover{border-color:rgba(237,227,207,.34);background:rgba(237,227,207,.1);color:var(--tx)}
.btn svg{width:16px;height:16px;fill:currentColor}
.btn.ouro{background:var(--marfim);border-color:var(--marfim);color:#160d0e}
.btn.ouro:hover{background:var(--marfim2);border-color:var(--marfim2);color:#160d0e}
.btn.vinho{background:var(--vinho2);border-color:var(--vinho3);color:var(--marfim)}
.btn.vinho:hover{background:var(--vinho3);color:var(--marfim2)}
.btn.fantasma{background:transparent}
.btn.perigo{border-color:rgba(215,122,114,.45);color:#ecbab4;background:transparent}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.peq{min-height:34px;padding:5px 14px;font-size:13px}
label.campo{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--tx2);font-weight:500}
input[type=text],input[type=search],input[type=number],textarea,select{width:100%;background:var(--bg2);border:1px solid var(--linha2);border-radius:var(--raio);padding:11px 13px;color:var(--tx);font-size:15px;transition:border-color .15s}
textarea{min-height:90px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--marfim);outline:none}
input::placeholder,textarea::placeholder{color:#6d655b}

/* ---------- progresso e selos ---------- */
.barra-p{height:3px;background:rgba(237,227,207,.12);border-radius:3px;overflow:hidden}
.barra-p i{display:block;height:100%;background:var(--rubi);border-radius:3px}
.pct{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--tx2)}
.selo{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.02em;border:1px solid var(--linha2);color:var(--tx2);white-space:nowrap}
.selo.ok{border-color:rgba(134,176,127,.45);color:var(--ok)}
.selo.alerta{border-color:rgba(216,166,86,.45);color:var(--alerta)}
.selo.risco{border-color:rgba(215,122,114,.45);color:#ecbab4}
.selo.ouro{border-color:rgba(200,69,92,.5);color:#e6a3ae;background:var(--rubi-f)}
.cartao>.selo,.cartao>a.btn,.cartao>.btn{align-self:flex-start}

/* ---------- hero (início, curso) ---------- */
.hero{position:relative;isolation:isolate;margin:-28px calc(-1*var(--lado)) 40px;padding:clamp(40px,7vw,96px) var(--lado) clamp(36px,5vw,64px);overflow:hidden;min-height:clamp(380px,52vh,560px);display:flex;align-items:flex-end}
.hero .fundo{position:absolute;inset:-60px;z-index:-2;background-size:cover;background-position:center 30%;filter:blur(38px) saturate(115%) brightness(.55);transform:scale(1.05)}
.hero .fundo.nitido{inset:0;filter:brightness(.8) saturate(108%);transform:none}
.hero .fundo.direita{background-position:70% 30%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse 70% 90% at 15% 100%,rgba(77,7,18,.55),transparent 70%),
  linear-gradient(90deg,rgba(10,9,9,.94) 0%,rgba(10,9,9,.7) 42%,rgba(10,9,9,.15) 75%),
  linear-gradient(0deg,var(--bg) 0%,rgba(10,9,9,0) 38%)}
.hero-dentro{width:100%;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end}
.hero-txt{display:flex;flex-direction:column;gap:16px;max-width:640px;animation:surge .5s ease both}
.hero-txt .meta{color:var(--tx2);font-size:15px}
.hero-txt .barra-p{max-width:380px}
.hero-capa{width:clamp(150px,15vw,210px);aspect-ratio:299/580;border-radius:var(--raio2);overflow:hidden;box-shadow:var(--sombra);border:1px solid var(--linha2);animation:surge .6s .05s ease both}
.hero-capa img{width:100%;height:100%;object-fit:cover;display:block}
.hero .acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.hero .brasao-grande{width:120px;height:120px;background:url(marca/brasao_completo.png) center/contain no-repeat;opacity:.9}
@media (max-width:860px){.hero{margin-top:-18px;min-height:0;padding-top:140px}.hero::before{background:linear-gradient(0deg,var(--bg) 4%,rgba(10,9,9,.78) 45%,rgba(10,9,9,.25))}.hero-dentro{grid-template-columns:1fr;gap:24px}.hero-capa{display:none}}

/* ---------- capas dos módulos ---------- */
.fileira{display:flex;flex-direction:column;gap:14px}
.fileira-topo{display:flex;align-items:baseline;gap:14px}
.fileira-topo .num{font-family:var(--disp);color:var(--rubi);font-size:15px;letter-spacing:.06em;min-width:22px}
.fileira-topo h2{flex:1;min-width:0}
.fileira-topo .pct{white-space:nowrap}
.trilho{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(132px,13.5vw,186px);gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px;margin-inline:calc(-1*var(--lado));padding-inline:var(--lado);scroll-padding-inline:var(--lado);scrollbar-width:thin;scrollbar-color:var(--sup3) transparent}
.trilho>*{scroll-snap-align:start}
.capas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,172px),1fr));gap:18px 14px}
.capa-mod{display:flex;flex-direction:column;gap:9px;color:var(--tx);min-width:0}
.capa-mod .img{position:relative;aspect-ratio:299/580;border-radius:var(--raio2);overflow:hidden;background:linear-gradient(160deg,var(--vinho2),#1a0a0d);border:1px solid var(--linha);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.capa-mod .img img{width:100%;height:100%;object-fit:cover;display:block}
.capa-mod .img .sem-capa{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center;font-family:var(--disp);font-size:13px;letter-spacing:.06em;line-height:1.3;color:var(--marfim)}
.capa-mod .img .sem-capa::before{content:"";width:64px;height:50px;background:url(marca/brasao.png) center/contain no-repeat;opacity:.85}
.capa-mod .img .barra-p{position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:0;background:rgba(0,0,0,.55)}
.capa-mod .img .barra-p i{border-radius:0}
.capa-mod .img .tag{position:absolute;top:8px;left:8px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:rgba(10,9,9,.78);color:var(--marfim);backdrop-filter:blur(6px)}
.capa-mod .img .tag.ok{background:rgba(134,176,127,.9);color:#0d140c}
.capa-mod.breve .img img{filter:grayscale(.85) brightness(.55)}
.capa-mod .tit{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--tx);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.capa-mod .sub{font-size:12px;color:var(--mudo);font-variant-numeric:tabular-nums;margin-top:-5px}
a.capa-mod:hover .img{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--linha2)}
a.capa-mod:hover{color:var(--tx)}

/* ---------- cartões de aula (continuar) ---------- */
.aula-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border-radius:var(--raio2);background:var(--sup);border:1px solid var(--linha);color:var(--tx);transition:background .2s,border-color .2s}
.aula-card:hover{background:var(--sup2);border-color:var(--linha2);color:var(--tx)}
.aula-card .mini{aspect-ratio:299/580;border-radius:6px;overflow:hidden;background:linear-gradient(160deg,var(--vinho2),#1a0a0d)}
.aula-card .mini img{width:100%;height:100%;object-fit:cover;display:block}
.aula-card .txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.aula-card h3{font-size:14.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aula-card small{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- faixa de status ---------- */
.status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--linha);border-radius:var(--raio2);background:var(--sup);overflow:hidden}
.status>section{padding:20px 22px;display:flex;flex-direction:column;gap:9px;min-width:0;border-left:1px solid var(--linha)}
.status>section:first-child{border-left:0}
.status .grande{font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.status a.mais{font-size:13px;color:var(--tx2);font-weight:500;margin-top:auto}
.status a.mais:hover{color:var(--tx)}
@media (max-width:1100px){.status{grid-template-columns:repeat(2,minmax(0,1fr))}.status>section:nth-child(3){border-left:0}.status>section:nth-child(n+3){border-top:1px solid var(--linha)}}
@media (max-width:560px){.status>section{padding:16px;gap:7px}.status .grande{font-size:24px}.status .pct,.status p{font-size:12.5px}.status>section:nth-child(4){display:none}.status>section:nth-child(3){grid-column:1/-1;border-top:1px solid var(--linha)}}

/* ---------- cursos ---------- */
.curso-card{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:300px;padding:26px;border-radius:var(--raio2);overflow:hidden;border:1px solid var(--linha);color:var(--tx);background:var(--sup)}
.curso-card .fundo{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.curso-card .mosaico{position:absolute;inset:0;z-index:-2;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;transform:rotate(-4deg) scale(1.25);opacity:.55}
.curso-card .mosaico img{width:100%;aspect-ratio:299/580;object-fit:cover;border-radius:4px;display:block}
.curso-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,9,9,.96) 8%,rgba(10,9,9,.35) 60%,rgba(10,9,9,.1))}
.curso-card h2{font-family:var(--serif);font-size:clamp(26px,2.8vw,34px);font-weight:600;letter-spacing:0}
.curso-card p{color:var(--tx2);font-size:14px;max-width:52ch}
.curso-card .barra-p{max-width:340px}
.curso-card:hover{border-color:var(--linha2);color:var(--tx)}
.curso-card:hover .fundo{transform:scale(1.02)}
.curso-card .fundo{transition:transform .6s cubic-bezier(.2,.7,.2,1)}

/* ---------- módulo ---------- */
.modulo-grade{display:grid;grid-template-columns:clamp(200px,22vw,290px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.modulo-grade .capa{position:sticky;top:calc(var(--topo) + 24px);aspect-ratio:299/580;border-radius:var(--raio2);overflow:hidden;box-shadow:var(--sombra);border:1px solid var(--linha2);background:linear-gradient(160deg,var(--vinho2),#1a0a0d)}
.modulo-grade .capa img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.modulo-grade{grid-template-columns:1fr;gap:20px}.modulo-grade .capa{position:relative;top:0;width:132px}}
.lista-aulas{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
.lista-aulas a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 8px;border-bottom:1px solid var(--linha);color:var(--tx);transition:background .15s}
.lista-aulas a:hover{background:rgba(237,227,207,.035);color:var(--tx)}
.lista-aulas .n{font-family:var(--disp);font-size:14px;color:var(--mudo);text-align:center;font-variant-numeric:tabular-nums}
.lista-aulas .t{display:flex;flex-direction:column;gap:6px;min-width:0}
.lista-aulas .t b{font-weight:500;font-size:15px}
.lista-aulas .t .barra-p{max-width:220px}
.lista-aulas .d{font-size:13px;color:var(--mudo);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:10px}
.lista-aulas a.feita .n{color:var(--ok)}
.lista-aulas a.atual{background:var(--rubi-f)}
.lista-aulas a.atual .n{color:var(--rubi)}
.ok-ic{width:18px;height:18px;border-radius:50%;background:var(--ok);display:inline-block;position:relative;margin:0 auto}
.ok-ic::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #0a0909;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- busca (lista simples) ---------- */
.aulas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.aulas a{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:11px 8px;border-radius:6px;color:var(--tx)}
.aulas a:hover{background:var(--sup2)}
.aulas .ic{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--linha2);display:inline-block;position:relative}
.aulas .dur{font-size:13px;color:var(--mudo);font-variant-numeric:tabular-nums}

/* ---------- aula ---------- */
.aula-grade{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
@media (max-width:1100px){.aula-grade{grid-template-columns:1fr}}
.player{background:#000;border-radius:var(--raio2);overflow:hidden;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;border:1px solid var(--linha);box-shadow:var(--sombra)}
.player video{width:100%;height:100%;display:block;background:#000}
.player .sem{color:var(--tx2);padding:24px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.aula-topo{display:flex;flex-direction:column;gap:8px}
.aula-topo h1{font-size:clamp(26px,3.2vw,38px)}
.aula-topo p{color:var(--tx2)}
.playlist{background:var(--sup);border:1px solid var(--linha);border-radius:var(--raio2);overflow:hidden}
.playlist .cab{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;padding:14px;border-bottom:1px solid var(--linha);color:var(--tx)}
.playlist .cab .mini{aspect-ratio:299/580;border-radius:5px;overflow:hidden;background:var(--vinho2)}
.playlist .cab .mini img{width:100%;height:100%;object-fit:cover;display:block}
.playlist .cab b{font-size:14px;line-height:1.35;display:block}
.playlist ol{list-style:none;margin:0;padding:6px;max-height:440px;overflow-y:auto}
.playlist ol a{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 8px;border-radius:6px;color:var(--tx2);font-size:13.5px;line-height:1.35}
.playlist ol a:hover{background:var(--sup2);color:var(--tx)}
.playlist ol a.atual{background:var(--rubi-f);color:var(--tx)}
.playlist ol .n{font-size:12px;color:var(--mudo);text-align:center;font-variant-numeric:tabular-nums}
.playlist ol a.feita .n{color:var(--ok)}
.playlist ol .d{font-size:12px;color:var(--mudo);font-variant-numeric:tabular-nums}
.lista-mat{display:flex;flex-direction:column;gap:6px}
.lista-mat a{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--linha);border-radius:var(--raio);color:var(--tx);background:var(--bg2);font-size:14px}
.lista-mat a:hover{border-color:var(--linha2)}

/* ---------- tabelas ---------- */
.tab-wrap{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio2);background:var(--sup)}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:620px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--linha);vertical-align:top}
th{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mudo);font-weight:600;background:var(--bg2)}
tr:last-child td{border-bottom:0}
.num{text-align:right}
.valor-pos{color:var(--ok)}.valor-neg{color:#ecbab4}

/* ---------- abas ---------- */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--linha);overflow-x:auto}
.abas a{padding:11px 14px;color:var(--tx2);font-weight:600;font-size:14px;border-bottom:2px solid transparent;white-space:nowrap}
.abas a:hover{color:var(--tx)}
.abas a.ativo{color:var(--tx);border-color:var(--rubi)}

/* ---------- números grandes (só onde o número é o assunto) ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--raio2);overflow:hidden}
.kpi{background:var(--sup);padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.kpi b{display:block;font-size:32px;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.kpi small{font-size:12px}
.kpi>small:first-child{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}

/* ---------- login ---------- */
.porta{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr)}
.porta-arte{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;padding:56px}
.porta-arte .parede{position:absolute;inset:-10%;z-index:-2;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;transform:rotate(-6deg);opacity:.5}
.porta-arte .parede img{width:100%;aspect-ratio:299/580;object-fit:cover;border-radius:8px;display:block}
.porta-arte::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 70% at 30% 90%,rgba(77,7,18,.85),transparent 70%),linear-gradient(90deg,rgba(10,9,9,.35),var(--bg) 98%),linear-gradient(0deg,rgba(10,9,9,.9),rgba(10,9,9,.2) 60%)}
.porta-arte blockquote{margin:0;max-width:30ch;font-family:var(--serif);font-size:clamp(26px,2.6vw,36px);line-height:1.15;color:var(--marfim)}
.porta-arte blockquote small{display:block;margin-top:14px;font-family:var(--txt);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx2)}
.porta-lado{display:grid;place-items:center;padding:40px max(20px,env(safe-area-inset-left));background:var(--bg)}
.porta-caixa{width:min(100%,400px);display:flex;flex-direction:column;gap:28px}
.porta-caixa .brasao-login{width:150px;height:150px;margin:0 auto -6px;background:url(marca/brasao_completo.png) center/contain no-repeat}
.porta-caixa h1{font-size:34px;text-align:center}
.porta-caixa .sub{color:var(--tx2);text-align:center;font-size:14px;margin-top:-18px}
.porta-caixa form{display:flex;flex-direction:column;gap:16px}
.porta-caixa .btn.ouro{min-height:48px;font-size:15px}
.porta-caixa .nota{font-size:13px;color:var(--mudo);text-align:center;border-top:1px solid var(--linha);padding-top:20px}
.porta.so{display:grid;place-items:center;grid-template-columns:1fr;padding:24px}
@media (max-width:900px){.porta{grid-template-columns:1fr}.porta-arte{display:none}}

/* ---------- carregamento ---------- */
.carregando-tela{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:var(--mudo);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.carregando-tela .brasao{width:110px;height:86px;animation:respira 1.8s ease-in-out infinite}
@keyframes respira{50%{opacity:.45}}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:calc(var(--barra) + 16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;background:var(--sup3);border:1px solid var(--linha2);padding:11px 18px;border-radius:var(--raio);font-size:14px;max-width:min(92vw,520px);box-shadow:var(--sombra)}
@media (min-width:861px){#toast{bottom:28px}}

/* ---------- missão ---------- */
.rubrica{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--tx2);font-size:14px}
.exemplo{background:var(--bg2);border:1px solid var(--linha);border-radius:var(--raio);padding:14px;font-size:14px;color:var(--tx2);display:flex;flex-direction:column;gap:4px}
.form-grade{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:700px){.form-grade{grid-template-columns:1fr}}
.feedback{border-left:2px solid var(--rubi);background:var(--rubi-f);padding:12px 14px;border-radius:0 var(--raio) var(--raio) 0;font-size:14px}

/* ---------- jogo ---------- */
.jogo-moldura{width:100%;height:calc(100vh - 190px);min-height:420px;border:1px solid var(--linha);border-radius:var(--raio2);background:#000}
@media (max-width:860px){.jogo-moldura{height:calc(100vh - 230px)}}

/* ---------- kit ---------- */
.kit-prev{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.kit-prev canvas{width:min(100%,300px);height:auto;border-radius:var(--raio);border:1px solid var(--linha)}
.kit-prev canvas.story{width:min(100%,220px)}

/* ---------- menu "mais" ---------- */
.menu-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:10px}
.menu-lista a{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--raio2);background:var(--sup);border:1px solid var(--linha);color:var(--tx);font-weight:500}
.menu-lista a:hover{background:var(--sup2);border-color:var(--linha2);color:var(--tx)}
.menu-lista svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;color:var(--tx2)}

.codigo{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;background:var(--bg2);border:1px solid var(--linha2);border-radius:var(--raio);padding:9px 11px;word-break:break-all;user-select:all}
.oculto-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rodape-site{border-top:1px solid var(--linha);padding:28px var(--lado);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--mudo);font-size:12px;letter-spacing:.04em}
.rodape-site .marca b{font-size:11px}
@media (max-width:860px){.rodape-site{display:none}}

/* ---------- Aristoland: atalhos para a área de membros ---------- */
.jogo-atalhos{display:flex;gap:8px;flex-wrap:wrap}
.jogo-atalhos .btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;line-height:24px}