/* jogo-moral.css · A máquina moral.
   Fontes locais (pasta fontes/), licença SIL OFL 1.1: Inter Tight e JetBrains Mono. Funciona sem internet.
   Palco de 1080 px de altura; a largura acompanha a tela (1500 a 2000). */
@font-face{font-family:'MM Titulo';font-weight:800;font-display:swap;src:url('fontes/inter-tight-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'MM Titulo';font-weight:700;font-display:swap;src:url('fontes/inter-tight-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'MM Texto';font-weight:300;font-display:swap;src:url('fontes/inter-tight-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'MM Texto';font-weight:400;font-display:swap;src:url('fontes/inter-tight-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'MM Texto';font-weight:500;font-display:swap;src:url('fontes/inter-tight-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'MM Texto';font-weight:700;font-display:swap;src:url('fontes/inter-tight-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'MM Texto';font-style:italic;font-weight:400;font-display:swap;src:url('fontes/inter-tight-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'MM Mono';font-weight:500;font-display:swap;src:url('fontes/jetbrains-mono-latin-500-normal.woff2') format('woff2')}

:root{
  --bg:#0B0C10; --bg2:#151823; --bg3:#1B1E26; --ink:#EEECE6; --mute:rgba(238,236,230,.66); --dim:rgba(238,236,230,.42);
  --line:rgba(238,236,230,.09); --line2:rgba(238,236,230,.18);
  --verde:#5CCB9F; --verm:#EC6A6F; --ouro:#D9B45B; --azul:#8FB3E0;
  --sa:#D9B45B; --sb:#8FB3E0; --turma:#EEECE6; --mundo:#D9B45B; --brasil:#5CCB9F;
  --fig:#E9E6DE; --fig2:#8E8B84; --road:#14161C;
  --tit:'MM Titulo','Helvetica Neue',Arial,sans-serif; --texto:'MM Texto','Helvetica Neue',Arial,sans-serif; --mono:'MM Mono',ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#050608;color:var(--ink);overflow:hidden}
body{font:400 30px/1.32 var(--texto);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
input{user-select:text;-webkit-user-select:text}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
b{font-weight:700}
em{font-style:normal}
.ca{color:var(--sa)} .cb{color:var(--sb)}

/* ── palco ── */
#moldura{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#050608}
#palco{position:relative;width:1920px;height:1080px;flex:none;transform-origin:center center;overflow:hidden;background:radial-gradient(140% 100% at 18% 0%,#151823 0%,#0B0C10 58%)}
#palco::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:50;opacity:.03;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.tela{position:absolute;inset:0;animation:entra .5s var(--ease) both}
@keyframes entra{from{opacity:0}to{opacity:1}}
@keyframes surge{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#prog-tr{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.04);z-index:40}
#prog{display:block;height:100%;width:0;background:var(--line2);transition:width .6s var(--ease)}

.bt{white-space:nowrap;border:0;border-radius:999px;padding:22px 38px;font:700 28px/1 var(--tit);background:var(--ink);color:var(--bg);transition:transform .15s var(--ease)}
.bt:hover{transform:translateY(-2px)}
.bt:active{transform:scale(.97)}
.bt.sec{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2)}
.bts{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}
.rotulo{font:500 20px/1 var(--mono);letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.dica{font:400 24px/1.35 var(--texto);color:var(--dim);margin:18px 0 0}
.fonte{font:400 19px/1.3 var(--mono);color:var(--dim);margin:auto 0 0;padding-top:20px;letter-spacing:.01em}
.fonte i{font-style:italic}
h1,h2{font-family:var(--tit);font-weight:800;letter-spacing:-.03em;margin:0}

/* ── cena (SVG) ── */
svg.cena{display:block;width:100%;height:auto}
.cena .f{fill:var(--fig)} .cena .g{fill:var(--fig2)} .cena .k{fill:var(--road)}
.cena .sf{stroke:var(--fig);fill:none;stroke-linecap:round;stroke-linejoin:round}
.cena .sg{stroke:var(--fig2);stroke-linecap:round}
.cena .sk{stroke:var(--road);stroke-linecap:round;stroke-linejoin:round}
.cena .calc{fill:#191C24} .cena .pista{fill:var(--road)}
.cena .faixa-c{stroke:rgba(238,236,230,.22);stroke-width:4;stroke-dasharray:30 26}
.cena .meio-fio{stroke:rgba(238,236,230,.12);stroke-width:3}
.cena .zebra{fill:rgba(238,236,230,.075)}
.cena .pn{font:800 46px var(--tit);text-anchor:middle;letter-spacing:-.02em}
.cena .pa{fill:var(--sa)} .cena .pb{fill:var(--sb)}
.cena .seta{fill:none;stroke-width:5;stroke-dasharray:14 11;stroke-linecap:round}
.cena .seta.sa{stroke:var(--sa)} .cena .seta.sb{stroke:var(--sb)}
.cena .ponta{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.cena .ponta.sa{stroke:var(--sa)} .cena .ponta.sb{stroke:var(--sb)}
.cena .lata{fill:#2A2F3A;stroke:rgba(238,236,230,.35);stroke-width:2}
.cena .vidro{fill:#0C0E13} .cena .cab{fill:#232833}
.cena .farol{fill:#F3E6BC} .cena .pneu{fill:#08090C}
.cena .fio{stroke:var(--ink);stroke-width:2;fill:none}
.cena .etq{fill:var(--ink)} .cena .etq-t{font:700 24px var(--tit);fill:var(--bg);text-anchor:middle}
.cena .muro{fill:#3A3F4B} .cena .muro-f{fill:var(--ouro);opacity:.75}
.cena .poste{fill:#3A3F4B} .cena .caixa{fill:#0C0E13;stroke:rgba(238,236,230,.25);stroke-width:2}
.cena .verm{fill:var(--verm)} .cena .verde{fill:var(--verde)} .cena .apag{fill:#262A33}
.cena .freio{fill:rgba(236,106,111,.14);stroke:var(--verm);stroke-width:1.5} .cena .freio-t{font:700 18px var(--tit);fill:var(--verm);text-anchor:middle}
.cena .escudo{fill:rgba(217,180,91,.07);stroke:var(--sa);stroke-width:3}
.cena .anel{fill:none;stroke:var(--sb);stroke-width:3}
.cena .pd{font:500 32px var(--texto);fill:var(--mute);text-anchor:middle}

.cena .dorm{stroke:#262A33;stroke-width:54;stroke-dasharray:8 14;fill:none}
.cena .tr-a{stroke:rgba(238,236,230,.45);stroke-width:30;fill:none}
.cena .tr-b{stroke:#191C24;stroke-width:22;fill:none}
.cena .vag{fill:#3A3F4B;stroke:rgba(238,236,230,.45);stroke-width:2} .cena .vag-l{stroke:rgba(238,236,230,.2);stroke-width:2;fill:none}
.cena .alav{stroke:var(--fig2);stroke-width:7;stroke-linecap:round} .cena .alav-p{fill:var(--verm)}
.cena .cap{font:500 26px var(--texto);fill:var(--mute);text-anchor:middle}
.cena .ponte{fill:#252A35} .cena .ponte-l{stroke:rgba(238,236,230,.3);stroke-width:3;fill:none}
.cena .cama{fill:#232833;stroke:rgba(238,236,230,.2);stroke-width:2} .cena .trav{fill:#3A3F4B} .cena .lencol{fill:rgba(143,179,224,.3)}
.cena .div{stroke:rgba(238,236,230,.15);stroke-width:3;stroke-dasharray:14 12}
.cena .pulso{stroke:var(--verde);stroke-width:4;fill:none;stroke-linejoin:round;stroke-linecap:round}
.cena .barra-f{fill:rgba(238,236,230,.08)} .cena .barra{fill:var(--verde)}
.cena .lua{fill:#E9E6DE;opacity:.75} .cena .loja{fill:#20242E} .cena .toldo{fill:var(--verde);opacity:.5} .cena .toldo2{fill:#E9E6DE;opacity:.45}
.cena .cruz{stroke:var(--verde);stroke-width:12;stroke-linecap:round} .cena .frasco{fill:var(--ouro)} .cena .preco{fill:var(--ink)}
.cena .preco-t{font:800 20px var(--tit);fill:var(--bg);text-anchor:middle} .cena .porta{fill:#151820;stroke:rgba(238,236,230,.15);stroke-width:2} .cena .nota{fill:var(--verde);opacity:.8}

/* ── cartão de cena / parte ── */
.cn{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:90px;align-items:center;padding:0 130px;overflow:hidden}
.cn.bloco{grid-template-columns:minmax(0,1fr)}
.cn-num{position:absolute;right:-30px;bottom:-170px;font:800 820px/1 var(--tit);letter-spacing:-.06em;color:rgba(238,236,230,.035);pointer-events:none;animation:numero 1.6s var(--ease) both}
.cn.bloco .cn-num{right:60px}
@keyframes numero{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
.cn-txt{position:relative;z-index:1}
.cn h1{font-size:170px;line-height:.95;letter-spacing:-.05em;margin:26px 0 0;animation:sobe .9s var(--ease) both .15s}
.cn-linha{display:block;height:2px;background:var(--ouro);margin:40px 0 36px;width:240px;transform-origin:left;animation:linha 1s var(--ease) both .5s}
.cn p{font:300 46px/1.3 var(--texto);color:var(--ink);margin:0;max-width:1000px;animation:sobe .9s var(--ease) both .6s}
.cn .dica{font-size:24px;color:var(--dim);margin-top:30px}
.cn-pts{display:flex;gap:12px;margin-top:44px;animation:sobe .9s var(--ease) both .8s}
.cn-pts i{width:46px;height:5px;border-radius:3px;background:rgba(238,236,230,.12)}
.cn-pts i.feito{background:rgba(238,236,230,.45)} .cn-pts i.agora{background:var(--ouro)}
.cn-cena{position:relative;z-index:1;border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px var(--line);animation:aparece 1.4s var(--ease) both .3s}
@keyframes sobe{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes linha{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes aparece{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}

/* ── capa ── */
.capa{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 640px;gap:90px;align-items:center;padding:0 120px}
.capa h1{font-size:150px;line-height:.95;margin:26px 0 36px;letter-spacing:-.045em}
.capa .lead{font:300 44px/1.3 var(--texto);color:var(--ink);margin:0 0 34px;max-width:1000px}
.capa .fato{font:400 28px/1.4 var(--texto);color:var(--mute);max-width:900px;padding-left:22px;border-left:1px solid var(--line2)}
.capa .fato b{color:var(--ink);font-variant-numeric:tabular-nums}
.capa-cena{border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px var(--line);opacity:.95}

/* ── entrada ── */
.entrada{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:90px;padding:60px 120px}
.qr{flex:none;width:560px;height:560px;background:#fff;border-radius:24px;padding:26px}
.qr svg{width:100%;height:100%;display:block}
.en-txt{max-width:880px}
.en-txt.so{max-width:1200px}
.en-txt h2{font-size:64px;line-height:1.05;margin:20px 0 26px}
.en-txt p{font:400 32px/1.38 var(--texto);color:var(--mute);margin:0 0 22px}
.en-txt p b{color:var(--ink)}
.cod{font:800 180px/1 var(--tit);letter-spacing:.14em;margin:10px 0 26px}
.conta{font-size:30px!important}
.conta b{font:800 56px/1 var(--tit);font-variant-numeric:tabular-nums;margin-right:6px}

/* ── como funciona ── */
.como{position:absolute;inset:0;padding:110px 150px;display:flex;flex-direction:column}
.como h2{font-size:84px;line-height:1.02;margin:22px 0 60px;max-width:1500px}
.como ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:34px 70px;max-width:1650px}
.como li{display:flex;gap:26px;align-items:baseline;animation:surge .55s var(--ease) both}
.como li:nth-child(2){animation-delay:.08s}.como li:nth-child(3){animation-delay:.16s}.como li:nth-child(4){animation-delay:.24s}
.como li b{font:500 22px/1 var(--mono);color:var(--dim);flex:none;width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);display:flex;align-items:center;justify-content:center}
.como li span{font:400 36px/1.35 var(--texto);color:var(--mute)}

/* ── dilema ── */
.dl{position:absolute;inset:0;display:grid;grid-template-columns:780px minmax(0,1fr);gap:80px;padding:60px 100px 54px;align-items:stretch}
.dl-cena{align-self:center;border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.dl-pn{display:flex;flex-direction:column;min-width:0;padding-top:16px}
.dl-pn h2{font-size:64px;line-height:1.06;margin:22px 0 40px}
.dl-pn h2.menor{font-size:40px;color:var(--mute);letter-spacing:-.02em;margin-bottom:34px}
.ops{display:flex;flex-direction:column;gap:18px}
.op{border-radius:20px;padding:26px 32px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.02);position:relative;animation:surge .5s var(--ease) both}
.op.b{animation-delay:.08s}
.op::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:2px}
.op.a::before{background:var(--sa)} .op.b::before{background:var(--sb)}
.op-n{font:700 36px/1.1 var(--tit);letter-spacing:-.02em}
.op.a .op-n{color:var(--sa)} .op.b .op-n{color:var(--sb)}
.op p{margin:10px 0 0;font:400 34px/1.3 var(--texto);color:var(--ink)}
.vt{display:flex;align-items:baseline;gap:18px;margin-top:auto;padding-top:30px}
.vt b{font:800 130px/1 var(--tit);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.vt b.pulsa{animation:pulsa .5s var(--ease)}
@keyframes pulsa{0%{opacity:.5;transform:translateY(4px)}100%{opacity:1;transform:none}}
.vt span{font:400 30px/1.3 var(--texto);color:var(--mute)}
.vt.maos span{font:400 36px/1.35 var(--texto);color:var(--ink)}
.sp-top span em{display:block;font:400 24px/1.3 var(--texto);color:var(--mute);margin-top:6px}
.dl-pn .dica{margin-top:8px}

.rt-tit{font:500 20px/1 var(--mono);letter-spacing:.2em;color:var(--dim);text-transform:uppercase;margin:6px 0 22px}
.split{display:flex;flex-direction:column;gap:26px}
.sp{animation:surge .5s var(--ease) both}.sp.b{animation-delay:.1s}
.sp-top{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.sp-top span{font:700 36px/1.1 var(--tit)}
.sp.a .sp-top span{color:var(--sa)} .sp.b .sp-top span{color:var(--sb)}
.sp-top b{font:800 84px/1 var(--tit);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sp-tr{height:14px;border-radius:7px;background:rgba(255,255,255,.05);margin-top:12px;overflow:hidden}
.sp-tr i{display:block;height:100%;border-radius:7px;transform-origin:left;animation:cresce 1s var(--ease) both .15s}
.sp.a .sp-tr i{background:var(--sa)} .sp.b .sp-tr i{background:var(--sb)}
@keyframes cresce{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sp small{display:block;font:500 20px/1 var(--mono);color:var(--dim);margin-top:10px;font-variant-numeric:tabular-nums}
.frase{font:400 36px/1.32 var(--texto);color:var(--ink);margin:36px 0 0;animation:surge .6s var(--ease) both .3s}
.frase.sub{font-size:28px;color:var(--mute);margin-top:18px}
.frase.grande{font:700 44px/1.22 var(--tit);letter-spacing:-.02em}
.frase b{color:var(--mundo)}
.vazio{font:400 32px/1.35 var(--texto);color:var(--ouro);padding:28px 32px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line2)}
h2.dim{font-size:58px;line-height:1.05;margin:0 0 34px}

/* comparação divergente */
.dv{display:flex;flex-direction:column;gap:18px}
.dv-eixo{display:flex;justify-content:space-between;margin-left:150px;margin-right:110px;font:500 20px/1.2 var(--mono);color:var(--dim);letter-spacing:.04em}
.dv-eixo span:last-child{text-align:right}
.dv-l{display:grid;grid-template-columns:150px minmax(0,1fr) 110px;align-items:center;animation:surge .5s var(--ease) both}
.dv-l.mundo{animation-delay:.25s}.dv-l.brasil{animation-delay:.5s}
.dv-n{font:700 30px/1 var(--tit)}
.dv-t{position:relative;height:40px;border-radius:8px;background:rgba(255,255,255,.035)}
.dv-t em{position:absolute;left:50%;top:-6px;bottom:-6px;width:1px;background:var(--line2)}
.dv-t i{position:absolute;top:0;bottom:0;border-radius:6px}
.dv-l b{text-align:right;font:800 40px/1 var(--tit);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dv-l.turma i{background:var(--turma)} .dv-l.mundo i{background:var(--mundo)} .dv-l.brasil i{background:var(--brasil);opacity:.8}
.dv-l.mundo b,.dv-l.mundo .dv-n{color:var(--mundo)} .dv-l.brasil b,.dv-l.brasil .dv-n{color:var(--brasil)}
.dv-l.turma b:not(:empty){font-size:40px}
.eixo-txt{font:400 21px/1.3 var(--mono);color:var(--dim);margin:16px 0 0 150px}
.pct{display:flex;flex-direction:column;gap:20px}
.pc-l{display:grid;grid-template-columns:330px minmax(0,1fr) 120px;align-items:center;gap:20px;animation:surge .5s var(--ease) both}
.pc-l.mundo{animation-delay:.25s}
.pc-t{height:40px;border-radius:8px;background:rgba(255,255,255,.035);overflow:hidden}
.pc-t i{display:block;height:100%;border-radius:8px}
.pc-l.turma i{background:var(--turma)} .pc-l.mundo i{background:var(--mundo)}
.pc-l b{text-align:right;font:800 44px/1 var(--tit);font-variant-numeric:tabular-nums}
.pc-l.mundo b,.pc-l.mundo .dv-n{color:var(--mundo)}
.pc-l .dv-n{font-size:27px;line-height:1.15}
.pct + .eixo-txt{margin-left:0}

/* textos do mundo sem números */
.razoes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.rz{border-radius:18px;padding:22px 26px;box-shadow:inset 0 0 0 1px var(--line);animation:surge .5s var(--ease) both .2s}
.rz span{font:700 26px/1.1 var(--tit)} .rz.b span{color:var(--sb)} .rz.a span{color:var(--sa)}
.rz p{font:400 26px/1.3 var(--texto);color:var(--mute);margin:12px 0 0;padding-left:18px;border-left:1px solid var(--line2)}
.pct.mini{margin-top:30px;gap:12px}.pct.mini .pc-l{grid-template-columns:200px minmax(0,1fr) 110px}
.pct.mini + .eixo-txt{margin-left:0}
.dl-pn h2.longa{font-size:44px;line-height:1.12}
.pc-l.brasil i{background:var(--brasil);opacity:.85} .pc-l.brasil b,.pc-l.brasil .dv-n{color:var(--brasil)}

/* ── explicação ── */
.exp{position:absolute;inset:0;padding:80px 120px 60px;display:flex;flex-direction:column}
.exp h2{font-size:60px;line-height:1.06;margin:18px 0 44px;max-width:1600px}
.exp .frase{max-width:1500px}
.ms{display:flex;align-items:stretch;gap:20px}
.ms-c{flex:1;border-radius:22px;padding:30px 34px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.02);animation:surge .55s var(--ease) both}
.ms-c:nth-child(3){animation-delay:.25s}.ms-c:nth-child(5){animation-delay:.5s}
.ms-n{font:700 34px/1.1 var(--tit)}
.ms-g{font:800 150px/1 var(--tit);letter-spacing:-.05em;color:var(--mundo);margin:20px 0 6px;font-variant-numeric:tabular-nums}
.ms-s{font:400 24px/1.3 var(--texto);color:var(--mute);margin-bottom:24px}
.ms-t{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding:12px 0 0;margin-top:10px}
.ms-t span{font:500 20px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ms-t b{font:800 44px/1 var(--tit);font-variant-numeric:tabular-nums}
.ms-t.br b{color:var(--brasil)}
.ms-seta{flex:none;width:30px;align-self:center;height:2px;background:var(--line2);position:relative}
.ms-seta::after{content:"";position:absolute;right:-2px;top:-6px;border:7px solid transparent;border-left-color:var(--line2)}
.dois{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.dois .cd{position:relative}
.dois h3{font:800 42px/1.1 var(--tit);letter-spacing:-.025em;margin:6px 0 16px}
.dois p{font:400 31px/1.36 var(--texto);margin:0 0 16px}
.dois p.mini{font-size:25px;color:var(--mute);margin:0;padding-top:16px;border-top:1px solid var(--line)}
.dois p.mini b{display:inline;font:inherit;font-weight:700;color:var(--ink);letter-spacing:0}
.cd-n{font:500 20px/1 var(--mono);color:var(--dim)}
.lst{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.li-c{border-radius:20px;padding:26px 32px;box-shadow:inset 0 0 0 1px var(--line);animation:surge .5s var(--ease) both}
.li-c:nth-child(2){animation-delay:.08s}.li-c:nth-child(3){animation-delay:.16s}.li-c:nth-child(4){animation-delay:.24s}
.li-c b{font:700 32px/1.15 var(--tit);color:var(--mundo)}
.li-c p{font:400 28px/1.36 var(--texto);margin:12px 0 0}
.vds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.vd{border-radius:20px;padding:28px 30px;box-shadow:inset 0 0 0 1px var(--line);animation:surge .5s var(--ease) both}
.vd:nth-child(2){animation-delay:.1s}.vd:nth-child(3){animation-delay:.2s}
.tag{display:inline-block;font:500 18px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border-radius:999px}
.tag.meio{color:var(--verm);box-shadow:inset 0 0 0 1px rgba(236,106,111,.45)} .tag.desvio{color:var(--sb);box-shadow:inset 0 0 0 1px rgba(143,179,224,.45)}
.vd p{font:400 31px/1.36 var(--texto);margin:20px 0 0}
.q2{font:700 46px/1.2 var(--tit);letter-spacing:-.025em;margin:80px 0 0;max-width:1500px;animation:surge .6s var(--ease) both .5s}
.lead2{font:300 40px/1.35 var(--texto);margin:0 0 40px;max-width:1550px}
.rawls h2{font-size:96px;margin-bottom:30px}

/* ── a regra (véu) ── */
.veu{position:absolute;inset:0;padding:80px 120px 60px;display:flex;flex-direction:column}
.veu h2{font-size:62px;line-height:1.06;margin:18px 0 40px;max-width:1600px}
.veu h2.grande{font-size:96px;line-height:1.02;margin-top:30px;animation:sobe .9s var(--ease) both .1s}
.rgs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rg{display:flex;gap:24px;align-items:flex-start;border-radius:20px;padding:28px 32px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.02);animation:surge .5s var(--ease) both}
.rg:nth-child(2){animation-delay:.06s}.rg:nth-child(3){animation-delay:.12s}.rg:nth-child(4){animation-delay:.18s}
.rg-k{font:800 54px/1 var(--tit);color:var(--ouro);width:44px;flex:none}
.rg-n{font:700 36px/1.1 var(--tit)}
.rg p{font:400 28px/1.3 var(--texto);color:var(--mute);margin:10px 0 0}
.veu .vt{margin-top:auto}
.papeis{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:40px;animation:sobe .9s var(--ease) both .5s}
.papeis span{font:500 26px/1 var(--texto);color:var(--mute);padding:14px 20px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2)}
.fil{margin-top:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 30px}
.fil .rt-tit{grid-column:1/-1;margin-bottom:6px}
.fil div{font:400 25px/1.3 var(--texto);color:var(--mute)} .fil div span{font:500 18px/1 var(--mono);color:var(--dim);margin-right:12px;letter-spacing:.06em}
.rv{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.rv .sp{margin-bottom:18px}.rv .sp-top span{font:600 28px/1.15 var(--tit);color:var(--ink)}.rv .sp-top b{font-size:52px}
.rv-c:first-child .sp-tr i{background:var(--mundo)} .rv-c:last-child .sp-tr i{background:var(--sb)}
.mx.largo{max-width:1500px}
.mx-g.q4{grid-template-columns:repeat(4,minmax(0,1fr))}.mx-g.q4 span{font-size:24px;line-height:1.15;color:var(--ink)}.mx-g.q4 input{font-size:72px}

/* perfil em duas colunas */
.pf2{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.pf-tit{font:700 32px/1.1 var(--tit);margin-bottom:14px}
.pf2 .pf-l{grid-template-columns:330px minmax(0,1fr) 84px 84px;gap:16px}
.pf2 .pf-n{font-size:25px}
.pf2 .pf-l b{font-size:30px}
.pf-t.pc i{position:absolute;height:17px;border-radius:4px}

/* ── perfil ── */
.perfil{position:absolute;inset:0;padding:70px 120px 60px;display:flex;flex-direction:column}
.perfil h2{font-size:58px;line-height:1.05;margin:18px 0 22px}
.leg{display:flex;gap:30px;align-items:center;font:400 24px/1 var(--texto);color:var(--mute);margin-bottom:26px}
.leg span{display:flex;align-items:center;gap:10px}
.leg i{width:26px;height:12px;border-radius:3px;display:block}
.leg i.turma{background:var(--turma)} .leg i.mundo{background:var(--mundo)}
.leg .leg-d{color:var(--dim);font-size:21px;margin-left:auto}
.pf{display:flex;flex-direction:column;gap:12px}
.pf-l{display:grid;grid-template-columns:500px minmax(0,1fr) 100px 100px;gap:24px;align-items:center;padding:12px 0;border-top:1px solid var(--line);animation:surge .5s var(--ease) both}
.pf-n{font:500 27px/1.2 var(--texto)}
.pf-t{position:relative;height:44px}
.pf-t em{position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--line2)}
.pf-t i{position:absolute;height:17px;border-radius:4px}
.pf-t i.turma{top:2px;background:var(--turma)} .pf-t i.mundo{bottom:2px;background:var(--mundo)}
.pf-l b{text-align:right;font:800 34px/1 var(--tit);font-variant-numeric:tabular-nums}
.pf-l b.mundo{color:var(--mundo)}
.perfil .dica{margin-top:18px}

/* ── incômodo ── */
.inc{position:absolute;inset:0;padding:80px 120px 60px;display:flex;flex-direction:column}
.inc h2{font-size:62px;line-height:1.06;margin:18px 0 46px;max-width:1500px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cd{border-radius:20px;padding:30px 34px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.02);animation:surge .55s var(--ease) both}
.cd:nth-child(2){animation-delay:.08s}.cd:nth-child(3){animation-delay:.16s}.cd:nth-child(4){animation-delay:.24s}
.cd b{display:block;font:800 72px/1 var(--tit);letter-spacing:-.03em;color:var(--mundo);font-variant-numeric:tabular-nums}
.cd b.pq{font-size:40px;line-height:1.1;letter-spacing:-.02em}
.cd p{font:400 31px/1.33 var(--texto);margin:16px 0 12px}
.cd small{font:500 19px/1 var(--mono);color:var(--dim);letter-spacing:.04em}

/* ── regra ── */
.regra{position:absolute;inset:0;padding:80px 120px 60px;display:flex;flex-direction:column}
.regra h2{font-size:56px;line-height:1.08;margin:18px 0 38px;max-width:1600px}
blockquote{margin:0 0 40px;padding:6px 0 6px 34px;border-left:2px solid var(--mundo);font:400 44px/1.3 var(--texto);max-width:1600px;animation:surge .6s var(--ease) both .1s}
blockquote span{display:block;font:500 20px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mundo);margin-bottom:14px}
.cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cmp div{border-radius:20px;padding:26px 30px;box-shadow:inset 0 0 0 1px var(--line);animation:surge .5s var(--ease) both .3s}
.cmp span{font:500 18px/1 var(--mono);letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.cmp p{font:400 30px/1.3 var(--texto);margin:12px 0 16px}
.cmp b{font:700 26px/1.25 var(--tit)}
.cmp b.ok{color:var(--verde)} .cmp b.nao{color:var(--verm)}

/* ── fim ── */
.fim{position:absolute;inset:0;padding:110px 150px;display:flex;flex-direction:column;justify-content:center}
.fim .q{font:800 86px/1.08 var(--tit);letter-spacing:-.035em;margin:30px 0 0;max-width:1600px}
.fim .sub2{font:300 44px/1.3 var(--texto);color:var(--mute);margin:40px 0 0}

/* ── painéis ── */
#vivo,#maos{position:absolute;inset:0;z-index:46;background:rgba(11,12,16,.97);display:flex;align-items:center;justify-content:center;padding:60px}
#vivo[hidden],#maos[hidden]{display:none}
.vv{display:flex;gap:80px;align-items:center;max-width:1700px}
.vv-qr{flex:none;width:520px;height:520px;background:#fff;border-radius:24px;padding:26px}
.vv-qr svg{width:100%;height:100%;display:block}
.vv-txt{min-width:0;max-width:900px}
.vv-txt h2{font-size:66px;margin:0 0 24px}
.vv-txt p{font:400 30px/1.35 var(--texto);margin:0 0 22px;color:var(--mute)}
.vv-txt p b{color:var(--ink)}
.vv-cod{font:800 160px/1 var(--tit);letter-spacing:.14em;margin:8px 0 24px}
.vv-est{font-size:22px!important;color:var(--dim)!important}
.vv-msg{color:var(--ouro)!important}
.mx{width:100%;max-width:1100px}
.mx h2{font-size:64px;margin:16px 0 14px}
.mx p{font:400 28px/1.35 var(--texto);color:var(--mute);margin:0 0 30px}
.mx-g{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.mx-g label{display:flex;flex-direction:column;gap:12px;border-radius:20px;padding:26px 30px;box-shadow:inset 0 0 0 1px var(--line2)}
.mx-g span{font:700 34px/1 var(--tit)}
.mx-g .a span{color:var(--sa)} .mx-g .b span{color:var(--sb)}
.mx-g input{width:100%;border:0;background:rgba(255,255,255,.04);border-radius:14px;padding:12px 20px;font:800 96px/1.1 var(--tit);font-variant-numeric:tabular-nums;outline:0;box-shadow:inset 0 0 0 1px var(--line)}
.mx-g input:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}
.mx-g small{font:500 20px/1 var(--mono);color:var(--dim)}

/* rodapé do professor */
#dock{position:fixed;right:16px;top:14px;z-index:100;display:flex;gap:6px;padding:8px;border-radius:999px;background:rgba(20,21,26,.88);backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.07);transition:opacity .4s,transform .4s}
#dock.dorme{opacity:0;transform:translateY(-10px);pointer-events:none}
#dock button{min-width:46px;height:46px;border-radius:999px;border:0;background:transparent;color:#EEECE6;display:flex;align-items:center;justify-content:center;position:relative;padding:0 10px}
#dock button:hover{background:rgba(255,255,255,.09)}
#dock button svg{width:22px;height:22px}
#dock button.on{background:#EEECE6;color:#0B0C10}
#dock button .nvivo{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:#5CCB9F;color:#0B0C10;font:700 12px/20px Arial,sans-serif;padding:0 5px}
#dock button[data-dica]:hover::after{content:attr(data-dica);position:absolute;top:56px;right:0;white-space:nowrap;font:600 13px/1 Arial,sans-serif;background:#EEECE6;color:#0B0C10;padding:8px 10px;border-radius:8px}
#aviso{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:120;background:#EEECE6;color:#0B0C10;font:600 18px/1.3 Arial,sans-serif;padding:12px 20px;border-radius:12px;opacity:0;transition:all .3s;pointer-events:none;max-width:90vw;text-align:center}
#aviso.on{opacity:1;transform:translate(-50%,0)}

/* tela estreita (≈ 1500 px de palco) */
.estreito .cn{grid-template-columns:minmax(0,1fr) 460px;gap:50px;padding:0 80px}
.estreito .cn h1{font-size:136px}
.estreito .cn p{font-size:38px}
.estreito .exp,.estreito .veu{padding:60px 70px 44px}
.estreito .exp h2,.estreito .veu h2{font-size:50px;margin-bottom:30px}
.estreito .veu h2.grande{font-size:80px}
.estreito .ms-g{font-size:120px}
.estreito .dois p{font-size:27px}.estreito .dois p.mini{font-size:22px}
.estreito .li-c p,.estreito .vd p{font-size:25px}
.estreito .rg p{font-size:24px}.estreito .rg-n{font-size:31px}
.estreito .pf2{gap:40px}.estreito .pf2 .pf-l{grid-template-columns:220px minmax(0,1fr) 70px 70px}.estreito .pf2 .pf-n{font-size:21px}
.estreito .q2{font-size:38px}
.estreito .rawls h2{font-size:80px}
.estreito .lead2{font-size:34px}
.estreito .capa{grid-template-columns:minmax(0,1fr) 520px;gap:60px;padding:0 80px}
.estreito .capa h1{font-size:124px}
.estreito .capa .lead{font-size:38px}
.estreito .dl{grid-template-columns:660px minmax(0,1fr);gap:54px;padding:50px 64px 44px}
.estreito .dl-pn h2{font-size:54px}
.estreito .op p{font-size:30px}
.estreito .dv-l{grid-template-columns:130px minmax(0,1fr) 96px}
.estreito .dv-eixo{margin-left:130px;margin-right:96px}
.estreito .eixo-txt{margin-left:130px}
.estreito .pc-l{grid-template-columns:260px minmax(0,1fr) 110px}
.estreito .frase{font-size:32px}
.estreito .entrada{gap:60px;padding:60px 70px}
.estreito .qr{width:460px;height:460px}
.estreito .cod{font-size:150px}
.estreito .como{padding:90px 90px}
.estreito .como h2{font-size:72px}
.estreito .como li span{font-size:32px}
.estreito .perfil,.estreito .inc,.estreito .regra{padding-left:80px;padding-right:80px}
.estreito .pf-l{grid-template-columns:440px minmax(0,1fr) 86px 86px}
.estreito .pf-n{font-size:24px}
.estreito .cd p{font-size:28px}
.estreito .cmp p{font-size:27px}
.estreito blockquote{font-size:38px}
.estreito .fim{padding:90px 100px}
.estreito .fim .q{font-size:74px}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.estreito .perfil{padding-top:56px;padding-bottom:44px}
.estreito .perfil h2{font-size:48px}
.estreito .pf{gap:8px}
.estreito .pf-l{padding:8px 0}