:root{--navy:#0B1E3D;--navy2:#16325F;--navy3:#24497F;--gold:#D9A22B;--gold2:#B8860F;
--paper:#FFF;--wash:#F4F6FA;--ink:#1A2438;--body:#41506B;--mute:#8492AC;--line:#E2E8F2;
--green:#1D8A63;--greenw:#E7F4EE;--clay:#B03A22;--clayw:#FBEDE9;
--ff:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;--fd:'Oswald','Arial Narrow',sans-serif;
--r:14px;--sh:0 4px 20px rgba(11,30,61,.07);--sh2:0 16px 44px rgba(11,30,61,.16)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff);background:var(--wash);color:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.hide{display:none!important}

/* ---------- botões ---------- */
.btn{font-family:var(--fd);text-transform:uppercase;letter-spacing:.1em;font-size:13px;padding:13px 26px;
border-radius:10px;cursor:pointer;border:0;display:inline-block;text-decoration:none;transition:.2s;font-weight:600}
.btn.p{background:var(--gold);color:var(--navy)}
.btn.p:hover{background:#F0C462;transform:translateY(-2px);box-shadow:0 8px 22px rgba(217,162,43,.35)}
.btn.g{background:transparent;color:#DCE5F3;border:1px solid rgba(255,255,255,.3)}
.btn.g:hover{border-color:var(--gold);color:var(--gold)}
.btn.d{background:var(--navy);color:#fff}
.btn.d:hover{background:var(--navy2)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ---------- ENTRADA ---------- */
#entrada{min-height:100vh;display:grid;place-items:center;padding:26px;
background:linear-gradient(160deg,var(--navy),#123058 55%,#1A3E70)}
.card-ent{width:min(460px,100%);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
border-radius:18px;padding:38px 32px;backdrop-filter:blur(8px)}
.card-ent .kick{font-family:var(--fd);color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:11px}
.card-ent h1{font-family:var(--fd);color:#fff;font-size:33px;text-transform:uppercase;line-height:1.02;margin:9px 0 10px}
.card-ent p.sub{color:#A9BEDD;font-size:14.5px;margin-bottom:22px}
.card-ent label{display:block;font-family:var(--fd);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
color:#8FA3C4;margin:14px 0 5px}
.card-ent input{width:100%;padding:12px 14px;border-radius:9px;border:1px solid rgba(255,255,255,.2);
background:rgba(255,255,255,.08);color:#fff;font-family:var(--ff);font-size:15px;outline:none;transition:.2s}
.card-ent input:focus{border-color:var(--gold);background:rgba(255,255,255,.12)}
.card-ent input.erro{border-color:#E88B72;background:rgba(232,139,114,.1)}
.card-ent .msg-erro{color:#F0A78F;font-size:12.5px;margin-top:5px;display:none}
.card-ent .msg-erro.on{display:block}
.card-ent .btn{width:100%;margin-top:24px;padding:14px}
.card-ent .lgpd{font-size:11.5px;color:#7C90B2;margin-top:16px;line-height:1.55}
.volta{color:#8FA3C4;font-size:13px;text-align:center;margin-top:16px}
.volta b{color:var(--gold);cursor:pointer;text-decoration:underline}

/* ---------- TOPO ---------- */
.topo{position:fixed;top:0;left:0;right:0;height:58px;background:rgba(11,30,61,.97);backdrop-filter:blur(10px);
z-index:200;display:flex;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid rgba(217,162,43,.22)}
.topo .marca{font-family:var(--fd);color:#fff;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.topo .marca i{color:var(--gold);font-style:normal}
.topo .sp{flex:1}
.topo .quem{color:#A9BEDD;font-size:13px;display:flex;align-items:center;gap:9px}
.topo .quem .av{width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--navy);
display:grid;place-items:center;font-family:var(--fd);font-size:13px}
.topo .sair{background:none;border:1px solid rgba(255,255,255,.22);color:#C6D3E8;padding:6px 12px;
border-radius:7px;cursor:pointer;font-family:var(--fd);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.topo .sair:hover{border-color:var(--gold);color:var(--gold)}
#prog{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--gold),#F0C462);width:0;z-index:300;transition:width .15s}

/* ---------- TRILHA ---------- */
#trilha{padding:96px 22px 70px;max-width:900px;margin:0 auto}
.tr-head h1{font-family:var(--fd);font-size:clamp(28px,4vw,44px);color:var(--navy);text-transform:uppercase;line-height:1.02}
.tr-head p{font-size:16.5px;color:var(--body);margin-top:8px;max-width:38em}
.tr-prog{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:17px 20px;margin:22px 0 26px;
display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:var(--sh)}
.tr-prog .barra{flex:1;min-width:180px;height:9px;background:var(--wash);border-radius:5px;overflow:hidden}
.tr-prog .barra i{display:block;height:100%;background:var(--green);transition:width .7s cubic-bezier(.2,1,.35,1)}
.tr-prog .txt{font-family:var(--fd);font-size:14px;color:var(--navy);text-transform:uppercase;letter-spacing:.06em}
.aulas{display:flex;flex-direction:column;gap:11px}
.aula-c{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:17px 20px;
display:flex;align-items:center;gap:17px;box-shadow:var(--sh);transition:.22s;flex-wrap:wrap}
.aula-c.liberada{cursor:pointer}
.aula-c.liberada:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--gold)}
.aula-c.travada{opacity:.55}
.aula-c .num{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-family:var(--fd);
font-size:20px;flex:0 0 auto;background:var(--wash);color:var(--mute)}
.aula-c.ok .num{background:var(--green);color:#fff}
.aula-c.repro .num{background:var(--clay);color:#fff}
.aula-c.atual .num{background:var(--gold);color:var(--navy)}
.aula-c .info{flex:1;min-width:170px}
.aula-c .tit{font-family:var(--fd);font-size:18px;color:var(--navy);text-transform:uppercase;line-height:1.1}
.aula-c .des{font-size:13.5px;color:var(--mute);margin-top:2px}
.aula-c .est{font-family:var(--fd);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
padding:5px 12px;border-radius:18px}
.est.e-ok{background:var(--greenw);color:var(--green)}
.est.e-repro{background:var(--clayw);color:var(--clay)}
.est.e-atual{background:#FDF4E3;color:var(--gold2)}
.est.e-trava{background:var(--wash);color:var(--mute)}

/* ---------- AULA ---------- */
#aula{padding:82px 0 0}
.a-head{background:linear-gradient(160deg,var(--navy),#16325F);color:#fff;padding:40px 6vw 34px}
.a-head .volta-b{background:none;border:0;color:#8FA3C4;font-family:var(--fd);font-size:11.5px;
letter-spacing:.1em;text-transform:uppercase;cursor:pointer;margin-bottom:14px;padding:0}
.a-head .volta-b:hover{color:var(--gold)}
.a-head .kick{font-family:var(--fd);color:var(--gold);letter-spacing:.18em;text-transform:uppercase;font-size:11.5px}
.a-head h1{font-family:var(--fd);font-size:clamp(28px,4.4vw,50px);text-transform:uppercase;line-height:1;margin-top:7px}
.a-head p{color:#A9BEDD;font-size:16px;margin-top:11px;max-width:40em}
.conteudo{max-width:820px;margin:0 auto;padding:36px 22px 40px}
.bloco{margin-bottom:30px;scroll-margin-top:78px}
.bloco.oculto{display:none}
.bloco h2{font-family:var(--fd);font-size:clamp(22px,3vw,32px);color:var(--navy);text-transform:uppercase;
line-height:1.06;margin-bottom:13px;padding-left:16px;position:relative}
.bloco h2::before{content:"";position:absolute;left:0;top:.14em;bottom:.14em;width:5px;background:var(--gold);border-radius:3px}
.bloco h3{font-family:var(--fd);font-size:18px;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;margin:22px 0 9px}
.bloco p{margin-bottom:13px}
.bloco p.lead{font-size:18px;color:var(--ink)}
.bloco ul{margin:0 0 14px 20px}.bloco li{margin-bottom:7px}
.bloco strong{color:var(--ink)}

.caixa{background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy3);border-radius:0 var(--r) var(--r) 0;
padding:17px 20px;margin:18px 0;box-shadow:var(--sh)}
.caixa h4{font-family:var(--fd);font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);margin-bottom:6px}
.caixa.g{border-left-color:var(--gold);background:#FFFDF6}.caixa.g h4{color:var(--gold2)}
.caixa.r{border-left-color:var(--clay);background:var(--clayw)}.caixa.r h4{color:var(--clay)}
.caixa.v{border-left-color:var(--green);background:var(--greenw)}.caixa.v h4{color:var(--green)}
.caixa p:last-child{margin-bottom:0}

.grade{display:grid;gap:12px;margin:18px 0}
.g2{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.mini{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px;border-top:3px solid var(--gold)}
.mini .n{font-family:var(--fd);font-size:23px;color:var(--gold);line-height:1}
.mini b{display:block;color:var(--navy);margin:3px 0 5px;font-size:15px}
.mini p{font-size:13.5px;color:var(--mute);margin:0}

.chat{display:flex;flex-direction:column;gap:8px;margin:18px 0;max-width:560px}
.msg{max-width:88%;padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.5;
background:#fff;border:1px solid var(--line);color:var(--navy);border-bottom-left-radius:5px;box-shadow:var(--sh)}
.msg.eu{background:var(--navy2);color:#fff;border-color:transparent;align-self:flex-end;
border-bottom-left-radius:16px;border-bottom-right-radius:5px}
.msg.ruim{background:var(--clayw);border-color:#E8BFB4;color:#7C2D19}
.msg.boa{background:var(--greenw);border-color:#B7DCC7;color:#14654A}

figure.fig{margin:22px 0;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh2);background:#fff}
figure.fig figcaption{font-size:12.5px;color:var(--mute);padding:9px 14px;text-align:center}

/* ---------- CHECKPOINT ---------- */
.check{background:linear-gradient(150deg,#10254A,#1B3A6B);border-radius:var(--r);padding:26px;margin:30px 0;
color:#fff;box-shadow:var(--sh2)}
.check .tag{font-family:var(--fd);color:var(--gold);letter-spacing:.16em;text-transform:uppercase;font-size:11px}
.check .perg{font-size:19px;color:#fff;margin:9px 0 17px;line-height:1.4}
.check .ops{display:flex;flex-direction:column;gap:9px}
.check .op{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);border-radius:11px;
padding:13px 16px;color:#DCE5F3;text-align:left;cursor:pointer;font-family:var(--ff);font-size:15px;
line-height:1.45;transition:.18s}
.check .op:hover:not(:disabled){border-color:var(--gold);background:rgba(217,162,43,.12)}
.check .op.certa{border-color:#4ADE9A;background:rgba(74,222,154,.16);color:#fff}
.check .op.errada{border-color:#F09A80;background:rgba(240,154,128,.14);color:#FFD9CE}
.check .fb{margin-top:15px;padding:14px 16px;border-radius:11px;font-size:15px;line-height:1.5;display:none}
.check .fb.on{display:block;animation:sobe .3s ease}
.check .fb.v{background:rgba(74,222,154,.14);border-left:3px solid #4ADE9A;color:#D7FFEC}
.check .fb.x{background:rgba(240,154,128,.14);border-left:3px solid #F09A80;color:#FFE3D9}
@keyframes sobe{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.travado{text-align:center;padding:26px;color:var(--mute);font-family:var(--fd);letter-spacing:.09em;
text-transform:uppercase;font-size:12.5px}
.travado::before{content:"⌁";display:block;font-size:26px;margin-bottom:7px;color:var(--line)}

/* ---------- TESTE ---------- */
.t-abre{background:linear-gradient(150deg,var(--gold),#C08A18);border-radius:var(--r);padding:30px;
margin:34px 0;text-align:center;color:var(--navy)}
.t-abre h2{font-family:var(--fd);font-size:30px;text-transform:uppercase;line-height:1;padding:0}
.t-abre h2::before{display:none}
.t-abre p{color:#4A3407;margin:10px auto 18px;max-width:34em}
#teste{max-width:760px;margin:0 auto;padding:90px 22px 70px}
.t-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:14px;flex-wrap:wrap}
.t-topo .qn{font-family:var(--fd);color:var(--gold2);letter-spacing:.13em;text-transform:uppercase;font-size:12px}
.t-topo .barra{flex:1;min-width:130px;height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.t-topo .barra i{display:block;height:100%;background:var(--gold);transition:width .4s}
.q-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--sh2)}
.q-card .perg{font-size:20px;color:var(--ink);line-height:1.4;margin-bottom:20px}
.q-ops{display:flex;flex-direction:column;gap:10px}
.q-op{background:var(--wash);border:2px solid var(--line);border-radius:11px;padding:14px 17px;
text-align:left;cursor:pointer;font-family:var(--ff);font-size:15.5px;line-height:1.45;color:var(--navy);transition:.18s}
.q-op:hover:not(:disabled){border-color:var(--navy3);transform:translateY(-2px)}
.q-op.certa{border-color:var(--green);background:var(--greenw)}
.q-op.errada{border-color:var(--clay);background:var(--clayw)}
.q-fb{margin-top:17px;padding:16px 18px;border-radius:11px;display:none}
.q-fb.on{display:block;animation:sobe .3s ease}
.q-fb.v{background:var(--greenw);border-left:4px solid var(--green)}
.q-fb.x{background:var(--clayw);border-left:4px solid var(--clay)}
.q-fb b{display:block;font-family:var(--fd);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;font-size:14px}
.q-fb.v b{color:var(--green)}.q-fb.x b{color:var(--clay)}
.q-fb .rever{display:block;width:fit-content;margin-top:14px;font-family:var(--fd);font-size:11.5px;letter-spacing:.09em;
text-transform:uppercase;background:var(--navy);color:#fff;padding:8px 15px;border-radius:8px;cursor:pointer;border:0}
.q-fb .rever:hover{background:var(--navy2)}
.q-nav{margin-top:20px;display:flex;justify-content:flex-end}

/* ---------- RESULTADO ---------- */
#result{max-width:700px;margin:0 auto;padding:100px 22px 70px;text-align:center}
.r-nota{font-family:var(--fd);font-size:82px;line-height:1;margin:14px 0}
.r-nota.ok{color:var(--green)}.r-nota.bad{color:var(--clay)}
#result h1{font-family:var(--fd);font-size:34px;text-transform:uppercase;color:var(--navy)}
#result .sub{font-size:17px;margin:10px auto 22px;max-width:32em}
.r-erros{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:22px 0;text-align:left}
.r-erros h4{font-family:var(--fd);text-transform:uppercase;letter-spacing:.06em;color:var(--clay);font-size:14px;margin-bottom:11px}
.r-erros .item{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.r-erros .item:last-child{border:0}
.r-erros .item .x{color:var(--clay);flex:0 0 auto}
.r-erros .rever{background:var(--wash);border:1px solid var(--line);border-radius:7px;padding:5px 11px;
font-family:var(--fd);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;color:var(--navy);
margin-left:auto;flex:0 0 auto}
.r-erros .rever:hover{background:var(--gold);border-color:var(--gold)}
.r-acoes{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.aviso-env{font-size:12.5px;color:var(--mute);margin-top:18px}
.aviso-env.falhou{color:var(--clay)}

@media (max-width:760px){
 .topo{gap:9px;padding:0 14px}
 .topo .marca{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
 .topo .quem span:not(.av){display:none}
 .topo .sair{padding:6px 10px}
 .a-head{padding:32px 22px 28px}
 .conteudo{padding:28px 20px 34px}
 .check{padding:20px}
 .q-card{padding:20px}
 .r-nota{font-size:62px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ==========================================================
   HUB DAS ACADEMIAS E ÁREA DA ACADEMIA
   ========================================================== */
.hub{min-height:100vh;background:
  radial-gradient(circle at 84% 12%,rgba(217,162,43,.16),transparent 45%),
  radial-gradient(circle at 8% 92%,rgba(36,73,127,.5),transparent 52%),
  linear-gradient(160deg,var(--navy) 0%,#123058 58%,#1A3E70 100%);
  color:#fff;padding:70px 6vw 80px}
.hub-in{max-width:1080px;margin:0 auto}
.hub .kick{font-family:var(--fd);color:var(--gold);letter-spacing:.22em;text-transform:uppercase;
font-size:12px;margin-bottom:14px}
.hub h1{font-family:var(--fd);font-weight:700;font-size:clamp(36px,5.6vw,72px);line-height:.98;
text-transform:uppercase;letter-spacing:-.01em}
.hub h1 em{font-style:normal;color:var(--gold)}
.hub .intro{color:#C3D2E8;font-size:clamp(15px,1.4vw,19px);max-width:34em;margin-top:16px}
.hub-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
gap:16px;margin-top:44px}
.hub-c{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;
padding:26px 24px 22px;text-decoration:none;color:#fff;display:flex;flex-direction:column;
transition:.24s cubic-bezier(.2,1,.35,1);position:relative;overflow:hidden}
.hub-c.ativa:hover{transform:translateY(-6px);border-color:var(--gold);
background:rgba(255,255,255,.1);box-shadow:0 20px 50px rgba(0,0,0,.32)}
.hub-c .ic{font-size:26px;color:var(--gold);line-height:1;margin-bottom:14px}
.hub-c h2{font-family:var(--fd);font-size:26px;text-transform:uppercase;line-height:1.02;margin-bottom:8px}
.hub-c p{color:#A9BEDD;font-size:14px;line-height:1.5;flex:1}
.hub-c .rod{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px;
padding-top:15px;border-top:1px solid rgba(255,255,255,.12)}
.hub-c .partes{font-size:12px;color:#8FA3C4}
.hub-c .seta{font-family:var(--fd);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.hub-c.off{opacity:.5;cursor:default}
.hub-c.off .seta{color:#8FA3C4}
.hub-c.off .ic{color:#8FA3C4}
.hub .rodape{margin-top:52px;font-size:12px;color:#7C90B2}

/* ---- área da academia ---- */
.area{min-height:100vh;background:var(--wash)}
.area-topo{background:linear-gradient(160deg,var(--navy),#16325F);color:#fff;padding:56px 6vw 46px}
.area-topo .voltar{display:inline-flex;align-items:center;gap:7px;color:#A9BEDD;text-decoration:none;
font-family:var(--fd);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px}
.area-topo .voltar:hover{color:var(--gold)}
.area-topo .kick{font-family:var(--fd);color:var(--gold);letter-spacing:.2em;text-transform:uppercase;
font-size:11.5px;margin-bottom:10px}
.area-topo h1{font-family:var(--fd);font-size:clamp(32px,5vw,62px);text-transform:uppercase;line-height:.98}
.area-topo h1 em{font-style:normal;color:var(--gold)}
.area-topo p{color:#B9C9E4;font-size:clamp(14px,1.3vw,18px);max-width:36em;margin-top:14px}
.area-corpo{max-width:1000px;margin:0 auto;padding:44px 6vw 80px}
.area-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.pc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px 24px;
text-decoration:none;color:var(--ink);display:flex;flex-direction:column;
transition:.24s cubic-bezier(.2,1,.35,1);box-shadow:var(--sh)}
.pc:hover{transform:translateY(-6px);box-shadow:var(--sh2);border-color:var(--gold)}
.pc .tag{font-family:var(--fd);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--gold2);margin-bottom:10px}
.pc h2{font-family:var(--fd);font-size:28px;text-transform:uppercase;line-height:1.02;
color:var(--navy);margin-bottom:9px}
.pc p{color:var(--body);font-size:14.5px;line-height:1.55;flex:1}
.pc ul{list-style:none;margin:14px 0 0;padding:0}
.pc li{font-size:13px;color:var(--mute);padding-left:16px;position:relative;margin-bottom:5px}
.pc li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;
background:var(--gold)}
.pc .cta{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);
font-family:var(--fd);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);
display:flex;align-items:center;justify-content:space-between;gap:10px}
.pc .cta .s{color:var(--gold2)}
.pc.destaque{border-color:var(--gold);background:linear-gradient(180deg,#FFFDF6,#fff)}
.area-nota{margin-top:26px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);
border-radius:0 12px 12px 0;padding:16px 20px;font-size:14px;color:var(--body)}
.area-nota b{color:var(--navy)}
@media(max-width:640px){.hub{padding:52px 6vw 60px}.area-topo{padding:40px 6vw 34px}}

/* volta do treinamento para a área da academia */
.topo .marca-lk{font-family:var(--fd);color:#fff;font-size:14px;letter-spacing:.06em;
text-transform:uppercase;text-decoration:none;transition:.18s}
.topo .marca-lk i{color:var(--gold);font-style:normal}
.topo .marca-lk:hover{color:var(--gold)}

/* voltar, na tela de entrada */
.card-ent .ent-voltar{display:inline-block;color:#8FA3C4;text-decoration:none;font-family:var(--fd);
font-size:11px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:18px;transition:.18s}
.card-ent .ent-voltar:hover{color:var(--gold)}

/* ==========================================================
   VÍDEO DA AULA — etapa 1
   ========================================================== */
.videobox{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
margin-bottom:26px;box-shadow:var(--sh);border-top:4px solid var(--gold)}
.videobox.visto{border-top-color:var(--green)}
.v-topo{display:flex;align-items:center;gap:12px;padding:14px 20px 12px;flex-wrap:wrap}
.v-etapa{font-family:var(--fd);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--gold2);flex:1}
.videobox.visto .v-etapa{color:var(--green)}
.v-selo{font-family:var(--fd);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--green);background:var(--greenw);padding:4px 11px;border-radius:20px}
.v-selo:empty{display:none}
.v-frame{position:relative;padding-top:56.25%;background:#0B1E3D}
.v-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.v-pe{padding:16px 20px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.v-pe p{flex:1;min-width:220px;font-size:14px;color:var(--mute);margin:0;line-height:1.5}
.v-pe .btn{flex:0 0 auto}
.videobox.visto .v-pe .btn{background:transparent;color:var(--mute);border:1px solid var(--line);
font-weight:400}
.videobox.visto .v-pe .btn:hover{border-color:var(--green);color:var(--green);transform:none;box-shadow:none}
@media(max-width:640px){
 .v-pe{flex-direction:column;align-items:stretch}
 .v-pe .btn{width:100%}
}



/* ============================================================
   A FAIXA DO PRAZO
   Só para quem entrou pelo processo seletivo. Fixa no topo, com a
   frase do Daniel: o contador sozinho pressiona sem dizer para quê, e
   pressão sem motivo cansa em vez de mover.
   ============================================================ */
.faixa-prazo {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 16px;
  background: linear-gradient(90deg, #0b1728, #14243c);
  border-bottom: 1px solid rgba(204, 176, 84, .35);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
}
.faixa-prazo.hide { display: none; }

.fp-relogio {
  font-weight: 700;
  color: #ccb054;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fp-msg { color: #cdd6e0; }

/* Faltando menos de um dia o contador passa a mostrar os segundos, e a
   faixa muda de cor junto: o número muda de significado, e a cor
   avisa disso sem precisar de outra frase. */
.faixa-prazo.apertando {
  background: linear-gradient(90deg, #2b1517, #3a1c1f);
  border-bottom-color: rgba(240, 113, 106, .5);
}
.faixa-prazo.apertando .fp-relogio { color: #f0716a; }

/* A faixa é fixa, então o conteúdo precisa descer — senão ela cobre o
   topo da página em vez de somar a ele. */
body.com-prazo #topo { top: 42px; }
body.com-prazo { padding-top: 42px; }

.dica-senha {
  margin: 4px 0 18px;
  font-size: 13px;
  line-height: 1.55;
  color: #7c8794;
}

@media (max-width: 560px) {
  .faixa-prazo { font-size: 12.5px; gap: 6px; padding: 8px 12px; }
  body.com-prazo, body.com-prazo #topo { padding-top: 0; }
  body.com-prazo #topo { top: 56px; }
  body.com-prazo { padding-top: 56px; }
}


/* ============================================================
   A TRAVA DO VÍDEO E A REVISÃO OBRIGATÓRIA (03/09/2026)
   ============================================================ */

/* A regra do vídeo dita em uma linha, antes de a pessoa precisar dela.
   Instrução que só aparece depois do erro chega tarde. */
.v-regra{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--mute)}
.v-regra-alerta{color:var(--gold2);font-weight:500}

/* O ponto revisto sai de vermelho e vira verde: o progresso da tarefa
   se vê sem ler. */
#r-lista .item.revisto{opacity:.62}
#r-lista .item.revisto .x{color:var(--green)}

/* A linha que diz o que falta para o botão acender. Ela existe por
   pedido do Daniel: botão apagado sem explicação atrapalha mais que
   ajuda. Cinza, não vermelho — vermelho diz "você errou", cinza diz
   "continua". */
.r-falta{margin:10px 0 14px;font-size:13.5px;line-height:1.55;color:var(--mute)}
.r-falta.ok{color:var(--green)}
.r-falta:empty{display:none}

/* Botão apagado que ainda se lê: some do caminho sem sumir da tela,
   porque é ele que carrega a instrução do que falta. */
.btn[disabled]{opacity:.5;cursor:default;pointer-events:none}

/* Prazo pausado: quem espera uma aula que ainda nao existe nao pode
   ver o relogio correndo contra ele. Dourado e nao vermelho -- e um
   estado favoravel, nao um alerta. */
#fp-relogio.pausado{color:var(--gold2);font-variant-numeric:normal}

/* O campo da senha com o olho dentro. */
.campo-senha{position:relative}
.campo-senha input{width:100%;padding-right:82px}
.olho{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;padding:8px 10px;
  font:500 12px/1 var(--ff);color:var(--mute);letter-spacing:.03em;
}
.olho:hover{color:var(--gold2)}

/* ==========================================================
   O TESTE DISC — a tela

   Vai no FIM do arquivo de propósito. Neste projeto, regra
   escrita depois vence a de cima quando a especificidade é a
   mesma — foi assim que a faixa de menu do celular ficou
   quebrada por três dias em 28/08.
   ========================================================== */

#disc{padding:96px 22px 70px;max-width:760px;margin:0 auto}

/* ---------- a abertura ---------- */
.dc-abre,.dc-cena,.dc-fim{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:34px 30px}
.dc-kick{font-family:var(--fd);color:var(--gold2);letter-spacing:.2em;
  text-transform:uppercase;font-size:11px;display:block}
.dc-abre h1,.dc-fim h1{font-family:var(--fd);color:var(--ink);font-size:32px;
  text-transform:uppercase;line-height:1.05;margin:8px 0 22px;text-wrap:balance}

/* O aviso de "não existe resposta certa" é o quadro mais importante
   desta tela, e por isso ele tem cor própria e fica ACIMA das
   instruções — quem pula a leitura pula as instruções, não isto. */
.dc-aviso{background:var(--greenw);border:1px solid rgba(29,138,99,.25);
  border-left:4px solid var(--green);border-radius:10px;padding:18px 20px;margin-bottom:24px}
.dc-aviso strong{display:block;color:var(--green);font-size:16px;margin-bottom:8px}
.dc-aviso p{font-size:14.5px;color:var(--body);margin-bottom:9px}
.dc-aviso p:last-child{margin-bottom:0}
.dc-aviso b{color:var(--ink)}

.dc-como h2{font-family:var(--fd);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.dc-como ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.dc-como li{position:relative;padding-left:22px;font-size:14.5px}
.dc-como li::before{content:"";position:absolute;left:4px;top:10px;
  width:6px;height:6px;border-radius:50%;background:var(--gold)}
.dc-como li b,.dc-dica b{color:var(--ink)}
.dc-dica{font-size:14px;color:var(--mute);margin-bottom:8px}
.dc-abre .btn{margin-top:22px;width:100%;padding:15px}

/* ---------- o cenário ---------- */
.dc-topo{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.dc-conta{font-family:var(--fd);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.dc-barra{flex:1;min-width:0;height:4px;background:var(--line);border-radius:3px;overflow:hidden}
.dc-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#F0C462);
  transition:width .3s}

.dc-tit{font-family:var(--fd);font-size:21px;text-transform:uppercase;
  color:var(--ink);line-height:1.15;margin-bottom:8px;text-wrap:balance}
.dc-sit{font-size:16px;color:var(--body);margin-bottom:20px}
.dc-ordem{font-size:13.5px;color:var(--mute);padding-bottom:14px;
  border-bottom:1px solid var(--line);margin-bottom:16px}
.dc-ordem b{color:var(--gold2)}

.dc-ops{display:flex;flex-direction:column;gap:10px}

/* A opção é um botão de verdade: teclado e leitor de tela funcionam
   sem nada a mais. */
.dc-op{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;
  background:var(--wash);border:1.5px solid var(--line);border-radius:11px;
  padding:15px 16px;cursor:pointer;font-family:var(--ff);font-size:15.5px;
  line-height:1.5;color:var(--body);transition:border-color .15s,background .15s}

/* O quadradinho do número. Vazio, ele mostra que ali se escolhe; com
   número, ele É a resposta. */
.dc-num{flex:0 0 30px;height:30px;border-radius:8px;border:1.5px solid var(--line);
  background:var(--paper);display:grid;place-items:center;
  font-family:var(--fd);font-size:15px;color:var(--mute);
  font-variant-numeric:tabular-nums;transition:.15s}
.dc-txt{flex:1;min-width:0;padding-top:3px}

.dc-op.marcada{border-color:var(--gold);background:#FEF9EE}
.dc-op.marcada .dc-num{background:var(--gold);border-color:var(--gold);
  color:var(--navy);font-weight:700}
.dc-op.marcada .dc-txt{color:var(--ink)}

/* Hover SÓ onde existe ponteiro de verdade.
   No celular o dedo fica parado onde tocou, e o hover gruda: a opção
   seguinte nasce debaixo do dedo já parecendo escolhida. Foi
   exatamente esse o bug do formulário da vaga em 02/09. */
@media (hover:hover){
  .dc-op:hover{border-color:var(--navy3);background:#EEF3FA}
  .dc-op.marcada:hover{border-color:var(--gold2)}
  .dc-voltar:hover,.dc-limpar:hover{color:var(--ink);border-color:var(--mute)}
}

.dc-lembrete{font-size:13px;color:var(--mute);text-align:center;margin-top:16px;font-style:italic}

.dc-pe{display:flex;align-items:center;gap:10px;margin-top:18px;
  padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.dc-voltar,.dc-limpar{background:none;border:1px solid var(--line);border-radius:8px;
  padding:10px 14px;cursor:pointer;font-family:var(--fd);font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mute);transition:.15s}
.dc-pe .btn{margin-left:auto}

.dc-erro{background:var(--clayw);border:1px solid rgba(176,58,34,.25);
  border-radius:9px;padding:12px 14px;color:var(--clay);font-size:14px;margin-top:16px}
.dc-carregando{color:var(--mute);text-align:center;padding:30px 0}

/* ---------- o resultado ---------- */
.dc-barras{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.dc-linha{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,2fr) 44px;
  align-items:center;gap:12px}
.dc-letra{width:34px;height:34px;border-radius:9px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:var(--fd);font-size:16px}
.dc-nome{font-size:14px;color:var(--ink);min-width:0;display:flex;flex-direction:column}
.dc-nome i{font-style:normal;font-size:12px;color:var(--mute)}

/* O eixo parte do MEIO. O índice vai de −30 a +30, e o zero é o
   equilíbrio: uma barra que começasse na esquerda faria −20 parecer
   "pouco de alguma coisa" em vez de "o oposto disso". */
.dc-eixo{position:relative;height:12px;background:var(--wash);
  border:1px solid var(--line);border-radius:7px;min-width:0}
.dc-eixo::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;
  width:1px;background:var(--line)}
.dc-eixo i{position:absolute;top:1px;bottom:1px;border-radius:5px}
.dc-eixo i.pos{left:50%;background:var(--gold)}
.dc-eixo i.neg{right:50%;background:var(--navy3)}
.dc-valor{font-family:var(--fd);font-size:14px;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums}
.dc-fim .btn{width:100%;padding:15px;margin-top:4px}

/* ---------- celular ---------- */
@media (max-width:640px){
  #disc{padding:80px 14px 50px}
  .dc-abre,.dc-cena,.dc-fim{padding:24px 18px;border-radius:12px}
  .dc-abre h1,.dc-fim h1{font-size:26px}
  .dc-tit{font-size:19px}
  .dc-op{font-size:15px;padding:14px 13px;gap:11px}
  .dc-pe .btn{margin-left:0;width:100%;order:-1;margin-bottom:4px}
  .dc-voltar,.dc-limpar{flex:1}
  /* A régua fica em duas linhas: com 375px, quatro colunas
     espremeriam a barra a ponto de ela não mostrar nada. */
  .dc-linha{grid-template-columns:34px minmax(0,1fr) 44px}
  .dc-eixo{grid-column:1/-1;height:14px}
}

/* O alvo cresce por baixo onde se usa o dedo, sem o desenho mudar. */
@media (pointer:coarse){
  .dc-op{padding:17px 15px}
  .dc-voltar,.dc-limpar{padding:13px 16px}
}

@media (prefers-reduced-motion:reduce){
  .dc-op,.dc-num,.dc-barra i{transition:none}
}

/* ==========================================================
   O TESTE DO TABULEIRO — a tela

   Reaproveita o cartão de opção do DISC (.dc-op / .dc-num /
   .dc-txt) em vez de duplicar. É a convenção deste projeto:
   classe genérica reusada, com override mais específico onde
   muda de verdade.

   O que muda aqui: só uma opção fica marcada, e o quadradinho
   mostra LETRA (A, B, C…) em vez de número de ordem.
   ========================================================== */

#tabuleiro{padding:96px 22px 70px;max-width:760px;margin:0 auto}

.tb-intro{font-size:16px;color:var(--body);margin-bottom:22px}
.tb-retoma{background:var(--wash);border:1px solid var(--line);border-radius:9px;
  padding:12px 14px;font-size:14px;color:var(--ink);margin-top:18px}

/* O rótulo do passo, no cabeçalho: Leitura · Entendimento · Situação ·
   Espelho. Sem ele, quatro telas parecidas viram uma só na cabeça de
   quem responde. */
.tb-passo{font-family:var(--fd);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold2);white-space:nowrap}

/* ---------- a leitura ---------- */
.tb-numero{font-family:var(--fd);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);display:block}
.tb-titulo{font-family:var(--fd);font-size:25px;text-transform:uppercase;
  color:var(--ink);line-height:1.1;margin:6px 0 20px;text-wrap:balance}
/* Texto para LER, e não para varrer: mais alto, mais largo e mais
   escuro que o resto da tela. */
.tb-texto p{font-size:17px;line-height:1.72;color:var(--ink);margin-bottom:15px}
.tb-texto p:last-child{margin-bottom:0}
.tb-lista{margin:6px 0 0 0;padding-left:0;list-style:none;counter-reset:tbl}
.tb-lista li{counter-increment:tbl;position:relative;padding-left:34px;
  font-size:16.5px;line-height:1.6;color:var(--ink);margin-bottom:11px}
.tb-lista li::before{content:counter(tbl);position:absolute;left:0;top:2px;
  width:24px;height:24px;border-radius:7px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:var(--fd);font-size:13px}

/* ---------- as perguntas ---------- */
.tb-contexto{background:var(--wash);border-left:3px solid var(--navy3);
  border-radius:0 9px 9px 0;padding:14px 16px;font-size:15.5px;color:var(--ink);
  margin-bottom:16px}
.tb-enunciado{font-family:var(--fd);font-size:20px;text-transform:uppercase;
  color:var(--ink);line-height:1.2;margin-bottom:8px;text-wrap:balance}

/* A letra vem de contador do CSS: alternativa nova não precisa de nada
   no JavaScript. Ela faz três coisas de uma vez — dá a forma, mostra
   sem texto que ali se escolhe UMA só, e nomeia a opção. */
.tb-uma{counter-reset:tbo}
.tb-uma .dc-op{counter-increment:tbo}
.tb-uma:not(.tb-escala) .dc-num::before{
  content:counter(tbo, upper-alpha)}

/* ---------- o espelho ---------- */
.tb-frase{background:#FEF9EE;border-left:4px solid var(--gold);
  border-radius:0 10px 10px 0;padding:16px 18px;font-size:17px;line-height:1.6;
  color:var(--ink);font-style:italic;margin-bottom:18px}
.tb-escala .dc-txt{display:flex;flex-direction:column;gap:2px}
.tb-escala .dc-txt b{color:var(--ink);font-weight:600}
.tb-escala .dc-txt i{font-style:normal;font-size:13.5px;color:var(--mute)}
.tb-escala .dc-op.marcada .dc-txt i{color:var(--body)}

.tb-just{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.tb-just label{display:block;font-family:var(--fd);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold2);margin-bottom:6px}
.tb-pergunta{font-size:15.5px;color:var(--ink);margin-bottom:11px}
.tb-just textarea{width:100%;padding:14px 15px;border-radius:11px;
  border:1.5px solid var(--line);background:var(--paper);color:var(--ink);
  font-family:var(--ff);font-size:15.5px;line-height:1.6;resize:vertical;
  outline:none;transition:border-color .15s}
.tb-just textarea:focus{border-color:var(--gold)}
.tb-conta{font-size:13px;margin-top:7px;min-height:19px;
  font-variant-numeric:tabular-nums}
/* Cinza diz "continua"; vermelho diria "você errou". Ela ainda está
   escrevendo — não errou nada. */
.tb-conta.falta{color:var(--mute)}
.tb-conta.ok{color:var(--green)}

/* ---------- celular ---------- */
@media (max-width:640px){
  #tabuleiro{padding:80px 14px 50px}
  .tb-titulo{font-size:21px}
  .tb-enunciado{font-size:18px}
  .tb-texto p{font-size:16px}
  /* O rótulo do passo sai da linha do cabeçalho: com ele, a barra de
     progresso ficava com uns 40px e não mostrava nada. */
  .tb-passo{display:none}
}

/* ==========================================================
   O DESAFIO FINAL — o mapa das duas partes
   ========================================================== */

#desafio{padding:96px 22px 70px;max-width:760px;margin:0 auto}

.df-partes{display:flex;flex-direction:column;gap:12px;margin:22px 0}

.df-parte{display:flex;align-items:flex-start;gap:15px;width:100%;text-align:left;
  background:var(--wash);border:1.5px solid var(--line);border-radius:12px;
  padding:18px 18px;cursor:pointer;font-family:var(--ff);transition:.15s}
.df-n{flex:0 0 34px;height:34px;border-radius:9px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:var(--fd);font-size:16px}
.df-corpo2{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.df-corpo2 b{font-size:16.5px;color:var(--ink)}
.df-corpo2 i{font-style:normal;font-size:14px;color:var(--body)}
.df-corpo2 em{font-style:normal;font-family:var(--fd);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin-top:3px}

.df-parte.aberta{border-color:var(--gold);background:#FEF9EE}
.df-parte.aberta .df-n{background:var(--gold);color:var(--navy)}
.df-parte.aberta .df-corpo2 em{color:var(--gold2)}

.df-parte.feita{border-color:rgba(29,138,99,.3);background:var(--greenw)}
.df-parte.feita .df-n{background:var(--green)}
.df-parte.feita .df-corpo2 em{color:var(--green)}

/* Travada continua LEGÍVEL, e a linha de baixo diz o que destrava. Um
   bloco apagado sem explicação lê-se como defeito — é a mesma ressalva
   que o Daniel fez sobre botão desabilitado. */
.df-parte.travada{cursor:default;opacity:.62}
.df-parte.travada .df-n{background:var(--mute)}

@media (hover:hover){
  .df-parte.aberta:hover{border-color:var(--gold2);transform:translateY(-1px)}
  .df-parte.feita:hover{border-color:var(--green)}
}
@media (pointer:coarse){ .df-parte{padding:20px 17px} }
@media (max-width:640px){ #desafio{padding:80px 14px 50px} }

/* ---------- a boas-vindas do Desafio Final ----------
   A única tela da formação que existe só para reconhecer. Ela chega
   depois de treze minutos de vídeo, dezesseis telas de formulário e
   nove aulas — e antes da parte mais longa de todas. Merece respiro. */
.df-abre{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:38px 32px}
.df-abre h1{font-family:var(--fd);color:var(--ink);font-size:34px;text-transform:uppercase;
  line-height:1.02;margin:8px 0 22px;text-wrap:balance}

/* O número é o herói da tela: é a única coisa aqui que a pessoa não
   sabia, e é o que transforma "terminei" em "cheguei longe". */
.df-marca{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#0B1E3D,#16325F);
  border-radius:14px;padding:22px 24px;margin-bottom:26px}
.df-pct{font-family:var(--fd);font-size:46px;line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.df-pct-txt{font-size:14.5px;line-height:1.5;color:#C6D3E8;min-width:0}
.df-pct-txt b{color:#fff}

.df-parab{font-family:var(--fd);font-size:22px;text-transform:uppercase;
  color:var(--gold2);margin-bottom:14px}
.df-corpo{font-size:16.5px;line-height:1.7;color:var(--body);margin-bottom:16px}
.df-corpo b{color:var(--ink)}

/* No mapa, cada parte é um botão. Na boas-vindas é só informação —
   mesma forma, sem convidar ao clique antes da hora. */
.df-item{display:flex;align-items:flex-start;gap:15px;background:var(--wash);
  border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.df-item .df-n{background:var(--navy)}

.df-boa{font-size:17px;color:var(--ink);margin:22px 0 20px;font-style:italic}
.df-abre .btn.p{width:100%;padding:16px;font-size:14px}
.df-depois{display:block;width:100%;margin-top:12px;background:none;border:0;
  cursor:pointer;font-family:var(--ff);font-size:14px;color:var(--mute);
  padding:10px;text-decoration:underline}

@media (hover:hover){ .df-depois:hover{color:var(--ink)} }
@media (max-width:640px){
  .df-abre{padding:26px 18px}
  .df-abre h1{font-size:27px}
  /* Empilha: com 375px, o número de dois dígitos e o texto lado a lado
     deixam o texto em coluna de 90px. */
  .df-marca{flex-direction:column;align-items:flex-start;gap:8px;padding:20px}
  .df-pct{font-size:40px}
  .df-corpo{font-size:15.5px}
}

/* ============================================================
   O CHEFE FINAL

   O Desafio Final não parece o resto da Academia, e isso é
   pedido do Daniel: "quando bateu o olho, isso aqui é
   diferente".

   MESMA PALETA, OUTRO USO. O guia da ThunderLab manda fundo
   escuro ser sempre uma MESCLA de preto com o navy, nunca cor
   sólida — e o dourado só em destaque pontual, nunca em área
   grande. É exatamente o que uma tela de chefe final pede:
   quase tudo escuro, e o ouro aparecendo onde importa.

   E o dourado aqui é o #ccb054 do guia oficial, não o
   #D9A22B que a Academia usa nas aulas. Mesma família, tom
   diferente — mais um sinal de "outro lugar" sem sair da marca.

   A TIPOGRAFIA MUDA DE VOZ:
     Anton          display, condensada e apertada
     Inter          números e etiquetas, com algarismos alinhados.
                    Letra monoespaçada (de máquina de escrever)
                    NÃO é da marca: saiu em 17/09, a pedido do Daniel
     Inter          o corpo continua, porque texto longo em
                    fonte de display não se lê

   COMO ISSO FUNCIONA SEM REESCREVER NADA: as telas do DISC e do
   Tabuleiro já usam var(--paper), var(--ink) e companhia. Aqui
   os TOKENS são redefinidos dentro de body.boss, e as regras de
   lá viram escuras sozinhas. Sem duplicar uma única regra.
   ============================================================ */

body.boss{
  /* a mescla preto + navy, como manda o guia */
  background:
    radial-gradient(1100px 620px at 50% -8%, #0d2039 0%, transparent 62%),
    linear-gradient(178deg, #050b14 0%, #01060e 55%, #000000 100%);
  background-attachment:fixed;
  color:#B8C4D8;

  /* os tokens, virados */
  --paper:#070f1c;        /* o cartão */
  --wash:#040a13;         /* o fundo dos elementos internos */
  --ink:#FFFFFF;          /* texto forte */
  --body:#AEBCD2;         /* texto corrido */
  --mute:#67768F;         /* apoio */
  --line:rgba(204,176,84,.18);   /* fio dourado no lugar do cinza */
  --gold:#CCB054;         /* o dourado do guia oficial */
  --gold2:#E3CE86;        /* mais claro: o dourado escuro some no preto */
  --navy:#15294A;         /* medalhas e badges continuam visíveis */
  --navy3:#2A4576;
  --greenw:rgba(29,138,99,.14);
  --green:#43C99A;
  --clayw:rgba(176,58,34,.16);
  --clay:#E8917A;
  --sh:0 18px 50px rgba(0,0,0,.55);
}

/* A barra do topo acompanha, senão fica uma faixa clara colada
   em cima de uma tela preta. */
body.boss .topo{background:rgba(0,0,0,.85);border-bottom-color:rgba(204,176,84,.2)}

/* Os cartões deixam de ser cartões brancos: são placas escuras com
   fio dourado. */
body.boss .dc-abre,
body.boss .dc-cena,
body.boss .dc-fim,
body.boss .df-abre{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--line);
  box-shadow:var(--sh), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---------- a tipografia ---------- */
body.boss .dc-abre h1,
body.boss .dc-fim h1,
body.boss .df-abre h1{
  font-family:'Anton','Oswald',sans-serif;
  font-weight:400;
  letter-spacing:-.015em;
  line-height:.92;
  font-size:clamp(38px, 7.5vw, 62px);
  color:#fff;
  text-transform:uppercase;
  margin:10px 0 24px;
}
body.boss .tb-titulo,
body.boss .tb-enunciado,
body.boss .dc-tit{
  font-family:'Anton','Oswald',sans-serif;
  font-weight:400;letter-spacing:-.005em;line-height:1.04;color:#fff;
}

/* Etiquetas e números com algarismos alinhados. Eram em letra
   monoespaçada, que NÃO é da marca (17/09): agora são Inter. */
body.boss .dc-kick,
body.boss .dc-conta,
body.boss .tb-passo,
body.boss .tb-numero,
body.boss .df-corpo2 em,
body.boss .dc-op .dc-num,
body.boss .dc-valor,
body.boss .tb-conta{
  font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
body.boss .dc-kick{color:var(--gold);letter-spacing:.28em;font-size:10.5px}
body.boss .dc-conta{color:var(--gold2)}
body.boss .tb-passo{color:var(--gold)}

/* ---------- o número que abre a tela ---------- */
body.boss .df-marca{
  background:linear-gradient(135deg,rgba(204,176,84,.10),rgba(204,176,84,.02));
  border:1px solid rgba(204,176,84,.3);
  box-shadow:inset 0 0 60px rgba(204,176,84,.05);
}
body.boss .df-pct{
  font-family:'Anton','Oswald',sans-serif;
  color:var(--gold);
  font-size:58px;letter-spacing:-.02em;
  text-shadow:0 0 34px rgba(204,176,84,.35);
}
body.boss .df-pct-txt{color:#9FB0C9}
body.boss .df-pct-txt b{color:#fff}

body.boss .df-parab{
  font-family:'Anton','Oswald',sans-serif;
  color:var(--gold2);font-size:26px;letter-spacing:-.005em;
}
body.boss .df-boa{color:var(--gold2);font-style:normal;
  font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:.01em}

/* ---------- opções e caixas ---------- */
body.boss .dc-op{
  background:rgba(255,255,255,.028);
  border-color:rgba(255,255,255,.09);
  color:var(--body);
}
body.boss .dc-op .dc-num{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:var(--mute);
}
body.boss .dc-op.marcada{
  background:rgba(204,176,84,.10);
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(204,176,84,.25), 0 8px 26px rgba(204,176,84,.10);
}
body.boss .dc-op.marcada .dc-num{background:var(--gold);border-color:var(--gold);color:#050B14}
body.boss .dc-op.marcada .dc-txt{color:#fff}

body.boss .caixa,
body.boss .dc-aviso{background:rgba(255,255,255,.03);border-color:var(--line)}
body.boss .dc-aviso strong{color:var(--gold2)}
body.boss .tb-frase{background:rgba(204,176,84,.07);border-left-color:var(--gold);color:#fff}
body.boss .tb-contexto{background:rgba(255,255,255,.035);border-left-color:var(--navy3);color:var(--body)}
body.boss .tb-texto p{color:#D3DCEA}

/* O botão principal continua dourado — é o único bloco de cor da
   tela, e o guia manda o dourado ser exatamente isso. */
body.boss .btn.p{background:var(--gold);color:#050B14}
body.boss .btn.d{background:rgba(255,255,255,.06);color:#DCE5F3;border:1px solid var(--line)}
body.boss .dc-voltar,body.boss .dc-limpar,body.boss .df-depois{color:var(--mute);border-color:rgba(255,255,255,.12)}

body.boss .df-item{background:rgba(255,255,255,.028);border-color:rgba(255,255,255,.09)}
body.boss .df-parte.aberta{background:rgba(204,176,84,.09);border-color:var(--gold)}
body.boss .df-parte.aberta .df-n{background:var(--gold);color:#050B14}
body.boss .df-parte.feita{background:rgba(67,201,154,.08);border-color:rgba(67,201,154,.35)}
body.boss .df-parte.travada{opacity:.45}
body.boss .df-n{background:var(--navy);color:#fff}

body.boss .tb-just textarea{
  background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.12);color:#fff;
}
body.boss .tb-just textarea:focus{border-color:var(--gold)}
body.boss .tb-just label{color:var(--gold)}

@media (hover:hover){
  body.boss .dc-op:hover{background:rgba(255,255,255,.06);border-color:rgba(204,176,84,.4)}
  body.boss .btn.p:hover{background:#E3CE86;box-shadow:0 10px 30px rgba(204,176,84,.3)}
}
@media (max-width:640px){
  body.boss .df-pct{font-size:46px}
  body.boss .df-parab{font-size:22px}
}

/* ---------- o radar do perfil comportamental ----------
   Quatro eixos. D e S ficam opostos, I e C também: os pares que se
   contrapõem, frente a frente. Assim a FORMA já diz para onde a pessoa
   pende, antes de ela ler qualquer número.

   O centro é −30 e a borda é +30. O zero é um anel desenhado, porque
   ele é a referência que separa "acima" de "abaixo" do equilíbrio. Com
   o zero no centro, um índice negativo viraria raio negativo e a figura
   se dobraria para dentro. */
.dc-radar-caixa{display:flex;align-items:center;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.dc-radar{flex:0 0 300px;max-width:100%;height:auto}
.dc-anel{fill:none;stroke:var(--line);stroke-width:1}
.dc-anel-in{stroke-dasharray:3 4}
.dc-eixo-l{stroke:var(--line);stroke-width:1}
.dc-forma{fill:rgba(204,176,84,.22);stroke:var(--gold);stroke-width:2;stroke-linejoin:round}
.dc-ponto{fill:var(--gold);stroke:var(--paper);stroke-width:2}
.dc-radar-l{font-family:var(--fd);font-size:17px;fill:var(--ink);text-anchor:middle}
.dc-radar-zero{font-size:10px;fill:var(--mute);text-anchor:middle;
  font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums}

.dc-radar-lado{flex:1;min-width:150px}
.dc-dom-rot{display:block;font-family:var(--fd);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute)}
.dc-dom{display:block;font-family:var(--fd);font-size:52px;line-height:1;color:var(--gold2)}
.dc-dom-nome{display:block;font-family:var(--fd);font-size:17px;text-transform:uppercase;
  color:var(--ink);margin-bottom:6px}
.dc-dom-txt{font-size:14px;color:var(--body);line-height:1.55}

/* A linha do perfil dominante ganha peso, para a régua e o radar
   contarem a mesma história. Duas leituras que discordam é pior que
   uma só. */
.dc-linha.e-alto .dc-letra{background:var(--gold);color:#0B1E3D}
.dc-linha.e-alto .dc-nome{font-weight:600}

/* No chefe final o traço muda de cor, mas o desenho é o mesmo. */
body.boss .dc-anel,body.boss .dc-eixo-l{stroke:rgba(204,176,84,.2)}
body.boss .dc-forma{fill:rgba(204,176,84,.2);stroke:var(--gold)}
body.boss .dc-ponto{stroke:#070f1c}
body.boss .dc-radar-l{fill:#fff;font-family:'Anton','Oswald',sans-serif}
body.boss .dc-dom{font-family:'Anton','Oswald',sans-serif;color:var(--gold)}
body.boss .dc-dom-rot{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums}
body.boss .dc-linha.e-alto .dc-letra{background:var(--gold);color:#050B14}

@media (max-width:640px){
  .dc-radar-caixa{flex-direction:column;align-items:center;text-align:center}
  .dc-radar{flex:0 0 auto;width:100%;max-width:290px}
  .dc-radar-lado{min-width:0;text-align:center}
}

/* ============================================================
   A TIPOGRAFIA CRESCE, E MAIS NO CELULAR

   Pedido do Daniel: "no celular tem que ficar perfeito, que é o
   principal lugar". Medido antes de mexer: 55 tamanhos abaixo
   de 14px no arquivo, e alguns em 10px.

   Dez ou onze pixels serve para uma etiqueta que ninguém lê de
   verdade. Aqui tem texto de aula, situação de teste e
   justificativa para escrever, e isso é leitura de minutos.

   O PISO: 12px em etiqueta, 16px em texto corrido, e no celular
   um pouco mais. Este bloco vai no FIM do arquivo de propósito:
   regra escrita depois vence a de cima com a mesma
   especificidade, e foi assim que a faixa do menu do CRM ficou
   quebrada por três dias em 28/08.
   ============================================================ */

/* ---------- em qualquer tela ---------- */
.tb-texto p        { font-size:17.5px; line-height:1.75 }
.tb-lista li       { font-size:17px }
.dc-sit            { font-size:17px }
.dc-op             { font-size:16.5px; line-height:1.55 }
.tb-contexto       { font-size:16.5px }
.tb-pergunta       { font-size:16.5px }
.tb-frase          { font-size:18px }
.df-corpo          { font-size:17px }
.tb-intro          { font-size:17px }
.dc-aviso p        { font-size:15.5px }
.dc-aviso strong   { font-size:17px }
.dc-como li        { font-size:15.5px }
.dc-dica           { font-size:15px }
.tb-just textarea  { font-size:16.5px }
.dc-ordem          { font-size:15px }
.dc-lembrete       { font-size:14.5px }
.dc-conta,
.tb-passo,
.dc-kick,
.tb-numero,
.df-corpo2 em      { font-size:12px }
.dc-op .dc-num     { font-size:16px }
.df-corpo2 b       { font-size:17px }
.df-corpo2 i       { font-size:15px }
.dc-nome           { font-size:15px }
.dc-nome i         { font-size:13px }
.dc-valor          { font-size:15px }
.tb-conta          { font-size:14px }

/* ---------- e no celular, o texto sobe mais ----------
   A tela é menor, mas a distância do olho também. O que
   atrapalha no celular não é o tamanho da tela: é linha estreita
   com letra miúda. */
@media (max-width: 640px) {
  #disc, #tabuleiro, #desafio { padding-left:16px; padding-right:16px }

  .tb-texto p       { font-size:18px; line-height:1.78; margin-bottom:17px }
  .tb-lista li      { font-size:17.5px; line-height:1.7 }
  .dc-sit           { font-size:17.5px; line-height:1.65 }
  .dc-op            { font-size:17px; line-height:1.55; padding:16px 15px }
  .dc-op .dc-num    { flex-basis:32px; height:32px; font-size:17px }
  .tb-contexto      { font-size:17px }
  .tb-frase         { font-size:18px; line-height:1.62 }
  .tb-pergunta      { font-size:17px }
  .tb-just textarea { font-size:17px }
  .df-corpo         { font-size:17.5px; line-height:1.72 }
  .tb-intro         { font-size:17px }
  .dc-aviso p       { font-size:16px }
  .dc-aviso strong  { font-size:17px }
  .dc-como li       { font-size:16px }
  .dc-dica          { font-size:15.5px }
  .dc-ordem         { font-size:15.5px }
  .dc-lembrete      { font-size:15px }
  .df-corpo2 b      { font-size:17px }
  .df-corpo2 i      { font-size:15.5px }
  .dc-nome          { font-size:15.5px }
  .dc-nome i        { font-size:13.5px }

  /* Etiqueta pequena continua pequena, mas nunca abaixo de 12:
     abaixo disso o iOS começa a dar zoom sozinho no campo, e a
     página inteira pula. */
  .dc-conta, .tb-passo, .dc-kick, .tb-numero,
  .df-corpo2 em, .tb-conta, .dc-valor { font-size:12.5px }

  /* Título de aula com folga para respirar */
  .tb-titulo   { font-size:23px; line-height:1.14 }
  .tb-enunciado{ font-size:20px; line-height:1.22 }
  .dc-tit      { font-size:21px }

  /* Botão de dedo: 52px de altura, que é o alvo confortável */
  .btn         { font-size:14px; padding:16px 22px }
  .dc-pe .btn  { padding:17px 20px }
}

/* Tela bem estreita (iPhone SE e afins) não pode perder texto */
@media (max-width: 380px) {
  #disc, #tabuleiro, #desafio { padding-left:13px; padding-right:13px }
  .dc-abre, .dc-cena, .dc-fim, .df-abre { padding-left:16px; padding-right:16px }
  .tb-texto p { font-size:17.5px }
  .dc-op      { font-size:16.5px }
}

/* ============================================================
   A GRADE DE CAPAS

   TRÊS COLUNAS EM TODA LARGURA, inclusive celular. Decisão do
   briefing, e é boa: colapsar para uma coluna faria a trilha
   virar dez telas de rolagem, e o que a pessoa precisa ver de
   relance é ONDE ela está no caminho inteiro.

   O TÍTULO FICA FORA DA CAPA. No celular a capa tem uns 116px, e
   texto embutido na arte vira borrão nesse tamanho. Por isso as
   imagens são só arte, e o nome da aula é HTML embaixo.

   Cor nunca é o único sinal: cada estado tem também um ícone
   (cadeado, check) ou o anel. Daltonismo e tela de celular no
   sol precisam disso.
   ============================================================ */

#lista-aulas.aulas{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  max-width:1080px;
  margin:0 auto;
}
.ca-faixa{ grid-column:1 / -1 }

/* O cartão é um botão de verdade: teclado e leitor de tela
   funcionam sem nada a mais. Bloqueada vira div, e por isso não
   recebe foco -- não se navega para o que não abre. */
.ca{
  display:flex;flex-direction:column;gap:9px;
  background:none;border:0;padding:0;margin:0;
  font-family:var(--ff);text-align:left;width:100%;
  cursor:pointer;color:inherit;
}
.ca[aria-disabled="true"]{cursor:default}

.ca-capa{
  position:relative;display:block;width:100%;
  aspect-ratio:1 / 1;               /* nunca vira retângulo */
  border-radius:12px;overflow:hidden;
  background:var(--wash);
  border:1px solid var(--line);
  transition:filter .3s, opacity .3s, transform .18s, box-shadow .18s;
}
.ca-capa img{width:100%;height:100%;object-fit:cover;display:block}
.ca-faixa .ca-capa{aspect-ratio:1080 / 246}

.ca-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ca-n{font-family:var(--fd);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
.ca-tit{
  font-family:var(--fd);font-size:14px;line-height:1.18;color:var(--navy);
  text-transform:uppercase;
  /* no máximo duas linhas, com reticências */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.ca-est{font-size:11.5px;color:var(--mute)}

/* ---------- os quatro estados ---------- */

/* bloqueada: sem cor e escura. Não é clicável, e o cadeado diz
   por quê sem depender da cor. */
.ca.travada{opacity:.5}
.ca.travada .ca-capa{filter:grayscale(1) brightness(.55)}
.ca.travada .ca-tit{color:var(--mute)}

/* atual: o destaque da tela. Só um anel, sem pulsar nem brilhar
   -- quem abre isto todo dia cansa de animação. */
.ca.atual .ca-capa{outline:2px solid var(--gold);outline-offset:3px}
.ca.atual .ca-est{color:var(--gold2);font-weight:600}
.ca.atual .ca-tit{color:var(--navy)}

/* concluída: cor cheia, mas recuada. A atenção cai sozinha no
   que ainda falta. */
.ca.ok .ca-capa{opacity:.72}
.ca.ok .ca-est{color:var(--green)}

/* reprovada: estado real deste sistema, e o briefing não previa.
   Fica visível, senão quem errou o teste vê a aula como pronta. */
.ca.repro .ca-capa{outline:2px solid var(--clay);outline-offset:3px}
.ca.repro .ca-est{color:var(--clay);font-weight:600}

/* ---------- os selos ---------- */
.ca-selo{
  position:absolute;right:8px;bottom:8px;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
}
.ca-selo svg{width:13px;height:13px}
.ca-selo.trava{background:rgba(0,0,0,.62);color:#fff}
.ca-selo.feito{background:var(--green);color:#fff}
.ca-faixa .ca-selo{width:34px;height:34px;right:14px;bottom:14px}
.ca-faixa .ca-selo svg{width:18px;height:18px}

/* progresso parcial, colado na base da capa */
.ca-barra{position:absolute;left:0;bottom:0;height:3px;background:var(--gold)}

/* ---------- foco e toque ---------- */
.ca:focus-visible{outline:none}
/* O anel do foco é DIFERENTE do anel da aula atual, senão quem
   navega por teclado não distingue "onde estou" de "o que fazer". */
.ca:focus-visible .ca-capa{outline:3px dashed var(--navy3);outline-offset:4px}

@media (hover:hover){
  .ca:not([aria-disabled]):hover .ca-capa{transform:translateY(-3px);box-shadow:var(--sh2)}
  .ca.ok:hover .ca-capa{opacity:.9}
}
@media (prefers-reduced-motion:reduce){
  .ca-capa{transition:none}
}

/* ---------- as medidas por tela ---------- */
@media (max-width:1079px){
  #lista-aulas.aulas{gap:16px;padding:0 20px}
  .ca-faixa .ca-capa{aspect-ratio:3 / 1}
  .ca-tit{font-size:13px}
}
@media (max-width:640px){
  #lista-aulas.aulas{gap:8px;padding:0 12px}
  .ca{gap:7px}
  .ca-capa{border-radius:9px}
  .ca-n{font-size:9.5px;letter-spacing:.1em}
  .ca-tit{font-size:11px;line-height:1.15}
  .ca-est{font-size:10px}
  .ca-selo{width:18px;height:18px;right:5px;bottom:5px}
  .ca-selo svg{width:10px;height:10px}
  .ca-faixa .ca-selo{width:26px;height:26px;right:9px;bottom:9px}
}

/* ---------- esqueleto, enquanto carrega ----------
   Mesma grade e mesma proporção, para a tela não pular quando as
   imagens entram. */
.ca-vazio .ca-capa{background:linear-gradient(100deg,var(--wash),#EDF1F7,var(--wash));
  background-size:200% 100%;animation:ca-brilho 1.3s linear infinite}
@keyframes ca-brilho{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){ .ca-vazio .ca-capa{animation:none} }

/* A trilha precisa de 1080 para a grade dar as capas de 344px que o
   briefing pede. Ela estava em 900 desde antes das capas existirem.
   O texto do topo continua estreito: linha de leitura curta lê melhor,
   e alargá-la junto faria a explicação atravessar a tela inteira. */
#trilha{max-width:1124px}
.tr-head,.tr-prog{max-width:820px;margin-left:auto;margin-right:auto}
@media (max-width:1079px){
  #trilha{padding-left:0;padding-right:0}
  .tr-head,.tr-prog{padding-left:20px;padding-right:20px}
}
@media (max-width:640px){
  .tr-head,.tr-prog{padding-left:12px;padding-right:12px}
}

/* ============================================================
   A LINHA RESPIRA MAIS QUE A COLUNA

   `gap` sozinho dá o mesmo espaço nos dois sentidos, e aí o
   título fica à MESMA distância da capa dele e da capa de
   baixo. O olho não sabe a qual pertence, e é exatamente o que
   o Daniel viu.

   O consertο é separar os dois: coluna fica como estava (as
   capas lado a lado não se confundem, cada uma tem seu texto
   embaixo), e a linha abre bem mais. O título passa a estar
   perto de UMA coisa só.

   Vai no fim do arquivo porque `row-gap` precisa vencer o
   `gap` declarado antes, nas três larguras.
   ============================================================ */
#lista-aulas.aulas{ column-gap:24px; row-gap:44px }

@media (max-width:1079px){
  #lista-aulas.aulas{ column-gap:16px; row-gap:34px }
}
@media (max-width:640px){
  /* No celular a diferença precisa ser ainda MAIOR em proporção:
     8px entre colunas contra 26 entre linhas. Com pouco espaço
     total, o que separa não é a medida absoluta, é o contraste
     entre as duas. */
  #lista-aulas.aulas{ column-gap:8px; row-gap:26px }
}

/* ============================================================
   O CARTÃO SEM O TÍTULO REPETIDO

   O nome da aula já está desenhado na capa. Repetir embaixo era a
   mesma informação duas vezes, gastando altura numa grade em que
   a capa tem 112px no celular.

   Fica um sanduíche: em cima o que é (Aula 3), no meio a arte, e
   embaixo só o estado.

   O título NÃO sumiu de verdade: ele continua no `aria-label` do
   cartão e no `alt` da imagem. Quem usa leitor de tela não pode
   perder o nome da aula só porque ele virou desenho.
   ============================================================ */
.ca{gap:6px}
.ca .ca-n{
  font-family:var(--fd);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);line-height:1;
}
.ca.atual .ca-n{color:var(--gold2)}
.ca.ok    .ca-n{color:var(--green)}
.ca.repro .ca-n{color:var(--clay)}
.ca-est{font-size:12px;line-height:1.2}

@media (max-width:640px){
  .ca{gap:5px}
  .ca .ca-n{font-size:9.5px;letter-spacing:.12em}
  .ca-est{font-size:10.5px}
}

/* ============================================================
   O FUNDO ESCURECE UM POUCO

   As capas são claras (#FAFAF8) sobre um fundo que era quase da
   mesma cor. Elas apareciam sem borda visível, e a grade parecia
   uma mancha só.

   Escurecer o FUNDO, e não as capas: a arte fica como o Daniel
   aprovou, e o contraste vem de trás. Pouco, porque a Academia
   continua sendo uma tela clara.
   ============================================================ */
body{background:#E9EDF4}
.ca-capa{border-color:rgba(11,30,61,.10)}

/* O chefe final não é tocado: lá o fundo já é a mescla preto e
   navy da marca, e ele tem regra própria mais abaixo. */
body.boss{background:
  radial-gradient(1100px 620px at 50% -8%, #0d2039 0%, transparent 62%),
  linear-gradient(178deg, #050b14 0%, #01060e 55%, #000000 100%)}

/* ============================================================
   A CONCLUÍDA GANHA BORDA, NÃO PERDE COR

   Antes a aula feita ficava com `opacity: .72` e um check sobre a
   arte. Duas coisas erradas de uma vez: a capa que o Daniel
   mandou fazer aparecia mais apagada justamente quando a pessoa
   tinha conquistado aquilo, e o selo cobria o desenho.

   Agora é o mesmo idioma dos outros estados: um aro. Verde para
   feito, dourado para a atual, vermelho para refazer. Três cores,
   três significados, mesma forma.

   E o aro fica COLADO na capa (offset 1px em vez de 3), como ele
   pediu: assim ele parece moldura da imagem e não uma caixa
   solta em volta.
   ============================================================ */

/* a arte volta a ter cor cheia */
.ca.ok .ca-capa{opacity:1}

.ca.ok    .ca-capa{outline:2.5px solid var(--green); outline-offset:1px}
.ca.atual .ca-capa{outline:2.5px solid var(--gold);  outline-offset:1px}
.ca.repro .ca-capa{outline:2.5px solid var(--clay);  outline-offset:1px}

@media (hover:hover){ .ca.ok:hover .ca-capa{opacity:1} }

/* O tique desce para a linha de estado, na frente do texto. Ali
   ele confirma sem cobrir nada. */
.ca-tique{
  display:inline-grid;place-items:center;vertical-align:-2px;
  width:14px;height:14px;border-radius:50%;
  background:var(--green);color:#fff;margin-right:5px;
}
.ca-tique svg{width:8px;height:8px}
@media (max-width:640px){
  .ca-tique{width:12px;height:12px;margin-right:4px;vertical-align:-2px}
  .ca-tique svg{width:7px;height:7px}
}

/* O cadeado continua sobre a capa: ali não há arte para tapar,
   ela está apagada mesmo, e é onde ele diz "isto não abre". */

/* ---------- o aviso da aula bloqueada ----------
   Tocar numa capa apagada precisa dizer alguma coisa. Sem isso,
   "não acontece nada" lê-se como tela travada, e não como "ainda
   não é a sua vez". */
#aviso-rapido{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%, 14px);
  background:var(--navy);color:#fff;
  padding:13px 20px;border-radius:11px;
  font-family:var(--ff);font-size:14.5px;line-height:1.35;
  max-width:min(420px, calc(100vw - 32px));text-align:center;
  box-shadow:0 12px 34px rgba(11,30,61,.3);
  opacity:0;pointer-events:none;z-index:400;
  transition:opacity .18s, transform .18s;
}
#aviso-rapido.on{opacity:1;transform:translate(-50%, 0)}
@media (prefers-reduced-motion:reduce){ #aviso-rapido{transition:none} }
body.boss #aviso-rapido{background:#0a1526;border:1px solid rgba(204,176,84,.35)}

/* ============================================================
   A FAIXA DO DESAFIO FINAL APARECE INTEIRA

   Ela estava com `1080 / 246` no desktop, e a arte é 3:1. A
   diferença cortava uma faixa em cima e embaixo, e justamente
   onde estão o peão e a rainha, que são o sentido do desenho.

   O briefing dizia que o corte era esperado. Na tela não é: o
   Daniel viu na hora. A proporção passa a ser 3:1 em toda
   largura, e a faixa fica com 360px de altura no desktop.
   Ela é a última etapa, e ocupar espaço ali é o ponto.
   ============================================================ */
.ca-faixa .ca-capa{ aspect-ratio:3 / 1 }


/* ============================================================
   OS TÍTULOS DO CHEFE FINAL RESPIRAM

   `body.boss .tb-titulo` fixava `line-height: 1.04`, e por ser
   mais específica vencia as regras de celular escritas depois.
   Com Anton em caixa alta, 1.04 faz as linhas se ENCOSTAREM:
   a perna do "P" toca o topo da letra de baixo.

   Foi o mesmo tipo de conflito que deixou a faixa de menu do
   CRM quebrada por três dias em 28/08 -- regra mais específica
   ganhando de regra mais recente, sem ninguém ver.

   Aqui a correção precisa da MESMA especificidade, e não de
   mais uma regra solta no fim.
   ============================================================ */
body.boss .tb-titulo,
body.boss .tb-enunciado,
body.boss .dc-tit{ line-height:1.14 }

@media (max-width:640px){
  /* No celular sobe de novo: a linha é curta, quebra mais vezes,
     e cada quebra é uma chance de duas linhas se tocarem. */
  body.boss .tb-titulo   { font-size:26px; line-height:1.2 }
  body.boss .tb-enunciado{ font-size:22px; line-height:1.26 }
  body.boss .dc-tit      { font-size:23px; line-height:1.22 }

  /* E os títulos fora do chefe final acompanham. */
  .tb-titulo   { font-size:25px; line-height:1.22 }
  .tb-enunciado{ font-size:22px; line-height:1.3 }
  .dc-tit      { font-size:23px; line-height:1.24 }

  /* A situação do DISC e o contexto da pergunta são o texto que
     a pessoa LÊ para decidir. Estavam do tamanho do apoio. */
  .dc-sit      { font-size:18px; line-height:1.6 }
  .tb-contexto { font-size:17.5px; line-height:1.55 }
}

/* ============================================================
   A CAPA ESCRITA (09/10)

   A trilha de SDR ainda nao tem arte de capa. Sem ela o cartao
   ficava sem nome nenhum, porque na outra trilha o titulo mora
   DENTRO da imagem. Aqui o numero e o titulo sao escritos.

   Fundo e a mescla de preto com navy da marca, nunca uma cor
   solida; o dourado fica so no numero, que e o destaque pontual.
   Inter, como todo o Paragon.
   ============================================================ */
.ca-capa-txt{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:18px 18px 20px;
  background:linear-gradient(150deg,#000 0%,#001429 62%,#0b2547 100%);
  color:#fff;font-family:'Inter',-apple-system,'Segoe UI',sans-serif;text-align:left;
}
.ca-capa-txt b{
  font-size:44px;line-height:1;font-weight:700;color:#ccb054;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.ca-capa-txt i{
  font-style:normal;font-size:19px;line-height:1.2;font-weight:600;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:1079px){
  .ca-capa-txt{padding:14px}
  .ca-capa-txt b{font-size:34px}
  .ca-capa-txt i{font-size:15px}
}
@media (max-width:640px){
  .ca-capa-txt{padding:9px 9px 10px}
  .ca-capa-txt b{font-size:22px}
  .ca-capa-txt i{font-size:11px;-webkit-line-clamp:5}
}

/* ============================================================
   O TITULO DE CADA PARTE NA TRILHA (18/10)

   A formacao de SDR tem duas fases, e a grade precisa dizer onde
   uma termina e a outra comeca. O titulo ocupa a linha inteira da
   grade e fica perto das capas de BAIXO, que sao as dele.
   ============================================================ */
.tr-parte{
  grid-column:1 / -1;
  display:flex;flex-direction:column;gap:3px;
  padding:14px 0 2px;border-top:1px solid var(--line);
}
.tr-parte:first-child{border-top:0;padding-top:0}
.tr-parte-n{font-family:var(--fd);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold2)}
.tr-parte b{font-size:20px;line-height:1.2;color:var(--navy)}
.tr-parte i{font-style:normal;font-size:14px;color:var(--body);max-width:640px}
.tr-parte em{font-style:normal;font-size:13px;color:var(--mute)}
html.paragon .tr-parte b{font-weight:700;letter-spacing:-.01em}
@media (max-width:640px){
  .tr-parte b{font-size:17px}
  .tr-parte i{font-size:13px}
}